/* Shared vertical rhythm and viewport-fixed technical backgrounds. */

body section.cta.pk-pre-partner-footer {
  padding-top: 90px !important;
  padding-bottom: 90px !important;
}

body,
body .hero,
body .services-preview,
body .svc-info,
body .svc-packages,
body .svc-why,
body footer.footer--with-partner-logos {
  background-attachment: fixed !important;
}

/* Final homepage slider polish: keep only the progress line and center it. */
.hero .hero-slide-counter {
  display: none !important;
}

.hero .hero-slideshow-ui {
  justify-content: center !important;
}

.hero .hero-slide-progress {
  margin-right: auto !important;
  margin-left: auto !important;
}

/* On phones the five material-partner logos stay on two rows: 3 + 2. */
@media (max-width: 620px) {
  .pk-partner-band .pk-footer-logo-list {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 14px 16px !important;
  }

  .pk-partner-band .pk-footer-logo-item:last-child {
    grid-column: auto !important;
  }
}

/* Shared premium header: the homepage navigation is now the visual source of truth on every public page. */
@media (min-width: 981px) {
  body header,
  body header.scrolled {
    top: 12px !important;
    right: 0 !important;
    left: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border-bottom: 0 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    pointer-events: none !important;
  }

  body header.scrolled {
    top: 7px !important;
  }

  body header .wrap,
  body header.scrolled .wrap {
    width: min(1580px, calc(100vw - 40px)) !important;
    max-width: 1580px !important;
    min-height: 76px !important;
    margin-right: auto !important;
    margin-left: auto !important;
    padding: 7px 12px 7px 16px !important;
    display: grid !important;
    grid-template-columns: auto 1fr auto !important;
    align-items: center !important;
    gap: clamp(24px, 2.4vw, 42px) !important;
    background: linear-gradient(110deg, rgba(22, 25, 31, .94), rgba(10, 12, 16, .92)) !important;
    border: 1px solid rgba(255, 255, 255, .105) !important;
    border-radius: 18px !important;
    box-shadow: 0 20px 55px rgba(0, 0, 0, .42), inset 0 1px 0 rgba(255, 255, 255, .035) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    pointer-events: auto !important;
  }

  body header.scrolled .wrap {
    min-height: 68px !important;
    background: linear-gradient(110deg, rgba(20, 23, 29, .98), rgba(8, 10, 13, .97)) !important;
    border-color: rgba(245, 215, 110, .14) !important;
  }

  body header .logo img,
  body header.scrolled .logo img {
    height: 56px !important;
    max-width: none !important;
  }

  body header nav.main-nav {
    width: auto !important;
    justify-self: center !important;
    justify-content: center !important;
    padding: 4px !important;
    border: 1px solid rgba(255, 255, 255, .045) !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, .028) !important;
  }

  body header .nav-links {
    width: auto !important;
    justify-content: initial !important;
    gap: 4px !important;
  }

  body header .nav-links > a,
  body header .nav-services-toggle {
    min-height: 38px !important;
    padding: 0 16px !important;
    display: inline-flex !important;
    align-items: center !important;
    border-radius: 999px !important;
    color: rgba(244, 241, 232, .68) !important;
    font-family: 'Manrope', sans-serif !important;
    font-size: 13px !important;
    font-weight: 650 !important;
    line-height: 1 !important;
    letter-spacing: .02em !important;
  }

  body header .nav-links > a::after {
    display: none !important;
  }

  body header .nav-links > a:hover,
  body header .nav-services-toggle:hover,
  body header .nav-services-toggle.open {
    color: var(--text) !important;
    background: rgba(245, 215, 110, .09) !important;
  }

  body header .header-right {
    justify-self: end !important;
    margin-left: 0 !important;
    gap: 14px !important;
  }

  body header .header-phone {
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px !important;
  }

  body header .header-phone .label {
    display: none !important;
  }

  body header .header-phone .value {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    color: rgba(244, 241, 232, .78) !important;
    font-family: 'Manrope', sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
  }

  body header .header-phone-icon {
    width: 30px !important;
    height: 30px !important;
    flex: 0 0 30px !important;
    background: rgba(245, 215, 110, .08) !important;
  }

  body header .btn-hero-compact {
    min-height: 46px !important;
    padding: 0 20px !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 28px rgba(245, 215, 110, .13) !important;
  }

  body header .desktop-submenu {
    top: calc(100% + 16px) !important;
    border-radius: 16px !important;
    background: rgba(11, 13, 17, .98) !important;
    border-color: rgba(255, 255, 255, .1) !important;
  }
}

@media (min-width: 981px) and (max-width: 1220px) {
  body header .header-phone {
    display: none !important;
  }
}

@media (max-width: 980px) {
  body header,
  body header.scrolled {
    top: 8px !important;
    right: 8px !important;
    left: 8px !important;
    padding: 0 !important;
    background: transparent !important;
    border-bottom: 0 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  body header .wrap,
  body header.scrolled .wrap {
    min-height: 58px !important;
    padding: 7px 9px 7px 12px !important;
    border: 1px solid rgba(255, 255, 255, .1) !important;
    border-radius: 16px !important;
    background: linear-gradient(110deg, rgba(20, 23, 29, .96), rgba(8, 10, 13, .94)) !important;
    box-shadow: 0 15px 40px rgba(0, 0, 0, .42) !important;
    backdrop-filter: blur(18px) !important;
    -webkit-backdrop-filter: blur(18px) !important;
  }

  body header .btn-hero-compact {
    border-radius: 10px !important;
  }

  body header .burger {
    border-radius: 10px !important;
    background: rgba(255, 255, 255, .035) !important;
  }

  body .mobile-menu {
    top: 78px !important;
  }
}

/* Homepage desktop hero copy: align it to the same 1320px content rail without moving or resizing the slideshow. */
@media (min-width: 981px) {
  body .hero .hero-content {
    margin-left: max(0px, calc((100vw - 1320px) / 2 - max(24px, (100vw - 1680px) / 2))) !important;
  }

  body .hero .hero-content h1 {
    max-width: 460px !important;
    font-family: 'Epilogue', sans-serif !important;
    font-size: 35.54px !important;
    line-height: 41.73px !important;
    font-weight: 400 !important;
    letter-spacing: -.025em !important;
  }
}

/* Services use the same ambient background and frosted frame language as the quick enquiry card. */
body .services-preview {
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;
  background: var(--bg) !important;
}

body .services-preview::before {
  content: "" !important;
  position: absolute !important;
  z-index: 0 !important;
  inset: 0 !important;
  display: block !important;
  background: radial-gradient(ellipse at 50% 30%, var(--blue-dim), transparent 60%) !important;
  pointer-events: none !important;
}

body .services-preview > .wrap {
  position: relative !important;
  z-index: 1 !important;
}

body .services-preview .service-link-card {
  border: 1px solid rgba(245, 215, 110, .18) !important;
  background: rgba(17, 19, 24, .32) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .06) !important;
}

body .services-preview .service-link-card:hover {
  border-color: rgba(245, 215, 110, .55) !important;
  box-shadow: 0 28px 70px rgba(0, 0, 0, .38), inset 0 1px 0 rgba(255, 255, 255, .08) !important;
}

/* Homepage location: same section-heading scale, same content rail, details below instead of beside the title. */
body .pk-location-section:has(> .wrap.pk-location-heading) {
  padding-top: 90px !important;
  background: var(--bg) !important;
  border-top: 1px solid var(--line) !important;
}

body .pk-location-section:has(> .wrap.pk-location-heading)::before {
  opacity: 1 !important;
  background: radial-gradient(ellipse at 50% 30%, var(--blue-dim), transparent 60%) !important;
  background-size: auto !important;
  mask-image: none !important;
  -webkit-mask-image: none !important;
}

@media (min-width: 981px) {
  body .pk-location-section > .wrap,
  body .pk-location-section > .wrap.pk-location-heading {
    width: 1320px !important;
    max-width: 1320px !important;
    margin-right: auto !important;
    margin-left: auto !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
  }

  body .pk-location-section > .wrap.pk-location-heading {
    display: block !important;
    padding-bottom: 40px !important;
  }

  body .pk-location-section .pk-location-kicker {
    display: block !important;
    margin: 0 0 28px !important;
    color: var(--text) !important;
    font-family: 'Epilogue', sans-serif !important;
    font-size: 35.54px !important;
    line-height: 41.73px !important;
    font-weight: 400 !important;
    letter-spacing: -.025em !important;
  }

  body .pk-location-section .pk-location-kicker::before {
    display: none !important;
  }

  body .pk-location-section .pk-location-details {
    width: 100% !important;
    grid-template-columns: minmax(220px, 1.15fr) minmax(200px, .85fr) minmax(270px, auto) !important;
    gap: clamp(22px, 3vw, 46px) !important;
  }
}

@media (max-width: 980px) {
  body .pk-location-section:has(> .wrap.pk-location-heading) {
    padding-top: 49px !important;
  }

  body .pk-location-section > .wrap.pk-location-heading {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 21px 30px !important;
  }

  body .pk-location-section .pk-location-kicker {
    display: block !important;
    margin: 0 0 24px !important;
    font-family: 'Epilogue', sans-serif !important;
    font-size: 26.15px !important;
    line-height: 31.76px !important;
    font-weight: 400 !important;
    letter-spacing: -.02em !important;
  }

  body .pk-location-section .pk-location-kicker::before {
    display: none !important;
  }

  body .pk-location-section .pk-location-details {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }
}

/* 2026-08-16 global fluid geometry pass: remove the 981-1320px desktop cliff without changing the large-desktop design. */
:root {
  --pk-fluid-shell: min(1320px, calc(100vw - clamp(48px, 6vw, 96px)));
}

@media (min-width: 981px) {
  body .intro .wrap.intro-grid,
  body .services-preview > .wrap,
  body .services > .wrap,
  body .svc-hero > .wrap,
  body .svc-stats > .wrap,
  body .svc-packages > .wrap,
  body .svc-why > .wrap,
  body .svc-info > .wrap,
  body .cta > .wrap.cta-layout,
  body .pk-location-section > .wrap,
  body .pk-location-section > .wrap.pk-location-heading {
    width: var(--pk-fluid-shell) !important;
    max-width: 1320px !important;
    margin-right: auto !important;
    margin-left: auto !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
    box-sizing: border-box !important;
  }

  body .section-head,
  body .services-preview .section-head,
  body .services .section-head {
    width: 100% !important;
    max-width: min(980px, 100%) !important;
  }

  body .service-link-grid {
    width: 100% !important;
    max-width: 100% !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    column-gap: clamp(18px, 2vw, 30px) !important;
    row-gap: clamp(20px, 2.2vw, 30px) !important;
    margin-right: auto !important;
    margin-left: auto !important;
  }

  body .service-link-card {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    min-height: clamp(420px, 32vw, 460px) !important;
    max-height: none !important;
  }

  body .service-link-image {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    flex: 0 0 auto !important;
    aspect-ratio: 16 / 9 !important;
  }

  body .service-link-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  body .service-link-card h3 {
    font-size: clamp(22px, 2vw, 26.66px) !important;
    line-height: 1.15 !important;
  }

  body .work-gallery {
    width: 100% !important;
    max-width: 100% !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    column-gap: clamp(16px, 2vw, 30px) !important;
    row-gap: clamp(16px, 2vw, 30px) !important;
  }

  body .work-gallery-item {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    aspect-ratio: 3 / 4 !important;
  }

  body .package-grid,
  body .why-grid,
  body .info-split,
  body .stats-grid,
  body .footer-grid,
  body .pk-location-details,
  body .cta-layout {
    min-width: 0 !important;
  }

  body .package-grid > *,
  body .why-grid > *,
  body .info-split > *,
  body .stats-grid > *,
  body .footer-grid > *,
  body .pk-location-details > *,
  body .cta-layout > * {
    min-width: 0 !important;
  }

  body .svc-hero h1 {
    font-size: clamp(40px, 4.3vw, 60px) !important;
  }

  body .cta .wrap.cta-layout {
    box-sizing: border-box !important;
  }
}

/* Keep every service hero on one typography system without loading another font. */
body .svc-hero h1,
body .svc-hero p {
  font-family: 'Manrope', sans-serif !important;
}

/* Keep the opening service photo the same height on every service page. */
body .svc-hero {
  height: 800px !important;
  min-height: 800px !important;
}

/* Lift each existing image opacity by 10 percentage points without adding filters. */
body .svc-hero-bg picture img {
  opacity: .65 !important;
}

body .svc-hero-bg img[src*="color-wrap-hero-"] {
  opacity: .72 !important;
}

body .svc-hero-bg img[src*="tint-hero-"],
body .svc-hero-bg img[src*="headlight-hero-"],
body .svc-hero-bg img[src*="chrome-delete-hero-"] {
  opacity: .88 !important;
}

@media (max-width: 768px) {
  body .svc-hero {
    height: 640px !important;
    min-height: 640px !important;
  }

  body .svc-hero-bg picture img {
    opacity: .52 !important;
  }

  body .svc-hero-bg img[src*="color-wrap-hero-"] {
    opacity: .58 !important;
  }

  body .svc-hero-bg img[src*="tint-hero-"],
  body .svc-hero-bg img[src*="headlight-hero-"],
  body .svc-hero-bg img[src*="chrome-delete-hero-"] {
    opacity: .78 !important;
  }
}

@media (min-width: 981px) and (max-width: 1279px) {
  body .work-gallery {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

@media (min-width: 981px) and (max-width: 1180px) {
  body .service-link-grid,
  body .package-grid,
  body .why-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body .service-link-card {
    min-height: 420px !important;
  }
}

@media (min-width: 981px) and (max-width: 1140px) {
  body .cta .wrap.cta-layout {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 40px !important;
  }

  body .cta-copy,
  body .cta-quick,
  body .cta-form {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    justify-self: stretch !important;
  }
}

@media (min-width: 1141px) and (max-width: 1379px) {
  body .cta .wrap.cta-layout {
    grid-template-columns: minmax(0, 1.1fr) minmax(360px, .9fr) !important;
    gap: clamp(36px, 4vw, 64px) !important;
  }

  body .cta-copy,
  body .cta-quick {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
}

@media (min-width: 981px) and (max-width: 1100px) {
  body .info-split {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 32px !important;
  }

  body .info-visual {
    order: -1 !important;
  }
}

/* Mobile menu hitbox safety: reserve space for the close button. */
@media (max-width: 980px) {
  body .mobile-menu {
    padding-top: 48px !important;
  }
}

/* Keep primary content sections on one consistent mobile vertical rhythm. */
@media (max-width: 768px) {
  body {
    --pk-mobile-section-spacing: 56px;
  }

  body section.intro,
  body section.services-preview,
  body section.homepage-process,
  body section.services,
  body section.svc-packages,
  body section.svc-why,
  body section.svc-info,
  body section.cta.pk-pre-partner-footer {
    padding-top: var(--pk-mobile-section-spacing) !important;
    padding-bottom: var(--pk-mobile-section-spacing) !important;
  }

  body section.pk-location-section {
    padding-top: var(--pk-mobile-section-spacing) !important;
  }
}