/*
 * ASCBD additive styles.
 * Only new components that have no equivalent in the existing theme
 * (style.css / responsive.css). Uses the theme's own tokens
 * (fast-blue #2997FF, cod-gray #131313, extra-dark-gray #232323) so new
 * pieces sit visually inside the existing dark theme, not beside it.
 * Never redeclares an existing theme class.
 */

.finder-widget {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: linear-gradient(145deg, #19191b 0%, #111113 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 24px;
    padding: clamp(1.35rem, 3.2vw, 3rem);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.16);
}

.finder-widget::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(circle at 100% 0%, rgba(41, 151, 255, 0.14), transparent 34%), radial-gradient(circle at 0% 100%, rgba(41, 151, 255, 0.06), transparent 28%);
}

.finder-topline {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 28px;
    margin-bottom: 28px;
}

.finder-intro { max-width: 570px; }

.finder-kicker,
.finder-stage-overline {
    display: block;
    color: #62b3ff;
    font-family: "Poppins", sans-serif;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.16em;
    line-height: 1.2;
    text-transform: uppercase;
}

.finder-title {
    margin: 10px 0 8px;
    color: #fff;
    font-family: "Poppins", sans-serif;
    font-size: clamp(22px, 2.2vw, 32px);
    font-weight: 600;
    letter-spacing: -0.03em;
    line-height: 1.15;
}

.finder-lede {
    max-width: 52ch;
    margin: 0;
    color: rgba(255, 255, 255, 0.62);
    font-size: 14px;
    line-height: 1.65;
}

.finder-progress-meta {
    min-width: 145px;
    padding-top: 3px;
    text-align: right;
}

.finder-progress-label {
    display: block;
    color: rgba(255, 255, 255, 0.48);
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.finder-progress-value {
    display: block;
    margin-top: 3px;
    color: rgba(255, 255, 255, 0.52);
    font-size: 13px;
}

.finder-progress-value strong {
    color: #fff;
    font-size: 20px;
    font-weight: 600;
}

.finder-progress-track {
    display: block;
    width: 100%;
    height: 4px;
    margin-top: 10px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
}

.finder-progress-track span {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: #2997ff;
    transition: width 0.25s ease;
}

/* On small phones the 3rem inset left only ~231px of usable width, which
   forced the option grid to a single column and turned 10 services into a
   very long stack. Tightening the inset restores two columns. */
@media (max-width: 760px) {
    .finder-widget { padding: 1.5rem; }
    .finder-topline { display: block; }
    .finder-progress-meta { max-width: 240px; margin-top: 20px; text-align: left; }
}

@media (max-width: 420px) {
    .finder-widget { padding: 1.15rem; }
    .finder-title { font-size: 21px; }
}

.finder-steps {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 24px;
}

.finder-steps::before {
    content: "";
    position: absolute;
    top: 50%;
    right: 10%;
    left: 10%;
    height: 1px;
    background: rgba(255, 255, 255, 0.12);
}

.finder-step-pill {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    width: 100%;
    min-width: 0;
    gap: 8px;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.03em;
    padding: 11px 14px;
    border-radius: 13px;
    background: #1d1d20;
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: rgba(255, 255, 255, 0.55);
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.finder-step-pill .finder-step-num {
    display: inline-flex; align-items: center; justify-content: center;
    width: 18px; height: 18px; border-radius: 50%;
    font-size: 11px; line-height: 1;
    border: 1px solid rgba(255, 255, 255, 0.28); color: inherit;
}
.finder-step-pill .finder-step-value {
    min-width: 0;
    max-width: 130px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 500; opacity: 0.9; padding-left: 2px;
}
/* Completed step — enabled, checkmark, clickable to edit. */
.finder-step-pill.done { color: #fff; border-color: rgba(41, 151, 255, 0.55); background: #1d1d20; }
.finder-step-pill.done .finder-step-num { background: #2997FF; border-color: #2997FF; color: #fff; }
.finder-step-pill:not(.active):not(:disabled):hover { border-color: #2997FF; color: #fff; }
/* Current step. */
.finder-step-pill.active { background: #2997FF; border-color: #2997FF; color: #fff; cursor: default; box-shadow: 0 8px 22px rgba(41, 151, 255, 0.22); }
.finder-step-pill.active .finder-step-num { border-color: rgba(255,255,255,0.7); }
/* Future / locked step. */
.finder-step-pill:disabled { opacity: 0.5; cursor: not-allowed; }
.finder-step-pill:focus-visible { outline: 2px solid #2997FF; outline-offset: 2px; }

.finder-bar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; min-height: 34px; margin-bottom: 16px; }
.finder-back {
    display: inline-flex; align-items: center; gap: 6px;
    font-family: inherit; font-size: 13px; font-weight: 600;
    padding: 7px 15px; border-radius: 30px;
    background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.2); color: #fff;
    cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease;
}
.finder-back:hover { background: rgba(255,255,255,0.12); border-color: #2997FF; }
.finder-back:focus-visible { outline: 2px solid #2997FF; outline-offset: 2px; }
.finder-crumb { min-width: 0; font-size: 13px; color: rgba(255,255,255,0.58); }
.finder-startover { background: none; border: 0; color: #2997FF; font: inherit; font-weight: 600; cursor: pointer; padding: 2px; }
.finder-startover:hover { text-decoration: underline; }
.finder-startover:focus-visible { outline: 2px solid #2997FF; outline-offset: 2px; border-radius: 3px; }
/* Selected option/tile when returning to a completed step. */
.finder-tile.is-selected, .finder-option.is-selected { border-color: #2997FF; box-shadow: inset 0 0 0 1px #2997FF; }
.finder-tile:focus-visible, .finder-option:focus-visible { outline: 2px solid #2997FF; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
    .finder-step-pill, .finder-back, .finder-tile, .finder-option { transition: none; }
}

.finder-options {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 10px;
}

.finder-option {
    background: #1d1d1d;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    padding: 14px 16px;
    font-size: 14px;
    font-weight: 500;
    text-align: left;
    color: #fff;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
    display: flex;
    align-items: center;
    gap: 11px;
}
.finder-option img { width: 38px; height: 38px; border-radius: 7px; object-fit: contain; background: #fff; }

.finder-option:hover {
    border-color: #2997FF;
}

.finder-options-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.finder-stage {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 17px;
}

.finder-stage-title {
    margin: 7px 0 4px;
    color: #fff;
    font-family: "Poppins", sans-serif;
    font-size: clamp(18px, 1.7vw, 24px);
    font-weight: 600;
    letter-spacing: -0.025em;
    line-height: 1.2;
}

.finder-stage-copy {
    margin: 0;
    color: rgba(255, 255, 255, 0.58);
    font-size: 13px;
    line-height: 1.55;
}

.finder-result-count {
    flex: 0 0 auto;
    padding: 7px 10px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    color: rgba(255, 255, 255, 0.56);
    font-size: 11px;
    white-space: nowrap;
}

.finder-tile {
    min-height: 122px;
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    padding: 16px;
    text-align: left;
    color: #fff;
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 24px;
    align-items: center;
    gap: 12px;
}

.finder-tile-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 1px solid rgba(41, 151, 255, 0.2);
    border-radius: 13px;
    background: rgba(41, 151, 255, 0.09);
    color: #2997FF;
}

.finder-tile-icon i { font-size: 23px; }

.finder-tile-icon--image { overflow: hidden; background: rgba(255, 255, 255, 0.09); }
.finder-tile-icon--image img { width: 100%; height: 100%; border-radius: inherit; object-fit: contain; filter: invert(1) grayscale(1) contrast(1.2); mix-blend-mode: screen; }

.finder-tile-copy { min-width: 0; }

.finder-tile-label {
    display: block;
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1.3;
}

.finder-tile:hover {
    border-color: #2997FF;
    background: rgba(41, 151, 255, 0.09);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.14);
    transform: translateY(-3px);
}

.finder-tile-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    color: rgba(255, 255, 255, 0.58);
    font-size: 15px;
    transition: color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}

.finder-tile:hover .finder-tile-arrow { background: #2997FF; border-color: #2997FF; color: #fff; transform: translateX(2px); }

.finder-empty {
    color: rgba(255, 255, 255, 0.55);
    font-size: 14px;
    grid-column: 1 / -1;
}

.finder-empty button {
    background: none;
    border: none;
    color: #2997FF;
    font-weight: 600;
    cursor: pointer;
    padding: 0;
}

.finder-result {
    margin-top: 22px;
    background: rgba(255, 255, 255, 0.055);
    border: 1px solid rgba(41, 151, 255, 0.3);
    border-radius: 16px;
    padding: 1.25rem 1.4rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.finder-result .price {
    font-size: 28px;
    font-weight: 700;
    color: #2997FF;
    font-variant-numeric: tabular-nums;
}

@media (min-width: 1440px) {
    .finder-options-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

@media (max-width: 1100px) {
    .finder-options-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
    .finder-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .finder-steps::before { display: none; }
    .finder-stage { align-items: flex-start; display: block; }
    .finder-result-count { display: inline-flex; margin-top: 12px; }
    .finder-options-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .finder-tile { min-height: 112px; grid-template-columns: 38px minmax(0, 1fr); gap: 10px; padding: 13px; }
    .finder-tile-icon { width: 38px; height: 38px; border-radius: 11px; }
    .finder-tile-icon i { font-size: 20px; }
    .finder-tile-arrow { display: none; }
    .finder-tile-label { font-size: 12.5px; }
}

@media (max-width: 420px) {
    .finder-step-pill { padding: 10px 9px; font-size: 11.5px; }
    .finder-step-pill .finder-step-value { display: none; }
    .finder-options-grid { gap: 8px; }
    .finder-tile { min-height: 104px; padding: 11px; }
}

.finder-widget {
    --finder-accent: #2997ff;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: clamp(1.25rem, 3vw, 2.75rem);
    color: #fff;
    background: linear-gradient(132deg, #111821 0%, #101114 56%, #172739 145%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 26px;
    box-shadow: 0 28px 72px rgba(10, 17, 28, 0.18);
}

.finder-widget::before {
    background: radial-gradient(circle at 100% 0%, rgba(41, 151, 255, 0.16), transparent 31%), radial-gradient(circle at 8% 100%, rgba(41, 151, 255, 0.07), transparent 28%);
}

.finder-topline {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 142px;
    align-items: end;
    gap: clamp(1.25rem, 3vw, 3rem);
    margin-bottom: 1.4rem;
}

.finder-intro { max-width: 640px; }

.finder-kicker,
.finder-stage-overline {
    color: #69b7ff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.18em;
}

.finder-title {
    max-width: 18ch;
    margin: 0.55rem 0 0.55rem;
    font-size: clamp(1.7rem, 2.55vw, 2.5rem);
    font-weight: 600;
    line-height: 1.08;
}

.finder-lede {
    max-width: 58ch;
    color: rgba(255, 255, 255, 0.68);
    font-size: 14px;
    line-height: 1.65;
}

.finder-progress-meta {
    min-width: 0;
    padding: 0.15rem 0 0.15rem 1.1rem;
    text-align: left;
    border-left: 1px solid rgba(255, 255, 255, 0.15);
}

.finder-progress-label {
    color: rgba(255, 255, 255, 0.52);
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 0.15em;
}

.finder-progress-value { margin-top: 0.2rem; }

.finder-progress-value strong {
    font-size: 21px;
    font-weight: 600;
}

.finder-progress-track {
    height: 3px;
    margin-top: 0.6rem;
    background: rgba(255, 255, 255, 0.13);
}

.finder-stepper {
    margin-bottom: 1.45rem;
    padding: 1.1rem 0;
    border-top: 1px solid rgba(255, 255, 255, 0.11);
    border-bottom: 1px solid rgba(255, 255, 255, 0.11);
}

.finder-steps {
    gap: 0;
    margin: 0;
}

.finder-steps::before {
    top: 18px;
    right: 12.5%;
    left: 12.5%;
    background: rgba(255, 255, 255, 0.14);
}

.finder-step-pill {
    display: flex;
    justify-content: center;
    min-height: 38px;
    padding: 4px 10px;
    gap: 9px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: rgba(255, 255, 255, 0.55);
    box-shadow: none;
    letter-spacing: 0.02em;
}

.finder-step-pill .finder-step-num {
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    border-color: rgba(255, 255, 255, 0.24);
    background: #15181d;
    font-size: 11px;
}

.finder-step-pill .finder-step-value { display: none; }

.finder-step-pill.done {
    border-color: transparent;
    background: transparent;
    color: rgba(255, 255, 255, 0.88);
}

.finder-step-pill.done .finder-step-num {
    border-color: rgba(41, 151, 255, 0.76);
    background: rgba(41, 151, 255, 0.22);
}

.finder-step-pill.active {
    border-color: transparent;
    background: rgba(41, 151, 255, 0.14);
    box-shadow: inset 0 0 0 1px rgba(84, 177, 255, 0.23);
    color: #fff;
}

.finder-step-pill.active .finder-step-num {
    border-color: var(--finder-accent);
    background: var(--finder-accent);
}

.finder-step-pill:not(.active):not(:disabled):hover {
    border-color: transparent;
    background: rgba(255, 255, 255, 0.07);
    color: #fff;
}

.finder-step-pill:disabled { opacity: 0.58; }

.finder-workspace {
    padding: clamp(1rem, 2vw, 1.5rem);
    background: rgba(5, 9, 15, 0.22);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 20px;
}

.finder-bar {
    min-height: 0;
    margin: 0;
}

.finder-bar:has(.finder-back:not([hidden])),
.finder-bar:has(.finder-crumb:not(:empty)) {
    min-height: 32px;
    margin-bottom: 1rem;
}

.finder-back {
    padding: 6px 13px;
    border-color: rgba(255, 255, 255, 0.19);
    background: rgba(255, 255, 255, 0.06);
}

.finder-crumb {
    color: rgba(255, 255, 255, 0.64);
    font-size: 12.5px;
}

.finder-stage {
    align-items: flex-start;
    gap: 1.25rem;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.finder-stage-title {
    margin: 0.38rem 0 0.3rem;
    font-size: clamp(1.22rem, 1.65vw, 1.62rem);
    line-height: 1.18;
}

.finder-stage-copy {
    max-width: 58ch;
    color: rgba(255, 255, 255, 0.64);
    font-size: 13.5px;
}

.finder-result-count {
    margin-top: 0.1rem;
    padding: 6px 10px;
    color: rgba(255, 255, 255, 0.62);
    background: rgba(255, 255, 255, 0.045);
    border-color: rgba(255, 255, 255, 0.12);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.04em;
}

.finder-options {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
    gap: 12px;
}

.finder-options-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.finder-tile {
    min-height: 110px;
    padding: 14px;
    grid-template-columns: 42px minmax(0, 1fr) 24px;
    gap: 11px;
    background: rgba(255, 255, 255, 0.045);
    border-color: rgba(255, 255, 255, 0.12);
    border-radius: 15px;
}

.finder-tile-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
}

.finder-tile-label {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.35;
}

.finder-tile:hover {
    border-color: rgba(84, 177, 255, 0.82);
    background: rgba(41, 151, 255, 0.11);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18);
    transform: translateY(-2px);
}

.finder-option {
    min-height: 68px;
    padding: 12px 14px;
    background: rgba(255, 255, 255, 0.045);
    border-color: rgba(255, 255, 255, 0.12);
    border-radius: 13px;
    font-size: 13px;
    font-weight: 600;
}

.finder-option:hover { background: rgba(41, 151, 255, 0.1); }

.finder-result {
    margin-top: 1rem;
    padding: 1.15rem 1.25rem;
    gap: 1rem 1.5rem;
    background: linear-gradient(110deg, rgba(41, 151, 255, 0.15), rgba(255, 255, 255, 0.05));
    border-color: rgba(84, 177, 255, 0.35);
    border-radius: 16px;
}

.finder-result-summary,
.finder-result-price {
    display: grid;
    gap: 0.22rem;
}

.finder-result-summary > span,
.finder-result-price > span {
    color: rgba(255, 255, 255, 0.58);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.finder-result-summary strong {
    color: #fff;
    font-size: 17px;
}

.finder-result-summary em {
    max-width: 34ch;
    color: rgba(255, 255, 255, 0.6);
    font-size: 13px;
    font-style: normal;
}

.finder-result-price strong {
    color: #fff;
    font-size: 27px;
    font-variant-numeric: tabular-nums;
}

.finder-result-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-left: auto;
}

@media (max-width: 1100px) {
    .finder-options-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
    .finder-widget {
        padding: 1.25rem;
        border-radius: 20px;
    }

    .finder-topline {
        grid-template-columns: minmax(0, 1fr) 62px;
        align-items: start;
        gap: 1rem;
        margin-bottom: 1.1rem;
    }

    .finder-title {
        max-width: 15ch;
        margin-top: 0.45rem;
        font-size: clamp(1.48rem, 7vw, 1.92rem);
    }

    .finder-lede {
        font-size: 13px;
        line-height: 1.55;
    }

    .finder-progress-meta {
        width: 62px;
        padding: 0.15rem 0 0;
        text-align: right;
        border-left: 0;
    }

    .finder-progress-label {
        font-size: 8px;
        letter-spacing: 0.11em;
    }

    .finder-progress-value {
        margin-top: 0.25rem;
        font-size: 11px;
        white-space: nowrap;
    }

    .finder-progress-value strong { font-size: 18px; }

    .finder-stepper {
        margin-bottom: 1rem;
        padding: 0.8rem 0;
    }

    .finder-steps {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px;
    }

    .finder-steps::before { display: none; }

    .finder-step-pill {
        justify-content: flex-start;
        min-height: 44px;
        padding: 8px 10px;
        background: rgba(255, 255, 255, 0.04);
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
        font-size: 11.5px;
    }

    .finder-step-pill.done { background: rgba(41, 151, 255, 0.07); }

    .finder-workspace {
        padding: 1rem;
        border-radius: 16px;
    }

    .finder-stage {
        display: block;
        margin-bottom: 0.9rem;
        padding-bottom: 0.9rem;
    }

    .finder-stage-title { font-size: 1.25rem; }

    .finder-stage-copy {
        font-size: 12.5px;
        line-height: 1.55;
    }

    .finder-result-count {
        display: inline-flex;
        margin-top: 0.75rem;
    }

    .finder-options,
    .finder-options-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 9px;
    }

    .finder-tile {
        min-height: 105px;
        padding: 11px;
        grid-template-columns: 36px minmax(0, 1fr);
        gap: 9px;
        border-radius: 13px;
    }

    .finder-tile-icon {
        width: 36px;
        height: 36px;
        border-radius: 10px;
    }

    .finder-tile-icon i { font-size: 19px; }

    .finder-tile-label {
        font-size: 12px;
        line-height: 1.35;
    }

    .finder-tile-arrow { display: none; }

    .finder-option {
        min-height: 62px;
        padding: 10px;
        gap: 9px;
        border-radius: 11px;
        font-size: 12px;
        line-height: 1.3;
    }

    .finder-option img {
        width: 34px;
        height: 34px;
        flex: 0 0 34px;
    }

    .finder-result {
        align-items: flex-start;
        padding: 1rem;
    }

    .finder-result-price strong { font-size: 24px; }

    .finder-result-actions {
        width: 100%;
        margin-left: 0;
    }
}

@media (max-width: 420px) {
    .finder-widget { padding: 1rem; }
    .finder-title { font-size: 1.42rem; }
    .finder-workspace { padding: 0.85rem; }
    .finder-step-pill { padding: 7px 8px; }
    .finder-step-pill .finder-step-num { width: 26px; height: 26px; flex-basis: 26px; }
}

/* Repair tracking timeline */
.repair-timeline {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0;
}

.repair-timeline li {
    flex: 1 1 120px;
    text-align: center;
    padding: 0 8px 24px;
    position: relative;
    color: rgba(255, 255, 255, 0.4);
    font-size: 13px;
    font-weight: 600;
}

.repair-timeline li::before {
    content: "";
    display: block;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #1d1d1d;
    border: 2px solid rgba(255, 255, 255, 0.25);
    margin: 0 auto 10px;
}

.repair-timeline li.done {
    color: #fff;
}

.repair-timeline li.done::before {
    background: #2997FF;
    border-color: #2997FF;
}

.repair-timeline li.current {
    color: #2997FF;
}

.repair-timeline li.current::before {
    border-color: #2997FF;
    box-shadow: 0 0 0 4px rgba(41, 151, 255, 0.2);
}

/* Booking / tracking forms on light sections */
.ascbd-form-error {
    background: #fdecea;
    border: 1px solid #f5c2c7;
    color: #842029;
    border-radius: 4px;
    padding: 14px 18px;
    font-size: 14px;
    margin-bottom: 24px;
}

.ascbd-form-success {
    background: #e6f4ea;
    border: 1px solid #b7dfc2;
    color: #1e7e34;
    border-radius: 4px;
    padding: 14px 18px;
    font-size: 14px;
    margin-bottom: 24px;
}

.ascbd-repair-code {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: #2997FF;
}

.ascbd-step-indicator {
    display: flex;
    gap: 8px;
    margin-bottom: 2rem;
    flex-wrap: wrap;
}

.ascbd-step-indicator span {
    font-size: 12.5px;
    font-weight: 600;
    padding: 6px 14px;
    border-radius: 30px;
    border: 1px solid #e2ded7;
    color: #6e6e73;
}

.ascbd-step-indicator span.active {
    background: #2997FF;
    border-color: #2997FF;
    color: #fff;
}

/* ==========================================================================
   HERO — "Component-level precision"
   --------------------------------------------------------------------------
   The theme puts a FIXED BLACK RAIL at x:0 (65px on desktop) holding the
   logo, menu and socials. This hero is composed around it: a deep #131313
   panel occupies the right column, bookending the layout in dark so rail and
   hero read as one system rather than a template with a sidebar bolted on.

   That panel is the SAME #131313 as the stats band directly beneath it, so
   the hero never abruptly ends — its dark mass runs straight into the next
   section. That is the whole bottom transition: background relationship, no
   decorative device.

   The grid lives on .hero itself (not on an inner max-width container) so
   the dark column IS the panel. Centring the diagram inside a container
   column while the panel bled full-width left it visibly off-centre — 63px
   at 1440, and progressively worse on wider screens.

   Alignment is EDITORIAL LEFT. The rail already asserts a hard vertical
   axis; centring fights it. Left-align gives one continuous axis:
   rail edge -> eyebrow -> headline -> lede -> CTA pair.
   ========================================================================== */

.hero {
    --hero-ink:      #1d1d1f;   /* headline / primary CTA fill        */
    --hero-muted:    #6e6e73;   /* lede — 4.9:1 on the light ground   */
    --hero-ground:   #fbfbfa;   /* near-white, warm — never pure #fff */
    --hero-panel:    #131313;   /* matches .bg-cod-gray band below    */
    --hero-accent:   #2997FF;   /* theme fast-blue; used once + focus */
    --hero-hairline: rgba(29, 29, 31, 0.16);

    /* 8px-based spacing system */
    --hero-space-eyebrow: 26px;
    --hero-space-lede:    26px;
    --hero-space-cta:     44px;

    display: grid;
    grid-template-columns: 54fr 46fr;
    background: var(--hero-ground);

    /* The theme applies a global `section { padding: 130px 0 }`. The hero
       owns its own vertical rhythm, so neutralise it — otherwise the two
       stack and the hero balloons well past the viewport. */
    padding: 0;
}

.hero-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* Left padding scales with the viewport but caps, so the text axis stays
       a comfortable distance from the rail instead of drifting on wide screens. */
    padding: 96px 56px 96px clamp(28px, 7.6vw, 112px);
}

.hero-visual {
    background: var(--hero-panel);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 72px 48px;
}

/* ---------- Typography ---------- */

.hero-eyebrow {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: "Poppins", sans-serif;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--hero-muted);
    margin: 0 0 var(--hero-space-eyebrow);
}

.hero-eyebrow::before {
    content: "";
    width: 24px;
    height: 1px;
    background: var(--hero-ink);
    flex-shrink: 0;
}

/* Scales 38 -> 72px. The 72px ceiling only engages above ~1700px, where a
   62px cap left the headline stranded in a very wide column. */
/* ONE page-heading scale for the whole site, taken from the homepage hero.
   Every page H1 below points at these three tokens instead of carrying its
   own clamp, so the heading is the same size at the same width no matter
   which page you are on. Retune the scale here — never per page. */
:root {
    --page-h1-size: clamp(38px, 4.2vw, 72px);
    --page-h1-leading: 1.03;
    --page-h1-tracking: -0.028em;
}

@media (max-width: 768px) {
    :root { --page-h1-tracking: -0.022em; }
}

@media (max-width: 480px) {
    :root { --page-h1-size: clamp(32px, 8.6vw, 40px); }
}

.hero-headline {
    font-family: "Poppins", sans-serif;
    font-weight: 600;
    font-size: var(--page-h1-size);
    line-height: var(--page-h1-leading);
    letter-spacing: var(--page-h1-tracking);
    color: var(--hero-ink);
    margin: 0 0 var(--hero-space-lede);
}

/* Deliberate line breaks — never left to the browser to wrap awkwardly. */
.hero-headline span {
    display: block;
}

.hero-headline .hero-headline-soft {
    color: var(--hero-muted);
}

.hero-lede {
    font-family: Roboto, sans-serif;
    font-size: 19px;
    line-height: 1.62;
    color: var(--hero-muted);
    max-width: 44ch;
    margin: 0 0 var(--hero-space-cta);
    /* Prevents a one-word orphan on the final line, which the copy otherwise
       produced at several widths. Progressive enhancement — older engines
       simply wrap normally. */
    text-wrap: pretty;
}

/* ---------- CTA pair ----------
   Same height, radius and type: a deliberate pair. Hierarchy comes from
   fill vs. outline, not from size or colour noise. An 8px radius (not a
   pill) reads precise and technical, which suits a repair brand.         */

.hero-ctas {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.hero-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 54px;
    padding: 0 28px;
    border-radius: 8px;
    font-family: "Poppins", sans-serif;
    font-size: 15.5px;
    font-weight: 500;
    letter-spacing: 0.005em;
    white-space: nowrap;
    border: 1px solid transparent;
    transition: background-color 0.22s ease, border-color 0.22s ease,
                box-shadow 0.22s ease, transform 0.22s ease;
}

.hero-btn svg {
    flex-shrink: 0;
    transition: transform 0.22s ease;
}

.hero-btn-primary {
    background: var(--hero-ink);
    color: #fff;
}

.hero-btn-primary:hover {
    background: #2b2b2e;
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(29, 29, 31, 0.18);
}

.hero-btn-primary:hover svg { transform: translateX(3px); }

.hero-btn-secondary {
    background: transparent;
    color: var(--hero-ink);
    border-color: var(--hero-hairline);
}

.hero-btn-secondary:hover {
    color: var(--hero-ink);
    border-color: rgba(29, 29, 31, 0.42);
    background: rgba(29, 29, 31, 0.03);
}

.hero-btn-secondary:hover svg { transform: translateX(3px); }

/* The theme sets `a:focus { outline: 0 }` globally, which silently kills the
   keyboard focus ring. `a.hero-btn:focus-visible` outranks it on specificity
   so the ring survives — and only for keyboard users, not mouse clicks. */
a.hero-btn:focus-visible,
.hero-btn:focus-visible {
    outline: 2px solid var(--hero-accent);
    outline-offset: 3px;
    border-radius: 8px;
}

/* ---------- Product visual ---------- */

.hero-diagram {
    width: 100%;
    max-width: 470px;
    height: auto;
    display: block;
}

/* ---------- Hero diagram motion: the repair loop ----------

   Five devices take turns on a 30s round trip, 6s each. A device fades in
   already exploded, holds so the layers read, closes itself up, holds
   assembled, then hands off. That IS the service: apart, understood, whole
   again. Order runs from the lede outward — iPhone, MacBook, iPad, then
   Apple Watch and iMac.

   The close is SEQUENCED, not simultaneous. Each layer starts a beat after
   the one beneath it, so the stack zips shut from the rear housing forward
   and the screen lands last — the order a technician actually works in.
   Closing every layer at once read as a shuffle; this reads as assembly.

   ROBUSTNESS — the rule the previously-static diagram existed to protect is
   unchanged: the hero's only focal visual must never depend on animation
   ticking. So the RESTING state (reduced motion, a throttled compositor, a
   client that ignores @keyframes) is the iPhone fully exploded at full
   opacity — pixel-identical to the static diagram this replaced. The other
   four rest at `opacity: 0` and are only ever revealed by the same animation
   that moves them, so they cannot strand a blank panel.

   PERFORMANCE — only `transform` and `opacity` animate: no layout, no paint
   properties, no filters. All five devices share two keyframe rules rather
   than one timeline each, and only 4 of the 20 plates are on screen at a
   time. The whole SVG is paused while it is scrolled out of view or the tab
   is hidden (see the hero-diagram block in ascbd-custom.js), so an idle
   homepage burns no frames at all. */

/* The pace of the whole thing, in one place. The five devices split it
   evenly, so this is the only value to touch to speed the loop up or slow it
   down — every delay below is a fraction of it. */
.hero-diagram { --hero-loop: 30s; }

/* Which slot of the loop each device owns. Adding a sixth device is a new
   class, the next index, and /6 in the two formulas. */
.hero-device-iphone { --hero-slot: 0; }
.hero-device-mac    { --hero-slot: 1; }
.hero-device-ipad   { --hero-slot: 2; }
.hero-device-watch  { --hero-slot: 3; }
.hero-device-imac   { --hero-slot: 4; }

.hero-device {
    opacity: 0;
    animation: heroDeviceCycle var(--hero-loop) linear infinite;
    animation-delay: calc(var(--hero-loop) / 5 * var(--hero-slot, 0));
}

/* Device 1 is the resting state — visible with or without animation. */
.hero-device-iphone { opacity: 1; }

.hero-plate {
    /* Gentle departure, decisive arrival, a long settle at the end — the
       curve is what makes a part read as machined rather than slid. */
    animation: heroPlateAssemble var(--hero-loop) cubic-bezier(0.32, 0.02, 0.18, 1) infinite;
    /* Its device's slot, plus this layer's beat in the closing sequence. */
    animation-delay: calc(var(--hero-loop) / 5 * var(--hero-slot, 0) + var(--hero-seq, 0s));
}

/* How far each layer travels to close the stack, and when it sets off. The
   four plates sit 78 units apart when exploded and 7 apart when assembled,
   so they converge on the stack centre without ever passing through one
   another. `d` is the rear housing and moves first; `a` is the screen and
   lands last. */
.hero-plate-d { --hero-asm: -106.5px; --hero-seq: 0s; }
.hero-plate-c { --hero-asm: -35.5px;  --hero-seq: 0.1s; }
.hero-plate-b { --hero-asm: 35.5px;   --hero-seq: 0.2s; }
.hero-plate-a { --hero-asm: 106.5px;  --hero-seq: 0.3s; }

/* The outgoing device fades out ACROSS the next one's fade-in rather than
   finishing at the handoff point. Ending both at 20% would put a frame on
   screen where the old device has reached 0 and the new one has not yet left
   it — a blink in the middle of the panel instead of a crossfade. */
@keyframes heroDeviceCycle {
    0%     { opacity: 0; }
    1.5%   { opacity: 1; }   /* 0.45s fade in, already exploded */
    20%    { opacity: 1; }   /* holds assembled to the handoff at 6.0s */
    22.67% { opacity: 0; }   /* 6.8s — dissolves out UNDER the incoming device,
                                which is fading in over the same stretch, so
                                the panel's total brightness never dips */
    100%   { opacity: 0; }
}

@keyframes heroPlateAssemble {
    0%, 5.67%    { transform: translate(0, 0); }               /* apart */
    11%, 22.67%  { transform: translate(0, var(--hero-asm)); } /* whole */
    /* Snap back to exploded only once the fade-out has finished. The 0.3s
       stagger pushes the last layer's reset to 7.1s, still clear of the 6.8s
       the device takes to become invisible, so no reset is ever seen. */
    22.7%, 100%  { transform: translate(0, 0); }
}

.hero-diagram.is-paused .hero-device,
.hero-diagram.is-paused .hero-plate { animation-play-state: paused; }

/* Each plate carries ~40 vector nodes, and an SVG group transform normally
   re-rasterises its whole subtree every frame. Promoting the plates lets the
   compositor move them instead. Scoped to the running state on purpose: a
   paused diagram — off-screen, hidden tab, reduced motion — drops the layers
   again rather than holding twenty of them for an animation nobody is
   watching. */
.hero-diagram:not(.is-paused) .hero-plate { will-change: transform; }

/* Small screens read the loop differently. The diagram is a fraction of
   its desktop size and people scroll past it in seconds, so a 30s cycle
   spends most of its time in a hold and lands as a still image. Tightening
   the loop scales every timing inside it, holds included, so more of what
   a visitor actually sees is movement. */
@media (max-width: 1024px) {
    .hero-diagram { --hero-loop: 20s; }
}

/* Phones only: hand the plates back to the painter. The promotion above
   pays off on a large diagram, but here the repaint area is a quarter of
   the size while twenty composited layers cost the same texture memory —
   a trade a phone GPU loses, and silently, by dropping compositing under
   pressure and stuttering instead. */
@media (max-width: 560px) {
    .hero-diagram:not(.is-paused) .hero-plate { will-change: auto; }
}

/* ==========================================================================
   Responsive — each breakpoint is composed, not scaled down.
   ========================================================================== */

/* The theme reserves 66px at the top of <body> for the MOBILE top bar. Above
   1199px that bar becomes the fixed left rail, leaving a dead empty band at
   the top of every page. Reclaim it at desktop only. */
@media (min-width: 1200px) {
    body { padding-top: 0 !important; }
}

/* Very wide screens: at a fixed 54/46 split the copy column grows faster
   than the text measure, stranding the text with a large void to its right.
   Shift the split toward the panel, push the text axis further in, and give
   the diagram the extra room. */
@media (min-width: 1600px) {
    .hero { grid-template-columns: 48fr 52fr; }
    .hero-copy { padding: 112px 64px 112px clamp(112px, 8vw, 152px); }
    .hero-lede { font-size: 20px; max-width: 46ch; }
    .hero-visual { padding: 88px 56px; }
    .hero-diagram { max-width: 540px; }
}

@media (max-width: 1280px) {
    .hero-copy { padding: 84px 44px 84px clamp(28px, 6.4vw, 88px); }
    .hero-visual { padding: 64px 40px; }
    .hero-diagram { max-width: 420px; }
}

/* 1024 landscape tablet still has room for the two-column composition —
   only type and gutters tighten. Stacking here would lose the split and
   push the hero past a short 768px viewport. */
@media (max-width: 1100px) and (min-width: 901px) {
    .hero-copy { padding: 72px 36px 72px clamp(28px, 5.6vw, 64px); }
    .hero-visual { padding: 56px 32px; }
    .hero-lede { font-size: 18px; }
    .hero-diagram { max-width: 360px; }
}

/* Below 900 the two-tone split stops working in a narrow column, so the
   composition genuinely restacks — the dark panel becomes a full-width band
   under the copy — rather than being scaled down. */
@media (max-width: 900px) {
    .hero { grid-template-columns: minmax(0, 1fr); }

    .hero-copy {
        padding: 72px 32px 64px;
        max-width: 720px;
        width: 100%;
        margin: 0 auto;
    }

    .hero-lede { font-size: 18px; max-width: 52ch; }

    .hero-visual { padding: 56px 32px 60px; }
    .hero-diagram { max-width: 340px; }
}

@media (max-width: 768px) {
    .hero-copy { padding: 60px 28px 56px; }
    .hero-lede { font-size: 17px; }
    .hero-visual { padding: 48px 28px 52px; }
    .hero-diagram { max-width: 300px; }
}

/* Phones: CTAs go full-width and stack — thumb-reachable, never a cramped
   row. 480px (not 430px) because exact-width queries miss on sub-pixel
   viewports, which this build hit at exactly 430px. */
@media (max-width: 480px) {
    .hero {
        --hero-space-eyebrow: 20px;
        --hero-space-lede: 20px;
        --hero-space-cta: 36px;
    }

    .hero-copy { padding: 48px 24px 44px; }

    .hero-eyebrow { font-size: 11px; letter-spacing: 0.15em; }
    .hero-eyebrow::before { width: 18px; }

    .hero-lede { font-size: 16.5px; }

    .hero-ctas { flex-direction: column; align-items: stretch; gap: 12px; }
    .hero-btn { width: 100%; height: 52px; }

    .hero-visual { padding: 40px 24px 44px; }
    .hero-diagram { max-width: 250px; }
}

@media (prefers-reduced-motion: reduce) {
    .hero-btn,
    .hero-btn svg { transition: none; }
    .hero-btn-primary:hover { transform: none; }
    /* Falls back to the resting state: the iPhone, exploded and opaque. */
    .hero-device,
    .hero-plate { animation: none; }
}

/* ==========================================================================
   HOMEPAGE SECTION SYSTEM
   --------------------------------------------------------------------------
   Everything below the (locked) hero is composed from these primitives, so
   the page reads as chapters rather than a run of near-identical slabs.

   FIVE ENVIRONMENTS — chosen per section by content role, never alternated
   mechanically:
     .env-paper     A  warm light editorial surface  (the hero's own ground)
     .env-mist      B  soft neutral grey             (supporting / secondary)
     .env-charcoal  C  deep premium charcoal         (product & trust weight)
     .env-ink       D  true black                    (rare; max contrast only)
     .panel         E  elevated card inside a darker environment

   THREE SPACING SCALES — tiny content never gets a cavernous section:
     .pad-editorial  96–112px   a chapter opening / hero-adjacent moment
     .pad-standard   72–88px    normal content section
     .pad-compact    56–72px    strips and supporting blocks
   ========================================================================== */

.section {
    position: relative;
    /* Neutralises the theme's global `section { padding: 130px 0 }` so the
       scale classes below are the single source of vertical rhythm. */
    padding: 0;
}

.pad-editorial { padding: clamp(72px, 7vw, 112px) 0; }
.pad-standard  { padding: clamp(56px, 5.5vw, 88px) 0; }
.pad-compact   { padding: clamp(44px, 4vw, 68px) 0; }

.section-inner {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 40px;
}

.section-inner-narrow { max-width: 900px; }

/* ---------- Environments ---------- */

.env-paper {
    background: #fbfbfa;
    --ink: #1d1d1f;
    --muted: #6e6e73;
    --hairline: rgba(29, 29, 31, 0.13);
    --surface: #ffffff;
    --accent: #0062c4;   /* AA-safe blue on light; brand blue is 2.7:1 here */
    --shadow: 0 10px 26px rgba(29, 29, 31, 0.07);
}

.env-mist {
    background: #f1f0ee;
    --ink: #1d1d1f;
    --muted: #63636a;    /* a step darker: #6e6e73 is 4.49:1 on this ground */
    --hairline: rgba(29, 29, 31, 0.12);
    --surface: #ffffff;
    --accent: #0062c4;
    --shadow: 0 10px 26px rgba(29, 29, 31, 0.06);
}

.env-charcoal {
    background: #161618;
    --ink: #ffffff;
    --muted: rgba(255, 255, 255, 0.6);
    --hairline: rgba(255, 255, 255, 0.11);
    --surface: #1e1e21;
    --accent: #2997FF;
    --shadow: none;
}

.env-ink {
    background: #000000;
    --ink: #ffffff;
    --muted: rgba(255, 255, 255, 0.58);
    --hairline: rgba(255, 255, 255, 0.13);
    --surface: #121214;
    --accent: #2997FF;
    --shadow: none;
}

/* Adjacent same-family environments would butt together with an invisible
   seam. Sections render conditionally (reviews appear only once published),
   so this keys off adjacency rather than being hard-coded per section. */
.env-paper + .env-paper,
.env-paper + .env-mist,
.env-mist + .env-paper,
.env-mist + .env-mist { border-top: 1px solid rgba(29, 29, 31, 0.08); }

.env-charcoal + .env-charcoal { border-top: 1px solid rgba(255, 255, 255, 0.07); }

/* ---------- Typography ---------- */

.section-header { max-width: 640px; margin: 0 0 clamp(32px, 3.4vw, 52px); }
.section-header-center { margin-left: auto; margin-right: auto; text-align: center; }

/* Supporting only — never louder than the title it introduces. */
.section-eyebrow {
    display: flex;
    align-items: center;
    gap: 11px;
    font-family: "Poppins", sans-serif;
    font-size: 11.5px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--muted);
    margin: 0 0 18px;
}

.section-eyebrow::before {
    content: "";
    width: 22px;
    height: 1px;
    background: currentColor;
    opacity: 0.7;
    flex-shrink: 0;
}

.section-header-center .section-eyebrow { justify-content: center; }

/* Dominates the eyebrow in size, weight and contrast. */
.section-title {
    font-family: "Poppins", sans-serif;
    font-weight: 600;
    font-size: clamp(26px, 2.7vw, 40px);
    line-height: 1.13;
    letter-spacing: -0.023em;
    color: var(--ink);
    margin: 0;
    text-wrap: balance;
}

.section-title-lg { font-size: clamp(30px, 3.4vw, 48px); line-height: 1.08; }

.section-copy {
    font-family: Roboto, sans-serif;
    font-size: 16.5px;
    line-height: 1.68;
    color: var(--muted);
    margin: 16px 0 0;
    max-width: 58ch;
    text-wrap: pretty;
}

.section-header-center .section-copy { margin-left: auto; margin-right: auto; }

.section-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 28px;
}

.section-actions-center { justify-content: center; }

/* ---------- One card language ---------- */

.card {
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: 12px;
    padding: 26px;
    display: block;
    color: var(--ink);
    transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

a.card:hover {
    color: var(--ink);
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--accent) 55%, transparent);
    box-shadow: var(--shadow);
}

.card-title {
    display: block;
    font-family: "Poppins", sans-serif;
    font-size: 15.5px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--ink);
    margin: 0 0 8px;
}

.card-copy {
    font-family: Roboto, sans-serif;
    font-size: 14px;
    line-height: 1.62;
    color: var(--muted);
    margin: 0;
}

.card-icon {
    display: block;
    color: var(--accent);
    font-size: 25px;
    line-height: 1;
    margin-bottom: 16px;
}

/* Elevated panel — environment E, an inset light/dark block */
.panel {
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: 14px;
    padding: clamp(24px, 3vw, 38px);
}

.panel-invert {
    background: #161618;
    border-color: rgba(255, 255, 255, 0.1);
    --ink: #ffffff;
    --muted: rgba(255, 255, 255, 0.6);
    --accent: #2997FF;
    color: #fff;
}

/* ---------- Grids ---------- */

.grid { display: grid; gap: 14px; }
.g-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* ---------- Buttons (identical system to the hero) ---------- */

.btn-a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    height: 52px;
    padding: 0 26px;
    border-radius: 8px;
    font-family: "Poppins", sans-serif;
    font-size: 15px;
    font-weight: 500;
    white-space: nowrap;
    border: 1px solid transparent;
    transition: background-color 0.22s ease, border-color 0.22s ease,
                transform 0.22s ease, box-shadow 0.22s ease;
}

.btn-a svg { flex-shrink: 0; transition: transform 0.22s ease; }
.btn-a:hover svg { transform: translateX(3px); }

.btn-solid { background: #1d1d1f; color: #fff; }
.btn-solid:hover {
    background: #2b2b2e; color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(29, 29, 31, 0.18);
}

.env-charcoal .btn-solid,
.env-ink .btn-solid,
.panel-invert .btn-solid { background: #fff; color: #161618; }

.env-charcoal .btn-solid:hover,
.env-ink .btn-solid:hover,
.panel-invert .btn-solid:hover { background: #e8e8e9; color: #161618; }

.btn-line {
    background: transparent;
    color: var(--ink);
    border-color: var(--hairline);
}
.btn-line:hover {
    color: var(--ink);
    border-color: color-mix(in srgb, var(--accent) 60%, transparent);
}

a.btn-a:focus-visible,
.btn-a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.link-a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: "Poppins", sans-serif;
    font-size: 14.5px;
    font-weight: 500;
    color: var(--accent);
}
.link-a svg { transition: transform 0.2s ease; }
.link-a:hover { color: var(--accent); text-decoration: underline; }
.link-a:hover svg { transform: translateX(3px); }
.link-a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 3px; }


/* ==========================================================================
   SECTION COMPONENTS
   ========================================================================== */

/* --- 02 Trust strip: compact, sits flush under the hero's dark panel --- */
.trust-strip { background: #161618; padding: 26px 0; }

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

.trust-item {
    display: flex;
    align-items: center;
    gap: 11px;
    color: rgba(255, 255, 255, 0.82);
    font-size: 13.5px;
    line-height: 1.35;
}

.trust-item svg { color: #2997FF; flex-shrink: 0; }

/* --- 03 Device grid: symmetric 4x2, one presentation language --- */
.device-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }

.device-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 32px 16px;
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: 12px;
    color: var(--ink);
    transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.device-card-art { line-height: 0; color: var(--ink); }

.device-card-art-media {
    display: grid;
    width: 132px;
    height: 94px;
    overflow: hidden;
    place-items: center;
    border-radius: 12px;
}
.device-card-art-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 15%;
}

.device-card-name {
    font-family: "Poppins", sans-serif;
    font-size: 13.5px;
    font-weight: 500;
}

.device-card:hover {
    color: var(--ink);
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--accent) 55%, transparent);
    box-shadow: var(--shadow);
}
.device-card:hover .device-card-art { color: var(--accent); }

/* --- 04 Featured services --- */
.svc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }

.svc-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 26px;
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: 12px;
    color: var(--ink);
    transition: border-color 0.2s ease, transform 0.2s ease;
}
.svc-card:hover {
    color: var(--ink);
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--accent) 55%, transparent);
}
.svc-card i { color: var(--accent); font-size: 24px; line-height: 1; }
.svc-card-image { width: 48px; height: 48px; object-fit: contain; }
.svc-name { font-family: "Poppins", sans-serif; font-size: 15.5px; font-weight: 600; }
.svc-from { font-size: 13.5px; color: var(--muted); margin-top: auto; padding-top: 6px; }
.svc-from b { color: var(--ink); font-weight: 600; }

/* --- 06 Repair process: a genuine ordered sequence --- */
.process { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }

.process li { position: relative; padding: 24px 22px 0 0; border-top: 1px solid var(--hairline); }
.process li::before {
    content: "";
    position: absolute; top: -4px; left: 0;
    width: 7px; height: 7px; border-radius: 50%;
    background: color-mix(in srgb, var(--ink) 28%, transparent);
}
.process li:first-child::before { background: var(--accent); }

.process-n {
    display: block; font-family: "Poppins", sans-serif;
    font-size: 11.5px; font-weight: 600; letter-spacing: 0.1em;
    color: var(--muted); margin-bottom: 9px; font-variant-numeric: tabular-nums;
}
.process-t { display: block; font-family: "Poppins", sans-serif; font-size: 15px; font-weight: 600; color: var(--ink); margin-bottom: 7px; }
.process-c { display: block; font-size: 13.5px; line-height: 1.58; color: var(--muted); }

/* --- 08 Expertise editorial --- */
.editorial { display: grid; grid-template-columns: 1fr 0.9fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.editorial-facts { display: grid; gap: 16px; }
.editorial > .editorial-facts { margin-top: 0; }
.editorial-fact { display: flex; gap: 13px; align-items: flex-start; }
.editorial-fact svg { color: var(--accent); flex-shrink: 0; margin-top: 2px; }
.editorial-fact span { font-size: 14.5px; line-height: 1.6; color: var(--muted); }
.editorial-fact b { color: var(--ink); font-weight: 600; }

/* --- 08b Expertise: simple check → explain → approve story --- */
.expertise-copy { text-align: center; }
.expertise-copy .section-eyebrow { justify-content: center; margin-bottom: 22px; }
.expertise-copy .section-title { max-width: 18ch; margin: 0 auto; }
.expertise-copy .section-copy {
    max-width: 67ch;
    margin: 22px auto 0;
    text-align: center;
    color: rgba(255, 255, 255, 0.74);
    font-size: 17px;
    line-height: 1.72;
}
.expertise-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 38px; }
.expertise-point {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 20px;
    text-align: left;
    background: rgba(255, 255, 255, 0.055);
    border: 1px solid rgba(255, 255, 255, 0.11);
    border-radius: 12px;
}
.expertise-point > svg { flex: 0 0 auto; margin-top: 3px; color: #2997ff; }
.expertise-point h3 { margin: 0 0 6px; font-family: "Poppins", sans-serif; font-size: 14.5px; font-weight: 600; color: #fff; }
.expertise-point p { margin: 0; font-size: 13.5px; line-height: 1.58; color: rgba(255, 255, 255, 0.68); }
.expertise-steps + .section-actions { justify-content: center; margin-top: 30px; }

@media (max-width: 720px) {
    .expertise-steps { grid-template-columns: minmax(0, 1fr); }
}

/* ── Structured About page ──────────────────────────────────────────────────
   The About page is intentionally editorial rather than card-heavy. Its text,
   links and images are section-managed in Admin; this layer only defines the
   responsive presentation and neutral image fallback. */
.about-content-page { max-width: none; margin: 0; }
.about-content-page figure { margin: 0; }
.about-content-page h1,
.about-content-page h2,
.about-content-page h3,
.about-content-page p { margin-top: 0; }

.about-hero {
    overflow: hidden;
    padding: clamp(52px, 7.2vw, 108px) 0 clamp(66px, 8vw, 122px);
    background:
        radial-gradient(circle at 91% 9%, rgba(22, 123, 255, .13), transparent 26%),
        radial-gradient(circle at 53% 100%, rgba(49, 78, 126, .07), transparent 31%),
        #fbfbfa;
}

.about-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0 0 clamp(30px, 4vw, 56px);
    color: var(--muted);
    font-size: 13px;
}

.about-breadcrumb a { color: inherit; text-decoration: none; }
.about-breadcrumb a:hover { color: var(--accent); }

.about-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.04fr) minmax(360px, .96fr);
    align-items: center;
    gap: clamp(38px, 7vw, 112px);
}

.about-hero-copy { max-width: 655px; }
.about-hero-copy h1 {
    max-width: 11ch;
    margin: 0;
    color: var(--ink);
    font-family: "Poppins", sans-serif;
    font-size: var(--page-h1-size);
    font-weight: 650;
    letter-spacing: var(--page-h1-tracking);
    line-height: var(--page-h1-leading);
    text-wrap: balance;
}

.about-hero-lede {
    max-width: 570px;
    margin: 23px 0 0;
    color: #3d4b62;
    font-family: "Poppins", sans-serif;
    font-size: clamp(18px, 1.7vw, 23px);
    font-weight: 450;
    letter-spacing: -.025em;
    line-height: 1.42;
}

.about-rich { color: var(--muted); font-size: 16px; line-height: 1.72; }
.about-rich > *:first-child { margin-top: 0; }
.about-rich > *:last-child { margin-bottom: 0; }
.about-rich p { margin-bottom: 1em; }
.about-rich a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.about-hero-body { max-width: 595px; margin-top: 20px; font-size: 16.5px; }

.about-action { display: flex; margin-top: 30px; }
.about-primary-action,
.about-cta-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 13px;
    min-height: 54px;
    padding: 0 22px;
    border-radius: 999px;
    text-decoration: none;
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}

.about-primary-action {
    background: var(--ink);
    box-shadow: 0 13px 28px rgba(17, 26, 42, .14);
    color: #fff;
    font-size: 14px;
    font-weight: 650;
}

.about-primary-action:hover,
.about-primary-action:focus-visible { background: #0b69f0; color: #fff; transform: translateY(-2px); }
.about-primary-action:focus-visible,
.about-cta-action:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 38%, transparent); outline-offset: 3px; }
.about-primary-action svg,
.about-cta-action svg { flex: 0 0 auto; }

.about-hero-visual,
.about-story-visual {
    position: relative;
    overflow: hidden;
    min-height: clamp(360px, 39vw, 550px);
    border: 1px solid rgba(23, 42, 68, .11);
    border-radius: clamp(22px, 2.4vw, 34px);
    background: #eef3fa;
    box-shadow: 0 24px 65px rgba(31, 49, 79, .1);
}

.about-hero-visual::after,
.about-story-visual::after {
    position: absolute;
    inset: auto 0 0;
    height: 28%;
    content: "";
    pointer-events: none;
    background: linear-gradient(transparent, rgba(9, 25, 48, .14));
}

.about-hero-visual img,
.about-story-visual img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: inherit;
    object-fit: cover;
}

.about-visual-placeholder {
    display: grid;
    place-items: center;
    color: #718097;
    background:
        linear-gradient(138deg, rgba(255, 255, 255, .92), rgba(238, 244, 253, .8)),
        repeating-linear-gradient(45deg, rgba(48, 92, 155, .04) 0 1px, transparent 1px 14px);
}

.about-visual-placeholder svg { width: clamp(92px, 15vw, 160px); height: auto; }

.about-story { border-top: 1px solid rgba(29, 29, 31, .08); }
.about-story-grid {
    display: grid;
    grid-template-columns: minmax(0, .98fr) minmax(340px, .82fr);
    align-items: center;
    gap: clamp(42px, 8vw, 132px);
}

.about-story-copy { max-width: 610px; }
.about-section-header { max-width: 650px; margin-bottom: 25px; }
.about-section-header h2,
.about-cta h2 {
    margin: 0;
    color: var(--ink);
    font-family: "Poppins", sans-serif;
    font-size: clamp(31px, 3.4vw, 49px);
    font-weight: 630;
    letter-spacing: -.052em;
    line-height: 1.07;
    text-wrap: balance;
}

.about-section-header > p:not(.section-eyebrow) {
    max-width: 570px;
    margin: 15px 0 0;
    color: var(--muted);
    font-size: 16px;
    line-height: 1.65;
}

.about-section-header-center { margin-right: auto; margin-left: auto; text-align: center; }
.about-section-header-center .section-eyebrow { justify-content: center; }
.about-section-header-center > p:not(.section-eyebrow) { margin-right: auto; margin-left: auto; }

.about-story-body { max-width: 585px; }
.about-highlights {
    display: grid;
    gap: 15px;
    margin: 28px 0 0;
    padding: 0;
    list-style: none;
}

.about-highlights li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 11px; }
.about-highlights li > span {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    margin-top: 1px;
    border-radius: 50%;
    background: #dcecff;
    color: #0966d9;
    font-size: 13px;
    font-weight: 700;
}

.about-highlights strong { display: block; margin: 0 0 3px; color: var(--ink); font-family: "Poppins", sans-serif; font-size: 14.5px; font-weight: 620; }
.about-highlight-copy { font-size: 14px; line-height: 1.57; }

.about-story-visual { min-height: clamp(330px, 33vw, 465px); box-shadow: none; }

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

.about-value {
    min-height: 205px;
    padding: clamp(24px, 2.5vw, 34px);
    border: 1px solid var(--hairline);
    border-radius: 19px;
    background: var(--surface);
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.about-value:hover { border-color: rgba(0, 98, 196, .34); box-shadow: var(--shadow); transform: translateY(-3px); }
.about-value h3,
.about-process-step h3 {
    margin: 0 0 11px;
    color: var(--ink);
    font-family: "Poppins", sans-serif;
    font-size: 19px;
    font-weight: 620;
    letter-spacing: -.033em;
    line-height: 1.25;
}

.about-value-copy { font-size: 14.5px; line-height: 1.62; }

.about-process { border-top: 1px solid rgba(29, 29, 31, .08); }
.about-process-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--hairline);
    border-bottom: 1px solid var(--hairline);
}

.about-process-step {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 17px;
    min-height: 190px;
    padding: 29px clamp(20px, 2.5vw, 34px);
}

.about-process-step + .about-process-step { border-left: 1px solid var(--hairline); }
.about-process-number {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--hairline));
    border-radius: 50%;
    color: var(--accent);
    font-family: "Poppins", sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
}

.about-process-step h3 { margin-top: 6px; }
.about-process-copy { font-size: 14px; line-height: 1.62; }

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

.about-gallery-figure {
    overflow: hidden;
    min-height: 250px;
    border-radius: 18px;
    background: #e6ecf4;
}

.about-gallery-figure img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 250px;
    object-fit: cover;
    transition: transform .35s ease;
}

.about-gallery-figure:hover img { transform: scale(1.035); }
.about-gallery-figure figcaption { padding: 13px 3px 0; color: var(--muted); font-size: 13px; line-height: 1.45; }

.about-cta { overflow: hidden; }
.about-cta-layout {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 34px 70px;
}

.about-cta-layout > div:first-child { max-width: 720px; }
.about-cta .section-eyebrow { color: var(--muted); }
.about-cta h2 { color: var(--ink); }
.about-cta-layout > div:first-child > p:not(.section-eyebrow) { max-width: 650px; margin: 15px 0 0; color: var(--muted); font-size: 16px; line-height: 1.65; }
.about-cta-copy { margin-top: 14px; }
.about-cta .about-action { flex: 0 0 auto; margin: 0; }
.about-cta-action { min-width: 195px; background: #fff; color: #111318; font-size: 14px; font-weight: 700; }
.about-cta-action:hover,
.about-cta-action:focus-visible { background: #eaf3ff; color: #075ed1; transform: translateY(-2px); }

@media (max-width: 900px) {
    .about-hero-grid,
    .about-story-grid { grid-template-columns: 1fr; }
    .about-hero-copy { max-width: 720px; }
    .about-hero-visual { max-width: 710px; min-height: 420px; }
    .about-story-visual { max-width: 650px; }
    .about-values-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .about-process-list { grid-template-columns: 1fr; }
    .about-process-step { min-height: 0; }
    .about-process-step + .about-process-step { border-top: 1px solid var(--hairline); border-left: 0; }
    .about-cta-layout { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 600px) {
    .about-hero { padding: 34px 0 60px; }
    .about-breadcrumb { margin-bottom: 32px; font-size: 12px; }
    .about-hero-copy h1 { max-width: 12ch; }
    .about-hero-lede { margin-top: 19px; font-size: 17px; }
    .about-hero-body { margin-top: 16px; font-size: 15px; line-height: 1.68; }
    .about-action { margin-top: 24px; }
    .about-primary-action,
    .about-cta-action { min-height: 50px; padding: 0 19px; font-size: 13px; }
    .about-hero-visual,
    .about-story-visual { min-height: 280px; border-radius: 20px; }
    .about-section-header { margin-bottom: 24px; }
    .about-section-header h2,
    .about-cta h2 { font-size: clamp(29px, 9vw, 38px); }
    .about-section-header > p:not(.section-eyebrow),
    .about-cta-layout > div:first-child > p:not(.section-eyebrow) { margin-top: 13px; font-size: 15px; }
    .about-story-body,
    .about-rich { font-size: 15px; }
    .about-highlights { gap: 14px; margin-top: 24px; }
    .about-values-grid,
    .about-gallery-grid { grid-template-columns: 1fr; }
    .about-value { min-height: 0; padding: 25px 22px; }
    .about-value:hover { transform: none; }
    .about-process-step { grid-template-columns: 38px minmax(0, 1fr); gap: 14px; padding: 23px 0; }
    .about-process-number { width: 34px; height: 34px; }
    .about-process-step h3 { margin-top: 4px; font-size: 18px; }
    .about-gallery-figure,
    .about-gallery-figure img { min-height: 225px; }
    .about-cta-layout { gap: 26px; }
    .about-cta .about-action { width: 100%; }
    .about-cta-action { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .about-primary-action,
    .about-cta-action,
    .about-value,
    .about-gallery-figure img { transition: none; }
    .about-primary-action:hover,
    .about-cta-action:hover,
    .about-value:hover { transform: none; }
}

/* --- 09 Service centres --- */
.centre-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.centre-card { padding: 26px; background: var(--surface); border: 1px solid var(--hairline); border-radius: 12px; }
.centre-name { display: block; font-family: "Poppins", sans-serif; font-size: 15.5px; font-weight: 600; color: var(--ink); margin-bottom: 8px; }
.centre-addr { font-style: normal; font-size: 14px; line-height: 1.6; color: var(--muted); margin: 0 0 16px; }
.centre-links { display: flex; gap: 18px; flex-wrap: wrap; }

/* --- 10 Tracking: a product-UI moment --- */
.track-split { display: grid; grid-template-columns: 1fr 0.95fr; gap: clamp(32px, 5vw, 64px); align-items: center; }

.track-ui { border-radius: 14px; background: #1e1e21; border: 1px solid rgba(255,255,255,0.1); padding: 26px; }
.track-ui-bar { display: flex; align-items: center; gap: 7px; margin-bottom: 20px; }
.track-ui-dot { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,0.16); }
.track-ui-code { margin-left: 8px; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 12.5px; color: rgba(255,255,255,0.55); }

.track-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.track-steps li { display: flex; align-items: center; gap: 13px; padding: 11px 0; font-size: 14px; color: rgba(255,255,255,0.5); } /* 0.42 measured 4.02:1 — under AA */
.track-steps li::before {
    content: ""; width: 10px; height: 10px; border-radius: 50%;
    border: 1.5px solid rgba(255,255,255,0.24); flex-shrink: 0;
}
.track-steps li.is-done { color: rgba(255,255,255,0.9); }
.track-steps li.is-done::before { background: #2997FF; border-color: #2997FF; }
.track-steps li.is-now { color: #fff; font-weight: 500; }
.track-steps li.is-now::before { border-color: #2997FF; box-shadow: 0 0 0 4px rgba(41,151,255,0.18); }
.track-demo-tag {
    display: inline-block; margin-top: 18px; font-size: 11px; letter-spacing: 0.08em;
    text-transform: uppercase; color: rgba(255,255,255,0.5);
    border: 1px solid rgba(255,255,255,0.14); border-radius: 5px; padding: 4px 9px;
}

.track-form { display: grid; gap: 10px; margin-top: 26px; }
.track-form input {
    height: 50px; margin: 0; padding: 0 15px; border-radius: 8px;
    border: 1px solid var(--hairline); background: var(--surface);
    color: var(--ink); font-size: 14.5px;
}
.track-form input::placeholder { color: var(--muted); }
.track-form input:focus { border-color: var(--accent); outline: none; }
.track-form .btn-a { width: 100%; }

/* --- 11 Warranty --- */
.warranty-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.warranty-card { padding: 26px; background: var(--surface); border: 1px solid var(--hairline); border-radius: 12px; }
/* A "key fact" line, not a statistic. Only one of the three is a duration,
   so display-sized blue type read as a mismatched metric on the other two.
   19px keeps it emphatic without pretending to be a number. */
.warranty-num { display: block; font-family: "Poppins", sans-serif; font-size: 19px; font-weight: 600; color: var(--accent); letter-spacing: -0.012em; margin-bottom: 10px; }

/* --- 12 Stats --- */
.stat-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.stat-cell { text-align: center; }
.stat-n { display: block; font-family: "Poppins", sans-serif; font-size: clamp(28px, 3vw, 40px); font-weight: 600; letter-spacing: -0.025em; color: var(--ink); line-height: 1.05; font-variant-numeric: tabular-nums; }
.stat-l { display: block; margin-top: 7px; font-size: 11.5px; font-weight: 500; letter-spacing: 0.09em; text-transform: uppercase; color: var(--muted); }

/* --- 13 Reviews --- */
.review-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.review-card { padding: 26px; background: var(--surface); border: 1px solid var(--hairline); border-radius: 12px; display: flex; flex-direction: column; }
.review-stars { color: var(--accent); font-size: 13px; letter-spacing: 2px; margin-bottom: 13px; }
.review-text { font-size: 14.5px; line-height: 1.66; color: var(--muted); margin: 0 0 18px; }
.review-who { font-family: "Poppins", sans-serif; font-size: 14px; font-weight: 600; color: var(--ink); margin-top: auto; }
.review-where { display: block; font-family: Roboto, sans-serif; font-size: 12.5px; font-weight: 400; color: var(--muted); margin-top: 3px; }

.demo-banner {
    display: flex; align-items: center; gap: 9px;
    font-size: 12.5px; color: var(--muted);
    border: 1px dashed var(--hairline); border-radius: 8px;
    padding: 10px 14px; margin-bottom: 20px;
}
.demo-banner b { color: var(--ink); font-weight: 600; letter-spacing: 0.04em; }

/* --- 14 FAQ: native <details>, works without JS --- */
.faq-split { display: grid; grid-template-columns: 0.72fr 1.28fr; gap: clamp(32px, 5vw, 64px); align-items: start; }

/* The intro column is much shorter than the question list, which left a
   large void beside it. Sticking it travels with the reader instead. */
@media (min-width: 1025px) {
    .faq-split > div:first-child { position: sticky; top: 96px; }
}
.faq-list { border-top: 1px solid var(--hairline); }
.faq-item { border-bottom: 1px solid var(--hairline); }
.faq-item summary {
    display: flex; align-items: center; justify-content: space-between; gap: 18px;
    padding: 19px 2px; cursor: pointer; list-style: none;
    font-family: "Poppins", sans-serif; font-size: 15px; font-weight: 500; color: var(--ink);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.faq-chev { color: var(--accent); flex-shrink: 0; transition: transform 0.2s ease; }
.faq-item[open] .faq-chev { transform: rotate(180deg); }
.faq-item p { margin: 0; padding: 0 2px 20px; font-size: 14.5px; line-height: 1.66; color: var(--muted); max-width: 64ch; }

/* --- 15 SEO content: readable long-form chapter with live internal links --- */
.seo-reading { max-width: none; }
.seo-reading-intro {
    padding-bottom: clamp(32px, 4vw, 52px);
    border-bottom: 1px solid var(--hairline);
}
.seo-reading-intro .section-title { max-width: 18ch; margin-bottom: clamp(20px, 2.4vw, 30px); }
.seo-reading-lede {
    font-family: Roboto, sans-serif;
    font-size: clamp(16px, 1.5vw, 18px);
    line-height: 1.78;
    color: var(--muted);
}
.seo-reading-lede p { margin: 0; }
.seo-chapter-list { margin-top: clamp(32px, 4vw, 52px); }
.seo-chapter {
    padding-bottom: clamp(28px, 3vw, 38px);
    margin-bottom: clamp(28px, 3vw, 38px);
    border-bottom: 1px solid var(--hairline);
}
.seo-chapter:last-child { padding-bottom: 0; margin-bottom: 0; border-bottom: 0; }
.seo-chapter h3 {
    margin: 0 0 13px;
    font-family: "Poppins", sans-serif;
    font-size: clamp(22px, 2.2vw, 30px);
    font-weight: 600;
    line-height: 1.28;
    letter-spacing: -0.018em;
    color: var(--ink);
    text-wrap: balance;
}
.seo-chapter-copy { font-family: Roboto, sans-serif; font-size: 16px; line-height: 1.76; color: var(--muted); }
.seo-chapter-copy p { margin: 0; }
.seo-chapter-copy p + p, .seo-chapter-copy ul, .seo-chapter-copy ol { margin-top: 14px; }
.seo-device-nav { margin-top: 24px; }
.seo-device-label {
    display: block;
    margin-bottom: 10px;
    font-family: "Poppins", sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink);
}
.seo-device-list {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    list-style: none;
    padding: 0;
    margin: 22px 0 0;
}
.seo-device-list li { margin: 0; }
.seo-device-list a {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 8px 14px;
    border: 1px solid var(--hairline);
    border-radius: 999px;
    background: #fbfbfa;
    font-family: "Poppins", sans-serif;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--ink);
    text-decoration: none;
    transition: border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.seo-device-list a:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-1px); }
.seo-device-list a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.seo-reading > .section-actions { justify-content: flex-start; margin-top: clamp(32px, 4vw, 46px); }

@media (max-width: 768px) {
    .seo-content.pad-editorial { padding: 52px 0 64px; }
    .seo-reading-intro .section-title { max-width: none; font-size: clamp(30px, 6vw, 38px); }
}
@media (max-width: 560px) {
    .seo-reading-intro { padding-bottom: 30px; }
    .seo-reading-intro .section-title { max-width: none; margin-bottom: 18px; }
    .seo-reading-lede { font-size: 15.5px; line-height: 1.7; }
    .seo-chapter-list { margin-top: 30px; }
    .seo-chapter { padding-bottom: 27px; margin-bottom: 27px; }
    .seo-chapter h3 { margin-bottom: 11px; font-size: 22px; line-height: 1.32; }
    .seo-chapter-copy { font-size: 15.5px; line-height: 1.72; }
    .seo-device-nav { margin-top: 20px; }
    .seo-device-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .seo-device-list a { justify-content: center; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
    .seo-device-list a { transition: none; }
    .seo-device-list a:hover { transform: none; }
}

/* --- 16 Final CTA: calm two-column, no wallpaper --- */
.cta-split { display: grid; grid-template-columns: 1fr 0.82fr; gap: clamp(36px, 5vw, 72px); align-items: center; }
.cta-visual { display: flex; align-items: center; justify-content: center; }
.cta-visual svg { width: 100%; max-width: 330px; height: auto; }

/* ==========================================================================
   Responsive — composed per breakpoint, not scaled down
   ========================================================================== */

@media (max-width: 1024px) {
    .section-inner { padding: 0 32px; }
    /* Equal columns forced the longest promise to wrap while the shortest
       left a gap beside it. Let each item size to its own text and wrap as
       a centred group, so the row breaks where the words actually run out. */
    .trust-row {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        /* 16px, not a rounder 22: at the top of this range the four items
           plus three wide gaps overshoot the row by a single pixel and drop
           the last one onto a line of its own. */
        gap: 14px 16px;
    }
    .svc-grid, .warranty-grid, .review-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .process { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .process li { padding-bottom: 24px; }
    .editorial, .track-split, .faq-split, .cta-split { grid-template-columns: minmax(0, 1fr); }
    .cta-visual { order: -1; }
    .cta-visual svg { max-width: 250px; }
    .g-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 768px) {
    .section-inner { padding: 0 24px; }
    .device-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .g-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .centre-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 560px) {
    .trust-strip { padding: 22px 0; }
    /* One per line at this width — centred wrapping here would just make a
       ragged stack. But four short items pinned to the left edge leave a
       void beside them, so the block shrinks to its content and centres:
       the ticks stay aligned with each other, the group sits in the middle. */
    .trust-row {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 11px;
        width: max-content;
        max-width: 100%;
        margin-inline: auto;
    }
    .device-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .device-card { padding: 24px 12px; gap: 11px; }
    .device-card-art-media { width: 102px; height: 76px; border-radius: 10px; }
    .svc-grid, .warranty-grid, .review-grid, .g-2, .g-3, .g-4 { grid-template-columns: minmax(0, 1fr); }
    .process { grid-template-columns: minmax(0, 1fr); }
    .stat-row { grid-template-columns: minmax(0, 1fr); gap: 22px; }
    .section-actions { flex-direction: column; align-items: stretch; }
    .btn-a { width: 100%; }              /* full-width, thumb-reachable */
    .faq-item summary { font-size: 14.5px; padding: 17px 2px; }
    .card, .svc-card, .centre-card, .warranty-card, .review-card, .track-ui { padding: 20px; }
}

@media (prefers-reduced-motion: reduce) {
    .card, .device-card, .svc-card, .btn-a, .btn-a svg, .link-a svg, .faq-chev { transition: none; }
    a.card:hover, .device-card:hover, .svc-card:hover, .btn-solid:hover { transform: none; }
}
/* ==========================================================================
   Header / floating-widget polish — the two chrome elements that sit in the
   hero's field of view and were undercutting it.
   ========================================================================== */

/* The menu toggle — the single most-tapped control on mobile — had a 22x14px
   hit area, well under the WCAG 2.2 AA 24x24 minimum. Equal padding and
   negative margin expand the target without moving the bars a pixel. */
.side-menu-button .nav-icon {
    padding: 12px;
    margin: -12px;
}

/* Header social icons rendered as 9-15px wide glyph links — far under the
   24x24 minimum. A flex box with a min size gives each a real tap area. */
.sidebar-social-icon li a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    min-height: 26px;
}

/* The theme's footer link lists render at 18px tall — below the WCAG 2.2 AA
   target-size minimum of 24x24 CSS px, and awkward to hit on a phone.
   Padding brings them to ~30px without changing the desktop layout. */
@media (max-width: 1024px) {
    /* `.footer-top a` (not just `ul li a`) — the branch phone and email links
       sit in plain divs, so a list-only selector missed them. */
    .footer-dark .footer-top a,
    .footer-dark .footer-bottom a {
        display: inline-block;
        padding: 6px 0;
        min-height: 24px;
    }
    .footer-dark .social-icon-style-12 ul li a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 34px;
        min-height: 34px;
    }
}

/* The theme pins the contact widget's "Contact Us" tooltip open permanently
   (`a.sywh-open-services[data-tooltip]::before { display: block }`), so a
   black label floats over the composition at all times on every page.
   Restore it to hover-only, matching every other tooltip in the theme. */
#sy-whatshelp a.sywh-open-services[data-tooltip]::before,
#sy-whatshelp a.sywh-open-services[data-tooltip]::after {
    display: none;
}

#sy-whatshelp a.sywh-open-services[data-tooltip]:hover::before,
#sy-whatshelp a.sywh-open-services[data-tooltip]:hover::after {
    display: block;
}

/* The theme's `max-height: 36px` overrode the previous width-only rule, so
   the logo could render smaller than its desktop rail intended. A dedicated
   square frame keeps the mark visually centred and consistently sized. */
@media (min-width: 1200px) {
    header.side-menu .sidebar-nav-action .logo {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 46px;
        height: 46px;
        margin-inline: auto;
    }
    header.side-menu .sidebar-nav-action .logo img {
        display: block;
        width: 40px;
        height: 40px;
        max-height: none;
        object-fit: contain;
    }
}

/* ── Phase 5 Wave 2: service experience (additive; no theme overrides) ────── */
/* Mobile sticky booking CTA. A spacer element reserves layout room so the bar
   never covers page content or the footer. Hidden on lg+ (d-lg-none in markup). */
.ascbd-sticky-cta {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1030;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 16px;
    background: #ffffff;
    border-top: 1px solid #ededed;
    box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.10);
}
.ascbd-sticky-cta .ascbd-sticky-price {
    font-weight: 600;
    color: #1d1d1f;
    font-size: 15px;
}
.ascbd-sticky-cta-spacer { height: 64px; }

/* Service cards: equal-height flex so price + buttons align across the row. */
.ascbd-svc-card .feature-box { display: flex; flex-direction: column; }
.ascbd-svc-card[hidden] { display: none; }

/* Keep the theme's floating contact widget clear of the mobile sticky CTA
   (only on pages that actually render the CTA, and only at mobile widths). */
@media (max-width: 991.98px) {
    body:has(.ascbd-sticky-cta) #sy-whatshelp { bottom: 84px; }
}

/* ══ Accessibility (Section 4) ════════════════════════════════════════════════ */
/* Skip-to-content: off-screen until focused, then pinned to the top-left. */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100000;
    background: #111;
    color: #fff;
    padding: 10px 16px;
    border-radius: 0 0 6px 0;
    font: 600 14px/1.2 system-ui, -apple-system, sans-serif;
    text-decoration: none;
}
.skip-link:focus { left: 0; }

/* The legacy theme sets `a:focus { outline: 0 }` globally, which removes the
   keyboard focus ring. Restore a visible, high-contrast ring for keyboard
   (:focus-visible) on every interactive control. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--accent, #2997ff);
    outline-offset: 2px;
    border-radius: 3px;
}
/* The <main> is only a programmatic focus target for the skip link. */
#main-content:focus { outline: none; }

/* Honour reduced-motion: neutralise animations / transitions / parallax. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

/* ── Phase 7: refined premium footer (scoped .ascbd-footer) ──────────────────
   Replaces the theme's footer-top/footer-bottom rows. Balanced grid, tighter
   vertical rhythm, DB-driven columns. Always visible (no .wow / opacity:0). */
.ascbd-footer {
    --af-accent: #2997ff;
    --af-fg: #f5f5f7;
    --af-muted: rgba(245, 245, 247, .6);
    --af-line: rgba(245, 245, 247, .12);
    padding: 64px 0 26px;
    border-top: 1px solid var(--af-line);
    color: var(--af-muted);
}
.page-wrapper.ascbd-footer-shell { background: #151515; }
.ascbd-footer .container { max-width: 1200px; }
.ascbd-footer-grid {
    display: grid;
    grid-template-columns: minmax(230px, 1.7fr) minmax(120px, 1fr) minmax(120px, 1fr) minmax(200px, 1.5fr) minmax(150px, 1.3fr);
    gap: clamp(28px, 2.5vw, 40px);
    padding-bottom: 44px;
}
.ascbd-footer-grid > * { min-width: 0; }
/* Headings — consistent hierarchy across every column. */
.ascbd-foot-head {
    font-size: 13px;
    line-height: 1.3;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--af-fg);
    margin: 0 0 18px;
}
/* Link lists (nav columns + PublicNav <ul><li><a> output). */
.ascbd-footer nav ul,
.ascbd-footer .ascbd-foot-contact { list-style: none; margin: 0; padding: 0; }
.ascbd-footer nav li { margin: 0 0 10px; }
.ascbd-footer a {
    color: var(--af-muted);
    text-decoration: none;
    font-size: 14px;
    line-height: 1.5;
    transition: color .15s ease;
}
.ascbd-footer a:hover { color: var(--af-fg); }
.ascbd-footer a:focus-visible {
    outline: 2px solid var(--af-accent);
    outline-offset: 3px;
    border-radius: 3px;
    color: var(--af-fg);
}
/* Brand column. */
.ascbd-foot-logo { display: inline-block; margin-bottom: 18px; }
.ascbd-foot-logo img { width: 174px; max-width: 100%; height: auto; }
.ascbd-foot-tagline {
    font-size: 14px;
    line-height: 1.6;
    color: var(--af-muted);
    max-width: 34ch;
    margin: 0 0 20px;
}
.ascbd-foot-cta {
    display: inline-flex;
    align-items: center;
    background: var(--af-accent);
    color: #fff !important;
    font-size: 14px;
    font-weight: 600;
    padding: 11px 22px;
    border-radius: 999px;
    margin-bottom: 22px;
    transition: background .15s ease, transform .15s ease;
}
.ascbd-foot-cta:hover { background: #1a86f0; color: #fff !important; transform: translateY(-1px); }
/* Contact + branch details. */
.ascbd-foot-address { font-style: normal; font-size: 14px; line-height: 1.6; color: var(--af-muted); margin: 0 0 14px; }
.ascbd-foot-contact li { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; font-size: 14px; }
.ascbd-foot-contact i { color: var(--af-accent); font-size: 15px; width: 18px; text-align: center; flex: 0 0 auto; }
/* Bottom bar. */
.ascbd-foot-bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px 28px;
    padding-top: 24px;
    border-top: 1px solid var(--af-line);
}
.ascbd-foot-copy { margin: 0; font-size: 13px; color: var(--af-muted); }
.ascbd-foot-dev { white-space: nowrap; }
.ascbd-foot-legal { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 0; padding: 0; }
.ascbd-foot-legal a { font-size: 13px; }
.ascbd-foot-social { list-style: none; display: flex; gap: 10px; margin: 0; padding: 0; }
.ascbd-foot-social a {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px;
    border: 1px solid var(--af-line);
    border-radius: 50%;
    color: var(--af-muted);
}
.ascbd-foot-social a:hover { background: var(--af-accent); border-color: var(--af-accent); color: #fff; }

/* Zoom-safe compact desktop: this breakpoint is intentionally earlier than
   the global tablet layout because browser zoom reduces the usable width after
   the fixed sidebar. The second row is deliberate, not a squeezed five-column
   fallback. */
@media (max-width: 1450px) {
    .ascbd-footer-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 38px 28px;
    }
    .ascbd-foot-brand,
    .ascbd-foot-branch,
    .ascbd-foot-devices { grid-column: span 2; }
    .ascbd-foot-bottom { align-items: flex-start; }
    .ascbd-foot-copy { max-width: 58ch; }
}

/* Smaller desktop windows retain a clear full-width contact introduction,
   while the navigational columns stay readable instead of being clipped. */
@media (max-width: 1180px) {
    .ascbd-footer-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 34px 26px;
    }
    .ascbd-foot-brand { grid-column: 1 / -1; }
    .ascbd-foot-branch { grid-column: auto; }
    .ascbd-foot-devices { grid-column: 1 / -1; }
    .ascbd-foot-devices ul {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0 26px;
    }
    .ascbd-foot-bottom {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
    }
    .ascbd-foot-legal { grid-column: 1 / -1; }
}

/* Tablet: fold to two rows of columns. */
@media (max-width: 1024px) {
    .ascbd-footer { padding: 48px 0 22px; }
    .ascbd-footer-grid { grid-template-columns: 1fr 1fr 1fr; gap: 34px 28px; }
    .ascbd-foot-brand { grid-column: 1 / -1; }
    /* Comfortable touch targets on tablet/mobile (WCAG 2.2 AA). */
    .ascbd-footer nav li a,
    .ascbd-footer .ascbd-foot-contact a,
    .ascbd-footer .ascbd-foot-legal a { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 0; }
}
/* Mobile: compact two-column navigation with full-width information cards. */
@media (max-width: 600px) {
    .ascbd-footer { padding: 32px 0 max(18px, env(safe-area-inset-bottom)); }
    .ascbd-footer .container { padding-inline: 20px; }
    .ascbd-footer-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
        padding-bottom: 28px;
    }
    .ascbd-foot-brand,
    .ascbd-foot-branch,
    .ascbd-foot-devices { grid-column: 1 / -1; }
    .ascbd-foot-brand { padding-bottom: 10px; }
    .ascbd-foot-col {
        min-width: 0;
        padding: 20px;
        border: 1px solid var(--af-line);
        border-radius: 14px;
        background: rgba(255, 255, 255, .025);
    }
    .ascbd-foot-links { padding-block: 16px; }
    .ascbd-foot-head { margin-bottom: 8px; }
    .ascbd-footer nav li { margin: 0; }
    .ascbd-footer nav li + li { border-top: 1px solid rgba(245, 245, 247, .075); }
    .ascbd-footer nav li a { width: 100%; overflow-wrap: anywhere; }
    .ascbd-foot-devices ul { display: block; }
    .ascbd-foot-tagline { max-width: none; }
    .ascbd-foot-cta { justify-content: center; width: 100%; min-height: 48px; margin-bottom: 14px; }
    .ascbd-foot-contact li { min-height: 44px; margin: 0; }
    .ascbd-foot-contact a { min-width: 0; overflow-wrap: anywhere; }
    .ascbd-foot-bottom {
        display: grid;
        grid-template-columns: 1fr;
        align-items: start;
        gap: 14px;
        padding-top: 22px;
        text-align: left;
    }
    .ascbd-foot-legal {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
        gap: 0 16px;
    }
    .ascbd-foot-legal li { border-top: 1px solid rgba(245, 245, 247, .075); }
    .ascbd-foot-legal a { width: 100%; overflow-wrap: anywhere; }
    .ascbd-foot-social a { width: 44px; height: 44px; }
    .ascbd-foot-copy { line-height: 1.7; }
    .ascbd-foot-dev { display: block; white-space: normal; }
}

.product-list-page .product-card-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }

@media (min-width: 1440px) {
    .product-list-page .product-card-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

@media (max-width: 1199px) {
    .product-list-page .product-card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
    .product-list-page .product-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
}

@media (max-width: 600px) {
    .product-list-page .product-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
}

.ascbd-service-detail .service-detail-hero-grid,
.product-detail-page .product-detail-grid { gap: clamp(28px, 4vw, 64px); }
.ascbd-service-detail .catalog-detail-hero,
.product-detail-page .product-detail-hero { padding-bottom: clamp(48px, 6vw, 78px); }
.ascbd-service-detail .catalog-media-stage,
.product-detail-page .product-detail-stage { min-height: 560px; }
.ascbd-service-detail .catalog-order-card,
.product-detail-page .product-buy-card { align-self: start; }
.ascbd-service-detail .catalog-order-card h1,
.product-detail-page .product-buy-card h1 { max-width: 15ch; font-size: var(--page-h1-size); line-height: var(--page-h1-leading); letter-spacing: var(--page-h1-tracking); }
.ascbd-service-detail .catalog-order-card .catalog-lede,
.product-detail-page .product-buy-lede { max-width: 48ch; color: #66758b; line-height: 1.65 !important; }
.ascbd-service-detail .catalog-price-block { margin: 24px 0 20px; padding: 20px 0 0; border-bottom: 0; }
.service-summary-meta { margin: 0 0 25px; padding: 0; border-top: 1px solid var(--catalog-line); border-bottom: 1px solid var(--catalog-line); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.service-summary-meta > div { min-width: 0; padding: 15px 14px 15px 0; }
.service-summary-meta > div + div { padding-left: 14px; border-left: 1px solid var(--catalog-line); }
.service-summary-meta > div:last-child:nth-child(odd) { grid-column: 1 / -1; border-top: 1px solid var(--catalog-line); border-left: 0; padding-left: 0; }
.service-summary-meta dt { color: #8a929d; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.service-summary-meta dd { margin: 5px 0 0; color: var(--catalog-ink); font-size: 14px; line-height: 1.45; }
.service-trust-strip,
.product-trust-strip { border-top: 1px solid rgba(218, 226, 237, .9); border-bottom: 1px solid rgba(218, 226, 237, .9); background: #fff; }
.service-trust-grid,
.product-trust-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.service-trust-grid > div,
.product-trust-grid > div { min-width: 0; padding: 20px 24px; }
.service-trust-grid > div + div,
.product-trust-grid > div + div { border-left: 1px solid var(--catalog-line); }
.service-trust-grid strong,
.product-trust-grid strong { display: block; color: var(--catalog-ink); font-size: 13px; font-weight: 650; }
.service-trust-grid span,
.product-trust-grid span { display: block; margin-top: 4px; color: var(--catalog-muted); font-size: 12px; line-height: 1.45; }
.service-information-layout { display: grid; grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr); gap: clamp(34px, 7vw, 96px); align-items: start; }
.service-information-layout .catalog-section-head { position: sticky; top: 96px; align-self: start; }
.service-information-list { border-top: 1px solid var(--catalog-line); }
.service-information-item { border-bottom: 1px solid var(--catalog-line); }
.service-information-item summary { min-height: 68px; padding: 20px 42px 20px 0; position: relative; display: flex; align-items: center; color: var(--catalog-ink); font-size: 16px; font-weight: 650; cursor: pointer; list-style: none; }
.service-information-item summary::-webkit-details-marker { display: none; }
.service-information-item summary > span { position: absolute; right: 8px; color: var(--catalog-blue); font-size: 22px; font-weight: 400; }
.service-information-item[open] summary > span { transform: rotate(45deg); }
.service-information-item > div { padding: 0 42px 24px 0; color: var(--catalog-muted); font-size: 15px; line-height: 1.72; }
.service-location-section { padding: clamp(42px, 6vw, 68px) 0; background: linear-gradient(135deg, #eaf3ff 0%, #f8fbff 100%); }
.service-location-inner { display: grid; grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr); gap: 40px; align-items: start; }
.service-location-inner h2 { max-width: 13ch; margin-bottom: 0; }
.service-location-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.service-location-list > div { min-width: 0; padding: 18px; border: 1px solid rgba(190, 209, 229, .95); border-radius: 15px; background: rgba(255,255,255,.8); }
.service-location-list strong,
.service-location-list span,
.service-location-list a { display: block; }
.service-location-list strong { color: var(--catalog-ink); font-size: 14px; }
.service-location-list span { margin-top: 7px; color: var(--catalog-muted); font-size: 12px; line-height: 1.5; }
.service-location-list a { margin-top: 10px; color: var(--catalog-blue); font-size: 12px; font-weight: 650; }
.service-location-list a + a { margin-top: 6px; }
.product-detail-page .product-detail-stage { min-height: 560px; background: radial-gradient(circle at 50% 34%, #fff 0%, #edf3fa 72%, #e5edf6 100%); }
.product-detail-page .product-buy-card { padding: clamp(26px, 3.2vw, 40px); }
.product-detail-page .product-buy-price { margin: 5px 0 20px !important; font-size: clamp(27px, 3vw, 36px) !important; }
.product-detail-page .product-buy-meta { margin-bottom: 22px; }
.product-detail-page .product-information-grid { gap: clamp(34px, 7vw, 96px); }
.product-detail-page .product-description { max-width: 58ch; }
.product-detail-page .product-spec-groups section:last-child { margin-bottom: 0; }

@media (max-width: 820px) {
    .ascbd-service-detail .catalog-media-stage,
    .product-detail-page .product-detail-stage { min-height: 430px; }
    .service-information-layout,
    .service-location-inner { grid-template-columns: minmax(0, 1fr); gap: 28px; }
    .service-information-layout .catalog-section-head { position: static; }
    .service-location-inner h2 { max-width: 20ch; }
}

@media (max-width: 600px) {
    .ascbd-service-detail .catalog-detail-hero,
    .product-detail-page .product-detail-hero { padding-bottom: 42px; }
    .ascbd-service-detail .catalog-order-card h1,
    .product-detail-page .product-buy-card h1 { max-width: none; }
    .ascbd-service-detail .catalog-media-stage,
    .product-detail-page .product-detail-stage { min-height: 350px; }
    .service-summary-meta { grid-template-columns: 1fr 1fr; }
    .service-summary-meta > div { padding-block: 13px; }
    .service-trust-grid,
    .product-trust-grid { grid-template-columns: 1fr; }
    .service-trust-grid > div,
    .product-trust-grid > div { padding: 15px 0; }
    .service-trust-grid > div + div,
    .product-trust-grid > div + div { border-top: 1px solid var(--catalog-line); border-left: 0; }
    .service-information-item summary { min-height: 62px; font-size: 15px; }
    .service-information-item > div { padding-right: 28px; font-size: 14px; }
    .service-location-list { grid-template-columns: 1fr; }
    .product-detail-page .product-buy-card { padding: 21px; }
}

.catalog-model-page .catalog-service-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.catalog-model-page .catalog-service-card { min-height: 390px; }
.catalog-model-page .catalog-service-media { flex: 0 0 154px; height: 154px; padding: 18px; border-bottom: 0; }
.catalog-model-page .catalog-service-media-art,
.catalog-model-page .catalog-service-media--icon > i { width: 88px; height: 88px; border: 1px solid #e0e7ee; border-radius: 50%; display: grid; place-items: center; background: #f2f5f8; box-shadow: 0 10px 24px rgba(23, 50, 77, .08); }
.catalog-model-page .catalog-service-media-art { overflow: hidden; }
.catalog-model-page .catalog-service-media-art img { width: 100%; height: 100%; max-width: none; max-height: none; padding: 14px; border-radius: 50%; object-fit: contain; filter: invert(1) grayscale(1) contrast(1.2); mix-blend-mode: multiply; }
.catalog-model-page .catalog-service-media--icon > i { color: var(--catalog-blue); font-size: 38px; font-style: normal; }
.catalog-model-page .catalog-service-body { padding: 20px; }

@media (min-width: 1440px) {
    .catalog-model-page .catalog-service-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

@media (max-width: 1199px) {
    .catalog-model-page .catalog-service-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
    .catalog-model-page .catalog-service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .catalog-model-page .catalog-service-media { flex-basis: 142px; height: 142px; }
}

@media (max-width: 600px) {
    .catalog-model-page .catalog-service-card { min-height: 0; }
    .catalog-model-page .catalog-service-media { flex-basis: 116px; height: 116px; padding: 13px; }
    .catalog-model-page .catalog-service-media-art,
    .catalog-model-page .catalog-service-media--icon > i { width: 70px; height: 70px; }
    .catalog-model-page .catalog-service-media-art img { padding: 11px; }
}

/* Very small phones: keep the navigation comfortably readable. */
@media (max-width: 374px) {
    .ascbd-footer .container { padding-inline: 16px; }
    .ascbd-footer-grid { grid-template-columns: 1fr; }
    .ascbd-foot-brand,
    .ascbd-foot-branch,
    .ascbd-foot-devices { grid-column: auto; }
    .ascbd-foot-legal { grid-template-columns: 1fr; }
}


/* ── Phase 7: editorial blog (uses the brand design system: .section env-paper,
   .section-inner, env vars --ink/--muted/--accent/--hairline/--surface/--shadow).
   No new design language — refined layout on the existing tokens. ─────────────── */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.blog-wrap { max-width: 1200px; }
.blog-hero { max-width: 720px; margin-bottom: clamp(26px, 3vw, 38px); }
.blog-hero-title { font-size: clamp(28px, 3.2vw, 40px); }
/* Search */
.blog-search { position: relative; display: flex; align-items: center; margin-top: 26px; max-width: 520px; }
.blog-search-i { position: absolute; left: 16px; color: var(--muted); pointer-events: none; }
.blog-search input { flex: 1 1 auto; height: 48px; padding: 0 108px 0 42px; border: 1px solid var(--hairline); border-radius: 999px; background: var(--surface); color: var(--ink); font: inherit; font-size: 15px; transition: border-color .15s ease, box-shadow .15s ease; }
.blog-search input::placeholder { color: var(--muted); }
.blog-search input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.blog-search-btn { position: absolute; right: 5px; height: 38px; padding: 0 20px; border: 0; border-radius: 999px; background: var(--ink); color: #fff; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; transition: background .15s ease; }
.blog-search-btn:hover { background: var(--accent); }
.blog-search-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Category chips — horizontally scrollable on mobile, keyboard-focusable links. */
.blog-cats { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: clamp(26px, 3vw, 40px); }
.blog-chip { flex: 0 0 auto; display: inline-flex; align-items: center; min-height: 36px; padding: 7px 16px; border: 1px solid var(--hairline); border-radius: 999px; background: var(--surface); color: var(--ink); font-family: "Poppins", sans-serif; font-size: 13px; font-weight: 500; text-decoration: none; white-space: nowrap; transition: border-color .15s ease, color .15s ease, background .15s ease; }
.blog-chip:hover { border-color: color-mix(in srgb, var(--accent) 55%, transparent); color: var(--accent); }
.blog-chip.is-active { background: var(--ink); border-color: var(--ink); color: #fff; }
.blog-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.blog-result-note { font-size: 14px; color: var(--muted); margin: 0 0 24px; }
/* Shared card bits */
.blog-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 9px; font-family: "Poppins", sans-serif; font-size: 12px; color: var(--muted); }
.blog-kicker { color: var(--accent); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.blog-dot { opacity: .6; }
.blog-thumb { display: block; position: relative; aspect-ratio: 3 / 2; overflow: hidden; background: #eef2f7; }
.blog-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.blog-thumb--art { color: var(--accent); }
.blog-thumb-art, .blog-thumb-art svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* Card language (built on the .card tokens) */
.blog-card { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--hairline); border-radius: 14px; overflow: hidden; color: var(--ink); text-decoration: none; transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease; }
.blog-card:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--accent) 55%, transparent); box-shadow: var(--shadow); color: var(--ink); }
.blog-card:hover .blog-thumb img { transform: scale(1.04); }
.blog-card:hover .blog-cta-i { transform: translateX(3px); }
.blog-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.blog-card-body { display: flex; flex-direction: column; gap: 10px; padding: 22px; flex: 1 1 auto; }
.blog-card-title { font-family: "Poppins", sans-serif; font-weight: 600; letter-spacing: -.015em; color: var(--ink); line-height: 1.25; font-size: 17px; }
.blog-card-excerpt { font-family: Roboto, sans-serif; font-size: 14px; line-height: 1.6; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.blog-cta { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 4px; color: var(--accent); font-family: "Poppins", sans-serif; font-weight: 600; font-size: 13.5px; }
.blog-cta-i { transition: transform .2s ease; }
/* Feature variant */
.blog-card--feature .blog-card-title { font-size: clamp(21px, 2.1vw, 27px); line-height: 1.16; }
.blog-card--feature .blog-card-body { padding: 28px; gap: 12px; }
.blog-card--feature .blog-card-excerpt { -webkit-line-clamp: 4; font-size: 15px; }
/* Side variant: compact horizontal card */
.blog-card--side { flex-direction: row; }
.blog-card--side .blog-thumb { flex: 0 0 40%; aspect-ratio: auto; }
.blog-card--side .blog-card-body { padding: 18px 20px; gap: 8px; }
.blog-card--side .blog-card-title { font-size: 16px; }
.blog-card--side .blog-card-excerpt { display: none; }
/* Editorial lead: featured (left) + two stacked side stories (right). */
.blog-lead { display: grid; grid-template-columns: 1.55fr 1fr; gap: 26px; margin-bottom: 34px; }
.blog-lead-side { display: flex; flex-direction: column; gap: 26px; }
.blog-lead-side .blog-card { flex: 1 1 0; }
/* Grid for remaining stories */
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
/* Pager */
.blog-pager { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 40px; }
.blog-pager-status { font-size: 14px; color: var(--muted); }
.blog-empty { text-align: center; padding: clamp(40px, 5vw, 64px) 28px; }

/* Tablet: featured full-width, side stories become 2 columns, grid 2-up. */
@media (max-width: 900px) {
    .blog-lead { grid-template-columns: 1fr; }
    .blog-lead-side { flex-direction: row; }
    .blog-lead-side .blog-card { flex: 1 1 0; }
    .blog-card--side { flex-direction: column; }
    .blog-card--side .blog-thumb { flex: none; aspect-ratio: 3 / 2; }
    .blog-card--side .blog-card-excerpt { display: -webkit-box; }
    .blog-grid { grid-template-columns: repeat(2, 1fr); }
}
/* Mobile: single column; chips scroll horizontally. */
@media (max-width: 620px) {
    .blog-lead-side { flex-direction: column; }
    .blog-grid { grid-template-columns: 1fr; }
    .blog-cats { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--gut, 0px) * -1); padding-bottom: 4px; -webkit-overflow-scrolling: touch; }
    .blog-cats::-webkit-scrollbar { display: none; }
    .blog-search { max-width: none; }
    .blog-search input { padding-right: 96px; }
}
@media (prefers-reduced-motion: reduce) {
    .blog-card, .blog-thumb img, .blog-cta-i { transition: none; }
    .blog-card:hover { transform: none; }
    .blog-card:hover .blog-thumb img { transform: none; }
}

/* ── Content typography (.content-rich): shared by article bodies + CMS pages.
   Was unstyled; this gives a readable measure and correct heading hierarchy. ── */
.content-rich { font-family: Roboto, sans-serif; font-size: 17px; line-height: 1.72; color: var(--ink, #1d1d1f); }
.content-rich > *:first-child { margin-top: 0; }
.content-rich p { margin: 0 0 1.15em; color: var(--ink, #1d1d1f); }
.content-rich h2, .content-heading { font-family: "Poppins", sans-serif; font-weight: 600; font-size: clamp(20px, 2vw, 25px); line-height: 1.25; letter-spacing: -0.015em; color: var(--ink, #1d1d1f); margin: 1.9em 0 0.6em; scroll-margin-top: 90px; }
.content-rich h3 { font-family: "Poppins", sans-serif; font-weight: 600; font-size: clamp(17px, 1.5vw, 20px); line-height: 1.3; color: var(--ink, #1d1d1f); margin: 1.5em 0 0.5em; }
.content-rich ul, .content-rich ol { margin: 0 0 1.15em; padding-left: 1.3em; }
.content-rich li { margin: 0 0 0.5em; line-height: 1.65; }
.content-rich a { color: var(--accent, #0062c4); text-decoration: underline; text-underline-offset: 2px; }
.content-rich a:hover { text-decoration: none; }
.content-rich strong { font-weight: 600; color: var(--ink, #1d1d1f); }
.content-rich blockquote { margin: 1.4em 0; padding: 4px 0 4px 20px; border-left: 3px solid color-mix(in srgb, var(--accent, #0062c4) 55%, transparent); color: var(--muted, #6e6e73); font-style: italic; }
.content-rich img { max-width: 100%; height: auto; border-radius: 10px; }
/* CMS callouts (PublicPageRenderer). */
.content-callout { margin: 1.4em 0; padding: 16px 18px; border-radius: 10px; border: 1px solid var(--hairline, rgba(29,29,31,.13)); background: color-mix(in srgb, var(--accent, #0062c4) 6%, var(--surface, #fff)); font-size: 15.5px; line-height: 1.6; }
.content-callout.callout-warning { background: #fff6e9; border-color: #f0d9ac; }
.content-callout.callout-success { background: #eef8ef; border-color: #c7e6cc; }
.content-callout > *:last-child { margin-bottom: 0; }

/* ── Blog article detail ─────────────────────────────────────────────────────── */
.blog-article-page {
    overflow: hidden;
    background:
        radial-gradient(ellipse 72% 44% at 88% -10%, rgba(0, 98, 196, .075), transparent 72%),
        #fbfbfa;
}
.page-wrapper .blog-article-page .section-inner.blog-article {
    width: min(980px, calc(100% - (var(--ascbd-page-gutter) + var(--ascbd-page-gutter))));
}
.blog-article .breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0 0 clamp(26px, 3vw, 36px);
    padding-bottom: 16px;
    border-bottom: 1px solid var(--hairline);
    font-family: "Poppins", sans-serif;
    font-size: 12.5px;
    color: var(--muted);
}
.blog-article .breadcrumb a { color: var(--muted); text-decoration: none; transition: color .16s ease; }
.blog-article .breadcrumb a:hover { color: var(--accent); }
.blog-article-head { max-width: 930px; margin-bottom: clamp(30px, 3vw, 42px); }
.blog-article-head .section-eyebrow { margin-bottom: 17px; color: var(--accent); font-weight: 600; }
.blog-article-title {
    max-width: 19ch;
    font-size: clamp(38px, 4.15vw, 58px);
    line-height: 1.065;
    letter-spacing: -.042em;
}
.blog-article-standfirst {
    max-width: 760px;
    margin-top: 21px;
    font-size: clamp(18px, 1.55vw, 21px);
    line-height: 1.58;
    color: color-mix(in srgb, var(--muted) 92%, var(--ink));
}
.blog-article-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px 10px;
    margin: 25px 0 0;
    padding: 14px 0;
    border-top: 1px solid var(--hairline);
    border-bottom: 1px solid var(--hairline);
    font-family: "Poppins", sans-serif;
    font-size: 12.5px;
    font-weight: 500;
    color: #5d6470;
}
.blog-article-meta > :not(.blog-dot) { white-space: nowrap; }
.blog-article-meta .blog-meta-author { color: var(--ink); font-weight: 600; }
.blog-article-meta .blog-meta-reading { color: var(--accent); }
.blog-article-meta .blog-meta-updated { color: var(--muted); }
.blog-article-meta .blog-dot { color: #a3a8b1; opacity: 1; }
.blog-featured {
    position: relative;
    margin: 0 0 clamp(38px, 4vw, 54px);
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--hairline) 88%, #fff);
    border-radius: clamp(16px, 2vw, 24px);
    background: #f4f6f8;
    box-shadow: 0 24px 64px rgba(26, 35, 49, .10);
}
.blog-featured img {
    width: 100%;
    height: auto;
    display: block;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    object-position: center;
}
.blog-toc,
.blog-article-body,
.blog-tags,
.blog-book { max-width: 760px; margin-right: auto; margin-left: auto; }
.blog-article-body { font-size: 18px; line-height: 1.78; }
.blog-toc { margin-bottom: 34px; }
.blog-tags { margin-top: 38px; }
.blog-book { margin-top: 40px; }

@media (max-width: 620px) {
    .blog-article-page { padding-block: 48px; }
    .blog-article .breadcrumb { margin-bottom: 24px; padding-bottom: 13px; font-size: 12px; }
    .blog-article-head { margin-bottom: 28px; }
    .blog-article-title { max-width: none; font-size: clamp(34px, 10.3vw, 44px); line-height: 1.08; }
    .blog-article-standfirst { margin-top: 17px; font-size: 17px; line-height: 1.6; }
    .blog-article-meta { gap: 6px 8px; margin-top: 21px; padding: 12px 0; font-size: 11.5px; }
    .blog-featured { margin-bottom: 32px; border-radius: 16px; }
    .blog-article-body { font-size: 16px; line-height: 1.72; }
    .blog-toc, .blog-article-body, .blog-tags, .blog-book { max-width: none; }
}
.blog-toc { margin: 0 0 28px; padding: 18px 22px; border: 1px solid var(--hairline); border-radius: 12px; background: var(--surface); }
.blog-toc-label { font-family: "Poppins", sans-serif; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 0 0 10px; }
.blog-toc ol { margin: 0; padding-left: 1.2em; display: grid; gap: 7px; }
.blog-toc a { color: var(--ink); text-decoration: none; font-size: 14.5px; }
.blog-toc a:hover { color: var(--accent); text-decoration: underline; }
.blog-tags { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 30px; }
.blog-book { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; margin-top: 34px; }
.blog-book-title { font-family: "Poppins", sans-serif; font-weight: 600; font-size: 17px; color: var(--ink); margin: 0 0 4px; }
.blog-book-copy { font-size: 14.5px; color: var(--muted); margin: 0; max-width: 52ch; }

/* ── Phase 7: book-a-repair (brand system: .section env-paper, env tokens) ───── */
.book-hero { max-width: 640px; margin-bottom: clamp(28px, 3vw, 40px); }
.book-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.book-alert { border: 1px solid #f0c9c9; background: #fdf1f1; color: #8a2b2b; border-radius: 12px; padding: 14px 18px; margin-bottom: 24px; font-size: 14.5px; }
.book-alert p { margin: 0 0 4px; } .book-alert p:last-child { margin: 0; }
/* Two-column: form + sticky summary. */
.book-grid { display: grid; grid-template-columns: 1.7fr 1fr; gap: 34px; align-items: start; }
.book-fieldset { border: 0; padding: 0; margin: 0 0 30px; }
.book-legend { display: flex; align-items: center; gap: 11px; font-family: "Poppins", sans-serif; font-weight: 600; font-size: 17px; color: var(--ink); padding: 0; margin-bottom: 18px; }
.book-legend-n { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 13px; }
.book-row { display: grid; gap: 16px; margin-bottom: 16px; }
.book-row-2 { grid-template-columns: 1fr 1fr; }
.book-row-3 { grid-template-columns: 1fr 1fr 1fr; }
.book-field { display: flex; flex-direction: column; gap: 6px; }
.book-field label { font-family: "Poppins", sans-serif; font-size: 13.5px; font-weight: 500; color: var(--ink); }
.book-field .req { color: var(--accent); } .book-field .opt, .book-consent .opt { color: var(--muted); font-weight: 400; }
.book-input { width: 100%; font: inherit; font-size: 15px; color: var(--ink); background: var(--surface); border: 1px solid var(--hairline); border-radius: 10px; padding: 11px 14px; transition: border-color .15s ease, box-shadow .15s ease; }
select.book-input { appearance: none; background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236e6e73' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px; }
textarea.book-input { resize: vertical; min-height: 82px; }
.book-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent); }
.book-input[aria-invalid="true"] { border-color: #c9463f; }
.book-field-err { display: block; color: #c9463f; font-size: 13px; margin-top: 4px; }
.book-help { font-size: 13.5px; color: var(--muted); margin: 4px 0 0; }
.book-consent { display: flex; align-items: flex-start; gap: 10px; margin: 20px 0 6px; }
.book-consent input { margin-top: 3px; width: 18px; height: 18px; flex: 0 0 auto; accent-color: var(--accent); }
.book-consent label { font-size: 14px; line-height: 1.5; color: var(--ink); }
.book-submit { margin-top: 20px; font-size: 15.5px; padding: 14px 26px; }
.book-submit.is-busy { opacity: .7; cursor: progress; }
.book-microcopy { font-size: 13px; color: var(--muted); margin: 12px 0 0; }
/* Summary panel (sticky on desktop). */
.book-summary { position: sticky; top: 92px; }
.book-summary-card { padding: 24px; }
.book-summary-title { font-family: "Poppins", sans-serif; font-size: 16px; font-weight: 600; color: var(--ink); margin: 0 0 16px; }
.book-summary-list { margin: 0; }
.book-summary-empty { font-size: 14px; color: var(--muted); line-height: 1.55; }
.book-summary-row { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--hairline); }
.book-summary-row dt { font-size: 12.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin: 0; }
.book-summary-row dd { font-size: 14px; font-weight: 500; color: var(--ink); margin: 0; text-align: right; }
.book-summary-price { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 16px; padding-top: 14px; }
.book-summary-price-label { font-size: 13px; color: var(--muted); }
.book-summary-price-value { font-family: "Poppins", sans-serif; font-size: 20px; font-weight: 700; color: var(--accent); text-align: right; }
.book-summary-note { font-size: 12.5px; color: var(--muted); line-height: 1.5; margin: 18px 0 0; }
/* Success. */
.book-success { max-width: 620px; padding: clamp(28px, 3vw, 40px); }
.book-success-badge { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%; background: #e9f7ee; color: #1f9d55; margin-bottom: 16px; }
.book-success-title { font-family: "Poppins", sans-serif; font-size: 23px; font-weight: 600; color: var(--ink); margin: 0 0 8px; }
.book-success-copy { color: var(--muted); margin: 0 0 14px; }
.book-code { font-family: "Poppins", sans-serif; font-size: clamp(24px, 3vw, 30px); font-weight: 700; letter-spacing: .04em; color: var(--ink); background: var(--surface); border: 1px dashed color-mix(in srgb, var(--accent) 45%, var(--hairline)); border-radius: 12px; padding: 16px; text-align: center; margin: 0 0 22px; }
.book-next { margin-bottom: 22px; }
.book-next p { margin: 0 0 8px; color: var(--ink); }
.book-next ol { margin: 0; padding-left: 1.2em; color: var(--muted); font-size: 14.5px; line-height: 1.6; }
.book-next li { margin-bottom: 6px; }

@media (max-width: 900px) {
    .book-grid { grid-template-columns: 1fr; gap: 28px; }
    /* Summary above the confirm action on tablet/mobile. */
    .book-summary { position: static; order: -1; }
    .book-row-3 { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
    .book-row-2 { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .book-input, .book-submit { transition: none; } }

/* ── Secure repair tracking ─────────────────────────────────────────────── */
.repair-track-inner { max-width: 1220px; }
.repair-track-hero { max-width: 670px; margin-bottom: clamp(30px, 4vw, 48px); }
.repair-track-layout { display: grid; grid-template-columns: minmax(300px, .72fr) minmax(0, 1.28fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.repair-track-entry { padding-top: 8px; }
.repair-track-form { padding: clamp(24px, 3.2vw, 34px); display: grid; gap: 18px; }
.repair-track-form-head { display: flex; gap: 13px; align-items: flex-start; margin-bottom: 2px; }
.repair-track-form-number, .repair-track-help-number { width: 28px; height: 28px; border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--hairline)); border-radius: 50%; display: inline-grid; place-items: center; flex: 0 0 auto; color: var(--accent); font-size: 12px; font-weight: 700; }
.repair-track-form-head h2, .repair-track-help h2, .repair-track-help h3 { margin: 0; color: var(--ink); font-family: "Poppins", sans-serif; }
.repair-track-form-head h2 { font-size: 19px; }
.repair-track-form-head p { margin: 4px 0 0; color: var(--muted); font-size: 13.5px; line-height: 1.5; }
.repair-track-form label { display: grid; gap: 8px; margin: 0; }
.repair-track-form label > span { color: var(--ink); font-size: 13px; font-weight: 650; }
.repair-track-form input { min-height: 52px; width: 100%; padding: 0 15px; border: 1px solid var(--hairline); border-radius: 10px; background: var(--surface); color: var(--ink); font: inherit; font-size: 15px; }
.repair-track-form input::placeholder { color: #9a9da3; }
.repair-track-form input:focus { border-color: var(--accent); outline: 0; box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 12%, transparent); }
.repair-track-form small { color: var(--muted); font-size: 12px; line-height: 1.45; }
.repair-track-form .btn-a { width: 100%; margin-top: 4px; }
.repair-track-alert { margin: 0 0 18px; padding: 14px 16px; border: 1px solid #efcaca; border-radius: 11px; display: flex; gap: 11px; align-items: flex-start; background: #fdf1f1; }
.repair-track-alert > span { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; flex: 0 0 auto; background: #b94242; color: #fff; font-size: 12px; font-weight: 700; }
.repair-track-alert p { margin: 0; color: #8c2e2e; font-size: 13px; line-height: 1.55; }
.repair-track-privacy { margin: 14px 0 0; display: flex; gap: 8px; color: var(--muted); font-size: 12px; line-height: 1.5; }
.repair-track-help { padding: clamp(27px, 4vw, 43px); display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 0 18px; }
.repair-track-help > div { padding: 0 0 29px; }
.repair-track-help > div:not(:last-child) { margin-bottom: 25px; border-bottom: 1px solid var(--hairline); }
.repair-track-help h2 { font-size: clamp(23px, 2.5vw, 31px); line-height: 1.17; }
.repair-track-help h3 { font-size: 18px; }
.repair-track-help p { margin: 9px 0 0; color: var(--muted); font-size: 14px; line-height: 1.6; }
.repair-track-help .link-a { margin-top: 13px; }
.repair-track-result { padding: clamp(27px, 4vw, 42px); }
.repair-track-result > header { padding-bottom: 28px; border-bottom: 1px solid var(--hairline); display: flex; justify-content: space-between; gap: 20px; align-items: flex-start; }
.repair-track-result > header .section-eyebrow { margin-bottom: 9px; font-size: 10px; }
.repair-track-result > header h2 { margin: 0; color: var(--ink); font-family: "Poppins", sans-serif; font-size: clamp(25px, 3vw, 34px); }
.repair-track-status { min-height: 31px; padding: 0 11px; border-radius: 99px; display: inline-flex; align-items: center; flex: 0 0 auto; background: #eaf3fc; color: #0968c5; font-size: 11px; font-weight: 700; }
.repair-track-status.is-cancelled { background: #fbe8e8; color: #a73535; }
.repair-track-meta { margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 1px solid var(--hairline); }
.repair-track-meta > div { padding: 21px 15px 21px 0; }
.repair-track-meta > div + div { padding-left: 15px; border-left: 1px solid var(--hairline); }
.repair-track-meta dt { color: var(--muted); font-size: 10.5px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; }
.repair-track-meta dd { margin: 5px 0 0; color: var(--ink); font-size: 13px; font-weight: 600; line-height: 1.45; }
.repair-track-progress-wrap { padding-top: 29px; }
.repair-track-progress-wrap h3, .repair-track-note h3 { margin: 0 0 22px; color: var(--ink); font-family: "Poppins", sans-serif; font-size: 18px; }
.repair-track-progress { margin: 0; padding: 0; display: flex; list-style: none; }
.repair-track-progress li { position: relative; flex: 1; display: flex; flex-direction: column; gap: 11px; color: #999ca2; font-size: 11px; }
.repair-track-progress li:not(:last-child)::after { content: ''; position: absolute; top: 15px; left: 33px; right: 8px; height: 1px; background: #d9dce0; }
.repair-track-progress span { position: relative; z-index: 1; width: 31px; height: 31px; border: 1px solid #d5d8dc; border-radius: 50%; display: grid; place-items: center; background: var(--surface); color: #8a8e95; font-size: 9px; font-weight: 700; }
.repair-track-progress strong { max-width: 105px; color: inherit; font-size: inherit; font-weight: 600; line-height: 1.35; }
.repair-track-progress li.is-complete, .repair-track-progress li.is-current { color: var(--ink); }
.repair-track-progress li.is-complete::after { background: #16834a; }
.repair-track-progress li.is-complete span { border-color: #16834a; background: #16834a; color: #fff; }
.repair-track-progress li.is-current span { border-color: var(--accent); color: var(--accent); box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 12%, transparent); }
.repair-track-note, .repair-track-cancelled { margin-top: 29px; padding-top: 26px; border-top: 1px solid var(--hairline); }
.repair-track-note h3 { margin-bottom: 9px; }
.repair-track-note p, .repair-track-cancelled { margin-bottom: 0; color: var(--muted); font-size: 14px; line-height: 1.65; }
.repair-track-cancelled { color: #8c2e2e; }

@media (max-width: 900px) {
    .repair-track-layout { grid-template-columns: 1fr; gap: 28px; }
    .repair-track-entry { padding-top: 0; }
}
@media (max-width: 620px) {
    .repair-track-hero { margin-bottom: 28px; }
    .repair-track-result > header { flex-direction: column; }
    .repair-track-meta { grid-template-columns: 1fr; }
    .repair-track-meta > div { padding: 15px 0; }
    .repair-track-meta > div + div { padding-left: 0; border-top: 1px solid var(--hairline); border-left: 0; }
    .repair-track-progress { display: grid; }
    .repair-track-progress li { min-height: 56px; padding-left: 46px; justify-content: center; }
    .repair-track-progress li:not(:last-child)::after { top: 34px; bottom: -22px; left: 15px; right: auto; width: 1px; height: auto; }
    .repair-track-progress span { position: absolute; top: 12px; left: 0; }
    .repair-track-progress strong { max-width: none; }
    .repair-track-help { grid-template-columns: 30px minmax(0, 1fr); gap: 0 14px; padding: 24px 20px; }
}
@media (prefers-reduced-motion: reduce) { .repair-track-form input { transition: none; } }

/* ── Commerce: cart launcher, drawer, cart & checkout layouts ───────────────── */
.ascbd-cart-launch {
    position: fixed; top: 18px; right: 18px; z-index: 1040;
    width: 46px; height: 46px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: #111; color: #fff; box-shadow: 0 4px 14px rgba(0,0,0,.18);
    text-decoration: none; transition: transform .15s ease, background .15s ease;
}
.ascbd-cart-launch:hover { background: #000; transform: translateY(-1px); color: #fff; }
/* On mobile the top bar (with the hamburger) is a black strip — move the cart
   launcher to the lower-right so it neither collides with nor camouflages against
   it, sitting clear above the contact FAB. */
@media (max-width: 991px) {
    .ascbd-cart-launch { top: auto; bottom: 148px; right: 20px; background: #0071e3; box-shadow: 0 4px 14px rgba(0,0,0,.28); }
    .ascbd-cart-launch:hover { background: #005bbf; }
}
.ascbd-cart-count {
    position: absolute; top: -4px; right: -4px; min-width: 20px; height: 20px;
    padding: 0 5px; border-radius: 10px; background: #d92d20; color: #fff;
    font-size: 11px; line-height: 20px; text-align: center; font-weight: 700;
    display: none;
}
.ascbd-cart-count.is-visible { display: inline-block; }
.ascbd-cart-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 1050;
    opacity: 0; transition: opacity .25s ease;
}
.ascbd-cart-overlay.is-open { opacity: 1; }
.ascbd-cart-drawer {
    position: fixed; top: 0; right: 0; height: 100%; width: 360px; max-width: 90vw;
    background: #fff; z-index: 1060; box-shadow: -6px 0 24px rgba(0,0,0,.16);
    transform: translateX(100%); transition: transform .25s ease;
    display: flex; flex-direction: column;
}
.ascbd-cart-drawer.is-open { transform: translateX(0); }
.ascbd-cart-drawer-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 18px 20px; border-bottom: 1px solid #eee;
}
.ascbd-cart-drawer-head h2 { margin: 0; font-size: 18px; }
.ascbd-cart-close { background: none; border: 0; font-size: 28px; line-height: 1; cursor: pointer; color: #333; }
.ascbd-cart-drawer-body { padding: 18px 20px; overflow-y: auto; }
.ascbd-cart-drawer-line,
.ascbd-cart-drawer-sub {
    display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; font-size: 14px;
}
.ascbd-cart-drawer-sub { border-top: 1px solid #eee; margin-top: 8px; padding-top: 12px; font-weight: 700; }

.ascbd-btn.is-disabled { opacity: .5; cursor: not-allowed; pointer-events: none; }

/* Cart page */
.cart-line {
    display: grid; grid-template-columns: 1fr auto auto auto; align-items: center; gap: 16px;
    padding: 16px 0; border-bottom: 1px solid #eee;
}
.cart-line-main { display: flex; flex-direction: column; gap: 2px; }
.cart-line-name { font-weight: 600; }
.cart-line-note { color: #b54708; font-size: 12px; }
.cart-line-unit { color: #666; font-size: 13px; }
.cart-line-qty { display: flex; gap: 8px; align-items: center; }
.cart-line-qty input { width: 68px; padding: 6px 8px; }
.cart-line-total { font-weight: 700; white-space: nowrap; }
.cart-summary { display: flex; justify-content: space-between; margin-top: 20px; font-size: 18px; }
.cart-summary-amt { font-weight: 700; }

/* Checkout */
.checkout-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 32px; align-items: start; }
.checkout-summary { background: #fafafa; border: 1px solid #eee; border-radius: 10px; padding: 20px; }
.checkout-sum-line { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; font-size: 14px; }
.checkout-sum-total { border-top: 1px solid #ddd; margin-top: 8px; padding-top: 12px; font-weight: 700; }
.checkout-method { display: flex; align-items: center; gap: 10px; padding: 8px 0; }
.product-add-form { display: flex; gap: 10px; align-items: center; }
.product-add-form input[type=number] { width: 72px; padding: 8px; }

@media (max-width: 767px) {
    .checkout-grid { grid-template-columns: 1fr; }
    .cart-line { grid-template-columns: 1fr auto; grid-auto-rows: auto; }
    .cart-line-qty, .cart-line-total { grid-column: 1 / -1; }
}

/* ── Storefront primitives ───────────────────────────────────────────────────
   These classes are used by the product pages and the commerce storefront
   (cart/checkout/confirmation/tracking). They were previously undefined in the
   shipped stylesheet, so the markup fell back to unstyled links/blocks. Defined
   here additively (theme-consistent, Apple-ish light surface) — no existing rule
   is overridden. */
.page-wrapper { background: #fff; }
.sec-light { background: #fff; }
.sec-inner { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.sec-head { margin-bottom: 26px; }
.sec-eyebrow { display: block; text-transform: uppercase; letter-spacing: .08em; font-size: 12px; font-weight: 700; color: #0071e3; margin-bottom: 6px; }
.sec-title { font-size: 30px; line-height: 1.15; font-weight: 700; color: #1d1d1f; margin: 4px 0 10px; }
.sec-sub { color: #515154; font-size: 16px; line-height: 1.5; }

.ascbd-card { display: block; background: #fff; border: 1px solid #e6e6e6; border-radius: 14px; padding: 22px; text-decoration: none; color: inherit; }
a.ascbd-card { transition: box-shadow .15s ease, transform .15s ease; }
a.ascbd-card:hover { box-shadow: 0 8px 24px rgba(0,0,0,.08); transform: translateY(-2px); }
.ascbd-card-title { display: block; font-weight: 600; font-size: 17px; color: #1d1d1f; }
.ascbd-card-text { color: #515154; font-size: 14px; line-height: 1.5; margin: 6px 0 0; }

.ascbd-grid { display: grid; gap: 20px; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .grid-3 { grid-template-columns: 1fr; } }

.ascbd-btn { display: inline-flex; align-items: center; gap: 8px; padding: 11px 22px; border-radius: 980px; font-weight: 600; font-size: 15px; line-height: 1; text-decoration: none; border: 1px solid transparent; cursor: pointer; transition: background .15s ease, color .15s ease, border-color .15s ease; }
.ascbd-btn-primary { background: #0071e3; color: #fff; }
.ascbd-btn-primary:hover { background: #0060c0; color: #fff; }
.ascbd-btn-ghost { background: transparent; color: #0071e3; border-color: #d2d2d7; }
.ascbd-btn-ghost:hover { background: rgba(0,113,227,.06); border-color: #0071e3; color: #0071e3; }
.ascbd-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.ascbd-actions-center { justify-content: center; }

.spec-table { width: 100%; border-collapse: collapse; margin: 8px 0; }
.spec-table th, .spec-table td { text-align: left; padding: 9px 12px; border-bottom: 1px solid #eee; font-size: 14px; vertical-align: top; }
.spec-table th { color: #6e6e73; font-weight: 600; }
.spec-table td:last-child { text-align: right; white-space: nowrap; }

.product-gallery { display: flex; gap: 12px; flex-wrap: wrap; margin: 16px 0; }
.product-img { max-width: 100%; max-height: 360px; border-radius: 12px; border: 1px solid #eee; }

.track-timeline { list-style: none; padding: 0; margin: 0; }
.track-timeline li { padding: 7px 0; border-bottom: 1px solid #f0f0f0; }

.book-form label { display: block; font-weight: 600; font-size: 14px; margin: 14px 0 6px; color: #1d1d1f; }
.book-form input:not([type=checkbox]):not([type=radio]), .book-form textarea, .book-form select { width: 100%; padding: 10px 12px; border: 1px solid #ccc; border-radius: 8px; font-size: 15px; background: #fff; }
.book-form input:focus, .book-form textarea:focus, .book-form select:focus { outline: 2px solid #0071e3; outline-offset: 1px; border-color: #0071e3; }

/* ── Service catalogue & product journey ───────────────────────────────────
   A single visual language across device → model → repair → product. */
.catalog-shell {
    --catalog-ink: #101114;
    --catalog-muted: #63666d;
    --catalog-blue: #0672df;
    --catalog-line: #e3e5e8;
    --catalog-soft: #f4f5f6;
    --catalog-white: #fff;
    color: var(--catalog-ink);
    background: var(--catalog-soft);
}
.catalog-shell *, .catalog-shell *::before, .catalog-shell *::after { box-sizing: border-box; }
.catalog-inner { width: min(1240px, calc(100% - 48px)); margin: 0 auto; }
.catalog-shell h1, .catalog-shell h2, .catalog-shell h3, .catalog-shell p { margin-top: 0; }
.catalog-shell h1, .catalog-shell h2, .catalog-shell h3 { color: var(--catalog-ink); letter-spacing: -.035em; }
.catalog-shell h1 { font-size: var(--page-h1-size); line-height: var(--page-h1-leading); letter-spacing: var(--page-h1-tracking); font-weight: 650; }
.catalog-shell h2 { font-size: clamp(30px, 3.2vw, 48px); line-height: 1.08; font-weight: 620; }
.catalog-shell h3 { font-size: 20px; line-height: 1.22; font-weight: 600; }
.catalog-shell p { color: var(--catalog-muted); font-size: 16px; line-height: 1.7; }
.catalog-kicker { margin: 0 0 16px !important; color: var(--catalog-blue) !important; font-size: 11px !important; line-height: 1.2 !important; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
.catalog-crumbs { width: min(1240px, calc(100% - 48px)); min-height: 58px; margin: 0 auto; display: flex; align-items: center; gap: 9px; overflow: hidden; color: #868991; font-size: 12px; white-space: nowrap; }
.catalog-crumbs a { color: #4e5158; text-decoration: none; }
.catalog-crumbs a:hover { color: var(--catalog-blue); }
.catalog-crumbs span:last-child { overflow: hidden; text-overflow: ellipsis; }
.catalog-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin-top: 30px; }
.catalog-primary-action { min-height: 52px; padding: 0 22px; border: 0; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; gap: 14px; background: var(--catalog-blue); color: #fff !important; font-size: 14px; font-weight: 650; line-height: 1; text-decoration: none !important; box-shadow: 0 8px 20px rgba(6,114,223,.14); cursor: pointer; transition: transform .2s ease, background .2s ease, box-shadow .2s ease; }
.catalog-primary-action:hover { background: #005fc2; transform: translateY(-2px); box-shadow: 0 12px 28px rgba(6,114,223,.22); }
.catalog-text-action { display: inline-flex; align-items: center; gap: 9px; color: var(--catalog-ink); font-size: 14px; font-weight: 620; text-decoration: none; }
.catalog-text-action:hover { color: var(--catalog-blue); }
.catalog-text-action--light { color: #fff; }
.catalog-section { padding: clamp(74px, 8vw, 116px) 0; background: var(--catalog-soft); }
.catalog-section--white { background: #fff; }
.catalog-section--compact { padding-top: 72px; padding-bottom: 72px; }
.catalog-section--ink { background: #101114; color: #fff; }
.catalog-section--ink h2, .catalog-section--ink h3 { color: #fff; }
.catalog-section--ink p { color: #a9adb5; }
.catalog-section-head { max-width: 730px; margin-bottom: 42px; }
.catalog-section-head h2 { margin-bottom: 15px; }
.catalog-section-head > p:last-child { max-width: 650px; margin-bottom: 0; }
.catalog-section-head--with-search { max-width: none; display: flex; align-items: flex-end; justify-content: space-between; gap: 36px; }
.catalog-section-head--with-search > div { max-width: 720px; }
.catalog-section-head--with-search > div > p:last-child { margin-bottom: 0; }
.catalog-search { min-height: 50px; width: min(360px, 100%); padding: 0 16px; border: 1px solid #d8dade; border-radius: 9px; display: flex; align-items: center; gap: 10px; background: #fff; color: #777b83; transition: border-color .2s ease, box-shadow .2s ease; }
.catalog-search:focus-within { border-color: var(--catalog-blue); box-shadow: 0 0 0 4px rgba(6,114,223,.1); }
.catalog-search input { width: 100%; padding: 0; border: 0; outline: 0; background: transparent; color: var(--catalog-ink); font-size: 14px; }
.catalog-empty { padding: clamp(42px, 6vw, 72px); border: 1px solid var(--catalog-line); border-radius: 18px; background: #fff; text-align: center; }
.catalog-empty h2 { font-size: clamp(25px, 3vw, 38px); }
.catalog-empty p { max-width: 620px; margin: 0 auto 24px; }
.catalog-empty .catalog-actions { justify-content: center; }

/* Hub. */
.catalog-hero { padding: clamp(72px, 9vw, 132px) 0; background: #fff; border-top: 1px solid #f0f0f1; }
.catalog-hero-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(330px, .7fr); gap: clamp(56px, 8vw, 120px); align-items: center; }
.catalog-hero-grid > div:first-child > p:not(.catalog-kicker) { max-width: 670px; font-size: clamp(17px, 1.5vw, 20px); }
.catalog-hero-assurance { border-top: 1px solid var(--catalog-line); }
.catalog-hero-assurance { display: grid; grid-template-columns: 48px 1fr; }
.catalog-hero-assurance > span, .catalog-hero-assurance > p { padding: 21px 0; border-bottom: 1px solid var(--catalog-line); }
.catalog-hero-assurance > span { color: var(--catalog-blue); font-size: 12px; font-weight: 700; }
.catalog-hero-assurance > p { margin: 0; }
.catalog-hero-assurance strong, .catalog-hero-assurance small { display: block; }
.catalog-hero-assurance strong { color: var(--catalog-ink); font-size: 15px; }
.catalog-hero-assurance small { margin-top: 2px; color: var(--catalog-muted); font-size: 12px; }
.catalog-device-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.catalog-device-card { min-height: 330px; padding: 28px; border: 1px solid var(--catalog-line); border-radius: 15px; display: flex; flex-direction: column; color: var(--catalog-ink); background: #fff; text-decoration: none; overflow: hidden; transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; }
.catalog-device-card:hover { color: var(--catalog-ink); border-color: #c8ccd1; transform: translateY(-4px); box-shadow: 0 20px 44px rgba(16,17,20,.08); }
.catalog-device-media { height: 196px; display: grid; place-items: center; color: #202226; }
.catalog-device-media img { width: 100%; height: 100%; object-fit: contain; }
.catalog-device-media svg { transition: transform .25s ease; }
.catalog-device-card:hover .catalog-device-media svg { transform: scale(1.04); }
.catalog-device-name { margin-top: auto; font-size: 20px; font-weight: 650; letter-spacing: -.02em; }
.catalog-card-link { margin-top: 9px; display: flex; align-items: center; gap: 8px; color: var(--catalog-blue); font-size: 13px; font-weight: 600; }

/* Device page. */
.catalog-device-hero { padding: clamp(68px, 8vw, 118px) 0; background: #fff; overflow: hidden; }
.catalog-device-hero-grid { min-height: 460px; display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; }
.catalog-device-hero-grid > div:first-child { position: relative; z-index: 1; }
.catalog-device-hero-grid h1 { max-width: 760px; }
.catalog-lede, .catalog-lede p { max-width: 680px; margin-bottom: 0; font-size: clamp(17px, 1.6vw, 20px) !important; line-height: 1.65 !important; }
.catalog-device-hero-visual { height: 500px; border-radius: 28px; display: grid; place-items: center; background: radial-gradient(circle at 50% 45%, #fff 0, #eef0f3 72%); }
.catalog-device-hero-visual img { width: 100%; height: 100%; padding: 38px; object-fit: contain; filter: drop-shadow(0 24px 26px rgba(16,17,20,.12)); }
.catalog-device-hero-visual--icon { color: #22252a; }
.catalog-service-band { padding: 30px 0; background: #101114; }
.catalog-service-band .catalog-inner { display: grid; grid-template-columns: 190px 1fr; gap: 24px; align-items: center; }
.catalog-service-band .catalog-kicker { margin: 0 !important; color: #8cbef1 !important; }
.catalog-service-chips { display: flex; flex-wrap: wrap; gap: 9px; }
.catalog-service-chips span { min-height: 38px; padding: 0 13px; border: 1px solid #303238; border-radius: 8px; display: inline-flex; align-items: center; gap: 8px; color: #e7e8ea; font-size: 12px; }
.catalog-service-chips i { color: #67aaf0; font-size: 16px; }
.catalog-service-chips img { width: 22px; height: 22px; border-radius: 5px; object-fit: contain; background: #fff; }
.catalog-service-band small { grid-column: 2; color: #858992; font-size: 11px; }
.catalog-model-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.catalog-model-card { min-height: 360px; border: 1px solid var(--catalog-line); border-radius: 15px; display: flex; flex-direction: column; color: inherit; background: #fff; text-decoration: none; overflow: hidden; transition: transform .22s ease, box-shadow .22s ease; }
.catalog-model-card:hover { color: inherit; transform: translateY(-4px); box-shadow: 0 18px 42px rgba(16,17,20,.08); }
.catalog-model-card-media { height: 236px; padding: 20px; display: grid; place-items: center; background: #f6f7f8; color: #30333a; }
.catalog-model-card-media img { width: 100%; height: 100%; object-fit: contain; transition: transform .25s ease; }
.catalog-model-card:hover img { transform: scale(1.035); }
.catalog-model-card-body { flex: 1; min-height: 112px; padding: 22px; display: flex; flex-direction: column; }
.catalog-model-card-body strong { font-size: 18px; letter-spacing: -.02em; }
.catalog-model-card-body small { margin-top: 4px; color: var(--catalog-muted); }
.catalog-model-card-body > span { margin-top: auto; padding-top: 18px; display: flex; align-items: center; gap: 8px; color: var(--catalog-blue); font-size: 13px; font-weight: 600; }

/* Model page. */
.catalog-model-hero { padding: clamp(62px, 7vw, 104px) 0; background: #101114; }
.catalog-model-hero-grid { display: grid; grid-template-columns: 1.08fr .92fr; gap: 64px; align-items: center; }
.catalog-model-copy h1 { color: #fff; }
.catalog-model-copy > p:not(.catalog-kicker) { max-width: 670px; color: #b4b7be; font-size: 18px; }
.catalog-model-visual { position: relative; height: clamp(460px, 32vw, 520px); padding: clamp(28px, 3vw, 46px); border: 1px solid #292b30; border-radius: 30px; display: grid; place-items: center; background: radial-gradient(circle at 50% 40%, #292c32 0, #17181c 64%); color: #e5e7ea; overflow: hidden; }
.catalog-model-visual--image { border-color: rgba(210, 221, 233, .95); background: linear-gradient(145deg, #f7f9fc 0%, #e8eef5 100%); box-shadow: 0 30px 80px rgba(7, 18, 34, .16); }
.catalog-model-visual--image::before { content: ''; position: absolute; width: 78%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.98) 0%, rgba(255,255,255,.72) 43%, rgba(255,255,255,0) 72%); pointer-events: none; }
.catalog-model-visual-art { position: absolute; z-index: 1; inset: clamp(28px, 3vw, 46px); box-sizing: border-box; overflow: hidden; }
.catalog-model-visual-art img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none; max-height: none; padding: 0; object-fit: contain; filter: drop-shadow(0 26px 30px rgba(16, 27, 43, .22)); }
.catalog-service-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.catalog-service-card { min-height: 430px; border: 1px solid var(--catalog-line); border-radius: 15px; display: flex; flex-direction: column; background: #fff; overflow: hidden; transition: transform .22s ease, box-shadow .22s ease; }
.catalog-service-card:hover { transform: translateY(-4px); box-shadow: 0 18px 42px rgba(16,17,20,.08); }
.catalog-service-card[hidden] { display: none; }
.catalog-service-media { height: 188px; padding: 20px; border-bottom: 1px solid #edf0f3; display: grid; place-items: center; background: linear-gradient(145deg, #f8fafc, #edf2f7); color: #1c1e22; }
.catalog-service-media img { width: 100%; height: 100%; object-fit: contain; }
.catalog-service-media i { font-size: 52px; color: #292c31; }
.catalog-service-body { flex: 1; padding: 23px; display: flex; flex-direction: column; }
.catalog-service-body .catalog-kicker { margin-bottom: 11px !important; }
.catalog-service-body h3 { margin-bottom: 10px; }
.catalog-service-body h3 a { color: inherit; text-decoration: none; }
.catalog-service-body > p:not(.catalog-kicker) { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 3; font-size: 14px; line-height: 1.6; }
.catalog-service-footer { margin-top: auto; padding-top: 20px; border-top: 1px solid var(--catalog-line); display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.catalog-service-footer > a { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; flex: 0 0 auto; background: var(--catalog-ink); color: #fff; }
.catalog-inline-price .alt-font { color: var(--catalog-ink) !important; }
.catalog-contact-strip { padding: 50px 0; background: #e7f1fb; }
.catalog-contact-strip .catalog-inner { display: grid; grid-template-columns: .8fr 1.2fr; gap: 56px; align-items: center; }
.catalog-contact-strip h2 { margin-bottom: 0; font-size: clamp(27px, 3vw, 42px); }
.catalog-contact-links { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.catalog-contact-links a { padding: 18px 20px; border-radius: 10px; display: flex; flex-direction: column; background: #fff; color: inherit; text-decoration: none; }
.catalog-contact-links a:hover { box-shadow: 0 10px 25px rgba(16,17,20,.08); }
.catalog-contact-links span { color: var(--catalog-muted); font-size: 11px; text-transform: uppercase; letter-spacing: .1em; }
.catalog-contact-links strong { margin-top: 3px; color: var(--catalog-ink); font-size: 16px; }
.catalog-model-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--catalog-line); border-left: 1px solid var(--catalog-line); }
.catalog-model-strip a { min-height: 110px; padding: 21px; border-right: 1px solid var(--catalog-line); border-bottom: 1px solid var(--catalog-line); display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 4px 12px; color: inherit; background: #fff; text-decoration: none; }
.catalog-model-strip a:hover { background: #fafafa; color: var(--catalog-blue); }
.catalog-model-strip span { font-weight: 600; }
.catalog-model-strip small { grid-row: 2; color: var(--catalog-muted); }
.catalog-model-strip svg { grid-column: 2; grid-row: 1 / 3; }

/* Repair detail. */
.catalog-detail-hero { padding: 28px 0 clamp(74px, 8vw, 112px); background: #fff; }
.catalog-detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 4vw, 64px); align-items: start; }
.catalog-media-stage { min-height: 590px; border-radius: 22px; display: grid; place-items: center; background: #f3f4f5; overflow: hidden; }
.catalog-media-stage img { display: block; width: auto; height: auto; max-width: 100%; max-height: 100%; padding: 42px; object-fit: contain; }
.catalog-media-stage--empty { color: #2b2e34; }
.catalog-icon-stage { width: 170px; height: 170px; border-radius: 36px; display: grid; place-items: center; background: #fff; box-shadow: 0 20px 55px rgba(16,17,20,.08); }
.catalog-icon-stage i { color: var(--catalog-blue); font-size: 74px; }
.catalog-thumbnails, .product-detail-thumbs { margin-top: 13px; display: flex; gap: 10px; overflow-x: auto; }
.catalog-thumb, .product-detail-thumb { width: 76px; height: 76px; padding: 5px; border: 1px solid var(--catalog-line); border-radius: 9px; flex: 0 0 auto; background: #fff; cursor: pointer; }
.catalog-thumb img, .product-detail-thumb img { width: 100%; height: 100%; object-fit: contain; }
.catalog-thumb.is-active, .product-detail-thumb.is-active { border-color: var(--catalog-blue); box-shadow: inset 0 0 0 1px var(--catalog-blue); }
.catalog-order-card { position: sticky; top: 92px; padding: 8px 0 0; }
.catalog-order-card h1 { margin-bottom: 19px; font-size: var(--page-h1-size); line-height: var(--page-h1-leading); letter-spacing: var(--page-h1-tracking); }
.catalog-order-card .catalog-lede { margin-bottom: 23px; font-size: 16px !important; }
.catalog-price-block { margin: 26px 0; padding: 23px 0 6px; border-top: 1px solid var(--catalog-line); border-bottom: 1px solid var(--catalog-line); }
.catalog-price-block .alt-font { color: var(--catalog-ink) !important; }
.catalog-order-card > .catalog-primary-action { width: 100%; }
.catalog-action-note { margin: 12px 0 0 !important; font-size: 12px !important; line-height: 1.5 !important; text-align: center; }
.catalog-facts { margin: 25px 0 0; padding: 0; list-style: none; }
.catalog-facts li { padding: 13px 0; border-top: 1px solid var(--catalog-line); display: flex; align-items: center; gap: 11px; color: #35383e; font-size: 13px; }
.catalog-facts svg { color: var(--catalog-blue); }
.catalog-facts b { margin-bottom: 2px; display: block; color: var(--catalog-ink); font-weight: 650; }
.catalog-symptom-grid { margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--catalog-line); border-left: 1px solid var(--catalog-line); list-style: none; }
.catalog-symptom-grid li { min-height: 96px; padding: 20px; border-right: 1px solid var(--catalog-line); border-bottom: 1px solid var(--catalog-line); display: flex; align-items: center; gap: 12px; background: #fff; color: #30333a; font-size: 14px; }
.catalog-symptom-grid svg { flex: 0 0 auto; color: var(--catalog-blue); }
.catalog-content-layout { display: grid; grid-template-columns: .65fr 1.35fr; gap: clamp(50px, 8vw, 120px); }
.catalog-content-layout .catalog-section-head { position: sticky; top: 95px; align-self: start; }
.catalog-content-cards { border-top: 1px solid var(--catalog-line); }
.catalog-content-card { padding: 29px 0; border-bottom: 1px solid var(--catalog-line); }
.catalog-content-card h3 { margin-bottom: 10px; }
.catalog-content-card p { margin-bottom: 0; }
.catalog-product-grid, .product-card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.catalog-product-card { min-height: 400px; border: 1px solid var(--catalog-line); border-radius: 15px; display: flex; flex-direction: column; color: inherit; background: #fff; text-decoration: none; overflow: hidden; transition: transform .22s ease, box-shadow .22s ease; }
.catalog-product-card:hover { color: inherit; transform: translateY(-4px); box-shadow: 0 18px 42px rgba(16,17,20,.08); }
.catalog-product-media { height: 230px; min-height: 230px; padding: 22px; display: flex; align-items: center; justify-content: center; box-sizing: border-box; overflow: hidden; background: #fff; color: #a5a8ad; }
.catalog-product-media img { display: block; width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; }
.catalog-product-body { flex: 1; padding: 22px; display: flex; flex-direction: column; }
.catalog-product-body strong { font-size: 18px; }
.catalog-product-body small { margin: 8px 0; color: var(--catalog-muted); line-height: 1.5; }
.catalog-product-body > span:last-child { margin-top: auto; padding-top: 14px; display: flex; align-items: center; justify-content: space-between; color: var(--catalog-blue); font-weight: 600; }
.catalog-process { margin: 0 0 36px; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid #31333a; list-style: none; }
.catalog-process li { min-height: 214px; padding: 27px 24px 24px 0; border-right: 1px solid #31333a; }
.catalog-process li + li { padding-left: 24px; }
.catalog-process li:last-child { border-right: 0; }
.catalog-process li > span { color: #67aaf0; font-size: 12px; font-weight: 700; }
.catalog-process h3 { margin: 44px 0 10px; }
.catalog-process p { margin-bottom: 0; font-size: 13px; line-height: 1.6; }
.catalog-note-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(32px, 6vw, 86px); }
.catalog-note-grid article p:last-child { margin-bottom: 0; }
.catalog-note-card { padding: 32px; border-radius: 15px; background: #f4f5f6; }
.catalog-faq-layout { display: grid; grid-template-columns: .72fr 1.28fr; gap: clamp(44px, 8vw, 112px); }
.catalog-faqs { border-top: 1px solid var(--catalog-line); }
.catalog-faqs details { border-bottom: 1px solid var(--catalog-line); }
.catalog-faqs summary { padding: 23px 42px 23px 0; position: relative; color: var(--catalog-ink); font-size: 16px; font-weight: 600; cursor: pointer; list-style: none; }
.catalog-faqs summary::-webkit-details-marker { display: none; }
.catalog-faqs summary::after { content: '+'; position: absolute; right: 7px; top: 21px; color: var(--catalog-blue); font-size: 22px; font-weight: 400; }
.catalog-faqs details[open] summary::after { content: '–'; }
.catalog-faqs details p { padding: 0 42px 23px 0; margin: 0; }
.catalog-centre-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.catalog-centre-grid article { padding: 28px; border: 1px solid var(--catalog-line); border-radius: 14px; display: flex; gap: 18px; background: #fff; }
.catalog-centre-pin { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; flex: 0 0 auto; background: #eaf3fc; color: var(--catalog-blue); }
.catalog-centre-grid h3 { margin-bottom: 8px; }
.catalog-centre-grid p { margin-bottom: 9px; font-size: 14px; line-height: 1.55; }
.catalog-centre-grid a { margin: 8px 15px 0 0; display: inline-flex; align-items: center; gap: 7px; color: var(--catalog-blue); font-size: 13px; font-weight: 600; }
.catalog-related-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.catalog-related-grid a { min-height: 240px; padding: 22px; border: 1px solid var(--catalog-line); border-radius: 14px; display: flex; flex-direction: column; color: inherit; background: #fff; text-decoration: none; }
.catalog-related-grid a:hover { border-color: #bdc1c7; box-shadow: 0 14px 32px rgba(16,17,20,.07); }
.catalog-related-icon { width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center; background: #f0f5fa; color: var(--catalog-blue); }
.catalog-related-icon img { width: 100%; height: 100%; padding: 5px; border-radius: inherit; object-fit: contain; background: #fff; }
.catalog-related-grid strong { margin-top: 34px; }
.catalog-related-grid small { color: var(--catalog-muted); }
.catalog-related-grid a > span:last-child { margin-top: auto; display: flex; align-items: center; gap: 7px; color: var(--catalog-blue); font-size: 12px; font-weight: 600; }

/* Product catalogue and product detail. */
.product-list-hero { padding: clamp(72px, 9vw, 128px) 0; background: #101114; }
.product-list-hero h1 { max-width: 820px; color: #fff; }
.product-list-hero > .catalog-inner > p:last-child { max-width: 680px; margin-bottom: 0; color: #b4b7be; font-size: 18px; }
.product-list-tools { margin-bottom: 22px; display: flex; gap: 9px; }
.product-list-tools button { padding: 0 22px; border: 0; border-radius: 9px; background: var(--catalog-ink); color: #fff; font-size: 13px; font-weight: 600; }
.product-category-nav { margin-bottom: 40px; display: flex; flex-wrap: wrap; gap: 8px; }
.product-category-nav a { min-height: 38px; padding: 0 14px; border: 1px solid var(--catalog-line); border-radius: 8px; display: inline-flex; align-items: center; gap: 8px; color: #454850; background: #fff; font-size: 12px; font-weight: 600; text-decoration: none; }
.product-category-nav a.is-active, .product-category-nav a:hover { border-color: var(--catalog-ink); background: var(--catalog-ink); color: #fff; }
.product-category-nav small { opacity: .65; }
.product-empty { max-width: 850px; margin: 0 auto; }
.product-empty-icon { width: 58px; height: 58px; margin: 0 auto 24px; border-radius: 50%; display: grid; place-items: center; background: #eaf3fc; color: var(--catalog-blue); font-size: 32px; font-weight: 300; }
.product-card { min-height: 450px; border: 1px solid var(--catalog-line); border-radius: 15px; display: flex; flex-direction: column; color: inherit; background: #fff; text-decoration: none; overflow: hidden; transition: transform .22s ease, box-shadow .22s ease; }
.product-card:hover { color: inherit; transform: translateY(-4px); box-shadow: 0 18px 42px rgba(16,17,20,.08); }
.product-card-media { height: 270px; min-height: 270px; padding: 25px; display: flex; align-items: center; justify-content: center; box-sizing: border-box; overflow: hidden; background: #f5f6f7; color: #9da1a8; }
.product-card-media img { display: block; width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; transition: transform .25s ease; }
.product-card:hover .product-card-media img { transform: scale(1.035); }
.product-card-body { flex: 1; padding: 22px; display: flex; flex-direction: column; }
.product-card-body .catalog-kicker { margin-bottom: 10px !important; }
.product-card-body > strong { font-size: 18px; line-height: 1.3; }
.product-card-body > small { margin-top: 8px; display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; color: var(--catalog-muted); line-height: 1.5; }
.product-card-footer { margin-top: auto; padding-top: 18px; display: flex; justify-content: space-between; align-items: center; color: var(--catalog-ink); }
.product-card-footer b { font-size: 16px; }
.product-card-footer i { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--catalog-ink); color: #fff; font-style: normal; }
.product-pagination { margin-top: 40px; display: flex; justify-content: center; align-items: center; gap: 20px; color: var(--catalog-muted); font-size: 13px; }
.product-pagination a { color: var(--catalog-blue); font-weight: 600; }
.product-detail-hero { padding: 30px 0 clamp(74px, 8vw, 112px); background: #fff; }
.product-detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 4vw, 64px); align-items: start; }
.product-detail-stage { height: 610px; border-radius: 22px; display: grid; place-items: center; background: #f3f4f5; color: #92969d; overflow: hidden; }
.product-detail-stage img { display: block; width: auto; height: auto; max-width: 100%; max-height: 100%; padding: 44px; object-fit: contain; }
.product-buy-card { position: sticky; top: 92px; padding-top: 10px; }
.product-buy-card h1 { margin-bottom: 17px; font-size: var(--page-h1-size); line-height: var(--page-h1-leading); letter-spacing: var(--page-h1-tracking); }
.product-buy-lede { margin-bottom: 24px; font-size: 16px !important; }
.product-buy-price { margin: 0 0 16px !important; color: var(--catalog-ink) !important; font-size: 29px !important; line-height: 1.2 !important; font-weight: 680; }
.product-buy-price--quote { font-size: 21px !important; }
.product-buy-meta { margin-bottom: 25px; padding: 14px 0; border-top: 1px solid var(--catalog-line); border-bottom: 1px solid var(--catalog-line); display: flex; justify-content: space-between; gap: 18px; color: var(--catalog-muted); font-size: 12px; }
.product-stock { display: inline-flex; align-items: center; gap: 7px; }
.product-stock i { width: 7px; height: 7px; border-radius: 50%; background: #8b8e94; }
.product-stock--in_stock i { background: #269b58; }
.product-stock--order i { background: #d08a10; }
.product-stock--unavailable i { background: #c64545; }
.product-add-form--stacked { display: flex; flex-direction: column; align-items: stretch; gap: 9px; }
.product-add-form--stacked > label { color: var(--catalog-ink); font-size: 12px; font-weight: 600; }
.product-add-form--stacked select { width: 100%; min-height: 48px; padding: 0 13px; border: 1px solid #d8dade; border-radius: 8px; background: #fff; }
.product-add-row { display: grid; grid-template-columns: 36px 65px 1fr; gap: 9px; align-items: center; }
.product-add-row label { color: var(--catalog-muted); font-size: 12px; }
.product-add-row input { width: 65px !important; height: 50px; border: 1px solid #d8dade; border-radius: 8px; text-align: center; }
.product-add-row .catalog-primary-action { min-height: 50px; }
.product-buy-card > .catalog-primary-action { width: 100%; }
.product-confidence { margin: 26px 0 0; padding: 0; list-style: none; }
.product-confidence li { padding: 10px 0; border-top: 1px solid var(--catalog-line); display: flex; gap: 9px; color: #4f5259; font-size: 12px; }
.product-confidence span { color: var(--catalog-blue); font-weight: 700; }
.product-information-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(52px, 8vw, 120px); }
.product-information-grid h2 { max-width: 490px; }
.product-description { margin-top: 28px; color: var(--catalog-muted); font-size: 15px; line-height: 1.75; }
.product-spec-groups section { margin-bottom: 32px; }
.product-spec-groups h3 { padding-bottom: 14px; border-bottom: 1px solid var(--catalog-line); }
.product-spec-groups table { width: 100%; border-collapse: collapse; }
.product-spec-groups th, .product-spec-groups td { padding: 12px 0; border-bottom: 1px solid var(--catalog-line); color: #5f6269; font-size: 13px; text-align: left; vertical-align: top; }
.product-spec-groups th { width: 42%; color: var(--catalog-ink); font-weight: 600; }

@media (max-width: 1020px) {
    .catalog-device-grid, .catalog-model-grid, .catalog-service-grid, .catalog-product-grid, .product-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .catalog-related-grid, .catalog-model-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .catalog-detail-grid, .product-detail-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
    .catalog-media-stage, .catalog-media-stage img, .product-detail-stage { min-height: 500px; height: 500px; }
}
@media (max-width: 820px) {
    .catalog-hero-grid, .catalog-device-hero-grid, .catalog-model-hero-grid, .catalog-detail-grid, .product-detail-grid, .catalog-content-layout, .catalog-faq-layout, .product-information-grid { grid-template-columns: 1fr; }
    .catalog-hero-assurance { max-width: 520px; }
    .catalog-device-hero-grid { min-height: 0; }
    .catalog-device-hero-visual, .catalog-model-visual { height: 390px; }
    .catalog-detail-main { max-width: 680px; width: 100%; margin: 0 auto; }
    .catalog-order-card, .product-buy-card, .catalog-content-layout .catalog-section-head { position: static; }
    .catalog-symptom-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .catalog-process { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .catalog-process li:nth-child(2) { border-right: 0; }
    .catalog-process li:nth-child(3), .catalog-process li:nth-child(4) { border-top: 1px solid #31333a; }
    .catalog-contact-strip .catalog-inner { grid-template-columns: 1fr; gap: 25px; }
    .catalog-section-head--with-search { align-items: stretch; flex-direction: column; gap: 20px; }
    .catalog-search { width: 100%; }
}
@media (max-width: 600px) {
    .catalog-inner, .catalog-crumbs { width: min(100% - 30px, 1240px); }
    .catalog-shell h2 { font-size: 30px; }
    .catalog-section { padding: 68px 0; }
    .catalog-hero { padding: 66px 0 76px; }
    .catalog-actions { align-items: stretch; flex-direction: column; }
    .catalog-primary-action { width: 100%; }
    .catalog-text-action { min-height: 44px; justify-content: center; }
    .catalog-device-grid, .catalog-model-grid, .catalog-service-grid, .catalog-product-grid, .product-card-grid, .catalog-centre-grid, .catalog-note-grid, .catalog-contact-links { grid-template-columns: 1fr; }
    .catalog-device-card { min-height: 300px; }
    .catalog-device-media { height: 175px; }
    .catalog-device-hero-visual, .catalog-model-visual { height: 330px; border-radius: 18px; }
    .catalog-service-band .catalog-inner { grid-template-columns: 1fr; }
    .catalog-service-band small { grid-column: 1; }
    .catalog-model-card { min-height: 330px; }
    .catalog-model-card-media { height: 215px; }
    .catalog-media-stage, .catalog-media-stage img, .product-detail-stage { min-height: 390px; height: 390px; border-radius: 15px; }
    .catalog-media-stage img, .product-detail-stage img { padding: 22px; }
    .catalog-symptom-grid { grid-template-columns: 1fr; }
    .catalog-process { grid-template-columns: 1fr; }
    .catalog-process li, .catalog-process li + li { min-height: 170px; padding: 24px 0; border-right: 0; border-top: 1px solid #31333a; }
    .catalog-process h3 { margin-top: 27px; }
    .catalog-related-grid, .catalog-model-strip { grid-template-columns: 1fr; }
    .catalog-note-card { padding: 24px; }
    .catalog-contact-strip { padding: 44px 0; }
    .product-list-tools { flex-direction: column; }
    .product-list-tools button { min-height: 46px; }
    .product-card { min-height: 420px; }
    .product-card-media { height: 245px; }
    .product-add-row { grid-template-columns: 34px 62px 1fr; }
    .product-buy-meta { align-items: flex-start; flex-direction: column; gap: 7px; }
}
@media (prefers-reduced-motion: reduce) {
    .catalog-shell a, .catalog-shell img, .catalog-shell button { transition: none !important; }
}

.catalog-shell {
    --catalog-ink: #0b1220;
    --catalog-muted: #657187;
    --catalog-blue: #0b69f0;
    --catalog-line: #e4eaf2;
    --catalog-soft: #f5f7fb;
    --catalog-card-shadow: 0 18px 50px rgba(15, 31, 58, .07);
    background: var(--catalog-soft);
}
.catalog-shell .catalog-inner { width: min(1280px, calc(100% - clamp(36px, 7vw, 112px))); }
.catalog-crumbs { min-height: 68px; letter-spacing: .01em; }
.catalog-crumbs a { transition: color .2s ease; }
.catalog-hero, .catalog-device-hero, .catalog-model-hero, .product-list-hero, .catalog-detail-hero, .product-detail-hero { position: relative; isolation: isolate; overflow: hidden; }
.catalog-hero::before, .catalog-device-hero::before, .catalog-detail-hero::before, .product-detail-hero::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(circle at 78% 14%, rgba(11, 105, 240, .10), transparent 34%), radial-gradient(circle at 12% 90%, rgba(85, 105, 210, .06), transparent 31%); }
.catalog-model-hero::before, .product-list-hero::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(circle at 84% 20%, rgba(53, 123, 255, .24), transparent 34%), radial-gradient(circle at 7% 95%, rgba(104, 77, 218, .18), transparent 33%); }
.catalog-hero > .catalog-inner, .catalog-device-hero > .catalog-inner, .catalog-model-hero > .catalog-inner, .product-list-hero > .catalog-inner, .catalog-detail-hero > .catalog-inner, .product-detail-hero > .catalog-inner { position: relative; z-index: 1; }
.catalog-hero-grid, .catalog-device-hero-grid, .catalog-model-hero-grid { gap: clamp(48px, 7vw, 112px); }
.catalog-hero-assurance { padding: 2px 0 0; border-top-color: rgba(228, 234, 242, .95); }
.catalog-hero-assurance > span, .catalog-hero-assurance > p { padding: 23px 0; border-bottom-color: rgba(228, 234, 242, .95); }
.catalog-hero-assurance > span { font-variant-numeric: tabular-nums; }
.catalog-primary-action { min-height: 54px; padding-inline: 24px; border-radius: 12px; background: linear-gradient(135deg, #1178ff 0%, #0759d6 100%); box-shadow: 0 12px 28px rgba(11, 105, 240, .18); transition: transform .24s ease, box-shadow .24s ease, filter .24s ease; }
.catalog-primary-action:hover { filter: brightness(1.04); box-shadow: 0 16px 34px rgba(11, 105, 240, .25); }
.catalog-text-action { min-height: 44px; transition: color .2s ease, transform .2s ease; }
.catalog-text-action:hover { transform: translateX(3px); }
.catalog-device-card, .catalog-model-card, .catalog-service-card, .product-card, .catalog-product-card, .catalog-related-grid a { border-radius: 21px; border-color: rgba(218, 226, 237, .95); box-shadow: 0 1px 1px rgba(15, 31, 58, .02); transition: transform .28s ease, border-color .28s ease, box-shadow .28s ease; }
.catalog-device-card:hover, .catalog-model-card:hover, .catalog-service-card:hover, .product-card:hover, .catalog-product-card:hover, .catalog-related-grid a:hover { border-color: rgba(11, 105, 240, .32); box-shadow: var(--catalog-card-shadow); transform: translateY(-7px); }
.catalog-device-card:focus-visible, .catalog-model-card:focus-visible, .catalog-service-card:focus-within, .product-card:focus-visible, .catalog-product-card:focus-visible, .catalog-related-grid a:focus-visible { outline: 0; border-color: var(--catalog-blue); box-shadow: 0 0 0 4px rgba(11, 105, 240, .14), var(--catalog-card-shadow); }
.catalog-device-media, .catalog-model-card-media, .catalog-service-media, .catalog-product-media, .product-card-media { box-sizing: border-box; overflow: hidden; }
.catalog-device-media img, .catalog-model-card-media img, .catalog-service-media img, .catalog-product-media img, .product-card-media img { display: block; width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; transition: transform .35s ease, filter .35s ease; }
.catalog-device-card:hover .catalog-device-media img, .catalog-model-card:hover .catalog-model-card-media img, .catalog-service-card:hover .catalog-service-media img, .catalog-product-card:hover .catalog-product-media img { transform: scale(1.045); }
.catalog-device-media, .catalog-model-card-media, .catalog-service-media, .catalog-product-media, .product-card-media { background: linear-gradient(145deg, #f8faff 0%, #eef3f9 100%); }
.catalog-model-visual, .catalog-device-hero-visual { border: 1px solid rgba(218, 226, 237, .9); box-shadow: 0 24px 70px rgba(15, 31, 58, .10); }
.catalog-model-visual > img, .catalog-device-hero-visual img { display: block; width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; }
.catalog-service-card { min-height: 448px; }
.catalog-service-media { flex: 0 0 196px; padding: 24px; }
.catalog-service-footer { margin-top: 24px; }
.catalog-service-footer > a, .product-card-footer i { background: linear-gradient(135deg, #111a2d 0%, #0b1220 100%); transition: transform .22s ease, background .22s ease; }
.catalog-service-card:hover .catalog-service-footer > a, .product-card:hover .product-card-footer i { transform: translateX(3px); }
.catalog-service-body, .product-card-body, .catalog-product-body, .catalog-model-card-body { padding: 25px; }
.catalog-content-cards { display: grid; gap: 12px; border-top: 0; }
.catalog-content-card { margin: 0; padding: 27px 29px; border: 1px solid var(--catalog-line); border-radius: 18px; background: rgba(255, 255, 255, .78); box-shadow: 0 1px 1px rgba(15, 31, 58, .02); }
.catalog-content-card h3 { margin-bottom: 9px; }
.catalog-symptom-grid { overflow: hidden; border: 1px solid var(--catalog-line); border-radius: 20px; box-shadow: 0 10px 30px rgba(15, 31, 58, .04); }
.catalog-symptom-grid li { background: rgba(255, 255, 255, .78); transition: background .2s ease, color .2s ease; }
.catalog-symptom-grid li:hover { background: #fff; color: var(--catalog-blue); }
.catalog-faqs { display: grid; gap: 10px; border-top: 0; }
.catalog-faqs details { border: 1px solid var(--catalog-line); border-radius: 17px; background: #fff; transition: box-shadow .22s ease, border-color .22s ease; }
.catalog-faqs details[open] { border-color: rgba(11, 105, 240, .28); box-shadow: 0 12px 30px rgba(15, 31, 58, .06); }
.catalog-faqs summary { padding: 21px 52px 21px 22px; }
.catalog-faqs summary::after { right: 20px; top: 18px; }
.catalog-faqs summary > span { display: none; }
.catalog-faqs details p { padding: 0 22px 22px; }
.catalog-centre-grid article { border-radius: 18px; box-shadow: 0 1px 1px rgba(15, 31, 58, .02); transition: transform .22s ease, box-shadow .22s ease; }
.catalog-centre-grid article:hover { transform: translateY(-4px); box-shadow: var(--catalog-card-shadow); }
.catalog-contact-strip { background: linear-gradient(135deg, #eaf3ff 0%, #f7f9ff 100%); }
.catalog-contact-links a { border: 1px solid rgba(218, 226, 237, .95); border-radius: 16px; box-shadow: 0 1px 1px rgba(15, 31, 58, .02); transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; }
.catalog-contact-links a:hover { border-color: rgba(11, 105, 240, .28); transform: translateY(-3px); box-shadow: 0 12px 28px rgba(15, 31, 58, .07); }
.product-list-hero { background: linear-gradient(135deg, #0a1221 0%, #101c32 60%, #142c52 100%); }
.product-list-tools { width: min(790px, 100%); max-width: 100%; padding: 8px; align-items: center; border: 1px solid var(--catalog-line); border-radius: 17px; background: rgba(255, 255, 255, .82); box-shadow: 0 12px 35px rgba(15, 31, 58, .06); }
.product-list-tools .catalog-search { flex: 1 1 260px; width: auto; min-height: 52px; border: 0; background: #f5f8fc; }
.product-list-tools > button { min-height: 52px; border-radius: 12px; padding-inline: 22px; }
.product-list-tools > button[type="submit"] { background: linear-gradient(135deg, #111a2d 0%, #0b1220 100%); }
.catalog-filter-controls { width: min(430px, 100%); display: flex; align-items: center; gap: 10px; }
.catalog-filter-controls .catalog-search { flex: 1 1 auto; width: auto; }
.catalog-filter-clear { min-height: 50px; padding: 0 16px; border: 1px solid var(--catalog-line); border-radius: 11px; background: #fff; color: var(--catalog-muted); font-size: 12px; font-weight: 650; cursor: pointer; transition: border-color .2s ease, color .2s ease, background .2s ease; }
.catalog-filter-clear:hover { border-color: var(--catalog-blue); background: #f3f7ff; color: var(--catalog-blue); }
.catalog-filter-status { margin: 15px 0 0; color: var(--catalog-muted); font-size: 12px !important; line-height: 1.4 !important; }
.product-filter-empty { margin-top: 16px; }
.catalog-detail-hero, .product-detail-hero { padding-top: 22px; background: var(--catalog-soft); }
.catalog-media-stage, .product-detail-stage { border: 1px solid rgba(218, 226, 237, .95); background: radial-gradient(circle at 50% 34%, #fff 0%, #f0f4f9 76%); box-shadow: 0 18px 52px rgba(15, 31, 58, .07); }
.catalog-media-stage--interactive, .product-detail-stage--interactive { cursor: zoom-in; transition: box-shadow .24s ease, border-color .24s ease, transform .24s ease; }
.catalog-media-stage--interactive:hover, .product-detail-stage--interactive:hover { border-color: rgba(11, 105, 240, .35); box-shadow: 0 24px 64px rgba(15, 31, 58, .12); transform: translateY(-2px); }
.catalog-media-stage--interactive:focus-visible, .product-detail-stage--interactive:focus-visible { outline: 0; border-color: var(--catalog-blue); box-shadow: 0 0 0 4px rgba(11, 105, 240, .15), 0 24px 64px rgba(15, 31, 58, .12); }
.catalog-order-card, .product-buy-card { padding: clamp(24px, 3vw, 36px); border: 1px solid rgba(218, 226, 237, .95); border-radius: 24px; background: rgba(255, 255, 255, .88); box-shadow: 0 18px 52px rgba(15, 31, 58, .08); backdrop-filter: blur(12px); }
.catalog-order-card > .catalog-primary-action, .product-buy-card > .catalog-primary-action { box-shadow: 0 14px 30px rgba(11, 105, 240, .2); }
.catalog-thumbnails, .product-detail-thumbs { padding: 2px 0 4px; scrollbar-width: thin; }
.catalog-thumb, .product-detail-thumb { overflow: hidden; border-radius: 13px; transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.catalog-thumb:hover, .product-detail-thumb:hover { transform: translateY(-2px); }
.catalog-thumb img, .product-detail-thumb img { display: block; width: auto; height: auto; max-width: 100%; max-height: 100%; margin: auto; }
.catalog-related-grid a { padding: 24px; }
.catalog-related-grid a:focus-visible { outline: 0; }
.catalog-enhanced .catalog-reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease var(--catalog-reveal-delay), transform .6s ease var(--catalog-reveal-delay); }
.catalog-enhanced .catalog-reveal.is-visible { opacity: 1; transform: none; }
.catalog-lightbox { position: fixed; inset: 0; z-index: 100000; display: grid; place-items: center; padding: 24px; background: rgba(7, 14, 27, .82); backdrop-filter: blur(12px); opacity: 0; visibility: hidden; transition: opacity .22s ease, visibility .22s ease; }
.catalog-lightbox[hidden] { display: none; }
.catalog-lightbox.is-open { opacity: 1; visibility: visible; }
.catalog-lightbox-panel { position: relative; width: min(1100px, 100%); min-height: min(760px, calc(100vh - 48px)); display: grid; place-items: center; }
.catalog-lightbox-toolbar { position: absolute; top: 0; right: 0; left: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; pointer-events: none; }
.catalog-lightbox-counter { padding: 9px 13px; border: 1px solid rgba(255, 255, 255, .18); border-radius: 999px; background: rgba(7, 14, 27, .48); color: #fff; font-size: 12px; font-variant-numeric: tabular-nums; }
.catalog-lightbox-button { width: 46px; height: 46px; padding: 0; border: 1px solid rgba(255, 255, 255, .18); border-radius: 50%; display: grid; place-items: center; background: rgba(7, 14, 27, .58); color: #fff; font-size: 29px; line-height: 1; cursor: pointer; pointer-events: auto; transition: background .2s ease, transform .2s ease, border-color .2s ease; }
.catalog-lightbox-button:hover { border-color: rgba(255, 255, 255, .5); background: rgba(11, 105, 240, .82); transform: scale(1.05); }
.catalog-lightbox-button:disabled { opacity: .35; cursor: default; transform: none; }
.catalog-lightbox-close { font-size: 30px; }
.catalog-lightbox-image { display: block; max-width: calc(100% - 132px); max-height: calc(100vh - 150px); border-radius: 18px; object-fit: contain; background: #fff; box-shadow: 0 30px 90px rgba(0, 0, 0, .34); }
.catalog-lightbox-previous, .catalog-lightbox-next { position: absolute; top: 50%; transform: translateY(-50%); }
.catalog-lightbox-previous:hover, .catalog-lightbox-next:hover { transform: translateY(-50%) scale(1.05); }
.catalog-lightbox-previous { left: 0; }
.catalog-lightbox-next { right: 0; }
body.catalog-lightbox-open { overflow: hidden; }

@media (max-width: 820px) {
    .catalog-shell .catalog-inner { width: min(100% - 40px, 680px); }
    .catalog-crumbs { min-height: 56px; }
    .catalog-section { padding-block: clamp(58px, 12vw, 86px); }
    .catalog-hero, .catalog-device-hero, .catalog-model-hero, .product-list-hero { padding-block: clamp(62px, 12vw, 100px); }
    .catalog-detail-hero, .product-detail-hero { padding-block: 14px clamp(64px, 12vw, 96px); }
    .catalog-order-card, .product-buy-card { position: static; width: 100%; }
    .catalog-content-layout .catalog-section-head, .catalog-content-layout .catalog-section-head { position: static; }
    .catalog-filter-controls { width: 100%; }
    .catalog-service-card { min-height: 0; }
    .catalog-service-media { flex-basis: 210px; }
    .catalog-lightbox-panel { min-height: calc(100vh - 40px); }
    .catalog-model-page .catalog-model-hero-grid { gap: 40px; }
    .catalog-model-page .catalog-model-visual { height: min(430px, 90vw); padding: 28px; border-radius: 26px; }
}

@media (max-width: 600px) {
    .catalog-shell .catalog-inner { width: min(100% - 30px, 560px); }
    .catalog-crumbs { width: min(100% - 30px, 560px); min-height: 50px; gap: 7px; font-size: 11px; }
    .catalog-shell h2 { font-size: clamp(29px, 8vw, 38px); }
    .catalog-actions { align-items: stretch; gap: 10px; }
    .catalog-primary-action { width: 100%; }
    .catalog-device-card, .catalog-model-card, .catalog-service-card, .product-card, .catalog-product-card { border-radius: 17px; }
    .catalog-device-card { min-height: 300px; padding: 22px; }
    .catalog-device-media { height: 185px; }
    .catalog-model-card-media { height: 214px; padding: 18px; }
    .catalog-service-media { flex-basis: 184px; padding: 20px; }
    .catalog-service-body, .product-card-body, .catalog-product-body, .catalog-model-card-body { padding: 21px; }
    .catalog-device-page .catalog-model-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .catalog-device-page .catalog-model-card { min-height: 0; }
    .catalog-device-page .catalog-model-card-media { height: 142px; padding: 12px; }
    .catalog-device-page .catalog-model-card-body { min-height: 94px; padding: 14px 13px 15px; }
    .catalog-device-page .catalog-model-card-body strong { font-size: 14px; line-height: 1.25; }
    .catalog-device-page .catalog-model-card-body small { font-size: 11px; line-height: 1.3; }
    .catalog-model-page .catalog-service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .catalog-model-page .catalog-service-card { min-height: 0; border-radius: 17px; }
    .catalog-model-page .catalog-service-media { flex-basis: 124px; padding: 14px; }
    .catalog-model-page .catalog-service-body { padding: 14px 13px 15px; }
    .catalog-model-page .catalog-service-body .catalog-kicker { margin-bottom: 6px; font-size: 10px; letter-spacing: .12em; }
    .catalog-model-page .catalog-service-body h3 { margin-bottom: 8px; font-size: 15px; line-height: 1.25; }
    .catalog-model-page .catalog-service-body > p:not(.catalog-kicker) { margin-bottom: 0; font-size: 12px; line-height: 1.45; -webkit-line-clamp: 3; }
    .catalog-model-page .catalog-service-footer { margin-top: 14px; padding-top: 12px; gap: 8px; }
    .catalog-model-page .catalog-service-footer > a { width: 32px; height: 32px; }
    .catalog-model-page .catalog-inline-price { line-height: 1.2; }
    .catalog-model-page .catalog-inline-price .alt-font { font-size: 15px !important; }
    .product-list-tools { padding: 7px; flex-wrap: wrap; }
    .product-list-tools .catalog-search { flex-basis: 100%; }
    .product-list-tools > button { flex: 1 1 0; }
    .catalog-filter-controls { align-items: stretch; flex-direction: column; }
    .catalog-filter-controls .catalog-filter-clear { width: 100%; }
    .catalog-content-card { padding: 22px; border-radius: 16px; }
    .catalog-symptom-grid { border-radius: 16px; }
    .catalog-symptom-grid li { min-height: 80px; padding: 16px; }
    .catalog-order-card, .product-buy-card { padding: 21px; border-radius: 19px; }
    .catalog-lightbox { padding: 12px; }
    .catalog-lightbox-panel { min-height: calc(100vh - 24px); }
    .catalog-lightbox-image { max-width: calc(100% - 78px); max-height: calc(100vh - 120px); border-radius: 13px; }
    .catalog-lightbox-button { width: 40px; height: 40px; font-size: 25px; }
    .catalog-lightbox-previous { left: -2px; }
    .catalog-lightbox-next { right: -2px; }
    .catalog-model-page .catalog-model-hero-grid { gap: 32px; }
    .catalog-model-page .catalog-model-visual { height: clamp(330px, 96vw, 370px); padding: 22px; border-radius: 22px; }
}

@media (prefers-reduced-motion: reduce) {
    .catalog-enhanced .catalog-reveal { opacity: 1; transform: none; transition: none; }
    .catalog-lightbox, .catalog-device-card, .catalog-model-card, .catalog-service-card, .product-card, .catalog-product-card, .catalog-related-grid a, .catalog-lightbox-button { transition: none; }
}

@media (min-width: 1021px) {
    .catalog-device-page .catalog-model-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
    .catalog-device-page .catalog-model-card { min-height: 294px; }
    .catalog-device-page .catalog-model-card-media { height: 178px; padding: 18px; }
    .catalog-device-page .catalog-model-card-body { min-height: 116px; padding: 18px 19px 19px; }
    .catalog-device-page .catalog-model-card-body strong { font-size: 16px; line-height: 1.28; }
}
@media (min-width: 1536px) {
    .catalog-device-page .catalog-model-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .catalog-device-page .catalog-model-card-media { height: 170px; }
}
.catalog-device-page .catalog-model-card-media { background: radial-gradient(circle at 50% 35%, #ffffff 0%, #f6f9fd 47%, #eaf1f9 100%); }
.catalog-device-page .catalog-model-card-media > img {
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}
.catalog-device-page .catalog-model-card-link { margin-top: auto; padding-top: 15px; display: inline-flex; align-items: center; gap: 7px; color: var(--catalog-blue); font-size: 12px; font-weight: 650; }
.catalog-device-page .catalog-model-card-link svg { width: 15px; height: 15px; }
.catalog-contact-strip--device { padding: clamp(36px, 4.2vw, 56px) 0; background: linear-gradient(135deg, #edf5ff 0%, #f8fbff 100%); border-top: 1px solid rgba(218, 226, 237, .9); border-bottom: 1px solid rgba(218, 226, 237, .9); }
.catalog-contact-strip--device .catalog-inner { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(360px, .95fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.catalog-contact-copy h2 { max-width: 15ch; margin-bottom: 13px; }
.catalog-contact-copy > p:not(.catalog-kicker) { max-width: 56ch; margin-bottom: 0; }
.catalog-contact-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.catalog-contact-call { min-height: 94px; padding: 16px; border: 1px solid rgba(218, 226, 237, .98); border-radius: 17px; display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; align-items: center; gap: 12px; background: #fff; color: var(--catalog-ink); text-decoration: none; box-shadow: 0 1px 1px rgba(15, 31, 58, .02); transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease; }
.catalog-contact-call:hover { color: var(--catalog-ink); border-color: rgba(11, 105, 240, .32); box-shadow: 0 14px 30px rgba(15, 31, 58, .08); transform: translateY(-3px); }
.catalog-contact-call-icon { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; background: #eaf3ff; color: var(--catalog-blue); }
.catalog-contact-call-meta { min-width: 0; display: grid; gap: 4px; }
.catalog-contact-call-meta > span { overflow: hidden; color: var(--catalog-muted); font-size: 11px; font-weight: 600; letter-spacing: .08em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.catalog-contact-call-meta strong { color: var(--catalog-ink); font-size: 16px; }
.catalog-contact-call-arrow { color: var(--catalog-blue); }
.catalog-contact-strip--model {
    position: relative;
    overflow: hidden;
    padding: clamp(48px, 5vw, 72px) 0;
    border-top: 1px solid rgba(218, 226, 237, .92);
    border-bottom: 1px solid rgba(218, 226, 237, .92);
    background: linear-gradient(125deg, #eef5ff 0%, #f8fbff 58%, #edf4ff 100%);
}
.catalog-contact-strip--model::after {
    content: '';
    position: absolute;
    top: -190px;
    right: -110px;
    width: 440px;
    height: 440px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(11, 105, 240, .10), transparent 68%);
    pointer-events: none;
}
.catalog-contact-strip--model .catalog-inner {
    position: relative;
    z-index: 1;
    grid-template-columns: minmax(0, 1.08fr) minmax(340px, .92fr);
    gap: clamp(36px, 6vw, 88px);
}
.catalog-contact-strip--model .catalog-contact-copy { max-width: 650px; }
.catalog-contact-strip--model .catalog-contact-copy h2 {
    max-width: 16ch;
    margin-bottom: 14px;
    font-size: clamp(32px, 3.1vw, 46px);
    line-height: 1.12;
    letter-spacing: -.035em;
}
.catalog-contact-strip--model .catalog-contact-copy > p:not(.catalog-kicker) {
    max-width: 58ch;
    margin: 0;
    color: var(--catalog-muted);
    font-size: 15px;
    line-height: 1.65;
}
.catalog-contact-strip--model .catalog-contact-actions { grid-template-columns: minmax(0, 1fr); }
.catalog-contact-strip--model .catalog-contact-call {
    min-height: 112px;
    padding: 20px 22px;
    border-radius: 20px;
    box-shadow: 0 16px 44px rgba(15, 31, 58, .07);
}
.catalog-contact-strip--model .catalog-contact-call-icon {
    width: 48px;
    height: 48px;
    border-radius: 15px;
}
.catalog-contact-strip--model .catalog-contact-call-meta { gap: 6px; }
.catalog-contact-strip--model .catalog-contact-call-meta > span {
    overflow: visible;
    line-height: 1.35;
    text-overflow: clip;
    white-space: normal;
}
.catalog-contact-strip--model .catalog-contact-call-meta strong {
    font-size: 18px;
    font-variant-numeric: tabular-nums;
}
@media (max-width: 1020px) {
    .catalog-device-page .catalog-model-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .catalog-device-page .catalog-model-card { min-height: 292px; }
    .catalog-device-page .catalog-model-card-media { height: 172px; }
    .catalog-contact-strip--device .catalog-inner { grid-template-columns: minmax(0, 1fr); gap: 26px; }
    .catalog-contact-copy h2 { max-width: 18ch; }
    .catalog-contact-strip--model .catalog-inner { grid-template-columns: minmax(0, 1fr); gap: 26px; }
    .catalog-contact-strip--model .catalog-contact-copy { max-width: 620px; }
    .catalog-contact-strip--model .catalog-contact-actions { width: min(100%, 620px); }
}
@media (max-width: 600px) {
    .catalog-device-page .catalog-model-card-link { padding-top: 12px; font-size: 11px; }
    .catalog-contact-strip--device { padding: 34px 0; }
    .catalog-contact-copy h2 { max-width: none; margin-bottom: 11px; }
    .catalog-contact-actions { grid-template-columns: minmax(0, 1fr); gap: 10px; }
    .catalog-contact-call { min-height: 76px; border-radius: 15px; }
    .catalog-contact-call { padding: 14px; }
    .catalog-contact-strip--model { padding: 40px 0; }
    .catalog-contact-strip--model::after { top: auto; right: -150px; bottom: -240px; }
    .catalog-contact-strip--model .catalog-inner { gap: 22px; }
    .catalog-contact-strip--model .catalog-contact-copy h2 { margin-bottom: 12px; font-size: clamp(29px, 9vw, 38px); }
    .catalog-contact-strip--model .catalog-contact-copy > p:not(.catalog-kicker) { font-size: 14px; line-height: 1.6; }
    .catalog-contact-strip--model .catalog-contact-call { min-height: 88px; padding: 15px; border-radius: 17px; grid-template-columns: 44px minmax(0, 1fr) 20px; gap: 11px; }
    .catalog-contact-strip--model .catalog-contact-call-icon { width: 44px; height: 44px; border-radius: 13px; }
    .catalog-contact-strip--model .catalog-contact-call-meta strong { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
    .catalog-contact-call { transition: none; }
    .catalog-contact-call:hover { transform: none; }
}

/* ── Order confirmation and secure order tracking ───────────────────────── */
.order-flow-page { min-height: 72vh; background: #f4f5f6; }
.order-flow-page h1 { font-size: var(--page-h1-size); line-height: var(--page-h1-leading); letter-spacing: var(--page-h1-tracking); }
.order-flow-page h2 { font-size: clamp(24px, 2.4vw, 34px); }
.order-confirmation-section, .track-order-section { padding: clamp(42px, 6vw, 86px) 0 clamp(76px, 9vw, 124px); }
.order-success-head { max-width: 920px; margin-bottom: clamp(38px, 5vw, 66px); display: flex; align-items: flex-start; gap: 23px; }
.order-success-head h1 { margin-bottom: 18px; }
.order-success-head p:last-child { max-width: 700px; margin-bottom: 0; font-size: 17px; }
.order-success-mark { width: 62px; height: 62px; margin-top: 3px; border-radius: 50%; display: grid; place-items: center; flex: 0 0 auto; background: #dff4e6; color: #16834a; }
.order-confirmation-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(330px, .65fr); gap: 18px; align-items: start; }
.order-confirmation-main { display: grid; gap: 18px; }
.order-number-card { min-height: 180px; padding: clamp(26px, 4vw, 42px); border-radius: 18px; display: flex; flex-direction: column; justify-content: center; background: #101114; color: #fff; overflow: hidden; }
.order-number-card > span { color: #8cbef1; font-size: 12px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; }
.order-number-card > strong { margin: 12px 0 8px; overflow-wrap: anywhere; font-size: clamp(24px, 4vw, 42px); line-height: 1.1; letter-spacing: -.025em; }
.order-number-card > small { color: #aeb1b8; font-size: 13px; }
.order-status-card, .order-items-card, .order-receipt-card, .track-result-card, .track-help-card { border: 1px solid #e0e2e5; border-radius: 18px; background: #fff; }
.order-status-card, .order-items-card { padding: clamp(25px, 3vw, 36px); }
.order-card-heading { margin-bottom: 30px; display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; }
.order-card-heading .catalog-kicker { margin-bottom: 9px !important; }
.order-card-heading h2 { margin-bottom: 0; }
.order-card-heading > span:not(.order-status-pill) { color: #777b83; font-size: 13px; }
.order-status-pill { min-height: 31px; padding: 0 11px; border-radius: 99px; display: inline-flex; align-items: center; flex: 0 0 auto; background: #eaf3fc; color: #0968c5; font-size: 11px; font-weight: 700; }
.order-status-pill--delivered { background: #e2f4e8; color: #187641; }
.order-status-pill--cancelled { background: #fbe8e8; color: #a73535; }
.order-status-pill--ready_for_pickup, .order-status-pill--shipped { background: #fff2d8; color: #956313; }
.order-progress { margin: 0; padding: 0; display: flex; list-style: none; }
.order-progress li { position: relative; flex: 1; display: flex; flex-direction: column; gap: 12px; color: #999ca2; font-size: 12px; }
.order-progress li:not(:last-child)::after { content: ''; position: absolute; left: 34px; right: 8px; top: 15px; height: 1px; background: #d9dce0; }
.order-progress-dot { position: relative; z-index: 1; width: 31px; height: 31px; border: 1px solid #d5d8dc; border-radius: 50%; display: grid; place-items: center; background: #fff; color: #8a8e95; font-size: 9px; font-weight: 700; }
.order-progress li.is-complete, .order-progress li.is-current { color: #22252a; }
.order-progress li.is-complete::after { background: #16834a; }
.order-progress li.is-complete .order-progress-dot { border-color: #16834a; background: #16834a; color: #fff; }
.order-progress li.is-current .order-progress-dot { border-color: #0672df; color: #0672df; box-shadow: 0 0 0 5px rgba(6,114,223,.1); }
.order-progress li strong { max-width: 110px; line-height: 1.35; }
.order-item-list { border-top: 1px solid #e5e7e9; }
.order-item-row { min-height: 78px; border-bottom: 1px solid #e5e7e9; display: grid; grid-template-columns: 38px 1fr auto; gap: 13px; align-items: center; }
.order-item-qty { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: #f0f2f4; color: #41444a; font-size: 12px; font-weight: 700; }
.order-item-row strong, .order-item-row small { display: block; }
.order-item-row strong { color: #181a1e; font-size: 14px; }
.order-item-row small { margin-top: 3px; color: #787b82; font-size: 12px; }
.order-item-row > b { color: #181a1e; font-size: 14px; }
.order-receipt-card { position: sticky; top: 92px; padding: 30px; }
.order-receipt-card > h2 { margin-bottom: 24px; font-size: 23px; }
.order-totals { margin: 0; }
.order-totals > div { padding: 13px 0; border-top: 1px solid #e5e7e9; display: flex; justify-content: space-between; gap: 20px; color: #696c73; }
.order-totals dt, .order-totals dd { margin: 0; font-size: 13px; }
.order-totals dd { color: #22252a; font-weight: 600; }
.order-totals .order-total-final { padding: 20px 0; color: #15171a; }
.order-totals .order-total-final dt, .order-totals .order-total-final dd { color: #15171a; font-size: 18px; font-weight: 700; }
.order-fulfilment-note { margin: 4px 0 24px; padding: 19px; border-radius: 11px; background: #f2f6fa; }
.order-fulfilment-note strong { display: block; color: #202328; font-size: 13px; }
.order-fulfilment-note p { margin: 7px 0 0; font-size: 12px; line-height: 1.55; }
.order-receipt-card .catalog-primary-action { width: 100%; }
.order-secondary-action { min-height: 46px; margin-top: 8px; display: flex; align-items: center; justify-content: center; color: #42454b; font-size: 13px; font-weight: 600; text-decoration: none; }
.order-secondary-action:hover { color: #0672df; }

/* Tracking lookup and result. */
.track-order-grid { display: grid; grid-template-columns: minmax(320px, .72fr) minmax(0, 1.28fr); gap: clamp(28px, 5vw, 74px); align-items: start; }
.track-order-entry { padding-top: 12px; }
.track-order-entry h1 { margin-bottom: 20px; }
.track-order-lede { max-width: 570px; margin-bottom: 30px; font-size: 17px !important; }
.order-track-form { padding: clamp(24px, 3.2vw, 34px); border: 1px solid #e0e2e5; border-radius: 17px; display: grid; gap: 18px; background: #fff; box-shadow: 0 18px 45px rgba(16,17,20,.055); }
.order-track-form label { display: grid; gap: 8px; }
.order-track-form label > span { color: #22252a; font-size: 13px; font-weight: 650; }
.order-track-form input { width: 100%; min-height: 52px; padding: 0 15px; border: 1px solid #d4d7db; border-radius: 9px; background: #fff; color: #17191c; font-size: 15px; }
.order-track-form input::placeholder { color: #9a9da3; }
.order-track-form input:focus { border-color: #0672df; outline: 0; box-shadow: 0 0 0 4px rgba(6,114,223,.1); }
.order-track-form .catalog-primary-action { width: 100%; }
.order-form-alert { margin: 0 0 18px; padding: 14px 16px; border: 1px solid #efcaca; border-radius: 10px; display: flex; align-items: flex-start; gap: 11px; background: #fdf1f1; }
.order-form-alert > span { width: 23px; height: 23px; border-radius: 50%; display: grid; place-items: center; flex: 0 0 auto; background: #b94242; color: #fff; font-size: 12px; font-weight: 700; }
.order-form-alert p { margin: 0; color: #8c2e2e; font-size: 13px; line-height: 1.55; }
.track-privacy-note { margin: 14px 0 0 !important; display: flex; gap: 8px; color: #777b83 !important; font-size: 12px !important; }
.track-help-card { padding: clamp(27px, 4vw, 43px); display: grid; grid-template-columns: 42px 1fr; gap: 0 18px; }
.track-help-index { padding-top: 4px; color: #0672df; font-size: 11px; font-weight: 700; }
.track-help-card > div { padding: 0 0 29px; }
.track-help-card > div:not(:last-child) { margin-bottom: 25px; border-bottom: 1px solid #e5e7e9; }
.track-help-card h2, .track-help-card h3 { margin-bottom: 9px; }
.track-help-card h3 { font-size: 20px; }
.track-help-card p { margin-bottom: 0; font-size: 14px; }
.track-help-card a { margin-top: 12px; display: inline-flex; align-items: center; gap: 8px; color: #0672df; font-size: 13px; font-weight: 650; }
.track-result-card { padding: clamp(27px, 4vw, 42px); }
.track-result-card > header { padding-bottom: 28px; border-bottom: 1px solid #e5e7e9; display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; }
.track-result-card > header .catalog-kicker { margin-bottom: 10px !important; }
.track-result-card > header h2 { margin-bottom: 0; }
.track-result-meta { display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid #e5e7e9; }
.track-result-meta > span { padding: 21px 15px 21px 0; color: #7a7d84; font-size: 11px; }
.track-result-meta > span + span { padding-left: 15px; border-left: 1px solid #e5e7e9; }
.track-result-meta strong { margin-top: 4px; display: block; color: #22252a; font-size: 12px; }
.track-history, .track-items { padding-top: 29px; }
.track-history > h3, .track-items > h3 { margin-bottom: 22px; font-size: 18px; }
.track-history ol { margin: 0; padding: 0; list-style: none; }
.track-history li { position: relative; min-height: 86px; padding: 0 0 25px 36px; }
.track-history li:not(:last-child)::before { content: ''; position: absolute; left: 8px; top: 18px; bottom: -3px; width: 1px; background: #d9dce0; }
.track-history li > span { position: absolute; left: 0; top: 4px; width: 17px; height: 17px; border: 1px solid #c4c7cc; border-radius: 50%; background: #fff; }
.track-history li.is-current > span { border-color: #0672df; background: #0672df; box-shadow: 0 0 0 5px rgba(6,114,223,.1); }
.track-history strong { display: block; color: #202328; font-size: 14px; }
.track-history p { margin: 5px 0 0; font-size: 13px; line-height: 1.55; }
.track-history time { margin-top: 5px; display: block; color: #898c92; font-size: 11px; }
.track-items { border-top: 1px solid #e5e7e9; }
.track-items > div { min-height: 58px; border-top: 1px solid #eceef0; display: flex; justify-content: space-between; align-items: center; gap: 22px; color: #35383e; font-size: 13px; }
.track-items span > b { margin-right: 5px; color: #0672df; }
.track-items small { margin: 3px 0 0 29px; display: block; color: #85888f; }
.track-items > div > strong { color: #202328; white-space: nowrap; }

@media (max-width: 900px) {
    .order-confirmation-grid, .track-order-grid { grid-template-columns: 1fr; }
    .order-receipt-card { position: static; }
    .track-result-card { grid-row: 1; }
    .track-order-entry { grid-row: 2; }
    .track-help-card { grid-row: 2; }
}
@media (max-width: 620px) {
    .order-confirmation-section, .track-order-section { padding-top: 32px; }
    .order-success-head { flex-direction: column; }
    .order-success-mark { width: 54px; height: 54px; }
    .order-progress { display: grid; }
    .order-progress li { min-height: 56px; padding-left: 46px; justify-content: center; }
    .order-progress li:not(:last-child)::after { left: 15px; right: auto; top: 34px; bottom: -22px; width: 1px; height: auto; }
    .order-progress-dot { position: absolute; left: 0; top: 12px; }
    .order-progress li strong { max-width: none; }
    .order-item-row { grid-template-columns: 36px 1fr; padding: 15px 0; }
    .order-item-row > b { grid-column: 2; }
    .order-card-heading, .track-result-card > header { flex-direction: column; }
    .track-result-meta { grid-template-columns: 1fr; }
    .track-result-meta > span { padding: 15px 0; }
    .track-result-meta > span + span { padding-left: 0; border-top: 1px solid #e5e7e9; border-left: 0; }
    .track-help-card { grid-template-columns: 34px 1fr; padding: 24px 20px; }
}

/* ==========================================================================
   Contact + FAQ — task-first support experience
   ========================================================================== */
.contact-page-v2,
.faq-page-v2 {
    --support-ink: #15171b;
    --support-muted: #656970;
    --support-line: #e2e4e7;
    --support-blue: #0672df;
    --support-soft: #f5f6f7;
    color: var(--support-ink);
    background: #fff;
}
.contact-shell,
.faq-shell {
    width: min(1180px, calc(100% - 64px));
    margin: 0 auto;
}
.contact-kicker,
.faq-kicker {
    margin: 0 0 17px !important;
    color: var(--hero-accent-on-light) !important;
    font-family: "Poppins", sans-serif;
    font-size: 12px !important;
    font-weight: 600;
    letter-spacing: .13em;
    line-height: 1.4 !important;
    text-transform: uppercase;
}
.contact-page-v2 h1,
.faq-page-v2 h1,
.contact-page-v2 h2,
.faq-page-v2 h2,
.contact-page-v2 h3,
.faq-page-v2 h3 {
    font-family: "Poppins", sans-serif;
    color: var(--support-ink);
    letter-spacing: -.032em;
}
.contact-primary-action,
.faq-primary-action,
.contact-submit {
    min-height: 50px;
    padding: 0 20px;
    border: 1px solid var(--support-blue);
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 11px;
    background: var(--support-blue);
    color: #fff;
    font-family: "Poppins", sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.contact-primary-action:hover,
.faq-primary-action:hover,
.contact-submit:hover {
    border-color: #005eb8;
    background: #005eb8;
    color: #fff;
    transform: translateY(-1px);
}
.contact-secondary-action,
.faq-secondary-action {
    min-height: 50px;
    padding: 0 18px;
    border: 1px solid rgba(255,255,255,.23);
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-family: "Poppins", sans-serif;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
}
.contact-secondary-action:hover,
.faq-secondary-action:hover { border-color: rgba(255,255,255,.6); color: #fff; }
.contact-page-v2 a:focus-visible,
.faq-page-v2 a:focus-visible,
.contact-page-v2 button:focus-visible,
.faq-page-v2 button:focus-visible,
.contact-page-v2 input:focus-visible,
.faq-page-v2 input:focus-visible,
.contact-page-v2 select:focus-visible,
.contact-page-v2 textarea:focus-visible {
    outline: 3px solid rgba(6,114,223,.24);
    outline-offset: 3px;
}

/* Contact */
.contact-hero-v2 {
    padding: clamp(76px, 8vw, 118px) 0;
    background:
        radial-gradient(circle at 86% 4%, rgba(41,151,255,.18), transparent 32%),
        #0c0d10;
}
.contact-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(330px, .88fr);
    gap: clamp(48px, 7vw, 92px);
    align-items: center;
}
.contact-hero-v2 h1 {
    max-width: 760px;
    margin: 0;
    color: #fff;
    font-size: var(--page-h1-size);
    font-weight: 600;
    line-height: var(--page-h1-leading);
    letter-spacing: var(--page-h1-tracking);
    text-wrap: balance;
}
.contact-lede {
    max-width: 650px;
    margin: 25px 0 0;
    color: rgba(255,255,255,.7);
    font-size: clamp(17px, 1.6vw, 20px);
    line-height: 1.68;
}
.contact-hero-actions { margin-top: 31px; display: flex; flex-wrap: wrap; gap: 11px; }
.contact-expect-card {
    padding: 28px;
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 18px;
    background: rgba(255,255,255,.055);
    box-shadow: 0 30px 80px rgba(0,0,0,.22);
}
.contact-card-label {
    margin: 0 0 14px;
    color: rgba(255,255,255,.55);
    font-family: "Poppins", sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.contact-expect-card ol { margin: 0; padding: 0; list-style: none; }
.contact-expect-card li {
    min-height: 83px;
    padding: 17px 0;
    border-top: 1px solid rgba(255,255,255,.11);
    display: grid;
    grid-template-columns: 36px 1fr;
    gap: 15px;
}
.contact-expect-card li > span {
    color: #62adf7;
    font-family: "Poppins", sans-serif;
    font-size: 11px;
    font-weight: 600;
}
.contact-expect-card strong,
.contact-expect-card small { display: block; }
.contact-expect-card strong { color: #fff; font-size: 15px; font-weight: 600; }
.contact-expect-card small { margin-top: 4px; color: rgba(255,255,255,.61); font-size: 13px; line-height: 1.5; }

.contact-channel-section { padding: clamp(62px, 7vw, 94px) 0; background: #fff; }
.contact-section-heading { max-width: 690px; margin-bottom: 31px; }
.contact-section-heading h2 {
    margin: 0;
    font-size: clamp(30px, 3.4vw, 47px);
    font-weight: 600;
    line-height: 1.13;
}
.contact-section-heading > p:not(.contact-kicker) {
    margin: 14px 0 0;
    color: var(--support-muted);
    font-size: 16px;
    line-height: 1.65;
}
.contact-channel-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 13px; }
.contact-channel-card {
    min-height: 218px;
    padding: 23px;
    border: 1px solid var(--support-line);
    border-radius: 15px;
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    grid-template-rows: 1fr auto;
    gap: 20px 14px;
    color: inherit;
    background: #fff;
    text-decoration: none;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.contact-channel-card:hover {
    border-color: #b9c9da;
    color: inherit;
    box-shadow: 0 18px 45px rgba(18,34,51,.08);
    transform: translateY(-3px);
}
.contact-channel-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: #eef5fc;
    color: var(--support-blue);
    font-size: 19px;
}
.contact-channel-card > span:nth-child(2) { min-width: 0; }
.contact-channel-card small,
.contact-channel-card strong,
.contact-channel-card em { display: block; }
.contact-channel-card small {
    color: var(--support-muted);
    font-size: 11px;
    font-style: normal;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.contact-channel-card strong {
    margin-top: 7px;
    overflow-wrap: anywhere;
    color: var(--support-ink);
    font-family: "Poppins", sans-serif;
    font-size: 15px;
    line-height: 1.45;
}
.contact-channel-card em { margin-top: 8px; color: var(--support-muted); font-size: 13px; font-style: normal; line-height: 1.5; }
.contact-channel-card > svg { grid-column: 2; color: var(--support-blue); }

.contact-workspace { padding: clamp(64px, 8vw, 108px) 0; background: var(--support-soft); }
.contact-workspace-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.16fr) minmax(340px, .84fr);
    gap: clamp(28px, 5vw, 68px);
    align-items: start;
}
.contact-form-panel {
    padding: clamp(27px, 4vw, 48px);
    border: 1px solid var(--support-line);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 20px 60px rgba(18,34,51,.055);
}
.contact-alert {
    margin: 0 0 25px;
    padding: 16px;
    border-radius: 11px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 14px;
}
.contact-alert i { margin-top: 3px; font-size: 18px; }
.contact-alert strong,
.contact-alert span { display: block; }
.contact-alert span { margin-top: 2px; }
.contact-alert-success { border: 1px solid #b9ddc5; background: #eef8f1; color: #195b30; }
.contact-alert-error { border: 1px solid #e7c1c1; background: #fff1f1; color: #852626; }
.contact-form-v2 { display: grid; gap: 23px; }
.contact-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.contact-field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.contact-field { min-width: 0; }
.contact-field label,
.contact-method-fieldset legend {
    margin: 0 0 8px;
    display: block;
    color: #32353a;
    font-family: "Poppins", sans-serif;
    font-size: 13px;
    font-weight: 600;
}
.contact-method-fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.contact-method-fieldset legend span { margin-left: 5px; color: var(--support-muted); font-family: Roboto, sans-serif; font-weight: 400; }
.contact-field input,
.contact-field select,
.contact-field textarea {
    width: 100%;
    margin: 0;
    border: 1px solid #cfd2d6;
    border-radius: 9px;
    background: #fff;
    color: var(--support-ink);
    font-size: 16px;
    line-height: 1.45;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.contact-field input,
.contact-field select { min-height: 51px; padding: 0 14px; }
.contact-field textarea { min-height: 150px; padding: 13px 14px; resize: vertical; }
.contact-field input::placeholder,
.contact-field textarea::placeholder { color: #92969d; }
.contact-field input:focus,
.contact-field select:focus,
.contact-field textarea:focus { border-color: var(--support-blue); box-shadow: 0 0 0 4px rgba(6,114,223,.09); outline: 0; }
.contact-label-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.contact-label-row > span { color: var(--support-muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.contact-field > small { margin-top: 7px; display: block; color: var(--support-muted); font-size: 12px; line-height: 1.5; }
.contact-submit-row {
    padding-top: 4px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 25px;
    align-items: center;
}
.contact-submit-row p { margin: 0; color: var(--support-muted); font-size: 12.5px; line-height: 1.55; }
.contact-submit-row p a { color: var(--support-blue); }
.contact-submit { cursor: pointer; }

.contact-visit-panel {
    position: sticky;
    top: 44px;
    padding: clamp(27px, 3.5vw, 42px);
    border-radius: 18px;
    background: #17191d;
    color: #fff;
}
.contact-visit-panel h2 { margin: 0; color: #fff; font-size: clamp(27px, 3vw, 38px); font-weight: 600; line-height: 1.17; }
.contact-visit-intro { margin: 16px 0 25px; color: rgba(255,255,255,.64); font-size: 14px; line-height: 1.68; }
.contact-branch-list { border-top: 1px solid rgba(255,255,255,.13); }
.contact-branch-card { padding: 23px 0; display: grid; grid-template-columns: 40px 1fr; gap: 15px; }
.contact-branch-marker { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: rgba(41,151,255,.14); color: #62adf7; }
.contact-branch-card h3 { margin: 0 0 9px; color: #fff; font-size: 16px; font-weight: 600; line-height: 1.35; }
.contact-branch-card address { margin: 0; color: rgba(255,255,255,.62); font-size: 13.5px; font-style: normal; line-height: 1.65; }
.contact-branch-actions { margin-top: 15px; display: flex; flex-wrap: wrap; gap: 15px; }
.contact-branch-actions a { min-height: 34px; display: inline-flex; align-items: center; gap: 7px; color: #75baff; font-size: 13px; font-weight: 600; }
.contact-branch-actions a:hover { color: #fff; }
.contact-alt-number { margin: 0; padding-top: 17px; border-top: 1px solid rgba(255,255,255,.13); color: rgba(255,255,255,.62); font-size: 13px; }
.contact-alt-number a { min-height: 34px; display: inline-flex; align-items: center; color: #fff; font-weight: 600; }

/* FAQ */
.faq-hero-v2 {
    padding: clamp(72px, 8vw, 112px) 0;
    background:
        radial-gradient(circle at 10% 100%, rgba(41,151,255,.14), transparent 35%),
        #101216;
}
.faq-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(360px, .95fr);
    gap: clamp(48px, 7vw, 92px);
    align-items: center;
}
.faq-hero-v2 h1 { margin: 0; color: #fff; font-size: var(--page-h1-size); font-weight: 600; line-height: var(--page-h1-leading); letter-spacing: var(--page-h1-tracking); text-wrap: balance; }
.faq-lede { max-width: 620px; margin: 23px 0 0; color: rgba(255,255,255,.68); font-size: clamp(17px, 1.5vw, 20px); line-height: 1.65; }
.faq-search-panel { padding: 28px; border: 1px solid rgba(255,255,255,.13); border-radius: 17px; background: rgba(255,255,255,.06); }
.faq-search-panel > label { margin-bottom: 12px; display: block; color: #fff; font-family: "Poppins", sans-serif; font-size: 14px; font-weight: 600; }
.faq-search-control { min-height: 56px; padding: 0 13px 0 16px; border: 1px solid transparent; border-radius: 10px; display: flex; align-items: center; gap: 11px; background: #fff; color: #73777e; }
.faq-search-control:focus-within { border-color: #61aaf3; box-shadow: 0 0 0 4px rgba(41,151,255,.16); }
.faq-search-control input { min-width: 0; flex: 1; margin: 0; padding: 0; border: 0; outline: 0; background: transparent; color: var(--support-ink); font-size: 16px; }
.faq-search-control input::-webkit-search-cancel-button { display: none; }
.faq-search-clear { width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; background: #edf0f3; color: #4d5158; font-size: 21px; line-height: 1; cursor: pointer; }
.faq-search-status { margin: 11px 0 0; color: rgba(255,255,255,.56); font-size: 12.5px; }

.faq-browser { padding: clamp(64px, 8vw, 108px) 0; background: #fff; }
.faq-browser-grid { display: grid; grid-template-columns: 310px minmax(0, 1fr); gap: clamp(42px, 7vw, 94px); align-items: start; }
.faq-browser-aside { position: sticky; top: 44px; }
.faq-browser-aside h2 { margin: 0; font-size: clamp(30px, 3.2vw, 43px); font-weight: 600; }
.faq-browser-aside > p:not(.faq-kicker) { margin: 15px 0 25px; color: var(--support-muted); font-size: 15px; line-height: 1.65; }
.faq-category-list { display: grid; gap: 7px; }
.faq-category {
    min-height: 47px;
    padding: 0 12px 0 15px;
    border: 1px solid var(--support-line);
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: #fff;
    color: #494d53;
    font-family: "Poppins", sans-serif;
    font-size: 13px;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    transition: border-color .2s ease, background .2s ease, color .2s ease;
}
.faq-category small { min-width: 25px; height: 25px; padding: 0 7px; border-radius: 999px; display: grid; place-items: center; background: #f0f1f3; color: #6f7379; font-size: 11px; }
.faq-category:hover { border-color: #afc8e0; color: var(--support-blue); }
.faq-category.is-active { border-color: #17191d; background: #17191d; color: #fff; }
.faq-category.is-active small { background: rgba(255,255,255,.13); color: #fff; }
.faq-expand-toggle {
    min-height: 42px;
    margin-top: 15px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--support-blue);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}
.faq-results-head { min-height: 42px; border-bottom: 1px solid var(--support-line); display: flex; align-items: flex-start; justify-content: flex-end; color: var(--support-muted); font-size: 12.5px; }
.faq-accordion-v2 { border-bottom: 1px solid var(--support-line); }
.faq-row-v2 { border-top: 1px solid var(--support-line); }
.faq-row-v2:first-child { border-top: 0; }
.faq-row-v2[hidden] { display: none; }
.faq-row-v2 summary {
    min-height: 104px;
    padding: 23px 4px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
    color: var(--support-ink);
    cursor: pointer;
    list-style: none;
}
.faq-row-v2 summary::-webkit-details-marker { display: none; }
.faq-row-v2 summary > span { min-width: 0; }
.faq-row-v2 summary small { margin-bottom: 6px; display: block; color: var(--support-blue); font-size: 10.5px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; }
.faq-row-v2 summary strong { display: block; font-family: "Poppins", sans-serif; font-size: clamp(16px, 1.55vw, 19px); font-weight: 600; line-height: 1.45; letter-spacing: -.018em; }
.faq-row-plus { position: relative; width: 34px; height: 34px; border: 1px solid #d5d8dc; border-radius: 50%; flex: 0 0 auto; }
.faq-row-plus::before,
.faq-row-plus::after { content: ''; position: absolute; left: 9px; right: 9px; top: 16px; height: 1px; background: #3e4248; transition: transform .2s ease; }
.faq-row-plus::after { transform: rotate(90deg); }
.faq-row-v2[open] .faq-row-plus { border-color: var(--support-blue); background: var(--support-blue); }
.faq-row-v2[open] .faq-row-plus::before,
.faq-row-v2[open] .faq-row-plus::after { background: #fff; }
.faq-row-v2[open] .faq-row-plus::after { transform: rotate(0); }
.faq-answer-v2 { padding: 0 64px 25px 4px; }
.faq-answer-v2 p { max-width: 750px; margin: 0; color: var(--support-muted); font-size: 15.5px; line-height: 1.75; }
.faq-empty-v2 { padding: 62px 25px; border-bottom: 1px solid var(--support-line); text-align: center; }
.faq-empty-icon { width: 52px; height: 52px; margin: 0 auto 18px; border-radius: 50%; display: grid; place-items: center; background: #eef5fc; color: var(--support-blue); font-size: 20px; }
.faq-empty-v2 h3 { margin: 0 0 9px; font-size: 23px; font-weight: 600; }
.faq-empty-v2 p { max-width: 480px; margin: 0 auto; color: var(--support-muted); font-size: 14px; line-height: 1.6; }
.faq-empty-reset { min-height: 44px; margin-top: 19px; padding: 0 17px; border: 1px solid var(--support-blue); border-radius: 8px; background: #fff; color: var(--support-blue); font-size: 13px; font-weight: 600; cursor: pointer; }

.faq-help-strip { padding: clamp(55px, 7vw, 82px) 0; background: #eaf3fb; }
.faq-help-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 45px; align-items: center; }
.faq-help-grid h2 { margin: 0; font-size: clamp(29px, 3.3vw, 44px); font-weight: 600; }
.faq-help-grid > div:first-child > p:last-child { max-width: 670px; margin: 14px 0 0; color: var(--support-muted); font-size: 15px; line-height: 1.65; }
.faq-help-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }
.faq-help-actions .faq-secondary-action { border-color: #bcc8d4; color: var(--support-ink); background: rgba(255,255,255,.58); }
.faq-help-actions .faq-secondary-action:hover { border-color: #78899a; color: var(--support-ink); }

@media (max-width: 1080px) {
    .contact-channel-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 920px) {
    .contact-shell,
    .faq-shell { width: min(100% - 48px, 760px); }
    .contact-hero-grid,
    .faq-hero-grid,
    .contact-workspace-grid,
    .faq-browser-grid,
    .faq-help-grid { grid-template-columns: minmax(0, 1fr); }
    .contact-expect-card { max-width: 620px; }
    .contact-visit-panel,
    .faq-browser-aside { position: static; }
    .faq-browser-aside { padding-bottom: 28px; border-bottom: 1px solid var(--support-line); }
    .faq-category-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .faq-help-actions { justify-content: flex-start; }
}
@media (max-width: 600px) {
    .contact-shell,
    .faq-shell { width: calc(100% - 36px); }
    .contact-hero-v2,
    .faq-hero-v2 { padding: 62px 0; }
    .contact-hero-actions,
    .faq-help-actions { display: grid; grid-template-columns: minmax(0, 1fr); }
    .contact-primary-action,
    .contact-secondary-action,
    .faq-primary-action,
    .faq-secondary-action { width: 100%; }
    .contact-expect-card,
    .faq-search-panel { padding: 21px; }
    .contact-channel-grid,
    .contact-field-row,
    .faq-category-list { grid-template-columns: minmax(0, 1fr); }
    .contact-channel-card { min-height: 176px; }
    .contact-form-panel,
    .contact-visit-panel { padding: 24px 20px; }
    .contact-submit-row { grid-template-columns: minmax(0, 1fr); gap: 18px; }
    .contact-submit { width: 100%; }
    .faq-results-head { justify-content: flex-start; }
    .faq-row-v2 summary { min-height: 90px; padding: 20px 0; gap: 16px; }
    .faq-answer-v2 { padding: 0 0 22px; }
    .faq-row-plus { width: 32px; height: 32px; }
    .faq-row-plus::before,
    .faq-row-plus::after { top: 15px; }
}
@media (max-width: 380px) {
    .contact-shell,
    .faq-shell { width: calc(100% - 28px); }
    .contact-expect-card li { grid-template-columns: 31px 1fr; gap: 10px; }
    .contact-channel-card { padding: 19px; grid-template-columns: 40px minmax(0, 1fr); }
    .contact-channel-icon { width: 40px; height: 40px; }
}
@media (prefers-reduced-motion: reduce) {
    .contact-primary-action,
    .faq-primary-action,
    .contact-submit,
    .contact-channel-card,
    .faq-category,
    .faq-row-plus::before,
    .faq-row-plus::after { transition: none; }
    .contact-primary-action:hover,
    .faq-primary-action:hover,
    .contact-submit:hover,
    .contact-channel-card:hover { transform: none; }
}

@media (max-width: 600px) {
    .device-grid,
    .svc-grid,
    .warranty-grid,
    .review-grid,
    .g-2,
    .g-3,
    .g-4,
    .grid-3,
    .blog-grid,
    .catalog-device-grid,
    .catalog-model-grid,
    .catalog-service-grid,
    .catalog-product-grid,
    .product-card-grid,
    .catalog-centre-grid,
    .catalog-related-grid,
    .catalog-model-strip,
    .catalog-note-grid,
    .catalog-symptom-grid,
    .catalog-contact-links,
    .faq-category-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .blog-grid,
    .catalog-device-grid,
    .catalog-model-grid,
    .catalog-service-grid,
    .catalog-product-grid,
    .product-card-grid,
    .catalog-centre-grid,
    .catalog-related-grid,
    .contact-channel-grid {
        gap: 10px;
    }

    .svc-card,
    .warranty-card,
    .review-card {
        min-width: 0;
        padding: 18px 14px;
    }

    .card,
    .device-card,
    .catalog-device-card,
    .catalog-model-card,
    .catalog-service-card,
    .product-card,
    .catalog-product-card,
    .catalog-related-grid a,
    .contact-channel-card {
        min-width: 0;
    }

    .ascbd-card-grid-mobile > .col {
        flex: 0 0 50%;
        max-width: 50%;
    }

    .ascbd-card-grid-mobile .feature-box {
        height: 100%;
        padding-right: 14px;
        padding-left: 14px;
    }
}

.pricing-page {
    --pricing-ink: #0b1220;
    --pricing-muted: #647188;
    --pricing-blue: #0b69f0;
    --pricing-line: #e1e8f1;
    --pricing-soft: #f5f7fb;
    background: var(--pricing-soft);
}

.pricing-page *,
.pricing-page *::before,
.pricing-page *::after { box-sizing: border-box; }

.pricing-page h1,
.pricing-page h2,
.pricing-page h3,
.pricing-page p { margin-top: 0; }

.pricing-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: clamp(70px, 9vw, 128px) 0;
    background: #fff;
    border-top: 1px solid #eef2f7;
}

.pricing-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(circle at 84% 18%, rgba(11, 105, 240, .15), transparent 29%), radial-gradient(circle at 6% 100%, rgba(75, 112, 210, .08), transparent 27%);
}

.pricing-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.16fr) minmax(320px, .84fr);
    align-items: center;
    gap: clamp(42px, 7vw, 112px);
}

.pricing-hero-copy { max-width: 680px; }

.pricing-hero-copy h1 {
    max-width: 12ch;
    margin-bottom: 18px;
    color: var(--pricing-ink);
    font-size: var(--page-h1-size);
    font-weight: 650;
    letter-spacing: var(--page-h1-tracking);
    line-height: var(--page-h1-leading);
}

.pricing-hero-copy > p:not(.catalog-kicker) {
    max-width: 620px;
    margin-bottom: 28px;
    color: var(--pricing-muted);
    font-size: clamp(16px, 1.45vw, 20px);
    line-height: 1.65;
}

.pricing-hero-points {
    display: grid;
    gap: 12px;
    max-width: 570px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pricing-hero-points li {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #334056;
    font-size: 14px;
    line-height: 1.45;
}

.pricing-hero-points svg { flex: 0 0 auto; color: var(--pricing-blue); }

.pricing-hero-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-self: stretch;
    padding: clamp(23px, 3vw, 34px);
    border: 1px solid rgba(220, 228, 239, .95);
    border-radius: 24px;
    background: rgba(255, 255, 255, .88);
    box-shadow: 0 20px 58px rgba(15, 31, 58, .08);
    backdrop-filter: blur(12px);
}

.pricing-hero-summary > div {
    display: grid;
    align-content: start;
    gap: 5px;
    min-width: 0;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--pricing-line);
}

.pricing-hero-summary > div + div { padding-left: 22px; border-left: 1px solid var(--pricing-line); }

.pricing-hero-summary span,
.pricing-hero-summary small {
    color: var(--pricing-muted);
    font-size: 11px;
    line-height: 1.35;
}

.pricing-hero-summary span {
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.pricing-hero-summary strong {
    color: var(--pricing-ink);
    font-size: clamp(30px, 3.2vw, 42px);
    font-weight: 650;
    letter-spacing: -.05em;
    line-height: 1;
}

.pricing-hero-summary > p {
    grid-column: 1 / -1;
    margin: 0;
    padding-top: 23px;
    color: var(--pricing-muted);
    font-size: 13px;
    line-height: 1.6;
}

.pricing-directory-section { padding: clamp(66px, 9vw, 120px) 0; }

.pricing-section-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 420px);
    align-items: end;
    gap: 32px;
    margin-bottom: 34px;
}

.pricing-section-head h2,
.pricing-help-layout h2 {
    margin-bottom: 0;
    color: var(--pricing-ink);
    font-size: clamp(31px, 3.4vw, 50px);
    font-weight: 630;
    letter-spacing: -.045em;
    line-height: 1.05;
}

.pricing-section-head > p,
.pricing-help-layout > div > p:not(.catalog-kicker) {
    max-width: 420px;
    margin: 0;
    color: var(--pricing-muted);
    font-size: 15px;
    line-height: 1.65;
}

.pricing-directory { min-width: 0; }

.pricing-toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 20px 28px;
    margin-bottom: 16px;
    padding: 18px;
    border: 1px solid var(--pricing-line);
    border-radius: 20px;
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 8px 28px rgba(15, 31, 58, .04);
}

.pricing-search-block { min-width: 0; }

.pricing-search-block > label {
    display: block;
    margin: 0 0 8px 2px;
    color: #36435a;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .11em;
    text-transform: uppercase;
}

.pricing-search-field {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 52px;
    padding: 0 15px;
    border: 1px solid #dfe6ef;
    border-radius: 13px;
    background: #f7f9fc;
    color: #788498;
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

.pricing-search-field:focus-within {
    border-color: var(--pricing-blue);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(11, 105, 240, .11);
}

.pricing-search-field input {
    min-width: 0;
    width: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--pricing-ink);
    font-size: 14px;
}

.pricing-search-field input::placeholder { color: #8b96a7; }

.pricing-toolbar-status {
    display: flex;
    align-items: end;
    justify-content: flex-end;
    gap: 12px;
    padding-bottom: 2px;
}

.pricing-toolbar-status p {
    margin: 0;
    color: var(--pricing-muted);
    font-size: 12px;
    white-space: nowrap;
}

.pricing-clear {
    padding: 5px 0;
    border: 0;
    background: transparent;
    color: var(--pricing-blue);
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

.pricing-clear:hover { text-decoration: underline; }

.pricing-filter-scroll {
    grid-column: 1 / -1;
    overflow-x: auto;
    padding: 1px;
    scrollbar-width: thin;
}

.pricing-filter-list {
    display: flex;
    width: max-content;
    min-width: 100%;
    gap: 8px;
}

.pricing-filter-chip {
    min-height: 38px;
    padding: 0 14px;
    border: 1px solid #dfe6ef;
    border-radius: 999px;
    background: #fff;
    color: #536078;
    font: inherit;
    font-size: 12px;
    font-weight: 650;
    white-space: nowrap;
    cursor: pointer;
    transition: background .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease;
}

.pricing-filter-chip:hover,
.pricing-filter-chip:focus-visible {
    border-color: rgba(11, 105, 240, .6);
    color: var(--pricing-blue);
    outline: 0;
}

.pricing-filter-chip.is-active {
    border-color: var(--pricing-blue);
    background: var(--pricing-blue);
    color: #fff;
    box-shadow: 0 7px 16px rgba(11, 105, 240, .18);
}

.pricing-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--pricing-line);
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 12px 34px rgba(15, 31, 58, .04);
}

.pricing-data-table {
    width: 100%;
    min-width: 860px;
    border-collapse: collapse;
    color: var(--pricing-ink);
    text-align: left;
}

.pricing-data-table thead { background: #f8faff; }

.pricing-data-table th {
    padding: 15px 20px;
    border-bottom: 1px solid var(--pricing-line);
    color: #607087;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .11em;
    text-transform: uppercase;
}

.pricing-data-table td {
    padding: 19px 20px;
    border-bottom: 1px solid #edf1f6;
    vertical-align: middle;
}

.pricing-data-table tbody tr:last-child td { border-bottom: 0; }

.pricing-data-table tbody tr { transition: background .2s ease; }
.pricing-data-table tbody tr:hover { background: #f8fbff; }

.pricing-device-cell strong,
.pricing-device-cell span,
.pricing-service-cell strong,
.pricing-service-cell small { display: block; }

.pricing-device-cell strong,
.pricing-service-cell strong,
.pricing-service-cell a {
    color: var(--pricing-ink);
    font-size: 14px;
    font-weight: 650;
    line-height: 1.35;
}

.pricing-device-cell span {
    margin-top: 3px;
    color: var(--pricing-muted);
    font-size: 12px;
    line-height: 1.35;
}

.pricing-service-cell a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--pricing-blue);
    text-decoration: none;
    transition: color .2s ease, transform .2s ease;
}

.pricing-service-cell a:hover { color: #0759d6; transform: translateX(2px); }
.pricing-service-cell a svg { flex: 0 0 auto; }

.pricing-service-cell small {
    margin-top: 4px;
    color: #8a6a28;
    font-size: 11px;
}

.pricing-meta-cell {
    color: #405069;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.pricing-mobile-label { display: none; }

.pricing-price-column,
.pricing-price-cell { text-align: right; }

.pricing-price-cell > span,
.pricing-price-cell > strong,
.pricing-price-cell > del { display: block; }

.pricing-price-cell > span {
    color: var(--pricing-muted);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.pricing-price-cell strong {
    color: var(--pricing-ink);
    font-size: 19px;
    font-weight: 650;
    letter-spacing: -.025em;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
}

.pricing-price-cell del {
    margin-top: 2px;
    color: #8793a5;
    font-size: 11px;
}

.pricing-contact-price {
    color: var(--pricing-blue) !important;
    font-size: 12px !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

.pricing-cards { display: none; }

.pricing-no-results {
    margin-top: 16px;
    padding: clamp(36px, 5vw, 58px);
    border: 1px solid var(--pricing-line);
    border-radius: 20px;
    background: #fff;
    text-align: center;
}

.pricing-no-results h2 {
    margin-bottom: 9px;
    color: var(--pricing-ink);
    font-size: clamp(24px, 3vw, 34px);
    letter-spacing: -.035em;
}

.pricing-no-results p {
    max-width: 540px;
    margin: 0 auto 20px;
    color: var(--pricing-muted);
    font-size: 14px;
    line-height: 1.6;
}

.pricing-help-section {
    padding: clamp(56px, 7vw, 92px) 0;
    background: linear-gradient(135deg, #eaf3ff 0%, #f8faff 100%);
    border-top: 1px solid #dce8f7;
}

.pricing-help-layout {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 36px 70px;
}

.pricing-help-layout > div:first-child { max-width: 660px; }
.pricing-help-layout h2 { margin-bottom: 14px; }

.pricing-help-actions {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 19px;
}

.pricing-help-actions .catalog-primary-action { white-space: nowrap; }

@media (max-width: 900px) {
    .pricing-hero-grid,
    .pricing-section-head { grid-template-columns: 1fr; }
    .pricing-hero-copy h1 { max-width: 13ch; }
    .pricing-hero-summary { max-width: 610px; }
    .pricing-section-head { gap: 16px; }
    .pricing-section-head > p { max-width: 540px; }
    .pricing-help-layout { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 720px) {
    .pricing-hero { padding: 62px 0 70px; }
    .pricing-hero-copy > p:not(.catalog-kicker) { margin-bottom: 24px; font-size: 15px; }
    .pricing-hero-points { gap: 10px; }
    .pricing-hero-points li { align-items: flex-start; font-size: 13px; }
    .pricing-hero-points svg { margin-top: 1px; }
    .pricing-hero-summary { padding: 20px; border-radius: 18px; }
    .pricing-hero-summary > div { padding-bottom: 18px; }
    .pricing-hero-summary > div + div { padding-left: 17px; }
    .pricing-hero-summary > p { padding-top: 18px; font-size: 12px; }
    .pricing-directory-section { padding: 64px 0; }
    .pricing-toolbar { grid-template-columns: 1fr; gap: 14px; padding: 13px; border-radius: 17px; }
    .pricing-toolbar-status { align-items: center; justify-content: space-between; padding: 0 2px; }
    .pricing-filter-scroll { margin: 0 -13px -4px; padding: 0 13px 4px; }
    .pricing-filter-list { gap: 7px; }
    .pricing-filter-chip { min-height: 36px; padding: 0 13px; }
    .pricing-table-wrap { display: none; }
    .pricing-cards { display: grid; gap: 10px; }
    .pricing-card {
        padding: 18px;
        border: 1px solid var(--pricing-line);
        border-radius: 17px;
        background: #fff;
        box-shadow: 0 6px 18px rgba(15, 31, 58, .035);
    }
    .pricing-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
    .pricing-card-top > div:first-child { min-width: 0; }
    .pricing-card-top p { margin: 0; color: #3a4962; font-size: 12px; font-weight: 700; }
    .pricing-card-top > div:first-child > span { display: block; margin-top: 3px; color: var(--pricing-muted); font-size: 11px; line-height: 1.35; }
    .pricing-card h3 { margin: 16px 0 0; color: var(--pricing-ink); font-size: 17px; font-weight: 650; letter-spacing: -.025em; line-height: 1.25; }
    .pricing-card-price { flex: 0 0 auto; text-align: right; }
    .pricing-card-price > span,
    .pricing-card-price > strong,
    .pricing-card-price > del { display: block; }
    .pricing-card-price > span { color: var(--pricing-muted); font-size: 9px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
    .pricing-card-price strong { color: var(--pricing-ink); font-size: 20px; font-weight: 650; letter-spacing: -.035em; line-height: 1.15; font-variant-numeric: tabular-nums; }
    .pricing-card-price del { margin-top: 2px; color: #8793a5; font-size: 10px; }
    .pricing-card-note { margin: 10px 0 0; color: #8a6a28; font-size: 11px; line-height: 1.45; }
    .pricing-card-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; margin: 17px 0 0; border-top: 1px solid #edf1f6; border-bottom: 1px solid #edf1f6; }
    .pricing-card-meta div { min-width: 0; padding: 12px 0; }
    .pricing-card-meta div + div { padding-left: 13px; border-left: 1px solid #edf1f6; }
    .pricing-card-meta dt { color: var(--pricing-muted); font-size: 9px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
    .pricing-card-meta dd { margin: 4px 0 0; color: #3a4962; font-size: 12px; font-variant-numeric: tabular-nums; }
    .pricing-card-footer { margin-top: 14px; }
    .pricing-card-footer a { display: inline-flex; align-items: center; gap: 7px; color: var(--pricing-blue); font-size: 12px; font-weight: 700; text-decoration: none; }
    .pricing-card-footer a svg { flex: 0 0 auto; }
    .pricing-no-results { padding: 36px 22px; border-radius: 17px; }
    .pricing-help-section { padding: 54px 0; }
    .pricing-help-actions { width: 100%; align-items: stretch; flex-direction: column; gap: 13px; }
    .pricing-help-actions .catalog-primary-action { width: 100%; }
}

@media (max-width: 380px) {
    .pricing-hero-summary { grid-template-columns: 1fr; }
    .pricing-hero-summary > div + div { padding: 18px 0 0; border-top: 1px solid var(--pricing-line); border-left: 0; }
    .pricing-hero-summary > div:first-child { padding-bottom: 18px; }
    .pricing-card { padding: 16px; }
    .pricing-card-top { gap: 10px; }
    .pricing-card-price strong { font-size: 18px; }
}

@media (prefers-reduced-motion: reduce) {
    .pricing-search-field,
    .pricing-filter-chip,
    .pricing-data-table tbody tr,
    .pricing-service-cell a { transition: none; }
    .pricing-service-cell a:hover { transform: none; }
}

/* ── About: shared support visual system ─────────────────────────────────── */
.about-page-v2 {
    --about-ink: #15171b;
    --about-muted: #656970;
    --about-line: #e2e4e7;
    --about-blue: #0672df;
    --about-soft: #f5f6f7;
    color: var(--about-ink);
    background: #fff;
}
.about-page-v2 .about-hero {
    padding: clamp(76px, 8vw, 118px) 0;
    background:
        radial-gradient(circle at 86% 4%, rgba(41,151,255,.18), transparent 32%),
        #0c0d10;
    --ink: #fff;
    --muted: rgba(255,255,255,.7);
    --hairline: rgba(255,255,255,.13);
    --surface: rgba(255,255,255,.055);
    --accent: #62adf7;
}
.about-page-v2 .about-breadcrumb { margin-bottom: clamp(38px, 5vw, 66px); color: rgba(255,255,255,.62); }
.about-page-v2 .about-breadcrumb a:hover { color: #fff; }
.about-page-v2 .about-hero-grid { grid-template-columns: minmax(0, 1.12fr) minmax(330px, .88fr); gap: clamp(48px, 7vw, 92px); }
.about-page-v2 .about-hero-copy { max-width: 760px; }
.about-page-v2 .about-hero-copy h1 { max-width: 13ch; color: #fff; font-size: var(--page-h1-size); font-weight: 600; line-height: var(--page-h1-leading); letter-spacing: var(--page-h1-tracking); }
.about-page-v2 .section-eyebrow { margin-bottom: 17px; color: var(--about-blue); font-size: 12px; font-weight: 600; letter-spacing: .13em; }
.about-page-v2 .section-eyebrow::before { display: none; }
.about-page-v2 .about-hero .section-eyebrow { color: #62adf7; }
.about-page-v2 .about-hero-lede { max-width: 650px; margin-top: 25px; color: rgba(255,255,255,.78); font-family: Roboto, sans-serif; font-size: clamp(17px, 1.6vw, 20px); letter-spacing: 0; line-height: 1.68; }
.about-page-v2 .about-rich { color: var(--about-muted); }
.about-page-v2 .about-hero-body { max-width: 630px; margin-top: 20px; color: rgba(255,255,255,.66); font-size: 16px; line-height: 1.68; }
.about-page-v2 .about-hero-body a { color: #8cc4ff; }
.about-page-v2 .about-action { margin-top: 31px; }
.about-page-v2 .about-primary-action,
.about-page-v2 .about-cta-action {
    min-height: 50px;
    padding: 0 20px;
    border: 1px solid var(--about-blue);
    border-radius: 9px;
    gap: 11px;
    background: var(--about-blue);
    box-shadow: none;
    color: #fff;
    font-family: "Poppins", sans-serif;
    font-size: 14px;
    font-weight: 600;
}
.about-page-v2 .about-primary-action:hover,
.about-page-v2 .about-primary-action:focus-visible,
.about-page-v2 .about-cta-action:hover,
.about-page-v2 .about-cta-action:focus-visible { border-color: #005eb8; background: #005eb8; color: #fff; transform: translateY(-1px); }
.about-page-v2 .about-primary-action:focus-visible,
.about-page-v2 .about-cta-action:focus-visible { outline: 3px solid rgba(98,173,247,.35); outline-offset: 3px; }
.about-page-v2 .about-hero-visual {
    min-height: clamp(360px, 39vw, 550px);
    border-color: rgba(255,255,255,.13);
    border-radius: 18px;
    background: rgba(255,255,255,.055);
    box-shadow: 0 30px 80px rgba(0,0,0,.22);
}
.about-page-v2 .about-hero-visual::after { height: 34%; background: linear-gradient(transparent, rgba(0,0,0,.32)); }
.about-page-v2 .about-hero .about-visual-placeholder { color: #62adf7; background: linear-gradient(138deg, rgba(255,255,255,.08), rgba(41,151,255,.1)); }

.about-page-v2 .about-story,
.about-page-v2 .about-process,
.about-page-v2 .about-gallery {
    background: var(--about-soft);
    --ink: var(--about-ink);
    --muted: var(--about-muted);
    --hairline: var(--about-line);
    --surface: #fff;
    --accent: var(--about-blue);
}
.about-page-v2 .about-values { background: #fff; --ink: var(--about-ink); --muted: var(--about-muted); --hairline: var(--about-line); --surface: #fff; --accent: var(--about-blue); }
.about-page-v2 .about-section-header { max-width: 690px; margin-bottom: 31px; }
.about-page-v2 .about-section-header h2 { margin: 0; color: var(--about-ink); font-family: "Poppins", sans-serif; font-size: clamp(30px, 3.4vw, 47px); font-weight: 600; letter-spacing: -.032em; line-height: 1.13; }
.about-page-v2 .about-section-header > p:not(.section-eyebrow) { margin-top: 14px; color: var(--about-muted); font-size: 16px; line-height: 1.65; }
.about-page-v2 .about-story-body { font-size: 16px; line-height: 1.72; }
.about-page-v2 .about-story-visual { border-color: var(--about-line); border-radius: 18px; background: #fff; box-shadow: 0 20px 60px rgba(18,34,51,.055); }
.about-page-v2 .about-story-visual::after { background: linear-gradient(transparent, rgba(18,34,51,.12)); }
.about-page-v2 .about-visual-placeholder { color: var(--about-blue); background: linear-gradient(138deg, #fff, #eef5fc); }
.about-page-v2 .about-highlights li > span { background: #eef5fc; color: var(--about-blue); }
.about-page-v2 .about-highlights strong,
.about-page-v2 .about-value h3,
.about-page-v2 .about-process-step h3 { color: var(--about-ink); }
.about-page-v2 .about-values-grid { gap: 13px; }
.about-page-v2 .about-value { min-height: 218px; border-color: var(--about-line); border-radius: 15px; box-shadow: none; }
.about-page-v2 .about-value:hover { border-color: #b9c9da; box-shadow: 0 18px 45px rgba(18,34,51,.08); transform: translateY(-3px); }
.about-page-v2 .about-value-copy,
.about-page-v2 .about-process-copy { color: var(--about-muted); }
.about-page-v2 .about-process { border-top: 0; }
.about-page-v2 .about-process-list { border-color: var(--about-line); background: #fff; }
.about-page-v2 .about-process-step { min-height: 205px; }
.about-page-v2 .about-process-number { border-color: #b9c9da; color: var(--about-blue); }
.about-page-v2 .about-gallery-figure { border: 1px solid var(--about-line); border-radius: 15px; background: #fff; }
.about-page-v2 .about-gallery-figure figcaption { color: var(--about-muted); }
.about-page-v2 .about-cta {
    padding: clamp(62px, 7vw, 94px) 0;
    background: radial-gradient(circle at 86% 4%, rgba(41,151,255,.18), transparent 32%), #0c0d10;
    --ink: #fff;
    --muted: rgba(255,255,255,.7);
    --accent: #62adf7;
}
.about-page-v2 .about-cta h2 { color: #fff; font-size: clamp(30px, 3.4vw, 47px); line-height: 1.13; }
.about-page-v2 .about-cta .section-eyebrow { color: #62adf7; }
.about-page-v2 .about-cta-layout > div:first-child > p:not(.section-eyebrow),
.about-page-v2 .about-cta-copy { color: rgba(255,255,255,.7); }

@media (max-width: 900px) {
    .about-page-v2 .about-hero-grid { grid-template-columns: minmax(0, 1fr); }
    .about-page-v2 .about-hero-visual { max-width: 620px; }
}
@media (max-width: 600px) {
    .about-page-v2 .about-hero { padding: 62px 0; }
    .about-page-v2 .about-breadcrumb { margin-bottom: 32px; }
    .about-page-v2 .about-hero-grid { gap: 32px; }
    .about-page-v2 .about-hero-lede { margin-top: 19px; font-size: 17px; }
    .about-page-v2 .about-hero-body { margin-top: 16px; font-size: 15px; }
    .about-page-v2 .about-hero-visual { min-height: 280px; }
    .about-page-v2 .about-section-header { margin-bottom: 24px; }
    .about-page-v2 .about-section-header h2,
    .about-page-v2 .about-cta h2 { font-size: clamp(29px, 9vw, 38px); }
    .about-page-v2 .about-section-header > p:not(.section-eyebrow) { font-size: 15px; }
    .about-page-v2 .about-value { min-height: 0; border-radius: 15px; }
    .about-page-v2 .about-value:hover { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .about-page-v2 .about-primary-action,
    .about-page-v2 .about-cta-action,
    .about-page-v2 .about-value { transition: none; }
    .about-page-v2 .about-primary-action:hover,
    .about-page-v2 .about-cta-action:hover,
    .about-page-v2 .about-value:hover { transform: none; }
}

/* ── Pricing: shared support visual system ───────────────────────────────── */
.pricing-page-v2 {
    --pricing-ink: #15171b;
    --pricing-muted: #656970;
    --pricing-blue: #0672df;
    --pricing-line: #e2e4e7;
    --pricing-soft: #f5f6f7;
    background: #fff;
}
.pricing-page-v2 .pricing-hero-shell {
    background:
        radial-gradient(circle at 86% 4%, rgba(41,151,255,.18), transparent 32%),
        #0c0d10;
}
.pricing-page-v2 .catalog-crumbs { color: rgba(255,255,255,.58); }
.pricing-page-v2 .catalog-crumbs a { color: rgba(255,255,255,.72); }
.pricing-page-v2 .catalog-crumbs a:hover { color: #fff; }
.pricing-page-v2 .pricing-hero { padding: clamp(58px, 7vw, 104px) 0 clamp(76px, 8vw, 118px); border-top: 0; background: transparent; }
.pricing-page-v2 .pricing-hero::before { display: none; }
.pricing-page-v2 .pricing-hero-grid { grid-template-columns: minmax(0, 1.12fr) minmax(330px, .88fr); gap: clamp(48px, 7vw, 92px); }
.pricing-page-v2 .pricing-hero-copy { max-width: 760px; }
.pricing-page-v2 .pricing-hero-copy .catalog-kicker { margin-bottom: 17px !important; color: #62adf7 !important; font-size: 12px !important; font-weight: 600; letter-spacing: .13em; }
.pricing-page-v2 .pricing-hero-copy h1 { max-width: 13ch; margin-bottom: 20px; color: #fff; font-size: var(--page-h1-size); font-weight: 600; letter-spacing: var(--page-h1-tracking); line-height: var(--page-h1-leading); }
.pricing-page-v2 .pricing-hero-copy > p:not(.catalog-kicker) { max-width: 650px; margin-bottom: 27px; color: rgba(255,255,255,.7); font-size: clamp(17px, 1.6vw, 20px); line-height: 1.68; }
.pricing-page-v2 .pricing-hero-points li { color: rgba(255,255,255,.78); }
.pricing-page-v2 .pricing-hero-points svg { color: #62adf7; }
.pricing-page-v2 .pricing-hero-summary {
    border-color: rgba(255,255,255,.13);
    border-radius: 18px;
    background: rgba(255,255,255,.055);
    box-shadow: 0 30px 80px rgba(0,0,0,.22);
}
.pricing-page-v2 .pricing-hero-summary > div { border-bottom-color: rgba(255,255,255,.11); }
.pricing-page-v2 .pricing-hero-summary > div + div { border-left-color: rgba(255,255,255,.11); }
.pricing-page-v2 .pricing-hero-summary span,
.pricing-page-v2 .pricing-hero-summary small,
.pricing-page-v2 .pricing-hero-summary > p { color: rgba(255,255,255,.61); }
.pricing-page-v2 .pricing-hero-summary strong { color: #fff; }
.pricing-page-v2 .pricing-directory-section { padding: clamp(62px, 7vw, 94px) 0; background: #fff; }
.pricing-page-v2 .pricing-section-head { margin-bottom: 31px; }
.pricing-page-v2 .pricing-section-head h2,
.pricing-page-v2 .pricing-help-layout h2 { color: var(--pricing-ink); font-size: clamp(30px, 3.4vw, 47px); font-weight: 600; letter-spacing: -.032em; line-height: 1.13; }
.pricing-page-v2 .pricing-section-head > p,
.pricing-page-v2 .pricing-help-layout > div > p:not(.catalog-kicker) { color: var(--pricing-muted); font-size: 16px; line-height: 1.65; }
.pricing-page-v2 .pricing-toolbar,
.pricing-page-v2 .pricing-table-wrap,
.pricing-page-v2 .pricing-no-results { border-color: var(--pricing-line); border-radius: 18px; box-shadow: 0 18px 45px rgba(18,34,51,.055); }
.pricing-page-v2 .pricing-data-table thead { background: #f8faff; }
.pricing-page-v2 .pricing-data-table tbody tr:hover { background: #f8fbff; }
.pricing-page-v2 .pricing-help-section { padding: clamp(62px, 7vw, 94px) 0; border-top: 1px solid var(--pricing-line); background: var(--pricing-soft); }
.pricing-page-v2 .pricing-help-actions .catalog-primary-action { border-radius: 9px; box-shadow: none; }

@media (max-width: 900px) {
    .pricing-page-v2 .pricing-hero-grid { grid-template-columns: minmax(0, 1fr); }
    .pricing-page-v2 .pricing-hero-summary { max-width: 620px; }
}
@media (max-width: 720px) {
    .pricing-page-v2 .pricing-hero { padding: 42px 0 62px; }
    .pricing-page-v2 .pricing-hero-copy > p:not(.catalog-kicker) { margin-bottom: 24px; font-size: 15px; }
    .pricing-page-v2 .pricing-directory-section { padding: 64px 0; }
    .pricing-page-v2 .pricing-help-section { padding: 54px 0; }
}

/* ── Shared page grid ─────────────────────────────────────────────────────
   Every public page uses this outer content boundary. Narrow reading columns
   retain their line length while sharing the same viewport gutter. */
:root {
    --ascbd-page-max-width: 1240px;
    --ascbd-page-gutter: clamp(18px, 3vw, 48px);
}

.page-wrapper .section-inner:not(.section-inner-narrow),
.page-wrapper .sec-inner:not(.section-inner-narrow),
.page-wrapper .catalog-inner,
.page-wrapper .catalog-crumbs,
.page-wrapper .contact-shell,
.page-wrapper .faq-shell {
    box-sizing: border-box;
    width: min(var(--ascbd-page-max-width), calc(100% - (var(--ascbd-page-gutter) + var(--ascbd-page-gutter))));
    max-width: none;
    margin-inline: auto;
    padding-inline: 0;
}

.page-wrapper .section-inner.section-inner-narrow,
.page-wrapper .sec-inner.section-inner-narrow {
    box-sizing: border-box;
    width: min(900px, calc(100% - (var(--ascbd-page-gutter) + var(--ascbd-page-gutter))));
    max-width: none;
    margin-inline: auto;
    padding-inline: 0;
}

/* Legacy Bootstrap pages keep their grid gutters, but now start and end on
   the same outer boundary as the newer pages. Full-bleed containers remain
   intentionally untouched. */
.page-wrapper > section > .container:not(.container-fluid),
.ascbd-footer .container {
    box-sizing: border-box;
    width: min(var(--ascbd-page-max-width), calc(100% - (var(--ascbd-page-gutter) + var(--ascbd-page-gutter))));
    max-width: none;
}

/* Device landing hero — aligned with the Contact page's task-first language. */
.catalog-device-page .catalog-device-hero-v2 {
    padding: clamp(72px, 8vw, 112px) 0;
    background:
        radial-gradient(circle at 86% 5%, rgba(41, 151, 255, .19), transparent 33%),
        #0c0d10;
}
.catalog-device-page .catalog-device-hero-v2::before { display: none; }
.catalog-device-page .catalog-device-hero-grid-v2 {
    min-height: 0;
    grid-template-columns: minmax(0, 1.08fr) minmax(360px, .92fr);
    gap: clamp(48px, 7vw, 92px);
}
.catalog-device-page .catalog-device-hero-copy .catalog-kicker { color: #62adf7; }
.catalog-device-page .catalog-device-hero-copy h1 {
    max-width: 760px;
    margin: 0;
    color: #fff;
    font-size: var(--page-h1-size);
    font-weight: 600;
    line-height: var(--page-h1-leading);
    letter-spacing: var(--page-h1-tracking);
    text-wrap: balance;
}
.catalog-device-page .catalog-device-hero-copy .catalog-lede {
    max-width: 650px;
    margin-top: 25px;
    color: rgba(255, 255, 255, .7);
    font-size: clamp(17px, 1.55vw, 20px);
    line-height: 1.68;
}
.catalog-device-page .catalog-device-hero-copy .catalog-lede :is(p, li) { color: inherit; }
.catalog-device-page .catalog-device-hero-copy .catalog-actions { margin-top: 31px; }
.catalog-device-page .catalog-device-hero-copy .catalog-primary-action {
    min-height: 50px;
    border-radius: 9px;
    background: #0672df;
}
.catalog-device-page .catalog-device-hero-copy .catalog-primary-action:hover { background: #005eb8; }
.catalog-device-page .catalog-device-hero-copy .catalog-text-action { color: rgba(255, 255, 255, .88); }
.catalog-device-page .catalog-device-hero-copy .catalog-text-action:hover { color: #fff; }
.catalog-device-showcase {
    position: relative;
    padding: clamp(18px, 1.8vw, 26px);
    border: 1px solid rgba(255, 255, 255, .13);
    border-radius: 22px;
    background: rgba(255, 255, 255, .055);
    box-shadow: 0 30px 80px rgba(0, 0, 0, .22);
    overflow: hidden;
}
.catalog-device-page .catalog-device-showcase .catalog-device-hero-visual {
    position: relative;
    height: clamp(360px, 32vw, 480px);
    border: 0;
    border-radius: 16px;
    background: radial-gradient(circle at 50% 43%, #fff 0%, #f5f8fc 54%, #e8eef5 100%);
    box-shadow: none;
    overflow: hidden;
}
.catalog-device-page .catalog-device-showcase .catalog-device-hero-visual img {
    position: absolute;
    inset: 0;
    display: block;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    padding: clamp(22px, 2.4vw, 34px);
    object-fit: contain;
    filter: drop-shadow(0 20px 24px rgba(17, 31, 49, .18));
}
.catalog-device-page .catalog-device-showcase .catalog-device-hero-visual--icon > span {
    display: grid;
    place-items: center;
}
.catalog-device-page .catalog-device-showcase .catalog-device-hero-visual--icon svg {
    width: clamp(112px, 11vw, 158px);
    height: auto;
}

@media (max-width: 920px) {
    .catalog-device-page .catalog-device-hero-grid-v2 { grid-template-columns: minmax(0, 1fr); }
    .catalog-device-showcase { max-width: 620px; }
}
@media (max-width: 600px) {
    .catalog-device-page .catalog-device-hero-v2 { padding: 60px 0 64px; }
    .catalog-device-page .catalog-device-hero-grid-v2 { gap: 36px; }
    .catalog-device-page .catalog-device-hero-copy .catalog-actions { display: grid; grid-template-columns: minmax(0, 1fr); }
    .catalog-device-page .catalog-device-hero-copy .catalog-primary-action,
    .catalog-device-page .catalog-device-hero-copy .catalog-text-action { width: 100%; justify-content: center; }
    .catalog-device-showcase { padding: 18px; border-radius: 18px; }
    .catalog-device-page .catalog-device-showcase .catalog-device-hero-visual { height: min(300px, 76vw); border-radius: 13px; }
}

/* ==========================================================================
   PAGE HERO — ONE dark treatment for the whole site
   --------------------------------------------------------------------------
   Every page hero had drifted into its own colour: #0c0d10 on contact and
   about, #101216 on the FAQ, a blue linear-gradient on products, and plain
   white on the services hub, blog, booking and tracking pages. Four answers to
   one question.

   The contact hero is the reference, and it now lives here as tokens. Heroes
   point at these instead of carrying their own values, so the next hero cannot
   quietly invent a fifth shade.
   ========================================================================== */

:root {
    --hero-ink: #0c0d10;
    --hero-glow: radial-gradient(circle at 86% 4%, rgba(41, 151, 255, .18), transparent 32%);
    --hero-on-ink: #fff;
    --hero-on-ink-muted: rgba(255, 255, 255, .7);
    --hero-on-ink-faint: rgba(255, 255, 255, .55);
    --hero-on-ink-line: rgba(255, 255, 255, .12);
    --hero-on-ink-panel: rgba(255, 255, 255, .04);
    /* #0672df measures ~3.2:1 on this ink; the brand blue measures 6.35:1. */
    --hero-on-ink-accent: #2997FF;
    /* …and the reverse on a light card: #2997FF is only ~3:1 on white while
       this one is 4.7:1. Defined HERE, in :root — the old --support-blue is
       scoped to .contact-page-v2/.faq-page-v2, so referencing it from any
       other page silently dropped the declaration and left the text white. */
    --hero-accent-on-light: #0672df;
}

/* The single source of the hero background. Adding a page means adding its
   selector here, not inventing another gradient. */
.contact-hero-v2,
.faq-hero-v2,
.about-page-v2 .about-hero,
.catalog-device-hero-v2,
.product-list-hero,
.catalog-hero,
.catalog-detail-hero,
.blog-hero-section,
.book-hero-section,
.track-order-section {
    background: var(--hero-glow), var(--hero-ink) !important;
}

/* The ink palette for heroes that were LIGHT until now. Written against the
   whole group rather than page by page, so a hero can never end up dark while
   still carrying the light page's text colours — which is exactly what the
   background switch would otherwise produce: navy headings at 1.04:1 on
   near-black, i.e. invisible. */
.catalog-hero,
.catalog-detail-hero,
.blog-hero,
.book-hero,
.track-order-section {
    color: var(--hero-on-ink-muted);
}

.catalog-hero h1, .catalog-hero h2, .catalog-hero h3, .catalog-hero strong,
.catalog-detail-hero h1, .catalog-detail-hero h2, .catalog-detail-hero h3, .catalog-detail-hero strong,
.blog-hero h1, .blog-hero h2, .blog-hero h3, .blog-hero strong,
.book-hero h1, .book-hero h2, .book-hero h3, .book-hero strong, .book-hero label, .book-hero dt,
.track-order-section h1, .track-order-section h2, .track-order-section h3,
.track-order-section strong, .track-order-section label, .track-order-section dt {
    color: var(--hero-on-ink);
}

.catalog-hero p, .catalog-hero small, .catalog-hero li, .catalog-hero dd,
.catalog-detail-hero p, .catalog-detail-hero small, .catalog-detail-hero li, .catalog-detail-hero dd,
.blog-hero p, .blog-hero small, .blog-hero li,
.book-hero p, .book-hero small, .book-hero li, .book-hero dd,
.track-order-section p, .track-order-section small, .track-order-section li, .track-order-section dd {
    color: var(--hero-on-ink-muted);
}

/* Secondary/ghost actions and any hairline that was drawn for a white page. */
.catalog-hero .catalog-text-action,
.catalog-detail-hero .catalog-text-action,
.blog-hero a:not([class]),
.book-hero a:not([class]),
.track-order-section a:not([class]) {
    color: var(--hero-on-ink);
}

.catalog-hero .catalog-hero-assurance,
.catalog-hero [class*="step"],
.catalog-detail-hero [class*="card"],
.book-hero [class*="card"],
.track-order-section [class*="card"] {
    border-color: var(--hero-on-ink-line);
}

/* The eyebrow. #0672df is only ~3.2:1 on this ink — it failed to read on the
   contact and FAQ heroes too, so the brand blue replaces it EVERYWHERE the
   hero is dark rather than only on the pages being converted. 6.35:1. */
.contact-hero-v2 .contact-kicker,
.faq-hero-v2 .faq-kicker,
.about-page-v2 .about-hero .catalog-kicker,
.catalog-device-hero-v2 .catalog-kicker,
.product-list-hero .catalog-kicker,
.catalog-hero .catalog-kicker,
.catalog-detail-hero .catalog-kicker,
.blog-hero .catalog-kicker,
.book-hero .catalog-kicker,
.track-order-section .catalog-kicker,
/* The step numbers on the services hub are bare <span>s inside
   .catalog-hero-assurance, not a class of their own. */
.catalog-hero .catalog-hero-assurance span {
    color: var(--hero-on-ink-accent) !important;
}

/* Track-order specifics. The field captions are <span>s inside their <label>,
   and the step numbers carry their own class, so neither was reached by the
   element rules above. The inputs keep their white fill — a dark hero does not
   make a form field easier to read, and these already measure well. */
.track-order-section label,
.track-order-section label span {
    color: var(--hero-on-ink);
}

.track-order-section .track-help-index {
    color: var(--hero-on-ink-accent) !important;
}

/* A dark hero may still contain a LIGHT card, and the ink rules above would
   paint its contents white — white on a near-white surface, measuring 1:1.
   The service-detail order card is the case in point. Text inside a light card
   keeps the light palette: the surface decides the ink, not the section. */
.catalog-detail-hero .catalog-order-card h1,
.catalog-detail-hero .catalog-order-card h2,
.catalog-detail-hero .catalog-order-card h3,
.catalog-detail-hero .catalog-order-card strong,
.catalog-detail-hero .catalog-order-card dt {
    color: var(--catalog-ink);
}

.catalog-detail-hero .catalog-order-card p,
.catalog-detail-hero .catalog-order-card dd,
.catalog-detail-hero .catalog-order-card small,
.catalog-detail-hero .catalog-order-card li,
.catalog-detail-hero .catalog-order-card .catalog-action-note {
    color: var(--catalog-muted);
}

/* Same principle for the accent: #2997FF is chosen to carry on near-black and
   measures only ~3:1 on a white card, while #0672df measures 4.7:1 there and
   ~3.2:1 on the ink. Each surface gets the blue that reads on it. */
.catalog-detail-hero .catalog-order-card .catalog-kicker {
    color: var(--hero-accent-on-light) !important;
}

/* The booking hero is a full-width band like every other page hero. */
.book-hero-section {
    padding: clamp(76px, 8vw, 118px) 0;
}

.book-hero-section .book-hero { margin: 0; }
.book-hero-section .section-title { color: var(--hero-on-ink); }
.book-hero-section .section-copy { color: var(--hero-on-ink-muted); }
.book-hero-section .section-eyebrow { color: var(--hero-on-ink-accent); }

/* Track-order carries two LIGHT cards inside its now-dark section — the form
   and the help panel. Same rule as the service-detail order card: the surface
   an element sits on decides its ink, not the section around it. Without this
   every line in both cards is white on white. */
.track-order-section .order-track-form label,
.track-order-section .order-track-form label span,
.track-order-section .track-help-card h2,
.track-order-section .track-help-card h3,
.track-order-section .track-help-card strong,
.track-order-section .track-help-card a {
    color: var(--catalog-ink);
}

.track-order-section .track-help-card p,
.track-order-section .track-help-card small,
.track-order-section .track-help-card li,
.track-order-section .order-track-form p,
.track-order-section .order-track-form small {
    color: var(--catalog-muted);
}

/* On a light card the darker blue is the readable one (4.7:1 vs 3.0:1). */
.track-order-section .track-help-card .track-help-index {
    color: var(--hero-accent-on-light) !important;
}

/* Blog hero: same full-width band as the others. */
.blog-hero-section { padding: clamp(64px, 6.5vw, 96px) 0; }
.blog-hero-section .blog-hero { margin: 0; }
.blog-hero-section .section-title { color: var(--hero-on-ink); }
.blog-hero-section .section-copy { color: var(--hero-on-ink-muted); }
.blog-hero-section .section-eyebrow { color: var(--hero-on-ink-accent); }

/* Hairlines that were drawn for a white page. The worst was .catalog-hero's
   own border-top — a near-white 1px rule across the very first row of pixels
   on the page, invisible while the hero was white and glaring once it went
   dark. The reference hero draws its lines in white-alpha instead
   (.contact-expect-card uses rgba(255,255,255,.11)), so these follow. */
.catalog-hero,
.catalog-detail-hero,
.blog-hero-section,
.book-hero-section,
.track-order-section {
    border-top: 0;
}

.catalog-hero .catalog-hero-assurance,
.catalog-hero .catalog-hero-assurance * {
    border-color: var(--hero-on-ink-line);
}