/* =============================================================
   Pages.css — internal (WordPress) content pages: pg-* library.
   1:1 port of design/ui_kits/storefront/pages.css (minus the
   [data-wp-annotate] prototype tooling). Reuses tokens + .section
   / .card / .btn / .eyebrow from colors_and_type.css +
   storefront.css. New classes are prefixed `pg-`. Mobile rules
   live in mobile.css (pg-* responsive section at the end).
   Cascade slot: after homepage-variants, before mobile
   (design/styles.css order).
   ============================================================= */

/* ---------- Page wrapper ---------- */
.pg {
  background: var(--paper);
}
.pg-wrap {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* ---------- Page hero (title banner) ---------- */
.pg-hero {
  border-bottom: 1px solid var(--line);
  background: var(--paper);
}
.pg-hero.tinted { background: var(--paper-2); }
.pg-hero-inner { padding-top: 40px; padding-bottom: 44px; }
.pg-hero .crumbs { padding: 0 0 18px; }
.pg-hero h1 {
  margin: 0;
  font-size: 48px; line-height: 1.04;
  letter-spacing: -0.025em; font-weight: 600;
  color: var(--ink); max-width: 18ch; text-wrap: balance;
}
.pg-hero .pg-hero-lede {
  margin: 18px 0 0;
  font-size: 17px; line-height: 1.55; color: var(--ink-2);
  max-width: 56ch;
}
.pg-hero-row {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 32px; flex-wrap: wrap;
}
.pg-hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* Dark variant for editorial pages */
.pg-hero.ink {
  background: var(--ink); border-bottom: none;
  position: relative; overflow: hidden;
}
.pg-hero.ink h1 { color: #fff; }
.pg-hero.ink .pg-hero-lede { color: rgba(255,255,255,0.82); }
.pg-hero.ink .crumbs,
.pg-hero.ink .crumbs a { color: rgba(255,255,255,0.7); }
.pg-hero.ink .eyebrow,
.pg-hero.ink .is-style-eyebrow { color: var(--heat-300); } /* eyebrow uses the is-style-eyebrow block style (default ink-3); accent it on the dark hero */
/* All page heroes are native core/cover: background image (useFeaturedImage on
   single-service.html, explicit url on pages + archive-service.html + the page-hero
   pattern) + navy customGradient overlay + full-bleed, carrying `.pg-hero ink`.
   Inside sits the `.pg-wrap pg-hero-inner` group (flow) — it owns the centred 1192
   reading column, gutter and vertical padding, and its LEFT-aligned flow keeps the
   crumbs / eyebrow / title / lede on one left edge (a constrained cover would instead
   auto-centre max-width children like h1/lede). The .pg-hero.ink typography above
   still applies, and the Site Editor paints the image + gradient natively → editor
   == front. (The retired .pg-hero-photo absolute-image + ::after-gradient layer was
   replaced by the cover's own background + customGradient — same navy stops.) */
.pg-hero.wp-block-cover { min-height: unset; }
.pg-hero.ink .pg-hero-inner { position: relative; z-index: 1; padding-top: 64px; padding-bottom: 68px; }
/* Service hero (dark), desktop: stack the CTA under the lede. As a flex-end
   button on the right of a tall text block it read as "hanging in the air"; and
   the copy was capped at 56ch — narrower than the body column — so widen it to a
   normal reading measure. (≤720 keeps the mobile container-query stack.) */
@media (min-width: 721px) {
  .pg-hero.ink .pg-hero-lede { max-width: 820px; }
  /* Service body: widen the reading column (was ~630px — cramped). Widen the
     pg-article grid track and let the seed's inner pg-wrap fill it (drop its 24px
     gutter + 760 content cap) so text and media use the full 820px width. */
  .single-service .entry-content.pg-article { grid-template-columns: minmax(0, 1fr) minmax(0, var(--container)) minmax(0, 1fr); }
  /* svc-cols fills the wide container; the card page's masonry grid goes full
     width (its intro, if any, stays readable). svc-flow keeps its 760 measure. */
  .single-service .entry-content .pg-wrap.svc-cols > * { max-width: none; }
  .single-service .entry-content .pg-wrap.svc-cardpage > .svc-cards { max-width: none; }
  .single-service .entry-content .pg-wrap.svc-newspage > .svc-news { max-width: none; }
  .single-service .entry-content .pg-wrap.svc-zzwrap > * { max-width: none; }
  .single-service .entry-content .pg-wrap.svc-readwrap > .svc-read-band { max-width: none; }
}

/* ---------- Service intro (migrated from old /teenused/ Elementor intro) ---------- */
.svc-intro-lead { margin: 0; max-width: 820px; font-size: 18px; line-height: 1.6; color: var(--ink); }
.svc-intro-cols { gap: 44px; align-items: flex-start; }
.svc-intro-list { margin: 0; }
.svc-intro-list li { font-size: 15px; }
.svc-intro-img { margin: 0; }
.svc-intro-img img { display: block; width: 100%; height: auto; border-radius: 12px; }

/* ---------- Service price list (Teenuste hinnakiri) ---------- */
.pricelist { background: var(--paper-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
/* solo price page (/lisatoode-hinnakiri/) — hero already titles it, so no section
   heading; constrain the table (not the container) so it stays left-aligned with
   the hero content edge while keeping name↔price close, not a sparse full-width gap. */
.pricelist-solo .pg-pricetable,
.pricelist-solo .pricelist-notes { max-width: 900px; }
.pricelist-title { margin: 0; font-size: 28px; font-weight: 600; letter-spacing: -0.02em; color: var(--ink); }
.pricelist-lead { margin: 12px 0 0; max-width: 640px; font-size: 15px; line-height: 1.6; color: var(--ink-2); }
.pg-pricetable { margin: 24px 0 0; width: 100%; overflow-x: auto; }
.pg-pricetable table { width: 100%; border-collapse: collapse; font-size: 15px; background: transparent; }
.pg-pricetable td, .pg-pricetable th { border: 0; } /* reset core wp-block-table cell borders */
.pg-pricetable thead th { text-align: left; font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-3); padding: 0 16px 12px 0; border-bottom: 2px solid var(--line-2); }
.pg-pricetable th:nth-child(n+2), .pg-pricetable td:nth-child(n+2) { text-align: right; white-space: nowrap; width: 1%; }
.pg-pricetable tbody td { padding: 13px 16px 13px 0; border-bottom: 1px solid var(--line); color: var(--ink-2); line-height: 1.45; vertical-align: top; transition: background 0.12s; }
.pg-pricetable tbody tr:hover td { background: rgba(200,34,43,0.05); }
.pg-pricetable tbody td:first-child { color: var(--ink); padding-right: 24px; }
.pg-pricetable td:nth-child(n+2) { font-variant-numeric: tabular-nums; font-weight: 500; color: var(--ink); }
.pg-pricetable em { font-style: normal; font-size: 13px; color: var(--ink-3); }
/* Accent: "Lepinguline klient" (contract) is the member / soodushind rate — mark
   that column in brand red so the table reads with intent instead of a grey wall.
   Regular-client prices stay ink for contrast; objektipõhine stays muted. Red is
   used as a purposeful signal (the better rate), not decoration. */
.pg-pricetable th:nth-child(2) { color: var(--brand-500); }
.pg-pricetable td:nth-child(2) { color: var(--brand-500); font-weight: 600; }
.pg-pricetable td:nth-child(2) em { color: var(--ink-3); font-weight: 400; }
.pricelist .is-style-eyebrow { color: var(--brand-500); }
.pricelist-notes { margin-top: 18px; }
.pricelist-note { margin: 0; font-size: 13px; line-height: 1.5; color: var(--ink-3); }
.pricelist-note a { color: var(--brand-500); text-decoration: none; }
.pricelist-note a:hover { text-decoration: underline; }

/* ---------- Info pages (migrated): testimonials, fineprint, 3-col price ---------- */
/* Reviews slider (homepage) — Query Loop over the `review` CPT, scroll-snap track */
.pg-rev-slider { background: var(--paper-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.pg-rev-head { gap: 24px; }
.pg-rev-title { margin: 0; font-size: 30px; font-weight: 600; letter-spacing: -0.02em; color: var(--ink); }
.pg-rev-arrows { margin: 0; gap: 8px; }
.pg-rev-arrows .wp-block-button__link {
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; padding: 0; border-radius: 999px; box-shadow: none;
  background: var(--white); color: var(--ink); border: 1px solid var(--line-2);
  font-size: 20px; line-height: 1; transition: border-color var(--t-fast), color var(--t-fast);
}
.pg-rev-arrows .wp-block-button__link:hover { background: var(--white); border-color: var(--brand-500); color: var(--brand-500); }
.pg-rev-arrows .wp-block-button.is-disabled { opacity: 0.3; pointer-events: none; }
/* gap from the head (title + arrows) down to the cards — beat the group block-gap */
.pg-rev-slider .pg-rev-query { margin-top: 40px; }
/* track = the post-template <ul> */
.pg-rev-track {
  display: flex; flex-wrap: nowrap; align-items: stretch; gap: 24px; overflow-x: auto; list-style: none;
  margin: 0; padding: 0 0 4px;
  scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; -ms-overflow-style: none;
}
.pg-rev-track::-webkit-scrollbar { display: none; }
/* Projects carousel (homepage) — same scroll-snap track + arrows, driven by the
   shared slider JS (review-slider.js inits .pg-proj-slider too, no autoplay). */
.pg-proj-arrows { margin: 0; gap: 8px; }
.pg-proj-arrows .wp-block-button__link {
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; padding: 0; border-radius: 999px; box-shadow: none;
  background: var(--white); color: var(--ink); border: 1px solid var(--line-2);
  font-size: 20px; line-height: 1; transition: border-color var(--t-fast), color var(--t-fast);
}
.pg-proj-arrows .wp-block-button__link:hover { border-color: var(--brand-500); color: var(--brand-500); }
.pg-proj-arrows .wp-block-button.is-disabled { opacity: 0.3; pointer-events: none; }
.pg-proj-track {
  display: flex; flex-wrap: nowrap; align-items: stretch; gap: 20px; overflow-x: auto; list-style: none;
  margin: 32px 0 0; padding: 0 0 4px;
  scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; -ms-overflow-style: none;
}
.pg-proj-track::-webkit-scrollbar { display: none; }
.pg-proj-track > li { flex: 0 0 340px; max-width: 340px; margin: 0; scroll-snap-align: start; }
@media (max-width: 600px) { .pg-proj-track > li { flex-basis: 82vw; max-width: 82vw; } }
/* card = each review <li> — all equal height (align-items:stretch), author pinned bottom */
.pg-rev-track > li {
  flex: 0 0 360px; max-width: 360px; margin: 0; scroll-snap-align: start;
  display: flex; flex-direction: column;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-3, 12px);
  padding: 20px 24px 20px;
}
.pg-review-q { flex: 1 1 auto; margin: 0; padding: 0; }
/* big decorative quote mark above the text */
.pg-review-q::before {
  content: "\201C"; display: block; font-family: Georgia, "Times New Roman", serif;
  font-size: 44px; line-height: 0.6; color: var(--brand-500); margin: 0 0 6px;
}
.pg-review-q p {
  margin: 0; font-size: 15px; line-height: 1.6; color: var(--ink-2);
  /* keep quotes to a sensible length — full quote stays in the CPT/admin */
  display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden;
}
.pg-review-a { margin: 16px 0 0; font-size: 13px; font-weight: 600; color: var(--ink); }
.pg-review-a::before { content: "— "; color: var(--ink-3); }
@media (max-width: 640px) {
  .pg-rev-track > li { flex-basis: 84%; max-width: 84%; }
  .pg-rev-arrows { display: none; }
}

/* legal fine print under financing terms */
.pg-article .pg-fineprint { font-size: 12px; line-height: 1.55; color: var(--ink-3); margin: 8px 0 0; }
.pg-article .wp-block-separator.is-style-wide { margin: 28px 0 20px; border-top-color: var(--line); opacity: 1; }

/* 3-col lisatööde price table — unit column muted (override the services red accent) */
.pg-pricetable-3 th:nth-child(2), .pg-pricetable-3 td:nth-child(2) { color: var(--ink-3); font-weight: 400; }
.pg-pricetable-3 th:nth-child(3) { color: var(--ink-3); }
.pg-pricetable-3 td:nth-child(3) { color: var(--brand-500); font-weight: 600; }
/* Full-width: this 3-col table fills the whole 1240 content container (like the
   title / lead / notes), overriding the generic 900px cap. */
.pricelist-solo .pg-pricetable-3 { max-width: none; }
/* Price flush to the table's right edge — the name column is flush-left (no cell
   padding), so drop the last column's trailing 16px right padding for symmetry. */
.pg-pricetable-3 th:last-child, .pg-pricetable-3 td:last-child { padding-right: 0; }

/* ---------- Generic intro / lede block ---------- */
.pg-lede-block { padding: 56px 0; }
.pg-lede-block .pg-lede-grid {
  display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: 56px; align-items: start;
}
.pg-lede-block h2 {
  margin: 0; font-size: 32px; letter-spacing: -0.015em;
  font-weight: 600; color: var(--ink); text-wrap: balance;
}
.pg-lede-block p { margin: 16px 0 0; font-size: 16px; line-height: 1.65; color: var(--ink-2); }
.pg-aside-card {
  background: var(--paper-2); border: 1px solid var(--line);
  border-radius: var(--r-3); padding: 24px;
}
.pg-aside-card .k {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--ink-4); font-weight: 500;
}
.pg-aside-card dl { margin: 14px 0 0; display: flex; flex-direction: column; }
.pg-aside-card dl > div {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 11px 0; border-bottom: 1px solid var(--line);
}
.pg-aside-card dl > div:last-child { border-bottom: none; }
.pg-aside-card dt { font-size: 14px; color: var(--ink-2); }
.pg-aside-card dd { margin: 0; font-size: 14px; color: var(--ink); font-weight: 500; font-family: var(--font-mono); }

/* ---------- Services grid (overview variant A: editorial cards) ---------- */
.pg-svc-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}
.pg-svc-card {
  display: grid; grid-template-columns: 160px minmax(0, 1fr);
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--r-3); overflow: hidden; cursor: pointer;
  transition: border-color var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-out);
}
.pg-svc-card:hover { border-color: var(--ink-3); transform: translateY(-2px); }
.pg-svc-card .pg-svc-ic {
  background: var(--ink); color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.pg-svc-card.heat .pg-svc-ic { background: var(--heat-500); }
.pg-svc-card .pg-svc-body { padding: 22px 24px; display: flex; flex-direction: column; gap: 8px; }
.pg-svc-card .pg-svc-tag {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--ink-4); font-weight: 500;
}
.pg-svc-card h3 { margin: 0; font-size: 20px; font-weight: 600; color: var(--ink); letter-spacing: -0.01em; }
.pg-svc-card p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--ink-2); }
.pg-svc-card .pg-svc-foot {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--line);
}
.pg-svc-card .pg-svc-price { font-family: var(--font-mono); font-size: 14px; font-weight: 600; color: var(--ink); }
.pg-svc-card .pg-svc-cta { font-size: 13px; font-weight: 500; color: var(--brand-500); }

/* ---------- Services index (overview variant B: ledger rows) ---------- */
.pg-svc-index {
  border-top: 1px solid var(--ink);
}
.pg-svc-row {
  display: grid; grid-template-columns: 64px minmax(0, 2fr) minmax(0, 3fr) auto;
  gap: 24px; align-items: center;
  padding: 26px 8px; border-bottom: 1px solid var(--line);
  cursor: pointer; transition: background var(--t-fast), padding var(--t-base) var(--ease-out);
}
.pg-svc-row:hover { background: var(--paper-2); padding-left: 16px; }
.pg-svc-row .pg-svc-no { font-family: var(--font-mono); font-size: 13px; color: var(--ink-4); }
.pg-svc-row .pg-svc-name { font-size: 22px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); }
.pg-svc-row .pg-svc-name .pg-svc-sub { display: block; font-size: 12px; font-weight: 400; color: var(--ink-3); margin-top: 4px; font-family: var(--font-mono); }
.pg-svc-row .pg-svc-desc { font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.pg-svc-row .pg-svc-arrow { color: var(--ink-3); display: flex; align-items: center; gap: 12px; }
.pg-svc-row .pg-svc-arrow .pg-svc-price { font-family: var(--font-mono); font-size: 13px; color: var(--ink-2); }

/* ---------- Includes / feature list (checkmarks) ---------- */
.pg-checklist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.pg-checklist li { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start; font-size: 15px; color: var(--ink-2); line-height: 1.5; }
.pg-checklist li .ic { color: var(--brand-500); margin-top: 2px; }
/* Native wp:list.pg-checklist has no .ic span (seeded/migrated content) — draw the
   brand checkmark as the first grid cell via ::before so items get a real marker. */
.pg-checklist li::before {
  content: ""; width: 18px; height: 18px; margin-top: 1px; flex: 0 0 auto; background: var(--brand-500);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / contain no-repeat;
}
.pg-checklist li > .ic ~ * { grid-column: 2; } /* if an explicit .ic is present, keep text in col 2 */
.pg-checklist li > .ic { display: none; } /* the ::before now provides the marker; hide any legacy .ic to avoid doubling */

/* ---------- Numbered steps band ---------- */
.pg-steps {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
  border: 1px solid var(--line); border-radius: var(--r-3); overflow: hidden;
  background: var(--white);
}
.pg-step { padding: 28px 24px; border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: 10px; }
.pg-step:last-child { border-right: none; }
.pg-step .pg-step-no {
  font-family: var(--font-mono); font-size: 12px; font-weight: 500;
  width: 28px; height: 28px; border-radius: 999px; border: 1px solid var(--ink);
  display: inline-flex; align-items: center; justify-content: center; color: var(--ink);
}
.pg-step h4 { margin: 0; font-size: 16px; font-weight: 600; color: var(--ink); }
.pg-step p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--ink-2); }

/* ---------- Projects: filter bar + grid ---------- */
.pg-filterbar { display: flex; gap: 8px; flex-wrap: wrap; padding: 24px 0; }
.pg-chip {
  font: inherit; font-size: 13px; font-weight: 500;
  padding: 8px 16px; border-radius: 999px;
  border: 1px solid var(--line-2); background: var(--white); color: var(--ink-2);
  cursor: pointer; transition: all var(--t-fast);
  text-decoration: none; /* chips render as <a> (progressive-enhancement links) */
}
.pg-chip:hover { border-color: var(--ink-3); color: var(--ink); text-decoration: none; }
.pg-chip.active { background: var(--ink); border-color: var(--ink); color: #fff; }
.pg-proj-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; padding-bottom: 8px; }

/* ---------- Project case detail ---------- */
.pg-case-hero {
  position: relative; border-radius: var(--r-4); overflow: hidden;
  aspect-ratio: 21 / 9; background: var(--ink);
}
.pg-case-hero img { width: 100%; height: 100%; object-fit: cover; }
.pg-case-hero .pg-case-badge {
  position: absolute; top: 18px; left: 18px;
  background: var(--ink); color: #fff; font-size: 12px; font-weight: 500;
  padding: 6px 12px; border-radius: var(--r-1);
}
.pg-case-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 48px; align-items: start; padding: 48px 0; }
.pg-case-block + .pg-case-block { margin-top: 28px; }
.pg-case-block h2 { margin: 0 0 10px; font-size: 22px; font-weight: 600; color: var(--ink); letter-spacing: -0.01em; }
.pg-case-block p { margin: 0; font-size: 16px; line-height: 1.65; color: var(--ink-2); }
.pg-case-specs {
  background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--r-3);
  padding: 8px 22px; position: sticky; top: 92px;
}
.pg-case-specs > div { display: flex; justify-content: space-between; gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--line); }
.pg-case-specs > div:last-child { border-bottom: none; }
.pg-case-specs dt { font-size: 13px; color: var(--ink-2); }
.pg-case-specs dd { margin: 0; font-size: 14px; color: var(--ink); font-weight: 600; font-family: var(--font-mono); }

.pg-quote {
  border-left: 3px solid var(--heat-500); padding: 8px 0 8px 24px; margin: 32px 0;
}
.pg-quote p { margin: 0; font-size: 22px; line-height: 1.4; color: var(--ink); font-weight: 500; letter-spacing: -0.01em; text-wrap: pretty; }
.pg-quote .pg-quote-who { display: block; margin-top: 12px; font-size: 13px; color: var(--ink-3); font-weight: 400; font-family: var(--font-mono); }

.pg-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.pg-gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-2); border: 1px solid var(--line); }

/* ---------- Blog ---------- */
.pg-blog-featured {
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 0; border: 1px solid var(--line); border-radius: var(--r-4); overflow: hidden;
  background: var(--white); cursor: pointer; margin-bottom: 36px;
}
.pg-blog-featured .pg-bf-photo { position: relative; min-height: 320px; }
/* WP wraps the featured image in <figure class="wp-block-post-featured-image"><a>;
   the design assumed a bare <img>. Make the figure + link fill the position:relative
   .pg-bf-photo so the (sticky) featured image actually shows. */
.pg-blog-featured .pg-bf-photo .wp-block-post-featured-image { position: absolute; inset: 0; margin: 0; }
.pg-blog-featured .pg-bf-photo .wp-block-post-featured-image a { display: block; width: 100%; height: 100%; }
.pg-blog-featured .pg-bf-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pg-blog-featured .pg-bf-body { padding: 40px 40px; display: flex; flex-direction: column; justify-content: center; gap: 14px; }
.pg-blog-featured h2 { margin: 0; font-size: 30px; line-height: 1.12; letter-spacing: -0.02em; font-weight: 600; color: var(--ink); text-wrap: balance; }
.pg-blog-featured p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--ink-2); }
.pg-blog-meta { display: flex; align-items: center; gap: 12px; font-size: 12px; color: var(--ink-3); font-family: var(--font-mono); }
.pg-blog-meta .pg-cat { color: var(--brand-500); font-weight: 500; }
.pg-blog-meta .sep { color: var(--line-3); }

.pg-blog-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.pg-blog-card { display: flex; flex-direction: column; cursor: pointer; }
.pg-blog-card .pg-bc-photo { aspect-ratio: 16 / 10; border-radius: var(--r-2); overflow: hidden; border: 1px solid var(--line); margin-bottom: 14px; }
.pg-blog-card .pg-bc-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 480ms var(--ease-out); }
.pg-blog-card:hover .pg-bc-photo img { transform: scale(1.04); }
.pg-blog-card h3 { margin: 8px 0 6px; font-size: 18px; line-height: 1.25; font-weight: 600; color: var(--ink); letter-spacing: -0.01em; text-wrap: pretty; }
.pg-blog-card p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--ink-2); }

/* ---------- Article ---------- */
.pg-article { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 680px) minmax(0, 1fr); padding: 48px 0 64px; }
.pg-article > * { grid-column: 2; }
.pg-article p { margin: 0 0 20px; font-size: 17px; line-height: 1.7; color: var(--ink-2); }
.pg-article h2 { margin: 36px 0 14px; font-size: 24px; font-weight: 600; color: var(--ink); letter-spacing: -0.01em; }
.pg-article ul { margin: 0 0 24px; padding-left: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.pg-article ul li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; font-size: 16px; line-height: 1.55; color: var(--ink-2); }
.pg-article ul li .ic { color: var(--brand-500); margin-top: 3px; }
/* Standard Gutenberg lists in migrated article bodies. The icon-grid above is
   only for theme-authored lists whose items carry an .ic bullet; plain
   wp-block-list items have none, so that grid mangled them (each <strong> got
   forced into the 22px icon column). Render icon-less lists as normal lists.
   EXCLUDE .pg-checklist: it is a deliberately-styled icon-less list (flex column
   + ::before checkmarks, centered inside svc-bands). Without the guard this
   fallback (specificity 0,2,1) outranks the svc-band centering rule
   `.pg-article .svc-band > *` (0,2,0), stripping the checklist's margin-inline:auto
   so it broke full-width to the left while headings/paragraphs stayed centered. */
.pg-article ul:not(:has(.ic)):not(.pg-checklist),
.pg-article ol { display: block; padding-left: 1.5em; margin: 0 0 24px; }
.pg-article ul:not(:has(.ic)):not(.pg-checklist) { list-style: disc; }
.pg-article ol { list-style: decimal; }
.pg-article ul:not(:has(.ic)):not(.pg-checklist) > li,
.pg-article ol > li { display: list-item; margin: 0 0 8px; font-size: 17px; line-height: 1.7; color: var(--ink-2); }
.pg-article ul:not(:has(.ic)):not(.pg-checklist) li::marker,
.pg-article ol li::marker { color: var(--ink-3); }
.pg-article ul:not(:has(.ic)):not(.pg-checklist) ul { list-style: circle; margin: 8px 0 0; }
.pg-article ul:not(:has(.ic)):not(.pg-checklist) ul > li { margin-bottom: 4px; }
.pg-article .pg-article-quote { margin: 32px 0; padding: 4px 0 4px 24px; border-left: 3px solid var(--heat-500); font-size: 22px; line-height: 1.4; color: var(--ink); font-weight: 500; letter-spacing: -0.01em; }
.pg-article-lead { font-size: 19px !important; color: var(--ink) !important; line-height: 1.6 !important; }
/* Rhythm extensions for migrated long-form content (service/blog bodies). The
   handoff article layer only specced h2; real content also uses h3, in-body
   images and a leading block — style them proportionally so the vertical rhythm
   stays even instead of falling back to browser defaults. */
.pg-article > :first-child { margin-top: 0; }
.pg-article h3 { margin: 30px 0 10px; font-size: 19px; font-weight: 600; line-height: 1.3; color: var(--ink); letter-spacing: -0.01em; }
.pg-article figure, .pg-article .wp-block-image { margin: 4px 0 28px; }
.pg-article figure img, .pg-article .wp-block-image img { height: auto; max-width: 100%; border-radius: 10px; }
/* service body: native core/columns (text | photos). Figures fill the media
   column; core/columns stacks natively on mobile. */
.pg-article .svc-body-cols { margin: 4px 0 0; }
/* photo rail sticks alongside long text so it never leaves an empty column */
.pg-article .svc-body-media { position: sticky; top: 88px; align-self: flex-start; }
@media (max-width: 781px) { .pg-article .svc-body-media { position: static; } }
.pg-article .sk-svc-figure { margin: 0 0 20px; }
.pg-article .svc-body-media .sk-svc-figure:last-child { margin-bottom: 0; }
.pg-article .sk-svc-figure img { max-width: 100%; height: auto; }
/* content-heavy pages: section cards in a 2-column masonry (CSS columns). Each
   card is a self-contained section; text inside stays a readable width, and the
   sections distribute across the full width — far shorter to scroll. */
.pg-article .svc-cards { columns: 2; column-gap: 28px; margin-top: 8px; }
.pg-article .svc-card { break-inside: avoid; margin: 0 0 28px; padding: 22px 26px 24px; background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--r-3); }
.pg-article .svc-card > :first-child { margin-top: 0; }
.pg-article .svc-card h2, .pg-article .svc-card h3 { margin: 0 0 10px; font-size: 18px; letter-spacing: -0.01em; }
.pg-article .svc-card p { font-size: 15px; margin: 0 0 12px; line-height: 1.6; }
.pg-article .svc-card p:last-child { margin-bottom: 0; }
.pg-article .svc-card ul { margin: 12px 0; }
.pg-article .svc-card ul:last-child { margin-bottom: 0; }
.pg-article .svc-card ul li { font-size: 14px; }
.pg-article .svc-card .sk-svc-figure { margin: 14px 0 0; }
.pg-article .svc-card .sk-svc-figure img { max-width: 100%; height: auto; border-radius: 8px; }
@media (max-width: 781px) { .pg-article .svc-cards { columns: 1; } }

/* content-heavy pages, newspaper variant: full-width flow in 2 balanced
   columns; real headings span both columns as full-width section dividers. */
.pg-article .svc-news { columns: 2; column-gap: 44px; }
.pg-article .svc-news > h2, .pg-article .svc-news > h3 { column-span: all; margin: 26px 0 14px; }
.pg-article .svc-news > :first-child { margin-top: 0; }
.pg-article .svc-news > h2 { border-top: 1px solid var(--line); padding-top: 22px; }
.pg-article .svc-news > h2:first-child { border-top: 0; padding-top: 0; }
.pg-article .svc-news p { break-inside: avoid; margin: 0 0 14px; }
.pg-article .svc-news .pg-checklist { break-inside: avoid; }
.pg-article .svc-news .sk-svc-figure { break-inside: avoid; margin: 6px 0 16px; }
.pg-article .svc-news .sk-svc-figure img { max-width: 100%; height: auto; border-radius: 8px; }
@media (max-width: 781px) { .pg-article .svc-news { columns: 1; } }

/* content-heavy pages, zigzag variant: alternating media/text rows, full-width.
   image side flips each row (is-media-left / is-media-right). */
.pg-article .svc-zz { align-items: stretch; margin: 0; }
/* explicit gap between rows — the group blockGap is zeroed by the reset above
   (its :where() selector has 0 specificity), so set the separation here. */
.pg-article .svc-zzwrap > .svc-zz + .svc-zz { margin-top: clamp(80px, 9vw, 132px); }
.pg-article .svc-zz > .wp-block-column { margin: 0; align-self: stretch; }
.pg-article .svc-zz .wp-block-column > :first-child { margin-top: 0; }
.pg-article .svc-zz .wp-block-column > :last-child { margin-bottom: 0; }
/* lighter, tighter type inside rows — snug within a row, roomy between rows */
.pg-article .svc-zz h2 { font-size: 22px; margin: 0 0 12px; }
.pg-article .svc-zz h3 { font-size: 17px; font-weight: 600; margin: 0 0 12px; letter-spacing: -0.005em; }
.pg-article .svc-zz p { font-size: 15px; line-height: 1.65; margin: 0 0 11px; }
.pg-article .svc-zz ul { margin: 11px 0; }
.pg-article .svc-zz ul li { font-size: 15px; line-height: 1.5; }
/* lead-in lines ("Teostame:", "Kontrollitakse:") become bold labels that sit
   apart above their list — breaks the section into scannable sub-groups. */
.pg-article .svc-zz .svc-lead { font-weight: 600; color: var(--ink); font-size: 15px; margin: 24px 0 8px; }
.pg-article .svc-zz .svc-lead:first-child { margin-top: 0; }
.pg-article .svc-zz .wp-block-column > .svc-lead:first-child { margin-top: 0; }
/* checklists: 2 columns (don't inflate height) inside a soft panel so each list
   reads as its own block rather than blending into the surrounding copy. */
.pg-article .svc-zz .pg-checklist { display: block; columns: 2; column-gap: 30px; gap: 0; margin: 8px 0; padding: 16px 18px; background: var(--paper-2); border-radius: var(--r-2); }
.pg-article .svc-zz .pg-checklist li { break-inside: avoid; margin: 0 0 9px; }
.pg-article .svc-zz .pg-checklist li:last-child { margin-bottom: 0; }
/* media rail: full-height column, image sticks so tall text rows never leave a
   dead gap beside a short photo. */
.pg-article .svc-zz-media { align-self: stretch; }
.pg-article .svc-zz-figure { position: sticky; top: 96px; margin: 0; }
.pg-article .svc-zz-figure img { width: 100%; height: auto; border-radius: var(--r-3); display: block; }
@media (max-width: 781px) {
  .pg-article .svc-zz.is-media-right .svc-zz-media { order: -1; }
  .pg-article .svc-zz-figure { position: static; }
  .pg-article .svc-zz-figure img { max-height: 340px; object-fit: cover; }
  .pg-article .svc-zz .pg-checklist { columns: 1; }
}

/* content-heavy pages, reader variant: one linear column (no eye-jumping),
   full-width photo bands separate sections, single-column checklists. */
.pg-article .svc-readwrap > .svc-read-band { margin-top: clamp(52px, 6vw, 92px); margin-bottom: 4px; }
.pg-article .svc-readwrap > .svc-read-band:first-child { margin-top: 22px; }
.pg-article .svc-read-band img { width: 100%; max-height: 300px; object-fit: cover; border-radius: var(--r-3); display: block; }
.pg-article .svc-readwrap > h2 { font-size: 25px; margin: 18px 0 10px; }
.pg-article .svc-readwrap > h3 { font-size: 20px; margin: 18px 0 10px; }
.pg-article .svc-readwrap p { font-size: 16px; line-height: 1.7; margin: 0 0 12px; }
/* lead-in lines become bold labels above their list */
.pg-article .svc-readwrap .svc-lead { font-weight: 600; color: var(--ink); font-size: 16px; margin: 22px 0 8px; }
/* checklists: single column (read straight down), soft panel to set them apart */
.pg-article .svc-readwrap .pg-checklist { margin: 8px 0 6px; padding: 16px 20px; background: var(--paper-2); border-radius: var(--r-2); gap: 10px; }
.pg-article .svc-readwrap .pg-checklist li { font-size: 15px; }

/* ---------- Service bands (NATIVE, editor == front) ----------
   Service /teenused/ pages render as alternating full-width bands. Each band is a
   core group with `align:full` (full-bleed, honoured by the Site Editor too) and a
   `constrained` inner layout at 820px (WP centres the children — no margin hack).
   Every rule below is scoped by the band's OWN classes (.svc-band / .pg-checklist /
   .svc-lead), NEVER by an ancestor that exists only on the front (.pg-article).
   pages.css is in add_editor_style, so the editor loads the same rules → 1:1.
   The service Post Content carries `.pg-service` (constrained), separate from the
   blog's `.pg-article` grid, which is left untouched. */
.svc-band { padding-block: clamp(40px, 5vw, 68px); padding-inline: var(--gutter); }
.svc-band.svc-band-alt { background: var(--paper-2); }
.svc-band > :first-child { margin-block-start: 0; }
/* Typography is fully self-specified (no reliance on a .pg-article base cascade). */
.svc-band h2 { font-size: var(--fs-xl); font-weight: 600; color: var(--ink); letter-spacing: -0.01em; margin-block: 0 12px; }
.svc-band h3 { font-size: var(--fs-lg); font-weight: 600; line-height: 1.3; color: var(--ink); letter-spacing: -0.01em; margin-block: 0 12px; }
.svc-band p { font-size: var(--fs-base); line-height: var(--lh-relaxed); color: var(--ink-2); margin-block: 0 12px; }
.svc-band .svc-lead { font-weight: 600; color: var(--ink); font-size: var(--fs-base); margin-block: 22px 8px; }
.svc-band .pg-checklist { margin-block: 8px 6px; gap: 10px; }
.svc-band .pg-checklist li { font-size: var(--fs-base); }
.svc-band .wp-block-image { margin-block: 4px 16px; }
.svc-band .wp-block-image img { width: 100%; max-height: 300px; object-fit: cover; border-radius: var(--r-3); display: block; }

.pg-article figure figcaption { margin-top: 8px; font-size: 13px; color: var(--ink-3); line-height: 1.5; }

/* ---------- Contact ---------- */
.pg-contact-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; padding: 56px 0; align-items: start; }
.pg-contact-form { display: flex; flex-direction: column; gap: 16px; }
.pg-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
/* Form field primitives — ported from shop-screens.css .field/.input; the theme's
   .input-text rules are WC-scoped, so the content-page contact form was unstyled. */
.pg-contact-form .field { display: flex; flex-direction: column; gap: 6px; }
.pg-contact-form .field label { font-size: 12px; color: var(--ink-2); font-weight: 500; }
.pg-contact-form .input {
  font: inherit; font-size: 14px; font-family: var(--font-sans);
  padding: 11px 12px; border: 1px solid var(--line-2); border-radius: 4px;
  background: #fff; color: var(--ink); width: 100%; box-sizing: border-box;
  outline: none; transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.pg-contact-form .input:focus { border-color: var(--brand-500); box-shadow: 0 0 0 4px rgba(11,72,132,0.12); }
.pg-contact-form textarea.input { resize: vertical; min-height: 80px; }
/* Consent checkbox row */
/* Consent row — CF7 nests the checkbox + label deep inside .wpcf7-acceptance >
   .wpcf7-list-item > label, so reset the wrapper spans and make that inner label
   the flex row (checkbox ⟷ text + privacy link). Shared by both CF7 forms. */
.pg-form-consent { display: block; }
.pg-form-consent .wpcf7-form-control-wrap,
.pg-form-consent .wpcf7-acceptance,
.pg-form-consent .wpcf7-list-item { display: block; margin: 0; }
.pg-form-consent .wpcf7-list-item > label { display: flex; gap: 10px; align-items: flex-start; margin: 0; cursor: pointer; font-size: 13.5px; font-weight: 400; color: var(--ink-2); line-height: 1.55; }
.pg-form-consent input[type="checkbox"] { flex: 0 0 auto; width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--brand-500); cursor: pointer; }
.pg-form-consent a { color: var(--brand-600); font-weight: 500; text-decoration: underline; text-underline-offset: 2px; }
.pg-form-consent a:hover { color: var(--brand-500); }
/* Success card — hidden until the submit round-trip lands on #saadetud */
.pg-contact-success { display: none; gap: 14px; align-items: flex-start; }
.pg-contact-success:target { display: flex; }
.pg-contact-success:target ~ .pg-contact-form { display: none; }
.pg-contact-success .ok { color: var(--success); margin-top: 2px; flex: 0 0 auto; }
.pg-contact-success strong { display: block; font-size: 16px; margin-bottom: 4px; color: var(--ink); }
.pg-contact-success span { font-size: 14px; color: var(--ink-2); }
/* Contact Form 7 output → pg design. The [contact-form-7] shortcode sits in a
   .pg-contact-form group; its controls carry class:input (styled above). These
   map CF7's own wrappers, validation tips and response banner to the design. */
.pg-contact-form .wpcf7-form { display: flex; flex-direction: column; gap: 16px; }
.pg-contact-form .wpcf7-form-control-wrap { display: block; }
.pg-contact-form .wpcf7-not-valid-tip { color: var(--danger); font-size: 12px; margin-top: 4px; }
.pg-contact-form .wpcf7-spinner { margin: 0 0 0 8px; }
.pg-contact-form .wpcf7-response-output { margin: 10px 0 0; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-2); font-size: 14px; }
.pg-contact-form .wpcf7-form.sent .wpcf7-response-output { border-color: var(--success); background: var(--success-bg); color: var(--success); }
.pg-contact-form .wpcf7-form.invalid .wpcf7-response-output,
.pg-contact-form .wpcf7-form.failed .wpcf7-response-output { border-color: var(--danger); background: var(--danger-bg); color: var(--danger); }
.pg-contact-info { display: flex; flex-direction: column; gap: 24px; }
.pg-contact-card { background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--r-3); padding: 24px; }
.pg-contact-card h3 { margin: 0 0 14px; font-size: 16px; font-weight: 600; color: var(--ink); }
.pg-contact-line { display: flex; align-items: center; gap: 12px; padding: 9px 0; font-size: 14px; color: var(--ink-2); }
.pg-contact-line svg { color: var(--brand-500); flex: 0 0 auto; }
/* native core/image icon (brand-coloured SVG) + paragraph text */
.pg-contact-line .wp-block-image { margin: 0; flex: 0 0 auto; line-height: 0; }
.pg-contact-line .wp-block-image img { display: block; width: 18px; height: 18px; }
.pg-contact-line p { margin: 0; font-size: 14px; color: var(--ink-2); }
.pg-contact-line a { color: var(--ink); }

/* ---------- Küsi pakkumist — detailed quote form (page-plain /kusi-pakkumist/)
   NB: own `pg-qform` namespace — do NOT reuse `.pg-quote` (that is the pull-quote
   with border-left + 22px <p>, which mangles form labels). CF7 autop is disabled
   in functions.php so fields render as authored (label above input). */
.pg-qform { padding-top: 52px; padding-bottom: 72px; }
.pg-qform-grid { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: 48px; align-items: start; }
.pg-qform-main { min-width: 0; }
.pg-qform-fields .wpcf7-form-control-wrap { display: block; }
/* section grouping — small-caps label + red accent bar, hairline divider */
.pg-qform-fields .pg-qsection { padding: 24px 0; border-top: 1px solid var(--line); }
.pg-qform-fields .pg-qsection:first-of-type { padding-top: 0; border-top: none; }
.pg-qform-fields .pg-qsection > * + * { margin-top: 14px; }
.pg-qform-fields .pg-qsection h3 { display: flex; align-items: center; gap: 9px; margin: 0; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink); }
.pg-qform-fields .pg-qsection h3::before { content: ""; width: 3px; height: 13px; border-radius: 2px; background: var(--brand-500); }
/* fields */
.pg-qform-fields .field { display: flex; flex-direction: column; gap: 7px; }
.pg-qform-fields .field label { font-size: 13px; font-weight: 500; color: var(--ink-2); }
.pg-qform-fields .input {
  width: 100%; padding: 11px 13px; font: inherit; font-size: 14px; color: var(--ink);
  background: var(--white); border: 1px solid var(--line-2); border-radius: var(--r-2);
  transition: border-color .15s, box-shadow .15s;
}
.pg-qform-fields .input:focus { outline: none; border-color: var(--brand-500); box-shadow: 0 0 0 4px rgba(200,34,43,0.12); }
.pg-qform-fields textarea.input { resize: vertical; min-height: 120px; }
.pg-qform-fields select.input { cursor: pointer; }
.pg-qform-fields .pg-form-row-3 { grid-template-columns: 1fr 1fr 1fr; }
/* interest / channel checkbox grids */
.pg-checkgrid .wpcf7-checkbox { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; }
.pg-checkgrid-source .wpcf7-checkbox { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.pg-checkgrid .wpcf7-list-item { margin: 0; }
.pg-checkgrid .wpcf7-list-item label { display: flex; align-items: center; gap: 9px; padding: 10px 13px; border: 1px solid var(--line); border-radius: var(--r-2); font-size: 13.5px; color: var(--ink-2); cursor: pointer; transition: border-color .15s, background .15s; }
.pg-checkgrid .wpcf7-list-item label:hover { border-color: var(--ink-3); }
.pg-checkgrid .wpcf7-list-item label:has(input:checked) { border-color: var(--brand-500); background: var(--brand-50); color: var(--ink); }
.pg-checkgrid input[type="checkbox"] { accent-color: var(--brand-500); width: 16px; height: 16px; flex: 0 0 auto; margin: 0; }
/* file input */
.pg-qform-fields input[type="file"].input { padding: 9px 13px; font-size: 13px; color: var(--ink-2); cursor: pointer; }
.pg-qform-fields input[type="file"].input::file-selector-button { margin-right: 12px; padding: 7px 13px; font: inherit; font-size: 13px; font-weight: 500; color: var(--ink); background: var(--paper-2); border: 1px solid var(--line-2); border-radius: var(--r-pill); cursor: pointer; }
/* consent + submit + CF7 response */
.pg-qform-fields .pg-form-consent { margin: 22px 0 0; padding-top: 22px; border-top: 1px solid var(--line); }
.pg-qform-fields .wpcf7-form > .wpcf7-submit { margin-top: 18px; }
.pg-qform-fields .wpcf7-spinner { margin: 0 0 0 10px; }
.pg-qform-fields .wpcf7-not-valid-tip { color: var(--danger); font-size: 12px; margin-top: 4px; }
.pg-qform-fields .wpcf7-response-output { margin: 16px 0 0; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-2); font-size: 14px; }
.pg-qform-fields .wpcf7-form.sent .wpcf7-response-output { border-color: var(--success); background: var(--success-bg); color: var(--success); }
.pg-qform-fields .wpcf7-form.invalid .wpcf7-response-output,
.pg-qform-fields .wpcf7-form.failed .wpcf7-response-output { border-color: var(--danger); background: var(--danger-bg); color: var(--danger); }
/* aside — sticky trust + contact rail */
.pg-qform-aside { position: sticky; top: 96px; display: flex; flex-direction: column; gap: 16px; }
.pg-qform-aside .pg-contact-card h3 { margin: 0; font-size: 15px; }
.pg-qform-aside .pg-contact-card > * + * { margin-top: 12px; }
.pg-qform-aside .pg-contact-card h3 + * { margin-top: 16px; }
.pg-qform-tel { font-size: 20px; font-weight: 700; letter-spacing: -0.01em; }
.pg-qform-tel a { color: var(--ink); }
.pg-qform-tel + .muted { margin-top: 2px; }
.pg-qform-mail a { color: var(--brand-600); font-weight: 600; }
.pg-qform-aside .muted { font-size: 13px; color: var(--ink-3); }
@media (max-width: 900px) {
  .pg-qform-grid { grid-template-columns: 1fr; gap: 28px; }
  .pg-qform-aside { position: static; }
  .pg-qform { padding-top: 40px; padding-bottom: 56px; }
}
.pg-map {
  aspect-ratio: 16 / 9; border-radius: var(--r-3); overflow: hidden;
  border: 1px solid var(--line); background:
    repeating-linear-gradient(0deg, transparent, transparent 23px, rgba(11,72,132,0.06) 24px),
    repeating-linear-gradient(90deg, transparent, transparent 23px, rgba(11,72,132,0.06) 24px),
    var(--paper-2);
  position: relative; display: flex; align-items: center; justify-content: center;
}
.pg-map .pg-map-pin { display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--heat-500); }
.pg-map .pg-map-pin span { font-size: 12px; font-family: var(--font-mono); color: var(--ink-2); background: var(--white); padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line); }

/* ---------- FAQ ---------- */
.pg-faq-layout { display: grid; grid-template-columns: minmax(0, 240px) minmax(0, 1fr); gap: 56px; padding: 48px 0 64px; align-items: start; }
.pg-faq-nav { position: sticky; top: 92px; display: flex; flex-direction: column; gap: 4px; }
.pg-faq-nav p { margin: 0; } /* nav links are wp:paragraph-wrapped <a> */
.pg-faq-nav a { display: block; padding: 10px 14px; font-size: 14px; color: var(--ink-2); text-decoration: none; border-radius: var(--r-2); cursor: pointer; border-left: 2px solid transparent; }
.pg-faq-nav a:hover { background: var(--paper-2); color: var(--ink); }
.pg-faq-nav a.active { border-left-color: var(--brand-500); color: var(--ink); font-weight: 500; }
.pg-faq-group + .pg-faq-group { margin-top: 40px; }
/* anchor-link target offset: clear the sticky 72px header (+ air) when a nav link
   scrolls to a group, so its title isn't hidden under the header. */
.pg-faq-group { scroll-margin-top: 100px; }
.pg-faq-group h2 { margin: 0 0 8px; font-size: 22px; font-weight: 600; color: var(--ink); letter-spacing: -0.01em; }
/* FAQ = native core/accordion (wrapper className .pg-faq), mapped onto the design's
   flat list: hairline dividers, 17px question, and a +/× mask icon that rotates on
   open. The native heading glyph is hidden (font-size:0) in favour of the mask so
   the marker reads as × when open. The block's Interactivity API drives show/hide. */
.pg-faq.wp-block-accordion { display: block; }
.pg-faq .wp-block-accordion-item {
  border: 0; border-bottom: 1px solid var(--line); background: transparent; border-radius: 0;
}
.pg-faq .wp-block-accordion-heading { margin: 0; }
.pg-faq .wp-block-accordion-heading__toggle {
  width: 100%; gap: 16px; padding: 20px 0;
  font-family: var(--font-sans); font-size: 17px; font-weight: 500; color: var(--ink);
  background: transparent; border: 0; cursor: pointer; text-decoration: none;
  display: flex; align-items: center; justify-content: space-between;
  transition: color var(--t-base) var(--ease-out);
}
.pg-faq .wp-block-accordion-heading__toggle:hover,
.pg-faq .wp-block-accordion-heading__toggle:focus,
.pg-faq .wp-block-accordion-heading__toggle-title,
.pg-faq .wp-block-accordion-heading__toggle:hover .wp-block-accordion-heading__toggle-title,
.pg-faq .wp-block-accordion-heading__toggle:focus .wp-block-accordion-heading__toggle-title { text-decoration: none; }
.pg-faq .wp-block-accordion-heading__toggle-title { font: inherit; text-align: left; }
.pg-faq .wp-block-accordion-heading__toggle-icon {
  flex: 0 0 auto; font-size: 0; width: 20px; height: 20px; background: var(--ink-3);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cline x1='12' y1='5' x2='12' y2='19'/%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cline x1='12' y1='5' x2='12' y2='19'/%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform var(--t-base) var(--ease-out), background var(--t-base);
}
.pg-faq .is-open .wp-block-accordion-heading__toggle-icon { transform: rotate(45deg); background: var(--brand-500); }
.pg-faq .wp-block-accordion-panel { padding: 0 0 22px; }
.pg-faq .wp-block-accordion-panel :where(p) { margin: 0; font-size: 15px; line-height: 1.65; color: var(--ink-2); }
.pg-faq-item p { margin: 0; padding: 0 40px 22px 0; font-size: 15px; line-height: 1.65; color: var(--ink-2); }

/* ---------- About ---------- */
.pg-stats-band { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.pg-stat { padding: 32px 24px; border-right: 1px solid var(--line); }
.pg-stat:last-child { border-right: none; }
.pg-stat .num { font-size: 44px; line-height: 1; font-weight: 700; color: var(--ink); letter-spacing: -0.02em; font-family: var(--font-mono); }
.pg-stat .lbl { margin-top: 10px; font-size: 13px; color: var(--ink-2); line-height: 1.4; }

.pg-timeline { display: flex; flex-direction: column; }
.pg-tl-row { display: grid; grid-template-columns: 100px 1fr; gap: 28px; padding: 22px 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.pg-tl-row:last-child { border-bottom: none; }
.pg-tl-year { font-family: var(--font-mono); font-size: 22px; font-weight: 600; color: var(--brand-500); }
.pg-tl-body { font-size: 16px; line-height: 1.55; color: var(--ink-2); }

.pg-values { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.pg-value { padding: 28px; border: 1px solid var(--line); border-radius: var(--r-3); background: var(--white); }
.pg-value .pg-value-no { font-family: var(--font-mono); font-size: 12px; color: var(--ink-4); }
.pg-value h3 { margin: 12px 0 8px; font-size: 19px; font-weight: 600; color: var(--ink); }
.pg-value p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--ink-2); }

.pg-team { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.pg-member { display: flex; flex-direction: column; gap: 4px; }
.pg-member .pg-avatar {
  aspect-ratio: 1; border-radius: var(--r-3); margin-bottom: 12px;
  background: linear-gradient(135deg, var(--brand-100, #E7EEF6), var(--paper-2));
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 28px; font-weight: 600; color: var(--brand-500);
  border: 1px solid var(--line);
}
.pg-member .pg-m-name { font-size: 16px; font-weight: 600; color: var(--ink); }
.pg-member .pg-m-role { font-size: 13px; color: var(--ink-2); }
.pg-member .pg-m-since { font-size: 12px; color: var(--ink-4); font-family: var(--font-mono); }
.pg-member .pg-m-mail { margin-top: 2px; font-size: 12px; }
.pg-member .pg-m-mail a { color: var(--ink-3); font-family: var(--font-mono); }
.pg-member .pg-m-mail a:hover { color: var(--brand-500); }
@media (max-width: 640px) { .pg-team { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Maintenance plans ---------- */
.pg-plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.pg-plan { position: relative; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--r-4); background: var(--white); overflow: hidden; }
.pg-plan.featured { border-color: var(--ink); box-shadow: var(--sh-2); }
.pg-plan-head { padding: 26px 26px 22px; border-bottom: 1px solid var(--line); }
.pg-plan.featured .pg-plan-head { background: var(--ink); color: #fff; }
.pg-plan-name { font-size: 18px; font-weight: 600; }
.pg-plan-price { margin-top: 14px; font-family: var(--font-mono); font-size: 32px; font-weight: 700; letter-spacing: -0.01em; }
.pg-plan-price .per { font-size: 14px; font-weight: 400; color: var(--ink-3); }
.pg-plan.featured .pg-plan-price .per { color: rgba(255,255,255,0.7); }
/* Featured plan head is dark (var(--ink)); the base `p { color: var(--ink-2) }`
   overrides the inherited white on the name + price <p>s → set them explicitly. */
.pg-plan.featured .pg-plan-head .pg-plan-name,
.pg-plan.featured .pg-plan-head .pg-plan-price { color: #fff; }
/* Floating "Populaarseim" badge — pinned pill in the featured card's top-right
   corner (absolute; the card is position:relative + overflow:hidden so it clips
   to the rounded corner). Removed from flow so it no longer pushes the name down. */
.pg-plan-badge {
  position: absolute; top: 14px; right: 14px; z-index: 1; margin: 0;
  display: inline-block; padding: 5px 11px; border-radius: var(--r-pill);
  background: var(--heat-500); color: #fff;
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 600;
}
.pg-plan-body { padding: 22px 26px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.pg-plan-body .pg-plan-feat { display: grid; grid-template-columns: 20px 1fr; gap: 10px; font-size: 14px; color: var(--ink-2); line-height: 1.45; }
.pg-plan-body .pg-plan-feat .ic { color: var(--brand-500); margin-top: 2px; }
/* native core/image check icon in plan features */
.pg-plan-body .pg-plan-feat .wp-block-image { margin: 2px 0 0; line-height: 0; }
.pg-plan-body .pg-plan-feat .wp-block-image img { display: block; width: 16px; height: 16px; }
.pg-plan-body .pg-plan-feat p { margin: 0; }

/* Aside spec list (pg-aside-dl) — native group rows (pg-dt label / pg-dd value),
   used by the contact/service/project asides + Hooldus "Lühidalt". */
.pg-aside-dl { margin: 14px 0 0; }
/* zero the flow blockGap WP adds between rows (the group has no blockGap:0) so the
   only spacing is the symmetric 11px padding → the divider sits centred, rows even. */
.pg-aside-dl > .wp-block-group { padding: 11px 0; border-bottom: 1px solid var(--line); margin-block: 0; }
.pg-aside-dl > .wp-block-group:last-child { border-bottom: none; }
.pg-aside-dl .pg-dt { margin: 0; font-size: 14px; color: var(--ink-2); }
.pg-aside-dl .pg-dd { margin: 0; font-size: 14px; color: var(--ink); font-weight: 500; font-family: var(--font-mono); }
.pg-plan-foot { padding: 0 26px 26px; }

/* ---------- Bottom CTA band ---------- */
.pg-cta {
  background: transparent;
  /* no bottom padding: the footer already carries a ~73px margin-top separator,
     so a CTA pad-bottom here just doubled the gap (145px). Let the footer margin
     be the single, uniform CTA→footer gap. */
  padding: 24px 0 0;
}
/* On /teenused/ the section above the CTA is the TINTED price list, so the CTA's
   default 24px top padding left only ~24px above the panel vs 73px below. Match
   the top gap to the footer gap (same spacing token) for symmetric breathing. */
.post-type-archive-service .pg-cta { padding-top: var(--wp--preset--spacing--70); }
.pg-cta-inner {
  background: var(--ink); color: #fff;
  border-radius: var(--r-4, 16px);
  display: flex; align-items: center; justify-content: space-between;
  gap: 32px; padding: 44px 48px; flex-wrap: wrap;
}
.pg-cta h2 { margin: 0; font-size: 30px; font-weight: 600; letter-spacing: -0.015em; color: #fff; max-width: 22ch; text-wrap: balance; }
.pg-cta p { margin: 10px 0 0; font-size: 15px; color: rgba(255,255,255,0.78); max-width: 50ch; }
.pg-cta-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.pg-cta .btn.btn-outline { background: transparent; color: #fff; border-color: rgba(255,255,255,0.4); }
.pg-cta .btn.btn-outline:hover { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.7); }

/* =============================================================
   WP adaptations (documented — not part of the 1:1 port above).
   ============================================================= */

/* .crumbs base — carried from design shop-screens.css:86-90. The
   shop-screens layer is consciously not ported as a file (mockup
   frame); page-hero breadcrumbs still need the trail typography,
   so the base rules live here. One rule set for every .crumbs trail
   context (page hero + checkout stepper), not per-screen — the
   checkout crumbs sit in .checkout-steps-wrap, so scope both. */
.pg-hero .crumbs,
.checkout-steps-wrap .crumbs { display: flex; align-items: center; gap: 6px; font-size: var(--fs-xs); color: var(--ink-3); }
/* the trail items are core <p>, which the global `p { font-size: --fs-base }`
   pushes to 15px, overriding the container — force every crumb back to --fs-xs. */
.pg-hero .crumbs p,
.checkout-steps-wrap .crumbs p { font-size: var(--fs-xs); }
.pg-hero .crumbs a,
.checkout-steps-wrap .crumbs a { color: var(--ink-3); cursor: pointer; }
.pg-hero .crumbs a:hover,
.checkout-steps-wrap .crumbs a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
.pg-hero .crumbs .sep,
.checkout-steps-wrap .crumbs .sep { color: var(--ink-4); }
.pg-hero .crumbs .current,
.checkout-steps-wrap .crumbs .current { color: var(--brand-500); font-size: var(--fs-xs); font-weight: 600; }

/* core/buttons reconciliation — patterns build CTAs with native
   wp:button (default = primary red, is-style-outline = .btn-outline
   per block-styles.css); the prototype's .btn classes cannot sit on
   the inner __link, so forward the .btn-lg sizing and the dark-band
   outline treatment (.pg-cta .btn.btn-outline above) to the link. */
.pg-cta .wp-block-button__link { font-size: 15px; padding: 14px 22px; } /* = .btn-lg */
.pg-hero-actions .wp-block-button__link { font-size: 15px; padding: 14px 22px; } /* = .btn-lg */
.pg-cta .wp-block-button.is-style-outline .wp-block-button__link {
  background: transparent; color: #fff; border-color: rgba(255,255,255,0.4);
}
.pg-cta .wp-block-button.is-style-outline .wp-block-button__link:hover {
  background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.7); color: #fff;
}

/* mobile companion for the full-width rules in mobile.css
   (.pg-cta-actions .btn / .pg-hero-actions .btn — native wp:button
   markup carries no .btn class). */
@media (max-width: 720px) {
  .pg-cta-actions .wp-block-button,
  .pg-cta-actions .wp-block-button__link,
  .pg-hero-actions .wp-block-button,
  .pg-hero-actions .wp-block-button__link { width: 100%; }
}