/* Repair Services page
   Reuses global tokens (--orange, --panel, --muted, --text-body,
   --heading-section, --shadow, --radius) and existing components
   (.hero, .hero-copy, .hero-actions, .button, .section-heading,
   .service-card, .text-link, .centered-heading) established on the
   Home page. Only new, page-specific classes are introduced below. */

   /* Highlight strip */
   .repair-highlights {
       padding-block: 8px 76px;
   }

   .highlight-strip {
       display: grid;
       grid-template-columns: repeat(3, 1fr);
       gap: 0;
       margin: 0;
       padding: 30px 34px;
       list-style: none;
       border: 1px solid rgba(255, 255, 255, .025);
       border-radius: var(--radius);
       background: var(--panel);
       box-shadow: var(--shadow);
   }

   .highlight-item {
       display: flex;
       align-items: flex-start;
       gap: 16px;
       padding-inline: 30px;
       border-left: 1px solid var(--line);
   }

   .highlight-item:first-child {
       padding-left: 0;
       border-left: 0;
   }

   .highlight-item:last-child {
       padding-right: 0;
   }

   .highlight-copy strong {
       display: block;
       font-size: .9375rem;
       font-weight: 750;
       letter-spacing: .02em;
       text-transform: uppercase;
   }

   .highlight-copy p {
       margin: 6px 0 0;
       color: var(--muted);
       font-size: .875rem;
       line-height: 1.45;
   }

   /* Devices We Support */
   .devices-support-section {
       padding-bottom: 76px;
   }

   .devices-support-section .section-heading {
       text-align: center;
   }

   .support-grid {
       display: grid;
       grid-template-columns: repeat(4, 1fr);
       gap: 20px;
       margin: 34px auto 0;
       max-width: 1280px;
   }

   .support-card {
       display: flex;
       flex-direction: column;
       align-items: center;
       gap: 4px;
       min-height: 250px;
       padding: 28px;
       text-align: center;
       border: 1px solid transparent;
       transition: transform .35s cubic-bezier(.22, 1, .36, 1),
                   box-shadow .35s cubic-bezier(.22, 1, .36, 1),
                   border-color .35s ease,
                   background-color .35s ease;
   }

   .support-card:hover {
       transform: translateY(-7px);
       border-color: rgba(255, 59, 10, .4);
       background-color: #1b2745;
       box-shadow: 0 22px 44px rgba(0, 0, 0, .3);
   }

   .support-icon {
       width: 38px;
       height: 38px;
       margin: 0 auto 16px;
       fill: none;
       stroke: var(--orange);
       stroke-width: 1.6;
       stroke-linecap: round;
       stroke-linejoin: round;
       transition: transform .35s cubic-bezier(.22, 1, .36, 1);
   }

   .support-card:hover .support-icon {
       transform: scale(1.1);
   }

   .support-card h3 {
       text-transform: capitalize;
   }

   .support-card p {
       flex-grow: 1;
   }

   /* Devices We Repair */
   .devices-repair-section {
       padding-bottom: 76px;
   }

   .repair-section-title {
       margin: 0 0 34px;
       color: var(--orange);
       font-size: var(--heading-section);
       font-weight: 780;
       line-height: 1.12;
       letter-spacing: -.03em;
       text-align: center;
   }

   .repair-devices-row {
       display: grid;
       gap: 24px;
   }

   .repair-devices-row-top {
       grid-template-columns: 1fr 1fr;
   }

   .repair-devices-row-bottom {
       grid-template-columns: .62fr 1fr;
       margin-top: 24px;
   }

   .repair-device-card {
       padding: 30px;
       border: 1px solid transparent;
       border-radius: 18px;
       background: #162139;
       box-shadow: none;
       transition: transform .35s cubic-bezier(.22, 1, .36, 1),
                   box-shadow .35s cubic-bezier(.22, 1, .36, 1),
                   border-color .35s ease,
                   background-color .35s ease;
   }

   .repair-device-card:hover {
       transform: translateY(-7px);
       border-color: rgba(255, 59, 10, .4);
       background-color: #1b2745;
       box-shadow: 0 22px 44px rgba(0, 0, 0, .3);
   }

   .repair-device-card .icon-badge {
       transition: transform .35s cubic-bezier(.22, 1, .36, 1),
                   background-color .35s ease,
                   border-color .35s ease;
   }

   .repair-device-card:hover .icon-badge {
       transform: scale(1.1);
       background: rgba(255, 59, 10, .16);
       border-color: rgba(255, 59, 10, .55);
   }



   .repair-device-card>p {
       margin: 14px 0 0;
       color: #c2c7d0;
       font-size: .9375rem;
       font-weight: 500;
       line-height: 1.5;
   }

   .repair-device-card>.icon-badge {
       margin-bottom: 16px;
   }

   .repair-device-card h3 {
       margin: 0;
       font-size: clamp(1.35rem, 1.15rem + .7vw, 1.75rem);
       font-weight: 750;
       line-height: 1.15;
       letter-spacing: -.02em;
   }

   .repair-device-head {
       display: flex;
       align-items: center;
       gap: 16px;
   }

   .tag-row {
       display: flex;
       flex-wrap: wrap;
       gap: 10px;
       margin: 20px 0 0;
       padding: 0;
       list-style: none;
   }

   .tag-pill {
       display: inline-flex;
       align-items: center;
       padding: 7px 15px;
       border-radius: 8px;
       background: var(--orange-bright);
       color: #fff;
       font-size: .8125rem;
       font-weight: 700;
       letter-spacing: -.01em;
   }

   .tag-pill-outline {
       border: 1px solid rgba(255, 59, 10, .45);
       background: rgba(255, 59, 10, .1);
       color: var(--peach);
   }

   .explore-link {
       display: inline-flex;
       margin-top: 20px;
       width: auto;
   }

   .explore-link svg {
       width: 15px;
       height: 15px;
       fill: none;
       stroke: currentColor;
       stroke-width: 2;
       stroke-linecap: round;
       stroke-linejoin: round;
       transition: transform .3s cubic-bezier(.22, 1, .36, 1);
   }

   .repair-device-card:hover .explore-link svg {
       transform: translateX(4px);
   }

   .repair-device-split {
       display: flex;
       gap: 30px;
   }

   .split-item {
       flex: 1 1 0;
       min-width: 0;
   }

   .split-item .icon-badge {
       margin-bottom: 16px;
   }

   .split-item p {
       margin: 12px 0 0;
       color: #c2c7d0;
       font-size: .9375rem;
       font-weight: 500;
       line-height: 1.5;
   }

   .split-divider {
       flex-shrink: 0;
       width: 1px;
       background: var(--line);
   }

   /* Other Services */
   .other-services-section {
       padding-bottom: 76px;
   }

   .other-services-panel {
       padding: 48px;
       border: 1px solid rgba(255, 255, 255, .02);
       border-radius: 20px;
       background: var(--panel);
       box-shadow: var(--shadow);
   }

   .other-services-grid {
       display: grid;
       grid-template-columns: repeat(3, 1fr);
       gap: 26px;
       margin-top: 38px;
   }

   .other-service-card {
       padding: 24px;
       border: 1px solid transparent;
       border-radius: 14px;
       background: var(--panel-light);
       transition: transform .35s cubic-bezier(.22, 1, .36, 1),
                   box-shadow .35s cubic-bezier(.22, 1, .36, 1),
                   border-color .35s ease;
   }

   .other-service-card:hover {
       transform: translateY(-7px);
       border-color: rgba(255, 59, 10, .4);
       box-shadow: 0 20px 40px rgba(0, 0, 0, .22);
   }

   .other-service-card .icon-badge {
       transition: transform .35s cubic-bezier(.22, 1, .36, 1),
                   background-color .35s ease,
                   border-color .35s ease;
   }

   .other-service-card:hover .icon-badge {
       transform: scale(1.1);
       background: rgba(255, 59, 10, .16);
       border-color: rgba(255, 59, 10, .55);
   }

   .other-service-top {
       display: flex;
       align-items: center;
       justify-content: space-between;
       gap: 12px;
   }

   .chip-badge {
       display: inline-flex;
       padding: 5px 12px;
       border-radius: 99px;
       background: var(--orange-bright);
       color: #fff;
       font-size: .6875rem;
       font-weight: 750;
       letter-spacing: .01em;
       white-space: nowrap;
   }

   .other-service-card h3 {
       margin: 20px 0 0;
       font-size: 1.25rem;
       font-weight: 750;
       line-height: 1.2;
       letter-spacing: -.02em;
   }

   .other-service-card p {
       margin: 8px 0 0;
       color: var(--muted);
       font-size: .875rem;
       line-height: 1.5;
   }

   /* Closing CTA */
   .repair-cta {
       position: relative;
       overflow: hidden;
       padding-block: 12px 84px;
       isolation: isolate;
   }

   .repair-cta-inner {
       max-width: 680px;
   }

   .repair-cta-inner h2 {
       margin: 0;
       font-size: var(--heading-section);
       font-weight: 780;
       line-height: 1.12;
       letter-spacing: -.03em;
   }

   .repair-cta-inner h2 span {
       color: var(--orange);
   }

   .repair-cta-inner p {
       max-width: 560px;
       margin: 18px 0 0;
       color: var(--muted);
       font-size: var(--text-body);
       line-height: 1.55;
   }

   .repair-cta-actions {
       gap: 20px;
       margin-top: 36px;
   }

   @media (max-width: 1180px) {
       .support-grid {
           grid-template-columns: repeat(2, 1fr);
       }

       .other-services-grid {
           grid-template-columns: 1fr;
       }
   }

   @media (max-width: 960px) {
       .repair-highlights {
           padding-bottom: 56px;
       }

       .highlight-strip {
           grid-template-columns: 1fr;
           gap: 22px;
           padding: 26px;
       }

       .highlight-item {
           padding: 0;
           border-left: 0;
       }

       .devices-support-section,
       .devices-repair-section,
       .other-services-section {
           padding-bottom: 56px;
       }

       .support-grid {
           grid-template-columns: repeat(2, 1fr);
           gap: 16px;
           margin-top: 26px;
       }

       .repair-devices-row-top,
       .repair-devices-row-bottom {
           grid-template-columns: 1fr;
       }

       .repair-devices-row-bottom {
           margin-top: 20px;
       }

       .repair-device-split {
           flex-direction: column;
           gap: 26px;
       }

       .split-divider {
           width: 100%;
           height: 1px;
       }

       .other-services-panel {
           padding: 32px 24px;
       }

       .repair-cta-ring {
           width: 260px;
           height: 260px;
           right: -160px;
       }
   }

   @media (max-width: 620px) {
       .repair-highlights {
           padding-bottom: 44px;
       }

       .highlight-strip {
           padding: 22px 18px;
       }

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

       .support-card {
           min-height: auto;
           padding: 24px;
       }

       .repair-section-title {
           font-size: 31px;
       }

       .repair-device-card {
           padding: 24px;
       }

       .repair-devices-row-bottom {
           margin-top: 16px;
       }

       .tag-row {
           gap: 8px;
       }

       .other-services-grid {
           gap: 16px;
           margin-top: 28px;
       }

       .repair-cta {
           padding-bottom: 64px;
       }

       .repair-cta-actions {
           flex-direction: column;
           align-items: stretch;
           gap: 14px;
       }

       .repair-cta-actions .button {
           min-width: 0;
           width: 100%;
       }

       .repair-cta-ring {
           display: none;
       }
   }