/*
 * Desktop refinement layer.
 *
 * The reference artwork is 1672 x 941 and the base stylesheet intentionally
 * reproduces that scale. This layer keeps the same composition while reducing
 * oversized type, cards and CTAs on desktop. Mobile remains owned by
 * mobile.css and is deliberately untouched here.
 */

/* The source arrow PNG is a large square export; never let its intrinsic
 * canvas become the rendered control size if a narrow-band rule is skipped. */
img[src*="cta-arrow.webp"] {
  max-width: 30px !important;
  max-height: 30px !important;
  object-fit: contain;
}

/* The area headline is already branded by the header; a second floating GRUP
 * mark above the title reads as an accidental duplicate. */
.area-logo { display: none !important; }

@media (min-width: 761px) {
  /* Point both laurels inward without changing their layout box. */
  .result-laurel-left { transform: none; }
  .result-laurel-right { transform: scaleX(-1); }

}

/* Keep the reasons trust banner compact between phone and wide desktop widths.
 * The base tablet rule turns this into a one-column flex stack, which leaves a
 * very tall empty panel and pushes the checks far below the heading. A
 * two-row grid keeps the logo/copy balanced while the three checks always fit
 * on one aligned row. */
@media (min-width: 761px) and (max-width: 1450px) {
  .cashback-banner {
    display: grid;
    grid-template-columns: minmax(180px, .85fr) minmax(0, 1.15fr);
    grid-template-rows: auto auto;
    align-items: center;
    min-width: 0;
    min-height: 180px;
    gap: 14px 22px;
    padding: 18px 24px;
  }

  .cashback-banner .section-logo {
    display: block;
    position: static;
    grid-column: 1;
    grid-row: 1;
    width: min(220px, 100%);
    height: auto;
    margin: 0 auto;
    transform: none;
  }

  .cashback-banner > strong {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    align-self: center;
    font-size: clamp(1.05rem, 2vw, 1.4rem);
    line-height: 1.35;
    text-align: left;
  }

  .cashback-banner > div {
    grid-column: 1 / -1;
    grid-row: 2;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    min-width: 0;
    align-items: stretch;
  }

  .cashback-banner > div span {
    min-width: 0;
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-items: center;
    gap: 0 7px;
    padding: 8px 10px;
    text-align: left;
  }

  .cashback-banner > div span > img {
    position: static;
    grid-row: 1 / 3;
    width: 28px;
    height: 28px;
    margin: 0;
    object-fit: contain;
    transform: none;
  }

  .cashback-banner > div span > b {
    grid-column: 2;
    min-width: 0;
    font-size: clamp(.85rem, 1.4vw, 1.1rem);
    line-height: 1.25;
  }

  .cashback-banner > div span > small {
    grid-column: 2;
    min-width: 0;
    margin-top: 2px;
    font-size: clamp(.68rem, 1.1vw, .86rem);
    line-height: 1.35;
    white-space: normal;
  }
}

@media (min-width: 1451px) {
  :root { --desktop-content: 1420px; }

  .section-services .container-wide,
  .section-pricing .container-wide,
  .section-reasons .container-wide,
  .section-flow .container-wide,
  .section-cases .container-wide,
  .section-area .container-wide,
  .section-contact .container-wide,
  .section-faq .container-wide {
    width: min(var(--desktop-content), calc(100% - 96px));
    max-width: var(--desktop-content);
  }

  /* Header and first view */
  .site-header { height: 100px; }
  .brand img { width: 292px; height: 68px; }
  .main-nav { gap: 26px; }
  .main-nav a { padding-block: 37px 33px; font-size: .88rem; }
  .header-phone {
    min-width: 220px;
    padding-left: 58px;
    align-items: flex-start;
    background-size: 48px 48px;
    text-align: left;
  }
  .header-phone strong { font-size: 1.65rem; }
  .header-contact { min-width: 250px; min-height: 58px; }

  .hero,
  .hero-inner { height: 690px; min-height: 690px; }
  .hero-copy { top: 38px; }
  .hero-kicker { width: 470px; margin-bottom: 22px; font-size: 1.55rem; }
  .hero h1 { font-size: clamp(3.35rem, 3.55vw, 3.7rem); }
  .hero h1 em span { position: relative; top: .055em; }
  .hero-sub { font-size: 1.3rem; }
  .hero-benefits { width: 650px; }
  .hero-benefit { min-height: 76px; }
  .hero-prices { width: 730px; height: 120px; }
  .hero-prices > div { min-height: 118px; }
  .hero-prices > div:nth-child(2) { grid-template-columns: 135px minmax(0, 1fr); }
  .hero-prices > div:nth-child(2) img { transform: translate(5px, -5px); }
  .hero-prices > div:nth-child(2) strong small {
    display: inline-block;
    margin-left: 10px;
  }
  .hero-form-wrap { width: 530px; }
  .quick-form { padding: 33px 26px 22px; }
  .quick-form .button { min-height: 62px; font-size: 1.18rem; }
  .trust-bar { min-height: 105px; }
  .trust-bar p { font-size: 1.18rem; }
  .trust-bar strong { font-size: 1rem; }

  /* Services */
  .section-services { min-height: 840px; }
  .section-services .section-heading h2 {
    font-size: 4.25rem;
    transform: none;
  }
  .section-services .section-lead {
    font-size: 1.25rem;
    transform: translateY(-3px);
  }
  .service-photo,
  .service-card:nth-child(n + 5) .service-photo { height: 150px; }
  .service-card-body,
  .service-card:nth-child(n + 5) .service-card-body {
    min-height: 104px;
    grid-template-columns: 66px 1fr;
  }
  .service-icon { width: 64px; height: 64px; }
  .service-card h3 { font-size: 1.32rem; }
  .service-card p { font-size: .78rem; }
  .section-services .button-centered {
    width: 630px;
    min-height: 74px;
    font-size: 1.48rem;
  }
  .services-cta span { font-size: 1.55rem; transform: none; }

  /* Pricing */
  .section-pricing { min-height: 850px; }
  .pricing-intro { min-height: 310px; }
  .pricing-intro .section-heading h2 {
    font-size: 4.35rem;
    letter-spacing: .06em;
  }
  .pricing-intro .section-lead { font-size: 1.28rem; }
  .price-panels article { min-height: 232px; gap: 32px; padding-block: 20px; }
  .price-panels img { width: 128px; height: 128px; }
  .price-panels article:nth-child(2) > img { width: 154px; height: 154px; }
  .price-panel-battery > img { transform: translate(-18px, -10px) scale(1.15); }
  .price-panel-tow > img { transform: translate(-4px, -10px) scale(1.1); }
  .price-panel-copy h3 { font-size: 1.85rem; }
  .price-main b { font-size: 5.05rem !important; }
  .price-panel-battery .price-main b,
  .price-panel-tow .price-main b { transform: scaleX(1.08); }
  .price-main em { font-size: 1.9rem; }
  .price-main small {
    left: calc(100% + 6px) !important;
    top: 4px;
    display: inline-block;
    min-width: max-content;
    font-size: .68rem;
    line-height: 1;
    white-space: nowrap;
  }
  .price-distance {
    display: flex;
    align-items: baseline;
    gap: 10px;
    white-space: nowrap;
  }
  .price-distance b {
    font-size: 2.65rem;
    line-height: 1;
  }
  .price-distance small {
    font-size: .68rem;
    white-space: nowrap;
  }
  .price-benefit { min-height: 42px; font-size: 1.28rem; }
  .payment-grid article { height: 110px; }
  .payment-grid h3 { font-size: 1.25rem; }
  .payment-grid p { font-size: .88rem; }
  .price-cta { min-height: 78px; font-size: 1.7rem; }
  .price-cta > span { width: auto; font-size: 1.85rem; }

  /* Keep payment-card content centered and contain the brand strip. */
  .payment-grid article {
    min-width: 0;
    overflow: hidden;
    align-items: center;
  }
  .payment-grid article > div {
    min-width: 0;
    transform: none;
  }
  .payment-grid article:nth-child(1) > img { transform: scale(1.15); }
  .payment-grid article:nth-child(2) > img { transform: scale(1.5); }
  .payment-grid article:nth-child(3) > img { transform: scale(1.15); }
  .payment-grid article:nth-child(4) > img { transform: scale(1.12); }
  .payment-card-brands h3 { transform: none; }
  .payment-card-brands > div {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .payment-card-brands .payment-brands {
    position: static;
    width: 100%;
    max-width: 290px;
    height: auto;
    margin: 8px 0 0;
  }

  /* Reasons */
  .section-reasons { min-height: 850px; }
  .section-reasons .section-heading { height: 102px; }
  .section-reasons .section-heading h2 {
    font-size: 4.45rem;
    transform: translateY(5px);
  }
  .section-reasons .section-heading::after {
    left: 0;
    width: min(900px, calc(100% - 120px));
    height: 6px;
  }
  .reason-card { min-height: 286px; }
  .reason-card:nth-child(n + 6) { height: 265px; }
  .reason-card {
    display: flex;
    flex-direction: column;
  }
  .reason-card h3 {
    box-sizing: border-box;
    flex: 0 0 70px;
    min-height: 70px;
    padding-top: 14px;
    font-size: 1.36rem;
  }
  .reason-card-01 h3 strong {
    font-size: 1.85em;
    line-height: 1;
    transform: none;
  }
  .reason-card .reason-icon {
    width: 116px;
    height: 102px;
    margin: 0 auto 4px;
    transform: none;
  }
  .reason-card .reason-photo { height: 104px; }
  .reason-card .reason-brands {
    width: 180px;
    height: 58px;
    margin: 12px auto 8px;
    transform: none;
  }
  .reason-card p {
    min-height: 42px;
    margin-top: auto;
    margin-bottom: 0;
    font-size: .86rem;
    line-height: 1.5;
  }
  .reason-card:nth-child(-n + 5) p,
  .reason-card:nth-child(n + 6) p {
    margin-top: auto;
    transform: none;
  }
  .reason-card:nth-child(n + 6) h3,
  .reason-card-02 h3 {
    transform: none;
  }
  .reason-card-02 h3 {
    flex-basis: 70px;
    padding-top: 14px;
  }
  .cashback-banner { height: 90px; min-height: 90px; }
  /* The scaled check artwork needs a real column so it cannot touch the copy. */
  .cashback-banner > div span {
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 0 8px;
  }

  /* Flow */
  .section-flow { min-height: 850px; }
  .flow-intro { min-height: 325px; }
  .flow-intro::before { height: 350px; }
  .flow-intro .section-heading { width: 670px; padding-top: 86px; }
  .flow-intro .section-heading h2 {
    font-size: 4.45rem;
    transform: translate(-5px, -7px) scaleX(1.03);
  }
  .flow-intro .section-heading h2::after { width: 510px; height: 6px; }
  .flow-intro .section-lead { font-size: 1.3rem; }
  .flow-card { height: 360px; }
  .flow-card > span { width: 64px; font-size: 3.15rem; }
  .flow-card img { width: 140px; height: 124px; }
  .flow-card h3 { font-size: 1.48rem; }
  .flow-card p { font-size: .86rem; }
  .flow-card:not(:last-child)::after { top: 126px; width: 50px; height: 50px; }
  .flow-note { width: 650px; height: 76px; min-height: 76px; font-size: 1.32rem; }
  .flow-note img { width: 65px; height: 60px; }

  /* Cases */
  .section-cases { min-height: 825px; }
  .cases-intro { min-height: 220px; }
  .cases-logo { width: 340px; height: 82px; }
  .cases-intro .section-heading { width: 640px; margin-left: 250px; }
  .cases-intro .section-heading .eyebrow {
    font-size: 1.2rem;
    transform: translate(62px, -7px);
  }
  .cases-intro .section-heading h2 {
    font-size: 5.55rem;
    transform: translate(-5px, -7px);
  }
  .case-card > img { height: 270px; }
  .case-body { min-height: 252px; }
  .case-title { min-height: 82px; gap: 12px; }
  .case-title img { width: 60px; height: 60px; }
  .case-title h3 { font-size: 1.42rem; }
  .case-arrival { min-height: 72px; }
  .case-arrival strong { font-size: 3.15rem; }
  .case-price strong { font-size: 2.9rem; }

  /* Area */
  .section-area { min-height: 880px; }
  .area-grid { min-height: 810px; grid-template-columns: 700px 1fr; }
  .area-grid > div:first-child { padding-top: 145px; }
  .section-area .eyebrow {
    font-size: 1.12rem;
    transform: translate(6px, -18px);
  }
  .section-area .eyebrow::after { width: 320px; }
  .area-grid h2 {
    width: 700px;
    font-size: 6.45rem;
    transform: none;
  }
  .area-lead { font-size: 1.28rem; transform: none; }
  .prefecture-list {
    width: 650px;
    grid-template-columns: repeat(4, 148px);
    gap: 14px 18px;
  }
  .prefecture-list span { min-height: 64px; font-size: 1.38rem; }
  .area-callout { width: 580px; min-height: 94px; margin-top: 38px; }
  .area-callout-icon { width: 64px; height: 64px; transform: none; }
  .area-callout p { font-size: 1.25rem; }
  .area-map-wrap { width: 595px; height: 585px; }
  .area-map-wrap span { font-size: 1.16rem; }
  .area-truck { width: 550px; height: 385px; }
  .area-photo-stack { width: 420px; height: 530px; }

  /* Track record */
  .section-results { min-height: 850px; padding-top: 42px; padding-bottom: 92px; }
  .section-results .section-heading { margin-bottom: 22px; }
  .section-results .section-heading h2 {
    width: 224px;
    border-bottom-width: 6px;
    font-size: 2.15rem;
  }
  .section-results .section-heading .section-lead {
    font-size: 2.35rem;
    transform: none;
  }
  .result-label { font-size: 1.55rem; transform: translateY(-3px); }
  .result-number { min-height: 190px; }
  .result-number::after { bottom: 5px; width: 450px; height: 5px; }
  .result-number strong {
    font-size: 11.25rem;
    transform: translate(10px, -5px) scaleX(1.05);
  }
  .result-number .result-unit {
    font-size: 2rem;
    transform: translate(23px, -4px);
  }
  .result-laurel { top: -36px; width: 158px; height: 258px; }
  .result-laurel-left { left: calc(50% - 375px); transform: none; }
  .result-laurel-right { right: calc(50% - 375px); transform: scaleX(-1); }
  .result-copy { margin-top: 3px; font-size: 1.35rem; transform: none; }
  .result-points {
    top: 522px;
    width: min(1320px, calc(100% - 96px));
    gap: 22px;
  }
  .result-points div { min-height: 160px; padding: 42px 18px 16px; }
  .result-points img {
    top: -53px;
    width: 92px;
    height: 92px;
    transform: translateX(-50%) scale(1.12);
  }
  .result-points b { font-size: 1.34rem; }
  .result-points span { margin-top: 10px; font-size: .88rem; line-height: 1.65; }
  .result-band {
    height: 82px;
    padding: 22px 40px;
    font-size: 1.5rem;
  }

  /* Contact and FAQ */
  .section-contact { min-height: 880px; }
  .contact-heading { height: 172px; min-height: 172px; }
  .contact-heading h2 { font-size: 4.05rem; }
  .contact-heading h2::after { width: min(760px, 100%); height: 6px; }
  .contact-heading p:last-child { font-size: 1.3rem; }
  .contact-copy { min-height: 630px; padding-top: 48px; }
  .contact-form { min-height: 620px; padding: 26px 38px 16px; }
  .contact-form .form-grid {
    grid-template-columns: minmax(0, 1fr) minmax(220px, .78fr);
    column-gap: 24px;
  }
  .contact-form .button { min-height: 74px; margin-top: 24px; font-size: 1.55rem; }

  .section-faq { min-height: 850px; }
  .faq-intro .section-heading { width: 590px; margin-left: 235px; padding-top: 66px; }
  .faq-intro .section-heading h2 { font-size: 4.05rem; }
  .faq-item button { min-height: 58px; font-size: 1.14rem; }
  .faq-item button b { font-size: 1.5rem; }
  .faq-answer p { font-size: .92rem; }
  .faq-more > summary { width: 490px; min-height: 66px; font-size: 1.3rem; }

  /* Footer CTA */
  .footer-company-copy h3 { font-size: 2.6rem; }
  .footer-company-copy > a strong { font-size: 3.2rem; }
  .footer-cta.footer-emergency-cta { max-width: var(--desktop-content); }
  .footer-cta.footer-emergency-cta h2 { font-size: 2.85rem; }
  .footer-cta.footer-emergency-cta .footer-cta-phone b {
    font-size: clamp(3.6rem, 4.3vw, 4.55rem);
  }
}

/* Use the truck scene once as the primary hero, then give each supporting
 * section its own visual cue. Repeating the same city/truck background in
 * every intro made the page feel like one oversized image instead of a
 * sequence of services. */
.faq-truck { display: none !important; }

@media (min-width: 761px) {
  .cases-intro {
    background-image: url("../generated/results-background-ref-v2.webp");
    background-position: center;
    background-size: cover;
  }

  .flow-intro,
  .flow-intro::before {
    background-image: url("../generated/hero-roadservice-ref-v5.webp");
  }

  .faq-intro {
    background-image: radial-gradient(circle at 92% 18%, rgba(203, 234, 10, .15), transparent 36%), linear-gradient(135deg, #f5f7fa 0%, #fff 68%);
  }
}

@media (min-width: 901px) {
  .contact-vehicle {
    background-image: url("../generated/hero-roadservice-v2.webp");
  }

  .footer-company-inner {
    background-image: url("../generated/hero-roadservice.webp");
  }
}

@media (max-width: 760px) {
  .cases-intro {
    background-image: url("../generated/results-background-ref-v2.webp");
  }

  .flow-intro,
  .flow-intro::before {
    background-image: url("../generated/hero-roadservice-ref-v5.webp");
  }

  .faq-intro {
    background-image: radial-gradient(circle at 88% 20%, rgba(203, 234, 10, .12), transparent 42%), linear-gradient(135deg, #f5f7fa 0%, #fff 70%);
  }
}

/* Flow arrows sit in the gap between cards. Give earlier cards a higher
 * stacking level so their arrow remains above the next card's white surface. */
@media (min-width: 1451px) {
  .flow-grid { position: relative; z-index: 2; }
  .flow-card { position: relative; }
  .flow-card:nth-child(1) { z-index: 5; }
  .flow-card:nth-child(2) { z-index: 4; }
  .flow-card:nth-child(3) { z-index: 3; }
  .flow-card:nth-child(4) { z-index: 2; }
  .flow-card:nth-child(5) { z-index: 1; }
  .flow-card:not(:last-child)::after { z-index: 20; pointer-events: none; }
}

/* Keep the public brand marks clean and remove the decorative laurel treatment
 * from the contact stats row. The first two detail-form controls share one
 * explicit box height on tablet and desktop so select/input edges align. */
.contact-brand b,
.faq-brand > b { display: none !important; }

.contact-stats div { background-image: none !important; }

@media (min-width: 761px) {
  .contact-form .form-grid > label:not(.form-full) input,
  .contact-form .form-grid > label:not(.form-full) select {
    height: 68px;
    min-height: 68px;
    box-sizing: border-box;
  }
}

/* Keep the FAQ logo above the heading instead of letting the two blocks
 * collide in the wide layout. All questions remain in the document flow, and
 * the second grid gets a small separation without a “more” accordion. */
.faq-list-more { margin-top: 12px; }

@media (min-width: 1451px) {
  .faq-brand { top: 6px; }
  .faq-intro .section-heading { padding-top: 112px; }
}

/* Give the company block its own readable panel. The former full-width truck
 * background let the address, phone number and service list drift over the
 * vehicle, so the copy now occupies an opaque left column while the scene is
 * reserved for the right side. */
@media (min-width: 1451px) {
  .footer-company-inner {
    min-height: 460px;
    width: 100%;
    max-width: none;
    display: flex;
    align-items: stretch;
    padding: 0;
    background-color: #eef2f6;
    background-image:
      linear-gradient(90deg, #fff 0%, #fff 45%, rgba(255, 255, 255, .94) 54%, rgba(255, 255, 255, .2) 70%, rgba(255, 255, 255, 0) 82%),
      url("../generated/hero-roadservice-v4.webp");
    background-repeat: no-repeat;
    background-position: center, right center;
    background-size: 100% 100%, 68% 100%;
  }

  .footer-company-copy {
    position: relative;
    z-index: 2;
    width: 54%;
    height: auto;
    min-height: 460px;
    padding: 34px 44px 30px 70px;
    background: rgba(255, 255, 255, .98);
    border-right: 1px solid #dce4ed;
    box-shadow: 12px 0 28px rgba(8, 36, 70, .08);
  }

  .footer-company-copy h2,
  .footer-company-copy > img,
  .footer-company-copy h3,
  .footer-company-copy > p,
  .footer-company-copy > a {
    position: static;
    transform: none;
  }

  .footer-company-copy h2 {
    width: 270px;
    margin: 0 0 18px;
    padding-bottom: 9px;
    font-size: 2.2rem;
    line-height: 1.05;
  }

  .footer-company-copy > img {
    display: block;
    width: 300px;
    height: 78px;
    margin: 0 0 8px;
  }

  .footer-company-copy h3 {
    display: block;
    margin: 0 0 12px;
    padding: 0;
    font-size: 2rem;
    line-height: 1.15;
  }

  .footer-company-copy > p.footer-address {
    width: auto;
    margin: 0 0 10px !important;
    padding-left: 31px;
    background-position: left 2px;
    font-size: .98rem !important;
    line-height: 1.55;
  }

  .footer-company-copy > a {
    width: max-content;
    margin: 8px 0 0;
    padding-left: 108px;
    min-height: 60px;
    background-position: left center, 55px center;
  }

  .footer-company-copy > a strong {
    font-size: 3.15rem;
    line-height: 1;
  }

  .footer-company-copy > p.footer-services {
    width: auto;
    margin: 16px 0 0 !important;
    font-size: .95rem !important;
    line-height: 1.45;
    white-space: normal;
  }

  .footer-truck { display: none; }
}

/* Keep the footer hierarchy compact on desktop. The footer is an action area,
 * not a second hero, so the company details and emergency CTA should remain
 * clearly readable without competing with the vehicle image. */
@media (min-width: 761px) {
  .footer-company-copy h2 { font-size: 1.95rem !important; }
  .footer-company-copy h3 { font-size: 1.75rem !important; }
  .footer-company-copy > p.footer-address { font-size: .84rem !important; }
  .footer-company-copy > a strong { font-size: 2.65rem !important; }
  .footer-company-copy > p.footer-services { font-size: .84rem !important; }
  .footer-emergency-cta h2 { font-size: clamp(1.9rem, 2.4vw, 2.45rem) !important; }
  .footer-emergency-cta .footer-cta-phone b { font-size: clamp(2.6rem, 3.1vw, 3.3rem) !important; }
  .footer-emergency-cta .footer-estimate-copy strong { font-size: 1.05rem !important; }
}

/* Tablet hero guardrail.
 * Keep the MV's stacked layout in normal flow so the copy, prices and form
 * cannot be clipped or pushed outside the hero by an earlier desktop rule. */
@media (min-width: 761px) and (max-width: 1024px) {
  .hero {
    height: auto;
    min-height: 0;
  }

  .hero-background {
    min-height: 1120px;
  }

  .hero-inner {
    height: auto;
    min-height: 0;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }

  .hero-copy,
  .hero-form-wrap {
    position: relative;
    inset: auto;
    z-index: 1;
  }
}

/* Medium desktop guardrail: retain the two-column MV without fixed-height
 * clipping when the browser sits between laptop and desktop widths. */
@media (min-width: 1025px) and (max-width: 1450px) {
  .hero,
  .hero-inner {
    height: auto;
    min-height: 720px;
  }

  .hero-copy,
  .hero-form-wrap {
    position: relative;
    inset: auto;
  }
}

/* Tablet legibility pass: the reference cards have generous whitespace, so
 * their artwork needs a larger share of the card to remain recognizable. */
@media (min-width: 761px) and (max-width: 1450px) {
  .hero-benefit img {
    width: 60px;
    height: 60px;
  }

  .reason-card {
    min-height: 292px;
    padding-top: 36px;
  }

  .reason-card h3 {
    font-size: 1.24rem;
  }

  .reason-card img {
    width: 104px;
    height: 98px;
    margin: 7px auto 12px;
  }

  .reason-card .reason-brands {
    width: min(260px, 100%);
    height: 82px;
    margin: 2px auto 10px;
  }

  .reason-card p {
    font-size: .84rem;
  }

  .service-card-body {
    min-height: 132px;
    grid-template-columns: 76px minmax(0, 1fr);
    gap: 14px;
    padding: 13px 17px;
  }

  .service-icon {
    width: 72px;
    height: 72px;
  }

  .service-card h3 {
    font-size: 1.26rem;
  }

  .service-card p {
    font-size: .82rem;
  }

  .payment-grid article {
    min-height: 128px;
    grid-template-columns: 80px minmax(0, 1fr);
    gap: 16px;
    padding: 17px 20px;
  }

  .payment-grid img {
    width: 76px;
    height: 76px;
  }

  .payment-grid h3 {
    font-size: 1.08rem;
  }

  .payment-grid p {
    font-size: .8rem;
  }

  .flow-card img {
    width: 120px;
    height: 120px;
  }

  .case-title img {
    width: 70px;
    height: 70px;
  }

  .contact-stats img {
    width: 62px;
    height: 62px;
  }
}

/* The contact heading is a two-column row on tablet/medium desktop. The
 * intrinsic logo asset is wide, so constrain its flex item before it can
 * crowd the title or push the form below the fold. */
@media (min-width: 901px) and (max-width: 1450px) {
  .contact-heading {
    align-items: flex-start;
    gap: 24px;
  }

  .contact-heading > div:first-child {
    min-width: 0;
    flex: 1 1 auto;
  }

  .contact-brand {
    flex: 0 0 clamp(280px, 30vw, 420px);
    width: clamp(280px, 30vw, 420px);
    max-width: 42%;
    min-width: 0;
    align-items: flex-start;
    justify-content: flex-end;
    overflow: hidden;
  }

  .contact-brand img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 108px;
    object-fit: contain;
  }
}

@media (min-width: 1451px) {
  .section-area .area-grid > div:first-child {
    padding-top: 88px;
  }
}

@media (min-width: 761px) and (max-width: 1024px) {
  /* Two columns preserve a readable card width at tablet sizes. */
  .reason-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .reason-card:last-child {
    grid-column: auto;
  }
}
/*
 * Final brand and layout cleanup.
 *
 * Only the global header and company-information panel carry the GRUP logo.
 * This pass owns the no-logo layouts for the trust banner, headings, FAQ,
 * emergency CTA and footer navigation across tablet and desktop.
 */

/* Reason headings use one typographic scale; explanatory phrases are not
 * visually downgraded just because they sit on a second line. */
.reason-card-07 .reason-heading-line {
  width: 100%;
  flex: 0 0 100%;
  display: block;
  margin-top: 1px;
  font-size: 1em;
  font-weight: 900;
  line-height: 1.2;
}

.reason-card-09 .reason-heading-copy {
  width: 100%;
  display: block;
}

.reason-card-09 .reason-heading-copy strong {
  display: inline;
  margin-left: .18em;
  font-size: 1.06em;
  line-height: inherit;
  vertical-align: baseline;
}

/* The FAQ is one continuous vertical reading path at every width. */
.faq-list {
  width: min(1120px, 100%);
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 12px !important;
  margin-inline: auto;
}

.faq-intro {
  width: 100% !important;
  min-height: 0 !important;
  padding: clamp(34px, 4.5vw, 58px) 0 clamp(28px, 3.6vw, 46px) !important;
}

.faq-intro .section-heading {
  width: min(760px, calc(100% - 32px)) !important;
  margin: 0 auto !important;
  padding: 0 !important;
  text-align: center !important;
}

.faq-intro .section-heading .eyebrow {
  width: max-content;
  display: inline-flex !important;
  margin-inline: auto;
  transform: none !important;
}

.faq-intro .section-heading h2 {
  margin-top: 10px;
  padding: 0 !important;
  border: 0 !important;
  font-size: clamp(2.6rem, 6vw, 4.35rem) !important;
  line-height: 1.08;
  transform: none !important;
  transform-origin: center;
}

.faq-intro .section-heading .section-lead {
  max-width: 680px;
  margin: 16px auto 0;
  text-align: center;
}

/* Both generated intro treatments read from the middle; remove the legacy
 * fixed left offsets and display-type stretching. */
.cases-intro .section-heading {
  width: min(760px, calc(100% - 32px)) !important;
  margin: 0 auto !important;
  padding: clamp(34px, 4vw, 48px) 0 0 !important;
  text-align: center !important;
}

.cases-intro .section-heading .eyebrow {
  width: max-content;
  display: inline-flex !important;
  margin-inline: auto;
  justify-content: center;
  transform: none !important;
  transform-origin: center;
}

.cases-intro .section-heading .eyebrow::before,
.cases-intro .section-heading .eyebrow::after {
  margin-inline: 12px !important;
  transform: none !important;
}

.cases-intro .section-heading h2 {
  margin: 12px auto 0 !important;
  font-size: clamp(3.1rem, 6vw, 5.45rem) !important;
  line-height: 1 !important;
  text-align: center !important;
  transform: none !important;
  transform-origin: center;
}

/* Removing the contact logo also removes its phantom right column. */
.contact-heading > div:first-child {
  width: 100%;
  max-width: none;
  flex: 1 1 100%;
}

/* Payment-card content is centered as a complete unit, including the static
 * card-brand strip. Scale stays intentional, vertical translation does not. */
@media (min-width: 761px) {
  .payment-grid article {
    align-content: center;
    align-items: center;
    grid-template-rows: minmax(0, 1fr);
  }

  .payment-grid article > img,
  .payment-grid article > div {
    align-self: center;
  }

  .payment-grid article:nth-child(1) > img { transform: scale(1.15); }
  .payment-grid article:nth-child(2) > img { transform: scale(1.42); }
  .payment-grid article:nth-child(3) > img { transform: scale(1.15); }
  .payment-grid article:nth-child(4) > img { transform: scale(1.1); }

  .payment-grid article:nth-child(-n + 3) > div,
  .payment-card-brands h3 {
    transform: none !important;
  }

  .payment-card-brands > div {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .payment-card-brands .payment-brands {
    position: static !important;
    width: min(100%, 290px) !important;
    height: auto !important;
    max-height: 50px;
    margin: 8px 0 0 !important;
    object-fit: contain;
    object-position: left center;
  }

  .reason-card-07 h3 {
    min-height: 84px;
    flex-basis: 84px;
    padding-top: 8px;
  }

  /* No logo column remains in the trust banner on tablet/medium desktop. */
  .cashback-banner {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto auto;
    min-height: 158px;
    gap: 13px !important;
  }

  .cashback-banner > strong {
    grid-column: 1 !important;
    grid-row: 1 !important;
    text-align: center !important;
  }

  .cashback-banner > div {
    grid-column: 1 !important;
    grid-row: 2 !important;
  }

  /* A restrained navy action panel gives phone and estimate equal clarity
   * without turning the footer into another oversized hero. */
  .footer-cta.footer-emergency-cta {
    width: min(1440px, calc(100% - 64px)) !important;
    max-width: none !important;
    min-height: 0;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
    align-items: center;
    margin: 34px auto 24px;
    padding: 24px 26px 26px !important;
    border: 0 !important;
    border-top: 6px solid var(--lime) !important;
    border-radius: 15px !important;
    color: #fff !important;
    background: linear-gradient(135deg, #031a3d 0%, #082d5c 100%) !important;
    box-shadow: 0 16px 34px rgba(3, 26, 61, .2) !important;
  }

  .footer-cta.footer-emergency-cta h2 {
    margin: 0 !important;
    color: #fff;
    text-align: center;
    font-family: "Hiragino Sans W9", "Hiragino Sans", "Hiragino Kaku Gothic ProN", sans-serif;
    font-size: clamp(1.55rem, 2.4vw, 2.15rem) !important;
    font-style: normal;
    line-height: 1.3;
    letter-spacing: -.02em;
    transform: none;
  }

  .footer-cta.footer-emergency-cta h2 span {
    display: inline;
    margin: 0;
  }

  .footer-cta.footer-emergency-cta h2 em {
    color: var(--lime);
    font-style: normal;
  }

  .footer-cta.footer-emergency-cta > .footer-cta-row {
    display: grid;
    grid-template-columns: minmax(170px, .72fr) minmax(280px, 1.2fr);
    gap: 12px;
    align-items: stretch;
  }

  .footer-cta.footer-emergency-cta .footer-estimate-cta {
    grid-column: 1 / -1;
  }

  .footer-cta.footer-emergency-cta .footer-24,
  .footer-cta.footer-emergency-cta .footer-cta-phone,
  .footer-cta.footer-emergency-cta .footer-estimate-cta {
    min-height: 80px;
    border-radius: 11px;
  }

  .footer-cta.footer-emergency-cta .footer-24 {
    border: 1px solid rgba(255, 255, 255, .26);
    color: #fff;
    background: rgba(255, 255, 255, .07);
  }

  .footer-cta.footer-emergency-cta .footer-24-copy {
    color: #fff;
  }

  .footer-cta.footer-emergency-cta .footer-24-copy small {
    color: #dce6f2;
  }

  .footer-cta.footer-emergency-cta .footer-24-icon,
  .footer-cta.footer-emergency-cta .footer-phone-icon {
    width: 58px;
    height: 58px;
    flex-basis: 58px;
  }

  .footer-cta.footer-emergency-cta .footer-cta-phone {
    grid-template-columns: 58px minmax(0, 1fr);
    border-width: 2px;
  }

  .footer-cta.footer-emergency-cta .footer-cta-phone b {
    font-size: clamp(2.25rem, 4vw, 3.45rem) !important;
  }

  .footer-cta.footer-emergency-cta .footer-estimate-icon {
    width: 50px;
    height: 50px;
  }

  .footer-cta.footer-emergency-cta .footer-estimate-copy strong {
    font-size: 1rem !important;
  }

  /* Footer navigation supports scanning; it must never compete with CTAs. */
  .footer-main {
    justify-content: center;
    gap: 44px;
    padding: 20px 0;
  }

  .footer-brand p {
    margin: 0;
    font-size: .82rem;
  }

  .footer-main nav {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px 24px;
  }

  .footer-main nav a {
    font-size: .74rem;
  }

  .footer-disclosures summary,
  .footer-legal-card strong {
    font-size: .76rem;
  }

  .footer-disclosures p,
  .footer-legal-card span {
    font-size: .68rem;
  }

  .footer-bottom {
    min-height: 58px !important;
    gap: 20px;
    padding: 0 max(24px, calc((100vw - 1420px) / 2)) !important;
    font-size: .72rem !important;
  }

  .footer-bottom small {
    font-size: .68rem;
    transform: none !important;
  }
}

@media (min-width: 1025px) {
  .cashback-banner {
    grid-template-columns: minmax(290px, .82fr) minmax(0, 2.25fr) !important;
    grid-template-rows: minmax(0, 1fr);
    min-height: 90px;
  }

  .cashback-banner > strong {
    grid-column: 1 !important;
    grid-row: 1 !important;
    text-align: center !important;
  }

  .cashback-banner > div {
    grid-column: 2 !important;
    grid-row: 1 !important;
  }

  .footer-cta.footer-emergency-cta {
    grid-template-columns: minmax(235px, .72fr) minmax(0, 2.25fr);
    gap: 24px;
    padding: 24px 28px !important;
  }

  .footer-cta.footer-emergency-cta h2 {
    text-align: left;
  }

  .footer-cta.footer-emergency-cta h2 span {
    display: block;
  }

  .footer-cta.footer-emergency-cta > .footer-cta-row {
    grid-template-columns: minmax(160px, .66fr) minmax(280px, 1.15fr) minmax(245px, .95fr);
  }

  .footer-cta.footer-emergency-cta .footer-estimate-cta {
    grid-column: auto;
  }
}

@media (min-width: 1025px) and (max-width: 1450px) {
  .footer-cta.footer-emergency-cta .footer-cta-phone b {
    font-size: clamp(2.2rem, 3.2vw, 3rem) !important;
    letter-spacing: 0;
  }
}

@media (max-width: 760px) {
  .reason-card-07 .reason-heading-line {
    font-size: 1em;
  }

  .reason-card-09 .reason-heading-copy strong {
    margin-left: .12em;
  }

  .cases-intro .section-heading {
    padding-top: 28px !important;
  }

  .cases-intro .section-heading .eyebrow {
    font-size: .72rem !important;
  }

  .cases-intro .section-heading h2 {
    font-size: clamp(2.65rem, 14vw, 3.65rem) !important;
  }

  .faq-intro {
    padding: 30px 0 26px !important;
  }

  .faq-intro .section-heading h2 {
    font-size: clamp(2.45rem, 12vw, 3.25rem) !important;
  }

  .faq-intro .section-heading .section-lead {
    margin-top: 12px;
    font-size: .76rem;
    line-height: 1.65;
  }
}

@media (min-width: 1451px) {
  .cashback-banner {
    grid-template-columns: minmax(430px, 1fr) minmax(0, 2.2fr) !important;
  }

  .cashback-banner > strong {
    font-size: 1.25rem;
    white-space: nowrap;
  }
}
/*
 * FAQ answer and pricing-card polish.
 * Answers follow their content height, while the price amount, unit and tax
 * label stay together as one typographic unit.
 */
.faq-answer p {
  min-height: 0 !important;
}

@media (min-width: 761px) and (max-width: 1450px) {
  .faq-answer p {
    min-height: 0 !important;
    padding: 13px 20px 15px;
  }
}

@media (min-width: 1451px) {
  .faq-answer p {
    min-height: 0 !important;
    display: block;
    padding: 12px 24px 14px 60px !important;
  }

  .faq-list-primary .faq-item:nth-child(n) .faq-answer p {
    min-height: 0 !important;
  }
}

@media (max-width: 760px) {
  .faq-answer p {
    min-height: 0 !important;
  }
}

@media (min-width: 761px) {
  .price-panels article,
  .price-panels article:nth-child(2) {
    min-height: 220px;
    display: grid;
    grid-template-columns: clamp(108px, 10vw, 148px) minmax(0, 1fr);
    align-items: center;
    justify-content: stretch;
    gap: clamp(20px, 2.5vw, 38px);
    padding: 28px clamp(24px, 3.2vw, 48px);
  }

  .price-panel-battery {
    box-shadow: inset 0 5px 0 var(--lime);
  }

  .price-panel-tow {
    box-shadow: inset 0 5px 0 var(--navy);
  }

  .price-panels .price-panel > img {
    width: clamp(112px, 9vw, 138px) !important;
    height: clamp(112px, 9vw, 138px) !important;
    justify-self: center;
    padding: 12px;
    border-radius: 16px;
    background: #f4f7fa;
    transform: none !important;
  }

  .price-panels article.price-panel-tow > img {
    width: clamp(132px, 10vw, 158px) !important;
    height: clamp(132px, 10vw, 158px) !important;
    padding: 10px;
  }

  .price-panel-copy {
    width: min(360px, 100%);
    min-width: 0;
    display: grid;
    align-content: center;
    justify-self: start;
    transform: none !important;
  }

  .price-panel-copy h3 {
    margin: 0 0 9px;
    font-size: clamp(1.45rem, 1.8vw, 1.85rem);
    line-height: 1.2;
    transform: none !important;
  }

  .price-main {
    position: static !important;
    width: 100%;
    display: flex !important;
    flex-wrap: nowrap;
    align-items: baseline;
    gap: 0 !important;
    line-height: 1;
    white-space: nowrap;
    transform: none !important;
  }

  .price-main b,
  .price-panel-battery .price-main b,
  .price-panel-tow .price-main b {
    margin: 0;
    font-size: clamp(3.45rem, 5vw, 5rem) !important;
    line-height: .94 !important;
    letter-spacing: -.025em;
    transform: none !important;
  }

  .price-main em {
    margin-left: 2px;
    padding: 0;
    font-size: clamp(1.25rem, 2vw, 1.8rem);
    line-height: 1;
    font-style: normal;
  }

  .price-main small {
    position: static !important;
    inset: auto !important;
    min-width: 0;
    align-self: center;
    margin-left: 7px;
    padding: 3px 7px;
    border-radius: 999px;
    color: var(--muted);
    background: var(--soft);
    font-size: .62rem;
    line-height: 1;
    white-space: nowrap;
  }

  .price-benefit,
  .price-distance {
    box-sizing: border-box;
    width: min(320px, 100%);
    height: 44px;
    min-height: 44px;
    margin: 13px 0 0 !important;
    transform: none !important;
  }

  .price-benefit {
    display: flex !important;
    align-items: center;
    justify-content: center;
    padding: 7px 14px !important;
    border: 1px solid rgba(221, 2, 16, .55);
    border-left: 4px solid var(--red);
    border-radius: 7px;
    background: rgba(221, 2, 16, .025);
    font-size: 1.08rem;
    letter-spacing: .12em;
  }

  .price-distance {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 5px;
    padding: 6px 12px;
    border: 1px solid #cbd6e4;
    border-left: 4px solid var(--red);
    border-radius: 7px;
    color: var(--navy);
    background: #f6f8fb;
    white-space: nowrap;
  }

  .price-distance span {
    margin: 0;
    padding: 0;
    border: 0;
    color: var(--navy);
    font-size: 1.18rem;
  }

  .price-distance b {
    color: var(--red);
    font-size: 1.95rem;
    line-height: 1;
    transform: none;
  }

  .price-distance small {
    margin-left: 2px;
    color: var(--muted);
    font-size: .62rem;
    white-space: nowrap;
  }
}

@media (min-width: 761px) and (max-width: 1024px) {
  .price-panels article,
  .price-panels article:nth-child(2) {
    min-height: 200px;
    grid-template-columns: 116px minmax(0, 360px);
    justify-content: center;
    padding: 24px clamp(24px, 8vw, 70px);
  }
}

/*
 * Reasons closing panel.
 * Treat this as a conversion-oriented trust statement, not a bordered data
 * table: one confident headline and three compact proof cards on navy.
 */
.cashback-banner {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(300px, .9fr) minmax(0, 2fr) !important;
  grid-template-rows: auto !important;
  align-items: stretch !important;
  gap: 0 !important;
  margin-top: clamp(22px, 2vw, 32px) !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 16px;
  color: #fff !important;
  background: linear-gradient(135deg, #021a3d 0%, #062d58 56%, #031e43 100%) !important;
  box-shadow: 0 18px 42px rgba(2, 20, 48, .18);
  text-align: left !important;
}

.cashback-banner::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background:
    radial-gradient(circle at 12% 50%, rgba(193, 238, 0, .14), transparent 31%),
    linear-gradient(115deg, rgba(255, 255, 255, .045), transparent 45%);
  pointer-events: none;
}

.cashback-banner::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 5px;
  background: var(--lime);
  pointer-events: none;
}

.cashback-banner > strong {
  min-width: 0;
  display: flex !important;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  grid-column: 1 !important;
  grid-row: 1 !important;
  margin: 0;
  padding: 34px 36px 30px !important;
  border-right: 1px solid rgba(255, 255, 255, .17);
  color: #fff;
  font-size: clamp(1.28rem, 1.75vw, 1.72rem) !important;
  line-height: 1.42;
  letter-spacing: .025em;
  text-align: left !important;
  white-space: normal !important;
}

.cashback-banner > strong::before {
  content: "TRUST & QUALITY";
  display: block;
  margin-bottom: 9px;
  color: var(--lime);
  font-size: .68rem;
  font-weight: 900;
  line-height: 1;
  letter-spacing: .2em;
}

.cashback-banner > div {
  min-width: 0;
  display: grid !important;
  grid-column: 2 !important;
  grid-row: 1 !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  align-items: stretch !important;
  gap: 12px !important;
  padding: 20px 22px !important;
}

.cashback-banner > div span {
  min-width: 0;
  display: grid !important;
  grid-template-columns: 40px minmax(0, 1fr) !important;
  grid-template-rows: auto auto !important;
  align-content: center;
  align-items: center !important;
  justify-content: stretch !important;
  gap: 2px 10px !important;
  padding: 15px 14px !important;
  border: 1px solid rgba(255, 255, 255, .16) !important;
  border-radius: 11px;
  background: rgba(255, 255, 255, .075);
  text-align: left !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
}

.cashback-banner > div span + span {
  border-left: 1px solid rgba(255, 255, 255, .16) !important;
}

.cashback-banner > div span > img {
  position: static !important;
  grid-column: 1 !important;
  grid-row: 1 / 3 !important;
  width: 34px !important;
  height: 34px !important;
  margin: 0 !important;
  object-fit: contain;
  transform: none !important;
}

.cashback-banner > div span > b {
  grid-column: 2 !important;
  grid-row: 1 !important;
  color: #fff;
  font-size: clamp(.96rem, 1.15vw, 1.14rem) !important;
  font-weight: 900 !important;
  line-height: 1.25;
  letter-spacing: .02em;
}

.cashback-banner > div span > small {
  grid-column: 2 !important;
  grid-row: 2 !important;
  margin: 1px 0 0 !important;
  color: #cbd8e8 !important;
  font-size: clamp(.7rem, .8vw, .8rem) !important;
  line-height: 1.35;
  white-space: normal;
}

@media (min-width: 761px) and (max-width: 1100px) {
  .cashback-banner {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
  }

  .cashback-banner > strong {
    grid-column: 1 !important;
    grid-row: 1 !important;
    align-items: center;
    padding: 26px 28px 18px !important;
    border-right: 0;
    text-align: center !important;
  }

  .cashback-banner > div {
    grid-column: 1 !important;
    grid-row: 2 !important;
    padding: 0 18px 20px !important;
  }
}

@media (max-width: 760px) {
  .cashback-banner {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    margin-top: 18px !important;
    border-radius: 14px;
  }

  .cashback-banner > strong {
    grid-column: 1 !important;
    grid-row: 1 !important;
    align-items: center;
    padding: 24px 18px 15px !important;
    border-right: 0;
    font-size: 1.08rem !important;
    line-height: 1.45;
    text-align: center !important;
  }

  .cashback-banner > strong::before {
    margin-bottom: 8px;
    font-size: .6rem;
  }

  .cashback-banner > div {
    grid-column: 1 !important;
    grid-row: 2 !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
    padding: 0 12px 14px !important;
  }

  .cashback-banner > div span {
    min-height: 60px;
    grid-template-columns: 34px minmax(0, 1fr) !important;
    gap: 1px 10px !important;
    padding: 10px 13px !important;
    border-radius: 9px;
  }

  .cashback-banner > div span > img {
    width: 28px !important;
    height: 28px !important;
  }

  .cashback-banner > div span > b {
    font-size: .9rem !important;
  }

  .cashback-banner > div span > small {
    font-size: .7rem !important;
  }
}