/* Selected Tech & Repairs palette: midnight navy, electric blue, cool white. */
body,
body.soft-home {
  --paper: #f0f7fc;
  --paper-warm: #ffffff;
  --navy: #052b4a;
  --navy-deep: #031629;
  --blue: #0667b8;
  --blue-bright: #159aff;
  --teal: #159aff;
  --teal-deep: #0875d3;
  --graphite: #0b1e33;
  --mist: #dceaf5;
  --mist-deep: #c9dff0;
  --line: rgba(5, 43, 74, .17);
  --text-muted: #4b6275;
  --focus-outer: #031629;
  --soft-shadow: 0 28px 70px rgba(3, 22, 41, .12);
  --soft-shadow-small: 0 16px 38px rgba(3, 22, 41, .09);
}

body.soft-home {
  background: radial-gradient(circle at 8% 13%, rgba(21, 154, 255, .11), transparent 26rem), linear-gradient(180deg, #e5f2fb 0, #fff 42rem, #f0f7fc 100%);
}

::selection { color: #031629; background: #87ceff; }
:focus-visible { outline-color: #0875d3; }

.site-utility,
.site-header,
.site-header.is-scrolled,
.mobile-menu,
.soft-home .site-header,
.soft-home .site-header.is-scrolled,
.soft-home .mobile-menu {
  background-color: rgba(3, 22, 41, .97);
}

.button--primary,
.soft-home .button--primary {
  color: #fff;
  background: #0074dc;
  box-shadow: 0 10px 24px rgba(8, 117, 211, .22);
}
.button--primary:hover,
.soft-home .button--primary:hover {
  color: #fff;
  background: #055ca8;
  box-shadow: 0 14px 30px rgba(3, 22, 41, .24);
}
.button--primary:focus-visible,
.soft-home .button--primary:focus-visible { outline-color: #031629; }
.footer-brand .footer-cta { color: #fff; background: #0074dc; }
.footer-brand .footer-cta:hover { color: #fff; background: #055ca8; }
body[class] .site-header,
body[class] .site-header.is-scrolled { grid-template-rows: 44px; padding-block: 4px; }
.site-header .brand-logo--header { width: 185px; max-width: 100%; height: auto; }
.soft-home .site-header .brand-logo--header { width: 185px; }
body[class] .site-header .header-cta { min-height: 44px; padding: 8px 20px; font-size: .9rem; line-height: 1.2; }
@media (max-width: 760px) {
  .site-header .brand-logo--header,
  .soft-home .site-header .brand-logo--header { width: 165px; }
  body[class] .site-header .menu-button { width: 44px; height: 44px; }
}
/* Shared secondary actions: transparent outlined pills on light and dark surfaces.
   Navigation, inline prose links and review source links remain ordinary links. */
:is(.hero, .careers-hero, .sell-section, .local-proof, .uncertain-panel, .contact-location, .button--ghost-light, .hero__call-link, .careers-hero__text-link) {
  --secondary-action-ink: #fff;
  --secondary-action-border: #12b0ff;
}
body[class] :is(a, button):not([hidden]):is(.text-link, .hero__call-link, .careers-hero__text-link, .button--outline, .button--ghost-light, .button--secondary),
body[class] .address-docket > a,
body[class] .whatsapp-action--link,
body[class] .contact-map > a,
body[class] .workshop-map a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  min-height: 48px;
  max-width: 100%;
  padding: 12px 22px;
  border: 1px solid var(--secondary-action-border, #0074dc);
  border-radius: 999px;
  color: var(--secondary-action-ink, #052b4a);
  background: transparent;
  font-family: var(--body);
  font-size: .95rem;
  font-weight: 750;
  line-height: 1.35;
  text-align: center;
  text-decoration: none;
  white-space: normal;
  box-shadow: none;
  transition: border-color 180ms ease;
}
body[class] :is(a, button):not([hidden]):is(.text-link, .hero__call-link, .careers-hero__text-link, .button--outline, .button--ghost-light, .button--secondary):hover,
body[class] .address-docket > a:hover,
body[class] .whatsapp-action--link:hover,
body[class] .contact-map > a:hover,
body[class] .workshop-map a:hover {
  color: var(--secondary-action-ink, #052b4a);
  background: transparent;
  border-color: var(--secondary-action-border, #0074dc);
  text-decoration: none;
}
body[class] :is(a, button):not([hidden]):is(.text-link, .hero__call-link, .careers-hero__text-link, .button--outline, .button--ghost-light, .button--secondary):focus-visible,
body[class] .address-docket > a:focus-visible,
body[class] .whatsapp-action--link:focus-visible,
body[class] .contact-map > a:focus-visible,
body[class] .workshop-map a:focus-visible {
  outline: 3px solid #159aff;
  outline-offset: 4px;
}

@media (max-width: 600px) {
  .site-utility__contact a { min-width: 44px; justify-content: center; }
}

.hero__shade,
.soft-home .hero__shade {
  background: linear-gradient(90deg, rgba(3, 22, 41, .98) 0%, rgba(3, 22, 41, .84) 35%, rgba(5, 43, 74, .32) 66%, rgba(5, 43, 74, .08) 100%), linear-gradient(0deg, rgba(3, 22, 41, .45), transparent 42%);
}
.soft-home .hero__trust,
.soft-home .catalogue-grid span { background: rgba(3, 22, 41, .86); }

.soft-home .device-section { background: radial-gradient(circle at 100% 0, rgba(21, 154, 255, .14), transparent 34rem), linear-gradient(180deg, transparent, rgba(255, 255, 255, .8)); }
.soft-home .device-choice {
  --choice-base-start: #041b31;
  --choice-base-end: #07385e;
  --choice-glow: rgba(47, 174, 255, .48);
  --choice-ground: rgba(64, 184, 255, .22);
  --choice-border: rgba(106, 200, 255, .4);
  --choice-accent: #4ac3ff;
  --choice-arc: rgba(131, 215, 255, .8);
  --choice-arc-shadow: rgba(73, 183, 255, .6);
  color: #f5fbff;
}
.soft-home .device-choice:nth-child(even) { --choice-base-end: #0a416b; }
.soft-home .device-choice small { color: #a4e2ff; }
.soft-home .device-choice::after { color: #b8eaff; }
.soft-home .device-choice__image { filter: drop-shadow(0 16px 22px rgba(0, 8, 22, .38)); }
.soft-home .device-choice:hover,
.soft-home .device-choice:focus-visible {
  color: #fff;
  border-color: #8bdcff;
  box-shadow: 0 18px 36px rgba(3, 41, 80, .24);
}
.soft-home .faults-section { background: linear-gradient(180deg, rgba(255, 255, 255, .82), #dceaf5); }
.soft-home .phone-diagram { background: radial-gradient(circle at 50% 44%, #fff, rgba(255, 255, 255, .35) 31%, transparent 58%), linear-gradient(145deg, #d8ebf9, #f5fbff); border-color: rgba(8, 117, 211, .15); }
.soft-home .phone-diagram::before { background: radial-gradient(circle at 15% 18%, rgba(21, 154, 255, .16), transparent 19rem), radial-gradient(circle at 86% 80%, rgba(8, 117, 211, .1), transparent 21rem); }
.soft-home .catalogue-section { background: radial-gradient(circle at 0 100%, rgba(21, 154, 255, .12), transparent 30rem), #fff; }
.soft-home .catalogue-grid a { background: #031629; box-shadow: 0 15px 34px rgba(3, 22, 41, .15); }
.soft-home .catalogue-grid a::after { background: linear-gradient(180deg, transparent 40%, rgba(3, 22, 41, .64)); }
.soft-home .catalogue-grid a:hover span,
.soft-home .catalogue-grid a:focus-visible span { background: rgba(3, 22, 41, .96); }
.soft-home .local-proof { background: radial-gradient(circle at 90% 15%, rgba(21, 154, 255, .22), transparent 26rem), linear-gradient(145deg, #031629, #052b4a 68%, #031629); }
.soft-home .reviews-section { background: radial-gradient(circle at 8% 10%, rgba(21, 154, 255, .13), transparent 28rem), linear-gradient(180deg, #dceaf5, #fff); }
.soft-home .review-entry--featured { background: linear-gradient(145deg, #031629, #07508b); box-shadow: 0 22px 48px rgba(3, 22, 41, .2); }
.soft-home .sell-section { background: radial-gradient(circle at 72% 0, rgba(21, 154, 255, .28), transparent 22rem), linear-gradient(120deg, #031629, #07508b); }
.soft-home .sell-wave__glow,
.soft-home .sell-wave__blue { stroke: #159aff; }
.soft-home .sell-wave__cyan { stroke: #a8deff; }
.soft-home .sell-wave__violet { stroke: #539de2; }
.soft-home .contact-section,
.soft-home .contact-closing { background: #031629; }
.soft-home .contact-photo::after { background: linear-gradient(0deg, rgba(3, 22, 41, .94), transparent); }
.soft-home .contact-map { background: linear-gradient(31deg, transparent 42%, rgba(8, 117, 211, .12) 43%, rgba(8, 117, 211, .12) 47%, transparent 48%), linear-gradient(148deg, transparent 47%, rgba(8, 117, 211, .1) 48%, rgba(8, 117, 211, .1) 52%, transparent 53%), #dceaf5; }

.site-footer,
.soft-home .site-footer { background: radial-gradient(circle at 80% 0, rgba(21, 154, 255, .15), transparent 28rem), #031629; }

.shop-page .catalogue-search button,
.repairs-page .process-grid li > span { color: #031629; }
.repairs-page .specialist-service,
.repairs-page .repair-close__content { background: #052b4a; }

@media (max-width: 760px) {
  body.soft-home { background: linear-gradient(180deg, #e5f2fb, #fff 40rem, #f0f7fc); }
  .hero__shade,
  .soft-home .hero__shade { background: linear-gradient(0deg, rgba(3, 22, 41, .98) 0%, rgba(3, 22, 41, .91) 43%, rgba(5, 43, 74, .24) 78%, rgba(5, 43, 74, .08) 100%); }
}

/* Compact desktop scale. This file loads after each page stylesheet, so the
   shared rules cover legacy page-level sizes without changing mobile or the
   approved spacious layout on large desktop screens. */
@media (min-width: 761px) and (max-width: 1800px),
       (min-width: 761px) and (max-height: 850px) {
  body {
    --section-space: clamp(3.25rem, calc(9.6vw - 4.3rem), 6.5rem);
    --type-hero: clamp(3rem, calc(7.2vw - 2.5rem), 5.6rem);
    --type-section: clamp(2.35rem, calc(4.4vw - 1rem), 4rem);
    --type-subsection: clamp(1.55rem, 2vw, 1.95rem);
    --density-space: var(--section-space);
    --density-hero: var(--type-hero);
    --density-section: var(--type-section);
    --density-section-display: clamp(2.35rem, calc(6.4vw - 2.55rem), 4.65rem);
    --density-section-small: clamp(2rem, 2.7vw, 2.8rem);
    --density-card: clamp(1.3rem, 1.7vw, 1.5rem);
    --density-device-card: clamp(186px, calc(6.5vw + 103px), 220px);
    --density-service-card: clamp(215px, calc(10.5vw + 81px), 270px);
    --density-service-wide: clamp(195px, calc(9.6vw + 72px), 245px);
    --density-catalogue-card: clamp(250px, calc(7.7vw + 151px), 290px);
    --density-catalogue-featured: clamp(270px, calc(15.4vw + 73px), 350px);
    --density-review-card: clamp(290px, calc(10.6vw + 154px), 345px);
  }

  /* Preserve type roles rather than shrinking the entire page or root font. */
  main:not(.repair-shell) h1 {
    font-size: var(--density-hero) !important;
    line-height: 1.02;
  }

  :is(
    .soft-home .section-heading h2,
    .soft-home .faults-heading h2,
    .soft-home .catalogue-intro h2,
    .soft-home .proof-heading h2,
    .soft-home .reviews-summary h2,
    .soft-home .sell-layout h2,
    .about-page .visit-contact h2,
    .contact-page .visit-details__intro h2,
    .careers-page .roles-heading h2,
    .repairs-page .service-heading h2,
    .repairs-page .specialist-layout h2,
    .repairs-page .seo-routes__layout h2,
    .repairs-page .faq-layout h2,
    .repairs-page .repair-close h2,
    .phone-repairs-page .phone-directory-heading h2,
    .shop-page .collection-heading h2,
    .shop-page .results-heading h2,
    .shop-page .catalogue-help h2,
    .sell-page .sell-form-context h2
  ) {
    font-size: var(--density-section) !important;
    line-height: 1.04;
  }

  :is(
    .soft-home .section-heading h2,
    .soft-home .faults-heading h2,
    .soft-home .catalogue-intro h2,
    .soft-home .proof-heading h2,
    .soft-home .reviews-summary h2
  ) {
    font-size: var(--density-section-display) !important;
  }

  :is(
    .soft-home .contact-panel h2,
    .careers-page .role-path__heading h3,
    .repairs-page .proof-intro h2
  ) {
    font-size: var(--density-section-small) !important;
    line-height: 1.08;
  }

  :is(
    .soft-home .device-section,
    .soft-home .faults-section,
    .soft-home .catalogue-section,
    .soft-home .local-proof,
    .soft-home .reviews-section,
    .about-page .about-visit,
    .contact-page .visit-details,
    .careers-page .roles-section,
    .repairs-page .device-services,
    .repairs-page .specialist-services,
    .repairs-page .seo-routes,
    .repairs-page .repair-process,
    .repairs-page .repair-proof,
    .repairs-page .repair-faq,
    .repairs-page .repair-close,
    .phone-repairs-page .phone-service-directory,
    .sell-page .sell-form-section,
    .sell-page .sell-process,
    .sell-page .sell-workshop,
    .shop-page .collection-section,
    .shop-page .catalogue-workspace,
    .shop-page .catalogue-help
  ) {
    padding-block: var(--density-space) !important;
  }

  /* Reduce oversized hero wells, but let their content increase the height. */
  .soft-home .hero,
  .soft-home .hero__content {
    min-height: min(700px, 100svh);
  }
  .soft-home .hero__content {
    padding-top: clamp(7.5rem, 17vh, 9rem);
  }
  .about-story__grid,
  .careers-hero,
  .contact-hero,
  .shop-hero__inner,
  .repairs-hero__inner,
  .phone-service-hero__inner {
    min-height: min(690px, 100svh);
  }
  .about-story__grid {
    padding-top: clamp(7.5rem, 14vh, 9rem);
    padding-bottom: 3.5rem;
  }
  .careers-hero,
  .contact-hero {
    padding-bottom: 3.5rem;
  }
  .shop-hero__inner,
  .repairs-hero__inner {
    padding-bottom: 3.5rem;
  }

  /* A shared card rhythm covers the repeated marketing and service grids. */
  .soft-home .device-choice {
    min-height: var(--density-device-card);
    padding: 1.1rem;
  }
  .soft-home .device-choice span {
    font-size: var(--density-card);
    line-height: 1.05;
  }
  .soft-home .device-choice__image {
    scale: .84;
    transform-origin: top right;
  }
  .soft-home .catalogue-grid a,
  .soft-home .catalogue-grid a:nth-child(1),
  .soft-home .catalogue-grid a:nth-child(4) {
    min-height: var(--density-catalogue-card);
    padding: 1.1rem;
  }
  .soft-home .catalogue-grid a:nth-child(1),
  .soft-home .catalogue-grid a:nth-child(4) {
    min-height: var(--density-catalogue-featured);
  }
  .soft-home .review-entry,
  .soft-home .review-entry--featured {
    min-height: var(--density-review-card);
    padding: 1.4rem;
  }
  .soft-home .proof-visual {
    min-height: 470px;
  }
  .repairs-page .device-service {
    min-height: var(--density-service-card);
    padding: 6rem 1.1rem 1.1rem;
  }
  .repairs-page .device-service--wide {
    min-height: var(--density-service-wide);
  }
  .repairs-page .specialist-service {
    min-height: 175px;
    padding: 1rem;
  }
  .repairs-page .repair-quote {
    min-height: 230px;
  }
  .phone-repairs-page .phone-service-group summary {
    min-height: 70px;
  }
  .seo-repair-page .seo-service-list li {
    min-height: 108px;
  }
  .footer-main {
    padding-block: var(--density-space) 3rem;
  }

  .careers-page .roles-heading h2 { max-width: 16ch; }

}

/* Short laptops and zoomed desktops need a tighter cap even when their CSS
   viewport is still wide. Width-only queries cannot identify this context. */
@media (min-width: 761px) and (max-height: 850px) {
  body {
    --section-space: clamp(3.25rem, 4.2vw, 4.5rem);
    --type-hero: clamp(3rem, 4.1vw, 4.3rem);
    --type-section: clamp(2.35rem, 3.2vw, 3.35rem);
    --density-section-display: var(--type-section);
    --density-device-card: 186px;
    --density-service-card: 215px;
    --density-service-wide: 195px;
    --density-catalogue-card: 250px;
    --density-catalogue-featured: 250px;
    --density-review-card: 290px;
  }
}