/* =================================================================
   Laptop Service Center — Site Stylesheet
   Design system: navy / blue / cyan / orange
   Type: Outfit (headings) + Nunito (body), Font Awesome 6.5.0
   ================================================================= */

/* ============ DESIGN TOKENS ============ */
:root {
  --navy: #0a0f2e;
  --navy-2: #0d1b5e;
  --navy-3: #0a1840;
  --blue: #1a3de4;
  --cyan: #00d4ff;
  --orange: #ff5c1a;
  --orange-hover: #e54a0a;
  --orange-2: #ff8c42;
  --whatsapp: #25d366;
  --white: #ffffff;
  --off: #f0f4ff;
  --gray: #6b7a99;
  --light-gray: #e8edf8;
  --light-border: rgba(255, 255, 255, 0.12);
  --card-shadow: 0 4px 24px rgba(10, 15, 46, 0.08);
  --card-shadow-hover: 0 8px 32px rgba(26, 61, 228, 0.10);
  --card-radius: 18px;
  --btn-radius: 10px;
}

/* ============ RESET & BASE ============ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: 'Nunito', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.7;
  color: var(--navy);
  background: var(--white);
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--blue); text-decoration: none; transition: color 0.2s; }
a:hover { color: var(--orange); }

h1, h2, h3, h4, h5, h6 {
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  line-height: 1.2;
  color: var(--navy);
  /* Even out heading line lengths — browser picks better break points,
     prevents single-word widows like "Nagar?" alone on a line. */
  text-wrap: balance;
}
h1 { font-size: clamp(1.8rem, 4vw, 2.8rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2.2rem); }
h3 { font-size: clamp(1.2rem, 2.5vw, 1.6rem); }
p { margin-bottom: 1rem; }
/* Reduce orphans/ragged endings in long prose — only wraps the last 4 lines pretty
   so it stays cheap on long blocks. */
.lede, .hero-promise, .svc-section-title p, .svc-a, article p, section p {
  text-wrap: pretty;
}

.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
section { padding: 60px 0; }

/* ============ UTILITIES ============ */
.text-center { text-align: center; }
.accent { color: var(--orange); }
.cyan { color: var(--cyan); }
.highlight-orange {
  background: linear-gradient(90deg, var(--orange), #ff8c42);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.section-title { text-align: center; margin-bottom: 48px; }
.section-title h2 { margin-bottom: 12px; }
.section-title p { color: var(--gray); font-size: 1.1rem; max-width: 600px; margin: 0 auto; }

/* ============ BUTTONS ============ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 32px;
  border-radius: var(--btn-radius);
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  border: none;
  transition: all 0.25s cubic-bezier(.2,.7,.2,1);
  text-decoration: none;
  box-sizing: border-box;
}
.btn-primary { background: var(--blue); color: var(--white); }
.btn-primary:hover {
  background: #1530c0;
  color: var(--white);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(26, 61, 228, 0.3);
}
.btn-orange { background: var(--orange); color: var(--white); }
.btn-orange:hover {
  background: #e5500f;
  color: var(--white);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(255, 92, 26, 0.35);
}
.btn-outline { background: transparent; color: var(--white); border: 2px solid var(--white); }
.btn-outline:hover {
  background: var(--white);
  color: var(--navy);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(255, 255, 255, 0.18);
}
/* Light-background variant: white fill + navy border + navy text → fills navy on hover */
.btn-outline-dark {
  background: var(--white);
  color: var(--navy);
  border: 2px solid var(--navy);
  box-shadow: 0 2px 6px rgba(10, 15, 46, 0.08);
}
.btn-outline-dark:hover {
  background: var(--navy);
  color: var(--white);
  border-color: var(--navy);
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(10, 15, 46, 0.28);
}
.btn-whatsapp { background: var(--whatsapp); color: var(--white); }
.btn-whatsapp:hover {
  background: #1ebc57;
  color: var(--white);
  transform: translateY(-2px);
}

/* ============ ANCHOR SCROLL OFFSET (fixed nav is 86px desktop / 64px mobile) ============ */
html { scroll-behavior: smooth; }
section[id], div[id^="section-"] { scroll-margin-top: 106px; }
#why-us { scroll-margin-top: 40px; }
@media (max-width: 768px) {
  section[id], div[id^="section-"] { scroll-margin-top: 72px; }
}

/* ============ HEADER / NAV ============ */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  background: var(--navy);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--light-border);
  transition: background 0.3s;
}
.site-header.scrolled {
  background: rgba(10, 15, 46, 0.97);
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.15);
}
.nav-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  max-width: 1200px;
  margin: 0 auto;
  height: 86px; /* fits the 81×81 logo (5px breathing top + bottom) */
}
@media (max-width: 768px) {
  .nav-wrap { height: 64px; } /* mobile: 56×56 logo */
}
.logo {
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  font-size: 1.3rem;
  color: var(--white);
  text-decoration: none;
  display: flex;
  align-items: center;
  white-space: nowrap;
  flex-shrink: 0;
}
.logo:hover { color: var(--white); }
.logo span { color: var(--cyan); }
.logo-svg {
  height: 81px;
  width: 81px;
  margin-right: 16px;
  display: block;
  flex-shrink: 0;
  /* Logo SVG ships with brand colors baked in — no filter required. */
}
@media (max-width: 768px) {
  .logo-svg { height: 56px; width: 56px; margin-right: 12px; }
}
.logo-icon {
  margin-right: 10px;
  width: 36px;
  height: 36px;
  background: var(--blue);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  color: var(--white);
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 6px;
  list-style: none;
}
.nav-links > li { position: relative; }
.nav-links > li > a {
  color: var(--white);
  font-family: 'Outfit', sans-serif;
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.3px;
  padding: 8px 14px;
  border-radius: 6px;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: 5px;
}
.nav-links > li > a:hover { background: rgba(255,255,255,0.08); color: var(--cyan); }
.nav-links > li > a .caret { font-size: 0.65rem; opacity: 0.6; transition: transform 0.2s; }
.nav-links > li:hover > a .caret { transform: rotate(180deg); }

.nav-cta {
  padding: 10px 22px !important;
  font-size: 0.85rem;
  border-radius: 8px !important;
  background: var(--orange) !important;
  color: var(--white) !important;
}
.nav-cta:hover { background: #e5500f !important; }

/* Tap-to-call phone pill in the top nav — always visible on desktop, hidden
   on small screens where the floating CTA already provides the phone tap. */
.nav-phone {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  padding: 8px 12px !important;
  color: var(--cyan) !important;
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 0.88rem;
  letter-spacing: 0.3px;
  border: 1px solid rgba(0, 212, 255, 0.3);
  border-radius: 8px;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
  white-space: nowrap;
}
.nav-phone:hover {
  background: rgba(0, 212, 255, 0.12) !important;
  border-color: var(--cyan);
  color: var(--cyan) !important;
}
.nav-phone i { font-size: 0.82rem; }

/* Mobile nav — prominent call + WhatsApp at the very top of the drawer.
   Paired pills, always one tap from the phone and the WhatsApp chat. */
.mobile-nav-call,
.mobile-nav-wa {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 16px 20px 6px;
  padding: 12px 16px !important;
  border-radius: 10px;
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
  border-bottom: none !important;
}
.mobile-nav-call {
  background: var(--orange);
  color: var(--white) !important;
  box-shadow: 0 4px 16px rgba(255, 92, 26, 0.28);
}
.mobile-nav-wa {
  background: var(--whatsapp);
  color: var(--white) !important;
  margin-top: 0;
  margin-bottom: 12px;
  box-shadow: 0 4px 16px rgba(37, 211, 102, 0.25);
}

/* Dropdown */
.nav-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 220px;
  background: var(--white);
  border-radius: 12px;
  padding: 8px 0;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: all 0.2s;
  z-index: 100;
}
.nav-links > li:hover > .nav-dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.nav-dropdown a {
  display: block;
  padding: 10px 20px;
  color: var(--navy);
  font-family: 'Nunito', sans-serif;
  font-size: 0.9rem;
  font-weight: 600;
  transition: all 0.15s;
}
.nav-dropdown a:hover { background: var(--off); color: var(--blue); padding-left: 24px; }
.nav-dropdown a i { color: var(--blue); width: 16px; text-align: center; font-size: 0.82rem; margin-right: 4px; }
.nav-dropdown .dd-divider { height: 1px; background: #f0f2f8; margin: 6px 16px; }
/* Subtitle hint inside a dropdown label (e.g. "Our Story  Since 2007") */
.nav-dropdown .dd-sub {
  display: inline-block;
  margin-left: 8px;
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--gray);
  letter-spacing: 0.2px;
}

/* Mega dropdown */
.mega-dropdown {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  width: 980px;
  max-width: calc(100vw - 32px);
  background: var(--white);
  border-radius: 14px;
  padding: 28px 24px 20px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s;
  z-index: 100;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 12px;
}
@media (max-width: 1100px) {
  .mega-dropdown { grid-template-columns: 1fr 1fr 1fr; width: 760px; }
  .mega-col.mega-col-extra { display: none; }
}

/* Services mega-dropdown v2 — mindset-organized: Most Searched (hot) · Replace a Part · Specialist · + bottom featured row */
.mega-dropdown.svc-mega {
  width: 1000px;
  padding: 22px 22px 18px;
  display: block; /* override grid base from .mega-dropdown */
  gap: 0;
}
.svc-mega-cols {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(10, 15, 46, 0.08);
}
@media (max-width: 1100px) {
  .svc-mega-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.svc-mega-col { display: flex; flex-direction: column; gap: 2px; }
.svc-mega-label {
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gray);
  margin-bottom: 8px;
  padding: 0 6px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.svc-mega-label i { color: var(--orange); font-size: .78rem; }
.svc-mega-col-hot .svc-mega-label i { color: var(--orange); }

/* Hot column — bigger items with price meta */
.svc-mega-col-hot .svc-mega-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  border-radius: 10px;
  text-decoration: none;
  color: var(--navy);
  transition: background 200ms ease, transform 200ms ease;
}
.svc-mega-col-hot .svc-mega-item:hover {
  background: linear-gradient(90deg, rgba(255, 92, 26, 0.06), transparent 80%);
  transform: translateX(2px);
}
.svc-mega-col-hot .svc-mega-item > i {
  color: var(--orange);
  font-size: 1rem;
  flex-shrink: 0;
  width: 22px;
  text-align: center;
}
.svc-mega-col-hot .svc-mega-item > div { display: flex; flex-direction: column; gap: 1px; line-height: 1.25; }
.svc-mega-col-hot .svc-mega-title {
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: .9rem;
  color: var(--navy);
}
.svc-mega-col-hot .svc-mega-meta {
  font-size: .7rem;
  color: var(--gray);
  font-family: 'Nunito', sans-serif;
  font-weight: 600;
}

/* Standard columns — text + icon links */
.svc-mega-col:not(.svc-mega-col-hot) > a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  border-radius: 8px;
  text-decoration: none;
  color: var(--navy);
  font-family: 'Nunito', sans-serif;
  font-size: .88rem;
  font-weight: 600;
  transition: background 200ms ease, color 200ms ease;
}
.svc-mega-col:not(.svc-mega-col-hot) > a:hover { background: var(--off); color: var(--blue); }
.svc-mega-col:not(.svc-mega-col-hot) > a > i {
  color: var(--blue);
  font-size: .88rem;
  width: 18px;
  text-align: center;
  flex-shrink: 0;
}
.svc-mega-col:not(.svc-mega-col-hot) > a:hover > i { color: var(--orange); }

/* View-all link — orange CTA at bottom of last column */
.svc-mega-viewall {
  margin-top: 8px;
  border-top: 1px dashed rgba(10, 15, 46, 0.10);
  padding-top: 10px !important;
  color: var(--orange) !important;
  font-weight: 700 !important;
}
.svc-mega-viewall i { color: var(--orange) !important; }

/* Bottom row — SCP card + Beyond Laptops list */
.svc-mega-bottom {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 16px;
  padding-top: 16px;
}

/* Menu-context tweaks for the home-scp-banner pattern reused inside the dropdown */
.svc-mega-scp-banner.home-scp-banner { margin-top: 0; padding: 18px 22px; gap: 18px; }
.svc-mega-scp-banner .home-scp-icon { font-size: 2.8rem; }
.svc-mega-scp-banner .home-scp-icon i { color: var(--orange); width: auto; font-size: 2.8rem; }
.svc-mega-scp-banner .home-scp-eyebrow { font-size: .64rem; }
.svc-mega-scp-banner .home-scp-new { font-size: .56rem; padding: 1px 7px; }
.svc-mega-scp-banner .home-scp-title { font-size: 1rem; margin: 4px 0 6px; }
.svc-mega-scp-banner .home-scp-sub { font-size: .8rem; line-height: 1.5; }
.svc-mega-scp-banner .home-scp-cta { padding: 9px 18px; font-size: .8rem; gap: 7px; }
.svc-mega-scp-banner .home-scp-cta i { color: var(--white); font-size: .72rem; width: auto; }
.svc-mega-scp {
  position: relative;
  overflow: hidden;
  background: linear-gradient(98deg, #fff7f1 0%, #fafbff 60%);
  border: 1px solid rgba(255, 92, 26, 0.16);
  border-radius: 16px;
  padding: 22px 24px 24px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0 22px;
  align-items: start;
  text-decoration: none;
  color: var(--navy);
  transition: border-color 280ms ease, transform 280ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 280ms ease;
}
.svc-mega-scp:hover { color: var(--navy); }
.svc-mega-scp:hover {
  border-color: rgba(255, 92, 26, 0.4);
  transform: translateY(-2px);
  box-shadow: 0 16px 32px -10px rgba(255, 92, 26, 0.22);
}
/* Shield icon — large, naked glyph. Override generic .mega-dropdown a i cascade. */
.svc-mega-scp .svc-mega-scp-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 64px;        /* fixed visual slot */
  height: 64px;
  filter: drop-shadow(0 4px 12px rgba(255, 92, 26, 0.24));
  transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1), filter 280ms ease;
}
.svc-mega-scp .svc-mega-scp-icon i {
  color: var(--orange);
  font-size: 3.6rem;  /* ~58px — proportional to 64px slot */
  width: auto;
  line-height: 1;
}
.svc-mega-scp:hover .svc-mega-scp-icon {
  transform: scale(1.05) rotate(-4deg);
  filter: drop-shadow(0 8px 18px rgba(255, 92, 26, 0.4));
}
.svc-mega-scp:hover .svc-mega-scp-icon i { color: var(--orange); }

/* Text column — 4pt spacing scale, type ratio ~1.33, hierarchy through size + weight + color */
.svc-mega-scp-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.svc-mega-scp-eyebrow {
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: .68rem;        /* xs */
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--orange);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;       /* 4pt: tight gap to title */
}
.svc-mega-new {
  background: var(--orange);
  color: var(--white);
  padding: 2px 8px;
  border-radius: 100px;
  font-size: .58rem;
  letter-spacing: .06em;
  font-weight: 800;
}
.svc-mega-scp-title {
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  font-size: 1.05rem;       /* lg — clear hero in text column, 1.55x sub */
  color: var(--navy);
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin-bottom: 8px;       /* 8pt: more breath after title */
}
.svc-mega-scp-sub {
  font-size: .82rem;        /* sm */
  color: #6b7a99;
  font-family: 'Nunito', sans-serif;
  font-weight: 500;
  line-height: 1.55;        /* generous leading for narrow column */
  margin-bottom: 16px;      /* 16pt: clear visual break before CTA */
  max-width: 56ch;
}
.svc-mega-scp-sub strong { color: var(--navy); font-weight: 700; }

/* Lock text colors on hover — prevent global a:hover orange from bleeding through */
.svc-mega-scp:hover .svc-mega-scp-eyebrow { color: var(--orange); }
.svc-mega-scp:hover .svc-mega-scp-title { color: var(--navy); }
.svc-mega-scp:hover .svc-mega-scp-sub { color: #6b7a99; }
.svc-mega-scp:hover .svc-mega-scp-sub strong { color: var(--navy); }
.svc-mega-scp:hover .svc-mega-new { color: var(--white); }

/* Learn more — pill button at bottom of text column. Override cascade for arrow color. */
.svc-mega-scp .svc-mega-scp-cta {
  align-self: flex-start;
  background: var(--orange);
  color: var(--white);
  padding: 9px 18px 9px 20px;
  border-radius: 100px;
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: .8rem;
  letter-spacing: .01em;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 3px 8px -2px rgba(255, 92, 26, 0.35);
  transition: background 220ms ease, box-shadow 280ms ease, transform 280ms ease;
}
.svc-mega-scp .svc-mega-scp-cta i {
  color: var(--white);
  font-size: .72rem;
  width: auto;
  transition: transform 220ms ease;
}
.svc-mega-scp:hover .svc-mega-scp-cta {
  background: #ff5300;
  box-shadow: 0 6px 14px -2px rgba(255, 92, 26, 0.5);
}
.svc-mega-scp:hover .svc-mega-scp-cta i {
  color: var(--white);
  transform: translateX(3px);
}

.svc-mega-beyond {
  background: var(--off);
  border-radius: 14px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.svc-mega-beyond-label {
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: .64rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gray);
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.svc-mega-beyond-label i { color: var(--cyan); font-size: .68rem; }
.svc-mega-beyond > a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 6px;
  border-radius: 6px;
  text-decoration: none;
  color: var(--navy);
  font-family: 'Nunito', sans-serif;
  font-size: .82rem;
  font-weight: 600;
  transition: color 200ms ease;
}
.svc-mega-beyond > a:hover { color: var(--blue); }
.svc-mega-beyond > a > i {
  color: var(--cyan);
  font-size: .8rem;
  width: 18px;
  text-align: center;
  flex-shrink: 0;
}

@media (max-width: 1100px) {
  .mega-dropdown.svc-mega { width: 760px; }
  .svc-mega-cols { grid-template-columns: 1.3fr 1fr; gap: 16px; }
  .svc-mega-cols .svc-mega-col:nth-child(3) { display: none; }
  .svc-mega-bottom { grid-template-columns: 1fr; }
}

/* ============ SVC MEGA-MENU BOTTOM v2 — single navy strip + quiet text row ============ */
.svc-mega-bottom--v2 {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding-top: 18px;
  border-top: 1px solid var(--hairline);
  margin-top: 14px;
}

/* Primary CTA strip — navy ribbon, single horizontal row.
   Defensive: bulletproof background + !important on critical visibility props
   so a stale .home-scp-banner cache cannot bleed through. */
.svc-mega-bottom--v2 a.scp-strip,
a.scp-strip,
.scp-strip {
  display: flex !important;
  align-items: center;
  gap: 18px;
  padding: 18px 24px !important;
  background-color: #0a0f2e !important;
  background-image: linear-gradient(135deg, #0a0f2e 0%, #0d1b5e 55%, #0a1840 100%) !important;
  border: 1px solid rgba(0, 212, 255, 0.14) !important;
  border-radius: 14px !important;
  text-decoration: none !important;
  color: #ffffff !important;
  margin: 0 !important;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: transform 240ms cubic-bezier(.2,.8,.2,1),
              box-shadow 240ms cubic-bezier(.2,.8,.2,1),
              border-color 240ms;
}
.scp-strip::before {
  content: '';
  position: absolute;
  top: -60%; right: -8%;
  width: 360px; height: 360px;
  background: radial-gradient(circle, rgba(0,212,255,0.14) 0%, transparent 65%);
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  transition: opacity 280ms, transform 600ms cubic-bezier(.2,.8,.2,1);
  opacity: .9;
}
.scp-strip > * { position: relative; z-index: 1; }
.scp-strip:hover {
  transform: translateY(-1px);
  border-color: rgba(0, 212, 255, 0.32) !important;
  box-shadow: 0 16px 38px rgba(10,15,46,.48);
}
.scp-strip:hover::before { opacity: 1; transform: translate(-12px, 8px); }
.scp-strip:hover .scp-strip-cta i { transform: translateX(5px); }
.scp-strip:hover .scp-strip-metaphor { color: #ffb27a !important; }
.scp-strip:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
}

.scp-strip-icon {
  width: 38px; height: 38px; flex-shrink: 0;
  border-radius: 11px;
  background: rgba(0,212,255,0.14);
  border: 1px solid rgba(0,212,255,0.32);
  color: var(--cyan) !important;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.05rem;
}

.scp-strip-name {
  display: inline-flex; align-items: center; gap: 10px;
  color: #ffffff !important;
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  font-size: 1rem;
  line-height: 1;
  letter-spacing: 0.005em;
  white-space: nowrap;
}
.scp-strip-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 0 0 rgba(0, 212, 255, 0.55);
  animation: scpStripPulse 2.4s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes scpStripPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0, 212, 255, 0.55); }
  50%      { box-shadow: 0 0 0 7px rgba(0, 212, 255, 0); }
}
.scp-strip-new {
  font-family: 'Outfit', sans-serif;
  font-size: .64rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cyan) !important;
  line-height: 1;
}

.scp-strip-sep {
  color: rgba(255,255,255,0.20) !important;
  font-weight: 700;
  font-size: 1.1rem;
  line-height: 1;
  flex-shrink: 0;
  user-select: none;
}

.scp-strip-metaphor {
  font-family: 'Outfit', sans-serif;
  font-style: italic;
  font-weight: 600;
  color: #ff8c42 !important;
  font-size: .94rem;
  line-height: 1.1;
  white-space: nowrap;
  letter-spacing: 0;
  transition: color 220ms ease;
}

.scp-strip-pricing {
  display: inline-flex; align-items: baseline; gap: 9px;
  color: rgba(255,255,255,0.74) !important;
  font-family: 'Nunito', sans-serif;
  font-weight: 600;
  font-size: .84rem;
  line-height: 1;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.scp-strip-pricing strong { color: #ffffff !important; font-weight: 700; }
.scp-strip-sep-soft { color: rgba(255,255,255,0.20) !important; font-weight: 700; }

.scp-strip-cta {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--orange) !important;
  color: #ffffff !important;
  padding: 11px 22px;
  border-radius: 100px;
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: .88rem;
  letter-spacing: 0.005em;
  line-height: 1;
  white-space: nowrap;
  box-shadow: 0 4px 18px rgba(255,92,26,0.32);
  transition: background 200ms, box-shadow 240ms, gap 240ms cubic-bezier(.2,.8,.2,1);
}
.scp-strip-cta:hover {
  background: var(--orange-hover) !important;
  box-shadow: 0 6px 24px rgba(255,92,26,0.46);
  gap: 12px;
}
.scp-strip-cta i {
  font-size: .82rem;
  transition: transform 240ms cubic-bezier(.2,.8,.2,1);
}

/* Secondary — quiet text row for Beyond Laptops (sits above SCP card) */
.svc-beyond-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 14px;
  padding: 0 8px 12px;
  font-family: 'Nunito', sans-serif;
  font-size: .82rem;
}
.svc-beyond-label {
  color: var(--gray);
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-size: .68rem;
  margin-right: 4px;
}
.svc-beyond-row a {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--navy-gray);
  text-decoration: none;
  font-weight: 600;
  transition: color 160ms;
}
.svc-beyond-row a i { color: var(--blue); font-size: .78rem; opacity: .8; }
.svc-beyond-row a:hover { color: var(--blue); }
.svc-beyond-row a:hover i { opacity: 1; }
.svc-beyond-sep { color: var(--light-gray); font-weight: 700; }

/* Responsive — narrow viewports stack the strip's CTA below the meta */
@media (max-width: 1100px) {
  .scp-strip { flex-wrap: wrap; padding: 14px 18px; }
  .scp-strip-cta { margin-left: 0; flex: 1 0 100%; justify-content: center; margin-top: 6px; }
}
@media (max-width: 720px) {
  .scp-strip-pricing { flex-basis: 100%; padding-top: 4px; }
  .scp-strip-sep:nth-of-type(2) { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .scp-strip-dot { animation: none; }
  .scp-strip-cta i { transition: none; }
  .scp-strip { transition: none; }
  .scp-strip:hover { transform: none; }
}

/* ============ SVC MEGA-MENU BOTTOM v3 — cream horizontal SCP card + Beyond Laptops row ============ */
.svc-mega-bottom--v3 {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding-top: 0;
  border-top: 1px solid var(--hairline);
  margin-top: 10px;
}

/* Single horizontal cream card — matches the homepage SCP banner aesthetic */
.svc-mega-bottom--v3 a.scp-card,
a.scp-card,
.scp-card {
  display: flex !important;
  align-items: center;
  gap: 24px;
  padding: 22px 26px !important;
  background: linear-gradient(135deg, rgba(255, 92, 26, .09), rgba(255, 158, 11, .14)) !important;
  background-color: #fff7ee !important;
  border: 1.5px solid rgba(255, 92, 26, .22) !important;
  border-radius: 18px !important;
  text-decoration: none !important;
  color: var(--navy) !important;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  margin: 0 !important;
  transition: transform 240ms cubic-bezier(.2,.8,.2,1),
              box-shadow 240ms cubic-bezier(.2,.8,.2,1),
              border-color 240ms;
}
.scp-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 0% 50%, rgba(255, 92, 26, .12), transparent 55%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 220ms ease;
  z-index: 0;
}
.scp-card > * { position: relative; z-index: 1; }
.scp-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 40px -12px rgba(255, 92, 26, .28);
  border-color: var(--orange) !important;
}
.scp-card:hover::before { opacity: 1; }
.scp-card:hover .scp-card-cta i { transform: translateX(5px); }
.scp-card:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 3px;
}

/* Icon — orange shield, prominent (no background container).
   High specificity + !important to beat .svc-mega icon-size constraints. */
.svc-mega-bottom--v3 .scp-card .scp-card-icon,
.scp-card .scp-card-icon {
  flex-shrink: 0 !important;
  width: 120px !important;
  height: 120px !important;
  background: transparent !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 0 !important;
}
.svc-mega-bottom--v3 .scp-card .scp-card-icon i,
.scp-card .scp-card-icon i,
.scp-card-icon > i.fa-solid,
.scp-card-icon > i {
  font-size: 5rem !important;
  color: var(--orange) !important;
  line-height: 1 !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
}

/* Body — eyebrow / headline / sub stack */
.scp-card-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.scp-card-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'Outfit', sans-serif;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--blue) !important;
  line-height: 1;
}
.scp-card-new {
  background: var(--orange) !important;
  color: #fff !important;
  font-size: .58rem;
  font-weight: 800;
  letter-spacing: .10em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 100px;
  line-height: 1;
}

.scp-card-title {
  font-family: 'Outfit', sans-serif;
  font-size: 1.18rem;
  font-weight: 800;
  line-height: 1.25;
  color: var(--navy) !important;
  margin: 0;
  letter-spacing: -0.005em;
}
.scp-card-title .scp-metaphor {
  color: var(--orange) !important;
  font-style: italic;
  font-weight: 800;
  margin-right: 0;
  font-family: 'Outfit', sans-serif;
  display: block;
  margin-bottom: 2px;
}
.scp-card-title .scp-card-tag {
  color: var(--navy) !important;
  font-style: normal;
  font-weight: 800;
  display: block;
}

.scp-card-sub {
  font-family: 'Nunito', sans-serif;
  font-size: .88rem;
  line-height: 1.5;
  color: var(--gray) !important;
  margin: 0;
  font-variant-numeric: tabular-nums;
}
.scp-card-sub strong {
  color: var(--navy) !important;
  font-weight: 700;
}
.scp-card-fine {
  font-family: 'Nunito', sans-serif;
  font-size: .82rem;
  line-height: 1.35;
  color: var(--gray) !important;
  margin: 0;
  opacity: .85;
}

/* CTA — orange pill on the right */
.scp-card-cta {
  flex-shrink: 0;
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--orange) !important;
  color: #ffffff !important;
  padding: 13px 26px;
  border-radius: 100px;
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: .95rem;
  letter-spacing: 0.005em;
  line-height: 1;
  white-space: nowrap;
  box-shadow: 0 6px 20px rgba(255, 92, 26, .32);
  transition: background 200ms, box-shadow 240ms, gap 240ms cubic-bezier(.2,.8,.2,1);
}
.scp-card:hover .scp-card-cta {
  background: var(--orange-hover) !important;
  box-shadow: 0 8px 26px rgba(255, 92, 26, .44);
  gap: 13px;
}
.scp-card-cta i {
  font-size: .88rem;
  color: #ffffff !important;
  transition: transform 240ms cubic-bezier(.2,.8,.2,1);
}

/* Responsive — stack on narrow */
@media (max-width: 1100px) {
  .scp-card { flex-wrap: wrap; padding: 18px 20px !important; gap: 18px; }
  .scp-card-cta { margin-left: 0; flex: 1 0 100%; justify-content: center; margin-top: 4px; }
}
@media (max-width: 720px) {
  .scp-card { gap: 14px; }
  .scp-card-icon { width: 52px; height: 52px; }
  .scp-card-icon i { font-size: 1.6rem; }
  .scp-card-title { font-size: 1.05rem; }
  .scp-card-title .scp-metaphor,
  .scp-card-title .scp-card-tag { display: block; }
  .scp-card-title .scp-metaphor { margin-bottom: 2px; margin-right: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .scp-card,
  .scp-card-cta i { transition: none; }
  .scp-card:hover { transform: none; }
}

/* Brands mega-dropdown — 4-col share-led grouping (Top 5 · Premium · Specialist · Projectors) */
.mega-dropdown.mega-dropdown-brands {
  grid-template-columns: 1fr 1fr 1fr 1fr;
  width: 980px;
  padding: 22px 22px 18px;
  gap: 16px;
}
@media (max-width: 1100px) {
  .mega-dropdown.mega-dropdown-brands { grid-template-columns: 1fr 1fr; width: 560px; }
}

/* Featured Service Care Pack card spanning full mega-dropdown */
.mega-dropdown a.mega-feature-card,
.mega-dropdown a.mega-feature-card:hover {
  background: linear-gradient(135deg, rgba(255, 92, 26, .10), rgba(255, 158, 11, .14));
  color: inherit;
}
.mega-feature-card {
  grid-column: 1 / -1;
  margin-top: 14px;
  border: 1px solid rgba(255, 92, 26, .35);
  border-radius: 14px;
  padding: 18px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  text-decoration: none;
}
.mega-feature-card .mfc-left { display: flex; align-items: stretch; gap: 18px; flex: 1; min-width: 0; }
.mega-feature-card .mfc-icon {
  color: var(--orange);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.mega-dropdown a.mega-feature-card .mfc-icon i {
  font-size: 3.6rem;
  line-height: 1;
  width: auto;
  color: var(--orange);
}
.mega-feature-card .mfc-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.mega-feature-card .mfc-eyebrow {
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  font-size: .64rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--orange);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.mega-feature-card .mfc-eyebrow .mfc-badge {
  background: var(--orange);
  color: var(--white);
  padding: 1px 8px;
  border-radius: 100px;
  font-size: .58rem;
  letter-spacing: .12em;
}
.mega-feature-card .mfc-title {
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  font-size: 1rem;
  color: var(--navy);
  line-height: 1.2;
}
.mega-feature-card .mfc-sub {
  font-family: 'Nunito', sans-serif;
  font-size: .82rem;
  color: var(--gray);
  font-weight: 600;
  line-height: 1.3;
}
.mega-feature-card .mfc-sub strong { color: var(--orange); font-weight: 800; }
.mega-feature-card .mfc-cta {
  background: var(--orange);
  color: var(--white) !important;
  padding: 10px 20px;
  border-radius: 100px;
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: .86rem;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background 200ms ease;
  white-space: nowrap;
}
.mega-feature-card:hover .mfc-cta { background: #e65100; }
.mega-dropdown a.mega-feature-card .mfc-cta i { color: var(--white); width: auto; }
@media (max-width: 1100px) { .mega-feature-card { display: none; } }

/* Locations mega-dropdown — 2 columns: rich Store card + Service Areas grid */
.mega-dropdown.mega-dropdown-locations {
  grid-template-columns: minmax(260px, 0.9fr) minmax(440px, 1.5fr);
  width: 860px;
  padding: 18px;
  gap: 16px;
}
.mdl-store {
  background: linear-gradient(135deg, var(--navy) 0%, #0f1638 100%);
  color: var(--white) !important;
  border-radius: 14px;
  padding: 22px 20px !important;
  display: flex !important;
  flex-direction: column;
  align-items: flex-start !important;
  gap: 4px;
  position: relative;
  overflow: hidden;
  text-decoration: none;
  transition: transform 220ms ease, box-shadow 220ms ease;
}
.mega-dropdown a.mdl-store:hover {
  background: linear-gradient(135deg, var(--navy) 0%, #0f1638 100%) !important;
  color: var(--white) !important;
  transform: translateY(-2px);
  box-shadow: 0 14px 32px -10px rgba(10, 15, 46, .35);
}
.mdl-store::before {
  content: "";
  position: absolute;
  top: -40px; right: -40px;
  width: 140px; height: 140px;
  background: radial-gradient(circle, rgba(0, 212, 255, 0.25), transparent 70%);
  pointer-events: none;
}
.mdl-store-icon {
  width: 44px;
  height: 44px;
  background: var(--orange);
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  color: var(--white);
  margin-bottom: 12px;
  position: relative;
  z-index: 1;
}
.mega-dropdown .mdl-store .mdl-store-icon i { color: var(--white); width: auto; font-size: 1.2rem; }
.mdl-store-since {
  font-family: 'Outfit', sans-serif;
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cyan);
  font-weight: 800;
  margin-bottom: 4px;
  position: relative;
  z-index: 1;
}
.mdl-store-name {
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--white) !important;
  margin: 0 0 12px;
  position: relative;
  z-index: 1;
}
.mdl-store-addr,
.mdl-store-hours {
  font-family: 'Nunito', sans-serif;
  font-size: 0.78rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.82) !important;
  margin: 0 0 6px;
  display: flex;
  gap: 8px;
  align-items: flex-start;
  position: relative;
  z-index: 1;
}
.mega-dropdown a.mdl-store .mdl-store-addr i,
.mega-dropdown a.mdl-store .mdl-store-hours i {
  color: var(--cyan);
  font-size: 0.78rem;
  margin-top: 3px;
  flex-shrink: 0;
  width: auto;
}
.mdl-store-actions {
  margin-top: auto;
  padding-top: 14px;
  position: relative;
  z-index: 1;
}
.mdl-store-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 0.82rem;
  color: var(--cyan);
  border-bottom: 1px solid transparent;
  transition: gap 200ms ease, border-color 200ms ease;
}
.mega-dropdown a.mdl-store .mdl-store-cta i { color: var(--white); width: auto; }
.mega-dropdown a.mdl-store:hover .mdl-store-cta {
  gap: 12px;
  border-bottom-color: var(--cyan);
}

.mdl-areas {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 4px 4px 0;
}
.mdl-areas-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(10, 15, 46, 0.08);
}
.mdl-areas-eyebrow {
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--navy);
}
.mdl-areas-count {
  background: var(--orange);
  color: var(--white);
  padding: 3px 10px;
  border-radius: 100px;
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  font-size: 0.62rem;
  letter-spacing: 0.12em;
}
.mdl-areas-cols {
  display: grid;
  grid-template-columns: auto auto auto;
  justify-content: start;
  gap: 4px 24px;
}
.mdl-areas-col { display: flex; flex-direction: column; }
.mdl-areas-col .mega-label {
  display: flex;
  align-items: center;
  gap: 6px;
}
.mdl-areas-col .mega-label i { color: var(--orange); font-size: 0.8rem; width: auto; }
.mega-dropdown .mdl-areas a {
  padding: 5px 10px;
  font-size: 0.84rem;
  display: block;
}
.mdl-areas-foot {
  border-top: 1px solid rgba(10, 15, 46, 0.08);
  padding-top: 10px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.mdl-areas-foot > a { padding: 8px 10px; }
.mega-dropdown a.mdl-areas-all {
  color: var(--orange) !important;
  font-weight: 800;
  font-family: 'Outfit', sans-serif;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: gap 200ms ease;
}
.mega-dropdown a.mdl-areas-all:hover { gap: 12px; background: rgba(255, 92, 26, 0.08); color: var(--orange) !important; }
.mega-dropdown a.mdl-areas-all i { color: var(--orange); font-size: 0.85rem; width: auto; }
.mega-dropdown a.mdl-areas-whatsapp {
  color: var(--gray) !important;
  font-size: 0.78rem !important;
  font-weight: 600;
}
.mega-dropdown a.mdl-areas-whatsapp i { color: #25d366; }
.mega-dropdown a.mdl-areas-whatsapp:hover { color: var(--navy) !important; background: var(--off); }

@media (max-width: 1100px) {
  .mega-dropdown.mega-dropdown-locations {
    grid-template-columns: 1fr;
    width: 420px;
  }
  .mdl-store { padding: 18px 16px !important; }
}
.nav-links > li:hover > .mega-dropdown { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.mega-col { display: flex; flex-direction: column; }
.mega-label {
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--gray);
  padding: 0 12px 8px;
  margin-bottom: 2px;
  border-bottom: 1px solid #f0f2f8;
}
.mega-dropdown a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  color: var(--navy);
  font-family: 'Nunito', sans-serif;
  font-size: 0.84rem;
  font-weight: 600;
  border-radius: 6px;
  transition: all 0.15s;
}
.mega-dropdown a:hover { background: var(--off); color: var(--blue); }
.mega-dropdown a i {
  color: var(--blue);
  width: 16px;
  text-align: center;
  font-size: 0.78rem;
  flex-shrink: 0;
}
.mega-viewall {
  margin-top: 6px;
  color: var(--orange) !important;
  font-weight: 700 !important;
  border-top: 1px solid #f0f2f8;
  padding-top: 10px !important;
}
.mega-viewall:hover { color: #e5500f !important; background: #fff5f0 !important; }

.hamburger {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
}
.hamburger span {
  display: block;
  width: 26px;
  height: 3px;
  background: var(--white);
  margin: 5px 0;
  border-radius: 2px;
  transition: all 0.3s;
}

/* Mobile Nav */
.mobile-nav {
  display: none;
  position: fixed;
  top: 70px;
  left: 0;
  width: 100%;
  background: var(--navy);
  padding: 0;
  z-index: 999;
  max-height: calc(100vh - 70px);
  overflow-y: auto;
}
.mobile-nav.open { display: block; }
.mobile-nav > a {
  display: block;
  color: var(--white);
  font-family: 'Outfit', sans-serif;
  font-weight: 600;
  padding: 14px 24px;
  border-bottom: 1px solid var(--light-border);
  font-size: 0.95rem;
}
.mobile-nav > a:hover { background: rgba(255,255,255,0.05); }
.mob-accordion-toggle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--white);
  font-family: 'Outfit', sans-serif;
  font-weight: 600;
  padding: 14px 24px;
  border-bottom: 1px solid var(--light-border);
  font-size: 0.95rem;
  cursor: pointer;
}
.mob-accordion-toggle i { transition: transform 0.2s; font-size: 0.75rem; }
.mob-accordion {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s;
  background: rgba(0, 0, 0, 0.15);
}
.mob-accordion.open { max-height: 2000px; }
.mob-accordion a {
  display: block;
  color: rgba(255, 255, 255, 0.8);
  padding: 10px 24px 10px 40px;
  font-size: 0.88rem;
  font-family: 'Nunito', sans-serif;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.mob-accordion a:hover { color: var(--cyan); }

/* ============ HERO ============ */
/* margin-top must match the .nav-wrap height per breakpoint so the hero
   sits flush under the fixed header (no white gap, no overlap). */
.hero {
  margin-top: 86px;
  background: var(--navy);
  position: relative;
  padding: 80px 0 60px;
}
@media (max-width: 768px) {
  .hero { margin-top: 64px; }   /* match mobile .nav-wrap height */
  .content-hero { padding-top: 84px; }   /* mobile content-hero header offset */
}
.hero::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 480px;
  height: 100%;
  background: radial-gradient(circle at top right, rgba(0, 212, 255, 0.08) 0%, transparent 70%);
  pointer-events: none;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 40px;
  align-items: center;
}
.hero-text { color: var(--white); }

/* Stats row — "Hyderabad · Since 2007 · 60,000+ repairs · 4.7★" */
.hero-stats {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 14px;
  padding: 8px 16px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 100px;
  margin-bottom: 20px;
  backdrop-filter: blur(6px);
}
.hero-stats .stat {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'Outfit', sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.3px;
  color: rgba(255, 255, 255, 0.92);
  text-transform: uppercase;
  white-space: nowrap;
}
.hero-stats .stat i { color: var(--cyan); font-size: 0.82rem; }
.hero-stats .stat-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.30);
  flex-shrink: 0;
}

/* Typewriter headline — sized so even a ~22-char phrase stays on one line
   inside the hero-text column. Brand and product pages must keep phrases ≤21
   chars for consistent 1-line rendering. */
.hero-headline {
  font-size: clamp(2.2rem, 4.6vw, 3.4rem);
  font-weight: 900;
  letter-spacing: -0.5px;
  /* 1.2 line-height + inline-block padding keeps g/y/j descenders fully visible
     under background-clip: text (which tends to crop glyph tails). */
  line-height: 1.2;
  margin: 0 0 18px;
  color: var(--white);
  min-height: 1.25em; /* prevents layout shift as the text cycles */
  display: flex;
  align-items: baseline;
  flex-wrap: nowrap; /* never wrap; we size the phrases to fit */
  white-space: nowrap;
}
.hero-typewriter {
  display: inline-block;
  padding-bottom: 0.08em; /* extra room for descenders under background-clip:text */
  background: linear-gradient(90deg, var(--cyan) 0%, #7fe3ff 60%, var(--white) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.hero-cursor {
  display: inline-block;
  width: 4px;
  height: 0.9em;
  margin-left: 4px;
  background: var(--cyan);
  border-radius: 2px;
  animation: heroCursorBlink 1s steps(2, start) infinite;
  vertical-align: -6%;
}
@keyframes heroCursorBlink {
  to { visibility: hidden; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-cursor { animation: none; opacity: 0.6; }
}

/* Tagline — rotating support line that matches the typewriter phrase */
.hero-tagline {
  font-family: 'Nunito', sans-serif;
  font-size: 1.05rem;
  font-weight: 500;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.78);
  max-width: 560px;
  margin: 0 0 28px;
  min-height: 3.1em; /* two lines of breathing room; no layout jump on swap */
  transition: opacity 0.28s ease;
}
.hero-tagline.is-fading { opacity: 0; }

/* Subhead — H3-sized promise line with a left accent bar.
   Block-level (not flex) so text can wrap naturally; bar is absolutely
   positioned so it never fights with word spacing. */
.hero-subhead {
  position: relative;
  padding-left: 16px;
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: clamp(1.2rem, 2.4vw, 1.6rem);
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.96);
  margin: 0 0 16px;
  max-width: 560px;
}
.hero-subhead::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.2em;
  bottom: 0.2em;
  width: 4px;
  background: linear-gradient(180deg, var(--cyan) 0%, var(--blue) 100%);
  border-radius: 3px;
}
.hero-subhead .cyan { color: var(--cyan); }
.hero-subhead .subhead-note {
  font-family: 'Nunito', sans-serif;
  font-size: 0.62em;
  font-weight: 500;
  letter-spacing: 0;
  color: rgba(255, 255, 255, 0.68);
  white-space: nowrap;
  vertical-align: 0.18em;
  margin-left: 4px;
}

/* Lede question — "Got issues with your [Dell]?" — brand rotator lives here.
   Its own block so brand-name length changes never reflow the body line below. */
.hero-lede-q {
  font-family: 'Outfit', sans-serif;
  font-weight: 600;
  font-size: 1.15rem;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.92);
  margin: 0 0 8px;
  max-width: 520px;
}
.hero-lede-q strong {
  color: var(--white);
  font-weight: 700;
}

/* Lede body — compact trust line; details live in the highlights bar below.
   Always on its own line, independent of the rotator above. */
.hero-lede {
  display: block;
  color: rgba(255, 255, 255, 0.72);
  font-size: 1rem;
  line-height: 1.6;
  margin: 0 0 26px;
  max-width: 520px;
}
.hero-lede strong {
  color: var(--white);
  font-weight: 700;
}

/* Rotating brand name — inline-block so length swaps don't nudge the body line. */
.hero-brand-rotate {
  display: inline-block;
  color: var(--cyan);
  transition: opacity 0.28s ease, transform 0.28s ease;
  min-width: 1ch;
}
.hero-brand-rotate.is-fading {
  opacity: 0;
  transform: translateY(-4px);
}
.hero-btns { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 28px; }

.trust-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  padding-top: 24px;
  border-top: 1px solid var(--light-border);
}
.trust-item {
  display: flex;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.9rem;
  font-weight: 600;
}
.trust-item .icon { font-size: 1.2rem; }

/* Issue chips — "what we fix" row in the hero */
.issue-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 24px;
  border-top: 1px solid var(--light-border);
  max-width: 560px;
}
.issue-chips .chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 100px;
  color: rgba(255, 255, 255, 0.92);
  font-family: 'Nunito', sans-serif;
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}
.issue-chips .chip i {
  color: var(--cyan);
  font-size: 0.85rem;
}

/* Hero Booking Card */
.hero-card {
  background: var(--white);
  border-radius: var(--card-radius);
  padding: 32px 28px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.30);
  position: relative;
}
.hero-card h3 { text-align: center; margin-bottom: 6px; font-size: 1.3rem; }
.hero-card .card-sub { text-align: center; color: var(--gray); font-size: 0.9rem; margin-bottom: 20px; }
.hero-card .price-badge {
  display: block;
  text-align: center;
  background: var(--off);
  border-radius: 100px;
  padding: 8px 20px;
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--blue);
  margin-bottom: 20px;
}

.form-group { margin-bottom: 14px; }
.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 12px 16px;
  border: 1.5px solid var(--light-gray);
  border-radius: 10px;
  font-family: 'Nunito', sans-serif;
  font-size: 0.95rem;
  color: var(--navy);
  background: var(--white);
  transition: border-color 0.2s, box-shadow 0.2s;
  outline: none;
  height: 48px;
  box-sizing: border-box;
}
.form-group select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7a99' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 34px;
  /* Prevent the placeholder/option text from getting clipped mid-word in narrow
     sidebar cards. Truncate cleanly with ellipsis instead of breaking layout. */
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.form-group input:focus,
.form-group select:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(26, 61, 228, 0.08);
}
.form-submit {
  width: 100%;
  padding: 14px;
  background: var(--orange);
  color: var(--white);
  border: none;
  border-radius: var(--btn-radius);
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 1.05rem;
  cursor: pointer;
  transition: all 0.25s;
  box-shadow: 0 4px 24px rgba(255, 92, 26, 0.35);
}
.form-submit:hover {
  background: #e5500f;
  transform: translateY(-1px);
  box-shadow: 0 8px 32px rgba(255, 92, 26, 0.50);
}

/* ============ ISSUE PICKER (searchable + categorized dropdown) ============ */
.issue-picker { position: relative; }
.issue-picker-trigger {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; height: 48px; padding: 12px 16px;
  border: 1.5px solid var(--light-gray); border-radius: 10px;
  background: var(--white); color: var(--navy);
  font-family: 'Nunito', sans-serif; font-size: .95rem; font-weight: 600;
  cursor: pointer; text-align: left; box-sizing: border-box;
  transition: border-color .2s, box-shadow .2s;
}
.issue-picker-trigger:hover { border-color: var(--blue); }
/* Focus state distinct from input fields so keyboard users can see they're
   on the picker (trigger is a button, not an input — needs its own treatment) */
.issue-picker-trigger:focus,
.issue-picker-trigger:focus-visible,
.issue-picker[data-open="true"] .issue-picker-trigger {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 4px rgba(26,61,228,.25), 0 4px 12px rgba(26,61,228,.18);
}
.issue-picker-trigger:focus-visible .fa-chevron-down,
.issue-picker-trigger:focus       .fa-chevron-down { color: var(--blue); }
.issue-picker-label {
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--gray); font-weight: 600;
}
.issue-picker-label.is-set { color: var(--navy); font-weight: 700; }
.issue-picker-trigger .fa-chevron-down {
  font-size: .75rem; color: var(--gray); transition: transform .2s;
}
.issue-picker[data-open="true"] .issue-picker-trigger .fa-chevron-down { transform: rotate(180deg); color: var(--blue); }

.issue-picker-panel {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 200;
  background: var(--white); border: 1.5px solid var(--blue);
  border-radius: 14px; box-shadow: 0 24px 48px -12px rgba(10,15,46,.18), 0 4px 12px rgba(10,15,46,.06);
  overflow: hidden;
  display: flex; flex-direction: column;
  max-height: 380px;
}
.issue-picker-panel[hidden] { display: none; }
.issue-picker-search {
  position: relative; padding: 12px 14px 10px; border-bottom: 1px solid var(--off);
  flex-shrink: 0;
}
.issue-picker-search .fa-magnifying-glass {
  position: absolute; left: 26px; top: 50%; transform: translateY(-50%);
  color: var(--gray); font-size: .85rem; pointer-events: none;
}
.issue-picker-search input {
  width: 100%; height: 38px; padding: 0 14px 0 36px;
  border: 1.5px solid var(--light-gray); border-radius: 8px;
  background: var(--off); color: var(--navy);
  font-family: 'Nunito', sans-serif; font-size: .9rem;
  outline: none; transition: border-color .2s, background .2s;
  box-sizing: border-box;
}
.issue-picker-search input:focus { border-color: var(--blue); background: var(--white); }
.issue-picker-search input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }

.issue-picker-tabs {
  display: flex; gap: 4px; padding: 8px 12px; border-bottom: 1px solid var(--off);
  overflow-x: auto; flex-shrink: 0; scrollbar-width: none;
}
.issue-picker-tabs::-webkit-scrollbar { display: none; }
.issue-picker-tab {
  flex-shrink: 0;
  padding: 6px 12px; border: 1.5px solid transparent; border-radius: 100px;
  background: transparent; color: var(--gray);
  font-family: 'Outfit', sans-serif; font-weight: 700; font-size: .78rem;
  letter-spacing: .02em; cursor: pointer; white-space: nowrap;
  transition: all .15s ease;
}
.issue-picker-tab:hover { color: var(--navy); background: var(--off); }
.issue-picker-tab.is-active {
  background: var(--blue); color: var(--white); border-color: var(--blue);
}

.issue-picker-list {
  list-style: none; margin: 0; padding: 6px 0;
  overflow-y: auto; flex: 1;
  scrollbar-width: thin; scrollbar-color: var(--light-gray) transparent;
}
.issue-picker-list::-webkit-scrollbar { width: 6px; }
.issue-picker-list::-webkit-scrollbar-thumb { background: var(--light-gray); border-radius: 3px; }
.issue-picker-group {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 16px 6px;
  font-family: 'Outfit', sans-serif; font-weight: 800;
  font-size: .68rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--blue);
}
.issue-picker-group i { font-size: .8rem; }
.issue-picker-option {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 16px; cursor: pointer;
  font-family: 'Nunito', sans-serif; font-size: .9rem; font-weight: 600;
  color: var(--navy);
  transition: background .12s ease;
}
.issue-picker-option:hover,
.issue-picker-option.is-focused { background: var(--off); }
.issue-picker-option.is-selected { background: rgba(26,61,228,.06); color: var(--blue); }
.issue-picker-option i {
  width: 20px; text-align: center; color: var(--blue); font-size: .9rem;
  flex-shrink: 0;
}
.issue-picker-option mark {
  background: rgba(255,92,26,.18); color: inherit;
  padding: 0 2px; border-radius: 2px;
}
.issue-picker-empty {
  padding: 24px 16px; text-align: center;
  color: var(--gray); font-size: .9rem;
}
.issue-picker-empty strong { color: var(--navy); display: block; margin-bottom: 4px; }

@media (max-width: 600px) {
  .issue-picker-panel { max-height: 60vh; }
  .issue-picker-tab { font-size: .72rem; padding: 5px 10px; }
}

/* Notes textarea — optional always, gently highlighted when "Other" is picked */
.issue-notes {
  width: 100%; min-height: 44px; padding: 10px 14px;
  border: 1.5px solid var(--light-gray); border-radius: 10px;
  font-family: 'Nunito', sans-serif; font-size: .92rem; color: var(--navy);
  background: var(--white); resize: vertical;
  transition: border-color .2s, box-shadow .2s, min-height .25s;
  outline: none; box-sizing: border-box; line-height: 1.4;
}
.issue-notes::placeholder { color: var(--gray); }
.issue-notes:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(26,61,228,.08); min-height: 80px; }
.issue-notes.is-required {
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(255,92,26,.10);
  min-height: 80px;
}
.issue-notes.is-required::placeholder { color: var(--orange); font-weight: 600; }

/* ============ HIGHLIGHTS BAR ============ */
.highlights-bar {
  background: var(--white);
  border-top: 1px solid rgba(10,15,46,.08);
  border-bottom: 1px solid rgba(10,15,46,.08);
  padding: 0;
}
.highlights-bar-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0;
  padding: 14px 20px;
}
.hb-item {
  font-family: 'Nunito', sans-serif;
  font-weight: 600;
  font-size: .88rem;
  color: var(--navy);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 18px;
  border-right: 1px solid rgba(10,15,46,.08);
}
.hb-item:last-child { border-right: none; }
.hb-item i { color: var(--blue); font-size: 1rem; }
@media (max-width: 768px) {
  .highlights-bar-inner { flex-wrap: wrap; gap: 4px 0; padding: 10px 16px; }
  .hb-item { padding: 4px 12px; font-size: .82rem; }
  .hb-item:nth-child(2n) { border-right: none; }
}
/* Legacy .highlights-row + .highlight-chip used on other pages */
.highlights-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
}
.highlight-chip {
  background: transparent !important;
  padding: 10px 18px !important;
  border-radius: 0 !important;
  font-size: 0.9rem;
  font-weight: 600;
  box-shadow: none !important;
  border: none !important;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--navy);
}
.highlight-chip i { font-size: 1rem; }
@media (max-width: 768px) {
  .highlight-chip { padding: 6px 12px !important; font-size: 0.82rem; }
}

/* ============ SERVICES / BRANDS GRIDS ============ */
.services-section { background: var(--white); }
.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 24px;
}
/* Brand-hub variant — 6 model cards in a 2-col grid (3 rows × 2) */
.services-grid--2col { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 768px) {
  .services-grid--2col { grid-template-columns: 1fr; }
}
/* 3-col variant — 6 cards in 2 rows × 3 cols (e.g. /projector/ brand grid) */
.services-grid--3col { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) {
  .services-grid--3col { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .services-grid--3col { grid-template-columns: 1fr; }
}
/* SKU compatibility section — force 3 equal columns to fill page width
   (overrides auto-fill which can leave 3 cards looking like 4-col leftovers). */
#compatibility .services-grid {
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 900px) {
  #compatibility .services-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  #compatibility .services-grid { grid-template-columns: 1fr; }
}
.service-card {
  background: var(--white);
  border-radius: var(--card-radius);
  padding: 28px 24px;
  text-align: center;
  transition: all 0.3s;
  border: 1px solid rgba(10, 15, 46, .08);
  box-shadow: 0 1px 3px rgba(10, 15, 46, .04);
}
.service-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 28px rgba(26, 61, 228, .14);
  border-color: var(--blue);
}
.service-card .svc-icon { font-size: 2.4rem; margin-bottom: 12px; }
.service-card-icon {
  width: 76px;
  height: 76px;
  margin: 0 auto 16px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--blue) 0%, var(--cyan) 100%);
  color: var(--white);
  font-size: 1.9rem;
  box-shadow: 0 6px 18px rgba(26, 61, 228, 0.25);
}
.service-card:hover .service-card-icon {
  transform: scale(1.05);
  transition: transform 0.3s ease;
}
.service-card h4 { font-size: 1rem; margin-bottom: 8px; font-weight: 700; }
.service-card h4 a { color: var(--navy); }
.service-card h4 a:hover { color: var(--blue); }
.service-card p { color: var(--gray); font-size: 0.88rem; line-height: 1.5; margin-bottom: 0; }

.brand-links-section { background: var(--off); }
.brand-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 14px;
}
.brand-grid.desktop-services-3col { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .brand-grid.desktop-services-3col { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .brand-grid.desktop-services-3col { grid-template-columns: 1fr; } }
.brand-link {
  display: block;
  background: var(--white);
  border-radius: 10px;
  padding: 12px 16px;
  text-align: center;
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  color: var(--navy);
  font-size: 0.92rem;
  letter-spacing: 0.01em;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, color 0.2s ease;
  border: 1px solid rgba(10, 15, 46, 0.10);
  box-shadow: 0 1px 2px rgba(10, 15, 46, 0.04);
}
.brand-link:hover {
  color: var(--blue);
  background: var(--white);
  border-color: var(--blue);
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(26, 61, 228, 0.15);
}
.brand-link i { color: var(--blue); margin-right: 6px; }
.brand-link:hover i { color: var(--blue); }

/* Home page intro — labelled brand/service grids (legacy) */
.intro-discover { margin-bottom: 28px; }
.intro-discover-label {
  display: block;
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gray);
  margin-bottom: 16px;
  text-align: center;
}
.brand-grid-logos .brand-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.brand-grid-logos .brand-link img {
  width: 22px;
  height: 22px;
  object-fit: contain;
  flex-shrink: 0;
  opacity: 0.85;
  transition: opacity 200ms ease;
}
.brand-grid-logos .brand-link:hover img { opacity: 1; }

/* ==================================================================
   Discover Section v2 — redesigned brand & repair grids (homepage)
   ================================================================== */
.discover-pad { margin: 0 0 36px; }

.discover-label-row {
  display: flex; align-items: center; justify-content: center;
  gap: 12px; margin: 0 0 22px;
}
.discover-label-row .label {
  font-family: 'Outfit', sans-serif; font-weight: 800;
  font-size: .72rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--gray);
}
.discover-label-row .count-chip {
  font-family: 'Outfit', sans-serif; font-weight: 700;
  font-size: .68rem; letter-spacing: .04em;
  padding: 3px 10px; border-radius: 100px;
  background: rgba(26, 61, 228, .08); color: var(--blue);
}

/* ---- Brand grid v2 ---- */
.brand-grid-v2 {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px;
}
@media (max-width: 1024px) { .brand-grid-v2 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px)  { .brand-grid-v2 { grid-template-columns: repeat(2, 1fr); } }

.brand-tile {
  --tile-accent: var(--blue);
  display: flex; align-items: center; gap: 12px;
  background: var(--white);
  border: 1.5px solid rgba(10,15,46,.06);
  border-radius: 14px; padding: 14px 16px; min-height: 68px;
  text-decoration: none; color: var(--navy);
  position: relative; overflow: hidden; cursor: pointer;
  transition: transform 240ms cubic-bezier(.2,.8,.2,1),
              border-color 240ms ease,
              box-shadow 240ms ease;
}
.brand-tile:hover {
  transform: translateY(-3px);
  border-color: var(--tile-accent);
  box-shadow: 0 14px 32px color-mix(in srgb, var(--tile-accent) 22%, transparent);
}

/* Subtle gradient sheen on hover */
.brand-tile::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--tile-accent) 6%, transparent) 0%,
    transparent 60%);
  opacity: 0; transition: opacity 240ms ease; pointer-events: none;
  border-radius: inherit;
}
.brand-tile:hover::before { opacity: 1; }

/* Disc — holds either logo SVG or styled monogram */
.brand-disc {
  flex: 0 0 auto;
  width: 38px; height: 38px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--off);
  font-family: 'Outfit', sans-serif; font-weight: 800;
  font-size: .68rem; letter-spacing: .02em;
  color: var(--tile-accent);
  transition: background 240ms ease, color 240ms ease, transform 240ms cubic-bezier(.2,.8,.2,1);
}
.brand-tile:hover .brand-disc {
  background: var(--tile-accent); color: var(--white);
  transform: scale(1.06);
}
.brand-disc img {
  width: 22px; height: 22px; object-fit: contain;
  transition: filter 240ms ease;
}
/* Invert SVG to white when disc fills with brand color on hover */
.brand-tile:hover .brand-disc img { filter: brightness(0) invert(1); }

/* Solid-glyph logos (Apple bitten apple, Razer snake, Microsoft 4-square)
   fill more disc space than wordmark logos. Scale them down for visual balance. */
.brand-tile[data-brand="apple"] .brand-disc svg,
.brand-tile[data-brand="razer"] .brand-disc svg,
.brand-tile[data-brand="microsoft"] .brand-disc svg {
  width: 22px;
  height: 22px;
}

/* Xiaomi/Mi: the official Mi mark IS a rounded-square — putting it in a
   circular disc creates 4 cream crescents at the corners on hover. Make the
   disc match the logo's shape (rounded-square, same border-radius as the Mi
   glyph) and let the SVG fill cleanly to its edges. */
.brand-tile[data-brand="xiaomi"] .brand-disc {
  border-radius: 22%;
}
.brand-tile[data-brand="xiaomi"] .brand-disc svg {
  width: 28px !important;
  height: 28px !important;
}

.brand-tile-text {
  display: flex; flex-direction: column; gap: 1px;
  min-width: 0; flex: 1; line-height: 1.2;
}
.brand-tile-name {
  font-family: 'Outfit', sans-serif; font-weight: 700; font-size: .94rem;
  color: var(--navy);
}
.brand-tile-sub {
  font-family: 'Nunito', sans-serif; font-weight: 500; font-size: .72rem;
  color: var(--gray); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.brand-tile-arrow {
  flex: 0 0 auto; font-size: .72rem; color: var(--gray);
  opacity: 0; transform: translateX(-6px);
  transition: opacity 220ms ease, transform 240ms cubic-bezier(.2,.8,.2,1),
              color 220ms ease;
}
.brand-tile:hover .brand-tile-arrow {
  opacity: 1; transform: translateX(0); color: var(--tile-accent);
}

/* Brand accent colors (CSS variable per data-brand) */
.brand-tile[data-brand="hp"]        { --tile-accent: #0096d6; }
.brand-tile[data-brand="lenovo"]    { --tile-accent: #e2231a; }
.brand-tile[data-brand="acer"]      { --tile-accent: #83b81a; }
.brand-tile[data-brand="dell"]      { --tile-accent: #007db8; }
.brand-tile[data-brand="asus"]      { --tile-accent: #00539b; }
.brand-tile[data-brand="apple"]     { --tile-accent: #1d1d1f; }
.brand-tile[data-brand="samsung"]   { --tile-accent: #1428a0; }
.brand-tile[data-brand="xiaomi"]    { --tile-accent: #ff6900; }
.brand-tile[data-brand="honor"]     { --tile-accent: #c8102e; }
.brand-tile[data-brand="msi"]       { --tile-accent: #b80000; }
.brand-tile[data-brand="razer"]     { --tile-accent: #2bbf3a; }
.brand-tile[data-brand="microsoft"] { --tile-accent: #00a4ef; }
.brand-tile[data-brand="lg"]        { --tile-accent: #a50034; }
.brand-tile[data-brand="sony"]      { --tile-accent: #1d1d1f; }
.brand-tile[data-brand="toshiba"]   { --tile-accent: #d50000; }

/* ---- Divider between grids ---- */
.discover-divider {
  display: flex; align-items: center; justify-content: center; gap: 18px;
  margin: 26px 0;
  font-family: 'Nunito', sans-serif; font-size: .9rem; color: var(--gray);
}
.discover-divider::before, .discover-divider::after {
  content: ''; flex: 1; max-width: 120px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(10,15,46,.14), transparent);
}
.discover-divider .nudge-link {
  color: var(--orange); font-weight: 700; text-decoration: none;
  border-bottom: 1.5px solid transparent;
  padding-bottom: 1px; transition: border-color 200ms ease;
}
.discover-divider .nudge-link i { margin-right: 4px; }
.discover-divider .nudge-link:hover { border-color: var(--orange); }

/* ---- Repair grid v2 ---- */
.repair-grid-v2 {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px;
}
@media (max-width: 1024px) { .repair-grid-v2 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px)  { .repair-grid-v2 { grid-template-columns: repeat(2, 1fr); } }

.repair-tile {
  --tile-accent: var(--blue);
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 10px; background: var(--white);
  border: 1.5px solid rgba(10,15,46,.06);
  border-radius: 16px; padding: 18px 18px;
  min-height: 118px; text-decoration: none; color: var(--navy);
  position: relative; overflow: hidden; cursor: pointer;
  transition: transform 260ms cubic-bezier(.2,.8,.2,1),
              border-color 240ms ease,
              box-shadow 240ms ease;
}
.repair-tile:hover {
  transform: translateY(-4px);
  border-color: var(--tile-accent);
  box-shadow: 0 18px 36px rgba(10,15,46,.12);
}
.repair-tile-icon {
  width: 46px; height: 46px; border-radius: 13px;
  display: inline-flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--tile-accent) 10%, transparent);
  color: var(--tile-accent); font-size: 1.2rem;
  transition: transform 360ms cubic-bezier(.2,.8,.2,1),
              background 240ms ease,
              color 240ms ease;
}
.repair-tile:hover .repair-tile-icon {
  transform: rotate(-8deg) scale(1.08);
  background: var(--tile-accent); color: var(--white);
}
.repair-tile-name {
  font-family: 'Outfit', sans-serif; font-weight: 700;
  font-size: .96rem; line-height: 1.25; color: var(--navy);
  margin: 0;
}
.repair-tile-price {
  font-family: 'Nunito', sans-serif; font-weight: 600;
  font-size: .76rem; color: var(--gray); margin-top: auto;
}
.repair-tile-price strong {
  color: var(--tile-accent); font-weight: 700;
}
.repair-tile[data-tone="urgent"]   { --tile-accent: var(--orange); }
.repair-tile[data-tone="cyan"]     { --tile-accent: #1aa9d6; }
.repair-tile[data-tone="purple"]   { --tile-accent: #6e3fbf; }
.repair-tile[data-tone="emerald"]  { --tile-accent: #1aa37a; }

/* ---- Stagger reveal ---- */
.discover-pad .brand-tile,
.discover-pad .repair-tile {
  opacity: 0; transform: translateY(14px);
  transition: opacity 520ms cubic-bezier(.2,.8,.2,1),
              transform 520ms cubic-bezier(.2,.8,.2,1),
              border-color 240ms ease,
              box-shadow 240ms ease;
  transition-delay: calc(var(--stagger-i, 0) * 28ms);
}
.discover-pad.is-visible .brand-tile,
.discover-pad.is-visible .repair-tile {
  opacity: 1; transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .discover-pad .brand-tile,
  .discover-pad .repair-tile {
    opacity: 1 !important; transform: none !important; transition-delay: 0ms !important;
  }
  .brand-tile:hover, .repair-tile:hover { transform: none !important; }
  .repair-tile:hover .repair-tile-icon { transform: none !important; }
}
.brand-link-feature {
  background: linear-gradient(135deg, rgba(255, 92, 26, .08), rgba(255, 158, 11, .12)) !important;
  border-color: rgba(255, 92, 26, .25) !important;
  color: var(--orange) !important;
  font-weight: 700;
}
.brand-link-feature i { color: var(--orange) !important; }
.brand-link-feature:hover {
  background: linear-gradient(135deg, rgba(255, 92, 26, .14), rgba(255, 158, 11, .20)) !important;
  border-color: var(--orange) !important;
}

/* Home page Service Care Pack featured banner */
.home-scp-banner {
  display: flex;
  align-items: center;
  gap: 28px;
  background: linear-gradient(135deg, rgba(255, 92, 26, .10), rgba(255, 158, 11, .15));
  border: 1.5px solid rgba(255, 92, 26, .25);
  border-radius: 18px;
  padding: 26px 32px;
  text-decoration: none;
  margin-top: 28px;
  position: relative;
  overflow: hidden;
  transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}
.home-scp-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 0% 50%, rgba(255, 92, 26, .12), transparent 50%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 220ms ease;
}
.home-scp-banner:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 40px -12px rgba(255, 92, 26, .28);
  border-color: var(--orange);
}
.home-scp-banner:hover::before { opacity: 1; }
.home-scp-icon {
  flex-shrink: 0;
  font-size: 4rem;
  line-height: 1;
  color: var(--orange);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.home-scp-body { flex: 1; min-width: 0; position: relative; z-index: 1; }
.home-scp-eyebrow {
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--blue);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.home-scp-new {
  background: var(--orange);
  color: var(--white);
  padding: 2px 9px;
  border-radius: 100px;
  font-size: 0.62rem;
  letter-spacing: 0.12em;
}
.home-scp-title {
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  color: var(--navy);
  font-size: 1.35rem;
  margin: 8px 0 8px;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.home-scp-sub {
  color: var(--gray);
  font-size: 0.95rem;
  line-height: 1.55;
  margin: 0;
}
.home-scp-sub strong { color: var(--navy); font-weight: 800; }
.home-scp-cta {
  flex-shrink: 0;
  background: var(--orange);
  color: var(--white);
  padding: 14px 26px;
  border-radius: 100px;
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
  transition: background 200ms ease, gap 200ms ease;
  position: relative;
  z-index: 1;
}
.home-scp-banner:hover .home-scp-cta { background: #e65100; gap: 14px; }
@media (max-width: 768px) {
  .home-scp-banner { flex-direction: column; align-items: flex-start; padding: 22px; gap: 18px; }
  .home-scp-icon { font-size: 3rem; }
  .home-scp-title { font-size: 1.1rem; }
  .home-scp-cta { width: 100%; justify-content: center; }
}

/* ============ HOW IT WORKS ============ */
.how-it-works { background: var(--white); }
.steps-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.step-card {
  background: var(--off);
  border-radius: var(--card-radius);
  padding: 30px 24px;
  text-align: center;
  position: relative;
}
.step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--blue);
  color: var(--white);
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  font-size: 1.1rem;
  margin-bottom: 14px;
}
.step-card h4 { margin-bottom: 8px; }
.step-card p { color: var(--gray); font-size: 0.9rem; margin-bottom: 0; }

/* ============ WHY US ============ */
.why-us {
  background: var(--navy);
  color: var(--white);
}
.why-us .section-title h2,
.why-us .svc-section-title h2 { color: var(--white); }
.why-us .section-title p,
.why-us .svc-section-title p { color: rgba(255, 255, 255, 0.70); }
.why-us .svc-section-title .eyebrow { color: var(--cyan); }
.why-us .svc-section-title h2 .accent { color: var(--cyan); }
.why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.why-card {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--card-radius);
  padding: 28px 24px;
}
.why-card:hover { background: rgba(255, 255, 255, 0.10); }
.why-card .why-icon,
.why-card > i { font-size: 1.6rem; margin-bottom: 12px; color: var(--cyan); display: block; }
.why-card h4 { color: var(--white); margin-bottom: 6px; }
.why-card p { color: rgba(255, 255, 255, 0.92); font-size: 0.9rem; margin-bottom: 0; }

/* ============ COMPARISON TABLE ============ */
.comparison-section { background: var(--off); }
.comparison-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--white);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--card-shadow);
}
.comparison-table thead { background: var(--navy); color: var(--white); }
.comparison-table th,
.comparison-table td {
  padding: 14px 18px;
  text-align: center;
  font-size: 0.92rem;
}
.comparison-table th { font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 0.9rem; }
.comparison-table tbody tr { border-bottom: 1px solid #f0f2f8; }
.comparison-table tbody tr:hover { background: var(--off); }
.comparison-table td:first-child { text-align: left; font-weight: 600; }

/* ============ PRICING ============ */
.pricing-section { background: var(--white); }
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 24px;
}
.price-card {
  background: var(--off);
  border-radius: var(--card-radius);
  padding: 24px;
  border: 1.5px solid transparent;
  transition: all 0.3s;
}
.price-card:hover { border-color: var(--blue); box-shadow: var(--card-shadow); }
.price-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(107, 122, 153, 0.12);
  font-size: 0.92rem;
}
.price-row:last-child { border-bottom: none; }
.price-row .service-name { font-weight: 600; flex: 1; min-width: 0; }
.price-row .price {
  color: var(--blue);
  font-weight: 700;
  font-family: 'Outfit', sans-serif;
  white-space: nowrap;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}

/* ============ REPAIR SERVICES DETAIL ============ */
.repair-detail { background: var(--off); }
.repair-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }

/* Horizontal layout for the homepage #all-services grid: 3 cards per row, icon on the left */
#all-services .repair-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 20px !important;
}
#all-services .repair-card {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  text-align: left !important;
  padding: 20px 22px !important;
  gap: 18px !important;
}
#all-services .repair-card .img-circle {
  width: 64px !important;
  height: 64px !important;
  margin-bottom: 0 !important;
  flex-shrink: 0 !important;
}
#all-services .repair-card .img-circle i { font-size: 1.7rem !important; }
#all-services .repair-card .repair-body { padding-top: 4px; flex: 1; }
#all-services .repair-card h4 { margin: 0 0 6px !important; font-size: .98rem !important; }
#all-services .repair-card p { font-size: .82rem !important; line-height: 1.45 !important; margin: 0 !important; }
@media (max-width: 900px) {
  #all-services .repair-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 600px) {
  #all-services .repair-grid { grid-template-columns: 1fr !important; }
}
.repair-card {
  background: var(--white);
  border-radius: var(--card-radius);
  overflow: hidden;
  transition: all 0.3s;
  border: 1.5px solid transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 32px 20px 24px;
  text-align: center;
}
.repair-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--card-shadow-hover);
  border-color: var(--blue);
}
.repair-card .img-circle {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--off);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  flex-shrink: 0;
}
.repair-card .img-circle img { width: 100%; height: 100%; object-fit: cover; }
.repair-card .repair-body { flex: 1; }
.repair-card h4 { font-size: 1rem; margin-bottom: 8px; font-weight: 700; }
.repair-card h4 a { color: var(--navy); }
.repair-card h4 a:hover { color: var(--blue); }
.repair-card p { color: var(--gray); font-size: 0.88rem; line-height: 1.6; margin-bottom: 0; }

/* Brand-hub variant — 2-column horizontal cards for "10 Most Common Problems" */
.repair-grid--2col {
  grid-template-columns: repeat(2, 1fr);
  gap: 14px 18px;
}
.repair-grid--2col .repair-card {
  flex-direction: row;
  align-items: flex-start;
  text-align: left;
  padding: 22px 22px;
  gap: 18px;
  border: 1px solid rgba(10, 15, 46, .06);
}
.repair-grid--2col .repair-card:hover {
  transform: translateY(-3px);
  border-color: rgba(26, 61, 228, .25);
}
.repair-grid--2col .repair-card .img-circle {
  width: 64px;
  height: 64px;
  flex-shrink: 0;
  margin-bottom: 0;
  margin-top: 2px;
  border-radius: 14px;
}
.repair-grid--2col .repair-card .img-circle i {
  font-size: 1.7rem !important;
}
.repair-grid--2col .repair-card .img-circle img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 14px;
}
.repair-grid--2col .repair-card .repair-body { flex: 1; min-width: 0; }
.repair-grid--2col .repair-card h4 {
  font-size: 1.04rem;
  margin: 0 0 6px;
  text-align: left;
  line-height: 1.3;
}
.repair-grid--2col .repair-card p {
  font-size: 0.88rem;
  text-align: left;
  line-height: 1.55;
  margin: 0;
}
/* repair-grid--2col holds cards with substantial body copy (icon-left,
   h4+paragraph-right). At ≤768px each card has ~280px of text width which
   is too narrow for readable paragraphs — collapse to 1 column.
   !important is required to defeat the sitewide ≤960px → 2-col cap below. */
@media (max-width: 768px) {
  .repair-grid--2col {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
}

/* ============ FAQ ============ */
.faq-section { background: var(--white); }
.faq-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(500px, 1fr)); gap: 16px; }
.faq-item {
  border: 1px solid #e8ecf4;
  border-radius: 12px;
  overflow: hidden;
  background: var(--white);
}
.faq-q {
  padding: 18px 24px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--navy);
  transition: background 0.2s;
}
.faq-q:hover { background: var(--off); }
/* Question-leading icon — brand blue so it pops against the dark question text. */
.faq-q > span > i { color: var(--blue); margin-right: 6px; font-size: 0.95em; }
/* When open, nudge the icon to cyan for a subtle "active" cue. */
.faq-item.open .faq-q > span > i { color: var(--cyan); }
.faq-q .arrow { transition: transform 0.3s; font-size: 1.2rem; flex-shrink: 0; color: var(--blue); }
.faq-item.open .faq-q .arrow { transform: rotate(45deg); color: var(--orange); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height 0.35s ease; }
.faq-item.open .faq-a { max-height: 800px; }
.faq-a-inner { padding: 0 24px 18px; color: var(--gray); font-size: 0.92rem; line-height: 1.7; }

/* ============ TESTIMONIALS ============ */
.testimonials { background: var(--off); overflow: hidden; }
.testimonial-track-wrap { overflow: hidden; position: relative; }
.testimonial-track-wrap::before,
.testimonial-track-wrap::after {
  content: '';
  position: absolute;
  top: 0;
  width: 60px;
  height: 100%;
  z-index: 2;
  pointer-events: none;
}
.testimonial-track-wrap::before { left: 0; background: linear-gradient(to right, var(--off), transparent); }
.testimonial-track-wrap::after { right: 0; background: linear-gradient(to left, var(--off), transparent); }
.testimonial-track {
  display: flex;
  gap: 24px;
  width: max-content;
  animation: scrollTestimonials 30s linear infinite;
}
.testimonial-track:hover { animation-play-state: paused; }
@keyframes scrollTestimonials {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.testimonials h2 i.fa-star { color: var(--orange); }
.testimonial-card {
  background: var(--white);
  border-radius: var(--card-radius);
  padding: 28px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
  position: relative;
  min-width: 340px;
  max-width: 340px;
  flex-shrink: 0;
}
.testimonial-card::before {
  content: '\201C';
  position: absolute;
  top: 16px;
  left: 24px;
  font-size: 4rem;
  font-family: 'Outfit', sans-serif;
  color: var(--off);
  line-height: 1;
  font-weight: 900;
}
.testimonial-card p { font-style: italic; margin-bottom: 16px; color: var(--gray); position: relative; z-index: 1; }
.testimonial-card .author { font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 0.92rem; color: var(--navy); }
.testimonial-card .role { font-size: 0.82rem; color: var(--gray); }

/* ============ BRANDS STRIP ============ */
.brands-section { background: var(--navy); }
.brands-section .section-title h2 { color: var(--white); }
.brands-section .section-title p { color: rgba(255, 255, 255, 0.55); }
.brands-grid-lp {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 48px 32px;
  max-width: 900px;
  margin: 0 auto;
}
.brand-pill {
  background: none;
  border: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  text-decoration: none;
  transition: opacity 0.25s;
  opacity: 0.55;
  min-height: 90px;
}
.brand-pill:hover { opacity: 1; }
.brand-pill img { object-fit: contain; filter: brightness(0) invert(1); }
.brand-pill > i { font-size: 48px; line-height: 1; color: var(--white); display: inline-flex; align-items: center; justify-content: center; height: 48px; }
.brand-pill[data-brand="apple"] img { height: 43px; }
.brand-pill[data-brand="dell"] img { height: 41px; }
.brand-pill[data-brand="hp"] img { height: 45px; }
.brand-pill[data-brand="lg"] img { height: 66px; }
.brand-pill[data-brand="acer"] img { height: 72px; }
.brand-pill[data-brand="asus"] img { height: 70px; }
.brand-pill[data-brand="sony"] img { height: 72px; }
.brand-pill[data-brand="toshiba"] img { height: 72px; }
.brand-pill[data-brand="samsung"] img { height: 72px; }
.brand-pill[data-brand="lenovo"] img { height: 72px; }
.brand-pill[data-brand="microsoft"] img { height: 48px; }
.brand-pill[data-brand="xiaomi"] img { height: 50px; }
.brand-pill[data-brand="msi"] img { height: 52px; }
.brand-pill[data-brand="honor"] img { height: 38px; }
.brand-pill[data-brand="razer"] img { height: 50px; }

/* SVG sprite era — uniform sizing per logo type.
   Sprite has tightened viewBoxes for wordmarks (lenovo/acer/asus/samsung/sony/
   toshiba/honor) so their content fills the rendering box, matching the visual
   weight of dense marks. */
.brand-pill svg {
  display: block;
  height: 40px;
  width: 56px;          /* default — wordmark width; tight viewBox renders content full */
  object-fit: contain;
}
/* Square marks: equal width = height for balanced look */
.brand-pill[data-brand="hp"]        svg,
.brand-pill[data-brand="apple"]     svg,
.brand-pill[data-brand="dell"]      svg,
.brand-pill[data-brand="microsoft"] svg,
.brand-pill[data-brand="xiaomi"]    svg,
.brand-pill[data-brand="razer"]     svg,
.brand-pill[data-brand="msi"]       svg { width: 40px; height: 40px; }
/* LG has a small mark + short wordmark — middle ground */
.brand-pill[data-brand="lg"]        svg { width: 50px; height: 40px; }
.brand-pill span {
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.8rem;
  font-family: 'Nunito', sans-serif;
  font-weight: 600;
  letter-spacing: 0.3px;
}
.brand-pill:hover span { color: rgba(255, 255, 255, 0.95); }

/* ============ CONTACT / MAP ============ */
.contact-section { background: var(--off); }

/* Auto-scrolling service area cards — marquee pattern, right to left.
   Pauses on hover/focus; respects prefers-reduced-motion. */
.areas-scroll-wrap {
  position: relative;
  margin: 0 -20px 40px;
  overflow: hidden;
}
.areas-scroll-wrap::before,
.areas-scroll-wrap::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 48px;
  pointer-events: none;
  z-index: 2;
}
.areas-scroll-wrap::before {
  left: 0;
  background: linear-gradient(to right, var(--off), transparent);
}
.areas-scroll-wrap::after {
  right: 0;
  background: linear-gradient(to left, var(--off), transparent);
}
.areas-scroll {
  display: flex;
  gap: 14px;
  padding: 8px 0;
  width: max-content;
  animation: scrollAreas 60s linear infinite;
  will-change: transform;
}
.areas-scroll-wrap:hover .areas-scroll,
.areas-scroll-wrap:focus-within .areas-scroll {
  animation-play-state: paused;
}
@keyframes scrollAreas {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .areas-scroll { animation: none; flex-wrap: wrap; width: auto; padding: 8px 20px; }
}

.area-card {
  flex-shrink: 0;
  min-width: 170px;
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: 14px;
  padding: 16px 18px;
  scroll-snap-align: start;
  transition: border-color 0.22s ease, transform 0.22s ease, box-shadow 0.22s ease;
  /* Make anchor-tag area-cards behave like blocks with no underline */
  display: block;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}
.area-card:hover {
  border-color: var(--blue);
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(26, 61, 228, 0.12);
}
.area-card:hover .area-name { color: var(--blue); }
.area-card:hover .area-pin i { color: var(--orange); }
.area-card .area-name {
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--navy);
  margin-bottom: 4px;
}
.area-card .area-pin {
  font-size: 0.78rem;
  color: var(--gray);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.area-card .area-pin i { font-size: 0.72rem; }
.area-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: 'Outfit', sans-serif;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 100px;
  text-decoration: none;
}
.area-tag i { font-size: 0.7rem; }
.tag-premium {
  background: rgba(245, 158, 11, 0.12);
  color: #b45309;
  border: 1px solid rgba(245, 158, 11, 0.28);
}
.tag-it {
  background: rgba(26, 61, 228, 0.08);
  color: var(--blue);
  border: 1px solid rgba(26, 61, 228, 0.22);
}
.tag-base {
  background: rgba(0, 212, 255, 0.1);
  color: #0891b2;
  border: 1px solid rgba(0, 212, 255, 0.28);
}
.tag-store {
  background: linear-gradient(135deg, rgba(0, 212, 255, 0.14), rgba(26, 61, 228, 0.1));
  color: var(--blue);
  border: 1px solid rgba(26, 61, 228, 0.35);
}
.tag-near {
  background: var(--off);
  color: var(--gray);
  border: 1px solid var(--border);
}
.area-card--cta {
  min-width: 200px;
  background: linear-gradient(135deg, #eafff4 0%, #e3faf2 100%);
  border-color: rgba(37, 211, 102, 0.3);
}
.area-card--cta:hover {
  border-color: var(--whatsapp);
  box-shadow: 0 4px 16px rgba(37, 211, 102, 0.18);
}
.area-card--cta .area-pin { color: #0f766e; font-weight: 600; }
.tag-check {
  background: var(--whatsapp);
  color: var(--white);
  border: 1px solid var(--whatsapp);
}
.tag-check:hover {
  background: #1ebc57;
  color: var(--white);
}

@media (max-width: 600px) {
  .areas-scroll { padding-left: 16px; padding-right: 16px; }
  .area-card { min-width: 160px; }
}
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.contact-info h3 { margin-bottom: 16px; }
.contact-info p { color: var(--gray); margin-bottom: 12px; }
.contact-info .phone-big {
  font-family: 'Outfit', sans-serif;
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--blue);
  display: inline-block;
  margin: 4px 0;
}
.contact-info .hours {
  background: var(--white);
  border-radius: 12px;
  padding: 20px;
  margin-top: 20px;
}
.contact-info .hours h4 { margin-bottom: 10px; }
.contact-info .hours p { margin-bottom: 4px; font-size: 0.9rem; }
.map-wrap { border-radius: var(--card-radius); overflow: hidden; height: 100%; min-height: 300px; }
.map-wrap iframe { width: 100%; height: 100%; border: 0; }

/* Home Get-in-Touch wrapper — sits below the area-scroll */
.get-in-touch { margin-top: 56px; }
.get-in-touch .section-title { margin-bottom: 32px; text-align: center; }
.get-in-touch .section-title h2 {
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  font-size: clamp(1.5rem, 3vw, 2rem);
  color: var(--navy);
  margin: 0 0 10px;
}
.get-in-touch .section-title p {
  color: var(--gray);
  font-size: 1.02rem;
  line-height: 1.6;
  margin: 0 auto;
  max-width: 620px;
}
.get-in-touch .home-map {
  margin-top: 44px;
  height: auto;
  min-height: 0;
  aspect-ratio: 2 / 1;
}
.get-in-touch .home-map iframe { display: block; width: 100%; height: 100%; }
@media (max-width: 768px) {
  .get-in-touch .home-map { aspect-ratio: 4 / 3; margin-top: 32px; }
}

/* ============ LAST UPDATED PILL (legal pages: privacy, disclaimer, terms, refund) ============ */
.last-updated-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(0, 212, 255, .15);
  border: 1px solid rgba(0, 212, 255, .35);
  color: var(--cyan);
  padding: 6px 14px;
  border-radius: 100px;
  font-family: 'Outfit', sans-serif;
  font-weight: 600;
  font-size: .78rem;
  letter-spacing: .04em;
  margin-top: 22px;
  margin-bottom: 6px;
}
.last-updated-pill i { font-size: .8rem; }

/* ============ SERVICE PAGE PATTERN (shared by all 35+ /service/ pages) ============ */
.svc-section-title { text-align: center; max-width: 720px; margin: 0 auto 36px; }
.svc-section-title .eyebrow {
  display: inline-block;
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: .74rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 8px;
}
.svc-section-title h2 {
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  color: var(--navy);
  margin: 0 0 10px;
  line-height: 1.2;
}
.svc-section-title p { color: var(--gray); font-size: 1.02rem; line-height: 1.6; margin: 0 auto; }

/* Symptom checklist */
.svc-symptoms { background: var(--off); padding: 56px 0; }
.symptom-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
/* 4 or fewer cards lay out as 2×2 (no hanging orphan in row 2). */
.symptom-grid:not(:has(> :nth-child(5))) { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 900px) { .symptom-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .symptom-grid { grid-template-columns: 1fr; } }
.symptom-card {
  background: var(--white);
  border: 1px solid rgba(10, 15, 46, .08);
  border-radius: 14px;
  padding: 18px 20px;
  display: flex;
  gap: 14px;
  align-items: flex-start;
  transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
}
.symptom-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(10, 15, 46, .08);
  border-color: rgba(26, 61, 228, .25);
}
.symptom-card .sym-icon {
  width: 36px; height: 36px;
  flex-shrink: 0;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--blue), var(--cyan));
  color: var(--white);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .95rem;
}
.symptom-card h4 {
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: .98rem;
  color: var(--navy);
  margin: 0 0 4px;
}
.symptom-card p { color: var(--gray); margin: 0; font-size: .88rem; line-height: 1.5; }

/* 4-step process */
.svc-process { background: var(--white); padding: 56px 0; }
.process-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.process-card {
  background: var(--off);
  border-radius: 14px;
  padding: 24px 22px;
  position: relative;
  border-top: 3px solid var(--blue);
}
.process-card .step-num {
  position: absolute;
  top: 14px; right: 18px;
  font-family: 'Outfit', sans-serif;
  font-weight: 900;
  font-size: 2.4rem;
  line-height: 1;
  background: linear-gradient(135deg, var(--blue), var(--cyan));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  opacity: .35;
}
.process-card .step-icon {
  width: 40px; height: 40px;
  border-radius: 10px;
  background: var(--white);
  color: var(--blue);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.05rem;
  margin-bottom: 12px;
}
.process-card h4 {
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  font-size: 1rem;
  color: var(--navy);
  margin: 0 0 6px;
}
.process-card p { color: var(--gray); margin: 0; line-height: 1.55; font-size: .9rem; }

/* Pricing table */
.svc-pricing { background: var(--off); padding: 56px 0; }
.pricing-table {
  background: var(--white);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(10, 15, 46, .06);
  border: 1px solid rgba(10, 15, 46, .06);
}
.pricing-row {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1.2fr;
  align-items: center;
  padding: 16px 22px;
  border-bottom: 1px solid rgba(10, 15, 46, .05);
}
.pricing-row:last-child { border-bottom: 0; }
.pricing-row.head {
  background: linear-gradient(135deg, var(--navy) 0%, #0f1647 100%);
  color: var(--white);
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: .8rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.pricing-row.head > div { color: var(--white); }
.pricing-row .pr-tier {
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  color: var(--navy);
}
.pricing-row .pr-price {
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  color: var(--orange);
  font-size: 1.05rem;
}
.pricing-row .pr-detail { color: var(--gray); font-size: .9rem; }
.pricing-foot {
  text-align: center;
  margin-top: 18px;
  color: var(--gray);
  font-size: .9rem;
}
.pricing-foot strong { color: var(--navy); }

/* Service-page hero promise (orange action-line below H1).
   Block layout so it wraps naturally on every viewport. The icon is inline
   so it sits at the start of the first wrapped line. */
.content-hero .hero-promise {
  display: block;
  margin-top: 14px;
  margin-bottom: 4px;
  color: var(--orange);
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 1.02rem;
  letter-spacing: .01em;
  line-height: 1.5;
  word-spacing: 1px;
}
.content-hero .hero-promise i {
  font-size: .9rem;
  margin-right: 8px;
  vertical-align: -1px;
}
.content-hero .hero-promise .sep {
  color: rgba(255,255,255,.5);
  margin: 0 6px;
  font-weight: 400;
  display: inline-block;
}
@media (max-width: 640px) {
  .content-hero .hero-promise {
    font-size: .92rem;
    line-height: 1.55;
    padding: 8px 12px;
    background: rgba(255,92,26,.12);
    border-left: 3px solid var(--orange);
    border-radius: 0 8px 8px 0;
    margin-top: 16px;
  }
  .content-hero .hero-promise .sep { margin: 0 4px; opacity: .6; }
}
@media (max-width: 420px) {
  .content-hero .hero-promise { font-size: .86rem; padding: 8px 10px; }
}

/* Expert-prose section (the "why" between symptoms and process) */
.svc-expert { background: var(--white); padding: 64px 0; }
.svc-expert .container { max-width: 880px; }
.svc-expert .expert-eyebrow {
  display: inline-block;
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: .74rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 8px;
}
.svc-expert h2 {
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  font-size: clamp(1.4rem, 2.8vw, 1.85rem);
  color: var(--navy);
  margin: 0 0 22px;
  line-height: 1.2;
}
.svc-expert p {
  color: var(--navy);
  font-size: 1.04rem;
  line-height: 1.75;
  margin: 0 0 18px;
}
.svc-expert p:last-child { margin-bottom: 0; }
.svc-expert strong { color: var(--blue); font-weight: 800; }
.svc-expert .pull-quote {
  border-left: 4px solid var(--cyan);
  background: var(--off);
  padding: 18px 22px;
  border-radius: 0 12px 12px 0;
  margin: 22px 0;
  font-family: 'Outfit', sans-serif;
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--navy);
  line-height: 1.55;
}
.svc-expert .pull-quote .pq-emphasis { color: var(--blue); }
.svc-expert .stats-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin: 26px 0 6px;
}
.svc-expert .stat-pill {
  background: linear-gradient(135deg, rgba(26,61,228,.06), rgba(0,212,255,.08));
  border: 1px solid rgba(26,61,228,.18);
  border-radius: 12px;
  padding: 16px 18px;
  text-align: center;
}
.svc-expert .stat-pill .stat-num {
  font-family: 'Outfit', sans-serif;
  font-weight: 900;
  font-size: 1.6rem;
  background: linear-gradient(135deg, var(--blue), var(--cyan));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  line-height: 1;
  display: block;
  margin-bottom: 4px;
}
.svc-expert .stat-pill .stat-label {
  display: block;
  font-family: 'Nunito', sans-serif;
  font-size: .82rem;
  color: var(--gray);
  font-weight: 600;
  line-height: 1.3;
}
@media (max-width: 768px) { .svc-expert .stats-row { grid-template-columns: 1fr; } }

/* Brand grid (service pages — light-bg logo cards) */
.svc-brands { background: var(--white); padding: 56px 0; }
.svc-brand-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 32px 24px;
  max-width: 980px;
  margin: 0 auto;
}
.svc-brand-card {
  background: var(--off);
  border: 1px solid rgba(10, 15, 46, .06);
  border-radius: 14px;
  padding: 22px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-decoration: none;
  min-height: 110px;
  transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}
.svc-brand-card:hover {
  background: var(--white);
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(10, 15, 46, .1);
  border-color: rgba(26, 61, 228, .25);
}
.svc-brand-card img {
  object-fit: contain;
  filter: brightness(0);
  opacity: .65;
  transition: opacity 220ms ease;
}
.svc-brand-card:hover img { opacity: 1; }
.svc-brand-card[data-brand="apple"] img    { height: 36px; }
.svc-brand-card > i {
  font-size: 32px;
  line-height: 1;
  color: var(--navy);
  opacity: .7;
  transition: opacity 220ms ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
}
.svc-brand-card:hover > i { opacity: 1; }
.svc-brand-card[data-brand="dell"] img     { height: 32px; }
.svc-brand-card[data-brand="hp"] img       { height: 38px; }
.svc-brand-card[data-brand="lenovo"] img   { height: 50px; }
.svc-brand-card[data-brand="acer"] img     { height: 50px; }
.svc-brand-card[data-brand="asus"] img     { height: 48px; }
.svc-brand-card[data-brand="microsoft"] img{ height: 36px; }
.svc-brand-card[data-brand="sony"] img     { height: 50px; }
.svc-brand-card[data-brand="toshiba"] img  { height: 50px; }
.svc-brand-card[data-brand="samsung"] img  { height: 50px; }
.svc-brand-card[data-brand="xiaomi"] img   { height: 36px; }
.svc-brand-card[data-brand="msi"] img      { height: 38px; }
.svc-brand-card[data-brand="lg"] img       { height: 44px; }
.svc-brand-card[data-brand="honor"] img    { height: 28px; }
.svc-brand-card[data-brand="razer"] img    { height: 36px; }
.svc-brand-card span {
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: .82rem;
  color: var(--navy);
  letter-spacing: .02em;
  text-align: center;
}
@media (max-width: 1024px) { .svc-brand-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 768px)  { .svc-brand-grid { grid-template-columns: repeat(3, 1fr); gap: 18px 14px; } }
@media (max-width: 480px)  { .svc-brand-grid { grid-template-columns: repeat(2, 1fr); } }

/* Canonical brand-logo strip (book-your-repair pattern — used site-wide) */
.book-brands { background: var(--white); padding: 56px 0; }
.book-brands-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 18px; max-width: 980px; margin: 28px auto 0; }
.book-brand-tile {
  background: var(--off);
  border-radius: 14px;
  padding: 20px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  transition: background 220ms ease, box-shadow 220ms ease, transform 220ms ease;
  min-height: 96px;
  justify-content: center;
  /* Lock logo color to dark grey — respect brand-logo guidelines (no orange/blue tint) */
  color: #4a5568;
}
.book-brand-tile:hover {
  background: var(--white);
  box-shadow: 0 8px 22px rgba(10,15,46,.08);
  transform: translateY(-2px);
  color: #4a5568; /* keep dark grey on hover too — no orange */
}
.book-brand-tile img { height: 28px; max-width: 90px; object-fit: contain; opacity: .85; transition: opacity 220ms ease; }
.book-brand-tile:hover img { opacity: 1; }
.book-brand-tile svg {
  height: 28px;
  width: auto;
  max-width: 90px;
  opacity: .85;
  transition: opacity 220ms ease;
}
.book-brand-tile:hover svg { opacity: 1; }
.book-brand-tile > i { font-size: 1.6rem; color: #4a5568; opacity: .85; }
.book-brand-tile span { font-family: 'Outfit', sans-serif; font-weight: 600; font-size: .82rem; color: var(--navy); }
@media (max-width: 768px) { .book-brands-grid { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 12px; } }
@media (max-width: 480px) { .book-brands-grid { grid-template-columns: repeat(3, 1fr); } }

/* 10-brand variant — 5 columns × 2 rows on desktop (location pages) */
.svc-brand-grid-10 { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 1100px) { .svc-brand-grid-10 { grid-template-columns: repeat(5, 1fr); } }
@media (max-width: 900px)  { .svc-brand-grid-10 { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 700px)  { .svc-brand-grid-10 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 480px)  { .svc-brand-grid-10 { grid-template-columns: repeat(2, 1fr); } }

/* 15-brand variant — 5 cols × 3 rows on desktop (OS install + any 15-brand grid).
   Avoids the 7+7+1 orphan when 15 brands are laid out in the default auto-fill grid. */
.book-brands-grid--15 { grid-template-columns: repeat(5, 1fr) !important; }
@media (max-width: 900px) { .book-brands-grid--15 { grid-template-columns: repeat(4, 1fr) !important; } }
@media (max-width: 700px) { .book-brands-grid--15 { grid-template-columns: repeat(3, 1fr) !important; } }
@media (max-width: 480px) { .book-brands-grid--15 { grid-template-columns: repeat(3, 1fr) !important; } }

/* ============ LOCATION PAGE PATTERN ============ */
/* Used by /laptop-repair-[area]/ pages */

.loc-landmarks { background: var(--white); padding: 56px 0; }
.loc-landmark-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 28px;
}
/* 4 or fewer landmarks lay out as 2×2 (no hanging orphan in row 2). */
.loc-landmark-grid:not(:has(> :nth-child(5))) { grid-template-columns: repeat(2, 1fr); }
.loc-landmark {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: var(--off);
  border-radius: 12px;
  padding: 18px 20px;
  border-left: 3px solid var(--cyan);
}
.loc-landmark > i {
  color: var(--blue);
  font-size: 1.4rem;
  flex-shrink: 0;
  margin-top: 2px;
  width: 26px;
  text-align: center;
}
.loc-landmark h4 {
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  color: var(--navy);
  margin: 0 0 4px;
  font-size: 1rem;
}
.loc-landmark p { color: var(--gray); margin: 0; font-size: .88rem; line-height: 1.5; }
@media (max-width: 900px) { .loc-landmark-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .loc-landmark-grid { grid-template-columns: 1fr; } }

.loc-whyus {
  background: linear-gradient(135deg, var(--navy) 0%, #0f1638 100%);
  padding: 56px 0;
  color: var(--white);
}
.loc-whyus .svc-section-title-light h2 { color: var(--white); }
.loc-whyus .svc-section-title-light .eyebrow { color: var(--cyan); }
.loc-whyus .svc-section-title-light p { color: rgba(255, 255, 255, .85); }
.loc-whyus .why-grid {
  display: grid;
  /* minmax(0, 1fr) forces every column to ignore its intrinsic min-content size
     — without it, a card with a long unbreakable string (e.g. "WhatsApp 7702503336")
     pushes its column wider than the siblings. */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  margin-top: 24px;
}
.loc-whyus .why-card { min-width: 0; }
.loc-whyus .why-card p,
.loc-whyus .why-card h4 { overflow-wrap: anywhere; word-break: break-word; }
@media (max-width: 900px) { .loc-whyus .why-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .loc-whyus .why-grid { grid-template-columns: 1fr; } }

.loc-services-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-top: 28px;
}
.loc-service-card {
  background: var(--white);
  border-radius: 14px;
  padding: 22px 20px;
  text-decoration: none;
  border: 1px solid rgba(10, 15, 46, .06);
  box-shadow: 0 1px 2px rgba(10, 15, 46, .04), 0 8px 22px -10px rgba(10, 15, 46, .08);
  transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
  display: block;
}
.loc-service-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 2px 4px rgba(10, 15, 46, .05), 0 16px 32px -10px rgba(10, 15, 46, .14);
  border-color: rgba(26, 61, 228, .18);
}
.loc-service-card > i {
  font-size: 1.5rem;
  color: var(--blue);
  margin-bottom: 12px;
  display: block;
}
.loc-service-card h4 {
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  color: var(--navy);
  margin: 0 0 6px;
  font-size: 1rem;
}
.loc-service-card p { color: var(--gray); margin: 0; font-size: .85rem; line-height: 1.5; }
@media (max-width: 900px) { .loc-services-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .loc-services-grid { grid-template-columns: 1fr; } }

.svc-brands { background: var(--off); padding: 56px 0; }

.loc-eta { background: var(--white); padding: 56px 0; }
.loc-eta-card {
  background: linear-gradient(135deg, rgba(26, 61, 228, .06), rgba(0, 212, 255, .08));
  border: 1px solid rgba(26, 61, 228, .14);
  border-radius: 18px;
  padding: 36px 40px;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 36px;
  align-items: center;
}
.loc-eta-left h2 {
  font-family: 'Outfit', sans-serif;
  font-weight: 900;
  color: var(--navy);
  margin: 8px 0 14px;
  font-size: 1.65rem;
  line-height: 1.15;
}
.loc-eta-left .eyebrow {
  display: inline-block;
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 0;
}
.loc-eta-left p { color: var(--gray); line-height: 1.7; margin: 0 0 14px; }
.loc-eta-left p strong { color: var(--navy); }
.loc-eta-foot { font-size: .88rem; color: var(--gray); }
.loc-eta-foot i { color: var(--blue); margin-right: 6px; }
.loc-eta-right { display: flex; flex-direction: column; gap: 10px; }
.loc-eta-right .btn { justify-content: center; }
.loc-eta-right .btn-outline-dark {
  background: transparent;
  color: var(--navy);
  border: 2px solid rgba(10, 15, 46, .15);
  padding: 12px 22px;
  border-radius: 100px;
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 200ms ease;
}
.loc-eta-right .btn-outline-dark:hover {
  border-color: var(--blue);
  color: var(--blue);
}
@media (max-width: 900px) {
  .loc-eta-card { grid-template-columns: 1fr; padding: 28px 24px; }
}

/* ============ CITY HUB PAGE — /hyderabad/ ============ */
.hyd-why-grid { grid-template-columns: repeat(4, 1fr) !important; gap: 18px; }
@media (max-width: 1100px) { .hyd-why-grid { grid-template-columns: repeat(2, 1fr) !important; } }
@media (max-width: 600px) { .hyd-why-grid { grid-template-columns: 1fr !important; } }
.hyd-stats {
  background: linear-gradient(135deg, var(--navy) 0%, #0f1638 100%);
  color: var(--white);
  padding: 40px 0;
}
.hyd-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.hyd-stat {
  text-align: center;
  padding: 8px 12px;
}
.hyd-stat-num {
  font-family: 'Outfit', sans-serif;
  font-weight: 900;
  font-size: 1.75rem;
  color: var(--cyan);
  line-height: 1.1;
  margin-bottom: 6px;
}
.hyd-stat-label {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.82);
  line-height: 1.4;
}
@media (max-width: 768px) { .hyd-stats-grid { grid-template-columns: repeat(2, 1fr); } }

.hyd-areas { background: var(--off); padding: 56px 0; }
.hyd-tier { margin-bottom: 36px; }
.hyd-tier:last-of-type { margin-bottom: 0; }
.hyd-tier-title {
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  color: var(--navy);
  font-size: 1.15rem;
  margin: 0 0 4px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.hyd-tier-title i { color: var(--orange); font-size: 0.9rem; }
.hyd-tier-sub {
  color: var(--gray);
  font-size: 0.92rem;
  margin: 0 0 16px;
  line-height: 1.55;
}
.hyd-area-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 10px;
}
.hyd-area {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--white);
  border: 1px solid rgba(10, 15, 46, 0.06);
  border-radius: 10px;
  padding: 12px 16px;
  text-decoration: none;
  color: var(--navy);
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 0.92rem;
  transition: all 200ms ease;
  box-shadow: 0 1px 2px rgba(10, 15, 46, 0.04);
}
.hyd-area:hover {
  transform: translateY(-2px);
  border-color: rgba(26, 61, 228, 0.25);
  color: var(--blue);
  box-shadow: 0 8px 18px rgba(10, 15, 46, 0.08);
}
.hyd-area span {
  color: var(--gray);
  font-weight: 600;
  font-size: 0.78rem;
}
.hyd-area:hover span { color: var(--blue); }

.hyd-areas-cta {
  margin-top: 28px;
  background: linear-gradient(135deg, #10b981, #0d9488);
  color: var(--white);
  border-radius: 14px;
  padding: 22px 24px;
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
.hyd-areas-cta > i {
  font-size: 2rem;
  flex-shrink: 0;
}
.hyd-areas-cta-text {
  flex: 1;
  min-width: 200px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.hyd-areas-cta-text strong {
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  font-size: 1.05rem;
}
.hyd-areas-cta-text span {
  color: rgba(255, 255, 255, 0.92);
  font-size: 0.9rem;
  line-height: 1.5;
}
.hyd-areas-cta .btn {
  background: var(--white);
  color: #0d9488;
  font-weight: 800;
  border: 0;
  flex-shrink: 0;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
  transition: transform 180ms ease, box-shadow 180ms ease;
}
.hyd-areas-cta .btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22);
}
@media (max-width: 768px) {
  .hyd-areas-cta { flex-direction: column; align-items: flex-start; text-align: left; }
  .hyd-areas-cta .btn { width: 100%; justify-content: center; }
}

/* ============ SKU PRODUCT PAGE PATTERN ============ */
/* Used by /apple-a1322-.../, /apple-a1706-.../, /apple-a1932-.../ etc. */

/* ---- SKU PRODUCT-PAGE HERO ---- 2-col: text-left + visual-right with price tag */
.sku-hero {
  background: linear-gradient(135deg, var(--navy) 0%, #0f1647 100%);
  color: var(--white);
  padding: 40px 0 64px;
  position: relative;
  overflow: hidden;
}
.sku-hero::before {
  content: "";
  position: absolute;
  top: -120px; right: -120px;
  width: 360px; height: 360px;
  background: radial-gradient(circle, rgba(0,212,255,.12), transparent 70%);
  pointer-events: none;
}
.sku-hero .breadcrumb { margin-bottom: 28px; }
.sku-hero .breadcrumb ol { padding: 0; margin: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: .88rem; }
.sku-hero .breadcrumb li { display: inline-flex; align-items: center; gap: 8px; color: rgba(255,255,255,.6); }
.sku-hero .breadcrumb li + li::before { content: "\f054"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: .55rem; color: rgba(255,255,255,.3); margin-right: 0; }
.sku-hero .breadcrumb a { color: var(--cyan); text-decoration: none; transition: color 200ms ease; }
.sku-hero .breadcrumb a:hover { color: var(--white); }
.sku-hero .breadcrumb a i { margin-right: 6px; }
.sku-hero .breadcrumb [aria-current="page"] { color: var(--white); font-weight: 600; }

.sku-hero-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 48px;
  align-items: center;
  position: relative;
  z-index: 1;
}
.sku-hero-text { color: var(--white); }
.sku-era-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: rgba(255, 92, 26, .14);
  border: 1px solid rgba(255, 92, 26, .35);
  color: var(--orange);
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-radius: 100px;
  margin-bottom: 18px;
}
.sku-era-pill i { font-size: 0.78rem; }
.sku-hero-text h1 {
  font-family: 'Outfit', sans-serif;
  font-weight: 900;
  font-size: clamp(1.6rem, 3.4vw, 2.4rem);
  line-height: 1.15;
  color: var(--white);
  margin: 0 0 18px;
  letter-spacing: -0.015em;
}
.sku-hero-text h1 .cyan {
  color: var(--cyan);
  font-weight: 900;
  letter-spacing: -0.01em;
}
.sku-hero-text .lede {
  color: rgba(255, 255, 255, .82);
  font-size: 1rem;
  line-height: 1.65;
  margin: 0 0 24px;
  max-width: 56ch;
}
.sku-hero-text .lede strong { color: var(--white); font-weight: 700; }
.sku-hero-text .lede strong:nth-of-type(2) { color: var(--cyan); }
.sku-hero-ctas {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}
.sku-hero-ctas .btn { padding: 13px 26px; }
.sku-hero .issue-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0;
  border: 0;
  max-width: 100%;
}
.sku-hero .issue-chips .chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 100px;
  color: rgba(255, 255, 255, .9);
  font-family: 'Nunito', sans-serif;
  font-size: .8rem;
  font-weight: 600;
  white-space: nowrap;
}
.sku-hero .issue-chips .chip i { color: var(--cyan); font-size: .82rem; }
.sku-hero .issue-chips .chip i.fa-triangle-exclamation { color: var(--orange); }

/* Right: product visual + price tag */
.sku-hero-visual {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.sku-hero-image-card {
  position: relative;
  background: linear-gradient(135deg, rgba(255,255,255,.04), rgba(255,255,255,.01));
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 22px;
  padding: 32px;
  width: 100%;
  max-width: 380px;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 24px 60px -16px rgba(0, 0, 0, .5);
}
.sku-hero-image-card img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 12px 24px rgba(0,0,0,.4));
}
.sku-hero-image-card.img-fallback img { display: none; }
.sku-hero-image-card .sku-hero-fallback {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  color: rgba(255, 255, 255, .85);
  text-align: center;
}
.sku-hero-image-card.img-fallback .sku-hero-fallback { display: flex; }
.sku-hero-image-card .sku-hero-fallback .fallback-icon {
  font-size: 4.5rem;
  color: var(--cyan);
  opacity: .85;
}
.sku-hero-image-card .sku-hero-fallback .fallback-mpn {
  font-family: 'Outfit', sans-serif;
  font-weight: 900;
  font-size: 1.6rem;
  color: var(--white);
  letter-spacing: -0.01em;
}
.sku-hero-image-card .sku-hero-fallback .fallback-label {
  font-family: 'Nunito', sans-serif;
  font-size: .9rem;
  color: rgba(255,255,255,.7);
}
@media (max-width: 900px) {
  .sku-hero-grid { grid-template-columns: 1fr; gap: 32px; }
  .sku-hero-visual { order: -1; }
  .sku-hero-image-card { max-width: 280px; aspect-ratio: 1 / 1; padding: 24px; }
}

/* Product image strip — slightly raised feel, connected to hero */
.sku-image-strip {
  background: linear-gradient(180deg, var(--off) 0%, var(--white) 100%);
  padding: 40px 0 24px;
}
.sku-image-strip .sku-image-wrap {
  display: flex;
  justify-content: center;
  position: relative;
}
.sku-image-strip img {
  max-width: 360px;
  width: 100%;
  border-radius: 18px;
  box-shadow: 0 20px 48px -12px rgba(10, 15, 46, .25), 0 4px 8px rgba(10, 15, 46, .06);
}

/* Spec grid — 8 cards with strong typographic hierarchy */
.sku-specs { background: var(--off); padding: 56px 0; }
.sku-specs-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.sku-spec-card {
  background: var(--white);
  border-radius: 14px;
  padding: 22px 18px;
  text-align: center;
  border: 1px solid rgba(10, 15, 46, .06);
  box-shadow: 0 1px 2px rgba(10, 15, 46, .04), 0 6px 18px -8px rgba(10, 15, 46, .08);
  transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}
.sku-spec-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 2px 4px rgba(10, 15, 46, .05), 0 14px 26px -10px rgba(10, 15, 46, .14);
  border-color: rgba(26, 61, 228, .18);
}
.sku-spec-card .spec-label {
  font-family: 'Outfit', sans-serif;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gray);
  margin-bottom: 10px;
}
.sku-spec-card .spec-value {
  font-family: 'Outfit', sans-serif;
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--navy);
  letter-spacing: -0.01em;
  line-height: 1.15;
}
@media (max-width: 1024px) { .sku-specs-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 768px) { .sku-specs-grid { grid-template-columns: repeat(2, 1fr); } }

/* Compatibility grid — fits-this-device cards */
.compat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 28px;
}
.compat-card {
  background: var(--white);
  border-radius: 14px;
  padding: 22px;
  border-left: 3px solid var(--cyan);
  border-top: 1px solid rgba(10, 15, 46, .06);
  border-right: 1px solid rgba(10, 15, 46, .06);
  border-bottom: 1px solid rgba(10, 15, 46, .06);
  box-shadow: 0 1px 2px rgba(10, 15, 46, .04);
  transition: transform 220ms ease, box-shadow 220ms ease, border-left-color 220ms ease;
}
.compat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 24px -10px rgba(10, 15, 46, .14);
  border-left-color: var(--orange);
}
.compat-card h4 {
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  font-size: 1rem;
  color: var(--navy);
  margin: 0 0 6px;
}
.compat-card p {
  color: var(--gray);
  font-size: 0.88rem;
  line-height: 1.55;
  margin: 0;
}
.compat-card a { color: var(--blue); text-decoration: none; font-weight: 700; }
.compat-card a:hover { color: var(--orange); }
@media (max-width: 900px) { .compat-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .compat-grid { grid-template-columns: 1fr; } }

/* Sibling SKU cross-sell — wider tiles to fit long labels */
.sku-siblings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 14px;
  margin-top: 28px;
}
.sku-sibling-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  background: var(--white);
  border: 1px solid rgba(10, 15, 46, .08);
  border-radius: 12px;
  text-decoration: none;
  color: var(--navy);
  font-family: 'Nunito', sans-serif;
  font-weight: 600;
  font-size: 0.92rem;
  line-height: 1.4;
  transition: all 200ms ease;
  box-shadow: 0 1px 2px rgba(10, 15, 46, .04);
}
.sku-sibling-link::before {
  content: "";
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cyan);
  transition: background 200ms ease, transform 200ms ease;
}
.sku-sibling-link:hover {
  border-color: rgba(26, 61, 228, .25);
  color: var(--blue);
  transform: translateY(-2px);
  box-shadow: 0 8px 18px -6px rgba(10, 15, 46, .1);
}
.sku-sibling-link:hover::before { background: var(--orange); transform: scale(1.4); }
.sku-sibling-link.sku-sibling-all {
  background: linear-gradient(135deg, rgba(255, 92, 26, .06), rgba(255, 158, 11, .1));
  border-color: rgba(255, 92, 26, .25);
  color: var(--orange);
  font-weight: 800;
}
.sku-sibling-link.sku-sibling-all::before { background: var(--orange); }

/* SCP metaphor emphasis — orange italic across all SCP banners */
.scp-metaphor {
  color: var(--orange);
  font-style: italic;
  font-weight: 800;
}

/* Service Care Pack section on location pages */
.loc-scp { background: var(--white); padding: 56px 0; border-top: 1px solid rgba(10, 15, 46, .06); }
.loc-scp .svc-section-title h2 { color: var(--navy); }
.loc-scp .svc-section-title .eyebrow { color: var(--blue); }
.loc-scp .eyebrow i { color: var(--blue); }
.loc-scp-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  margin-top: 28px;
  max-width: 920px;
  margin-left: auto;
  margin-right: auto;
}
.loc-scp-card {
  background: var(--off);
  border-radius: 16px;
  padding: 28px 26px;
  border: 1px solid rgba(10, 15, 46, .06);
  box-shadow: 0 1px 2px rgba(10, 15, 46, .04), 0 8px 22px -10px rgba(10, 15, 46, .08);
  transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}
.loc-scp-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 2px 4px rgba(10, 15, 46, .05), 0 16px 32px -10px rgba(10, 15, 46, .14);
  border-color: rgba(26, 61, 228, .18);
}
.loc-scp-card-windows {
  border-left: 4px solid var(--cyan);
}
.loc-scp-card-macbook {
  border-left: 4px solid var(--orange);
  background: linear-gradient(135deg, rgba(255, 92, 26, .04), rgba(255, 158, 11, .07));
}
.loc-scp-tag {
  display: inline-block;
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 10px;
}
.loc-scp-card-macbook .loc-scp-tag { color: var(--orange); }
.loc-scp-price {
  font-family: 'Outfit', sans-serif;
  font-weight: 900;
  font-size: 2.4rem;
  color: var(--navy);
  line-height: 1;
}
.loc-scp-price small {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--gray);
  margin-left: 4px;
}
.loc-scp-permonth {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--orange);
  margin-top: 4px;
  margin-bottom: 14px;
}
.loc-scp-desc {
  color: var(--gray);
  font-size: 0.92rem;
  line-height: 1.55;
  margin: 0 0 14px;
}
.loc-scp-bullets { list-style: none; padding: 0; margin: 0; }
.loc-scp-bullets li {
  font-size: 0.88rem;
  color: var(--navy);
  padding: 6px 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.loc-scp-bullets i {
  color: #16a34a;
  font-size: 0.85rem;
  flex-shrink: 0;
}
.loc-scp-cta {
  background: linear-gradient(135deg, var(--navy) 0%, #0f1638 100%);
  border-radius: 16px;
  padding: 32px;
  margin-top: 28px;
  text-align: center;
  color: var(--white);
}
.loc-scp-cta-pitch {
  color: rgba(255, 255, 255, 0.92);
  font-size: 1rem;
  line-height: 1.6;
  max-width: 640px;
  margin: 0 auto 22px;
}
.loc-scp-cta-pitch strong { color: var(--cyan); }
.loc-scp-buttons {
  display: inline-flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}
.loc-scp-primary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  font-size: 1rem;
}
.loc-scp-learnmore {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 26px;
  font-size: 1rem;
  background: transparent;
  color: var(--white);
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: var(--btn-radius);
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  text-decoration: none;
  transition: all 200ms ease;
}
.loc-scp-learnmore:hover {
  background: var(--white);
  color: var(--navy);
  border-color: var(--white);
  gap: 14px;
}
.loc-scp-learnmore i { color: var(--cyan); transition: color 200ms ease; }
.loc-scp-learnmore:hover i { color: var(--orange); }
.loc-scp-secondary {
  margin: 14px 0 0;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.9rem;
}
.loc-scp-secondary a {
  color: var(--cyan);
  text-decoration: none;
  font-weight: 700;
  border-bottom: 1px solid rgba(0, 212, 255, 0.3);
  transition: border-color 180ms ease;
}
.loc-scp-secondary a:hover { border-bottom-color: var(--cyan); }

/* ETA card — compact contact strip below primary button */
.loc-eta-primary {
  width: 100%;
  justify-content: center;
  padding: 14px 24px;
  font-size: 1rem;
}
.loc-eta-contact {
  margin: 16px 0 0;
  color: var(--gray);
  font-size: 0.9rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  justify-content: center;
}
.loc-eta-contact > span:first-child { color: var(--gray); }
.loc-eta-contact a {
  color: var(--navy);
  text-decoration: none;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color 180ms ease;
}
.loc-eta-contact a:hover { color: var(--blue); }
.loc-eta-contact a i { color: var(--blue); }
.loc-eta-contact a:first-of-type i { color: #25d366; }
.loc-eta-contact .dot { color: rgba(10, 15, 46, 0.3); }
@media (max-width: 768px) {
  .loc-scp-grid { grid-template-columns: 1fr; }
  .loc-scp-cta { padding: 24px 20px; }
}

.loc-map { background: var(--off); padding: 56px 0; }
.loc-map .map-wrap {
  margin-top: 28px;
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 16 / 7;
  box-shadow: 0 8px 28px -10px rgba(10, 15, 46, .18);
}
.loc-map .map-wrap iframe { width: 100%; height: 100%; border: 0; display: block; }
@media (max-width: 768px) { .loc-map .map-wrap { aspect-ratio: 4 / 3; } }

/* Merged ETA + Map section — text on left, map on right */
.loc-eta-map {
  background: var(--off);
  padding: 56px 0;
}
.loc-eta-map-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 36px;
  align-items: stretch;
  background: linear-gradient(135deg, rgba(26, 61, 228, .04), rgba(0, 212, 255, .06));
  border: 1px solid rgba(26, 61, 228, .12);
  border-radius: 18px;
  padding: 36px;
}
.loc-eta-map-left {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.loc-eta-map-left .eyebrow {
  display: inline-block;
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 8px;
}
.loc-eta-map-left h2 {
  font-family: 'Outfit', sans-serif;
  font-weight: 900;
  color: var(--navy);
  margin: 0 0 14px;
  font-size: 1.65rem;
  line-height: 1.15;
}
.loc-eta-map-left p {
  color: var(--gray);
  line-height: 1.7;
  margin: 0 0 14px;
}
.loc-eta-map-left p strong { color: var(--navy); }
.loc-eta-map-left .loc-eta-foot {
  font-size: .88rem;
  color: var(--gray);
  margin-bottom: 18px;
}
.loc-eta-map-left .loc-eta-foot i { color: var(--blue); margin-right: 6px; }
.loc-eta-map-cta {
  margin-top: 4px;
  padding-top: 18px;
  border-top: 1px solid rgba(10, 15, 46, .08);
}
.loc-eta-map-cta .loc-eta-primary {
  width: 100%;
  justify-content: center;
  padding: 14px 24px;
  font-size: 1rem;
}
.loc-eta-map-cta .loc-eta-contact {
  margin: 14px 0 0;
  color: var(--gray);
  font-size: .9rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  justify-content: flex-start;
}
.loc-eta-map-cta .loc-eta-contact > span:first-child { color: var(--gray); }
.loc-eta-map-cta .loc-eta-contact a {
  color: var(--navy);
  text-decoration: none;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color 180ms ease;
}
.loc-eta-map-cta .loc-eta-contact a:hover { color: var(--blue); }
.loc-eta-map-cta .loc-eta-contact a i { color: var(--blue); }
.loc-eta-map-cta .loc-eta-contact a:first-of-type i { color: #25d366; }
.loc-eta-map-cta .loc-eta-contact .dot { color: rgba(10, 15, 46, .3); }
.loc-eta-map-right {
  border-radius: 14px;
  overflow: hidden;
  min-height: 380px;
  box-shadow: 0 8px 28px -10px rgba(10, 15, 46, .18);
}
.loc-eta-map-right iframe { width: 100%; height: 100%; border: 0; display: block; min-height: 380px; }

@media (max-width: 900px) {
  .loc-eta-map-grid { grid-template-columns: 1fr; padding: 24px; gap: 24px; }
  .loc-eta-map-right { aspect-ratio: 4 / 3; min-height: 0; }
  .loc-eta-map-right iframe { min-height: 0; }
}

.loc-neighbours { background: var(--white); padding: 56px 0; }
.loc-neighbour-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  margin-top: 24px;
}
.loc-neighbour {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--off);
  border-radius: 100px;
  padding: 14px 20px;
  text-decoration: none;
  color: var(--navy);
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: .92rem;
  line-height: 1.2;
  border: 1.5px solid transparent;
  transition: all 200ms ease;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.loc-neighbour span {
  color: var(--gray);
  font-weight: 600;
  font-size: .78rem;
  letter-spacing: .02em;
  flex-shrink: 0;
  position: relative;
  padding-left: 10px;
}
.loc-neighbour span::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: currentColor;
  opacity: .5;
}
.loc-neighbour:hover {
  border-color: var(--blue);
  color: var(--blue);
  transform: translateY(-2px);
  background: var(--white);
}
.loc-neighbour:hover span { color: var(--blue); }
.loc-neighbour:last-child span { padding-left: 6px; }
.loc-neighbour:last-child span::before { display: none; }
@media (max-width: 1100px) { .loc-neighbour-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px) { .loc-neighbour-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px) {
  .loc-neighbour-grid { grid-template-columns: 1fr; }
  .loc-neighbour { justify-content: space-between; }
}

/* ============ LAPTOP RENTAL PAGE ============ */
.rental-pricing { background: var(--off); padding: 56px 0; }
.rental-tier-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  margin-top: 28px;
}
.rental-tier {
  position: relative;
  background: var(--white);
  border: 1px solid rgba(10, 15, 46, .08);
  border-radius: 14px;
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}
.rental-tier:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px -10px rgba(10, 15, 46, .14);
  border-color: rgba(26, 61, 228, .25);
}
.rental-tier-popular {
  border-color: var(--orange);
  box-shadow: 0 8px 24px -8px rgba(255, 92, 26, .25);
}
.rental-tier-badge {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--orange);
  color: var(--white);
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 100px;
  white-space: nowrap;
}
.rental-tier-label {
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--blue);
}
.rental-tier-price {
  font-family: 'Outfit', sans-serif;
  font-weight: 900;
  font-size: 1.85rem;
  color: var(--navy);
  line-height: 1;
}
.rental-tier-price small {
  font-size: .72rem;
  font-weight: 600;
  color: var(--gray);
  margin-left: 2px;
}
.rental-tier p {
  font-size: .85rem;
  color: var(--gray);
  line-height: 1.5;
  margin: 0;
}
.rental-tier ul {
  list-style: none;
  padding: 0;
  margin: 6px 0 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.rental-tier ul li {
  font-size: .82rem;
  color: var(--navy);
  display: flex;
  align-items: center;
  gap: 8px;
}
.rental-tier ul li i { color: var(--blue); font-size: .8rem; }
.rental-pricing-foot {
  margin: 28px 0 0;
  text-align: center;
  font-size: .88rem;
  color: var(--gray);
}
.rental-pricing-foot i { color: var(--blue); margin-right: 6px; }
@media (max-width: 1100px) { .rental-tier-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px)  { .rental-tier-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px)  { .rental-tier-grid { grid-template-columns: 1fr; } }

.rental-inventory-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-top: 28px;
}
.rental-inventory-card {
  background: var(--white);
  border: 1px solid rgba(10, 15, 46, .06);
  border-radius: 14px;
  padding: 24px 22px;
  box-shadow: 0 1px 2px rgba(10, 15, 46, .04), 0 8px 22px -10px rgba(10, 15, 46, .08);
}
.rental-inv-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--off);
  color: var(--blue);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  margin-bottom: 14px;
}
.rental-inventory-card h4 {
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  color: var(--navy);
  margin: 0 0 4px;
  font-size: 1.05rem;
}
.rental-inv-spec {
  font-family: 'Nunito', sans-serif;
  color: var(--blue);
  font-size: .82rem;
  font-weight: 700;
  margin: 0 0 10px;
}
.rental-inventory-card > p:last-child { color: var(--gray); margin: 0; font-size: .88rem; line-height: 1.55; }
.rental-inventory-card > p:last-child strong { color: var(--navy); }
@media (max-width: 1024px) { .rental-inventory-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px)  { .rental-inventory-grid { grid-template-columns: 1fr; } }

.rental-usecase-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 28px;
}
.rental-usecase {
  background: var(--off);
  border-radius: 12px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.rental-usecase > i {
  font-size: 1.5rem;
  color: var(--orange);
  width: 32px;
}
.rental-usecase h4 {
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  color: var(--navy);
  margin: 0;
  font-size: 1rem;
}
.rental-usecase p { color: var(--gray); font-size: .88rem; line-height: 1.55; margin: 0; }
@media (max-width: 900px) { .rental-usecase-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .rental-usecase-grid { grid-template-columns: 1fr; } }

.rental-step-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  margin-top: 28px;
}
.rental-step {
  background: var(--white);
  border-radius: 14px;
  padding: 28px 22px;
  position: relative;
  border: 1px solid rgba(10, 15, 46, .06);
  box-shadow: 0 1px 2px rgba(10, 15, 46, .04);
}
.rental-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--blue);
  color: var(--white);
  font-family: 'Outfit', sans-serif;
  font-weight: 900;
  font-size: 1rem;
  margin-bottom: 14px;
}
.rental-step h4 {
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  color: var(--navy);
  margin: 0 0 8px;
  font-size: 1rem;
}
.rental-step p { color: var(--gray); font-size: .88rem; line-height: 1.55; margin: 0; }
@media (max-width: 900px) { .rental-step-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .rental-step-grid { grid-template-columns: 1fr; } }

.rental-inclusions { background: var(--off); padding: 56px 0; }
.rental-inc-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  background: var(--white);
  border-radius: 16px;
  padding: 36px 40px;
  border: 1px solid rgba(10, 15, 46, .06);
  box-shadow: 0 8px 28px -10px rgba(10, 15, 46, .12);
}
.rental-inc-grid h3 {
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  color: var(--navy);
  font-size: 1.1rem;
  margin: 0 0 14px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.rental-inc-grid > div:first-child h3 i { color: #16a34a; }
.rental-inc-grid > div:last-child h3 i { color: #ef4444; }
.rental-inc-grid ul { list-style: none; padding: 0; margin: 0; }
.rental-inc-grid li {
  color: var(--gray);
  font-size: .92rem;
  line-height: 1.6;
  padding: 7px 0;
  border-bottom: 1px solid rgba(10, 15, 46, .06);
}
.rental-inc-grid li:last-child { border-bottom: 0; }
@media (max-width: 768px) {
  .rental-inc-grid { grid-template-columns: 1fr; padding: 28px 24px; gap: 24px; }
}

/* FAQ block (service pages) */
.svc-faq { background: var(--off); padding: 56px 0; }
.svc-faq .container { max-width: 880px; }
.svc-faq-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.svc-faq-list li { display: block; min-width: 0; }
details.svc-q {
  display: block;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  background: var(--white);
  border-radius: 12px;
  border-left: 3px solid var(--blue);
  transition: background 200ms ease, border-color 200ms ease;
}
details.svc-q[open] { background: rgba(0, 212, 255, .04); border-left-color: var(--cyan); }
details.svc-q > summary {
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 1rem;
  color: var(--navy);
  padding: 16px 22px;
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
details.svc-q > summary::-webkit-details-marker { display: none; }
details.svc-q > summary::marker { content: ''; }
details.svc-q > summary .q-icon {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--off);
  color: var(--blue);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .85rem;
  flex-shrink: 0;
  transition: transform 250ms ease;
}
details.svc-q[open] > summary .q-icon { transform: rotate(45deg); background: var(--blue); color: var(--white); }
details.svc-q > .svc-a {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 4px 22px 20px 22px;
  color: var(--gray);
  line-height: 1.7;
  font-size: .95rem;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  max-height: none;
  overflow: visible;
  transition: none;
}
details.svc-q > .svc-a strong { color: var(--navy); }
details.svc-q > .svc-a a { color: var(--blue); font-weight: 600; }

/* Closing CTA strip */
.svc-cta-strip {
  background: linear-gradient(135deg, var(--navy) 0%, #0f1647 100%);
  color: var(--white);
  padding: 64px 0;
  text-align: center;
}
.svc-cta-strip h2 {
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  font-size: clamp(1.5rem, 3.2vw, 2.1rem);
  color: var(--white);
  margin: 0 0 12px;
  line-height: 1.2;
}
.svc-cta-strip p {
  color: rgba(255,255,255,.85);
  margin: 0 auto 24px;
  max-width: 580px;
  line-height: 1.6;
}
.svc-cta-strip .cta-btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

@media (max-width: 1024px) { .process-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 768px) {
  .process-grid { grid-template-columns: 1fr; }
  .pricing-row { grid-template-columns: 1fr; gap: 4px; padding: 14px 18px; }
  .pricing-row.head { display: none; }
  .pricing-row .pr-tier::before { content: 'Tier: '; color: var(--gray); font-weight: 600; }
  .pricing-row .pr-price::before { content: 'Price: '; color: var(--gray); font-weight: 600; font-size: .85rem; }
}

/* ============ STORES GRID (shared: home + about-us) ============ */
.stores-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}
.store-card {
  position: relative;
  background: var(--white);
  border-radius: 16px;
  padding: 32px;
  border: 1px solid rgba(10, 15, 46, .06);
  box-shadow: 0 1px 2px rgba(10, 15, 46, .04), 0 8px 24px -8px rgba(10, 15, 46, .08);
  transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease, background-color 220ms ease;
}
.store-card::before {
  content: "";
  position: absolute;
  left: 0; top: 24px; bottom: 24px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: linear-gradient(180deg, var(--blue), var(--cyan));
}
.store-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 2px 4px rgba(10, 15, 46, .05), 0 16px 36px -10px rgba(10, 15, 46, .14);
  border-color: rgba(26, 61, 228, .14);
}
.store-card h4 {
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  color: var(--navy);
  margin: 0 0 14px;
  font-size: 1.25rem;
  letter-spacing: -.01em;
}
.store-card .store-tag {
  display: inline-block;
  align-self: flex-start; /* defeat flex-stretch when parent is a flex column (catalog cards share .store-card class) */
  width: fit-content;
  background: var(--blue);
  color: var(--white);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 4px 11px;
  border-radius: 100px;
  margin-bottom: 14px;
}
.store-card p {
  color: var(--gray);
  margin: 0 0 10px;
  line-height: 1.6;
  font-size: .95rem;
}
.store-card p i { width: 16px; text-align: center; }
.store-card p:last-of-type { margin-top: 18px; margin-bottom: 0; }
.store-card a { color: var(--blue); text-decoration: none; font-weight: 700; }
.store-card a:hover { color: var(--orange); }
@media (max-width: 768px) {
  .stores-grid { grid-template-columns: 1fr; }
}

/* ============ CTA SECTION ============ */
.cta-section {
  background: #15205a !important;
  text-align: center;
  color: var(--white);
  padding: 72px 0;
  position: relative;
  overflow: hidden;
}
.cta-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle 520px at 88% -8%, rgba(255, 255, 255, 0.18), transparent 65%),
    radial-gradient(circle 420px at 8% 108%, rgba(0, 212, 255, 0.22), transparent 70%);
  pointer-events: none;
}
.cta-section .container { position: relative; z-index: 1; }
.cta-section h2 { color: var(--white); margin-bottom: 16px; }
.cta-section p { color: rgba(255, 255, 255, 0.85); margin-bottom: 28px; font-size: 1.1rem; }
.cta-btns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* ============ CONTENT PAGES (about, careers, refund, legal) ============ */
.content-hero {
  background: linear-gradient(135deg, var(--navy) 0%, #0f1647 100%);
  padding: 100px 0 60px;
  color: var(--white);
  text-align: center;
}
.content-hero h1 {
  color: var(--white);
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  margin: 0 0 12px;
  line-height: 1.2;
}
.content-hero .breadcrumb { font-size: .9rem; margin: 24px 0 22px; }
.content-hero .breadcrumb ol {
  list-style: none;
  padding: 0;
  margin: 0;
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
}
.content-hero .breadcrumb li {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: rgba(255, 255, 255, .85);
}
.content-hero .breadcrumb li + li::before {
  content: "";
  width: 6px;
  height: 6px;
  border-top: 2px solid rgba(255, 255, 255, .35);
  border-right: 2px solid rgba(255, 255, 255, .35);
  transform: rotate(45deg);
  display: inline-block;
  flex: 0 0 auto;
  margin-right: 2px;
}
.content-hero .breadcrumb a {
  color: var(--cyan);
  text-decoration: none;
  padding: 2px 4px;
  margin: -2px -4px;
  border-radius: 4px;
  transition: color 200ms ease, background-color 200ms ease;
}
.content-hero .breadcrumb a:hover {
  color: var(--white);
  background-color: rgba(255, 255, 255, .08);
  text-decoration: none;
}
.content-hero .breadcrumb a:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
  color: var(--white);
}
.content-hero .breadcrumb a .fa-house {
  margin-right: 4px;
  font-size: .82em;
  opacity: .9;
}
.content-hero .breadcrumb [aria-current="page"] {
  color: rgba(255, 255, 255, .9);
  font-weight: 600;
}
@media (max-width: 480px) {
  .content-hero .breadcrumb { font-size: .82rem; margin-bottom: 16px; }
  .content-hero .breadcrumb ol { gap: 5px 8px; }
  .content-hero .breadcrumb li { gap: 8px; }
  .content-hero .breadcrumb li + li::before { width: 5px; height: 5px; }
}
@media (prefers-reduced-motion: reduce) {
  .content-hero .breadcrumb a { transition: none; }
}
.content-hero p.lede { color: rgba(255,255,255,.85); font-size: 1.1rem; max-width: 720px; margin: 0 auto; line-height: 1.55; }
.content-body { padding: 56px 0; background: var(--white); }
.content-body .container { max-width: 800px; }
.content-body h2 { font-family: 'Outfit', sans-serif; font-weight: 800; font-size: 1.5rem; color: var(--navy); margin: 36px 0 14px; }
.content-body h2:first-child { margin-top: 0; }
.content-body h3 { font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 1.15rem; color: var(--navy); margin: 24px 0 8px; }
.content-body p { color: var(--gray); margin: 0 0 14px; line-height: 1.7; }
.content-body ul, .content-body ol { color: var(--gray); padding-left: 24px; margin: 0 0 18px; }
.content-body li { margin-bottom: 8px; line-height: 1.65; }
.content-body a { color: var(--blue); }
.content-body a:hover { color: var(--orange); }
.content-body strong { color: var(--navy); }
.content-body .info-card {
  background: var(--off);
  border-left: 4px solid var(--blue);
  padding: 18px 22px;
  border-radius: 0 var(--card-radius, 14px) var(--card-radius, 14px) 0;
  margin: 24px 0;
}
.content-body .info-card h3 { margin-top: 0; color: var(--navy); }
.content-body .info-card p:last-child { margin-bottom: 0; }
.content-body .last-updated { color: var(--gray); font-size: .9rem; font-style: italic; margin-bottom: 24px; }
.content-form {
  background: var(--off);
  border-radius: var(--card-radius, 14px);
  padding: 28px;
  margin-top: 32px;
}
.content-form .form-group { margin-bottom: 14px; }
.content-form input, .content-form textarea, .content-form select {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid rgba(10,15,46,.15);
  border-radius: 8px;
  font-family: 'Nunito', sans-serif;
  font-size: 1rem;
}
.content-form textarea { min-height: 100px; resize: vertical; }
.content-form button {
  background: var(--orange);
  color: var(--white);
  border: 0;
  padding: 14px 24px;
  border-radius: 8px;
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  width: 100%;
}
.content-form button:hover { background: #e64f0f; }
@media (max-width: 768px) { .content-hero { padding: 76px 0 40px; } .content-body { padding: 40px 0; } }

/* ============ JUSTDIAL TRUST STRIP (text LHS + widget card RHS) ============ */
.justdial-strip {
  background: var(--off);
  padding: 56px 0;
  border-top: 1px solid rgba(10, 15, 46, 0.06);
}
.justdial-strip .jd-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 40px;
  align-items: center;
}
.justdial-strip .jd-text { text-align: left; }
.justdial-strip .jd-eyebrow {
  display: inline-block;
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 8px;
}
.justdial-strip h3 {
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  font-size: clamp(1.4rem, 2.8vw, 1.9rem);
  color: var(--navy);
  margin: 0 0 10px;
  line-height: 1.25;
}
.justdial-strip p.jd-sub {
  color: var(--gray);
  font-size: 0.98rem;
  margin: 0;
  max-width: 48ch;
}
.justdial-strip .jd-card {
  background: var(--white);
  border-radius: var(--card-radius, 14px);
  padding: 24px;
  box-shadow: 0 12px 30px rgba(10, 15, 46, 0.08);
  text-align: center;
  justify-self: end;
  min-width: 260px;
  max-width: 360px;
  width: 100%;
}
.justdial-strip .jd-card .widget-title { display: none; }
.justdial-strip .jd-card #JdBadge,
.justdial-strip .jd-card #JdBadgeDest {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  line-height: 0;
}
.justdial-strip .jd-card #JdBadge a,
.justdial-strip .jd-card #JdBadgeDest a {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
}
.justdial-strip .jd-card #JdBadge img,
.justdial-strip .jd-card #JdBadgeDest img {
  display: block;
  margin: 0 auto;
  vertical-align: middle;
  max-width: 100%;
  height: auto;
}
@media (max-width: 768px) {
  .justdial-strip .jd-grid { grid-template-columns: 1fr; gap: 24px; }
  .justdial-strip .jd-card { justify-self: stretch; max-width: none; }
}

/* Justdial fallback badge — shown by default, replaced by the live widget on
   production. On localhost / staging where the widget API rejects the origin,
   this stays visible so the section never looks broken. */
.jd-fallback {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 18px 22px;
  background: var(--white);
  border-radius: 10px;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  min-width: 200px;
}
.jd-fallback:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(217, 37, 47, 0.15);
}
.jd-fallback-logo {
  font-family: 'Outfit', sans-serif;
  font-weight: 900;
  font-size: 1.55rem;
  letter-spacing: -0.02em;
  color: #d9252f;
  line-height: 1;
}
.jd-fallback-logo .jd-fallback-dial { color: #2b2b2b; }
.jd-fallback-stars {
  color: #ffb400;
  font-size: 1.05rem;
  letter-spacing: 2px;
  line-height: 1;
}
.jd-fallback-cta {
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 0.82rem;
  color: var(--navy);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.jd-fallback-cta i { color: var(--orange); transition: transform 0.2s ease; }
.jd-fallback:hover .jd-fallback-cta i { transform: translateX(3px); }

/* ============ FOOTER ============ */
.site-footer {
  background: var(--navy);
  color: rgba(255, 255, 255, 0.7);
  padding: 48px 0 0;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 32px;
  margin-bottom: 40px;
}
.footer-col {
  margin: 0;
  padding: 0;
}
.footer-col h4 {
  color: var(--white);
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  margin: 0 0 16px;
  font-size: 1rem;
  line-height: 1;
}
.footer-logo {
  display: block;
  width: 72px;
  height: 72px;
  margin: 0 0 12px;
  padding: 0;
}
.footer-col p { font-size: 0.88rem; line-height: 1.7; }
.footer-col ul { list-style: none; }
.footer-col li { margin-bottom: 8px; }
.footer-col a { color: rgba(255, 255, 255, 0.7); font-size: 0.88rem; }
.footer-col a:hover { color: var(--cyan); }
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: 20px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 0.82rem;
}
.footer-bottom a { color: rgba(255, 255, 255, 0.6); margin-left: 16px; }
.footer-bottom a:hover { color: var(--cyan); }

/* ============ FLOATING WHATSAPP ============ */
.wa-float {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 998;
  background: var(--whatsapp);
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(37, 211, 102, 0.4);
  transition: all 0.3s;
}
.wa-float:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 24px rgba(37, 211, 102, 0.5);
}
.wa-float svg { width: 28px; height: 28px; fill: white; }

/* ============ ANIMATIONS ============ */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(24px);
  transition: all 0.6s ease;
}
.animate-on-scroll.visible { opacity: 1; transform: translateY(0); }

/* ============ RESPONSIVE ============ */
@media (max-width: 1024px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-card { max-width: 480px; margin: 0 auto; }
  .steps-row { grid-template-columns: repeat(2, 1fr); }
  .repair-grid { grid-template-columns: repeat(2, 1fr); }
  .why-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
}

/* Intermediate tablet range — nav still horizontal but tighter */
@media (max-width: 1100px) {
  .logo { font-size: 1.15rem; }
  .logo-icon { width: 32px; height: 32px; font-size: 1rem; }
  .nav-links { gap: 2px; }
  .nav-links > li > a {
    padding: 8px 10px;
    font-size: 0.82rem;
    letter-spacing: 0.2px;
  }
  .nav-cta { padding: 9px 16px !important; font-size: 0.8rem; }
  /* Hide the phone pill once we're tight — Book Now stays visible, floating CTA still offers phone */
  .nav-phone-item { display: none; }
}

/* Hamburger kicks in earlier — 7-item nav doesn't fit cleanly on tablet. */
@media (max-width: 960px) {
  .nav-links { display: none; }
  .hamburger { display: block; }
}

@media (max-width: 768px) {
  section { padding: 40px 0; }
  .hero { padding: 50px 0 40px; }
  .hero-text h1 { font-size: clamp(2.6rem, 10vw, 3.4rem); line-height: 1.1; }
  .steps-row { grid-template-columns: 1fr; }
  .why-grid { grid-template-columns: 1fr; }
  .repair-grid { grid-template-columns: 1fr; }
  .faq-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; text-align: center; }
  .comparison-table { font-size: 0.82rem; }
  .comparison-table th,
  .comparison-table td { padding: 10px 8px; }
}

@media (max-width: 480px) {
  .hero-btns { flex-direction: column; }
  .hero-btns .btn { justify-content: center; }
  .trust-bar { gap: 12px; }
  .brands-grid-lp { grid-template-columns: repeat(3, 1fr); gap: 36px 24px; }
}

/* ============ LEGACY MODEL BADGE — for pre-2020 SKU pages ============ */
.legacy-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 165, 0, 0.12);
  color: #ffb27a;
  border: 1px solid rgba(255, 165, 0, 0.32);
  padding: 5px 12px;
  border-radius: 100px;
  font-family: 'Outfit', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.legacy-badge i { font-size: 0.72rem; opacity: 0.9; }

/* ============ MISSION STRIP — promoted from /careers/ for reuse on /about-us/ ============ */
.careers-mission {
  background: linear-gradient(135deg, var(--navy) 0%, #0f1647 100%);
  color: var(--white);
  padding: 64px 0 56px;
  text-align: center;
}
.careers-mission .mission-eyebrow {
  font-family: 'Outfit', sans-serif;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--cyan);
  margin: 0 0 14px;
}
.careers-mission .mission-statement {
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  font-size: clamp(1.5rem, 3.6vw, 2.2rem);
  line-height: 1.25;
  margin: 0 0 16px;
  color: var(--white);
}
.careers-mission .mission-statement .sep { color: var(--cyan); margin: 0 6px; font-weight: 400; }
.careers-mission .mission-tagline {
  color: rgba(255,255,255,.8);
  font-size: 1.02rem;
  line-height: 1.6;
  margin: 0 auto 36px;
  max-width: 620px;
}
.mission-pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  text-align: left;
  margin-top: 8px;
}
.pillar-card {
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: var(--card-radius, 14px);
  padding: 24px;
  transition: background 200ms ease, border-color 200ms ease;
}
.pillar-card:hover { background: rgba(255, 255, 255, .1); border-color: rgba(0, 212, 255, .3); }
.pillar-card .pillar-icon {
  width: 42px;
  height: 42px;
  border-radius: 11px;
  background: linear-gradient(135deg, var(--blue), var(--cyan));
  color: var(--white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  margin-bottom: 14px;
}
.pillar-card h4 {
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--white);
  margin: 0 0 6px;
}
.pillar-card p {
  color: rgba(255, 255, 255, .75);
  font-size: .9rem;
  line-height: 1.55;
  margin: 0;
}
.careers-mission .container { padding-left: clamp(16px, 4vw, 32px); padding-right: clamp(16px, 4vw, 32px); }
@media (max-width: 768px) {
  .careers-mission { padding: 44px 0 40px; }
  .mission-pillars { grid-template-columns: 1fr; gap: 14px; }
}

/* ============ AREA-PAGE "CHOOSE YOUR BRAND" CARDS ============ */
.area-brand-section {
  background: var(--off);
  padding: 56px 0;
  border-top: 1px solid rgba(10, 15, 46, .06);
}
.area-brand-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 14px;
  margin-top: 28px;
}
@media (max-width: 1024px) { .area-brand-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 480px)  { .area-brand-grid { grid-template-columns: repeat(2, 1fr); } }

.area-brand-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 22px 14px 18px;
  background: var(--white);
  border: 1px solid rgba(10, 15, 46, .08);
  border-radius: 14px;
  text-decoration: none;
  color: var(--gray);
  transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease, color 220ms ease;
  animation: abcFadeIn 600ms cubic-bezier(.2,.8,.2,1) both;
  --brand-accent: var(--blue);
}
.area-brand-card:hover,
.area-brand-card:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px -10px rgba(10, 15, 46, .14);
  border-color: var(--brand-accent);
  color: var(--brand-accent);
  outline: none;
}

.area-brand-card .abc-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  transition: transform 260ms cubic-bezier(.2,.8,.2,1);
}
.area-brand-card:hover .abc-icon { transform: scale(1.08); }
.area-brand-card .abc-icon svg { display: block; width: 36px; height: 36px; }

.area-brand-card .abc-meta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  text-align: center;
}
.area-brand-card .abc-brand-name {
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 1rem;
  color: var(--navy);
  letter-spacing: -.01em;
  line-height: 1.2;
}
.area-brand-card .abc-models {
  font-family: 'Nunito', sans-serif;
  font-size: .72rem;
  color: var(--gray);
  font-weight: 500;
  line-height: 1.35;
}
.area-brand-card .abc-arrow {
  position: absolute;
  top: 12px;
  right: 12px;
  font-size: .7rem;
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 200ms ease, transform 200ms ease;
}
.area-brand-card:hover .abc-arrow,
.area-brand-card:focus-visible .abc-arrow {
  opacity: 1;
  transform: translateX(0);
}

/* Per-brand accent — drives hover border + icon + arrow color */
.area-brand-card[data-brand="hp"]     { --brand-accent: #0096D6; }
.area-brand-card[data-brand="lenovo"] { --brand-accent: #E2231A; }
.area-brand-card[data-brand="acer"]   { --brand-accent: #83B81A; }
.area-brand-card[data-brand="dell"]   { --brand-accent: #0076CE; }
.area-brand-card[data-brand="asus"]   { --brand-accent: #0091D5; }
.area-brand-card[data-brand="apple"]  { --brand-accent: #555; }

/* Per-brand SVG size overrides — wordmarks need more width than dense logo marks.
   Acer/Asus/Lenovo are wordmarks (wide); HP/Apple are dense round marks (smaller). */
.area-brand-card[data-brand="hp"]     .abc-icon svg { width: 30px; height: 30px; }
.area-brand-card[data-brand="apple"]  .abc-icon svg { width: 30px; height: 30px; }
.area-brand-card[data-brand="dell"]   .abc-icon svg { width: 36px; height: 36px; }
.area-brand-card[data-brand="lenovo"] .abc-icon svg { width: 52px; height: 36px; }
.area-brand-card[data-brand="acer"]   .abc-icon svg { width: 50px; height: 36px; }
.area-brand-card[data-brand="asus"]   .abc-icon svg { width: 50px; height: 36px; }

/* Stagger entrance */
.area-brand-card:nth-child(1) { animation-delay: 0ms; }
.area-brand-card:nth-child(2) { animation-delay: 60ms; }
.area-brand-card:nth-child(3) { animation-delay: 120ms; }
.area-brand-card:nth-child(4) { animation-delay: 180ms; }
.area-brand-card:nth-child(5) { animation-delay: 240ms; }
.area-brand-card:nth-child(6) { animation-delay: 300ms; }

@keyframes abcFadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .area-brand-card { animation: none; transition: border-color 200ms ease, color 200ms ease; }
  .area-brand-card:hover { transform: none; }
  .area-brand-card:hover .abc-icon { transform: none; }
}

/* Area page "More brands we service" — 5-col × 2-row grid (10 brands fit perfectly) */
.book-brands-grid.book-brands-grid--area {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  max-width: 1100px !important;
}
@media (max-width: 900px) {
  .book-brands-grid.book-brands-grid--area { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; max-width: 720px !important; }
}
@media (max-width: 720px) {
  .book-brands-grid.book-brands-grid--area { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; max-width: 100% !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   STORE CATALOG — /store/
   v3: Google-like autocomplete dropdown, section reorder, reduced chrome.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Catalog section wrapper ─────────────────────────────────────────────── */
.store-catalog {
  padding: 56px 0;
  background: var(--off);
}
.store-catalog-title {
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  font-size: 1.6rem;
  color: var(--navy);
  text-align: center;
  margin: 0 0 8px;
}
.store-catalog-sub {
  text-align: center;
  color: var(--gray);
  margin: 0 0 28px;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  font-size: .95rem;
  line-height: 1.6;
}

/* ── Search wrap (positions dropdown) ───────────────────────────────────── */
.store-search-wrap {
  position: relative;
  max-width: 1000px;
  margin: 0 auto 24px;
}

/* ── Search bar ──────────────────────────────────────────────────────────── */
.store-search {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--white);
  border: 2px solid rgba(10,15,46,.08);
  border-radius: 14px;
  padding: 22px 24px;
  transition: border-color 200ms, box-shadow 200ms;
}
.store-search:focus-within {
  border-color: var(--blue);
  box-shadow: 0 0 0 8px rgba(26,61,228,0.06);
}
.store-search input {
  flex: 1;
  border: none;
  outline: none;
  font-family: 'Outfit', sans-serif;
  font-size: 1.08rem;
  color: var(--navy);
  background: transparent;
  min-width: 0;
}
.store-search input::placeholder { color: var(--gray); opacity: 1; }
.store-search > i { color: var(--blue); font-size: 1.2rem; flex-shrink: 0; }
.store-search-clear {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--gray);
  padding: 2px 4px;
  font-size: 1.1rem;
  line-height: 1;
  transition: color 180ms;
  flex-shrink: 0;
}
.store-search-clear:hover { color: var(--orange); }
/* ── Enter hint (shows when user has typed something) ───────────────────── */
.search-hint {
  font-family: 'Nunito', sans-serif;
  font-size: .78rem;
  color: var(--gray);
  background: rgba(10,15,46,.05);
  border-radius: 5px;
  padding: 3px 7px;
  flex-shrink: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms;
  white-space: nowrap;
}
.store-search-wrap.has-query .search-hint { opacity: 1; }
@media (max-width: 500px) { .search-hint { display: none; } }

/* ── Autocomplete dropdown ───────────────────────────────────────────────── */
.store-autocomplete {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: var(--white);
  border: 1.5px solid rgba(10,15,46,.10);
  border-radius: 14px;
  box-shadow: 0 16px 40px rgba(10,15,46,.12);
  z-index: 50;
  max-height: 460px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* Popular searches (shown when input focused + empty) */
.store-autocomplete-popular {
  padding: 12px 18px 8px;
}
.store-autocomplete-popular-label {
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: .72rem;
  color: var(--gray);
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.store-autocomplete-popular-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
/* Force single-line variant: keeps Popular Searches chips on one row, hides any
   chip that would wrap to row 2 (handled below via :nth-child fallback). */
.store-autocomplete-popular-chips--single-line {
  flex-wrap: nowrap;
  overflow: hidden;
  justify-content: center;
}
.store-autocomplete-popular-chips--single-line .trending-chip {
  flex-shrink: 0;
  white-space: nowrap;
}

/* Suggestion list */
.store-suggestions {
  list-style: none;
  margin: 0;
  padding: 6px 0;
}
.store-suggestion-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 18px;
  text-decoration: none;
  transition: background 140ms;
  color: var(--navy);
  cursor: pointer;
}
.store-suggestion-link:hover,
.store-suggestion[aria-selected="true"] .store-suggestion-link {
  background: rgba(0,212,255,0.08);
}
.suggestion-brand {
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: .65rem;
  color: var(--blue);
  letter-spacing: .06em;
  text-transform: uppercase;
  min-width: 54px;
  flex-shrink: 0;
}
.suggestion-label {
  font-family: 'Outfit', sans-serif;
  font-weight: 600;
  font-size: .92rem;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.suggestion-label mark {
  background: rgba(255,92,26,.18);
  color: inherit;
  padding: 1px 2px;
  border-radius: 2px;
}
.suggestion-cat {
  font-family: 'Nunito', sans-serif;
  font-size: .74rem;
  color: var(--gray);
  flex-shrink: 0;
  white-space: nowrap;
}
.suggestion-arrow {
  color: var(--blue);
  font-size: .8rem;
  opacity: 0;
  transition: opacity 160ms;
  flex-shrink: 0;
}
.store-suggestion-link:hover .suggestion-arrow,
.store-suggestion[aria-selected="true"] .suggestion-arrow {
  opacity: 1;
}

/* Dropdown footer */
.store-autocomplete-footer {
  border-top: 1px solid rgba(10,15,46,.06);
  padding: 10px 18px;
}
.store-view-all {
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: .85rem;
  color: var(--blue);
  text-decoration: none;
  transition: color 160ms;
}
.store-view-all:hover { color: var(--navy); }

/* ── Filter chip rows ────────────────────────────────────────────────────── */
.store-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  max-width: 1200px;
  margin: 0 auto 14px;
}
.store-filter-label {
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: .82rem;
  color: var(--navy);
  margin-right: 4px;
  flex-shrink: 0;
}
.store-chip {
  background: var(--white);
  border: 1.5px solid rgba(10,15,46,.08);
  border-radius: 999px;
  padding: 6px 14px;
  font-family: 'Outfit', sans-serif;
  font-weight: 600;
  font-size: .82rem;
  color: var(--navy);
  cursor: pointer;
  transition: all 180ms;
  line-height: 1;
}
.store-chip:hover { border-color: var(--blue); color: var(--blue); }
.store-chip.is-active { background: var(--blue); border-color: var(--blue); color: var(--white); }

/* ── Results grid ────────────────────────────────────────────────────────── */
.store-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
  max-width: 1200px;
  margin: 24px auto 0;
}
.store-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--white);
  border: 1.5px solid rgba(10,15,46,.06);
  border-radius: 12px;
  padding: 16px;
  text-decoration: none;
  transition: all 220ms;
}
.store-card:hover {
  transform: translateY(-2px);
  border-color: var(--blue);
  box-shadow: 0 10px 24px rgba(10,15,46,.06);
}
.store-card-brand {
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: .68rem;
  color: var(--blue);
  letter-spacing: .06em;
  text-transform: uppercase;
}
.store-card-label {
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: .94rem;
  color: var(--navy);
  margin: 0;
  line-height: 1.3;
}
.store-card-label mark {
  background: rgba(255,92,26,.18);
  color: inherit;
  padding: 1px 2px;
  border-radius: 2px;
}
.store-card-cat {
  font-family: 'Nunito', sans-serif;
  font-weight: 600;
  font-size: .76rem;
  color: var(--gray);
}

/* ── Load more button ────────────────────────────────────────────────────── */
.store-loadmore {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: max-content;
  margin: 32px auto 0;
  padding: 14px 28px;
  background: var(--white);
  color: var(--blue);
  border: 2px solid var(--blue);
  border-radius: 999px;
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: .95rem;
  cursor: pointer;
  transition: background 220ms cubic-bezier(.22,1,.36,1), color 220ms, transform 220ms cubic-bezier(.22,1,.36,1), box-shadow 220ms;
  box-shadow: 0 2px 0 rgba(26,61,228,.08);
}
.store-loadmore:hover,
.store-loadmore:focus-visible {
  background: var(--blue);
  color: var(--white);
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(26,61,228,.18);
  outline: none;
}
.store-loadmore i { font-size: .85rem; }

/* ── Empty state ─────────────────────────────────────────────────────────── */
.store-empty {
  text-align: center;
  padding: 60px 20px;
  color: var(--gray);
}
.store-empty i {
  font-size: 3rem;
  opacity: .3;
  margin-bottom: 16px;
  display: block;
}
.store-empty h3 { color: var(--navy); margin-bottom: 8px; }
.store-empty p { margin-bottom: 20px; }

/* ── Store search CTA (injected into brand hubs) ─────────────────────────── */
.store-search-cta {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--blue);
  color: var(--white);
  padding: 14px 24px;
  border-radius: 14px;
  text-decoration: none;
  font-family: 'Outfit', sans-serif;
  font-weight: 600;
  font-size: .96rem;
  max-width: 580px;
  margin: 0 auto 24px;
  transition: background 200ms;
}
.store-search-cta:hover { background: #0a2bd0; color: var(--white); }
.store-search-cta strong { color: var(--cyan); }
.store-search-cta i:last-child { margin-left: auto; }

/* ── Active filter indicator bar (improvement 1) ────────────────────────── */
.store-active-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 12px 4px;
}
/* HTML hidden attribute must beat the explicit display rules above */
.store-active-filters[hidden],
.store-active-chip[hidden] { display: none !important; }
.store-active-label {
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: .82rem;
  color: var(--navy);
  flex-shrink: 0;
}
.store-active-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--blue);
  color: var(--white);
  padding: 4px 6px 4px 12px;
  border-radius: 999px;
  font-family: 'Outfit', sans-serif;
  font-weight: 600;
  font-size: .78rem;
  line-height: 1;
}
.store-active-chip button {
  background: transparent;
  border: none;
  color: var(--white);
  cursor: pointer;
  font-size: .88rem;
  padding: 2px 6px;
  line-height: 1;
  opacity: .8;
  transition: opacity 140ms;
  border-radius: 999px;
}
.store-active-chip button:hover { opacity: 1; background: rgba(255,255,255,.15); }
.store-filter-reset {
  background: transparent;
  border: none;
  color: var(--blue);
  font-family: 'Outfit', sans-serif;
  font-weight: 600;
  font-size: .82rem;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
  margin-left: 8px;
  padding: 2px 4px;
  transition: color 140ms;
}
.store-filter-reset:hover { color: var(--orange); }

/* ── Can't find card (improvement 5 — replaces old strip) ───────────────── */
.store-cant-find {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 20px;
  padding: 24px;
  margin: 32px auto 0;
  max-width: 880px;
  background: rgba(37, 211, 102, 0.06);
  border: 1.5px solid rgba(37, 211, 102, 0.18);
  border-radius: 14px;
}
.store-cant-find-icon {
  font-size: 2.4rem;
  color: #25D366;
  flex-shrink: 0;
  line-height: 1;
}
.store-cant-find-text { flex: 1; }
.store-cant-find-text h3 {
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 1.2rem;
  color: var(--navy);
  margin: 0 0 6px;
}
.store-cant-find-text p {
  font-family: 'Nunito', sans-serif;
  color: var(--gray);
  font-size: .9rem;
  margin: 0;
}
.store-cant-find .btn { flex-shrink: 0; white-space: nowrap; }
@media (max-width: 640px) {
  .store-cant-find {
    flex-direction: column;
    text-align: center;
  }
  .store-cant-find .btn { width: 100%; justify-content: center; }
}

/* ── Dropdown enter animation ────────────────────────────────────────────── */
@keyframes store-dropdown-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.store-autocomplete:not([hidden]) {
  animation: store-dropdown-in 200ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
@media (prefers-reduced-motion: reduce) {
  .store-autocomplete:not([hidden]) { animation: none; }
}

/* ── Chip press micro-interaction ────────────────────────────────────────── */
.store-chip:active,
.trending-chip:active {
  transform: scale(0.95);
  transition: transform 80ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* ── Result-card stagger fade-in (first render only, via .store-card-new) ─ */
@keyframes store-card-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.store-card.store-card-new {
  animation: store-card-in 280ms cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: calc(var(--card-i, 0) * 30ms);
}
/* Belt-and-suspenders: if animation never fires, ensure card is still visible */
.store-card { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .store-card.store-card-new { animation: none; }
}

/* ── Skeleton loading shimmer (shown while parts.json fetches) ────────────── */
@keyframes store-shimmer {
  0%   { background-position: -600px 0; }
  100% { background-position: 600px 0; }
}
.store-skeleton-bar {
  height: 18px;
  border-radius: 6px;
  background: linear-gradient(90deg, rgba(10,15,46,.06) 25%, rgba(10,15,46,.12) 50%, rgba(10,15,46,.06) 75%);
  background-size: 600px 100%;
  animation: store-shimmer 1.2s ease-in-out infinite;
  margin: 0 0 6px;
}
.store-skeleton-bar:last-child { width: 60%; margin-bottom: 0; }
.store-skeleton-row {
  padding: 12px 18px;
  display: flex;
  flex-direction: column;
  gap: 0;
}
@media (prefers-reduced-motion: reduce) {
  .store-skeleton-bar { animation: none; background: rgba(10,15,46,.07); }
}

/* ── Zero-result inline fallback in dropdown ─────────────────────────────── */
.store-autocomplete-noresult {
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
}
.store-autocomplete-noresult[hidden] { display: none !important; }
.store-noresult-msg {
  font-family: 'Outfit', sans-serif;
  font-size: .92rem;
  font-weight: 600;
  color: var(--navy);
  text-align: center;
}
.store-noresult-msg span {
  color: var(--gray);
  font-weight: 400;
}
.store-noresult-wa {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-family: 'Outfit', sans-serif;
  font-size: .82rem;
  font-weight: 700;
  color: #25D366;
  text-decoration: none;
  transition: color 160ms;
}
.store-noresult-wa:hover { color: var(--navy); }
.store-noresult-wa i { font-size: .96rem; }

/* ── Recent searches section in dropdown ─────────────────────────────────── */
.store-autocomplete-recent {
  padding: 12px 18px 6px;
  border-bottom: 1px solid rgba(10,15,46,.05);
}
.store-autocomplete-recent-label {
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: .72rem;
  color: var(--gray);
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: 8px;
  text-align: center;
}
.store-recent-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
}
.recent-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(10,15,46,.04);
  border: 1px solid rgba(10,15,46,.08);
  border-radius: 999px;
  padding: 4px 10px;
  font-family: 'Outfit', sans-serif;
  font-weight: 600;
  font-size: .76rem;
  color: var(--navy);
  cursor: pointer;
  transition: all 160ms;
}
.recent-chip:hover { background: var(--navy); color: var(--white); border-color: var(--navy); }
.recent-chip i { font-size: .72rem; opacity: .55; }

/* ── Category icon in suggestions (left of brand badge) ─────────────────── */
.suggestion-cat-icon {
  font-size: .88rem;
  color: var(--gray);
  flex-shrink: 0;
  width: 16px;
  text-align: center;
  opacity: .7;
}

/* ── Active chip clear (X) button ────────────────────────────────────────── */
.store-chip.is-active .chip-clear-x {
  display: inline-flex;
  align-items: center;
  margin-left: 4px;
  opacity: .75;
  vertical-align: middle;
  line-height: 1;
  font-size: .72rem;
}
.store-chip:not(.is-active) .chip-clear-x { display: none; }

/* ── Keyboard hint footer ─────────────────────────────────────────────────── */
.store-autocomplete-kbd-hint {
  border-top: 1px solid rgba(10,15,46,.05);
  padding: 7px 18px;
  font-family: 'Nunito', sans-serif;
  font-size: .72rem;
  color: var(--gray);
  opacity: .75;
  letter-spacing: .01em;
}
.store-autocomplete-kbd-hint kbd {
  font-family: inherit;
  font-size: .70rem;
  background: rgba(10,15,46,.07);
  border-radius: 3px;
  padding: 1px 4px;
  color: var(--navy);
}
@media (max-width: 600px) {
  .store-autocomplete-kbd-hint { display: none; }
}

/* ── aria-live result-count region (visually shown in .store-results-bar) ── */
/* (no extra style needed; uses existing .store-result-summary) */

/* ── Focus ring on suggestions (keyboard nav) ────────────────────────────── */
.store-suggestion:focus-visible .store-suggestion-link,
.store-suggestion[aria-selected="true"] .store-suggestion-link {
  background: rgba(0,212,255,0.08);
  outline: none;
}
.store-suggestion-link:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: -2px;
  border-radius: 4px;
}

/* ── Mobile chip overflow scroll lane (improvement 2) ───────────────────── */
@media (max-width: 768px) {
  .store-filters {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    padding-bottom: 6px;
    scrollbar-width: none;
  }
  .store-filters::-webkit-scrollbar { display: none; }
  .store-filter-label {
    position: sticky;
    left: 0;
    background: linear-gradient(90deg, var(--off) 80%, transparent);
    padding-right: 12px;
    z-index: 1;
  }
  .store-chip {
    flex-shrink: 0;
    scroll-snap-align: start;
  }
}

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .store-grid { grid-template-columns: 1fr; }
  .store-search { padding: 12px 14px; gap: 8px; }
  .store-search input { font-size: .9rem; }
  .store-autocomplete { border-radius: 12px; }
  .suggestion-brand { min-width: 42px; }
  .suggestion-cat { display: none; }
  .suggestion-cat-icon { display: none; }
}

/* ── Brand-color accents on result cards + suggestions (improvement 4) ───── */
.store-card[data-brand="HP"] .store-card-brand,
.store-suggestion[data-brand="HP"] .suggestion-brand          { color: #0096d6; }
.store-card[data-brand="Lenovo"] .store-card-brand,
.store-suggestion[data-brand="Lenovo"] .suggestion-brand      { color: #e2231a; }
.store-card[data-brand="Dell"] .store-card-brand,
.store-suggestion[data-brand="Dell"] .suggestion-brand        { color: #007db8; }
.store-card[data-brand="Apple"] .store-card-brand,
.store-suggestion[data-brand="Apple"] .suggestion-brand       { color: #1d1d1f; }
.store-card[data-brand="Asus"] .store-card-brand,
.store-suggestion[data-brand="Asus"] .suggestion-brand        { color: #00539b; }
.store-card[data-brand="Acer"] .store-card-brand,
.store-suggestion[data-brand="Acer"] .suggestion-brand        { color: #83b81a; }
.store-card[data-brand="Samsung"] .store-card-brand,
.store-suggestion[data-brand="Samsung"] .suggestion-brand     { color: #1428a0; }
.store-card[data-brand="MSI"] .store-card-brand,
.store-suggestion[data-brand="MSI"] .suggestion-brand         { color: #b80000; }
.store-card[data-brand="Razer"] .store-card-brand,
.store-suggestion[data-brand="Razer"] .suggestion-brand       { color: #2bbf3a; }
.store-card[data-brand="Microsoft"] .store-card-brand,
.store-suggestion[data-brand="Microsoft"] .suggestion-brand   { color: #00a4ef; }
.store-card[data-brand="LG"] .store-card-brand,
.store-suggestion[data-brand="LG"] .suggestion-brand          { color: #a50034; }
.store-card[data-brand="Xiaomi"] .store-card-brand,
.store-suggestion[data-brand="Xiaomi"] .suggestion-brand      { color: #ff6900; }
.store-card[data-brand="Honor"] .store-card-brand,
.store-suggestion[data-brand="Honor"] .suggestion-brand       { color: #c8102e; }
.store-card[data-brand="Sony"] .store-card-brand,
.store-suggestion[data-brand="Sony"] .suggestion-brand        { color: #1d1d1f; }
.store-card[data-brand="Toshiba"] .store-card-brand,
.store-suggestion[data-brand="Toshiba"] .suggestion-brand     { color: #d50000; }
.store-card[data-brand="Other"] .store-card-brand,
.store-suggestion[data-brand="Other"] .suggestion-brand       { color: #6b7a99; }
.store-card[data-brand="Projector"] .store-card-brand,
.store-suggestion[data-brand="Projector"] .suggestion-brand   { color: #6b7a99; }

/* ── Category tiles ──────────────────────────────────────────────────────── */
.store-categories { padding: 32px 0 16px; }
.section-title-sm {
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  font-size: 1.4rem;
  color: var(--navy);
  margin: 0 0 18px;
  text-align: center;
}
.cat-tile-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  max-width: 1200px;
  margin: 0 auto;
}

/* ── Horizontal tile layout: icon + content + arrow ─────────────────────── */
.cat-tile {
  background: var(--white);
  border: 1.5px solid rgba(10,15,46,.06);
  border-radius: 12px;
  padding: 16px 20px;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 14px;
  cursor: pointer;
  transition: border-color 200ms, box-shadow 200ms;
  text-align: left;
}
.cat-tile:hover {
  border-color: var(--blue);
  box-shadow: 0 12px 28px rgba(10,15,46,.08);
}
.cat-tile:hover .cat-tile-arrow {
  opacity: 1;
  transform: translateX(4px);
  color: var(--blue);
}
.cat-tile.is-active {
  background: var(--blue);
  border-color: var(--blue);
  color: var(--white);
}
.cat-tile.is-active .cat-count { color: rgba(255,255,255,.80); }
.cat-tile.is-active .cat-tile-icon { background: rgba(255,255,255,.18); }
.cat-tile.is-active .cat-tile-icon i { color: var(--white); }
.cat-tile.is-active .cat-tile-arrow { color: rgba(255,255,255,.70); opacity: .7; }
/* Icon container */
.cat-tile-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: rgba(26,61,228,0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.cat-tile-icon i { color: var(--blue); font-size: 1.4rem; }
/* Content block */
.cat-tile-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
.cat-name {
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: .94rem;
  color: var(--navy);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cat-tile.is-active .cat-name { color: var(--white); }
.cat-count {
  font-family: 'Nunito', sans-serif;
  font-weight: 600;
  font-size: .78rem;
  color: var(--gray);
}
/* Loading shimmer placeholder */
.cat-count.is-loading {
  color: transparent;
  background: linear-gradient(90deg, rgba(10,15,46,.06) 25%, rgba(10,15,46,.12) 50%, rgba(10,15,46,.06) 75%);
  background-size: 200% 100%;
  animation: catCountShimmer 1.4s ease-in-out infinite;
  border-radius: 4px;
  width: 56px;
  display: inline-block;
}
@keyframes catCountShimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) { .cat-count.is-loading { animation: none; } }
/* Arrow chevron */
.cat-tile-arrow {
  font-size: .82rem;
  color: var(--gray);
  opacity: .5;
  flex-shrink: 0;
  transition: opacity 200ms, transform 200ms, color 200ms;
}
/* Responsive grid */
@media (max-width: 1100px) { .cat-tile-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px)  { .cat-tile-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 400px)  { .cat-tile-grid { grid-template-columns: 1fr; } }

/* ── Trending searches (Feature 2) ──────────────────────────────────────── */
.store-trending {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  max-width: 880px;
  margin: 0 auto 18px;
}
.store-trending-label {
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: .82rem;
  color: var(--navy);
}
.trending-chip {
  background: rgba(0,212,255,0.06);
  border: 1px solid rgba(0,212,255,0.18);
  border-radius: 999px;
  padding: 5px 12px;
  font-family: 'Outfit', sans-serif;
  font-weight: 600;
  font-size: .78rem;
  color: var(--blue);
  cursor: pointer;
  transition: all 180ms;
}
.trending-chip:hover { background: var(--blue); color: var(--white); border-color: var(--blue); }

/* ── Suggestion left-accent bar micro-interaction ────────────────────────── */
.store-suggestion {
  position: relative;
}
.store-suggestion::before {
  content: '';
  position: absolute;
  left: 0;
  top: 4px;
  bottom: 4px;
  width: 0;
  background: var(--blue);
  border-radius: 0 2px 2px 0;
  transition: width 180ms cubic-bezier(0.16, 1, 0.3, 1);
}
.store-suggestion-link:hover ~ .store-suggestion::before,
.store-suggestion:hover::before,
.store-suggestion[aria-selected="true"]::before {
  width: 4px;
}
/* Fix: the ::before lives on the li, hover is on the child link */
.store-suggestion:hover::before,
.store-suggestion[aria-selected="true"]::before { width: 4px; }
@media (prefers-reduced-motion: reduce) {
  .store-suggestion::before { transition: none; }
}

/* ── Filter chip pulse on first activation ───────────────────────────────── */
@keyframes chipActivate {
  0%   { box-shadow: 0 0 0 0   rgba(26,61,228,.40); }
  60%  { box-shadow: 0 0 0 6px rgba(26,61,228,.0);  }
  100% { box-shadow: 0 0 0 0   rgba(26,61,228,.0);  }
}
.store-chip.chip-pulse {
  animation: chipActivate 400ms cubic-bezier(0.16, 1, 0.3, 1) 1;
}
@media (prefers-reduced-motion: reduce) { .store-chip.chip-pulse { animation: none; } }

/* ── Brand-color hover tint on result cards ───────────────────────────────── */
/* Brand-colored hover state — tinted background + colored glow shadow + matching border */
.store-card[data-brand="HP"]        { --brand-rgb: 0,150,214;   --brand-hex: #0096d6; }
.store-card[data-brand="Lenovo"]    { --brand-rgb: 226,35,26;   --brand-hex: #e2231a; }
.store-card[data-brand="Dell"]      { --brand-rgb: 0,125,184;   --brand-hex: #007db8; }
.store-card[data-brand="Apple"]     { --brand-rgb: 80,80,82;    --brand-hex: #555555; }
.store-card[data-brand="Asus"]      { --brand-rgb: 0,83,155;    --brand-hex: #00539b; }
.store-card[data-brand="Acer"]      { --brand-rgb: 131,184,26;  --brand-hex: #83b81a; }
.store-card[data-brand="Samsung"]   { --brand-rgb: 20,40,160;   --brand-hex: #1428a0; }
.store-card[data-brand="MSI"]       { --brand-rgb: 184,0,0;     --brand-hex: #b80000; }
.store-card[data-brand="Razer"]     { --brand-rgb: 43,191,58;   --brand-hex: #2bbf3a; }
.store-card[data-brand="Microsoft"] { --brand-rgb: 0,164,239;   --brand-hex: #00a4ef; }
.store-card[data-brand="LG"]        { --brand-rgb: 165,0,52;    --brand-hex: #a50034; }
.store-card[data-brand="Xiaomi"]    { --brand-rgb: 255,105,0;   --brand-hex: #ff6900; }
.store-card[data-brand="Honor"]     { --brand-rgb: 200,16,46;   --brand-hex: #c8102e; }
.store-card[data-brand="Sony"]      { --brand-rgb: 29,29,31;    --brand-hex: #1d1d1f; }
.store-card[data-brand="Toshiba"]   { --brand-rgb: 213,0,0;     --brand-hex: #d50000; }
.store-card[data-brand="Other"]     { --brand-rgb: 107,122,153; --brand-hex: #6b7a99; }
.store-card[data-brand="Projector"] { --brand-rgb: 107,122,153; --brand-hex: #6b7a99; }
/* Default fallback if data-brand missing */
.store-card                         { --brand-rgb: 26,61,228;   --brand-hex: #1a3de4; }

/* Hover: only the brand-colored shadow changes — no background or border tint */

/* ── Collapsible browse-by-type section — now collapsed by default everywhere */
/* (handled fully in Item 6 block below; legacy mobile-only rule superseded) */
.store-categories-details {
  /* No extra wrapper styling needed */
}

/* ── Results bar: count only ─────────────────────────────────────────────── */
.store-results-bar {
  display: flex;
  align-items: center;
  max-width: 1200px;
  margin: 18px auto 14px;
  padding: 0 4px;
}
.store-result-summary {
  font-family: 'Nunito', sans-serif;
  font-size: .9rem;
  color: var(--navy);
}

/* ── Bulk pricing CTA (Feature 4) ────────────────────────────────────────── */
.store-bulk-section { padding: 0 0 56px; }
.store-bulk-cta {
  display: flex;
  gap: 24px;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(135deg, var(--navy) 0%, var(--blue) 100%);
  border-radius: 16px;
  padding: 32px;
  max-width: 1200px;
  margin: 56px auto 0;
  color: var(--white);
}
.store-bulk-text h3 {
  color: var(--white);
  margin: 0 0 8px;
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  font-size: 1.4rem;
}
.store-bulk-text p {
  color: rgba(255,255,255,.85);
  margin: 0;
  max-width: 640px;
}
.store-bulk-cta-btns {
  display: flex;
  gap: 12px;
  flex-shrink: 0;
}
@media (max-width: 768px) {
  .store-bulk-cta { flex-direction: column; text-align: center; }
  .store-bulk-cta-btns { flex-wrap: wrap; justify-content: center; }
}

/* ── Enhanced empty state ────────────────────────────────────────────────── */
.store-empty-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin: 18px 0;
}
.store-empty-or {
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  color: var(--gray);
  margin: 18px 0 14px;
}

/* ── Pain 1: Chip overflow collapse ─────────────────────────────────────────
   Overflow chips live in a .store-chips-overflow div.
   Closed: display:none (instant). Open: display:contents so chips flow inline
   with the parent flex row. Chips fade-in via opacity+transform on .is-open.   */
.store-chips-overflow {
  display: none;
}
.store-chips-overflow.is-open {
  display: contents; /* chips become direct flex items of the filter row */
}
.store-chips-overflow.is-open .store-chip {
  animation: chipReveal 220ms cubic-bezier(0.16,1,0.3,1) both;
}
@keyframes chipReveal {
  from { opacity: 0; transform: scale(0.90); }
  to   { opacity: 1; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .store-chips-overflow.is-open .store-chip { animation: none; }
}
/* The "more" toggle button */
.store-more-toggle {
  background: transparent;
  border: 1.5px solid rgba(26,61,228,.18);
  color: var(--blue);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  font-weight: 700;
  margin-left: auto; /* pushes the toggle to the right end of its flex row */
}
.store-more-toggle:hover {
  background: rgba(26,61,228,.06);
  border-color: rgba(26,61,228,.45);
  color: var(--blue);
}
.store-more-toggle.is-open {
  background: rgba(26,61,228,.06);
  border-color: rgba(26,61,228,.45);
}
.more-toggle-icon {
  font-size: .72rem;
  transition: transform 220ms cubic-bezier(0.16,1,0.3,1);
}
.store-more-toggle.is-open .more-toggle-icon {
  transform: rotate(180deg);
}
@media (prefers-reduced-motion: reduce) {
  .store-chips-overflow .store-chip,
  .more-toggle-icon { transition: none; }
}

/* ── Pain 2: Dominant search input ─────────────────────────────────────────── */
/* Override the base .store-search padding + font size */
.store-search {
  padding: 26px 28px;
}
.store-search input {
  font-size: 1.18rem;
}
.store-search:focus-within {
  box-shadow: 0 0 0 10px rgba(26,61,228,0.07), 0 4px 24px rgba(26,61,228,0.10);
}
/* Tighten the h2 → sub → search unit */
.store-catalog-title { margin-bottom: 6px; }
.store-catalog-sub   { margin-bottom: 20px; }
/* Mobile: ensure 56px minimum height */
@media (max-width: 600px) {
  .store-search { padding: 16px 18px; min-height: 56px; }
  .store-search input { font-size: 1rem; }
}

/* ── Pain 3: Highlights bar trust signals ───────────────────────────────────
   Alternating cyan / orange icon tints. Thin vertical dividers on desktop.     */
.hb-item i { font-size: 1.05rem; }
.hb-icon-cyan   { color: var(--cyan) !important; }
.hb-icon-orange { color: var(--orange) !important; }
.hb-divider {
  width: 1px;
  height: 22px;
  background: rgba(10,15,46,.10);
  flex-shrink: 0;
  align-self: center;
}
/* Remove legacy right-border dividers (replaced by explicit .hb-divider) */
.hb-item { border-right: none; padding: 0 20px; }
@media (max-width: 768px) {
  .hb-divider { display: none; }
  .hb-item { padding: 4px 12px; }
}

/* ── Pain 4: SKU card — category icon + hover accent ────────────────────────
   Left-edge transform-based accent: slides in 4px on hover (no always-visible
   stripe — that pattern is banned by impeccable skill).                         */
.store-card {
  position: relative;
  overflow: hidden;
}
.store-card::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  border-radius: 0 2px 2px 0;
  transform: translateX(-3px);
  transition: transform 220ms cubic-bezier(0.16,1,0.3,1);
}
.store-card:hover::before { transform: translateX(0); }
/* Per-brand accent colors on the hover edge */
.store-card[data-brand="HP"]::before        { background: #0096d6; }
.store-card[data-brand="Lenovo"]::before    { background: #e2231a; }
.store-card[data-brand="Dell"]::before      { background: #007db8; }
.store-card[data-brand="Apple"]::before     { background: #1d1d1f; }
.store-card[data-brand="Asus"]::before      { background: #00539b; }
.store-card[data-brand="Acer"]::before      { background: #83b81a; }
.store-card[data-brand="Samsung"]::before   { background: #1428a0; }
.store-card[data-brand="MSI"]::before       { background: #b80000; }
.store-card[data-brand="Razer"]::before     { background: #2bbf3a; }
.store-card[data-brand="Microsoft"]::before { background: #00a4ef; }
.store-card[data-brand="LG"]::before        { background: #a50034; }
.store-card[data-brand="Xiaomi"]::before    { background: #ff6900; }
.store-card[data-brand="Honor"]::before     { background: #c8102e; }
.store-card[data-brand="Projector"]::before { background: var(--gray); }
@media (prefers-reduced-motion: reduce) {
  .store-card::before { transition: none; }
}
/* Category icon — small glyph in .store-card-cat */
.store-card-cat {
  display: flex;
  align-items: center;
  gap: 5px;
}
.store-card-cat-icon {
  font-size: .66rem;
  color: var(--gray);
  opacity: .65;
}

/* ── Pain 6: Section rhythm (store-page global selectors only) ──────────────
   svc-expert and svc-faq are scoped to store/index.html inline style.
   Store-only selectors below are safe globally (only on store page).           */
.store-catalog { padding: 80px 0; }
.store-categories { padding: 48px 0 16px; }
.store-cant-find-section { padding: 0 0 40px; }
.store-bulk-section { padding: 0 0 64px; }
/* Reduce cat tile padding ~20% */
.cat-tile { padding: 13px 16px; }

/* ── Pain 6: cat-tile reduced padding ───────────────────────────────────────
   (Already defined above; the override here ensures the store page tile padding
   is tighter than the default 16px×20px.) This selector is store-catalog-scoped
   via the .store-categories context class. */

/* ═══════════════════════════════════════════════════════════════════════════
   STORE REVAMP v4 — 10-item UX/motion/hierarchy pass
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Store search — position relative for the focus hint overlay ─────────── */
.store-search { position: relative; }

/* ── Item 1: Hero — search-led, compressed ───────────────────────────────── */
.store-hero {
  background: linear-gradient(135deg, var(--navy) 0%, #0d1b5e 60%, #0a1840 100%);
  padding: 118px 0 44px; /* 70px nav + 48px top breathing room */
  color: var(--white);
  text-align: center;
  position: relative;
  z-index: 5; /* keep autocomplete dropdown above highlights bar / catalog below */
}
@media (max-width: 768px) {
  .store-hero { padding: 96px 0 36px; }
}
/* Decorative cyan glow — kept inside via inset positioning, not overflow:hidden */
.store-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle 360px at 92% -8%, rgba(0,212,255,0.10), transparent 65%),
    radial-gradient(circle 280px at 8% 110%, rgba(0,212,255,0.06), transparent 70%);
  pointer-events: none;
  z-index: -1;
}
.store-hero .container { position: relative; z-index: 1; }
.store-hero .breadcrumb { font-size: .9rem; margin: 0 0 18px; }
.store-hero .breadcrumb ol {
  list-style: none; padding: 0; margin: 0;
  display: inline-flex; flex-wrap: wrap;
  align-items: center; gap: 6px 10px;
}
.store-hero .breadcrumb li {
  display: inline-flex; align-items: center; gap: 10px;
  color: rgba(255,255,255,.75);
}
.store-hero .breadcrumb li + li::before {
  content: '';
  width: 6px; height: 6px;
  border-top: 2px solid rgba(255,255,255,.30);
  border-right: 2px solid rgba(255,255,255,.30);
  transform: rotate(45deg);
  display: inline-block; flex: 0 0 auto; margin-right: 2px;
}
.store-hero .breadcrumb a {
  color: var(--cyan); text-decoration: none;
  padding: 2px 4px; margin: -2px -4px; border-radius: 4px;
  transition: color 200ms ease, background-color 200ms ease;
}
.store-hero .breadcrumb a:hover { color: var(--white); background: rgba(255,255,255,.08); }
.store-hero .breadcrumb a:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.store-hero .breadcrumb a .fa-house { margin-right: 4px; font-size: .82em; opacity: .9; }
.store-hero .breadcrumb [aria-current="page"] { color: rgba(255,255,255,.9); font-weight: 600; }

.store-hero h1 {
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  font-size: clamp(1.7rem, 3.5vw, 2.4rem);
  color: var(--white);
  margin: 0 0 8px;
  line-height: 1.2;
}
.store-hero p.lede {
  color: rgba(255,255,255,.82);
  font-size: 1.05rem;
  max-width: 600px;
  margin: 0 auto 20px;
  line-height: 1.55;
}
/* Search wrap lives inside hero on this page */
.store-hero .store-search-wrap {
  max-width: 760px;
  margin: 0 auto 0;
}
/* Make search bar white on dark hero */
.store-hero .store-search {
  background: var(--white);
  border-color: transparent;
  box-shadow: 0 4px 24px rgba(0,0,0,.20);
}
/* Focus-enter scale pulse on search */
@keyframes store-search-focus-in {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.005); }
  100% { transform: scale(1); }
}
.store-hero .store-search:focus-within {
  border-color: var(--cyan);
  box-shadow: 0 0 0 12px rgba(26,61,228,.10), 0 4px 24px rgba(0,0,0,.18);
  animation: store-search-focus-in 240ms cubic-bezier(0.25,1,0.5,1) 1;
}
@media (prefers-reduced-motion: reduce) {
  .store-hero .store-search:focus-within { animation: none; }
}
/* Keyboard shortcut hint — shown bottom-right just below search wrap */
.store-search-kbd-hint {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  font-family: 'Nunito', sans-serif;
  font-size: .72rem;
  color: rgba(255,255,255,.55);
  white-space: nowrap;
  pointer-events: none;
}
.store-search-kbd-hint kbd {
  font-family: inherit; font-size: .68rem;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.20);
  border-radius: 3px; padding: 1px 4px;
  color: rgba(255,255,255,.70);
}
@media (max-width: 600px) { .store-search-kbd-hint { display: none; } }

/* Placeholder opacity fade when user types */
.store-search input::placeholder {
  transition: opacity 160ms ease;
}
.store-search-wrap.has-query .store-search input::placeholder {
  opacity: 0;
}

/* Focus hint inside input — "Press ↵ to view all matches" */
.store-search-focus-hint {
  position: absolute;
  right: 56px; /* clear the enter-hint chip and clear btn */
  top: 50%;
  transform: translateY(-50%);
  font-family: 'Nunito', sans-serif;
  font-size: .74rem;
  color: var(--gray);
  pointer-events: none;
  opacity: 0;
  transition: opacity 200ms ease;
  white-space: nowrap;
}
.store-search-wrap.is-focused:not(.has-query) .store-search-focus-hint { opacity: 1; }
@media (max-width: 600px) { .store-search-focus-hint { display: none; } }

/* ── Item 2: <mark> pulse in suggestions ─────────────────────────────────── */
@keyframes mark-pulse {
  0%   { background-color: rgba(255,92,26,.18); color: inherit; }
  50%  { background-color: rgba(0,212,255,.30); color: inherit; }
  100% { background-color: rgba(255,92,26,.18); color: inherit; }
}
.suggestion-label mark.mark-pulse,
.store-card-label mark.mark-pulse {
  animation: mark-pulse 600ms cubic-bezier(0.25,1,0.5,1) 1;
}
@media (prefers-reduced-motion: reduce) {
  .suggestion-label mark.mark-pulse,
  .store-card-label mark.mark-pulse { animation: none; }
}

/* ── Item 3: Chip hover lift ─────────────────────────────────────────────── */
.store-chip:not(.store-more-toggle):hover {
  transform: translateY(-1px);
}
.store-chip:not(.store-more-toggle):active {
  transform: translateY(0) scale(0.96);
}
/* Stagger for overflow chip reveal (uses CSS custom property --chip-i set via JS) */
.store-chips-overflow.is-open .store-chip {
  animation: chipReveal 200ms cubic-bezier(0.25,1,0.5,1) both;
  animation-delay: calc(var(--chip-i, 0) * 30ms);
}
@media (prefers-reduced-motion: reduce) {
  .store-chips-overflow.is-open .store-chip { animation: none; animation-delay: 0ms; }
  .store-chip:not(.store-more-toggle):hover { transform: none; }
}

/* ── Item 4: Skeleton tiles in grid (12 cards while JSON loads) ──────────── */
.store-skeleton-card {
  background: var(--white);
  border: 1.5px solid rgba(10,15,46,.06);
  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.store-skeleton-line {
  height: 12px;
  border-radius: 6px;
  background: linear-gradient(90deg,
    rgba(10,15,46,.05) 0%,
    rgba(10,15,46,.11) 40%,
    rgba(10,15,46,.05) 80%
  );
  background-size: 400px 100%;
  animation: skeleton-sweep 1.4s ease-in-out infinite;
}
.store-skeleton-line:nth-child(1) { width: 40%; height: 10px; }
.store-skeleton-line:nth-child(2) { width: 85%; height: 14px; margin-top: 2px; }
.store-skeleton-line:nth-child(3) { width: 60%; height: 12px; margin-top: 2px; }
.store-skeleton-line:nth-child(1) { animation-delay: 0ms; }
.store-skeleton-line:nth-child(2) { animation-delay: 80ms; }
.store-skeleton-line:nth-child(3) { animation-delay: 160ms; }
@keyframes skeleton-sweep {
  0%   { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}
@media (prefers-reduced-motion: reduce) {
  .store-skeleton-line { animation: none; background: rgba(10,15,46,.07); }
}

/* ── Item 4: Card hover — bright brand-colored shadow + brand border.
   No background tint; only the border and shadow take the brand color. */
.store-card:hover {
  transform: translateY(-4px);
  background: var(--white);
  border-color: var(--brand-hex);
  box-shadow:
    0 12px 28px rgba(var(--brand-rgb), .32),
    0 4px 10px rgba(var(--brand-rgb), .20);
}
@media (prefers-reduced-motion: reduce) {
  .store-card:hover { transform: none; }
}

/* ── Item 5: "View part →" affordance on card hover ─────────────────────── */
.store-card-action {
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: .74rem;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 220ms cubic-bezier(0.25,1,0.5,1), transform 220ms cubic-bezier(0.25,1,0.5,1);
  margin-top: 6px;
}
.store-card:hover .store-card-action {
  opacity: 1;
  transform: translateX(0);
}
/* Color is set via JS data-brand attribute — falls back to blue */
.store-card-action { color: var(--blue); }
.store-card[data-brand="HP"] .store-card-action     { color: #0096d6; }
.store-card[data-brand="Lenovo"] .store-card-action { color: #e2231a; }
.store-card[data-brand="Dell"] .store-card-action   { color: #007db8; }
.store-card[data-brand="Apple"] .store-card-action  { color: #1d1d1f; }
.store-card[data-brand="Asus"] .store-card-action   { color: #00539b; }
.store-card[data-brand="Acer"] .store-card-action   { color: #83b81a; }
.store-card[data-brand="Samsung"] .store-card-action{ color: #1428a0; }
.store-card[data-brand="MSI"] .store-card-action    { color: #b80000; }
.store-card[data-brand="Razer"] .store-card-action  { color: #2bbf3a; }
.store-card[data-brand="Microsoft"] .store-card-action{ color: #00a4ef; }
.store-card[data-brand="LG"] .store-card-action     { color: #a50034; }
.store-card[data-brand="Xiaomi"] .store-card-action { color: #ff6900; }
.store-card[data-brand="Honor"] .store-card-action  { color: #c8102e; }
@media (prefers-reduced-motion: reduce) {
  .store-card-action { opacity: 1; transform: none; }
}

/* ── Item 5: Card title 2-line clamp ─────────────────────────────────────── */
.store-card-label {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── Item 6: Section background alternation ──────────────────────────────── */
/* hero = navy dark | catalog = --off | categories = --white | cant-find = --off |
   expert = --white | bulk = --white (with dark card) | faq = --off               */
.store-catalog { background: var(--off); }
.store-categories { background: var(--white); padding: 56px 0 24px; }
.store-cant-find-section { background: var(--off); padding: 48px 0; }
.svc-expert { background: var(--white); }
.store-bulk-section { background: var(--white); }
.svc-faq { background: var(--off); }

/* ── Item 6: "Browse by part type" — default collapsed, summary is always the toggle */
.store-categories-details:not([open]) .cat-tile-grid { display: none; }
/* The redundant h2 inside details is always hidden — summary text replaces it */
.store-categories-details .section-title-sm { display: none !important; }
.store-categories-summary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  cursor: pointer;
  list-style: none;
  padding: 0 0 18px;
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  font-size: 1.3rem;
  color: var(--navy);
  user-select: none;
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}
.store-categories-summary::-webkit-details-marker { display: none; }
.store-categories-summary:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 4px;
  border-radius: 4px;
}
.store-categories-summary .summary-toggle-icon {
  font-size: .82rem;
  color: var(--blue);
  transition: transform 220ms cubic-bezier(0.25,1,0.5,1);
}
.store-categories-details[open] .summary-toggle-icon { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) {
  .store-categories-summary .summary-toggle-icon { transition: none; }
}

/* ── Item 7: Highlights bar scroll-reveal + icon hover tick ─────────────── */
.highlights-bar.hb-reveal .hb-item {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 320ms cubic-bezier(0.25,1,0.5,1), transform 320ms cubic-bezier(0.25,1,0.5,1);
}
.highlights-bar.hb-reveal.hb-visible .hb-item {
  opacity: 1;
  transform: translateY(0);
}
.hb-item:nth-child(1) { transition-delay:  0ms; }
.hb-item:nth-child(2) { transition-delay: 30ms; }  /* divider */
.hb-item:nth-child(3) { transition-delay: 60ms; }
.hb-item:nth-child(4) { transition-delay: 90ms; }  /* divider */
.hb-item:nth-child(5) { transition-delay:120ms; }
.hb-item:nth-child(6) { transition-delay:150ms; }  /* divider */
.hb-item:nth-child(7) { transition-delay:180ms; }
/* Highlights bar — hover state intentionally disabled (informational strip, not interactive) */
.hb-item i { display: inline-block; }
@media (prefers-reduced-motion: reduce) {
  .highlights-bar.hb-reveal .hb-item { opacity: 1; transform: none; transition: none; }
}

/* ── Item 8: Enhanced empty state — ambient dot pattern ─────────────────── */
.store-empty {
  position: relative;
}
.store-empty-bg {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle, rgba(26,61,228,.06) 1px, transparent 1px);
  background-size: 20px 20px;
  border-radius: 12px;
  pointer-events: none;
}
.store-empty .store-empty-bg + * { position: relative; z-index: 1; }
.store-empty > * { position: relative; z-index: 1; }

/* ── Item 8: Load more — spinner state ───────────────────────────────────── */
.store-loadmore.is-loading {
  pointer-events: none;
  opacity: .75;
}
.store-loadmore .lm-label { transition: opacity 150ms; }
.store-loadmore.is-loading .lm-label { opacity: 0; position: absolute; }
.store-loadmore .lm-spinner {
  display: none;
  font-size: .9rem;
}
.store-loadmore.is-loading .lm-spinner { display: inline-block; }

/* ── Item 10: Focus-visible — universal rule for store interactive elements */
.store-chip:focus-visible,
.cat-tile:focus-visible,
.store-loadmore:focus-visible,
.trending-chip:focus-visible,
.recent-chip:focus-visible,
.store-more-toggle:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}
/* On dark hero search */
.store-hero .store-search input:focus-visible {
  outline: none; /* handled by parent :focus-within */
}
/* Active filter chip clear buttons */
.store-active-chip button:focus-visible {
  outline: 2px solid rgba(255,255,255,.8);
  outline-offset: 1px;
  border-radius: 999px;
}
/* Filter reset */
.store-filter-reset:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
  border-radius: 3px;
}

/* ── Highlights bar on store page — lighter bg to contrast with hero ─────── */
.store-hero + .highlights-bar {
  background: var(--white);
}

/* ── Sticky compact search ────────────────────────────────────────────────── */
.store-sticky-search {
  position: fixed;
  top: 86px; /* matches desktop .nav-wrap height */
  left: 0;
  right: 0;
  z-index: 40; /* below nav (1000) and autocomplete (50); above page content */
  background: var(--white);
  border-bottom: 1px solid rgba(10,15,46,.08);
  padding: 10px 0;
  box-shadow: 0 2px 12px rgba(10,15,46,.08);
  transform: translateY(-100%);
  opacity: 0;
  transition: transform 220ms cubic-bezier(0.22,1,0.36,1), opacity 200ms;
  pointer-events: none;
}
.store-sticky-search[hidden] { display: none !important; }
.store-sticky-search.is-visible {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}
.store-sticky-search-inner {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  position: relative; /* lets teleported autocomplete dropdown anchor here */
}
/* Dropdown sized + positioned for sticky context (overrides default left/right:0) */
.store-sticky-search-inner > .store-autocomplete {
  top: calc(100% + 8px);
  left: 20px;
  right: 20px;
  max-height: min(70vh, 460px);
}
.store-sticky-search input {
  flex: 1;
  border: none;
  outline: none;
  font-family: 'Outfit', sans-serif;
  font-size: 1rem;
  color: var(--navy);
  padding: 10px 0;
  background: transparent;
}
.store-sticky-search input::placeholder { color: var(--gray); opacity: 1; }
.store-sticky-search input:focus-visible { outline: none; }
.store-sticky-search-icon { color: var(--blue); flex-shrink: 0; font-size: 1rem; }
@media (max-width: 768px) {
  .store-sticky-search { top: 64px; } /* matches mobile .nav-wrap height */
}
@media (prefers-reduced-motion: reduce) {
  .store-sticky-search { transition: none; }
}

/* ── Recently viewed SKUs in autocomplete dropdown ───────────────────────── */
.store-autocomplete-recently-viewed {
  padding: 12px 18px 6px;
  border-bottom: 1px solid rgba(10,15,46,.06);
}
.store-autocomplete-recently-viewed[hidden] { display: none !important; }
.store-recently-viewed-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: .72rem;
  color: var(--gray);
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.store-recently-viewed-clear {
  background: none;
  border: none;
  color: var(--gray);
  font-size: .72rem;
  cursor: pointer;
  padding: 2px 4px;
  text-transform: none;
  letter-spacing: 0;
  font-family: 'Nunito', sans-serif;
}
.store-recently-viewed-clear:hover { color: var(--orange); }
.store-recently-viewed-clear:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
  border-radius: 3px;
}
.store-recently-viewed-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.store-recently-viewed-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  border-radius: 8px;
  text-decoration: none;
  color: var(--navy);
  transition: background 140ms;
}
.store-recently-viewed-item:hover { background: rgba(0,212,255,0.08); }
.store-recently-viewed-item:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: -2px;
  border-radius: 8px;
}
.store-recently-viewed-brand {
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: .65rem;
  color: var(--blue);
  letter-spacing: .06em;
  text-transform: uppercase;
  min-width: 54px;
  flex-shrink: 0;
}
.store-recently-viewed-label {
  font-family: 'Outfit', sans-serif;
  font-weight: 600;
  font-size: .85rem;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.store-recently-viewed-icon {
  font-size: .78rem;
  color: var(--gray);
  flex-shrink: 0;
  opacity: .55;
}

/* ── Sort + filter polish (v6) ── */

/* ── Results bar layout ──────────────────────────────────────────────────── */
.store-results-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 24px;
}

/* ── Sort wrapper ────────────────────────────────────────────────────────── */
.store-sort-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}
.store-sort-label {
  font-family: 'Outfit', sans-serif;
  font-size: .78rem;
  font-weight: 600;
  color: var(--gray);
  white-space: nowrap;
  cursor: default;
}
.store-sort-select-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.store-sort-select-wrap select {
  appearance: none;
  -webkit-appearance: none;
  font-family: 'Outfit', sans-serif;
  font-size: .78rem;
  font-weight: 600;
  color: var(--navy);
  background: var(--off);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  padding: 5px 28px 5px 12px;
  cursor: pointer;
  outline: none;
  transition: border-color 140ms, box-shadow 140ms;
  min-width: 144px;
}
.store-sort-select-wrap select:hover {
  border-color: var(--blue);
}
.store-sort-select-wrap select:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
  border-color: var(--blue);
}
.store-sort-chevron {
  position: absolute;
  right: 10px;
  font-size: .65rem;
  color: var(--gray);
  pointer-events: none;
}

/* ── "Save filter" button ────────────────────────────────────────────────── */
.store-filter-save {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  padding: 3px 10px;
  font-family: 'Outfit', sans-serif;
  font-size: .72rem;
  font-weight: 600;
  color: var(--gray);
  cursor: pointer;
  transition: color 140ms, border-color 140ms, background 140ms;
  white-space: nowrap;
}
.store-filter-save:hover {
  color: var(--blue);
  border-color: var(--blue);
  background: rgba(26,61,228,.05);
}
.store-filter-save:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
  border-radius: var(--r-pill);
}
.store-filter-save.is-saved {
  color: var(--blue);
  border-color: var(--blue);
  background: rgba(26,61,228,.07);
}
.store-filter-save[hidden] { display: none !important; }

/* ── Active filter chip: enter animation ─────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  .store-active-chip {
    animation: chip-enter 220ms cubic-bezier(0.22,1,0.36,1) both;
  }
}
.store-active-chip[hidden] { display: none !important; }

@keyframes chip-enter {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Reset all — with filter count badge ─────────────────────────────────── */
.store-filter-reset .reset-count {
  display: inline-block;
  background: rgba(255,92,26,.15);
  color: var(--orange);
  border-radius: var(--r-pill);
  padding: 1px 6px;
  font-size: .72rem;
  font-weight: 700;
  margin-left: 3px;
  line-height: 1.4;
}

/* ── Saved filter chips in autocomplete ──────────────────────────────────── */
.store-autocomplete-saved-filters {
  padding: 10px 18px 6px;
  border-bottom: 1px solid rgba(10,15,46,.06);
}
.store-autocomplete-saved-filters[hidden] { display: none !important; }
.store-saved-filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}
.saved-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--off);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  padding: 4px 10px;
  font-family: 'Outfit', sans-serif;
  font-size: .72rem;
  font-weight: 600;
  color: var(--navy);
  cursor: pointer;
  transition: background 130ms, border-color 130ms;
}
.saved-filter-chip:hover {
  background: rgba(0,212,255,.10);
  border-color: var(--cyan);
  color: var(--navy);
}
.saved-filter-chip:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
  border-radius: var(--r-pill);
}
.saved-filter-chip-remove {
  background: none;
  border: none;
  padding: 0 0 0 2px;
  cursor: pointer;
  color: var(--gray);
  font-size: .72rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
}
.saved-filter-chip-remove:hover { color: var(--orange); }

/* ── Result count tween ─────────────────────────────────────────────────── */
#storeResultCount.is-tweening {
  opacity: .55;
  transition: opacity 80ms;
}


/* ── Discovery + visual polish (v6) ── */

/* ── 1. Top picks rail ───────────────────────────────────────────────────── */
.store-top-picks {
  margin: 0 0 28px;
  padding: 20px 24px;
  background: var(--off);
  border: 1px solid rgba(26,61,228,.08);
  border-radius: 14px;
}
.store-top-picks[hidden] { display: none !important; }
.store-top-picks-header {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.store-top-picks-header h3 {
  font-family: 'Outfit', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: var(--navy);
  margin: 0;
  line-height: 1.3;
}
.store-top-picks-sub {
  font-family: 'Nunito', sans-serif;
  font-size: .8rem;
  color: var(--gray);
  font-weight: 400;
}
.store-top-picks-rail {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 2px;
}
.store-top-picks-rail::-webkit-scrollbar { display: none; }

/* Top-pick card */
.store-top-pick-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: var(--white);
  border: 1px solid rgba(26,61,228,.10);
  border-radius: 10px;
  padding: 12px 14px;
  text-decoration: none;
  color: inherit;
  flex: 0 0 auto;
  min-width: 148px;
  max-width: 180px;
  scroll-snap-align: start;
  transition: border-color 140ms, box-shadow 140ms;
}
.store-top-pick-card:hover {
  border-color: var(--blue);
  box-shadow: 0 2px 12px rgba(26,61,228,.10);
}
.store-top-pick-card[hidden] { display: none !important; }
.store-top-pick-brand {
  font-family: 'Outfit', sans-serif;
  font-size: .65rem;
  font-weight: 700;
  color: var(--blue);
  letter-spacing: .06em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 5px;
}
.store-top-pick-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-block;
}
.store-top-pick-label {
  font-family: 'Outfit', sans-serif;
  font-size: .82rem;
  font-weight: 600;
  color: var(--navy);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.store-top-pick-cat {
  font-family: 'Nunito', sans-serif;
  font-size: .72rem;
  color: var(--gray);
  font-weight: 500;
}
@media (max-width: 600px) {
  .store-top-picks { padding: 16px; }
  .store-top-pick-card { min-width: 132px; padding: 10px 12px; }
}

/* ── 2. Brand color dot on store-card eyebrow ───────────────────────────── */
.store-card-brand-dot {
  width: 7px;
  height: 7px;
  min-width: 7px;
  min-height: 7px;
  border-radius: 50%;
  display: inline-flex;
  margin-right: 6px;
  flex-shrink: 0;
  vertical-align: -1px;
  background: #6b7a99; /* fallback for any brand without an explicit color */
}
[data-brand="HP"] .store-card-brand-dot       { background: #0096d6; }
[data-brand="Dell"] .store-card-brand-dot     { background: #0076ce; }
[data-brand="Lenovo"] .store-card-brand-dot   { background: #e2231a; }
[data-brand="Asus"] .store-card-brand-dot     { background: #ce0e2d; }
[data-brand="Acer"] .store-card-brand-dot     { background: #83b81a; }
[data-brand="Apple"] .store-card-brand-dot    { background: #555555; }
[data-brand="MSI"] .store-card-brand-dot      { background: #ff0000; }
[data-brand="Razer"] .store-card-brand-dot    { background: #44d62c; }
[data-brand="Samsung"] .store-card-brand-dot  { background: #1428a0; }
[data-brand="Microsoft"] .store-card-brand-dot{ background: #00bcf2; }
[data-brand="LG"] .store-card-brand-dot       { background: #a50034; }
[data-brand="Xiaomi"] .store-card-brand-dot   { background: #ff6900; }
[data-brand="Honor"] .store-card-brand-dot    { background: #ee2939; }
[data-brand="Sony"] .store-card-brand-dot     { background: #1d1d1f; }
[data-brand="Toshiba"] .store-card-brand-dot  { background: #d50000; }
[data-brand="Projector"] .store-card-brand-dot{ background: #6b7a99; }
[data-brand="Other"] .store-card-brand-dot    { background: #6b7a99; }

/* ── 3. Highlights-bar hover affordance ─────────────────────────────────── */
.hb-item {
  position: relative;
  border-radius: 6px;
  transition: background 140ms;
}
/* .hb-item:hover background tint removed — strip is informational, not interactive */

/* Custom tooltip for "14 brands" item */
.hb-item[data-tooltip] { cursor: default; }
.hb-item[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) scale(.95);
  transform-origin: top center;
  background: var(--navy);
  color: var(--white);
  font-family: 'Nunito', sans-serif;
  font-size: .72rem;
  font-weight: 500;
  line-height: 1.5;
  white-space: pre-wrap;
  min-width: 180px;
  max-width: 220px;
  padding: 8px 12px;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,.18);
  opacity: 0;
  pointer-events: none;
  transition: opacity 140ms, transform 140ms;
  z-index: 100;
  text-align: left;
}
.hb-item[data-tooltip]:hover::after,
.hb-item[data-tooltip]:focus-within::after {
  opacity: 1;
  transform: translateX(-50%) scale(1);
}
@media (prefers-reduced-motion: reduce) {
  .hb-item[data-tooltip]::after { transition: none; }
  .hb-item { transition: none; }
}

/* ── 4. Empty state: icon scale-in animation ────────────────────────────── */
@keyframes store-empty-icon-in {
  from { opacity: 0; transform: scale(.75); }
  to   { opacity: .3; transform: scale(1); }
}
.store-empty:not([hidden]) i.fa-magnifying-glass {
  animation: store-empty-icon-in 240ms cubic-bezier(0.25,1,0.5,1) both;
}
@media (prefers-reduced-motion: reduce) {
  .store-empty:not([hidden]) i.fa-magnifying-glass { animation: none; }
}

/* ── Brand-grid pagination (Load 30 more) ──────────────────────────────── */
.brand-link-hidden { display: none !important; }
.brand-grid-loadmore {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: max-content;
  margin: 32px auto 0;
  padding: 14px 28px;
  background: var(--white);
  color: var(--blue);
  border: 2px solid var(--blue);
  border-radius: 999px;
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: .95rem;
  cursor: pointer;
  transition: background 220ms cubic-bezier(.22,1,.36,1),
              color 220ms,
              transform 220ms cubic-bezier(.22,1,.36,1),
              box-shadow 220ms;
  box-shadow: 0 2px 0 rgba(26,61,228,.08);
}
.brand-grid-loadmore:hover,
.brand-grid-loadmore:focus-visible {
  background: var(--blue);
  color: var(--white);
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(26,61,228,.18);
  outline: none;
}
.brand-grid-loadmore i { font-size: .85rem; }
.brand-grid-remaining { font-weight: 400; opacity: .85; font-size: .82rem; }
@media (prefers-reduced-motion: reduce) {
  .brand-grid-loadmore { transition: none; }
  .brand-grid-loadmore:hover, .brand-grid-loadmore:focus-visible { transform: none; }
}

/* ── SKU brand-logo fallback (replaces WP-content product imgs) ─────────── */
.sku-product-img {
  display: flex;
  flex-direction: column;        /* logo on top, caption below */
  align-items: center;
  justify-content: center;
  gap: 16px;
  background: var(--off);
  border-radius: 16px;
  padding: 32px 24px;
  margin: 0;
}
.sku-brand-logo {
  width: 100%;
  max-width: 154px;
  height: 154px;
  display: block;
  color: #9ca3af; /* light grey — placeholder presence without competing with copy */
}
.sku-brand-logo use { fill: currentColor; }
.sku-product-img figcaption {
  width: 100%;
  text-align: center;
  font-family: 'Nunito', sans-serif;
  font-size: .92rem;
  line-height: 1.45;
  color: var(--gray);
  font-style: italic;
  margin: 0;
}
@media (max-width: 768px) {
  .sku-product-img { padding: 24px 18px; gap: 12px; }
  .sku-brand-logo { max-width: 112px; height: 112px; }
  .sku-product-img figcaption { font-size: .85rem; }
}

/* ── Dynamic-fit chip rows (v7) ────────────────────────────────────────────
   Chips that won't fit in one row get .chip-overflow-hidden. Toggle reveals
   them. Re-measured on resize. */
.store-filters-dynfit { flex-wrap: wrap; }
.store-filters-dynfit .store-chip.chip-overflow-hidden { display: none !important; }
.store-filters-dynfit.is-expanded .store-chip.chip-overflow-hidden { display: inline-flex !important; }
.store-filters-dynfit .store-more-toggle { margin-left: auto; }
.store-filters-dynfit .store-more-toggle.is-empty { display: none !important; }
@media (max-width: 720px) {
  /* Mobile: label takes its own line so the active "All" chip isn't clipped */
  .store-filters-dynfit { gap: 6px 8px; }
  .store-filters-dynfit .store-filter-label {
    flex-basis: 100%;
    margin-right: 0;
    margin-bottom: 2px;
  }
  .store-filters-dynfit .store-more-toggle { margin-left: 0; }
}

/* Force single-line tile names — truncate with ellipsis on overflow */
#all-services .repair-tile-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.services-grid--4col { grid-template-columns: repeat(4, 1fr) !important; }
@media (max-width: 1100px) { .services-grid--4col { grid-template-columns: repeat(2, 1fr) !important; } }
@media (max-width: 600px)  { .services-grid--4col { grid-template-columns: 1fr !important; } }

/* Brand-desktops cards on brand hubs: white cards on the off-bg band */
#brand-desktops .service-card {
  background: var(--white) !important;
  border: 1px solid rgba(10, 15, 46, .08) !important;
  box-shadow: 0 1px 3px rgba(10, 15, 46, .04) !important;
}
#brand-desktops .service-card:hover {
  box-shadow: 0 12px 28px rgba(26, 61, 228, .14) !important;
}

/* ── Common Issues: horizontal tiles, 3-col grid (brand hubs) ─────────── */
#common-issues .ci-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 14px !important;
  margin-top: 24px !important;
}
@media (max-width: 1000px) {
  #common-issues .ci-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 600px) {
  #common-issues .ci-grid { grid-template-columns: 1fr !important; }
}
#common-issues .ci-tile {
  display: flex !important;
  align-items: flex-start !important;
  gap: 14px !important;
  padding: 16px 18px !important;
  background: var(--white) !important;
  border: 1px solid rgba(10, 15, 46, .08) !important;
  border-radius: 12px !important;
  text-decoration: none !important;
  color: var(--navy) !important;
  box-shadow: 0 1px 3px rgba(10, 15, 46, .04);
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}
#common-issues .ci-tile:hover {
  transform: translateY(-3px);
  border-color: var(--blue);
  box-shadow: 0 12px 26px rgba(26, 61, 228, .14);
}
#common-issues .ci-tile-icon {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  border-radius: 10px;
  background: var(--off);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
}
#common-issues .ci-tile-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}
#common-issues .ci-tile-h4 {
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: .95rem;
  color: var(--navy);
  line-height: 1.25;
}
#common-issues .ci-tile-desc {
  font-family: 'Nunito', sans-serif;
  font-size: .82rem;
  color: var(--gray);
  line-height: 1.5;
}

/* ── Brand-hub bg rhythm (impeccable: vary backgrounds to break monotony)
   Scoped to brand hubs via body[data-section-order-v2="ux-priority"].
   Final rhythm:
     hero (navy) → highlights (off) → common-issues (WHITE) →
     models (off) → SCP (white) → desktops (off) → how-it-works (white) →
     why-us (navy) → by-area (OFF, grey — so white area buttons pop) →
     sku-hub (WHITE) → pricing (off) → faq (WHITE) → justdial (off) →
     cta (blue) → footer (navy) */

body[data-section-order-v2="ux-priority"] #common-issues {
  background: var(--white) !important;
}
body[data-section-order-v2="ux-priority"] [id$="-models"].services-section {
  background: var(--off) !important;
}
body[data-section-order-v2="ux-priority"] [id$="-by-area"].hyd-areas {
  background: var(--off) !important;
}
/* Area buttons: force WHITE so they pop on the grey section. */
body[data-section-order-v2="ux-priority"] [id$="-by-area"].hyd-areas .hyd-area {
  background: var(--white) !important;
  border: 1px solid rgba(10, 15, 46, 0.10) !important;
  box-shadow: 0 1px 2px rgba(10, 15, 46, 0.04);
}
body[data-section-order-v2="ux-priority"] [id$="-by-area"].hyd-areas .hyd-area:hover {
  background: var(--white) !important;
  border-color: var(--blue) !important;
  box-shadow: 0 4px 14px rgba(26, 61, 228, 0.15);
}
body[data-section-order-v2="ux-priority"] .brand-links-section {
  background: var(--white) !important;
}
body[data-section-order-v2="ux-priority"] .faq-section {
  background: var(--white) !important;
}
body[data-section-order-v2="ux-priority"] .justdial-strip {
  background: var(--off) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   AREA PAGE — "More brands we service" — force 5×2 grid for 10 brand tiles
   Brutally explicit override — placed at end of file for maximum cascade priority
═══════════════════════════════════════════════════════════════════════════ */
section.book-brands .book-brands-grid.book-brands-grid--area {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  max-width: 1100px !important;
  gap: 18px !important;
  margin: 28px auto 0 !important;
}
@media (max-width: 900px) {
  section.book-brands .book-brands-grid.book-brands-grid--area {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    max-width: 720px !important;
  }
}
@media (max-width: 600px) {
  section.book-brands .book-brands-grid.book-brands-grid--area {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    max-width: 100% !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   "Every brand. Every model." — book-brands-grid with 16 tiles → 8×2 grid
   Auto-detect via :has() so layout is symmetric regardless of tile count
═══════════════════════════════════════════════════════════════════════════ */
section.book-brands .book-brands-grid:has(> :nth-child(16)):not(:has(> :nth-child(17))) {
  grid-template-columns: repeat(8, minmax(0, 1fr)) !important;
  max-width: 1100px !important;
  gap: 16px !important;
}
@media (max-width: 1024px) {
  section.book-brands .book-brands-grid:has(> :nth-child(16)):not(:has(> :nth-child(17))) {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    max-width: 720px !important;
  }
}
@media (max-width: 600px) {
  section.book-brands .book-brands-grid:has(> :nth-child(16)):not(:has(> :nth-child(17))) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    max-width: 100% !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   ORPHAN-CARD AUTO-FIX — sitewide :has() rules for symmetric grids
   Per memory rule "feedback_no_orphan_cards_in_grids.md"
   Auto-detects child count and snaps column count to avoid hanging orphans
═══════════════════════════════════════════════════════════════════════════ */

/* DESKTOP-ONLY orphan-fix rules — wrapped in min-width: 769px so they
   never override mobile 2-col / 1-col layout. */
@media (min-width: 769px) {
/* .loc-services-grid — base is 4-col. Adapt for orphan-prone counts. */
.loc-services-grid:has(> :nth-child(5)):not(:has(> :nth-child(6))) {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
}
.loc-services-grid:has(> :nth-child(6)):not(:has(> :nth-child(7))) {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
.loc-services-grid:has(> :nth-child(7)):not(:has(> :nth-child(8))) {
  grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
}
.loc-services-grid:has(> :nth-child(9)):not(:has(> :nth-child(10))) {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
.loc-services-grid:has(> :nth-child(10)):not(:has(> :nth-child(11))) {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
}
.loc-services-grid:has(> :nth-child(11)):not(:has(> :nth-child(12))) {
  grid-template-columns: repeat(11, minmax(0, 1fr)) !important;
}
.loc-services-grid:has(> :nth-child(14)):not(:has(> :nth-child(15))) {
  grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
}
.loc-services-grid:has(> :nth-child(15)):not(:has(> :nth-child(16))) {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
}

/* Tablet/mobile — flatter grids to avoid horizontal squish */
@media (max-width: 1024px) {
  .loc-services-grid:has(> :nth-child(5)):not(:has(> :nth-child(7))) {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
  .loc-services-grid:has(> :nth-child(7)):not(:has(> :nth-child(8))) {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

/* .symptom-grid — already has :has(:nth-child(5)) but missing 6/7/9/10 cases */
.symptom-grid:has(> :nth-child(6)):not(:has(> :nth-child(7))) {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.symptom-grid:has(> :nth-child(9)):not(:has(> :nth-child(10))) {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.symptom-grid:has(> :nth-child(10)):not(:has(> :nth-child(11))) {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

/* Mobile — already handled by base @media rules */

/* ═══════════════════════════════════════════════════════════════════════════
   COMPREHENSIVE ORPHAN-CARD AUTO-FIX — sitewide :has() rules across all grids
   Applies symmetric layouts based on actual child count
═══════════════════════════════════════════════════════════════════════════ */

/* .symptom-grid (base 3 cols) — extend existing rules */
.symptom-grid:has(> :nth-child(4)):not(:has(> :nth-child(5))) {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
.symptom-grid:has(> :nth-child(5)):not(:has(> :nth-child(6))) {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
}
.symptom-grid:has(> :nth-child(8)):not(:has(> :nth-child(9))) {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}
.symptom-grid:has(> :nth-child(10)):not(:has(> :nth-child(11))) {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
}

/* .loc-landmark-grid (base 4 cols) — handle 6-card case */
.loc-landmark-grid:has(> :nth-child(6)):not(:has(> :nth-child(7))) {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

/* .repair-grid (base 4 cols) — common case is 6 cards */
.repair-grid:has(> :nth-child(5)):not(:has(> :nth-child(6))) {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
}
.repair-grid:has(> :nth-child(6)):not(:has(> :nth-child(7))) {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
.repair-grid:has(> :nth-child(10)):not(:has(> :nth-child(11))) {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
}

/* .why-grid (base 4 cols) — common case is 6 cards */
.why-grid:has(> :nth-child(6)):not(:has(> :nth-child(7))) {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

/* .services-grid (base 4 cols) */
.services-grid:has(> :nth-child(6)):not(:has(> :nth-child(7))) {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
.services-grid:has(> :nth-child(9)):not(:has(> :nth-child(10))) {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
.services-grid:has(> :nth-child(10)):not(:has(> :nth-child(11))) {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
}

/* .pricing-grid (base 3 cols) */
.pricing-grid:has(> :nth-child(4)):not(:has(> :nth-child(5))) {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

/* .faq-grid (base 2 cols) */
.faq-grid:has(> :nth-child(9)):not(:has(> :nth-child(10))) {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
.faq-grid:has(> :nth-child(7)):not(:has(> :nth-child(8))) {
  grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
}

/* .book-brands-grid 10-card variant */
section.book-brands .book-brands-grid:has(> :nth-child(10)):not(:has(> :nth-child(11))) {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  max-width: 920px !important;
}

/* Tablet/mobile fallback for all the above — flatter grids */
@media (max-width: 1024px) {
  .symptom-grid:has(> :nth-child(5)):not(:has(> :nth-child(7))),
  .repair-grid:has(> :nth-child(5)):not(:has(> :nth-child(7))),
  .services-grid:has(> :nth-child(5)):not(:has(> :nth-child(7))),
  .why-grid:has(> :nth-child(5)):not(:has(> :nth-child(7))),
  .loc-landmark-grid:has(> :nth-child(5)):not(:has(> :nth-child(7))) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 600px) {
  .symptom-grid, .repair-grid, .services-grid, .why-grid, .loc-landmark-grid,
  .pricing-grid, .faq-grid, .loc-services-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

}

/* ═══════════════════════════════════════════════════════════════════════════
   CARD-COUNT EDGE CASES — 3 cards always 3-col single row (not 2+1 orphan).
   DESKTOP-ONLY — wrapped in min-width: 769px so mobile gets clean 1-col stack
   without specificity battles against simpler base rules.
═══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 769px) {
  .loc-landmark-grid:has(> :nth-child(3)):not(:has(> :nth-child(4))),
  .symptom-grid:has(> :nth-child(3)):not(:has(> :nth-child(4))),
  .repair-grid:has(> :nth-child(3)):not(:has(> :nth-child(4))),
  .why-grid:has(> :nth-child(3)):not(:has(> :nth-child(4))),
  .services-grid:has(> :nth-child(3)):not(:has(> :nth-child(4))),
  .loc-services-grid:has(> :nth-child(3)):not(:has(> :nth-child(4))),
  .faq-grid:has(> :nth-child(3)):not(:has(> :nth-child(4))),
  .pricing-grid:has(> :nth-child(3)):not(:has(> :nth-child(4))) {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   CARD CRAMP-FIX — when grid has 5+ cards in a single row, stack icon ABOVE text
   (5-col, 7-col, 10-col, 11-col, 14-col layouts have narrow column widths)
═══════════════════════════════════════════════════════════════════════════ */

/* 5-card single row */
.symptom-grid:has(> :nth-child(5)):not(:has(> :nth-child(6))) > .symptom-card,
.repair-grid:has(> :nth-child(5)):not(:has(> :nth-child(6))) > .repair-card,
.loc-services-grid:has(> :nth-child(5)):not(:has(> :nth-child(6))) > .loc-service-card,
.services-grid:has(> :nth-child(5)):not(:has(> :nth-child(6))) > .service-card,
.why-grid:has(> :nth-child(5)):not(:has(> :nth-child(6))) > .why-card,
/* 7-card single row */
.symptom-grid:has(> :nth-child(7)):not(:has(> :nth-child(8))) > .symptom-card,
.repair-grid:has(> :nth-child(7)):not(:has(> :nth-child(8))) > .repair-card,
.loc-services-grid:has(> :nth-child(7)):not(:has(> :nth-child(8))) > .loc-service-card,
/* 10-card 5×2 — same narrow tiles as 5-col */
.symptom-grid:has(> :nth-child(10)):not(:has(> :nth-child(11))) > .symptom-card,
.repair-grid:has(> :nth-child(10)):not(:has(> :nth-child(11))) > .repair-card,
.loc-services-grid:has(> :nth-child(10)):not(:has(> :nth-child(11))) > .loc-service-card,
/* 11-card single row */
.loc-services-grid:has(> :nth-child(11)):not(:has(> :nth-child(12))) > .loc-service-card,
/* 14-card 7×2 — 7-col wide */
.loc-services-grid:has(> :nth-child(14)):not(:has(> :nth-child(15))) > .loc-service-card,
/* 15-card 5×3 */
.loc-services-grid:has(> :nth-child(15)):not(:has(> :nth-child(16))) > .loc-service-card {
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  padding: 22px 16px !important;
  gap: 12px !important;
}

/* Ensure inner H4 + p don't collapse to inline at narrow widths */
.symptom-grid:has(> :nth-child(5)):not(:has(> :nth-child(6))) > .symptom-card > div,
.symptom-grid:has(> :nth-child(7)):not(:has(> :nth-child(8))) > .symptom-card > div,
.symptom-grid:has(> :nth-child(10)):not(:has(> :nth-child(11))) > .symptom-card > div,
.repair-grid:has(> :nth-child(5)):not(:has(> :nth-child(6))) > .repair-card > div,
.repair-grid:has(> :nth-child(7)):not(:has(> :nth-child(8))) > .repair-card > div,
.repair-grid:has(> :nth-child(10)):not(:has(> :nth-child(11))) > .repair-card > div {
  text-align: center !important;
  width: 100% !important;
}

/* Mobile: always vertical stack regardless of column count */
@media (max-width: 768px) {
  .symptom-card, .repair-card, .why-card, .loc-service-card, .service-card {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   FAQ GRID — Odd count = 1 col (single per row), Even count = 2 cols
═══════════════════════════════════════════════════════════════════════════ */

/* Default 2-col already set elsewhere. Override for ODD child counts: */
.faq-grid:has(> :nth-child(odd):last-child) {
  grid-template-columns: 1fr !important;
  max-width: 880px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
/* Force 2 cols for EVEN counts (override any earlier rule) */
.faq-grid:has(> :nth-child(even):last-child) {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
/* Mobile: always 1 col */
@media (max-width: 768px) {
  .faq-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   .repair-grid--2col — explicit 2-col override that beats orphan-fix rules
   "10 Most Common Problems" sections want 2 cols × 5 rows, not 5 cols × 2 rows
═══════════════════════════════════════════════════════════════════════════ */
.repair-grid.repair-grid--2col {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
@media (max-width: 700px) {
  .repair-grid.repair-grid--2col { grid-template-columns: 1fr !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   .repair-grid--2col cards — ALWAYS image-left + text-right (horizontal)
   Beats the 10-card cramp-fix that stacks vertically on other grids
═══════════════════════════════════════════════════════════════════════════ */
.repair-grid.repair-grid--2col > .repair-card {
  flex-direction: row !important;
  align-items: flex-start !important;
  text-align: left !important;
  gap: 16px !important;
  padding: 18px 20px !important;
}
.repair-grid.repair-grid--2col > .repair-card > div,
.repair-grid.repair-grid--2col > .repair-card .repair-body {
  text-align: left !important;
  width: auto !important;
  flex: 1 !important;
}
@media (max-width: 600px) {
  .repair-grid.repair-grid--2col > .repair-card {
    flex-direction: row !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   .repair-grid--2col CARDS — clean horizontal layout (image left, text right)
   Higher specificity than the cramp-fix :has() rule, no !important arms race
═══════════════════════════════════════════════════════════════════════════ */

/* Selector specificity (3 classes + 1 pseudo) > the cramp-fix (2 classes + :has) */
.repair-grid.repair-grid--2col:has(> :nth-child(10)) > .repair-card,
.repair-grid.repair-grid--2col > .repair-card {
  flex-direction: row;
  align-items: flex-start;
  text-align: left;
  gap: 18px;
  padding: 22px 22px;
  background: var(--white);
  border: 1px solid rgba(10, 15, 46, .07);
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(10, 15, 46, .03), 0 8px 24px -10px rgba(10, 15, 46, .06);
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.repair-grid.repair-grid--2col > .repair-card:hover {
  transform: translateY(-2px);
  border-color: rgba(26, 61, 228, .25);
  box-shadow: 0 2px 4px rgba(10, 15, 46, .04), 0 16px 32px -10px rgba(10, 15, 46, .14);
}

/* Image circle — bigger so the photo reads, not a tiny crop */
.repair-grid.repair-grid--2col > .repair-card .img-circle {
  width: 84px;
  height: 84px;
  flex-shrink: 0;
  margin: 0;
  border-radius: 14px;
  overflow: hidden;
  background: var(--off);
}
.repair-grid.repair-grid--2col > .repair-card .img-circle img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 14px;
  display: block;
}
.repair-grid.repair-grid--2col > .repair-card .img-circle i {
  font-size: 1.8rem;
  color: var(--blue);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

/* Text body */
.repair-grid.repair-grid--2col > .repair-card .repair-body {
  flex: 1;
  min-width: 0;
  text-align: left;
}
.repair-grid.repair-grid--2col > .repair-card .repair-body h4 {
  font-family: 'Outfit', sans-serif;
  font-size: 1.06rem;
  font-weight: 700;
  margin: 0 0 6px;
  line-height: 1.3;
  text-align: left;
}
.repair-grid.repair-grid--2col > .repair-card .repair-body h4 a {
  color: var(--navy);
  text-decoration: none;
  transition: color .18s ease;
}
.repair-grid.repair-grid--2col > .repair-card .repair-body h4 a:hover {
  color: var(--blue);
}
.repair-grid.repair-grid--2col > .repair-card .repair-body p {
  font-family: 'Nunito', sans-serif;
  font-size: .9rem;
  line-height: 1.55;
  margin: 0;
  text-align: left;
  color: var(--gray);
}
.repair-grid.repair-grid--2col > .repair-card .repair-body p strong {
  color: var(--navy);
  font-weight: 700;
}

/* Mobile: stay horizontal but tighter; collapse to single col below 600px */
@media (max-width: 900px) {
  .repair-grid.repair-grid--2col > .repair-card {
    padding: 18px;
    gap: 14px;
  }
  .repair-grid.repair-grid--2col > .repair-card .img-circle {
    width: 64px;
    height: 64px;
  }
}
@media (max-width: 600px) {
  .repair-grid.repair-grid--2col {
    grid-template-columns: 1fr;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   .repair-grid--2col — DEFINITIVE FIX (uses !important to beat cramp-fix rule)
   Forces consistent horizontal image-left/text-right layout across all cards
   regardless of content (image vs icon)
═══════════════════════════════════════════════════════════════════════════ */
.repair-grid.repair-grid--2col {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 16px !important;
}
@media (max-width: 700px) {
  .repair-grid.repair-grid--2col { grid-template-columns: 1fr !important; }
}

.repair-grid.repair-grid--2col > .repair-card {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  text-align: left !important;
  gap: 18px !important;
  padding: 22px !important;
  background: var(--white) !important;
  border: 1px solid rgba(10, 15, 46, .08) !important;
  border-radius: 14px !important;
  box-shadow: 0 1px 2px rgba(10, 15, 46, .03), 0 8px 24px -10px rgba(10, 15, 46, .06) !important;
  overflow: hidden;
}
.repair-grid.repair-grid--2col > .repair-card:hover {
  transform: translateY(-2px);
  border-color: rgba(26, 61, 228, .25) !important;
  box-shadow: 0 2px 4px rgba(10, 15, 46, .04), 0 16px 32px -10px rgba(10, 15, 46, .14) !important;
}

.repair-grid.repair-grid--2col > .repair-card .img-circle {
  width: 88px !important;
  height: 88px !important;
  min-width: 88px !important;
  flex: 0 0 88px !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
  border-radius: 14px !important;
  background: var(--off) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
}
.repair-grid.repair-grid--2col > .repair-card .img-circle img {
  width: 88px !important;
  height: 88px !important;
  max-width: 88px !important;
  max-height: 88px !important;
  object-fit: cover !important;
  border-radius: 14px !important;
  display: block !important;
}
.repair-grid.repair-grid--2col > .repair-card .img-circle i {
  font-size: 2rem !important;
  color: var(--blue) !important;
  width: auto !important;
  height: auto !important;
  display: block !important;
}

.repair-grid.repair-grid--2col > .repair-card .repair-body {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  text-align: left !important;
}
.repair-grid.repair-grid--2col > .repair-card .repair-body h4 {
  font-family: 'Outfit', sans-serif !important;
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  margin: 0 0 6px !important;
  line-height: 1.3 !important;
  text-align: left !important;
  color: var(--navy) !important;
}
.repair-grid.repair-grid--2col > .repair-card .repair-body h4 a {
  color: var(--navy) !important;
  text-decoration: none !important;
}
.repair-grid.repair-grid--2col > .repair-card .repair-body h4 a:hover {
  color: var(--blue) !important;
}
.repair-grid.repair-grid--2col > .repair-card .repair-body p {
  font-family: 'Nunito', sans-serif !important;
  font-size: .9rem !important;
  line-height: 1.55 !important;
  margin: 0 !important;
  text-align: left !important;
  color: var(--gray) !important;
}
.repair-grid.repair-grid--2col > .repair-card .repair-body p strong {
  color: var(--navy) !important;
  font-weight: 700 !important;
}

@media (max-width: 900px) {
  .repair-grid.repair-grid--2col > .repair-card { padding: 16px !important; gap: 14px !important; }
  .repair-grid.repair-grid--2col > .repair-card .img-circle {
    width: 64px !important; height: 64px !important; min-width: 64px !important; flex: 0 0 64px !important;
  }
  .repair-grid.repair-grid--2col > .repair-card .img-circle img {
    width: 64px !important; height: 64px !important;
  }
  .repair-grid.repair-grid--2col > .repair-card .img-circle i { font-size: 1.6rem !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   SITEWIDE TABLET + MOBILE GRID CAP
   Orphan-fix :has() rules above use !important to set 3/4/5/8-column desktop
   layouts. Without an !important mobile cap, those rules persist on tablets
   and phones, cramping cards. Inline style="" overrides on individual pages
   (programmatic generators) also get caught by these rules because they sit
   later in source order, so they win by cascade.
   Two breakpoints, both !important so they beat everything above:
     ≤960px  → 2 columns (tablet + landscape phone)
     ≤520px  → 1 column  (portrait phone — full-width cards)
═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 960px) {
  .symptom-grid,
  .repair-grid,
  .why-grid,
  .services-grid,
  .pricing-grid,
  .faq-grid,
  .loc-services-grid,
  .loc-landmark-grid,
  .process-grid,
  .svc-brand-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }
}
@media (max-width: 768px) {
  .symptom-grid,
  .repair-grid,
  .why-grid,
  .services-grid,
  .pricing-grid,
  .faq-grid,
  .loc-services-grid,
  .loc-landmark-grid,
  .process-grid,
  .svc-brand-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  /* Tighten inner card padding so 1-col cards don't waste edge space */
  .symptom-card,
  .repair-card,
  .why-card,
  .service-card,
  .loc-service-card,
  .loc-landmark-card,
  .process-card { padding: 14px 16px !important; }

  /* ── Pricing cards on mobile ──────────────────────────────────────────
     Trim padding, allow service-name to wrap, stack service+price vertically
     when the row is too narrow to fit both inline. */
  .price-card {
    padding: 18px 16px !important;
    border-radius: 12px !important;
  }
  .price-card h4 {
    font-size: 1rem !important;
    margin-bottom: 12px !important;
  }
  .price-row {
    flex-wrap: wrap !important;
    gap: 4px 12px !important;
    padding: 10px 0 !important;
    font-size: 0.88rem !important;
  }
  .price-row .service-name {
    flex: 1 1 100%;
    font-size: 0.88rem !important;
    line-height: 1.35;
  }
  .price-row .price {
    flex: 0 0 auto;
    font-size: 0.95rem !important;
    color: var(--orange) !important;
  }
}
@media (max-width: 380px) {
  .price-card { padding: 14px 12px !important; }
  .price-card h4 { font-size: 0.95rem !important; }
  .price-row .service-name { font-size: 0.84rem !important; }
  .price-row .price { font-size: 0.92rem !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PRICING SECTION HARMONISATION
   Two valid pricing patterns coexist on the site, by design:

     A. .pricing-section + .pricing-grid + .price-card
        → category-based pricing (brand hubs, SKU pages)

     B. .svc-pricing + .pricing-table + .pricing-row
        → model-specific tabular pricing (root service pages, Pattern B
           {brand}-service-center-{area}/{service}/ sub-pages)

   These rules align the OUTER chrome (background, section-title typography,
   container radius/shadow/border) so both formats read as sister components.
   The inner layout (cards vs table rows) stays different on purpose because
   the data is different.
═══════════════════════════════════════════════════════════════════════════ */
.svc-pricing {
  background: var(--white) !important; /* was var(--off) — match .pricing-section */
  padding: 64px 0 !important;          /* match canonical pricing-section padding */
}
.svc-section-title {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 36px;
}
.svc-section-title .eyebrow {
  display: inline-block;
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: .8rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 10px;
}
.svc-section-title h2 {
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  color: var(--navy);
  margin: 0 0 12px;
  line-height: 1.2;
}
.svc-section-title p {
  color: var(--gray);
  font-size: 1.02rem;
  line-height: 1.6;
  margin: 0 auto;
  max-width: 600px;
}
/* Pricing-table: bring the chrome in line with .price-card so the two
   pricing patterns share the same border, radius, shadow language */
.pricing-table {
  background: var(--white);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(10,15,46,.06);
  border: 1px solid rgba(10,15,46,.06);
  max-width: 980px;
  margin: 0 auto;
}
.pricing-row .pr-tier { font-weight: 800; }
.pricing-row .pr-price { color: var(--orange); font-weight: 800; }
.pricing-row .pr-detail { color: var(--gray); font-size: .9rem; }
.pricing-foot {
  text-align: center;
  margin: 18px auto 0;
  color: var(--gray);
  font-size: .9rem;
  font-family: 'Nunito', sans-serif;
}

/* Mobile: collapse pricing-table from 3-col grid to single column with
   stacked rows so the model-specific tables remain legible on phones */
@media (max-width: 720px) {
  .pricing-row {
    grid-template-columns: 1fr !important;
    gap: 4px 0;
    padding: 14px 18px;
  }
  .pricing-row.head { display: none; } /* table header row meaningless when stacked */
  .pricing-row .pr-tier { font-size: .98rem; }
  .pricing-row .pr-price { font-size: 1.05rem; }
  .pricing-row .pr-detail { font-size: .85rem; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   SITEWIDE MOBILE TIGHTENING (final long-tail fixes)
   Catches issues not covered by the per-class media queries above:
     - hero typewriter overflow on narrow screens
     - form field touch targets (< 44px is too small for thumbs)
     - hero/footer/grid columns that don't stack
     - images / iframes overflowing horizontal viewport
     - long URLs / model numbers breaking layout
     - section padding that eats mobile width
═══════════════════════════════════════════════════════════════════════════ */

/* Universal overflow guard — nothing should escape the viewport horizontally */
@media (max-width: 768px) {
  body { overflow-x: hidden; }
  img, video, iframe, svg { max-width: 100%; height: auto; }
  pre, code, table { max-width: 100%; overflow-x: auto; }
  /* Long unbroken strings (model numbers, URLs) wrap instead of stretching layout */
  p, li, span, td, h1, h2, h3, h4, h5 {
    overflow-wrap: break-word;
    word-break: break-word;
  }
}

/* Hero typewriter — let it wrap on narrow screens (was nowrap on /book-your-repair/) */
@media (max-width: 600px) {
  .hero-typewriter,
  .hero-headline,
  .book-hero h1 {
    white-space: normal !important;
    flex-wrap: wrap !important;
  }
}

/* Hero column stacking — every hero variant collapses to single column */
@media (max-width: 900px) {
  .hero-grid,
  .book-hero-grid,
  .sku-hero-grid {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }
}

/* Form fields — touch targets ≥ 44px on mobile (Apple/Material guideline) */
@media (max-width: 768px) {
  .form-group input,
  .form-group select,
  .form-group textarea,
  .hero-card input,
  .hero-card select,
  .hero-card textarea,
  .book-form-card input,
  .book-form-card select,
  .book-form-card textarea {
    min-height: 44px;
    font-size: 16px !important; /* prevents iOS zoom-on-focus */
  }
  .form-submit,
  .btn { min-height: 44px; }
}

/* Footer columns stack on mobile */
@media (max-width: 768px) {
  .footer-grid {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
    text-align: left;
  }
}

/* CTA button rows wrap fully and buttons go full-width on tight phones */
@media (max-width: 480px) {
  .hero-btns,
  .lede-cta,
  .cta-btns,
  .sku-hero-ctas {
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100%;
  }
  .hero-btns > .btn,
  .lede-cta > .btn,
  .cta-btns > .btn,
  .sku-hero-ctas > .btn,
  .sku-hero-ctas > a { width: 100%; justify-content: center; }
}

/* Section padding compaction on mobile so content gets more width */
@media (max-width: 600px) {
  section { padding-left: 0 !important; padding-right: 0 !important; }
  section > .container,
  section .container { padding-left: 16px; padding-right: 16px; }
  /* Reduce vertical padding on most content sections */
  .services-section,
  .repair-detail,
  .pricing-section,
  .svc-pricing,
  .how-it-works,
  .why-us,
  .faq-section,
  .book-services,
  .book-process,
  .book-brands,
  .book-cta-strip,
  .cta-section { padding-top: 40px !important; padding-bottom: 40px !important; }
}

/* Mobile nav hamburger should always be reachable */
@media (max-width: 900px) {
  .nav-hamburger,
  .mobile-nav-toggle { min-width: 44px; min-height: 44px; }
}

/* Tables that haven't been converted to stacked rows: at least allow horizontal scroll */
@media (max-width: 600px) {
  .pricing-table { overflow-x: auto; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   COMMON ISSUES SECTION — mobile horizontal-card layout
   When 10 issue cards stack vertically on phones, switching each card to a
   horizontal flex (icon left + content right) makes scanning much faster.
   Applies to .loc-services-grid > .loc-service-card on /projector/ and any
   other page using the same pattern with 8+ cards. Also tightens icons +
   padding for narrow viewports.
═══════════════════════════════════════════════════════════════════════════ */
/* loc-services-grid mobile: snap to 2 columns (was 5-col due to orphan-fix).
   Selectors match the (0,3,0) specificity of the orphan rules above so this
   wins regardless of source-order quirks. ≤520px collapses to 1-col. */
@media (max-width: 768px) {
  .loc-services-grid:has(> *),
  .loc-services-grid:has(> :nth-child(5)):not(:has(> :nth-child(6))),
  .loc-services-grid:has(> :nth-child(7)):not(:has(> :nth-child(8))),
  .loc-services-grid:has(> :nth-child(10)):not(:has(> :nth-child(11))),
  .loc-services-grid:has(> :nth-child(11)):not(:has(> :nth-child(12))),
  .loc-services-grid:has(> :nth-child(14)):not(:has(> :nth-child(15))),
  .loc-services-grid:has(> :nth-child(15)):not(:has(> :nth-child(16))) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }
  .loc-services-grid { gap: 12px !important; margin-top: 18px; }
  /* Cards keep their default vertical layout (icon-on-top, h4 + p below) but
     use tighter padding + smaller fonts so they fit in narrow 2-col tiles. */
  .loc-services-grid:has(> :nth-child(5)):not(:has(> :nth-child(6))) > .loc-service-card,
  .loc-services-grid:has(> :nth-child(7)):not(:has(> :nth-child(8))) > .loc-service-card,
  .loc-services-grid:has(> :nth-child(10)):not(:has(> :nth-child(11))) > .loc-service-card,
  .loc-services-grid:has(> :nth-child(11)):not(:has(> :nth-child(12))) > .loc-service-card,
  .loc-services-grid:has(> :nth-child(14)):not(:has(> :nth-child(15))) > .loc-service-card,
  .loc-services-grid:has(> :nth-child(15)):not(:has(> :nth-child(16))) > .loc-service-card {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    padding: 16px 12px !important;
    gap: 8px !important;
  }
  .loc-service-card > i {
    font-size: 1.6rem !important;
    margin-bottom: 8px !important;
  }
  .loc-service-card > img {
    width: 48px !important;
    height: 48px !important;
    margin: 0 auto 8px !important;
  }
  .loc-service-card h4 { font-size: .95rem !important; margin-bottom: 6px !important; line-height: 1.25; }
  .loc-service-card p { font-size: .82rem !important; line-height: 1.5; }
}
@media (max-width: 520px) {
  /* Very small phones: collapse to 1 col so the cards have full width */
  .loc-services-grid:has(> *),
  .loc-services-grid:has(> :nth-child(5)):not(:has(> :nth-child(6))),
  .loc-services-grid:has(> :nth-child(7)):not(:has(> :nth-child(8))),
  .loc-services-grid:has(> :nth-child(10)):not(:has(> :nth-child(11))),
  .loc-services-grid:has(> :nth-child(11)):not(:has(> :nth-child(12))) {
    grid-template-columns: 1fr !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE STICKY CTA BAR — bottom of viewport on phones / small tablets
   Two-button: WhatsApp (green) + Call (orange). Fires zero-friction calls /
   WhatsApp chats on tap. Hidden ≥769px (desktop has the in-page CTAs).
   Injected via site.js on DOMContentLoaded so it appears on every page
   that loads site.js — no per-page HTML to maintain.
═══════════════════════════════════════════════════════════════════════════ */
.mobile-cta-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 90;       /* above wa-float, below nav drawer (z=100+) */
  display: none;     /* shown via media query below */
  grid-template-columns: 1fr 1fr;
  background: var(--navy);
  border-top: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 -6px 18px rgba(0,0,0,.35);
  padding: 8px 10px;
  gap: 8px;
}
.mobile-cta-bar a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 12px;
  border-radius: 10px;
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  font-size: 0.95rem;
  text-decoration: none;
  min-height: 44px;
  letter-spacing: .01em;
}
.mobile-cta-bar .mob-cta-wa {
  background: #25d366;
  color: #fff;
}
.mobile-cta-bar .mob-cta-call {
  background: var(--orange);
  color: #fff;
}
.mobile-cta-bar a:active {
  transform: scale(0.98);
  filter: brightness(0.92);
}
@media (max-width: 768px) {
  .mobile-cta-bar { display: grid; }
  /* Existing floating WA button hidden — the sticky CTA bar below already has
     a WhatsApp button, so the round float is redundant on mobile */
  .wa-float { display: none !important; }
  /* Reserve bottom padding on body so the bar doesn't cover footer content */
  body { padding-bottom: 70px; }
}