:root {
   --ink-black: #0B0F16;
   --navy: #14243D;
   --line: #263A5A;
   --blue: #375E9D;
   --blue-soft: #8CA4C9;
   --blue-bright: #2D56B8;
   --blue-light: #7FA6E0;
   --blue-dim: #26406B;
   --paper: #F5F6F9;
   --paper-dim: #E7EAF1;
   --ink: #10192A;
   --ink-soft: #55647C;
   --paper-soft: rgba(245, 246, 249, .72);
   --font-display: 'Space Grotesk', sans-serif;
   --font-body: 'IBM Plex Sans', sans-serif;
   --font-mono: 'IBM Plex Mono', monospace;
   --font-script: 'Caveat', cursive;
   --max: 1160px;
 }

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

 html {
   scroll-behavior: smooth;
 }

 body {
   margin: 0;
   font-family: var(--font-body);
   background: var(--paper);
   color: var(--ink);
   line-height: 1.55;
   -webkit-font-smoothing: antialiased;
 }

 img,
 svg {
   display: block;
   max-width: 100%;
 }

 a {
   color: inherit;
 }

 h1,
 h2,
 h3 {
   font-family: var(--font-display);
   margin: 0;
   line-height: 1.08;
   letter-spacing: -.01em;
 }

 p {
   margin: 0;
 }

 ul {
   margin: 0;
   padding: 0;
   list-style: none;
 }

 button {
   font-family: inherit;
   cursor: pointer;
 }

 :focus-visible {
   outline: 3px solid var(--blue-bright);
   outline-offset: 3px;
 }

 header :focus-visible,
 .hero :focus-visible,
 .stats-band :focus-visible,
 .mission-panel :focus-visible,
 .info-block :focus-visible,
 footer :focus-visible {
   outline-color: var(--blue-light);
 }

 .wrap {
   max-width: var(--max);
   margin: 0 auto;
   padding: 0 28px;
 }

 .eyebrow {
   font-family: var(--font-mono);
   font-size: 12.5px;
   letter-spacing: .14em;
   text-transform: uppercase;
   display: inline-flex;
   align-items: center;
   gap: 8px;
 }

 .eyebrow::before {
   content: "";
   width: 7px;
   height: 7px;
   background: currentColor;
   display: inline-block;
   border-radius: 1px;
   transform: rotate(45deg);
 }

 .btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 8px;
   font-family: var(--font-mono);
   font-size: 13.5px;
   letter-spacing: .04em;
   text-transform: uppercase;
   text-decoration: none;
   padding: 15px 26px;
   border-radius: 3px;
   border: 1px solid transparent;
   transition: transform .15s ease, background .15s ease, border-color .15s ease;
 }

 .btn:hover {
   transform: translateY(-1px);
 }

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

 .btn-primary:hover {
   background: var(--blue-dim);
 }

 .btn-outline {
   border-color: var(--line);
   color: var(--paper);
 }

 .btn-outline:hover {
   border-color: var(--blue-light);
   color: var(--blue-light);
 }

 .btn-outline-ink {
   border-color: var(--ink-soft);
   color: var(--ink);
 }

 .btn-outline-ink:hover {
   border-color: var(--blue);
   color: var(--blue);
 }

 /* ---------- Header ---------- */
 header {
   position: sticky;
   top: 0;
   z-index: 50;
   background: rgba(14, 27, 22, .92);
   backdrop-filter: blur(8px);
   border-bottom: 1px solid var(--line);
 }

 .nav {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 16px 28px;
   max-width: var(--max);
   margin: 0 auto;
 }

 .logo {
   display: flex;
   align-items: center;
   gap: 10px;
   text-decoration: none;
   color: var(--paper);
 }

 .logo img {
   width: 30px;
   height: 30px;
   flex: none;
   display: block;
 }

 .logo-word {
   font-family: var(--font-display);
   font-weight: 700;
   font-size: 19px;
   color: var(--paper);
 }

 .logo-word span {
   font-family: var(--font-mono);
   font-weight: 500;
   color: var(--blue-light);
   font-size: 15px;
   margin-left: 2px;
 }

 .nav-links {
   display: flex;
   align-items: center;
   gap: 30px;
 }

 .nav-links a {
   font-family: var(--font-mono);
   font-size: 12.5px;
   letter-spacing: .08em;
   text-transform: uppercase;
   text-decoration: none;
   color: var(--paper-soft);
   padding: 6px 0;
   border-bottom: 1px solid transparent;
   transition: color .15s ease, border-color .15s ease;
 }

 .nav-links a:hover {
   color: var(--blue-light);
   border-color: var(--blue-light);
 }

 .nav-cta {
   font-family: var(--font-mono);
   font-size: 12.5px;
   color: var(--paper);
   text-decoration: none;
   border: 1px solid var(--line);
   padding: 9px 16px;
   border-radius: 3px;
   letter-spacing: .05em;
 }

 .nav-cta:hover {
   border-color: var(--blue-light);
   color: var(--blue-light);
 }

 .nav-toggle {
   display: none;
   background: none;
   border: 1px solid var(--line);
   border-radius: 3px;
   padding: 8px 10px;
 }

 .nav-toggle span {
   display: block;
   width: 18px;
   height: 2px;
   background: var(--paper);
   margin: 3px 0;
 }

 .mobile-panel {
   display: none;
   flex-direction: column;
   gap: 2px;
   padding: 6px 28px 20px;
   background: var(--ink-black);
   border-bottom: 1px solid var(--line);
 }

 .mobile-panel a {
   font-family: var(--font-mono);
   font-size: 13px;
   letter-spacing: .05em;
   text-transform: uppercase;
   color: var(--paper-soft);
   text-decoration: none;
   padding: 12px 4px;
   border-bottom: 1px solid var(--line);
 }

 .mobile-panel a:last-child {
   border-bottom: none;
 }

 /* ---------- Hero ---------- */
 .hero {
   background: var(--ink-black);
   color: var(--paper);
   position: relative;
   overflow: hidden;
   padding: 96px 0 84px;
 }

 .hero .wrap {
   position: relative;
   z-index: 2;
   display: grid;
   grid-template-columns: 1.05fr .95fr;
   gap: 40px;
   align-items: center;
 }

 .hero-eyebrow {
   color: var(--blue-soft);
   margin-bottom: 22px;
 }

 .hero h1 {
   font-size: clamp(2.4rem, 4.4vw, 3.6rem);
   color: var(--paper);
 }

 .hero h1 em {
   font-style: normal;
   color: var(--blue-light);
 }

 .hero p {
   margin-top: 22px;
   font-size: 1.08rem;
   color: var(--paper-soft);
   max-width: 46ch;
 }

 .hero-ctas {
   display: flex;
   flex-wrap: wrap;
   gap: 14px;
   margin-top: 34px;
 }

 .hero-trace {
   position: relative;
   height: 280px;
 }

 .hero-trace svg {
   width: 100%;
   height: 100%;
   overflow: visible;
 }

 .trace-path {
   fill: none;
   stroke: var(--line);
   stroke-width: 2;
 }

 .trace-path.live {
   stroke: var(--blue);
   stroke-dasharray: 1500;
   stroke-dashoffset: 1500;
   animation: draw 2.4s cubic-bezier(.4, .1, .2, 1) forwards .3s;
 }

 .trace-node {
   fill: var(--blue-light);
   animation: pulse 2.6s ease-in-out infinite;
   animation-delay: 2.6s;
   opacity: 0;
 }

 .trace-node.show {
   opacity: 1;
 }

 @keyframes draw {
   to {
     stroke-dashoffset: 0;
   }
 }

 @keyframes pulse {

   0%,
   100% {
     opacity: .55;
     r: 5;
   }

   50% {
     opacity: 1;
     r: 8;
   }
 }

 /* ---------- Section shell ---------- */
 section {
   padding: 88px 0;
   scroll-margin-top: 84px;
 }

 .section-head {
   max-width: 640px;
   margin-bottom: 52px;
 }

 .section-head .eyebrow {
   color: var(--blue);
   margin-bottom: 16px;
 }

 .section-head h2 {
   font-size: clamp(1.7rem, 3vw, 2.3rem);
 }

 .section-head p {
   margin-top: 16px;
   color: var(--ink-soft);
   font-size: 1.02rem;
 }

 /* ---------- Services ---------- */
 .services {
   background: var(--paper);
 }

 .service-grid {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 1px;
   background: var(--line);
   border: 1px solid var(--line);
 }

 .service-card {
   background: var(--paper);
   padding: 34px 32px;
 }

 .service-icon {
   width: 74px;
   height: 74px;
   margin-bottom: 18px;
 }

 .service-card h3 {
   font-size: 1.28rem;
   margin-bottom: 16px;
 }

 .service-card ul {
   display: flex;
   flex-direction: column;
   gap: 9px;
 }

 .service-card li {
   font-size: .92rem;
   color: var(--ink-soft);
   padding-left: 16px;
   position: relative;
 }

 .service-card li::before {
   content: "";
   position: absolute;
   left: 0;
   top: .55em;
   width: 6px;
   height: 6px;
   background: var(--blue-bright);
   border-radius: 50%;
 }

 .service-card li.and-more {
   color: var(--blue);
   font-weight: 600;
 }

 .service-card li.and-more::before {
   background: var(--blue);
 }

 /* ---------- Why us ---------- */
 .why-us {
   background: var(--paper-dim);
 }

 .why-grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 30px;
 }

 .why-card .num {
   font-family: var(--font-mono);
   color: var(--blue);
   font-size: 13px;
   letter-spacing: .06em;
 }

 .why-card h3 {
   margin-top: 12px;
   font-size: 1.12rem;
 }

 .why-card p {
   margin-top: 10px;
   color: var(--ink-soft);
   font-size: .94rem;
 }

 /* ---------- Stats band ---------- */
 .stats-band {
   background: var(--ink-black);
   color: var(--paper);
   padding: 44px 0;
 }

 .stats-row {
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
   gap: 24px;
 }

 .stat {
   font-family: var(--font-mono);
 }

 .stat .n {
   font-size: 1.7rem;
   color: var(--blue-light);
   display: block;
 }

 .stat .l {
   font-size: 11.5px;
   letter-spacing: .1em;
   text-transform: uppercase;
   color: var(--paper-soft);
   margin-top: 4px;
   display: block;
 }

 .stat a {
   color: var(--blue-light);
   text-decoration: none;
   border-bottom: 1px solid var(--blue);
 }

 /* ---------- About ---------- */
 .about {
   background: var(--paper);
 }

 .brand-plate {
   display: flex;
   justify-content: center;
   margin-bottom: 64px;
 }

 .brand-plate-img {
   width: 100%;
   max-width: 480px;
   height: auto;
 }

 .about-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 64px;
   align-items: start;
 }

 .mission-panel .eyebrow.script {
   font-family: var(--font-script);
   font-size: 2rem;
   font-weight: 700;
   letter-spacing: 0;
   text-transform: none;
   color: var(--blue-light);
   display: block;
   margin-bottom: 10px;
 }

 .eyebrow.script::before {
   display: none;
 }

 .underline-accent {
   text-decoration: underline;
   text-decoration-color: var(--blue-light);
   text-underline-offset: 3px;
 }

 .about-copy p {
   color: var(--ink-soft);
   margin-bottom: 18px;
   font-size: 1rem;
 }

 .pullquote {
   border-left: 3px solid var(--blue);
   padding-left: 24px;
   margin: 34px 0;
 }

 .pullquote p {
   font-family: var(--font-display);
   font-size: 1.3rem;
   color: var(--ink);
   font-weight: 500;
   line-height: 1.35;
 }

 .mission-panel {
   background: var(--ink-black);
   color: var(--paper);
   padding: 40px;
   border-radius: 4px;
 }

 .mission-panel .eyebrow {
   color: var(--blue-soft);
   margin-bottom: 20px;
 }

 .mission-panel p {
   color: var(--paper-soft);
   margin-bottom: 16px;
   font-size: .98rem;
 }

 .mission-panel .est {
   font-family: var(--font-mono);
   color: var(--blue-light);
   margin-top: 22px;
   display: block;
   font-size: .92rem;
   letter-spacing: .05em;
 }

 /* ---------- Contact ---------- */
 .contact {
   background: var(--navy);
   color: var(--paper);
 }

 .contact .section-head .eyebrow {
   color: var(--blue-soft);
 }

 .contact .section-head p {
   color: var(--paper-soft);
 }

 .contact-grid {
   display: grid;
   grid-template-columns: .85fr 1.15fr;
   gap: 56px;
 }

 .info-block {
   margin-bottom: 30px;
 }

 .info-block .eyebrow {
   color: var(--blue-soft);
   margin-bottom: 10px;
   font-size: 11.5px;
 }

 .info-block p,
 .info-block a {
   font-size: 1rem;
   color: var(--paper);
   text-decoration: none;
 }

 .info-block a:hover {
   color: var(--blue-light);
 }

 .map-frame {
   margin-top: 8px;
   border: 1px solid var(--line);
   border-radius: 3px;
   overflow: hidden;
 }

 .map-frame iframe {
   width: 100%;
   height: 220px;
   border: 0;
   display: block;
   filter: grayscale(.2) contrast(1.05);
 }

 .form-panel {
   background: var(--paper);
   color: var(--ink);
   padding: 38px;
   border-radius: 4px;
 }

 .form-panel h3 {
   font-size: 1.2rem;
   margin-bottom: 6px;
 }

 .form-panel>p {
   color: var(--ink-soft);
   font-size: .92rem;
   margin-bottom: 24px;
 }

 .field {
   margin-bottom: 18px;
 }

 .field label {
   display: block;
   font-family: var(--font-mono);
   font-size: 11.5px;
   letter-spacing: .06em;
   text-transform: uppercase;
   color: var(--ink-soft);
   margin-bottom: 7px;
 }

 .field input,
 .field select,
 .field textarea {
   width: 100%;
   padding: 12px 14px;
   border: 1px solid #D2D8E4;
   border-radius: 3px;
   background: var(--paper);
   font-family: var(--font-body);
   font-size: .95rem;
   color: var(--ink);
 }

 .field textarea {
   resize: vertical;
   min-height: 96px;
 }

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

 .form-note {
   font-size: .82rem;
   color: var(--ink-soft);
   margin-top: 14px;
 }

 .form-success {
   display: none;
   font-family: var(--font-mono);
   font-size: .88rem;
   color: #2f6b4a;
   background: #E4EFE6;
   border: 1px solid #bcd9c4;
   padding: 14px 16px;
   border-radius: 3px;
   margin-top: 16px;
 }

 .form-success.show {
   display: block;
 }

 .form-error {
   display: none;
   font-family: var(--font-mono);
   font-size: .88rem;
   color: #8a2018;
   background: #FBE9E7;
   border: 1px solid #e6bdb7;
   padding: 14px 16px;
   border-radius: 3px;
   margin-top: 16px;
 }

 .form-error.show {
   display: block;
 }

 /* Honeypot, hidden from people, visible to bots that fill every field. */
 .hp-field {
   position: absolute;
   left: -9999px;
   width: 1px;
   height: 1px;
   overflow: hidden;
 }

 #formSubmit:disabled {
   opacity: .6;
   cursor: default;
 }

 /* ---------- Footer ---------- */
 footer {
   background: var(--ink-black);
   color: var(--paper-soft);
   padding: 48px 0 28px;
 }

 .footer-top {
   display: flex;
   justify-content: space-between;
   flex-wrap: wrap;
   gap: 32px;
   padding-bottom: 32px;
   border-bottom: 1px solid var(--line);
 }

 .footer-nav {
   display: flex;
   gap: 24px;
   flex-wrap: wrap;
 }

 .footer-nav a {
   font-family: var(--font-mono);
   font-size: 12px;
   letter-spacing: .05em;
   text-transform: uppercase;
   text-decoration: none;
   color: var(--paper-soft);
 }

 .footer-nav a:hover {
   color: var(--blue-light);
 }

 .footer-bottom {
   display: flex;
   justify-content: space-between;
   flex-wrap: wrap;
   gap: 12px;
   padding-top: 22px;
   font-family: var(--font-mono);
   font-size: 11.5px;
   color: #5C6B85;
 }

 .footer-bottom a {
   color: #5C6B85;
   text-decoration: none;
 }

 .footer-bottom a:hover {
   color: var(--blue-light);
 }

 .reveal {
   opacity: 0;
   transform: translateY(14px);
   transition: opacity .6s ease, transform .6s ease;
 }

 .reveal.in {
   opacity: 1;
   transform: none;
 }

 @media (prefers-reduced-motion: reduce) {
   html {
     scroll-behavior: auto;
   }

   .trace-path.live {
     animation: none;
     stroke-dashoffset: 0;
   }

   .trace-node {
     animation: none;
     opacity: 1;
   }

   .reveal {
     opacity: 1;
     transform: none;
     transition: none;
   }
 }

 @media (max-width: 900px) {
   .nav-links {
     display: none;
   }

   .nav-toggle {
     display: block;
   }

   body.nav-open .mobile-panel {
     display: flex;
   }

   .hero .wrap {
     grid-template-columns: 1fr;
   }

   .hero-trace {
     height: 180px;
   }

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

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

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

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

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

   .stats-row {
     gap: 28px;
   }
 }

 /* ---------- Announcement banner ---------- */
 .announce-banner {
   background: var(--blue);
   color: #fff;
   padding: 13px 28px;
   font-size: .95rem;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 12px;
   text-align: center;
   flex-wrap: wrap;
 }

 .announce-banner.alert {
   background: #B3261E;
 }

 .announce-banner strong {
   font-weight: 600;
 }

 .announce-banner .ab-body {
   opacity: .92;
 }

 .announce-close {
   background: none;
   border: 1px solid rgba(255, 255, 255, .45);
   color: #fff;
   border-radius: 3px;
   line-height: 1;
   padding: 4px 9px;
   font-size: .8rem;
   cursor: pointer;
   flex: none;
 }

 .announce-close:hover {
   background: rgba(255, 255, 255, .15);
 }

 /* ---------- Shop updates ---------- */
 .updates {
   background: var(--paper-dim);
 }

 .updates-list {
   display: grid;
   gap: 1px;
   background: var(--line);
   border: 1px solid var(--line);
 }

 .update-item {
   background: var(--paper);
   padding: 26px 30px;
 }

 .update-head {
   display: flex;
   align-items: center;
   gap: 12px;
   flex-wrap: wrap;
   margin-bottom: 9px;
 }

 .update-item h3 {
   font-size: 1.12rem;
 }

 .update-badge {
   font-family: var(--font-mono);
   font-size: 10.5px;
   letter-spacing: .09em;
   text-transform: uppercase;
   padding: 3px 8px;
   border-radius: 2px;
   background: #E7EDF9;
   color: var(--blue-bright);
 }

 .update-badge.alert {
   background: #FBE9E7;
   color: #B3261E;
 }

 .update-item p {
   color: var(--ink-soft);
   font-size: .95rem;
 }

 .update-date {
   font-family: var(--font-mono);
   font-size: 11.5px;
   color: var(--ink-soft);
   margin-top: 12px;
   display: block;
 }

 /* ---------- Repair tracker ---------- */
 .tracker {
   background: var(--paper);
 }

 .tracker-frame {
   background: #fff;
   border: 1px solid var(--line);
   border-radius: 4px;
   padding: 20px;
   min-height: 420px;
   overflow: hidden;
 }

 .tracker-frame iframe {
   width: 100%;
   min-height: 380px;
   border: 0;
   display: block;
 }

 .tracker-fallback {
   color: var(--ink-soft);
   font-size: .95rem;
 }

 .tracker-note {
   margin-top: 16px;
   font-size: .9rem;
   color: var(--ink-soft);
 }

 .tracker-note a {
   color: var(--blue);
   font-weight: 600;
 }

 @media (max-width: 560px) {
   .why-grid {
     grid-template-columns: 1fr;
   }

   .announce-banner {
     padding: 12px 20px;
     font-size: .9rem;
   }

   .update-item {
     padding: 22px 22px;
   }

   .tracker-frame {
     padding: 12px;
   }

   section {
     padding: 64px 0;
   }

   .hero {
     padding: 56px 0 48px;
   }

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

   .service-card {
     padding: 28px 24px;
   }

   .brand-plate {
     margin-bottom: 44px;
   }

   .mission-panel {
     padding: 30px 26px;
   }
 }

 /* ---------- Diagnostics policy callout ---------- */
 .policy-note {
   display: flex;
   gap: 20px;
   align-items: flex-start;
   background: var(--paper-dim);
   border-left: 3px solid var(--blue-bright);
   padding: 26px 28px;
   border-radius: 3px;
   margin-top: 44px;
 }

 .policy-icon {
   color: var(--blue);
   flex-shrink: 0;
   margin-top: 2px;
 }

 .policy-note h3 {
   font-family: var(--font-display);
   font-size: 1.05rem;
   margin: 0 0 8px;
   color: var(--ink);
 }

 .policy-note p {
   margin: 0;
   color: var(--ink-soft);
   font-size: .94rem;
   line-height: 1.65;
 }


 @media (max-width:720px) {
   .policy-note {
     flex-direction: column;
     gap: 14px;
     padding: 22px 20px;
   }
 }

 /* ================= Accessories page ================= */

 .page-hero {
   background: var(--ink-black);
   color: var(--paper);
   padding: 132px 0 72px;
   border-bottom: 1px solid var(--line);
 }

 .page-hero h1 {
   font-size: clamp(2.1rem, 3.8vw, 3rem);
   color: var(--paper);
   max-width: 16ch;
 }

 .page-hero h1 em {
   font-style: normal;
   color: var(--blue-light);
 }

 .page-hero p {
   margin-top: 20px;
   max-width: 56ch;
   color: var(--paper-soft);
   font-size: 1.05rem;
   line-height: 1.7;
 }

 .page-hero .hero-ctas {
   margin-top: 32px;
 }

 .accessories {
   background: var(--paper);
   padding: 84px 0 96px;
 }

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

 .acc-card {
   background: #fff;
   border: 1px solid var(--paper-dim);
   border-radius: 4px;
   overflow: hidden;
   display: flex;
   flex-direction: column;
   transition: border-color .25s ease, transform .25s ease;
 }

 .acc-card:hover {
   border-color: var(--blue-soft);
   transform: translateY(-3px);
 }

 /* Placeholder until real counter photos land. Swap the div for an <img> and
the layout holds, the aspect ratio is set on the container, not the image. */
 .acc-photo {
   aspect-ratio: 4/3;
   background: var(--paper-dim);
   background-image:
     linear-gradient(135deg, rgba(55, 94, 157, .07) 25%, transparent 25%),
     linear-gradient(225deg, rgba(55, 94, 157, .07) 25%, transparent 25%),
     linear-gradient(45deg, rgba(55, 94, 157, .07) 25%, transparent 25%),
     linear-gradient(315deg, rgba(55, 94, 157, .07) 25%, transparent 25%);
   background-size: 22px 22px;
   display: flex;
   align-items: center;
   justify-content: center;
   border-bottom: 1px solid var(--paper-dim);
 }

 .acc-photo img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block;
 }

 .acc-photo-label {
   font-family: var(--font-mono);
   font-size: 10.5px;
   letter-spacing: .12em;
   text-transform: uppercase;
   color: var(--ink-soft);
   opacity: .65;
   background: var(--paper);
   padding: 6px 12px;
   border-radius: 2px;
 }

 .acc-body {
   padding: 26px 26px 28px;
   flex: 1;
   display: flex;
   flex-direction: column;
 }

 .acc-body h3 {
   font-family: var(--font-display);
   font-size: 1.1rem;
   color: var(--ink);
   margin: 0 0 10px;
 }

 .acc-body p {
   color: var(--ink-soft);
   font-size: .93rem;
   line-height: 1.62;
   margin: 0 0 18px;
 }

 .acc-list {
   list-style: none;
   padding: 0;
   margin: auto 0 0;
 }

 .acc-list li {
   position: relative;
   padding-left: 18px;
   font-size: .86rem;
   color: var(--ink-soft);
   margin-bottom: 7px;
 }

 .acc-list li::before {
   content: "";
   position: absolute;
   left: 0;
   top: 8px;
   width: 6px;
   height: 6px;
   border-radius: 50%;
   background: var(--blue-bright);
 }

 .policy-note a {
   color: var(--blue);
   font-weight: 500;
 }

 .nav-links a.is-current {
   color: var(--blue-light);
 }

 @media (max-width:980px) {
   .acc-grid {
     grid-template-columns: 1fr 1fr;
   }
 }

 @media (max-width:640px) {
   .acc-grid {
     grid-template-columns: 1fr;
   }

   .page-hero {
     padding: 108px 0 56px;
   }
 }

 /* ---------- Google rating badge ---------- */
 .stats-row {
   align-items: stretch;
 }

 .stat {
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
 }

 .stat .n {
   display: block;
   line-height: 1;
 }

 .stat .l {
   display: block;
   margin-top: 10px;
 }

 .stat-rating a {
   text-decoration: none;
   display: flex;
   flex-direction: column;
   height: 100%;
 }

 .rating-top {
   display: flex;
   align-items: center;
   gap: 10px;
   line-height: 1;
 }

 .rating-num {
   font-family: var(--font-mono);
   font-size: 1.7rem;
   color: var(--blue-light);
   line-height: 1;
 }

 .stars {
   width: 86px;
   height: 17px;
   display: block;
 }

 .stat-rating .l {
   border-bottom: 1px solid var(--blue-dim);
   display: inline-block;
   padding-bottom: 2px;
   transition: border-color .2s, color .2s;
 }

 .stat-rating a:hover .l {
   color: var(--paper);
   border-color: var(--blue-light);
 }

 /* ---------- Tracker fallback panel ---------- */
 .tracker-fallback {
   text-align: center;
   padding: 44px 28px;
   color: var(--ink-soft);
 }

 .tracker-fallback p {
   margin: 0 0 10px;
   line-height: 1.65;
 }

 .tracker-fallback p:last-child {
   margin-bottom: 0;
 }

 .tracker-fallback strong {
   color: var(--ink);
 }

 .tracker-fallback a {
   color: var(--blue);
   font-weight: 600;
 }

 /* Illustration slots on the accessories page sit on a flat wash,
not the diagonal placeholder pattern. */
 .acc-photo.has-art {
   background-image: none;
   background: linear-gradient(160deg, #EFF2F8 0%, #E1E7F2 100%);
 }

 .acc-photo.has-art svg {
   width: 78%;
   height: auto;
   display: block;
 }

 /* ---------- Hero: location first, devices beneath ---------- */
 .hero-locale {
   margin-bottom: 22px;
 }

 .hero-city {
   display: block;
   font-family: var(--font-mono);
   font-size: .82rem;
   letter-spacing: .22em;
   text-transform: uppercase;
   color: var(--blue-light);
 }

 .hero-devices {
   display: block;
   margin-top: 7px;
   font-family: var(--font-mono);
   font-size: .72rem;
   letter-spacing: .12em;
   text-transform: uppercase;
   color: var(--blue-soft);
   opacity: .85;
   line-height: 1.7;
 }

 .hours-note {
   margin-top: 6px;
   font-size: .86rem;
   color: var(--blue-soft);
 }

/* ---------- Preferred contact method ---------- */
/* Deliberately self-contained. This previously inherited .field rules
   written for text inputs, which set width:100% on the radio buttons and
   pushed the labels off the right edge on narrow screens. Everything that
   matters is stated here rather than inherited. */
.prefer {
  border: 0;
  padding: 0;
  margin: 0 0 20px;
  min-width: 0;
}

.prefer legend {
  padding: 0;
  margin-bottom: 10px;
  font-family: var(--font-body);
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
}

.prefer-opts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.prefer .prefer-opts label {
  display: flex;
  align-items: center;
  gap: 11px;
  flex: 1 1 100%;
  min-width: 0;
  box-sizing: border-box;
  margin: 0;
  padding: 13px 15px;
  border: 1px solid #D2D8E4;
  border-radius: 3px;
  background: var(--paper);
  font-family: var(--font-body);
  font-size: .95rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
  cursor: pointer;
  transition: border-color .18s, background .18s;
}

/* The attribute selector outranks ".field input", which is the rule that
   was forcing these to full width. */
.prefer .prefer-opts input[type="radio"] {
  -webkit-appearance: radio;
  appearance: radio;
  width: 18px;
  height: 18px;
  min-width: 18px;
  flex: 0 0 18px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  accent-color: var(--blue-bright);
}

.prefer .prefer-opts label:hover {
  border-color: var(--blue-soft);
}

.prefer .prefer-opts label:has(input:checked) {
  border-color: var(--blue-bright);
  background: #F2F5FB;
}

 /* ---------- Repair tracker iframe ---------- */
 #repair-desk-widget {
   width: 100%;
   min-height: 480px;
   border: 0;
   display: block;
   background: #fff;
 }

 /* ---------- Announcement images ---------- */
 .update-img {
   width: 100%;
   height: auto;
   display: block;
   border-radius: 4px;
   margin: 4px 0 14px;
   border: 1px solid var(--paper-dim);
 }

 @media (max-width:640px) {
   .prefer-opts label {
     flex: 1 1 100%;
   }

   #repair-desk-widget {
     min-height: 560px;
   }
 }