/* The new paid pages retain the service layout with room for the longer headlines. */
body.jg-paid-dog-door-exact .glass-service-hero h1,
body.jg-paid-cat-door-exact .glass-service-hero h1,
body.jg-paid-shopfront-glass-repair-exact .glass-service-hero h1,
body.jg-emergency-glass-replacement-exact .glass-service-hero h1 {
    font-size: clamp(2.45rem, 5.35vw, 4.6rem);
    max-width: 15ch;
}

.glass-service-hero h1 {
    line-height: calc(1em + 7px);
}

body.jg-emergency-glass-replacement-exact {
    --emergency-ink: #292125;
    --emergency-muted: #5b5053;
    --emergency-red: #a12636;
    --emergency-red-dark: #7e1c2a;
    --emergency-wine: #3b1b24;
    --emergency-paper: #f8f5f4;
    --emergency-rose: #f5e8e8;
    --emergency-border: #ded1d3;
    --emergency-on-dark: #f8e7e8;
}

/* Translate the service layout's colour tokens within this page only. */
body.jg-emergency-glass-replacement-exact :is(main, .glass-service-mobile-cta) {
    --navy: var(--emergency-ink);
    --blue: var(--emergency-red);
    --blue-text: var(--emergency-red-dark);
    --muted: var(--emergency-muted);
    --paper: var(--emergency-paper);
    --line: var(--emergency-border);
}

body.jg-emergency-glass-replacement-exact .glass-service-hero {
    background:
        linear-gradient(90deg, #29161cfa 0%, #352026e8 41%, #3823298c 68%, #35242b33 100%),
        var(--service-hero-image) var(--service-hero-position, center) / cover no-repeat;
}

body.jg-emergency-glass-replacement-exact .glass-service-hero-subtitle {
    color: var(--emergency-on-dark);
}

body.jg-emergency-glass-replacement-exact :is(.glass-service-call-icon, .glass-service-hero-promise-icon) {
    color: var(--emergency-red-dark);
    background: var(--emergency-rose);
}

body.jg-emergency-glass-replacement-exact .glass-service-hero-promise-icon {
    border-radius: 50%;
}

body.jg-emergency-glass-replacement-exact .glass-service-hero-review-avatar {
    border-color: var(--emergency-rose);
}

body.jg-emergency-glass-replacement-exact :is(
    .glass-service-primary-button[href^="tel:"],
    .glass-service-mobile-cta a[href^="tel:"],
    .glass-service-final-actions > a[href^="tel:"]:not(.button)
) {
    color: #fff;
    background: var(--emergency-red);
    border-color: var(--emergency-red);
}

body.jg-emergency-glass-replacement-exact :is(
    .glass-service-primary-button[href^="tel:"],
    .glass-service-mobile-cta a[href^="tel:"],
    .glass-service-final-actions > a[href^="tel:"]:not(.button)
):is(:hover, :focus-visible) {
    color: #fff;
    background: var(--emergency-red-dark);
    border-color: var(--emergency-red-dark);
}

body.jg-emergency-glass-replacement-exact :is(
    .glass-service-overview,
    .glass-service-faq
) {
    background: #fff;
}

body.jg-emergency-glass-replacement-exact .glass-service-offer {
    background: var(--emergency-rose);
    border-left-color: var(--emergency-red);
}

body.jg-emergency-glass-replacement-exact :is(.glass-service-offer-list li, .glass-service-symptom-list li) > span {
    background: #fff;
    border-color: var(--emergency-border);
    color: var(--emergency-red-dark);
    box-shadow: none;
}

body.jg-emergency-glass-replacement-exact .glass-service-steps article > span {
    color: var(--emergency-red-dark);
}

body.jg-emergency-glass-replacement-exact .glass-service-options {
    background: var(--emergency-paper);
    color: var(--emergency-ink);
    border-top: 1px solid var(--emergency-border);
}

body.jg-emergency-glass-replacement-exact :is(.glass-service-options-copy h2, .glass-service-option-list h3) {
    color: var(--emergency-ink);
}

body.jg-emergency-glass-replacement-exact :is(
    .glass-service-options-copy > p:not(.section-kicker),
    .glass-service-option-list p
) {
    color: var(--emergency-muted);
}

body.jg-emergency-glass-replacement-exact .glass-service-options-copy .section-kicker {
    color: var(--emergency-red-dark);
}

body.jg-emergency-glass-replacement-exact .glass-service-option-list article {
    background: #fff;
    border-color: var(--emergency-border);
}

body.jg-emergency-glass-replacement-exact .glass-service-options-visual::after {
    background: linear-gradient(transparent 45%, #27171bd9);
}

body.jg-emergency-glass-replacement-exact .jg-reviews {
    --jg-reviews-ink: var(--emergency-ink);
    --jg-reviews-blue: var(--emergency-red-dark);
    --jg-reviews-muted: var(--emergency-muted);
    background: var(--emergency-paper);
}

body.jg-emergency-glass-replacement-exact :is(
    .glass-service-overview .glass-service-primary-button,
    .glass-service-process .glass-service-primary-button,
    .glass-service-why .glass-service-primary-button,
    .glass-service-offer-button,
    .glass-service-mobile-cta a:last-child,
    .footer-quote-button
) {
    color: var(--emergency-ink);
    background: #fff;
    border: 1px solid var(--emergency-border);
    box-shadow: none;
}

body.jg-emergency-glass-replacement-exact :is(
    .glass-service-overview .glass-service-primary-button,
    .glass-service-process .glass-service-primary-button,
    .glass-service-why .glass-service-primary-button,
    .glass-service-offer-button,
    .glass-service-mobile-cta a:last-child,
    .footer-quote-button
):is(:hover, :focus-visible) {
    color: var(--emergency-red-dark);
    background: var(--emergency-paper);
    border-color: var(--emergency-red-dark);
}

body.jg-emergency-glass-replacement-exact :is(
    .glass-service-offer-phone,
    .glass-service-why-actions a[href^="tel:"]:not(.button),
    .footer-phone strong
) {
    color: var(--emergency-red-dark);
}

body.jg-emergency-glass-replacement-exact .glass-service-final-cta {
    background: var(--emergency-wine);
}

body.jg-emergency-glass-replacement-exact .glass-service-final-cta :is(.section-kicker, small) {
    color: var(--emergency-on-dark);
}

body.jg-emergency-glass-replacement-exact .glass-service-final-actions > a[href^="tel:"]:not(.button) {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    border-radius: 999px;
    padding: 14px 22px;
}

body.jg-emergency-glass-replacement-exact .glass-service-final-actions .button-light {
    color: #fff;
    background: transparent;
    border: 1px solid #f8e7e89e;
    box-shadow: none;
}

body.jg-emergency-glass-replacement-exact .glass-service-final-actions .button-light:is(:hover, :focus-visible) {
    color: var(--emergency-ink);
    background: var(--emergency-on-dark);
}

body.jg-emergency-glass-replacement-exact .site-footer {
    border-top: 1px solid var(--emergency-border);
}

body.jg-emergency-glass-replacement-exact [data-jg-mobile-header] .jg-mobile-actions > .jg-mobile-actions__call {
    color: #fff;
    background: var(--emergency-red);
}

body.jg-emergency-glass-replacement-exact .jg-mobile-actions__phone {
    color: var(--emergency-red-dark);
}

body.jg-emergency-glass-replacement-exact [data-jg-mobile-header] .jg-mobile-actions > a:not(.jg-mobile-actions__call) {
    background: var(--emergency-paper);
}

@media (max-width: 600px) {
    body.jg-paid-dog-door-exact .glass-service-hero h1,
    body.jg-paid-cat-door-exact .glass-service-hero h1,
    body.jg-paid-shopfront-glass-repair-exact .glass-service-hero h1,
    body.jg-emergency-glass-replacement-exact .glass-service-hero h1 {
        font-size: clamp(2rem, 9vw, 3.05rem);
    }
}

body .glass-service-hero .glass-service-hero-subtitle {
    color: #5ed0ff;
    font-weight: 600;
}

.glass-service-page .glass-service-symptom-list li > .glass-service-symptom-emoji {
    background: none;
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
    font-size: 28px;
    line-height: 1;
}

@media (max-width: 560px) {
    body.jg-emergency-glass-replacement-exact .glass-service-hero {
        background: var(--emergency-paper);
    }

    body.jg-emergency-glass-replacement-exact .glass-service-hero-subtitle {
        color: var(--emergency-red-dark);
    }

    body .glass-service-hero .glass-service-hero-subtitle {
        color: #00215e;
        font-size: 22px;
        line-height: 1.36;
    }
}

body:is(.jg-pet-doors-exact, .jg-paid-dog-door-exact, .jg-paid-cat-door-exact) .glass-service-process-visual {
    aspect-ratio: 2 / 1;
}

/* Leave room for the main action when the regional name makes the title longer. */
body[data-jg-paid-market="brisbane"] .glass-service-hero h1 {
    font-size: clamp(2.35rem, 4.4vw, 3.65rem);
    max-width: 18ch;
}

@media (max-width: 600px) {
    body[data-jg-paid-market="brisbane"] .glass-service-hero h1 {
        font-size: clamp(1.8rem, 8vw, 2.55rem);
    }
}