/* sections.css - one block per section file. No hex/font literals
   (all values via var(--pkf-*) from tokens.css). */

/* ---------- 01 header / topbar / nav ---------- */
.pkf-topbar {
  background: var(--pkf-navy);
  color: var(--pkf-bg);
  font-size: var(--pkf-small);
}

.pkf-topbar__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--pkf-s2);
  padding-block: var(--pkf-s1);
}

.pkf-topbar a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--pkf-bg);
  text-decoration: none;
}

.pkf-topbar a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.pkf-header {
  background: var(--pkf-bg);
  border-bottom: 1px solid var(--pkf-line);
  position: sticky;
  top: 0;
  z-index: 50;
}

.pkf-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--pkf-s3);
  padding-block: var(--pkf-s2);
}

.pkf-header__logo {
  font-family: var(--pkf-font-head);
  font-size: var(--pkf-h4);
  color: var(--pkf-ink);
  text-decoration: none;
  font-weight: 700;
}

.pkf-header__logo span {
  color: var(--pkf-red);
}

.pkf-nav {
  display: flex;
  align-items: center;
  gap: var(--pkf-s3);
}

.pkf-nav__links {
  display: flex;
  gap: var(--pkf-s3);
  list-style: none;
}

/* Drawer-only items (CTA + phone) - hidden on desktop, shown inside
   the mobile drawer, see tablet breakpoint below. */
.pkf-nav__cta-item {
  display: none;
}

/* Nav: Poppins 13px, capitalize, muted tone (inspiration measured Exo -
   dropped per audit 07, now Poppins). 44px min hit-area. */
.pkf-nav__links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 12px 4px;
  color: var(--pkf-muted);
  text-decoration: none;
  font-family: var(--pkf-font-nav);
  font-weight: 400;
  font-size: 13px;
  text-transform: capitalize;
  letter-spacing: 0;
  transition: color var(--pkf-duration) var(--pkf-ease);
}

.pkf-nav__links a:hover,
.pkf-nav__links a.is-active {
  color: var(--pkf-red);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.pkf-nav__toggle {
  display: none;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  background: var(--pkf-navy);
  color: var(--pkf-bg);
  border: 0;
  border-radius: var(--pkf-radius-form);
  padding: 10px 12px;
  cursor: pointer;
  transition: background-color var(--pkf-duration) var(--pkf-ease);
}

.pkf-nav__toggle:hover {
  background: var(--pkf-navy-light);
}

.pkf-nav__toggle svg {
  width: var(--pkf-icon);
  height: var(--pkf-icon);
}

/* Dropdown (Layanan parent + 4 segmen + hub) - desktop panel opens on
   hover/focus-within (no-JS safe); JS toggles .is-open for touch and
   drawer-accordion. Single level only: mirrors Elementor Nav Menu. */
.pkf-nav__has-sub {
  position: relative;
}

/* Bridge the hover gap: the panel overlaps the trigger by 8px
   (invisible padding) so moving the cursor down never closes it. */
.pkf-nav__sub::before {
  content: "";
  position: absolute;
  top: -8px;
  left: 0;
  right: 0;
  height: 8px;
}

.pkf-nav__parent {
  gap: 6px;
}

.pkf-nav__parent svg {
  width: var(--pkf-icon-sm);
  height: var(--pkf-icon-sm);
  flex: none;
  transition: transform var(--pkf-duration) var(--pkf-ease);
}

.pkf-nav__sub {
  list-style: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 250px;
  margin: 0;
  padding: var(--pkf-s1);
  background: var(--pkf-bg);
  border: 1px solid var(--pkf-line);
  border-radius: var(--pkf-radius-card);
  box-shadow: var(--pkf-shadow-card);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition:
    opacity var(--pkf-duration) var(--pkf-ease),
    visibility var(--pkf-duration) var(--pkf-ease),
    transform var(--pkf-duration) var(--pkf-ease);
  z-index: 60;
}

.pkf-nav__has-sub:hover > .pkf-nav__sub,
.pkf-nav__has-sub:focus-within > .pkf-nav__sub,
.pkf-nav__has-sub.is-open > .pkf-nav__sub {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.pkf-nav__has-sub:hover .pkf-nav__parent svg,
.pkf-nav__has-sub:focus-within .pkf-nav__parent svg,
.pkf-nav__has-sub.is-open .pkf-nav__parent svg {
  transform: rotate(180deg);
}

/* Scoped (0,3,1) to beat .pkf-nav__links a:hover (0,2,1): submenu
   links get a filled hover instead of an underline. */
.pkf-nav__links .pkf-nav__sub a {
  display: flex;
  width: 100%;
  align-items: center;
  min-height: 44px;
  padding: 10px 12px;
  border-radius: var(--pkf-radius-form);
}

.pkf-nav__links .pkf-nav__sub a:hover {
  background: var(--pkf-bg-alt);
  color: var(--pkf-red);
  text-decoration: none;
}

/* ---------- 02 hero (full-bleed background photo + overlay) ---------- */
.pkf-hero--bg {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: var(--pkf-bg);
  min-height: 100vh;
  min-height: var(--pkf-hero-min-h);
  display: flex;
  align-items: center;
}

.pkf-hero--home {
  background-image: var(--pkf-hero-overlay), url("../assets/img/pkf-hero-pemasangan-mobil-1600w.jpg");
}

.pkf-hero--layanan {
  background-image: var(--pkf-hero-overlay), url("../assets/img/pkf-hero-gedung-kaca-1600w.jpg");
}

.pkf-hero--profil {
  background-image: var(--pkf-hero-overlay), url("../assets/img/pkf-hero-kaca-film-mobil-1600w.jpg");
}

.pkf-hero--bg .pkf-container {
  width: 100%;
}

.pkf-hero__content {
  max-width: 720px;
}

.pkf-hero__title {
  color: var(--pkf-ink);
}

.pkf-hero__title span {
  color: var(--pkf-ink);
}

.pkf-hero--bg .pkf-eyebrow,
.pkf-hero--bg .pkf-hero__title,
.pkf-hero--bg .pkf-hero__title span {
  color: var(--pkf-bg);
}

.pkf-hero__sub {
  color: var(--pkf-muted);
  margin-block: var(--pkf-s2) var(--pkf-s3);
}

.pkf-hero--bg .pkf-hero__sub {
  color: var(--pkf-bg);
  opacity: 0.92;
}

.pkf-hero__cta {
  display: flex;
  gap: var(--pkf-s2);
  flex-wrap: wrap;
}

.pkf-hero__badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pkf-s1);
  margin-top: var(--pkf-s3);
  font-size: var(--pkf-small);
}

.pkf-hero__badges span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--pkf-bg);
  border: 1px solid var(--pkf-bg);
  border-radius: var(--pkf-radius-btn);
  padding: 6px 12px;
  font-weight: 700;
  color: var(--pkf-ink);
}

.pkf-hero__badges svg {
  width: var(--pkf-icon-sm);
  height: var(--pkf-icon-sm);
  flex: none;
  color: var(--pkf-wa-dark);
}

/* ---------- 03 trust ---------- */
.pkf-trust__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--pkf-s3);
  margin-bottom: var(--pkf-s4);
}

.pkf-trust__card {
  background: var(--pkf-bg);
  border: 1px solid var(--pkf-line);
  border-radius: var(--pkf-radius-card);
  padding: var(--pkf-s3);
  box-shadow: var(--pkf-shadow-card);
  transition:
    transform var(--pkf-duration) var(--pkf-ease),
    box-shadow var(--pkf-duration) var(--pkf-ease);
}

.pkf-trust__card:hover {
  transform: translateY(-4px);
  box-shadow: var(--pkf-shadow-hover);
}

.pkf-trust__icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: var(--pkf-bg-alt);
  color: var(--pkf-red);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--pkf-s2);
}

.pkf-trust__icon svg {
  width: 40px;
  height: 40px;
}

.pkf-trust__brands {
  display: flex;
  gap: var(--pkf-s3);
  flex-wrap: wrap;
  align-items: center;
  font-weight: 700;
  color: var(--pkf-muted);
}

/* ---------- 04 services grid ---------- */
.pkf-services__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--pkf-s3);
}

.pkf-service {
  background: var(--pkf-bg);
  border: 1px solid var(--pkf-line);
  border-radius: var(--pkf-radius-card);
  overflow: hidden;
  box-shadow: var(--pkf-shadow-card);
  display: flex;
  flex-direction: column;
  transition:
    transform var(--pkf-duration) var(--pkf-ease),
    box-shadow var(--pkf-duration) var(--pkf-ease);
}

.pkf-service:hover {
  transform: translateY(-4px);
  box-shadow: var(--pkf-shadow-hover);
}

.pkf-service img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
  width: 100%;
  background: var(--pkf-bg-alt);
  transition: transform var(--pkf-duration-lg) var(--pkf-ease);
}

.pkf-service:hover img {
  transform: scale(1.05);
}

.pkf-service__body {
  padding: var(--pkf-s3);
  display: flex;
  flex-direction: column;
  gap: var(--pkf-s1);
  flex: 1;
}

.pkf-service__body .pkf-btn {
  align-self: flex-start;
  margin-top: var(--pkf-s1);
}

.pkf-service__body p {
  color: var(--pkf-muted);
  font-size: var(--pkf-small);
  flex: 1;
}

/* ---------- 04 services note (retired) ----------
   Price teaser deleted per owner request (no prices, focus WA chat).
   Rule kept as a labeled placeholder so the class name stays documented. */

/* ---------- 05 brands table ---------- */
.pkf-brands__table {
  width: 100%;
  border-collapse: collapse;
  background: var(--pkf-bg);
  font-size: var(--pkf-small);
}

.pkf-brands__table th,
.pkf-brands__table td {
  border: 1px solid var(--pkf-line);
  padding: 12px 14px;
  text-align: left;
}

.pkf-brands__table th {
  background: var(--pkf-navy);
  color: var(--pkf-bg);
  font-family: var(--pkf-font-accent);
  font-size: var(--pkf-small);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.pkf-brands__table tbody tr {
  transition: background-color var(--pkf-duration) var(--pkf-ease);
}

.pkf-brands__table tbody tr:hover {
  background: var(--pkf-bg-alt);
}

.pkf-table-scroll {
  overflow-x: auto;
  border: 1px solid var(--pkf-line);
  border-radius: var(--pkf-radius-card);
  background: var(--pkf-bg);
}

.pkf-table-scroll .pkf-brands__table {
  min-width: 640px;
}

/* ---------- 06 gallery ---------- */
.pkf-gallery__filters {
  display: flex;
  gap: var(--pkf-s1);
  flex-wrap: wrap;
  margin-bottom: var(--pkf-s3);
}

.pkf-filter {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  border: 1px solid var(--pkf-line);
  background: var(--pkf-bg);
  border-radius: var(--pkf-radius-btn);
  padding: 8px 18px;
  font-size: var(--pkf-small);
  font-weight: 700;
  cursor: pointer;
  color: var(--pkf-ink);
  transition:
    background-color var(--pkf-duration) var(--pkf-ease),
    color var(--pkf-duration) var(--pkf-ease),
    border-color var(--pkf-duration) var(--pkf-ease);
}

.pkf-filter:hover {
  border-color: var(--pkf-ink);
}

.pkf-filter.is-active {
  background: var(--pkf-red);
  border-color: var(--pkf-red);
  color: var(--pkf-bg);
}

.pkf-gallery__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--pkf-s2);
}

.pkf-gallery__grid figure {
  border-radius: var(--pkf-radius-card);
  overflow: hidden;
  border: 1px solid var(--pkf-line);
  background: var(--pkf-bg);
  transition:
    transform var(--pkf-duration) var(--pkf-ease),
    box-shadow var(--pkf-duration) var(--pkf-ease);
}

.pkf-gallery__grid figure:hover {
  transform: translateY(-4px);
  box-shadow: var(--pkf-shadow-hover);
}

.pkf-gallery__grid img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
  width: 100%;
  background: var(--pkf-bg-alt);
  transition: transform var(--pkf-duration-lg) var(--pkf-ease);
}

.pkf-gallery__grid figure:hover img {
  transform: scale(1.04);
}

.pkf-gallery__grid figcaption {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--pkf-small);
  color: var(--pkf-muted);
  padding: 10px 14px;
}

.pkf-gallery__grid figcaption svg {
  width: var(--pkf-icon-sm);
  height: var(--pkf-icon-sm);
  flex: none;
  color: var(--pkf-red);
}

/* ---------- 07 pricing (retired) ----------
   Price page + 07-harga-paket.html deleted per owner request.
   Only the generic form note remains (used by kontak.html). */
.pkf-form__note {
  margin-top: var(--pkf-s3);
  color: var(--pkf-muted);
  font-size: var(--pkf-small);
  text-align: center;
}

/* ---------- 08 process ---------- */
.pkf-process__steps {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--pkf-s2);
  list-style: none;
  counter-reset: pkf-step;
}

.pkf-process__steps li {
  counter-increment: pkf-step;
  border-top: 3px solid var(--pkf-ink);
  padding-top: var(--pkf-s2);
  font-size: var(--pkf-small);
  color: var(--pkf-muted);
}

.pkf-process__steps li::before {
  content: counter(pkf-step, decimal-leading-zero);
  display: block;
  font-family: var(--pkf-font-head);
  font-weight: 700;
  font-size: var(--pkf-h3);
  color: var(--pkf-red);
  margin-bottom: 4px;
}

.pkf-process__steps strong {
  display: block;
  color: var(--pkf-ink);
  font-size: var(--pkf-body);
  margin-bottom: 6px;
}

/* ---------- 09 testimonials ---------- */
.pkf-testi__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--pkf-s3);
}

.pkf-testi {
  background: var(--pkf-bg);
  border: 1px solid var(--pkf-line);
  border-radius: var(--pkf-radius-card);
  padding: var(--pkf-s3);
  box-shadow: var(--pkf-shadow-card);
  transition:
    transform var(--pkf-duration) var(--pkf-ease),
    box-shadow var(--pkf-duration) var(--pkf-ease);
}

.pkf-testi:hover {
  transform: translateY(-4px);
  box-shadow: var(--pkf-shadow-hover);
}

.pkf-testi__stars {
  display: flex;
  gap: 4px;
  color: var(--pkf-star);
  margin-bottom: var(--pkf-s1);
}

.pkf-testi__stars svg {
  width: var(--pkf-icon-sm);
  height: var(--pkf-icon-sm);
}

.pkf-testi blockquote {
  font-style: italic;
  margin-bottom: var(--pkf-s2);
}

.pkf-testi figcaption {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--pkf-small);
  color: var(--pkf-muted);
}

/* Author row - default user icon in a circle chip + name/stack.
   No pin SVG, no initials lettering: one neutral person glyph. */
.pkf-testi__who {
  display: flex;
  align-items: center;
  gap: 10px;
}

.pkf-testi__user {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--pkf-bg-alt);
  border: 1px solid var(--pkf-line);
  color: var(--pkf-muted);
}

.pkf-testi__user svg {
  width: var(--pkf-icon-sm);
  height: var(--pkf-icon-sm);
}

.pkf-testi figcaption strong {
  display: block;
  color: var(--pkf-ink);
}

.pkf-testi__meta {
  color: var(--pkf-muted);
}

/* Entrance: cards fade + rise once when scrolled into view.
   .is-in is added by main.js (IntersectionObserver). Base state stays
   fully visible - the animation plays FROM hidden TO visible (fill
   backwards), so a card can never get stuck at opacity:0 if JS or the
   observer fails. Hover lift keeps working after the entrance ends. */
@keyframes pkf-testi-in {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}

.pkf-testi.is-in {
  animation: pkf-testi-in var(--pkf-duration-lg) var(--pkf-ease) backwards;
}

/* Stagger siblings so the row reads left → right, not all-at-once. */
.pkf-testi__grid .pkf-testi:nth-child(2).is-in { animation-delay: 90ms; }
.pkf-testi__grid .pkf-testi:nth-child(3).is-in { animation-delay: 180ms; }
.pkf-testi__grid .pkf-testi:nth-child(4).is-in { animation-delay: 270ms; }
.pkf-testi__grid .pkf-testi:nth-child(5).is-in { animation-delay: 360ms; }
.pkf-testi__grid .pkf-testi:nth-child(6).is-in { animation-delay: 450ms; }

/* Star pop: each star scales in with a short stagger on entrance.
   Stars are visible by default; animation only enhances. */
@keyframes pkf-star-in {
  from { opacity: 0; transform: scale(0.6); }
  to { opacity: 1; transform: none; }
}

.pkf-testi.is-in .pkf-testi__stars svg {
  animation: pkf-star-in var(--pkf-duration) var(--pkf-ease) backwards;
}

.pkf-testi.is-in .pkf-testi__stars svg:nth-child(2) { animation-delay: 120ms; }
.pkf-testi.is-in .pkf-testi__stars svg:nth-child(3) { animation-delay: 180ms; }
.pkf-testi.is-in .pkf-testi__stars svg:nth-child(4) { animation-delay: 240ms; }
.pkf-testi.is-in .pkf-testi__stars svg:nth-child(5) { animation-delay: 300ms; }

/* ---------- 10 faq ---------- */
.pkf-faq {
  max-width: 800px;
  margin-inline: auto;
}

.pkf-faq__item {
  border: 1px solid var(--pkf-line);
  border-radius: var(--pkf-radius-form);
  margin-bottom: var(--pkf-s1);
  background: var(--pkf-bg);
  overflow: hidden;
}

.pkf-faq__item > button {
  display: flex;
  align-items: center;
  gap: var(--pkf-s1);
  width: 100%;
  min-height: 44px;
  text-align: left;
  background: none;
  border: 0;
  font-family: var(--pkf-font-body);
  font-size: var(--pkf-body);
  font-weight: 700;
  color: var(--pkf-ink);
  padding: var(--pkf-s2);
  cursor: pointer;
}

.pkf-faq__item > button span {
  flex: 1;
}

.pkf-faq__item > button svg {
  width: var(--pkf-icon-sm);
  height: var(--pkf-icon-sm);
  flex: none;
  color: var(--pkf-red);
  transition: transform var(--pkf-duration) var(--pkf-ease);
}

.pkf-faq__item.is-open > button svg {
  transform: rotate(180deg);
}

.pkf-faq__item > div {
  display: none;
  padding: 0 var(--pkf-s2) var(--pkf-s2);
  color: var(--pkf-muted);
}

.pkf-faq__item.is-open > div {
  display: block;
}

.pkf-faq__item.is-open {
  border-color: var(--pkf-ink);
}

/* ---------- 11 blog cards ---------- */
.pkf-blog__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--pkf-s3);
}

.pkf-post {
  background: var(--pkf-bg);
  border: 1px solid var(--pkf-line);
  border-radius: var(--pkf-radius-card);
  overflow: hidden;
  box-shadow: var(--pkf-shadow-card);
  display: flex;
  flex-direction: column;
  transition:
    transform var(--pkf-duration) var(--pkf-ease),
    box-shadow var(--pkf-duration) var(--pkf-ease);
}

.pkf-post:hover {
  transform: translateY(-4px);
  box-shadow: var(--pkf-shadow-hover);
}

.pkf-post img {
  aspect-ratio: 16 / 9;
  object-fit: cover;
  width: 100%;
  background: var(--pkf-bg-alt);
  transition: transform var(--pkf-duration-lg) var(--pkf-ease);
}

.pkf-post:hover img {
  transform: scale(1.04);
}

.pkf-post__body {
  padding: var(--pkf-s2) var(--pkf-s3) var(--pkf-s3);
  display: flex;
  flex-direction: column;
  gap: var(--pkf-s1);
  flex: 1;
}

.pkf-post__meta {
  font-size: var(--pkf-small);
  color: var(--pkf-muted);
}

.pkf-post__body p {
  font-size: var(--pkf-small);
  color: var(--pkf-muted);
  flex: 1;
}

.pkf-post__body .pkf-arrow-link {
  margin-top: var(--pkf-s1);
  font-size: var(--pkf-small);
}

/* ---------- article ---------- */
.pkf-article {
  max-width: 780px;
  margin-inline: auto;
}

.pkf-article h2 {
  margin-block: var(--pkf-s4) var(--pkf-s2);
}

.pkf-article p,
.pkf-article ul {
  margin-bottom: var(--pkf-s2);
}

.pkf-article ul {
  padding-left: var(--pkf-s3);
}

img.pkf-article__img {
  margin-block: var(--pkf-s3);
  border-radius: var(--pkf-radius-card);
}

/* ---------- 12 cta ---------- */
.pkf-cta {
  background: var(--pkf-navy);
  color: var(--pkf-bg);
  text-align: center;
}

.pkf-cta h2 {
  color: var(--pkf-bg);
}

.pkf-cta p {
  color: var(--pkf-bg);
  opacity: 0.85;
  max-width: 640px;
  margin: 0 auto var(--pkf-s3);
}

.pkf-cta .pkf-eyebrow {
  color: var(--pkf-bg);
  opacity: 0.8;
}

.pkf-cta__btns {
  display: flex;
  gap: var(--pkf-s2);
  justify-content: center;
  flex-wrap: wrap;
  margin-top: var(--pkf-s3);
}

/* Specificity (0,2,1) beats the generic .pkf-cta p (0,1,1) above,
   so the meta keeps its own top margin instead of inheriting margin 0. */
.pkf-cta p.pkf-cta__meta {
  margin: var(--pkf-s3) auto 0;
  font-size: var(--pkf-small);
  color: var(--pkf-bg);
  opacity: 0.8;
}

/* ---------- 13 footer ---------- */
.pkf-footer {
  background: var(--pkf-navy);
  color: var(--pkf-bg);
  padding-top: var(--pkf-s6);
}

.pkf-footer__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--pkf-s3);
}

.pkf-footer h4 {
  color: var(--pkf-bg);
  font-family: var(--pkf-font-body);
  margin-bottom: var(--pkf-s2);
}

.pkf-footer a {
  color: var(--pkf-bg);
  text-decoration: none;
  transition:
    opacity var(--pkf-duration) var(--pkf-ease),
    text-decoration-color var(--pkf-duration) var(--pkf-ease);
}

.pkf-footer__grid > div:nth-child(n + 2) a {
  opacity: 0.85;
}

.pkf-footer a:hover {
  opacity: 1;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.pkf-footer ul {
  list-style: none;
}

.pkf-footer li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 8px;
  font-size: var(--pkf-small);
}

/* Brand column lead paragraph (non-link text) dims like footer links. */
.pkf-footer__lead {
  font-size: var(--pkf-small);
  opacity: 0.85;
  margin-bottom: var(--pkf-s2);
}

.pkf-footer li svg {
  width: var(--pkf-icon-sm);
  height: var(--pkf-icon-sm);
  flex: none;
  margin-top: 2px;
  opacity: 0.85;
}

.pkf-footer a:focus-visible,
.pkf-footer button:focus-visible {
  outline-color: var(--pkf-bg);
}

.pkf-footer__bottom {
  border-top: 1px solid var(--pkf-navy-light);
  margin-top: var(--pkf-s4);
  padding-block: var(--pkf-s2);
  font-size: var(--pkf-small);
  text-align: center;
  opacity: 0.8;
}

/* ---------- contact ---------- */
.pkf-contact__grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: var(--pkf-s4);
}

.pkf-contact__info li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  list-style: none;
  margin-bottom: var(--pkf-s2);
}

.pkf-contact__info li svg {
  width: var(--pkf-icon-sm);
  height: var(--pkf-icon-sm);
  flex: none;
  margin-top: 4px;
  color: var(--pkf-red);
}

/* Right column (audit 07 S5): map + hours + socials. */
.pkf-contact__side {
  display: flex;
  flex-direction: column;
  gap: var(--pkf-s2);
}

.pkf-contact__side-list {
  list-style: none;
  font-size: var(--pkf-small);
  color: var(--pkf-muted);
}

.pkf-contact__side-list li {
  padding-block: 6px;
  border-bottom: 1px solid var(--pkf-line);
}

.pkf-contact__side-list strong {
  color: var(--pkf-ink);
}

.pkf-map {
  width: 100%;
  min-height: 320px;
  border: 0;
  border-radius: var(--pkf-radius-card);
}

/* ---------- floating ---------- */
/* Hidden over the hero (audit 07: it covered the hero CTA on mobile),
   appears after scrolling past ~70% of the viewport - toggled by
   main.js via .is-visible, same pattern as .pkf-to-top. */
.pkf-wa-float {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--pkf-wa);
  color: var(--pkf-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  box-shadow: var(--pkf-shadow-card);
  z-index: 60;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition:
    opacity var(--pkf-duration) var(--pkf-ease),
    visibility var(--pkf-duration) var(--pkf-ease),
    transform var(--pkf-duration) var(--pkf-ease);
}

.pkf-wa-float.is-visible {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.pkf-wa-float.is-visible:hover {
  transform: scale(1.06);
}

.pkf-wa-float svg {
  width: var(--pkf-icon);
  height: var(--pkf-icon);
}

.pkf-to-top {
  position: fixed;
  right: 28px;
  bottom: 88px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 0;
  background: var(--pkf-navy);
  color: var(--pkf-bg);
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 60;
  transition:
    background-color var(--pkf-duration) var(--pkf-ease),
    transform var(--pkf-duration) var(--pkf-ease);
}

.pkf-to-top:hover {
  background: var(--pkf-navy-light);
}

.pkf-to-top svg {
  width: var(--pkf-icon-sm);
  height: var(--pkf-icon-sm);
}

.pkf-to-top.is-visible {
  display: flex;
}

/* ---------- tablet ---------- */
@media (max-width: 1024px) {
  .pkf-nav__links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--pkf-bg);
    flex-direction: column;
    gap: 0;
    max-height: calc(100vh - 70px);
    overflow-y: auto;
    padding: var(--pkf-s1) var(--pkf-gutter) var(--pkf-s2);
    border-bottom: 1px solid var(--pkf-line);
  }

  .pkf-nav__links.is-open {
    display: flex;
  }

  .pkf-nav__links a {
    min-height: 48px;
  }

  .pkf-nav__cta-item {
    display: block;
  }

  .pkf-nav__cta-item a {
    text-decoration: none;
  }

  .pkf-nav__cta-item .pkf-btn {
    width: 100%;
    margin-top: var(--pkf-s1);
  }

  .pkf-nav__phone {
    display: block;
    text-align: center;
    padding: 12px 4px;
    font-size: var(--pkf-small);
    font-weight: 700;
    color: var(--pkf-ink);
    text-decoration: none;
  }

  /* Dropdown becomes an accordion inside the drawer. */
  .pkf-nav__has-sub {
    position: static;
  }

  .pkf-nav__parent {
    width: 100%;
    justify-content: space-between;
  }

  .pkf-nav__links .pkf-nav__sub {
    position: static;
    display: none;
    min-width: 0;
    border: 0;
    border-left: 2px solid var(--pkf-line);
    border-radius: 0;
    box-shadow: none;
    padding: 0 0 0 var(--pkf-s2);
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  .pkf-nav__has-sub.is-open > .pkf-nav__sub {
    display: block;
  }

  .pkf-nav__toggle {
    display: block;
  }

  .pkf-header__cta {
    display: none;
  }

  .pkf-trust__grid,
  .pkf-services__grid,
  .pkf-testi__grid,
  .pkf-blog__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .pkf-process__steps {
    grid-template-columns: repeat(2, 1fr);
  }

  .pkf-gallery__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .pkf-footer__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .pkf-contact__grid {
    grid-template-columns: 1fr;
  }
}

/* ---------- mobile ---------- */
@media (max-width: 767px) {
  .pkf-trust__grid,
  .pkf-services__grid,
  .pkf-testi__grid,
  .pkf-blog__grid,
  .pkf-gallery__grid {
    grid-template-columns: 1fr;
  }

  .pkf-process__steps {
    grid-template-columns: 1fr;
  }

  .pkf-footer__grid {
    grid-template-columns: 1fr;
  }

  .pkf-wa-float {
    bottom: 76px;
  }

  /* Below tablet the topbar links collapse to phone + WA only
     (audit 07 T2: full link row wrapped to ~275px tall). The rest
     stays reachable via the drawer CTA + footer. */
  .pkf-topbar__extra {
    display: none;
  }
}