/*
 * PK-Legal — site CSS moved out of Appearance → Customize → Additional CSS (Step 1.5).
 * Exact copy of the Customizer CSS printed on pklegal.org on 31 Oct 2026.
 * Served as a cached file instead of ~146 KB inline in every page.
 * Edit this file (not the Customizer box) from now on.
 */

/* PK-LEGAL — COMPLETE ADDITIONAL CSS
   Replace the full Additional CSS contents with this file, without style tags.
   Existing supplied stylesheet is preserved below. New property page and
   animation styles are appended at the bottom. Use with the v2 HTML that has
   no embedded style block. Responsive/state rules intentionally repeat classes. */

/* =========================================================
   PK-LEGAL & ASSOCIATES — CONSOLIDATED SITE STYLESHEET (v1)
   Paste this ENTIRE file into:
   Appearance > Customize > Additional CSS
   REPLACING every previous .divorce-page / .khulla-page /
   .court-marriage-page / .maintenance-page / .pk-page block
   currently in Additional CSS. Do not keep the old blocks —
   this single file supersedes all of them.

   WHAT CHANGED FROM THE PER-PAGE FILES:
   Previously, every new page copied the entire component
   system under a new prefix (dl-, kh-, cm-, wcm-, bc-, mf-,
   ab-) and a new wrapper class (.divorce-page, .khulla-page,
   .court-marriage-page, .maintenance-page, .pk-page). That
   meant the same ~90 components were defined 6+ times, and a
   single design change (e.g. the red brand color) required
   editing 6+ separate places.

   This file collapses all of that into:
     - ONE wrapper class: .pk-page (used by every page)
     - ONE prefix: pk- (used by every component)
     - ONE set of --pk-* variables, declared once

   To apply this to a page, the page's HTML must also be
   updated so its outer wrapper is <div class="pk-page"> and
   every component class uses the pk- prefix instead of its
   old page-specific prefix. That HTML migration is a separate
   step — this CSS file expects it.

   Every component that existed anywhere across the 9 pages is
   included here exactly once: hero, facts strip, sticky TOC,
   cards, steps, FAQ accordion, contact strip, city grid,
   comparison grids (2-col and 3-col), requirement cards, the
   legal document sample block, numbered clause cards,
   founder/person profile card, firm history timeline,
   illustrative story cards, trust stat badges, timeline rows,
   tag cloud, checklist grid, and the office-card block used on
   the Khulla page.

   Conventions preserved from the original files:
     - Icons are CSS background-images (data URIs), no inline
       <svg> in the HTML, so they can't be stripped on save.
     - The mobile "View Page Contents" toggle is a pure-CSS
       checkbox/label pattern, no JS required for it to work.
     - Tables were intentionally NOT used — comparisons use
       card grids instead, which behave better on mobile.
   ========================================================= */

body .pk-page {
  --pk-red: #8a0000;
  --pk-red-soft: #a52424;
  --pk-dark: #4c4c4e;
  --pk-green: #067201;
  --pk-light: #f7f5f3;
  --pk-border: #e4e0dc;
  --pk-white: #ffffff;
  --pk-radius: 10px;
  --pk-radius-sm: 6px;
  --pk-shadow-sm: 0 2px 8px rgba(35, 35, 45, 0.05);
  --pk-shadow: 0 12px 28px rgba(35, 35, 45, 0.08);
  --pk-shadow-lg: 0 20px 45px rgba(35, 35, 45, 0.12);
  --pk-ease: cubic-bezier(0.22, 1, 0.36, 1);
  width: 100%;
  overflow: visible;
  -webkit-font-smoothing: antialiased;
}

body .pk-page *,
body .pk-page *::before,
body .pk-page *::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body .pk-page .pk-container {
  max-width: 1240px;
  width: calc(100% - 60px);
  margin: 0 auto;
}

body .pk-page .pk-section {
  padding: 60px 0;
}

body .pk-page .pk-kicker {
  display: inline-block;
  margin-bottom: 10px;
  color: var(--pk-red);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

body .pk-page .pk-lead {
  max-width: 800px;
  font-size: 18px;
  line-height: 1.75em;
  color: var(--pk-dark);
  opacity: 0.92;
}

/* ─── Hero ─────────────────────────────────────────────── */

body .pk-page .pk-hero {
  background: linear-gradient(155deg, #ffffff 0%, #ffffff 55%, var(--pk-light) 100%);
  border-bottom: 1px solid var(--pk-border);
  padding: 75px 0 70px;
}

body .pk-page .pk-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(300px, 0.65fr);
  gap: 55px;
  align-items: center;
}

body .pk-page .pk-hero h1,
body .pk-page .pk-hero h2 {
  margin-top: 0;
  padding-top: 0;
  max-width: 780px;
  letter-spacing: -0.01em;
}

body .pk-page .pk-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 26px 0;
}

body .pk-page .pk-badge {
  display: inline-flex;
  align-items: center;
  padding: 9px 15px;
  background: var(--pk-white);
  border: 1px solid var(--pk-border);
  border-radius: 30px;
  color: var(--pk-dark);
  font-size: 13.5px;
  font-weight: 600;
  box-shadow: var(--pk-shadow-sm);
  transition: border-color 0.25s var(--pk-ease), transform 0.25s var(--pk-ease);
}

body .pk-page .pk-badge:hover {
  border-color: var(--pk-red);
  transform: translateY(-2px);
}

body .pk-page .pk-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 28px;
}

body .pk-page .pk-actions .btn {
  margin: 0;
  box-shadow: var(--pk-shadow-sm);
  transition: transform 0.25s var(--pk-ease), box-shadow 0.25s var(--pk-ease), background 0.25s var(--pk-ease);
}

body .pk-page .pk-actions .btn:hover {
  transform: translateY(-3px);
  box-shadow: var(--pk-shadow);
}

body .pk-page .pk-whatsapp {
  background-color: var(--pk-green);
}

body .pk-page .pk-whatsapp:hover {
  background-color: #055c01;
}

body .pk-page .pk-outline-btn {
  background: var(--pk-white);
  color: var(--pk-red);
  border: 1.5px solid var(--pk-red);
}

body .pk-page .pk-outline-btn:hover {
  color: var(--pk-white);
  background: var(--pk-red);
  border-color: var(--pk-red);
}

body .pk-page .pk-summary-card {
  background: var(--pk-white);
  border: 1px solid var(--pk-border);
  border-radius: var(--pk-radius);
  border-top: none;
  padding: 30px 28px;
  box-shadow: var(--pk-shadow-lg);
  position: relative;
}

body .pk-page .pk-summary-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 24px;
  right: 24px;
  height: 4px;
  background: var(--pk-red);
  border-radius: 0 0 4px 4px;
}

body .pk-page .pk-summary-card h3 {
  padding-top: 0;
  margin-top: 6px;
  font-size: 22px;
}

body .pk-page .pk-summary-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

body .pk-page .pk-summary-list li {
  position: relative;
  padding: 12px 0 12px 32px;
  border-bottom: 1px solid #f0eeec;
  font-size: 15px;
}

body .pk-page .pk-summary-list li:last-child {
  border-bottom: 0;
}

body .pk-page .pk-summary-list li::before {
  content: "✓";
  position: absolute;
  left: 2px;
  top: 11px;
  width: 18px;
  height: 18px;
  font-size: 12px;
  line-height: 18px;
  text-align: center;
  color: var(--pk-white);
  background: var(--pk-green);
  border-radius: 50%;
  font-weight: bold;
}

/* ─── Stat strip ───────────────────────────────────────── */

body .pk-page .pk-facts-wrap {
  position: relative;
  z-index: 3;
  margin-top: -32px;
}

body .pk-page .pk-facts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: var(--pk-white);
  border-radius: var(--pk-radius);
  box-shadow: var(--pk-shadow-lg);
  overflow: hidden;
}

body .pk-page .pk-fact {
  min-height: 118px;
  padding: 24px 16px;
  text-align: center;
  border-right: 1px solid var(--pk-border);
  transition: background 0.25s var(--pk-ease);
}

body .pk-page .pk-fact:hover {
  background: var(--pk-light);
}

body .pk-page .pk-fact:last-child {
  border-right: 0;
}

body .pk-page .pk-fact strong {
  display: block;
  margin-bottom: 6px;
  color: var(--pk-red);
  font-size: 17px;
  letter-spacing: -0.01em;
}

body .pk-page .pk-fact span {
  font-size: 14.5px;
  color: var(--pk-dark);
  opacity: 0.85;
}

/* ─── Layout / TOC ─────────────────────────────────────── */

body .pk-page .pk-layout {
  display: grid !important;
  grid-template-columns: 275px minmax(0, 1fr);
  gap: 50px;
  align-items: start;
  width: 100%;
}

body .pk-page .pk-toc {
  position: sticky;
  top: 30px;
  background: var(--pk-white);
  border: 1px solid var(--pk-border);
  border-radius: var(--pk-radius);
  padding: 20px;
  box-shadow: var(--pk-shadow-sm);
}

body.admin-bar .pk-page .pk-toc {
  top: 62px;
}

body .pk-page .pk-toc-title {
  margin-bottom: 10px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--pk-border);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--pk-dark);
}

body .pk-page .pk-toc a {
  display: block;
  padding: 8px 10px;
  color: var(--pk-dark);
  font-size: 14px;
  line-height: 1.4em;
  text-decoration: none;
  border-radius: var(--pk-radius-sm);
  border-left: 3px solid transparent;
  transition: background 0.2s var(--pk-ease), color 0.2s var(--pk-ease);
}

body .pk-page .pk-toc a:hover,
body .pk-page .pk-toc a.pk-active {
  color: var(--pk-red);
  background: #faf3f3;
  border-left-color: var(--pk-red);
}

/* ─── Mobile TOC toggle — pure CSS checkbox/label pattern ─── */

body .pk-page .pk-toc-toggle-input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  overflow: hidden;
  white-space: nowrap;
}

body .pk-page .pk-mobile-toc {
  display: none;
  width: 100%;
  margin-bottom: 16px;
  padding: 13px 18px;
  text-align: left;
  color: var(--pk-white) !important;
  background: var(--pk-red) !important;
  background-color: var(--pk-red) !important;
  border: 0;
  border-radius: var(--pk-radius-sm);
  font-weight: 600;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}
body .pk-page .pk-mobile-toc,
body .pk-page .pk-mobile-toc * {
  color: var(--pk-white) !important;
}
body .pk-page .pk-toc-text-hide {
  display: none;
}

body .pk-page .pk-toc-toggle-input:checked ~ .pk-mobile-toc .pk-toc-text-show {
  display: none;
}

body .pk-page .pk-toc-toggle-input:checked ~ .pk-mobile-toc .pk-toc-text-hide {
  display: inline;
}

body .pk-page .pk-toc-toggle-input:focus-visible ~ .pk-mobile-toc {
  outline: 2px solid var(--pk-dark);
  outline-offset: 2px;
}

body .pk-page .pk-content-block {
  margin-bottom: 60px;
  scroll-margin-top: 30px;
}

body .pk-page .pk-content-block > h2 {
  margin-top: 0;
  padding-top: 0;
  letter-spacing: -0.01em;
}

body .pk-page .pk-callout {
  margin: 26px 0;
  padding: 22px 24px;
  background: #fdf6ec;
  border-left: 4px solid var(--pk-red);
  border-radius: 0 var(--pk-radius-sm) var(--pk-radius-sm) 0;
}

body .pk-page .pk-legal-note {
  margin: 26px 0;
  padding: 22px 24px;
  background: #eef7ee;
  border-left: 4px solid var(--pk-green);
  border-radius: 0 var(--pk-radius-sm) var(--pk-radius-sm) 0;
}

/* ─── Cards / Grid ─────────────────────────────────────── */

body .pk-page .pk-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin-top: 26px;
}

body .pk-page .pk-card {
  height: 100%;
  padding: 26px;
  background: var(--pk-white);
  border: 1px solid var(--pk-border);
  border-radius: var(--pk-radius);
  box-shadow: var(--pk-shadow-sm);
  transition: box-shadow 0.3s var(--pk-ease), transform 0.3s var(--pk-ease);
}

body .pk-page .pk-card:hover {
  box-shadow: var(--pk-shadow);
  transform: translateY(-3px);
}

body .pk-page .pk-card h3,
body .pk-page .pk-card h4 {
  padding-top: 0;
  margin-top: 0;
}

body .pk-page .pk-card h3 {
  font-size: 21px;
  letter-spacing: -0.01em;
}

body .pk-page .pk-card p,
body .pk-page .pk-card li {
  font-size: 15px;
}

/* ─── Icons (CSS background-image, no inline <svg> in HTML) ─── */

body .pk-page .pk-icon {
  width: 48px;
  height: 48px;
  margin-bottom: 16px;
  background-color: var(--pk-red);
  background-image: linear-gradient(155deg, var(--pk-red) 0%, var(--pk-red-soft) 100%);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 22px 22px, cover;
  border-radius: 14px;
  box-shadow: 0 6px 14px rgba(138, 0, 0, 0.22);
  flex-shrink: 0;
}

body .pk-page .pk-icon-law {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 3h7l4 4v13a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1z'/%3E%3Cpath d='M14 3v4h4'/%3E%3Cpath d='M9 12h6M9 15.5h6M9 8.5h3'/%3E%3C/svg%3E"),
    linear-gradient(155deg, var(--pk-red) 0%, var(--pk-red-soft) 100%);
}

body .pk-page .pk-icon-shield {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l7 3v6c0 5-3.5 8-7 9-3.5-1-7-4-7-9V6z'/%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3C/svg%3E"),
    linear-gradient(155deg, var(--pk-red) 0%, var(--pk-red-soft) 100%);
}

body .pk-page .pk-icon-scale {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v18M12 3 6 6M12 3l6 3'/%3E%3Cpath d='M3 7h6M15 7h6'/%3E%3Cpath d='M3 7l-2 5a3 3 0 0 0 6 0l-2-5'/%3E%3Cpath d='M21 7l-2 5a3 3 0 0 0 6 0l-2-5'/%3E%3Cpath d='M8 21h8'/%3E%3C/svg%3E"),
    linear-gradient(155deg, var(--pk-red) 0%, var(--pk-red-soft) 100%);
}

body .pk-page .pk-icon-calendar {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M16 3v4M8 3v4M3 10h18'/%3E%3Cpath d='M12 14v3l2 1.5'/%3E%3C/svg%3E"),
    linear-gradient(155deg, var(--pk-red) 0%, var(--pk-red-soft) 100%);
}

body .pk-page .pk-icon-nikah {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8.5' r='5.5'/%3E%3Cpath d='M8.2 13.2 6.5 21l5.5-3 5.5 3-1.7-7.8'/%3E%3C/svg%3E"),
    linear-gradient(155deg, var(--pk-red) 0%, var(--pk-red-soft) 100%);
}

/* ─── Steps ────────────────────────────────────────────── */

body .pk-page .pk-steps {
  counter-reset: pk-step;
  margin-top: 26px;
  display: grid;
  gap: 14px;
}

body .pk-page .pk-step {
  counter-increment: pk-step;
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 20px;
  align-items: start;
  padding: 22px;
  background: var(--pk-white);
  border: 1px solid var(--pk-border);
  border-radius: var(--pk-radius);
  transition: box-shadow 0.3s var(--pk-ease);
}

body .pk-page .pk-step:hover {
  box-shadow: var(--pk-shadow-sm);
}

body .pk-page .pk-step::before {
  content: counter(pk-step);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: var(--pk-white);
  background: var(--pk-red);
  border-radius: 12px;
  font-size: 18px;
  font-weight: bold;
}

body .pk-page .pk-step h3 {
  padding-top: 0;
  margin-top: 0;
  margin-bottom: 6px;
  font-size: 20px;
}

body .pk-page .pk-step p {
  font-size: 15px;
  margin-bottom: 0;
}

/* pk-steps-compact — smaller variant used for shorter checklists */

body .pk-page .pk-steps-compact .pk-step {
  padding: 16px 18px;
}

body .pk-page .pk-steps-compact .pk-step::before {
  width: 36px;
  height: 36px;
  font-size: 15px;
}

body .pk-page .pk-steps-compact .pk-step h3 {
  font-size: 17px;
}

/* ─── CTA ──────────────────────────────────────────────── */

body .pk-page .pk-cta {
  margin: 50px 0 60px;
  padding: 38px;
  color: var(--pk-white);
  background: linear-gradient(135deg, var(--pk-red) 0%, #6f0000 100%);
  border-radius: var(--pk-radius);
  box-shadow: var(--pk-shadow-lg);
}

body .pk-page .pk-cta h2,
body .pk-page .pk-cta h3,
body .pk-page .pk-cta p {
  color: var(--pk-white);
}

body .pk-page .pk-cta h2,
body .pk-page .pk-cta h3 {
  padding-top: 0;
  margin-top: 0;
}

body .pk-page .pk-cta p {
  opacity: 0.92;
}

body .pk-page .pk-cta-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}

body .pk-page .pk-cta .pk-actions {
  flex-shrink: 0;
  margin-top: 0;
}

body .pk-page .pk-cta .btn {
  background: var(--pk-white);
  color: var(--pk-red);
}

body .pk-page .pk-cta .btn:hover {
  background: var(--pk-dark);
  color: var(--pk-white);
}

/* ─── Requirement / Grounds cards ──────────────────────── */

body .pk-page .pk-req-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 26px;
}

body .pk-page .pk-req-card {
  position: relative;
  padding: 22px 22px 22px 26px;
  background: var(--pk-white);
  border: 1px solid var(--pk-border);
  border-radius: var(--pk-radius);
  box-shadow: var(--pk-shadow-sm);
  transition: box-shadow 0.3s var(--pk-ease), transform 0.3s var(--pk-ease);
}

body .pk-page .pk-req-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 14px;
  bottom: 14px;
  width: 4px;
  background: var(--pk-red);
  border-radius: 0 4px 4px 0;
}

body .pk-page .pk-req-card:hover {
  box-shadow: var(--pk-shadow);
  transform: translateY(-3px);
}

body .pk-page .pk-req-label {
  display: block;
  margin-bottom: 8px;
  color: var(--pk-red);
  font-size: 15.5px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

body .pk-page .pk-req-card p {
  margin: 0;
  font-size: 15px;
  color: var(--pk-dark);
}

@media (max-width: 640px) {
  body .pk-page .pk-req-grid {
    grid-template-columns: 1fr;
  }
}

/* ─── Comparison cards (2-col and 3-col) ───────────────── */

body .pk-page .pk-compare-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin-top: 26px;
}

body .pk-page .pk-compare-card {
  padding: 26px;
  background: var(--pk-white);
  border: 1px solid var(--pk-border);
  border-top: 4px solid var(--pk-red);
  border-radius: var(--pk-radius);
  box-shadow: var(--pk-shadow-sm);
}

body .pk-page .pk-compare-card:last-child {
  border-top-color: var(--pk-dark);
}

body .pk-page .pk-compare-card h3 {
  padding-top: 0;
  margin-top: 0;
  font-size: 21px;
}

body .pk-page .pk-compare-card ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

body .pk-page .pk-compare-card li {
  position: relative;
  padding: 10px 0 10px 24px;
  border-bottom: 1px solid var(--pk-light);
  font-size: 15px;
}

body .pk-page .pk-compare-card li:last-child {
  border-bottom: 0;
}

body .pk-page .pk-compare-card li::before {
  content: "•";
  position: absolute;
  left: 4px;
  color: var(--pk-red);
  font-weight: bold;
}

body .pk-page .pk-compare-grid-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

body .pk-page .pk-compare-grid-3 .pk-compare-card:nth-child(2) {
  border-top-color: var(--pk-dark);
}

body .pk-page .pk-compare-grid-3 .pk-compare-card:nth-child(3) {
  border-top-color: var(--pk-green);
}

@media (max-width: 900px) {
  body .pk-page .pk-compare-grid-3 {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  body .pk-page .pk-compare-grid {
    grid-template-columns: 1fr;
  }
}

/* ─── Legal Document Sample (mutual divorce deed, etc.) ─── */

body .pk-page .pk-doc {
  margin-top: 26px;
  padding: 40px 44px;
  background: var(--pk-white);
  border: 1px solid var(--pk-border);
  border-radius: var(--pk-radius);
  box-shadow: var(--pk-shadow);
  position: relative;
}

body .pk-page .pk-doc::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 6px;
  background: linear-gradient(90deg, var(--pk-red) 0%, var(--pk-red-soft) 100%);
  border-radius: var(--pk-radius) var(--pk-radius) 0 0;
}

body .pk-page .pk-doc-title {
  margin: 6px 0 22px;
  padding-bottom: 18px;
  border-bottom: 2px solid var(--pk-dark);
  text-align: center;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--pk-dark);
}

body .pk-page .pk-doc-body {
  font-size: 15px;
  line-height: 1.85em;
  color: var(--pk-dark);
}

body .pk-page .pk-doc-body p {
  margin-bottom: 16px;
}

body .pk-page .pk-doc-blank {
  display: inline-block;
  min-width: 90px;
  border-bottom: 1px solid var(--pk-dark);
}

body .pk-page .pk-doc-clauses {
  margin: 18px 0;
  padding-left: 22px;
}

body .pk-page .pk-doc-clauses li {
  margin-bottom: 10px;
  padding-left: 4px;
}

body .pk-page .pk-doc-sign {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  margin-top: 34px;
  padding-top: 24px;
  border-top: 1px dashed var(--pk-border);
}

body .pk-page .pk-doc-sign-block p {
  margin-bottom: 10px;
}

body .pk-page .pk-doc-witness {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px dashed var(--pk-border);
}

body .pk-page .pk-doc-witness-title {
  display: block;
  margin-bottom: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 13px;
  color: var(--pk-red);
}

body .pk-page .pk-doc-note {
  margin-top: 18px;
  padding: 16px 18px;
  background: var(--pk-light);
  border-radius: var(--pk-radius-sm);
  font-size: 13.5px;
  color: var(--pk-dark);
  opacity: 0.85;
}

body .pk-page .pk-doc-download {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 22px;
  padding: 22px 26px;
  background: var(--pk-light);
  border: 1px solid var(--pk-border);
  border-radius: var(--pk-radius);
}

body .pk-page .pk-doc-download p {
  margin: 0;
  font-size: 14.5px;
}

body .pk-page .pk-doc-download .btn {
  margin: 0;
  flex-shrink: 0;
}

@media (max-width: 768px) {
  body .pk-page .pk-doc {
    padding: 26px 20px;
  }

  body .pk-page .pk-doc-sign {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  body .pk-page .pk-doc-download {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ─── Numbered clause / element cards ─────────────────── */

body .pk-page .pk-clause-list {
  margin-top: 26px;
  display: grid;
  gap: 16px;
}

body .pk-page .pk-clause {
  padding: 22px 24px;
  background: var(--pk-white);
  border: 1px solid var(--pk-border);
  border-left: 4px solid var(--pk-red);
  border-radius: 0 var(--pk-radius) var(--pk-radius) 0;
  box-shadow: var(--pk-shadow-sm);
}

body .pk-page .pk-clause h3 {
  margin: 0 0 8px;
  padding-top: 0;
  font-size: 18px;
}

body .pk-page .pk-clause p {
  margin-bottom: 10px;
  font-size: 15px;
}

body .pk-page .pk-clause-sample {
  margin-top: 10px;
  padding: 14px 16px;
  background: var(--pk-light);
  border-radius: var(--pk-radius-sm);
  font-size: 14px;
  font-style: italic;
  color: var(--pk-dark);
  opacity: 0.9;
}

/* ─── Cities ───────────────────────────────────────────── */

body .pk-page .pk-city-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 24px;
}

body .pk-page .pk-city {
  padding: 22px;
  background: var(--pk-white);
  border: 1px solid var(--pk-border);
  border-radius: var(--pk-radius);
  border-bottom: 3px solid var(--pk-red);
  transition: box-shadow 0.3s var(--pk-ease), transform 0.3s var(--pk-ease);
  overflow: hidden;
}

body .pk-page .pk-city:hover {
  box-shadow: var(--pk-shadow);
  transform: translateY(-3px);
}

body .pk-page .pk-city h3 {
  padding-top: 0;
  font-size: 20px;
  margin-bottom: 8px;
}

body .pk-page .pk-city p {
  font-size: 14.5px;
  margin-bottom: 0;
}

/* When a city card includes a photo, the photo sits full-bleed
   at the top using negative-margin compensation. */
body .pk-page .pk-city-photo {
  width: calc(100% + 44px);
  margin: -22px -22px 16px;
  height: 140px;
  overflow: hidden;
}

body .pk-page .pk-city-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ─── Office card (address + map link, e.g. Khulla page) ─── */

body .pk-page .pk-office-card {
  margin-top: 26px;
  padding: 28px;
  background: var(--pk-white);
  border: 1px solid var(--pk-border);
  border-radius: var(--pk-radius);
  box-shadow: var(--pk-shadow-sm);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  align-items: center;
}

body .pk-page .pk-office-card h3 {
  padding-top: 0;
  margin-top: 0;
  margin-bottom: 14px;
  font-size: 20px;
}

body .pk-page .pk-office-details {
  margin: 0;
  padding: 0;
  list-style: none;
}

body .pk-page .pk-office-details li {
  padding: 7px 0;
  font-size: 15px;
  color: var(--pk-dark);
}

body .pk-page .pk-office-details strong {
  display: inline-block;
  min-width: 92px;
  color: var(--pk-red);
  font-weight: 700;
}

body .pk-page .pk-office-details a {
  color: var(--pk-dark);
  font-weight: 600;
  text-decoration: none;
}

body .pk-page .pk-office-details a:hover {
  color: var(--pk-red);
}

body .pk-page .pk-office-card .btn {
  white-space: nowrap;
}

@media (max-width: 640px) {
  body .pk-page .pk-office-card {
    grid-template-columns: 1fr;
  }

  body .pk-page .pk-office-card .btn {
    width: 100%;
    text-align: center;
  }
}

/* ─── Timeline rows (service vs. typical time — no <table>) ─── */

body .pk-page .pk-timeline-list {
  margin-top: 26px;
  border: 1px solid var(--pk-border);
  border-radius: var(--pk-radius);
  overflow: hidden;
  box-shadow: var(--pk-shadow-sm);
}

body .pk-page .pk-timeline-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 160px;
  align-items: center;
  gap: 16px;
  padding: 16px 22px;
  background: var(--pk-white);
  border-bottom: 1px solid var(--pk-border);
}

body .pk-page .pk-timeline-row:last-child {
  border-bottom: 0;
}

body .pk-page .pk-timeline-row:nth-child(even) {
  background: var(--pk-light);
}

body .pk-page .pk-timeline-service {
  font-size: 15px;
  font-weight: 600;
  color: var(--pk-dark);
}

body .pk-page .pk-timeline-time {
  justify-self: end;
  padding: 6px 14px;
  background: var(--pk-red);
  color: var(--pk-white);
  border-radius: 30px;
  font-size: 13px;
  font-weight: 700;
  text-align: center;
  white-space: nowrap;
}

@media (max-width: 640px) {
  body .pk-page .pk-timeline-row {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  body .pk-page .pk-timeline-time {
    justify-self: start;
  }
}

/* ─── Industry / tag pill cloud ───────────────────────── */

body .pk-page .pk-tag-cloud {
  margin-top: 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

body .pk-page .pk-tag {
  padding: 8px 16px;
  background: var(--pk-white);
  border: 1px solid var(--pk-border);
  border-radius: 30px;
  color: var(--pk-dark);
  font-size: 13.5px;
  font-weight: 600;
  transition: border-color 0.2s var(--pk-ease), color 0.2s var(--pk-ease), transform 0.2s var(--pk-ease);
}

body .pk-page .pk-tag:hover {
  border-color: var(--pk-red);
  color: var(--pk-red);
  transform: translateY(-2px);
}

/* ─── Checklist (two-column check items) ──────────────── */

body .pk-page .pk-check-grid {
  margin-top: 24px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 24px;
}

body .pk-page .pk-check-item {
  position: relative;
  padding: 10px 0 10px 30px;
  font-size: 15px;
  color: var(--pk-dark);
  border-bottom: 1px solid var(--pk-light);
}

body .pk-page .pk-check-item::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 9px;
  width: 20px;
  height: 20px;
  font-size: 12px;
  font-weight: bold;
  line-height: 20px;
  text-align: center;
  color: var(--pk-white);
  background: var(--pk-green);
  border-radius: 50%;
}

@media (max-width: 640px) {
  body .pk-page .pk-check-grid {
    grid-template-columns: 1fr;
  }
}

/* ─── Trust stat badges ────────────────────────────────── */

body .pk-page .pk-stat-grid {
  margin-top: 26px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

body .pk-page .pk-stat {
  padding: 26px 20px;
  text-align: center;
  background: var(--pk-white);
  border: 1px solid var(--pk-border);
  border-radius: var(--pk-radius);
  box-shadow: var(--pk-shadow-sm);
}

body .pk-page .pk-stat-number {
  display: block;
  font-size: 30px;
  font-weight: 800;
  color: var(--pk-red);
  letter-spacing: -0.02em;
  line-height: 1.15;
}

body .pk-page .pk-stat-label {
  display: block;
  margin-top: 6px;
  font-size: 13.5px;
  color: var(--pk-dark);
  opacity: 0.8;
}

@media (max-width: 768px) {
  body .pk-page .pk-stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ─── Founder / person profile card ───────────────────── */

body .pk-page .pk-person {
  margin-top: 26px;
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 30px;
  align-items: start;
  padding: 30px;
  background: var(--pk-white);
  border: 1px solid var(--pk-border);
  border-radius: var(--pk-radius);
  box-shadow: var(--pk-shadow);
}

body .pk-page .pk-person-avatar {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  overflow: hidden;
  background: linear-gradient(155deg, var(--pk-red) 0%, var(--pk-red-soft) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--pk-white);
  font-size: 44px;
  font-weight: 800;
  flex-shrink: 0;
  border: 3px solid var(--pk-white);
  box-shadow: var(--pk-shadow);
}

body .pk-page .pk-person-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

body .pk-page .pk-person-name {
  margin: 0 0 2px;
  padding-top: 0;
  font-size: 22px;
}

body .pk-page .pk-person-title {
  display: block;
  margin-bottom: 14px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--pk-red);
}

body .pk-page .pk-person p {
  font-size: 15px;
  margin-bottom: 10px;
}

@media (max-width: 640px) {
  body .pk-page .pk-person {
    grid-template-columns: 1fr;
    text-align: center;
  }

  body .pk-page .pk-person-avatar {
    margin: 0 auto;
  }
}

/* ─── Hero photo ───────────────────────────────────────── */

body .pk-page .pk-hero-photo {
  margin-top: 30px;
  border-radius: var(--pk-radius);
  overflow: hidden;
  box-shadow: var(--pk-shadow-lg);
  border: 1px solid var(--pk-border);
}

body .pk-page .pk-hero-photo img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

/* ─── Inline content photo (office / team / general) ──── */

body .pk-page .pk-photo {
  margin: 26px 0;
  border-radius: var(--pk-radius);
  overflow: hidden;
  box-shadow: var(--pk-shadow-sm);
  border: 1px solid var(--pk-border);
}

body .pk-page .pk-photo img {
  width: 100%;
  height: auto;
  display: block;
}

body .pk-page .pk-photo-caption {
  padding: 12px 16px;
  background: var(--pk-light);
  font-size: 13px;
  color: var(--pk-dark);
  opacity: 0.75;
  text-align: center;
}
body .pk-page .pk-photo-document img {
  width: 100%;
  height: auto;
  max-height: none;
  display: block;
  object-fit: contain;
}

/* ─── Firm history timeline ────────────────────────────── */

body .pk-page .pk-history {
  margin-top: 30px;
  position: relative;
  padding-left: 30px;
  border-left: 2px solid var(--pk-border);
}

body .pk-page .pk-history-item {
  position: relative;
  padding-bottom: 30px;
}

body .pk-page .pk-history-item:last-child {
  padding-bottom: 0;
}

body .pk-page .pk-history-item::before {
  content: "";
  position: absolute;
  left: -37px;
  top: 4px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--pk-red);
  border: 3px solid var(--pk-white);
  box-shadow: 0 0 0 2px var(--pk-red);
}

body .pk-page .pk-history-year {
  display: block;
  font-size: 14px;
  font-weight: 800;
  color: var(--pk-red);
  margin-bottom: 4px;
}

body .pk-page .pk-history-item h3 {
  margin: 0 0 6px;
  padding-top: 0;
  font-size: 17px;
}

body .pk-page .pk-history-item p {
  margin: 0;
  font-size: 14.5px;
}

/* ─── Illustrative example / composite story cards ────── */

body .pk-page .pk-story {
  margin-top: 20px;
  padding: 26px 28px;
  background: var(--pk-light);
  border: 1px solid var(--pk-border);
  border-radius: var(--pk-radius);
}

body .pk-page .pk-story-tag {
  display: inline-block;
  margin-bottom: 12px;
  padding: 4px 12px;
  background: var(--pk-white);
  border: 1px solid var(--pk-border);
  border-radius: 30px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--pk-dark);
  opacity: 0.75;
}

body .pk-page .pk-story h3 {
  margin: 0 0 10px;
  padding-top: 0;
  font-size: 17px;
}

body .pk-page .pk-story p {
  font-size: 15px;
  margin-bottom: 0;
}

/* ─── FAQ ──────────────────────────────────────────────── */

body .pk-page .pk-faq-list {
  margin-top: 26px;
  display: grid;
  gap: 10px;
}

body .pk-page .pk-faq {
  background: var(--pk-white);
  border: 1px solid var(--pk-border);
  border-radius: var(--pk-radius-sm);
  overflow: hidden;
  transition: border-color 0.2s var(--pk-ease);
}

body .pk-page .pk-faq[open] {
  border-color: #d9c9c9;
}

body .pk-page .pk-faq summary {
  position: relative;
  padding: 18px 56px 18px 20px;
  color: var(--pk-dark);
  font-weight: 600;
  font-size: 15.5px;
  cursor: pointer;
  list-style: none;
  transition: background 0.2s var(--pk-ease);
}

body .pk-page .pk-faq summary:hover {
  background: var(--pk-light);
}

body .pk-page .pk-faq summary::-webkit-details-marker {
  display: none;
}

body .pk-page .pk-faq summary::after {
  content: "+";
  position: absolute;
  right: 20px;
  top: 50%;
  width: 26px;
  height: 26px;
  line-height: 26px;
  text-align: center;
  transform: translateY(-50%);
  color: var(--pk-white);
  background: var(--pk-red);
  border-radius: 50%;
  transition: transform 0.25s var(--pk-ease);
}

body .pk-page .pk-faq[open] summary::after {
  content: "–";
}

body .pk-page .pk-faq-answer {
  padding: 0 20px 20px;
  font-size: 15px;
}

body .pk-page .pk-faq-answer p {
  margin-bottom: 0;
}

/* ─── Contact strip ────────────────────────────────────── */

body .pk-page .pk-contact-strip {
  padding: 55px 0;
  background: linear-gradient(155deg, var(--pk-dark) 0%, #38373a 100%);
}

body .pk-page .pk-contact-strip h2,
body .pk-page .pk-contact-strip p,
body .pk-page .pk-contact-strip strong,
body .pk-page .pk-contact-strip span {
  color: var(--pk-white);
}

body .pk-page .pk-contact-strip h2 {
  padding-top: 0;
}

body .pk-page .pk-contact-strip > .pk-container > p {
  max-width: 700px;
  opacity: 0.85;
}

body .pk-page .pk-contact-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-top: 24px;
}

body .pk-page .pk-contact-item {
  padding: 20px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
  border-radius: var(--pk-radius-sm);
  transition: background 0.25s var(--pk-ease);
  color: white;
}

body .pk-page .pk-contact-item:hover {
  background: rgba(255,255,255,0.08);
}

body .pk-page .pk-contact-item strong {
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.75;
}

body .pk-page .pk-contact-item a {
  color: var(--pk-white);
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
}

body .pk-page .pk-mobile-contact {
  display: none;
}

/* ─── Authorship box (full author/reviewer trust card) ─── */

body .pk-page .pk-authorship {
  grid-column: 1 / -1;
  margin: 40px 0;
  padding: 26px 28px;
  background: var(--pk-light);
  border: 1px solid var(--pk-border);
  border-left: 4px solid var(--pk-red);
  border-radius: 0 var(--pk-radius) var(--pk-radius) 0;
}

body .pk-page .pk-authorship-title {
  display: block;
  margin-bottom: 16px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--pk-red);
}

body .pk-page .pk-authorship-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 30px;
}

body .pk-page .pk-authorship-item {
  font-size: 14.5px;
  line-height: 1.55em;
  color: var(--pk-dark);
}

body .pk-page .pk-authorship-item strong {
  display: block;
  margin-bottom: 2px;
  color: var(--pk-dark);
  font-weight: 700;
}

body .pk-page .pk-authorship-full {
  grid-column: 1 / -1;
}

@media (max-width: 640px) {
  body .pk-page .pk-authorship-grid {
    grid-template-columns: 1fr;
  }
}

/* ─── Byline (author / last-updated strip) ─────────────── */

body .pk-page .pk-byline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--pk-border);
  font-size: 14px;
  color: var(--pk-dark);
  opacity: 0.85;
}

body .pk-page .pk-byline a {
  color: var(--pk-red);
  font-weight: 600;
  text-decoration: none;
}

body .pk-page .pk-byline a:hover {
  text-decoration: underline;
}

body .pk-page .pk-byline-sep {
  color: var(--pk-border);
}

body .pk-page .pk-byline time {
  font-weight: 600;
  color: var(--pk-dark);
}

@media (max-width: 768px) {
  body .pk-page .pk-byline {
    font-size: 13px;
  }
}

/* ─── Responsive (layout) ──────────────────────────────── */

@media (max-width: 1024px) {
  body .pk-page .pk-container {
    width: calc(100% - 30px);
  }

  body .pk-page .pk-hero-grid,
  body .pk-page .pk-layout {
    grid-template-columns: 1fr;
  }

  body .pk-page .pk-hero {
    padding: 50px 0;
  }

  body .pk-page .pk-summary-card {
    max-width: 700px;
  }

  body .pk-page .pk-mobile-toc {
    display: block;
  }

  body .pk-page .pk-toc {
    display: none;
    position: static;
    margin-bottom: 25px;
  }

  body .pk-page .pk-toc-toggle-input:checked ~ .pk-toc {
    display: block;
  }

  body .pk-page .pk-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body .pk-page .pk-city-grid,
  body .pk-page .pk-contact-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  body .pk-page .pk-cta-inner {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 768px) {
  body .pk-page {
    padding-bottom: 76px;
  }

  body .pk-page .pk-container {
    width: calc(100% - 24px);
  }

  body .pk-page .pk-section {
    padding: 44px 0;
  }

  body .pk-page .pk-hero {
    padding: 40px 0 48px;
  }

  body .pk-page .pk-hero h1,
  body .pk-page .pk-hero h2 {
    font-size: 32px;
  }

  body .pk-page .pk-lead {
    font-size: 16px;
  }

  body .pk-page .pk-actions {
    flex-direction: column;
  }

  body .pk-page .pk-actions .btn {
    display: block;
    width: 100%;
    text-align: center;
  }

  body .pk-page .pk-facts-wrap {
    margin-top: 0;
    padding-top: 16px;
  }

  body .pk-page .pk-facts {
    grid-template-columns: repeat(2, 1fr);
    border-radius: var(--pk-radius);
  }

  body .pk-page .pk-fact {
    min-height: 105px;
    padding: 18px 10px;
  }

  body .pk-page .pk-fact:nth-child(2) {
    border-right: 0;
  }

  body .pk-page .pk-fact:nth-child(-n+2) {
    border-bottom: 1px solid var(--pk-border);
  }

  body .pk-page .pk-grid,
  body .pk-page .pk-city-grid,
  body .pk-page .pk-contact-grid,
  body .pk-page .pk-compare-grid,
  body .pk-page .pk-req-grid,
  body .pk-page .pk-stat-grid {
    grid-template-columns: 1fr;
  }

  body .pk-page .pk-step {
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 14px;
    padding: 18px;
  }

  body .pk-page .pk-step::before {
    width: 36px;
    height: 36px;
    font-size: 16px;
    border-radius: 10px;
  }

  body .pk-page .pk-cta {
    padding: 26px 22px;
  }

  body .pk-page .pk-mobile-contact {
    position: fixed;
    z-index: 9999;
    left: 10px;
    right: 10px;
    bottom: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 8px 10px 6px;
    background: rgba(255,255,255,0.97);
    border: 1px solid var(--pk-border);
    border-radius: var(--pk-radius);
    box-shadow: var(--pk-shadow-lg);
  }

  body .pk-page .pk-mobile-contact-row {
    display: flex;
    width: 100%;
    gap: 8px;
  }

  body .pk-page .pk-mobile-contact .btn {
    flex: 1;
    margin: 0;
    padding: 7px 8px;
    font-size: 13px;
    text-align: center;
  }

  body .pk-page .pk-mobile-contact-note {
    margin: 0;
    color: var(--pk-dark);
    font-size: 10px;
    line-height: 1.2em;
    opacity: 0.75;
    text-align: center;
  }
}
/* =========================================================
   PK-LEGAL WEEKLY LAW BRIEFING
   Reusable stylesheet for weekly legal briefing pages
   Updated: improved issue-card contrast, non-sticky TOC,
   tighter masthead spacing, responsive refinements
   ========================================================= */

.pk-brief {
  --pk-red: #8a0104;
  --pk-charcoal: #4b4a4d;
  --pk-heading: #4b4a4d;
  --pk-text: #555555;
  --pk-muted: #6b6b70;
  --pk-soft: #f8f4f4;
  --pk-paper: #fffdf9;
  --pk-border: #e3d7d7;
  --pk-green: #1f6b43;
  --pk-amber: #8a5a00;

  /* Match PK-Legal article typography */
  --pk-serif: "Noto Serif Lao", Georgia, "Times New Roman", serif;

  display: block;

  /*
   * Responsive article width
   * ------------------------
   * Keeps the complete Weekly Legal Insight centred and readable on
   * large screens while remaining fluid on tablets and mobile.
   */
  width: calc(100% - 48px);
  max-width: 1200px;
  margin: 24px auto 34px;
  padding: 0;
  overflow: hidden;

  background: #ffffff;
  color: var(--pk-text);

  /*
   * Inherit the normal article/body font from the active PK-Legal theme.
   * This keeps Weekly Brief body copy consistent with ordinary blog articles.
   */
  font-family: inherit;
  font-size: 17px;
  line-height: 1.72;
  text-align: left;
}

.pk-brief *,
.pk-brief *::before,
.pk-brief *::after {
  box-sizing: border-box;
}

/* =========================================================
   THEME / WORDPRESS NORMALISATION
   ========================================================= */

.pk-brief .pk-status-mark p,
.pk-brief .pk-principle-num p,
.pk-brief .pk-read-num p,
.pk-brief .pk-foot-mark p {
  margin: 0 !important;
  color: inherit !important;
  font-size: inherit;
  font-weight: inherit;
  line-height: 1;
}

.pk-brief p,
.pk-brief h2,
.pk-brief h3 {
  max-width: none;
  margin: 0;
  padding: 0;
  float: none;
  text-indent: 0;
}

.pk-brief p {
  color: var(--pk-text);
}

.pk-brief h2,
.pk-brief h3 {
  font-family: var(--pk-serif);
  color: var(--pk-heading);
  font-weight: 700;
}

.pk-brief a {
  color: var(--pk-red);
  text-decoration: none;
}

.pk-brief a:hover {
  text-decoration: underline;
}

/* =========================================================
   MASTHEAD
   ========================================================= */

.pk-brief .pk-masthead {
  padding: 26px 24px 24px;
  border-top: 5px solid var(--pk-red);
  border-bottom: 1px solid var(--pk-border);
  background: linear-gradient(135deg, #ffffff 0%, #fbf7f7 100%);
}

.pk-brief .pk-masthead-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 26px;
  align-items: flex-end;
  justify-content: space-between;
}

.pk-brief .pk-masthead-lead {
  flex: 1 1 420px;
  min-width: 0;
}

.pk-brief .pk-kicker {
  margin-bottom: 12px !important;
  color: var(--pk-red) !important;
  font-size: 13px;
  line-height: 1.35;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.11em;
}

.pk-brief .pk-masthead-title {
  margin-bottom: 12px !important;
  color: var(--pk-heading);
  font-family: var(--pk-serif);
  font-size: 40px;
  line-height: 1.17;
  font-weight: 700;
}

.pk-brief .pk-deck {
  color: var(--pk-text);
  font-size: 18px;
  line-height: 1.7;
}

.pk-brief .pk-issue {
  flex: 0 1 300px;
  padding: 20px 22px;
  border-left: 5px solid var(--pk-red);
  background: var(--pk-charcoal);
}

.pk-brief .pk-issue-label {
  margin-bottom: 7px !important;
  color: #ededed !important;
  font-size: 12px;
  line-height: 1.35;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.pk-brief .pk-issue-date {
  margin-bottom: 10px !important;
  color: #ffffff !important;
  font-family: var(--pk-serif);
  font-size: 24px;
  line-height: 1.3;
  font-weight: 700;
}

.pk-brief .pk-issue-topics {
  color: #e6e6e6 !important;
  font-size: 14px;
  line-height: 1.6;
}

/* =========================================================
   STATUS BAND
   ========================================================= */

.pk-brief .pk-status {
  border-bottom: 1px solid var(--pk-border);
  background: var(--pk-soft);
}

.pk-brief .pk-status-grid {
  display: flex;
  flex-wrap: wrap;
}

.pk-brief .pk-status-item {
  flex: 1 1 320px;
  display: flex;
  gap: 13px;
  align-items: flex-start;
  min-width: 0;
  padding: 18px 24px;
}

.pk-brief .pk-status-item + .pk-status-item {
  border-left: 1px solid var(--pk-border);
}

.pk-brief .pk-status-mark {
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #d8c6c6;
  background: #ffffff;
  color: var(--pk-red);
  font-weight: 700;
  line-height: 1;
}

.pk-brief .pk-status-body {
  min-width: 0;
}

.pk-brief .pk-status-head {
  margin-bottom: 3px !important;
  color: var(--pk-heading);
  font-family: var(--pk-serif);
  font-size: 17px;
  line-height: 1.45;
  font-weight: 700;
}

.pk-brief .pk-status-text {
  color: var(--pk-text);
  font-size: 15px;
  line-height: 1.65;
}

/* =========================================================
   IN THIS BRIEF
   ========================================================= */

.pk-brief .pk-toc {
  margin: 30px 0 34px;
  border: 1px solid var(--pk-border);
  border-top: 3px solid var(--pk-red);
  background: var(--pk-paper);
}

.pk-brief .pk-toc-title {
  padding: 12px 18px;
  border-bottom: 1px solid var(--pk-border);
  background: var(--pk-soft);
  color: var(--pk-heading);
  font-family: var(--pk-serif);
  font-size: 17px;
  line-height: 1.45;
  font-weight: 700;
}

.pk-brief .pk-toc-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 14px 18px;
  counter-reset: pktoc;
}

.pk-brief .pk-toc-links a {
  counter-increment: pktoc;
  padding: 7px 13px;
  border: 1px solid var(--pk-border);
  background: #ffffff;
  color: var(--pk-text);
  font-size: 14px;
  line-height: 1.4;
}

.pk-brief .pk-toc-links a::before {
  content: counter(pktoc) ". ";
  color: var(--pk-red);
  font-weight: 700;
}

.pk-brief .pk-toc-links a:hover {
  border-color: var(--pk-red);
  color: var(--pk-red);
  text-decoration: none;
}

/* =========================================================
   ARTICLE SECTIONS
   ========================================================= */

.pk-brief .pk-body {
  color: var(--pk-text);
}

.pk-brief .pk-section {
  padding: 32px 0;
  border-top: 1px solid var(--pk-border);
}

.pk-brief .pk-section:first-child {
  padding-top: 4px;
  border-top: 0;
}

.pk-brief .pk-h2 {
  margin-bottom: 16px !important;
  color: var(--pk-heading);
  font-size: 30px;
  line-height: 1.3;
}

.pk-brief .pk-h3 {
  margin-bottom: 12px !important;
  color: var(--pk-heading);
  font-size: 22px;
  line-height: 1.35;
}

.pk-brief .pk-para {
  margin-bottom: 17px !important;
  color: var(--pk-text);
  font-size: 17px;
  line-height: 1.72;
}

.pk-brief .pk-para:last-child {
  margin-bottom: 0 !important;
}

.pk-brief .pk-label {
  display: inline-block;
  margin-bottom: 13px !important;
  padding: 5px 11px;
  background: var(--pk-red) !important;
  color: #ffffff !important;
  font-size: 12px;
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.pk-brief .pk-case-title {
  margin-bottom: 12px !important;
  color: var(--pk-heading);
  font-size: 34px;
  line-height: 1.24;
}

.pk-brief .pk-cite {
  margin-bottom: 21px !important;
  color: #66666a;
  font-size: 16px;
  line-height: 1.65;
}

/* =========================================================
   CASE META
   ========================================================= */

.pk-brief .pk-meta {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 27px;
  border: 1px solid var(--pk-border);
  background: #ffffff;
}

.pk-brief .pk-meta-cell {
  flex: 1 1 200px;
  min-width: 0;
  padding: 14px 15px;
  border-left: 1px solid var(--pk-border);
}

.pk-brief .pk-meta-cell:first-child {
  border-left: 0;
}

.pk-brief .pk-meta-label {
  margin-bottom: 4px !important;
  color: #85858a;
  font-size: 11px;
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: 0.09em;
}

.pk-brief .pk-meta-value {
  color: var(--pk-heading);
  font-size: 14px;
  line-height: 1.5;
  font-weight: 700;
}

/* =========================================================
   KEY HOLDING
   ========================================================= */

.pk-brief .pk-holding {
  margin-bottom: 27px;
  padding: 19px 22px;
  border-left: 5px solid var(--pk-red);
  background: var(--pk-soft);
}

.pk-brief .pk-holding-label {
  margin-bottom: 6px !important;
  color: var(--pk-red) !important;
  font-size: 12px;
  line-height: 1.4;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.pk-brief .pk-holding-text {
  color: #3d3d3f;
  font-family: var(--pk-serif);
  font-size: 20px;
  line-height: 1.62;
}

/* =========================================================
   PRINCIPLES
   ========================================================= */

.pk-brief .pk-principles {
  margin-bottom: 21px;
}

.pk-brief .pk-principle {
  display: flex;
  gap: 13px;
  align-items: flex-start;
  margin-bottom: 12px;
  padding: 15px 16px;
  border: 1px solid var(--pk-border);
  background: #ffffff;
}

.pk-brief .pk-principle:last-child {
  margin-bottom: 0;
}

.pk-brief .pk-principle-num {
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--pk-charcoal);
  color: #ffffff;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
}

.pk-brief .pk-principle-body {
  min-width: 0;
}

.pk-brief .pk-principle-head {
  margin-bottom: 4px !important;
  color: var(--pk-heading);
  font-family: var(--pk-serif);
  font-size: 17px;
  line-height: 1.45;
  font-weight: 700;
}

.pk-brief .pk-principle-text {
  color: var(--pk-text);
  font-size: 16px;
  line-height: 1.68;
}

/* =========================================================
   OUTCOME
   ========================================================= */

.pk-brief .pk-outcome {
  padding: 18px 20px;
  border: 1px solid #dbe7df;
  background: #f4f7f5;
}

.pk-brief .pk-outcome-label {
  margin-bottom: 5px !important;
  color: var(--pk-green) !important;
  font-size: 24px;
  line-height: 1.4;
  font-weight: 700;
}

.pk-brief .pk-outcome-text {
  color: var(--pk-text);
  font-size: 16px;
  line-height: 1.68;
}

/* =========================================================
   PRACTICE NOTE
   ========================================================= */

.pk-brief .pk-note {
  margin-top: 5px;
  padding: 17px 20px;
  border-left: 4px solid var(--pk-amber);
  background: #fff9ec;
}

.pk-brief .pk-note-text {
  color: var(--pk-text);
  font-size: 16px;
  line-height: 1.68;
}

.pk-brief .pk-note-text strong {
  color: #6d4600;
}

/* =========================================================
   DRAFTING IMPACT
   ========================================================= */

.pk-brief .pk-impact-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 13px;
}

.pk-brief .pk-impact {
  flex: 1 1 300px;
  min-width: 0;
  padding: 17px 18px;
  border: 1px solid var(--pk-border);
  background: var(--pk-paper);
}

.pk-brief .pk-impact-head {
  margin-bottom: 6px !important;
  padding-left: 30px;
  position: relative;
  color: var(--pk-heading);
  font-family: var(--pk-serif);
  font-size: 16px;
  line-height: 1.48;
  font-weight: 700;
}

.pk-brief .pk-impact-head::before {
  content: "\2713";
  position: absolute;
  left: 0;
  top: 1px;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--pk-red);
  color: #ffffff;
  font-size: 12px;
  line-height: 1;
}

.pk-brief .pk-impact-text {
  color: var(--pk-text);
  font-size: 15px;
  line-height: 1.68;
	margin-left: 31px;
}

/* =========================================================
   READ FIRST
   ========================================================= */

.pk-brief .pk-read-item {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 15px 0;
  border-bottom: 1px solid var(--pk-border);
}

.pk-brief .pk-read-item:last-child {
  border-bottom: 0;
}

.pk-brief .pk-read-num {
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--pk-red);
  color: var(--pk-red);
  font-weight: 700;
  line-height: 1;
}

.pk-brief .pk-read-body {
  min-width: 0;
}

.pk-brief .pk-read-head {
  margin-bottom: 3px !important;
  color: var(--pk-heading);
  font-family: var(--pk-serif);
  font-size: 16px;
  line-height: 1.45;
  font-weight: 700;
}

.pk-brief .pk-read-text {
  color: var(--pk-text);
  font-size: 15px;
  line-height: 1.68;
}

/* =========================================================
   SOURCES
   ========================================================= */

.pk-brief .pk-sources {
  padding: 21px;
  background: var(--pk-charcoal);
}

.pk-brief .pk-sources .pk-h2,
.pk-brief .pk-sources .pk-h3 {
  color: #fff !important;
}

.pk-brief .pk-source-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}

.pk-brief .pk-source-links a {
  padding: 8px 12px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #ffffff;
  font-size: 13px;
  line-height: 1.45;
}

.pk-brief .pk-source-links a:hover {
  background: #ffffff;
  color: var(--pk-charcoal);
  text-decoration: none;
}

.pk-brief .pk-sources-note {
  color: #d6d6d6 !important;
  font-size: 13px;
  line-height: 1.6;
}

/* =========================================================
   EDITORIAL NOTE
   ========================================================= */

.pk-brief .pk-editorial {
  padding: 21px 0 0;
  border-top: 1px solid var(--pk-border);
}

.pk-brief .pk-editorial-text {
  color: #6f6f74;
  font-size: 14px;
  line-height: 1.65;
}

.pk-brief .pk-editorial-text strong {
  color: #555559;
}

/* =========================================================
   OPTIONAL FOOTER
   ========================================================= */

.pk-brief .pk-foot {
  padding: 20px 24px;
  border-top: 1px solid var(--pk-border);
  background: var(--pk-soft);
}

.pk-brief .pk-foot-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
}

.pk-brief .pk-foot-lead {
  flex: 1 1 320px;
  min-width: 0;
}

.pk-brief .pk-foot-title {
  color: var(--pk-heading);
  font-family: var(--pk-serif);
  font-size: 17px;
  line-height: 1.45;
  font-weight: 700;
}

.pk-brief .pk-foot-text {
  color: var(--pk-text);
  font-size: 14px;
  line-height: 1.6;
}

.pk-brief .pk-foot-mark {
  color: var(--pk-red) !important;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* =========================================================
   RESPONSIVE OUTER WIDTH
   ========================================================= */

@media (max-width: 900px) {
  .pk-brief {
    width: calc(100% - 32px);
    margin-top: 18px;
    margin-bottom: 28px;
  }
}

@media (max-width: 520px) {
  .pk-brief {
    width: calc(100% - 24px);
    margin-top: 12px;
    margin-bottom: 22px;
  }
}

/* =========================================================
   RESPONSIVE TYPOGRAPHY
   ========================================================= */

@media (max-width: 782px) {

  .pk-brief {
    font-size: 16.5px;
  }

  .pk-brief .pk-masthead-title {
    font-size: 32px;
  }

  .pk-brief .pk-case-title {
    font-size: 29px;
  }

  .pk-brief .pk-h2 {
    font-size: 26px;
  }

  .pk-brief .pk-h3 {
    font-size: 21px;
  }

  .pk-brief .pk-para {
    font-size: 16.5px;
  }

  .pk-brief .pk-holding-text {
    font-size: 18px;
  }

  .pk-brief .pk-status-item + .pk-status-item {
    border-left: 0;
    border-top: 1px solid var(--pk-border);
  }

  .pk-brief .pk-meta-cell {
    flex: 1 1 100%;
    border-left: 0;
    border-top: 1px solid var(--pk-border);
  }

  .pk-brief .pk-meta-cell:first-child {
    border-top: 0;
  }
}

@media (max-width: 520px) {

  .pk-brief .pk-masthead,
  .pk-brief .pk-foot {
    padding-left: 16px;
    padding-right: 16px;
  }

  .pk-brief .pk-status-item {
    padding-left: 16px;
    padding-right: 16px;
  }

  .pk-brief .pk-masthead-title {
    font-size: 28px;
  }

  .pk-brief .pk-case-title {
    font-size: 27px;
  }

  .pk-brief .pk-h2 {
    font-size: 24px;
  }

  .pk-brief .pk-h3 {
    font-size: 20px;
  }

  .pk-brief .pk-deck {
    font-size: 17px;
  }

  .pk-brief .pk-holding-text {
    font-size: 17px;
  }
}
.blog_meta_left a,
.blog_meta_left a:hover {
    color: #ffffff !important;
    text-decoration: none;
}
/* Quick Comparison table — smaller text */
.pk-comparison-table {
  font-size: 13px;
  line-height: 1.45;
}

.pk-comparison-table th {
  font-size: 13px;
  line-height: 1.4;
}

.pk-comparison-table td {
  font-size: 13px;
  line-height: 1.45;
}
.pk-page .pk-comparison-wrap {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
}
.pk-page .pk-comparison-table {
  width: 100%;
  max-width: 100%;
  table-layout: fixed;
}
/* =========================================================
   MOBILE FIX — QUICK COMPARISON TABLE
   Converts each country row into a readable stacked card.
   ========================================================= */

@media (max-width: 767px) {

  .pk-page .pk-comparison-table {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    table-layout: auto !important;
    border: 0 !important;
    font-size: 13px !important;
  }

  .pk-page .pk-comparison-table thead {
    display: none !important;
  }

  .pk-page .pk-comparison-table tbody {
    display: block !important;
    width: 100% !important;
  }

  .pk-page .pk-comparison-table tr {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 16px !important;
    padding: 0 !important;
    border: 1px solid #e3d7d7 !important;
    background: #ffffff !important;
  }

  .pk-page .pk-comparison-table td {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 10px 12px !important;
    border: 0 !important;
    border-bottom: 1px solid #eadede !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
    text-align: left !important;
    box-sizing: border-box !important;
  }

  .pk-page .pk-comparison-table td:last-child {
    border-bottom: 0 !important;
  }

  /* Country becomes the card heading */
  .pk-page .pk-comparison-table td:first-child {
    padding: 11px 12px !important;
    background: #f8f4f4 !important;
    color: #4b4a4d !important;
    font-size: 15px !important;
    font-weight: 700 !important;
  }

  /* Small labels above each remaining field */
  .pk-page .pk-comparison-table td:not(:first-child)::before {
    display: block !important;
    margin-bottom: 4px !important;
    color: #8a0104 !important;
    font-size: 11px !important;
    line-height: 1.3 !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
  }

  .pk-page .pk-comparison-table td:nth-child(2)::before {
    content: "Pakistan Translation?";
  }

  .pk-page .pk-comparison-table td:nth-child(3)::before {
    content: "Translation Must Include";
  }

  .pk-page .pk-comparison-table td:nth-child(4)::before {
    content: "Extra Steps";
  }

  /* Do not let the wrapper create page-level overflow */
  .pk-page .pk-comparison-wrap,
  .pk-page .pk-doc-download {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: visible !important;
  }
}
body .pk-page .pk-mobile-contact br{display:none}
body .pk-page .pk-mobile-contact{flex-flow:row wrap;justify-content:center}
body .pk-page .pk-mobile-contact-row,body .pk-page .pk-mobile-contact-note{flex:0 0 100%}
/* Weekly brief: overflow, heading and keyboard safeguards */
.pk-brief {
  overflow-wrap: anywhere;
}

.pk-brief :is(h1, h2, h3) {
  max-width: none;
  padding: 0;
  float: none;
  text-indent: 0;
}

.pk-brief a:focus-visible {
  outline: 2px solid var(--pk-red);
  outline-offset: 3px;
}

.pk-brief .pk-section {
  scroll-margin-top: 24px;
}
/* Make the date readable on the dark issue card */
.pk-brief .pk-issue-date,
.pk-brief .pk-issue-date time {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Add space before the “Drafting impact” heading */
.pk-brief .pk-outcome + .pk-h3,
.pk-brief .pk-outcome + h3 {
  margin-top: 24px !important;
}

/* Separate the editorial note from the footer block */
.pk-brief .pk-editorial {
  margin-bottom: 24px !important;
}

.pk-brief .pk-foot {
  margin-top: 24px !important;
}

/* =====================================================
   WEEKLY BRIEF — MODERN FAQ SECTION
   ===================================================== */

.pk-brief #pk-faq {
  padding-top: 50px;
}

.pk-brief #pk-faq > .pk-h2 {
  max-width: 850px;
  margin: 16px 0 10px !important;
  color: var(--pk-heading, #4b4a4d);
  font-size: 32px;
  line-height: 1.25;
}

.pk-brief #pk-faq .pk-faq-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-top: 28px;
}

.pk-brief #pk-faq .pk-faq-item {
  position: relative;
  box-sizing: border-box;
  min-width: 0;
  padding: 24px 24px 23px 72px;
  background: #ffffff;
  border: 1px solid #eadede;
  border-top: 3px solid var(--pk-red, #8a0104);
  border-radius: 8px;
  box-shadow: 0 7px 22px rgba(40, 32, 32, 0.07);
  transition:
    transform 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.pk-brief #pk-faq .pk-faq-item::before {
  content: "Q";
  position: absolute;
  top: 23px;
  left: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  color: #ffffff;
  background: var(--pk-red, #8a0104);
  border-radius: 50%;
  font-family: Arial, sans-serif;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
}

.pk-brief #pk-faq .pk-faq-item:hover {
  transform: translateY(-2px);
  border-color: rgba(138, 1, 4, 0.35);
  box-shadow: 0 12px 28px rgba(40, 32, 32, 0.11);
}

.pk-brief #pk-faq .pk-faq-question {
  margin: 0 0 10px !important;
  padding: 0 !important;
  color: var(--pk-heading, #4b4a4d) !important;
  font-size: 21px;
  font-weight: 700;
  line-height: 1.35;
}

.pk-brief #pk-faq .pk-faq-answer {
  margin: 0 !important;
  padding: 0 !important;
  color: #555054;
  font-size: 15.5px;
  line-height: 1.75;
}

/* FAQ consultation panel */

.pk-brief #pk-faq .pk-cta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  column-gap: 32px;
  align-items: center;
  margin-top: 30px;
  padding: 30px 32px;
  color: #ffffff;
  background:
    linear-gradient(
      135deg,
      var(--pk-red, #8a0104) 0%,
      #5f0002 100%
    );
  border-radius: 8px;
  box-shadow: 0 12px 30px rgba(91, 0, 3, 0.18);
}

.pk-brief #pk-faq .pk-cta-title {
  grid-column: 1;
  margin: 0 0 8px !important;
  padding: 0 !important;
  color: #ffffff !important;
  font-size: 23px;
  line-height: 1.3;
}

.pk-brief #pk-faq .pk-cta-text {
  grid-column: 1;
  margin: 0 !important;
  color: rgba(255, 255, 255, 0.9) !important;
  font-size: 15.5px;
  line-height: 1.65;
}

.pk-brief #pk-faq .pk-button {
  grid-column: 2;
  grid-row: 1 / span 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 13px 20px;
  color: var(--pk-red, #8a0104) !important;
  background: #ffffff;
  border: 1px solid #ffffff;
  border-radius: 5px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.35;
  text-align: center;
  text-decoration: none !important;
  transition:
    background 0.2s ease,
    color 0.2s ease,
    transform 0.2s ease;
}

.pk-brief #pk-faq .pk-button:hover {
  transform: translateY(-1px);
  color: #ffffff !important;
  background: #3f3d40;
  border-color: #3f3d40;
}

/* Responsive layout */

@media (max-width: 900px) {
  .pk-brief #pk-faq .pk-faq-list {
    grid-template-columns: 1fr;
  }

  .pk-brief #pk-faq .pk-cta {
    grid-template-columns: 1fr;
  }

  .pk-brief #pk-faq .pk-button {
    grid-column: 1;
    grid-row: auto;
    justify-self: start;
    margin-top: 20px;
  }
}

@media (max-width: 520px) {
  .pk-brief #pk-faq {
    padding-top: 40px;
  }

  .pk-brief #pk-faq > .pk-h2 {
    font-size: 26px;
  }

  .pk-brief #pk-faq .pk-faq-list {
    gap: 14px;
    margin-top: 22px;
  }

  .pk-brief #pk-faq .pk-faq-item {
    padding: 21px 18px 21px 61px;
  }

  .pk-brief #pk-faq .pk-faq-item::before {
    top: 20px;
    left: 16px;
    width: 31px;
    height: 31px;
  }

  .pk-brief #pk-faq .pk-faq-question {
    font-size: 19px;
  }

  .pk-brief #pk-faq .pk-cta {
    padding: 25px 20px;
  }

  .pk-brief #pk-faq .pk-button {
    width: 100%;
    box-sizing: border-box;
  }
}

/* =========================================================
   NEW: PROPERTY TRANSLATION PAGE + HOW-TO-ORDER ANIMATION
   Scoped to .pkp-page and .pk-order-animation.
   ========================================================= */

/* PAGE STYLES: relocated unchanged from the original HTML. */

.pkp-urdu{font-family:"Noto Nastaliq Urdu","Noto Naskh Arabic","Segoe UI",serif;font-size:1.06em;line-height:1.8}

.pkp-content{min-width:0}
.pkp-step-num{width:42px;height:42px;display:grid;place-items:center;background:var(--pkp-charcoal);color:#fff;font-weight:700}
.pkp-picker{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.pkp-picker a{display:flex;flex-direction:column;gap:4px;min-height:92px;padding:13px;border:1px solid var(--pkp-border);background:var(--pkp-paper);color:var(--pkp-text)}
.pkp-picker a:hover{border-color:var(--pkp-red);text-decoration:none}
.pkp-picker strong{color:var(--pkp-heading)}
.pkp-docs{display:grid;gap:18px}
.pkp-doc{border:1px solid var(--pkp-border);background:#fff}
.pkp-doc-head{padding:18px 18px 12px}.pkp-doc-head p:last-child{margin-bottom:0}
.pkp-asks{padding:10px 14px;background:var(--pkp-soft);font-size:14px}
.pkp-media{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px;padding:0 18px 18px}
.pkp-figure{margin:0;border:1px solid var(--pkp-border);background:#fff}
.pkp-figure img{display:block;width:100%;height:auto;max-width:100%}
.pkp-figure figcaption{padding:9px 11px;background:var(--pkp-soft);font-size:12.5px}
.pkp-sample-table{width:100%;border-collapse:collapse;font-size:13px;line-height:1.45;table-layout:fixed}
.pkp-sample-table th,.pkp-sample-table td{padding:9px 10px;border:1px solid var(--pkp-border);vertical-align:top;text-align:left;overflow-wrap:anywhere}
.pkp-sample-table th{width:34%;background:var(--pkp-soft);color:var(--pkp-heading)}
.pkp-download{display:inline-flex;margin-top:10px;padding:8px 11px;border:1px solid var(--pkp-red);font-size:13px}
.pkp-swipe{position:relative;overflow:hidden;aspect-ratio:4/3;background:#eee}
.pkp-swipe img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pkp-swipe .pkp-after{clip-path:inset(0 50% 0 0)}
.pkp-swipe-line{position:absolute;top:0;bottom:0;left:50%;width:2px;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.2);pointer-events:none}
.pkp-swipe input{position:absolute;left:10px;right:10px;bottom:10px;width:calc(100% - 20px);z-index:3}
.pkp-swipe-label{position:absolute;top:8px;padding:4px 7px;background:rgba(0,0,0,.65);color:#fff;font-size:11px;z-index:4}.pkp-swipe-label.left{left:8px}.pkp-swipe-label.right{right:8px}
.pkp-hotspot-wrap{position:relative;border:1px solid var(--pkp-border);background:#f4f0ee;overflow:hidden}
.pkp-hotspot-wrap img{display:block;width:100%;height:auto}
.pkp-hotspot{position:absolute;width:30px;height:30px;border-radius:50%;border:2px solid #fff;background:var(--pkp-red);color:#fff;font-weight:700;cursor:pointer;box-shadow:0 2px 9px rgba(0,0,0,.25)}
.pkp-hotspot:focus{outline:3px solid #ffd36c;outline-offset:2px}
.pkp-hotspot-panel{padding:14px 16px;border:1px solid var(--pkp-border);border-top:0;background:#fff}
.pkp-hotspot-panel strong{color:var(--pkp-heading)}
.pkp-table-wrap{width:100%;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
.pkp-table{width:100%;border-collapse:collapse;font-size:13px;line-height:1.45;min-width:720px}
.pkp-table th,.pkp-table td{padding:10px;border:1px solid var(--pkp-border);vertical-align:top;text-align:left}
.pkp-table th{background:var(--pkp-charcoal);color:#fff}
.pkp-country-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}
.pkp-country{padding:17px;border:1px solid var(--pkp-border);background:#fff}.pkp-country h3{margin-bottom:8px}
.pkp-country .pkp-source{font-size:12px;margin-top:10px}
.pkp-tabs{border:1px solid var(--pkp-border)}
.pkp-tab-buttons{display:flex;overflow:auto;background:var(--pkp-soft);border-bottom:1px solid var(--pkp-border)}
.pkp-tab-buttons button{flex:1 0 auto;min-height:44px;padding:9px 13px;border:0;border-right:1px solid var(--pkp-border);background:transparent;color:var(--pkp-heading);font-weight:600;cursor:pointer}
.pkp-tab-buttons button[aria-selected="true"]{background:#fff;color:var(--pkp-red)}
.pkp-tab-panel{padding:17px}.pkp-tab-panel[hidden]{display:none}
.pkp-verify{display:inline-block;margin-bottom:8px;padding:4px 7px;background:#fff4d7;color:#704c00;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em}
.pkp-glossary-tools{display:flex;gap:10px;align-items:center;margin-bottom:12px}
.pkp-glossary-search{width:100%;min-height:44px;padding:9px 12px;border:1px solid var(--pkp-border);font:inherit}
.pkp-glossary{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
.pkp-term{padding:12px;border:1px solid var(--pkp-border);background:#fff}
.pkp-term-top{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap}.pkp-term strong{color:var(--pkp-heading)}
.pkp-term p{font-size:13px;margin:5px 0 0}
.pkp-calc{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding:18px;border:1px solid var(--pkp-border);background:var(--pkp-paper)}
.pkp-form-row{margin-bottom:12px}.pkp-form-row label{display:block;font-weight:700;color:var(--pkp-heading);margin-bottom:5px}
.pkp-form-row select,.pkp-form-row input[type="number"]{width:100%;min-height:44px;padding:9px 10px;border:1px solid var(--pkp-border);font:inherit}
.pkp-check{display:flex;gap:8px;align-items:flex-start;margin:8px 0}
.pkp-calc-result{padding:16px;background:var(--pkp-charcoal);color:#fff}
.pkp-calc-result strong{display:block;color:#fff;font-size:26px;font-family:"Noto Serif Lao",Georgia,serif}
.pkp-calc-result p{color:#eee}
.pkp-fees{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.pkp-fee{padding:14px;border:1px solid var(--pkp-border);background:#fff}.pkp-fee strong{display:block;color:var(--pkp-heading)}
.pkp-faq details{border:1px solid var(--pkp-border);background:#fff;margin-bottom:9px}
.pkp-faq summary{cursor:pointer;padding:13px 15px;color:var(--pkp-heading);font-weight:700}
.pkp-faq-answer{padding:0 15px 14px}
.pkp-review{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding:16px;border:1px solid var(--pkp-border);background:var(--pkp-soft)}
.pkp-review div{font-size:13px}.pkp-review strong{display:block;color:var(--pkp-heading)}


.pkp-sticky{display:none}
.pkp-pdf-note{font-size:12px;color:#6c6c70;margin-top:8px}
.pkp-official-sources{font-size:13px}
.pkp-official-sources li{margin-top:5px}


.pkp-media-missing{display:grid;place-items:center;min-height:220px;padding:18px;border:1px dashed var(--pkp-border);background:var(--pkp-soft);color:#666;text-align:center;font-size:13px}

@media(max-width:1024px){
  
  
  .pkp-picker{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:782px){
  .pkp-media,.pkp-country-grid,.pkp-calc {grid-template-columns:1fr}
 
  .pkp-picker{grid-template-columns:1fr 1fr}
  .pkp-glossary{grid-template-columns:1fr}
  .pkp-fees{grid-template-columns:1fr}
  .pkp-review{grid-template-columns:1fr 1fr}
  
  .pkp-table{min-width:0}
  .pkp-table,.pkp-table tbody,.pkp-table tr,.pkp-table td{display:block;width:100%}
  .pkp-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .pkp-table tr{margin-bottom:12px;border:1px solid var(--pkp-border)}
  .pkp-table td{display:grid;grid-template-columns:minmax(105px,34%) minmax(0,1fr);gap:8px;border:0;border-bottom:1px solid var(--pkp-border)}
  .pkp-table td:last-child{border-bottom:0}
  .pkp-table td:before{font-weight:700;color:var(--pkp-heading)}
  .pkp-comparison td:nth-child(1):before{content:"Document"}
  .pkp-comparison td:nth-child(2):before{content:"What it proves"}
  .pkp-comparison td:nth-child(3):before{content:"Who asks"}
  .pkp-comparison td:nth-child(4):before{content:"Turnaround"}
  .pkp-comparison td:nth-child(5):before{content:"Fee"}
  .pkp-destination td:nth-child(1):before{content:"Destination"}
  .pkp-destination td:nth-child(2):before{content:"Pakistan translation?"}
  .pkp-destination td:nth-child(3):before{content:"Core requirement"}
  .pkp-destination td:nth-child(4):before{content:"Extra step"}
  .pkp-sticky{position:fixed;display:grid;grid-template-columns:1fr 1fr;gap:8px;left:0;right:0;bottom:0;padding:8px 10px;background:#fff;border-top:1px solid var(--pkp-border);z-index:9999}
  .pkp-sticky a{min-height:46px}
  
}
@media(max-width:480px){
  .pkp-picker,.pkp-review {grid-template-columns:1fr}
  .pkp-table td{grid-template-columns:1fr;gap:3px}
  .pkp-step-num{width:36px;height:36px}
}
@media(prefers-reduced-motion:reduce){
  .pkp-page *{scroll-behavior:auto!important;transition:none!important;animation:none!important}
}

/* REUSABLE ANIMATION STYLES */
/* =========================================================
   PK-LEGAL — REUSABLE HOW-TO-ORDER ANIMATION
   Global component CSS
   Used on Translation, Fard, Intiqal and Pack pages
========================================================= */
.pk-order-animation {
    --pkoa-red: #8a0104;
    --pkoa-red-dark: #650003;
    --pkoa-charcoal: #4b4a4d;
    --pkoa-text: #4c4c4e;
    --pkoa-soft: #f8f4f4;
    --pkoa-paper: #fffdf9;
    --pkoa-border: #eadede;
    --pkoa-green: #25D366;

    display: block;
    width: 100%;
    clear: both;
    float: none;
    margin: 32px 0;
    color: var(--pkoa-text);
}

.pk-order-animation *,
.pk-order-animation *::before,
.pk-order-animation *::after {
    box-sizing: border-box;
}
/* =========================================================
   COMPONENT SHELL
========================================================= */

.pk-order-animation .pkoa-shell {
    width: 100%;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--pkoa-border);
}

.pk-order-animation .pkoa-head {
    padding: 25px 26px 20px;
    border-top: 5px solid var(--pkoa-red);
    background: linear-gradient(
        135deg,
        #fff 0%,
        var(--pkoa-soft) 100%
    );
}

.pk-order-animation .pkoa-head h2 {
    margin-top: 0;
    margin-bottom: 9px;
}

.pk-order-animation .pkoa-head p {
    max-width: 850px;
    margin-bottom: 0;
}


/* =========================================================
   MAIN TWO-COLUMN AREA
========================================================= */

.pk-order-animation .pkoa-stage {
    display: grid;
    grid-template-columns:
        minmax(270px, 0.82fr)
        minmax(0, 1.35fr);

    gap: 28px;

    width: 100%;
    padding: 26px;
    align-items: stretch;
}


/* =========================================================
   PHONE MOCKUP
========================================================= */

.pk-order-animation .pkoa-phone-wrap {
    display: flex;
    align-items: center;
    justify-content: center;

    min-width: 0;
    min-height: 430px;

    padding: 20px;

    position: relative;
    overflow: hidden;

    background: var(--pkoa-soft);
    border: 1px solid var(--pkoa-border);
}

.pk-order-animation .pkoa-phone-wrap::before,
.pk-order-animation .pkoa-phone-wrap::after {
    content: "";
    position: absolute;
    border: 1px solid rgba(138, 1, 4, 0.10);
    border-radius: 50%;
    pointer-events: none;
}

.pk-order-animation .pkoa-phone-wrap::before {
    width: 270px;
    height: 270px;
    left: -120px;
    top: -110px;
}

.pk-order-animation .pkoa-phone-wrap::after {
    width: 180px;
    height: 180px;
    right: -80px;
    bottom: -70px;
}

.pk-order-animation .pkoa-phone {
    width: min(286px, 100%);
    min-height: 390px;

    position: relative;
    z-index: 2;

    overflow: hidden;

    border: 8px solid var(--pkoa-charcoal);
    border-radius: 28px;

    background: #fff;

    box-shadow: 0 14px 36px rgba(46, 35, 35, 0.10);
}


/* PHONE HEADER */

.pk-order-animation .pkoa-phone-top {
    display: flex;
    align-items: center;
    gap: 9px;

    min-height: 48px;
    padding: 7px 14px;

    background: var(--pkoa-charcoal);
    color: #fff;

    font-size: 13px;
    line-height: 1.25;
}

.pk-order-animation .pkoa-phone-top strong {
    color: #fff;
}

.pk-order-animation .pkoa-phone-top small {
    color: #eee;
}

.pk-order-animation .pkoa-avatar {
    display: grid;
    place-items: center;

    width: 27px;
    height: 27px;

    flex: 0 0 27px;

    border-radius: 50%;

    background: #fff;
    color: var(--pkoa-red);

    font-size: 11px;
    font-weight: 700;
}


/* =========================================================
   CHAT AREA
========================================================= */

.pk-order-animation .pkoa-chat {
    min-height: 334px;

    position: relative;

    padding: 14px 12px 55px;

    background:
        linear-gradient(
            rgba(255,255,255,.92),
            rgba(255,255,255,.92)
        ),
        repeating-linear-gradient(
            45deg,
            #eee 0,
            #eee 1px,
            transparent 1px,
            transparent 10px
        );
}

.pk-order-animation .pkoa-bubble {
    max-width: 88%;

    margin-bottom: 9px;
    padding: 9px 11px;

    border-radius: 12px;

    font-size: 13px;
    line-height: 1.45;

    opacity: 0;

    transform:
        translateY(8px)
        scale(.98);

    transition:
        opacity .35s ease,
        transform .35s ease;
}

.pk-order-animation .pkoa-bubble.user {
    margin-left: auto;

    background: #e8f7ed;

    border-bottom-right-radius: 3px;
}

.pk-order-animation .pkoa-bubble.firm {
    background: #fff;
    border: 1px solid var(--pkoa-border);

    border-bottom-left-radius: 3px;
}

.pk-order-animation .pkoa-bubble.show {
    opacity: 1;
    transform: none;
}


/* CHAT INPUT MOCKUP */

.pk-order-animation .pkoa-chat-footer {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        38px;

    gap: 7px;

    position: absolute;

    left: 10px;
    right: 10px;
    bottom: 10px;
}

.pk-order-animation .pkoa-message-field {
    min-height: 37px;

    padding: 8px 12px;

    border: 1px solid #ddd;
    border-radius: 20px;

    background: #fff;

    color: #888;
    font-size: 12px;
}

.pk-order-animation .pkoa-send {
    display: grid;
    place-items: center;

    width: 38px;
    height: 38px;

    border-radius: 50%;

    background: var(--pkoa-green);
    color: #fff;
}


/* =========================================================
   RIGHT-SIDE CONTENT
========================================================= */

.pk-order-animation .pkoa-main {
    min-width: 0;
    width: 100%;
}


/* STEP NAVIGATION */

.pk-order-animation .pkoa-progress {
    display: grid;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 6px;

    margin-bottom: 18px;
}

.pk-order-animation .pkoa-progress button {
    width: 100%;
    min-height: 44px;

    padding: 7px 8px;

    border: 1px solid var(--pkoa-border);

    background: #fff;
    color: var(--pkoa-text);

    cursor: pointer;

    font-size: 12px;
    line-height: 1.3;
}

.pk-order-animation .pkoa-progress button.active {
    border-color: var(--pkoa-charcoal);

    background: var(--pkoa-charcoal);
    color: #fff;
}


/* =========================================================
   ANIMATED STEP
========================================================= */

.pk-order-animation .pkoa-slide { margin-bottom: 12px; }

.pk-order-animation .pkoa-slide.active {
    display: block;

    animation:
        pkoaSlideIn
        .42s ease both;
}

.pk-order-animation .pkoa-slide h3 {
    margin-top: 0;
    margin-bottom: 8px;
}

.pk-order-animation .pkoa-slide p {
    margin-bottom: 12px;
}

/* SMALL INFORMATION BOXES */

/* =========================================================
   FEE TERMS
========================================================= */

/* =========================================================
   CONTROLS
========================================================= */

.pk-order-animation .pkoa-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 10px;

    margin-top: 16px;
}

.pk-order-animation .pkoa-control-group {
    display: flex;
    flex-wrap: wrap;

    gap: 7px;
}

.pk-order-animation .pkoa-control {
    min-height: 40px;

    padding: 7px 11px;

    border: 1px solid var(--pkoa-red);

    background: #fff;
    color: var(--pkoa-red);

    cursor: pointer;
}

.pk-order-animation .pkoa-control.primary {
    background: var(--pkoa-red);
    color: #fff;
}


/* TIMER */

.pk-order-animation .pkoa-timer {
    flex: 1;

    width: 100%;
    max-width: 220px;
    height: 5px;

    overflow: hidden;

    background: #eee;
}

.pk-order-animation .pkoa-timer span {
    display: block;

    width: 0;
    height: 100%;

    background: var(--pkoa-red);
}

.pk-order-animation .pkoa-timer.running span {
    animation:
        pkoaTimer
        5.5s linear forwards;
}


/* =========================================================
   FINAL WHATSAPP CTA
========================================================= */

.pk-order-animation .pkoa-bottom {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        auto;

    gap: 18px;
    align-items: center;

    padding: 16px 26px;

    background: var(--pkoa-charcoal);
    color: #fff;
}

.pk-order-animation .pkoa-bottom strong {
    color: #fff;
}




/* =========================================================
   ANIMATION
========================================================= */

@keyframes pkoaSlideIn {

    from {
        opacity: 0;
        transform: translateX(12px);
    }

    to {
        opacity: 1;
        transform: none;
    }

}

@keyframes pkoaTimer {

    from {
        width: 0;
    }

    to {
        width: 100%;
    }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 840px) {

    .pk-order-animation .pkoa-stage {
        grid-template-columns:
            minmax(0, 1fr);
    }

    .pk-order-animation .pkoa-phone-wrap {
        min-height: 360px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    .pk-order-animation {
        margin: 24px 0;
    }

    .pk-order-animation .pkoa-head {
        padding:
            20px 16px
            17px;
    }

    .pk-order-animation .pkoa-stage {
        padding: 16px;

        gap: 18px;
    }

    .pk-order-animation .pkoa-progress {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    

    

    .pk-order-animation .pkoa-controls {
        flex-direction: column;
        align-items: stretch;
    }

    .pk-order-animation .pkoa-control-group {
        display: grid;
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }

    .pk-order-animation .pkoa-control {
        width: 100%;
    }

    .pk-order-animation .pkoa-timer {
        max-width: none;
    }

    .pk-order-animation .pkoa-bottom {
        grid-template-columns:
            minmax(0, 1fr);

        padding: 16px;
    }
}

/* VERY SMALL PHONES */

@media (max-width: 390px) {

    .pk-order-animation .pkoa-progress {
        grid-template-columns:
            minmax(0, 1fr);
    }

    .pk-order-animation .pkoa-control-group {
        grid-template-columns:
            minmax(0, 1fr);
    }

    .pk-order-animation .pkoa-phone-wrap {
        padding: 12px;
    }

    .pk-order-animation .pkoa-phone {
        width: 100%;
    }

}


/* ACCESSIBILITY */

@media (prefers-reduced-motion: reduce) {

    .pk-order-animation *,
    .pk-order-animation *::before,
    .pk-order-animation *::after {
        animation: none !important;
        transition: none !important;
    }

    .pk-order-animation .pkoa-timer {
        display: none;
    }

}

/* Progressive enhancement and explicit hidden-state protection. */
.pk-order-animation [hidden] { display:none !important; }
.pk-order-animation .pkp-step-num { margin-bottom:12px; }
.pk-order-animation .pkoa-progress { display:none; }
.pk-order-animation.pkoa-ready .pkoa-progress { display:grid; }
.pk-order-animation:not(.pkoa-ready) .pkoa-phone-wrap { display:none; }
.pk-order-animation:not(.pkoa-ready) .pkoa-stage { grid-template-columns:minmax(0,1fr); }
.pk-order-animation button:focus-visible, .pk-order-animation a:focus-visible { outline:3px solid #1f6b43; outline-offset:3px; }


/* WordPress may add empty paragraphs to Custom HTML content. They must not
   consume grid cells. Explicit placement also protects the page's main column. */



.pk-order-animation p:empty { display:none; }
.pk-order-animation { min-width:0; container-type:inline-size; }
.pk-order-animation .pkoa-stage > .pkoa-phone-wrap { grid-column:1; grid-row:1; }
.pk-order-animation .pkoa-stage > .pkoa-main { grid-column:2; grid-row:1; }
.pk-order-animation .pkoa-stage > p { display:none; }
.pk-order-animation:not(.pkoa-ready) .pkoa-stage > .pkoa-main { grid-column:1; }
@media(max-width:1024px) {
 
}
@media(max-width:840px) {
 .pk-order-animation .pkoa-stage > .pkoa-phone-wrap,.pk-order-animation .pkoa-stage > .pkoa-main { grid-column:1; grid-row:auto; }
}
/* A page can be narrow inside a desktop sidebar layout. Adapt to its available
   width as well as the viewport. */
@container (max-width:740px) {
 .pk-order-animation .pkoa-stage { grid-template-columns:minmax(0,1fr); }
 .pk-order-animation .pkoa-stage > .pkoa-phone-wrap,.pk-order-animation .pkoa-stage > .pkoa-main { grid-column:1; grid-row:auto; }
 .pk-order-animation .pkoa-progress { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .pk-order-animation .pkoa-bottom { grid-template-columns:minmax(0,1fr); }
}
@container (max-width:420px) {
 .pk-order-animation .pkoa-head,.pk-order-animation .pkoa-stage { padding:16px; }
 .pk-order-animation .pkoa-controls { flex-direction:column; align-items:stretch; }
 .pk-order-animation .pkoa-control-group { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); }
 .pk-order-animation .pkoa-timer { max-width:none; }
 .pk-order-animation .pkoa-bottom { padding:16px; }
}

/* CNIC REFERENCE ALIGNMENT — uses shared site components */

/* Match the measured CNIC page typography. Shared pk-* component classes below
   supply their own exact sizing, spacing, borders and responsive behavior. */
body .pkp-page {
 --pkp-red:var(--pk-red); --pkp-red-dark:#650003; --pkp-charcoal:var(--pk-dark);
 --pkp-heading:var(--pk-dark); --pkp-text:var(--pk-dark); --pkp-soft:var(--pk-light);
 --pkp-paper:#fffdf9; --pkp-border:var(--pk-border); --pkp-green:var(--pk-green);
 --pkp-amber:#8a5a00; --pkp-shadow:var(--pk-shadow-sm);
 font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
 font-size:20px; font-weight:400; line-height:1.7; color:var(--pk-dark);
 background:#fff; overflow-wrap:anywhere;
}
body .pkp-page :is(h1,h2,h3) { font-family:"Noto Serif Lao"; font-weight:400; color:var(--pk-dark); padding:0; }
body .pkp-page h2 { font-size:34px; line-height:1.3; letter-spacing:-.01em; margin:0 0 10px; }
body .pkp-page h3 { font-size:22px; line-height:1.3; margin:0 0 10px; }
body .pkp-page p { font-size:16px; line-height:1.6; margin:0; padding:0; }
body .pkp-page .pk-kicker { line-height:25.6px; }
body .pkp-page .pk-content-block { padding:0; border:0; }
body .pkp-page .pk-grid br,body .pkp-page .pk-actions br,body .pkp-page .pk-mobile-toc br { display:none; }
body .pkp-page .pk-summary-list,body .pkp-page .pk-summary-list li { margin:0; }
body .pkp-page .pk-facts-wrap { margin:0; }
body .pkp-page .pkp-content { min-width:0; }
body .pkp-page .pk-layout > aside { grid-column:1; grid-row:1; }
body .pkp-page .pk-layout > .pkp-content { grid-column:2; grid-row:1; }
body .pkp-page .pk-layout > p,body .pkp-page .pk-layout > br { display:none; }
body .pkp-page .pkp-sidebar { position:sticky; top:30px; }
body.admin-bar .pkp-page .pkp-sidebar { top:62px; }
body .pkp-page .pkp-sidebar .pk-toc { position:static; max-height:calc(100vh - 90px); overflow-y:auto; }
body .pkp-page .pk-toc a[aria-current="location"] { color:var(--pk-red); background:#faf3f3; border-left-color:var(--pk-red); }
body .pkp-page .pk-toc-title { line-height:1.7; }
body .pkp-page .pk-mobile-toc { font-size:18px; line-height:1.7; }
body .pkp-page .pk-facts .pk-fact span { display:block; }
body .pkp-page .pkp-doc-head { padding:26px 26px 18px; }
body .pkp-page .pkp-doc { border-radius:var(--pk-radius); }
body .pkp-page .pkp-doc-head h3 { font-size:21px; letter-spacing:-.01em; }
body .pkp-page .pkp-media { padding:0 26px 26px; gap:22px; }
body .pkp-page .pkp-asks { padding:16px 26px; font-size:15px; line-height:1.6; }
body .pkp-page .pkp-country-card { padding:26px; border-radius:var(--pk-radius); }
body .pkp-page .pkp-country-card h3 { font-size:21px; line-height:1.3; letter-spacing:-.01em; }
body .pkp-page .pkp-country-card p { font-size:15px; line-height:1.6; }
body .pkp-page .pkp-faq details { border-radius:var(--pk-radius); margin-bottom:10px; }
body .pkp-page .pkp-faq summary { padding:18px 56px 18px 20px; font-size:15.5px; line-height:1.7; font-weight:600; position:relative; list-style:none; }
body .pkp-page .pkp-faq summary::-webkit-details-marker { display:none; }
body .pkp-page .pkp-faq summary::after { content:"+"; position:absolute; right:20px; top:18px; font-size:24px; line-height:1; color:var(--pk-red); }
body .pkp-page .pkp-faq details[open] summary::after { content:"−"; }
body .pkp-page .pkp-faq-answer { padding:0 20px 20px; font-size:15px; line-height:1.7; }
body .pkp-page .pkp-faq-answer p { font-size:15px; line-height:1.7; }
body .pkp-page .pkp-calculator-title { margin-top:22px; }
body .pkp-page .pkp-table,body .pkp-page .pkp-sample-table { font-family:inherit; }
body .pkp-page .pk-order-animation { margin:0 0 60px; }
body .pkp-page .pkoa-head { padding:30px 28px; }
body .pkp-page .pkoa-stage { padding:26px; }
body .pkp-page .pkoa-slide h3 { font-size:21px; line-height:1.3; }
body .pkp-page .pkoa-slide p { font-size:15px; line-height:1.6; }
@media(max-width:1024px) {
 body .pkp-page .pk-layout > aside,body .pkp-page .pk-layout > .pkp-content { grid-column:1; grid-row:auto; }
 body .pkp-page .pkp-sidebar { position:static; }
 body .pkp-page .pkp-sidebar .pk-toc { max-height:none; overflow:visible; }
}
@media(max-width:768px) {
 body .pkp-page .pk-hero h2 { font-size:32px; }
 body .pkp-page .pkp-media,body .pkp-page .pkp-country-grid,body .pkp-page .pkp-calc { grid-template-columns:1fr; }
 body .pkp-page .pkp-doc-head { padding:26px 26px 18px; }
}
@media(prefers-reduced-motion:reduce) { body .pkp-page * { scroll-behavior:auto!important; transition:none!important; animation:none!important; } }


/* PK-LEGAL — CORRECTIONS FOR THE SIX REPORTED COMPONENTS
   Scoped to the property page; shared CNIC/site styling is preserved. */

/* WordPress may wrap links in paragraphs and insert br elements. */
body .pkp-page .pk-toc br,
body .pkp-page .pkp-picker br,
body .pkp-page .pkp-tab-buttons br,
body .pkp-page .pkoa-progress br,
body .pkp-page .pkoa-controls br,
body .pkp-page .pkoa-control-group br,
body .pkp-page .pkoa-bottom br,
body .pkp-page .pkp-calc-result > br { display:none; }
body .pkp-page .pkoa-bottom > p { margin:0; padding:0; }
body .pkp-page .pk-toc p { margin:0; padding:0; font:inherit; }
body .pkp-page .pkp-picker > p { display:contents; }
body .pkp-page .pkp-picker > p:empty { display:none; }
body .pkp-page .pk-toc a { color:var(--pk-dark); text-decoration:none; }
body .pkp-page .pk-toc a:hover,
body .pkp-page .pk-toc a.pk-active { color:var(--pk-red); background:#faf3f3; border-left-color:var(--pk-red); }

/* Fill all picker columns rather than placing br nodes between cards. */
body .pkp-page .pkp-picker { gap:12px; margin-top:26px; align-items:stretch; }
body .pkp-page .pkp-picker a {
 display:flex; flex-direction:column; justify-content:center; gap:8px;
 min-width:0; height:auto; min-height:112px; padding:16px;
 border:1px solid var(--pk-border); border-radius:var(--pk-radius-sm);
 color:var(--pk-dark); background:#fffdf9; font-size:15px; line-height:1.5;
 text-decoration:none;
}
body .pkp-page .pkp-picker a > span { font-size:15px; line-height:1.5; }
body .pkp-page .pkp-picker .pkp-urdu { font-size:20px; line-height:1.8; }
body .pkp-page .pkp-picker a:hover { color:var(--pk-red); border-color:var(--pk-red); text-decoration:none; }

/* Stable, accessible field diagram with no external image dependency. */
body .pkp-page .pkp-field-guide { padding:24px; margin-top:26px; background:#fffdf9; border:1px solid var(--pk-border); border-radius:var(--pk-radius); }
body .pkp-page .pkp-field-guide-title { display:block; font-size:19px; line-height:1.5; margin-bottom:6px; }
body .pkp-page .pkp-field-guide-note { font-size:13px; line-height:1.6; margin-bottom:20px; }






body .pkp-page .pkp-hotspot-panel { padding:20px 24px; font-size:15px; line-height:1.6; }
body .pkp-page .pkp-hotspot-panel strong { display:block; margin-bottom:6px; }

/* Province tabs: override the theme's generic white-button styling. */
body .pkp-page .pkp-tab-buttons { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0; }
body .pkp-page .pkp-tab-buttons > p { display:contents; }
body .pkp-page .pkp-tab-buttons button {
 appearance:none; display:block; width:100%; min-width:0; min-height:48px; height:auto;
 margin:0; padding:12px 10px; border:0; border-right:1px solid var(--pk-border); border-radius:0;
 background:var(--pk-light); color:var(--pk-dark); box-shadow:none;
 font-family:inherit; font-size:15px; font-weight:600; line-height:1.5; text-align:center; cursor:pointer;
}
body .pkp-page .pkp-tab-buttons button:last-of-type { border-right:0; }
body .pkp-page .pkp-tab-buttons button[aria-selected="true"] { background:var(--pk-red); color:#fff; box-shadow:inset 0 -3px 0 #650003; }
body .pkp-page .pkp-tab-panel { padding:24px; }
body .pkp-page .pkp-tab-panel[hidden] { display:none!important; }

/* Calculator: readable form controls, compact result, explicit CTA styling. */
body .pkp-page .pkp-calc { align-items:start; margin-top:16px; gap:20px; padding:22px; }
body .pkp-page .pkp-form-row { margin:0 0 18px; }
body .pkp-page .pkp-form-row label { margin:0 0 8px; padding:0; font-size:15px; line-height:1.5; }
body .pkp-page .pkp-form-row > br { display:none; }
body .pkp-page .pkp-form-row :is(select,input[type="number"]) { margin:0; padding:10px 12px; min-height:46px; height:auto; font-family:inherit; font-size:16px; line-height:1.5; color:var(--pk-dark); background:#fff; }
body .pkp-page .pkp-check { display:flex; align-items:flex-start; gap:10px; margin:12px 0; padding:0; font-size:15px; line-height:1.6; }
body .pkp-page .pkp-check input[type="checkbox"] { appearance:auto; position:static; display:inline-block; flex:0 0 18px; width:18px; height:18px; min-width:18px; margin:3px 0 0; padding:0; accent-color:var(--pk-red); opacity:1; }
body .pkp-page .pkp-check span { font-size:15px; line-height:1.6; }
body .pkp-page .pkp-calc-result { height:auto; min-height:0; padding:22px; border-radius:var(--pk-radius-sm); color:#fff; }
body .pkp-page .pkp-calc-result > span { display:block; color:#fff; font-size:14px; line-height:1.5; }
body .pkp-page .pkp-calc-result strong { margin:8px 0 12px; font-size:28px; line-height:1.3; }
body .pkp-page .pkp-calc-result p { margin:0 0 12px; color:#fff; font-size:15px; line-height:1.6; }
body .pkp-page .pkp-calc-result #pkp-wa-order {
 display:inline-flex; align-items:center; justify-content:center; width:100%; min-height:46px;
 margin:8px 0 0; padding:12px 14px; border:1px solid #fff; border-radius:6px;
 background:#fff; color:#8a0000; font-size:15px; line-height:1.5; font-weight:600; text-align:center; text-decoration:none;
}
body .pkp-page .pkp-calc-result #pkp-wa-order:hover { background:#faf3f3; color:#650003; }

/* The shared pk-card has height:100%; animation slides must size to content. */
body .pkp-page .pk-order-animation .pkoa-main { height:auto; min-height:0; align-self:start; }
body .pkp-page .pk-order-animation .pkoa-slide { position:static; height:auto; min-height:0; max-height:none; margin-bottom:12px; overflow:visible; transform:none; }
body .pkp-page .pk-order-animation .pkoa-slide:hover { transform:none; }
body .pkp-page .pk-order-animation [hidden] { display:none!important; }
body .pkp-page .pk-order-animation .pkoa-progress button,
body .pkp-page .pk-order-animation .pkoa-control { appearance:none; margin:0; border-radius:4px; box-shadow:none; font-family:inherit; font-size:13px; line-height:1.4; }
body .pkp-page .pk-order-animation .pkoa-progress button { min-height:46px; padding:8px; background:#fff; color:var(--pk-dark); border:1px solid var(--pk-border); }
body .pkp-page .pk-order-animation .pkoa-progress button.active { background:var(--pk-dark); color:#fff; border-color:var(--pk-dark); }
body .pkp-page .pk-order-animation .pkoa-control { min-height:42px; padding:9px 12px; background:#fff; color:var(--pk-red); border:1px solid var(--pk-red); }
body .pkp-page .pk-order-animation .pkoa-control.primary { background:var(--pk-red); color:#fff; }
body .pkp-page .pk-order-animation .pkoa-bottom { position:static; clear:both; grid-template-columns:minmax(0,1fr) auto; }
body .pkp-page .pk-order-animation .pkoa-bottom strong { color:#fff; font-size:16px; line-height:1.6; }
body .pkp-page .pk-order-animation .pkoa-bottom a { display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:12px 16px; border:1px solid #fff; border-radius:6px; background:#fff; color:#8a0000; font-size:15px; line-height:1.5; font-weight:600; text-decoration:none; }

/* Contact cards: labels and values on separate lines with strong contrast. */
body .pkp-page .pk-contact-item { display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-start; gap:8px; min-width:0; height:auto; padding:20px; }
body .pkp-page .pk-contact-item strong { display:block; width:100%; margin:0; color:#fff; font-size:13px; line-height:1.5; }
body .pkp-page .pk-contact-item a { display:block; color:#fff; font-size:16px; line-height:1.6; text-decoration:underline; overflow-wrap:anywhere; }
body .pkp-page .pk-contact-item a:hover { color:#fff; text-decoration:none; }
body .pkp-page .pk-contact-item .pkp-contact-value { display:block; color:#fff; font-size:16px; line-height:1.6; }
body .pkp-page :is(.pkp-hotspot,.pkp-tab-buttons button,.pkoa-control,.pkoa-progress button):focus-visible { outline:3px solid #8a5a00; outline-offset:3px; }

@media(max-width:782px) {
 body .pkp-page .pkp-picker { grid-template-columns:repeat(2,minmax(0,1fr)); }
 body .pkp-page .pk-order-animation .pkoa-bottom { grid-template-columns:minmax(0,1fr); }
}
@media(max-width:480px) {
 body .pkp-page .pkp-picker { grid-template-columns:1fr; }
 
 body .pkp-page .pkp-field-guide,body .pkp-page .pkp-tab-panel,body .pkp-page .pkp-calc { padding:16px; }
}
@container(max-width:740px) {
 body .pkp-page .pk-order-animation .pkoa-bottom { grid-template-columns:minmax(0,1fr); }
}

/* PROPERTY TRANSLATION SERVICE LINKS — add once at the bottom of Additional CSS. */
body .pkp-page #pkp-hub .pkp-hub-hint { display:flex; align-items:baseline; gap:8px; margin-top:14px; font-size:14px; line-height:1.6; color:var(--pk-dark); }
body .pkp-page #pkp-hub .pkp-hub-hint > span { color:var(--pk-red); font-weight:700; }
body .pkp-page #pkp-hub .pkp-hub-card { position:relative; display:flex; flex-direction:column; gap:12px; min-width:0; color:var(--pk-dark); }
body .pkp-page #pkp-hub .pkp-hub-card:hover { border-color:var(--pk-red); text-decoration:none; }
body .pkp-page #pkp-hub .pkp-hub-card h3 { margin:0; color:var(--pk-red); font-size:21px; line-height:1.3; }
body .pkp-page #pkp-hub .pkp-hub-card p { margin:0; font-size:15px; line-height:1.6; }
body .pkp-page #pkp-hub .pkp-hub-label { display:block; font-size:12px; line-height:1.5; font-weight:700; letter-spacing:.04em; text-transform:uppercase; }
body .pkp-page #pkp-hub .pkp-hub-action { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:auto; padding-top:16px; border-top:1px solid var(--pk-border); color:var(--pk-red); font-size:14px; line-height:1.5; font-weight:700; }
body .pkp-page #pkp-hub .pkp-hub-action > span { font-size:22px; line-height:1; transition:transform .2s ease; }
body .pkp-page #pkp-hub .pkp-hub-card:hover .pkp-hub-action > span { transform:translateX(4px); }
/* Heading and action are independent native links; no overlay is needed. */
body .pkp-page #pkp-hub .pkp-hub-card h3 a.pkp-hub-link { position:static; display:inline; color:var(--pk-red); text-decoration:none; font:inherit; }
body .pkp-page #pkp-hub .pkp-hub-card h3 a.pkp-hub-link::after { content:none; display:none; pointer-events:none; }
body .pkp-page #pkp-hub .pkp-hub-card:focus-within { outline:3px solid var(--pk-red); outline-offset:4px; }
body .pkp-page #pkp-hub .pkp-hub-card > p:empty,body .pkp-page #pkp-hub .pkp-hub-card > br { display:none; }
body .pkp-page #pkp-hub .pk-grid > br,body .pkp-page #pkp-hub .pk-grid > p:empty { display:none; }
body .pkp-page #pkp-hub .pk-grid > p { display:contents; }
@media(prefers-reduced-motion:reduce) { body .pkp-page #pkp-hub .pkp-hub-action > span { transition:none; transform:none; } }

body .pkp-page #pkp-hub a.pkp-hub-action { position:relative; z-index:2; min-height:44px; text-decoration:none; cursor:pointer; pointer-events:auto; }
body .pkp-page #pkp-hub a.pkp-hub-action:hover { color:var(--pk-red); text-decoration:underline; }
body .pkp-page #pkp-hub a.pkp-hub-action:focus-visible { outline:2px solid var(--pk-red); outline-offset:4px; }

/* MOBILE-FRIENDLY FARD FIELD GUIDE — native expandable rows */
body .pkp-page .pkp-field-accordion { display:grid; grid-template-columns:minmax(0,1fr); gap:10px; margin-top:16px; }
body .pkp-page .pkp-field-item { min-width:0; margin:0; border:1px solid var(--pk-border); border-radius:8px; background:#fff; overflow:hidden; }
body .pkp-page .pkp-field-item summary { display:grid; grid-template-columns:32px minmax(0,1fr) 20px; align-items:center; gap:12px; min-height:64px; margin:0; padding:14px 16px; color:var(--pk-dark); font-family:inherit; font-size:16px; line-height:1.5; font-weight:600; cursor:pointer; list-style:none; }
body .pkp-page .pkp-field-item summary::-webkit-details-marker { display:none; }
body .pkp-page .pkp-field-item summary::after { content:none; display:none; }
body .pkp-page .pkp-field-item .pkp-field-index { display:grid; place-items:center; width:32px; height:32px; border-radius:50%; background:var(--pk-red); color:#fff; font-size:15px; line-height:1; }
body .pkp-page .pkp-field-item .pkp-field-name { font-size:16px; line-height:1.5; }
body .pkp-page .pkp-field-toggle::before { content:"+"; display:block; color:var(--pk-red); font-size:24px; line-height:1; text-align:center; }
body .pkp-page .pkp-field-item[open] .pkp-field-toggle::before { content:"−"; }
body .pkp-page .pkp-field-item[open] { border-color:var(--pk-red); }
body .pkp-page .pkp-field-item[open] summary { background:#faf3f3; color:var(--pk-red); }
body .pkp-page .pkp-field-description { padding:0 16px 16px 60px; background:#faf3f3; }
body .pkp-page .pkp-field-description p { margin:0; font-size:15px; line-height:1.7; color:var(--pk-dark); }
body .pkp-page .pkp-field-item:not([open]) > .pkp-field-description { display:none; }
body .pkp-page .pkp-field-item summary:focus-visible { outline:3px solid var(--pk-red); outline-offset:-3px; }
body .pkp-page .pkp-field-accordion > br,body .pkp-page .pkp-field-accordion > p:empty,body .pkp-page .pkp-field-item > p:empty,body .pkp-page .pkp-field-item summary br { display:none; }
@media(max-width:480px) {
 body .pkp-page .pkp-field-guide { padding:16px; }
 body .pkp-page .pkp-field-item summary { gap:10px; padding:12px; min-height:60px; }
 body .pkp-page .pkp-field-description { padding:0 12px 16px; }
}

/* Keep the theme's decorative checkbox ticks from appearing above the logo. */
body .pkp-page #pkp-notary::before,
body .pkp-page #pkp-notary::after,
body .pkp-page #pkp-courier::before,
body .pkp-page #pkp-courier::after,
body .pkp-page #pkp-toc-toggle::before,
body .pkp-page #pkp-toc-toggle::after {
  content: none !important;
  display: none !important;
}

body .pkp-page .pkp-check input[type="checkbox"] {
  -webkit-appearance: checkbox;
  appearance: auto;
}

/* PROPERTY RECORD COMPARISON — compact cards for mobile and desktop */
body .pkp-page :is(#pkp-comparison,#pki-compare) .pkp-comparison-fee { margin:22px 0; padding:18px 20px; border:1px solid var(--pk-border); border-left:4px solid var(--pk-red); border-radius:6px; background:#fffdf9; }
body .pkp-page :is(#pkp-comparison,#pki-compare) .pkp-comparison-fee > strong { display:block; margin-bottom:6px; font-size:15px; line-height:1.5; }
body .pkp-page :is(#pkp-comparison,#pki-compare) .pkp-comparison-fee p { margin:0; font-size:16px; line-height:1.6; }
body .pkp-page :is(#pkp-comparison,#pki-compare) p.pkp-comparison-fee-note { margin-top:8px; font-size:13px; line-height:1.6; }
body .pkp-page :is(#pkp-comparison,#pki-compare) .pkp-record-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; align-items:start; }
body .pkp-page :is(#pkp-comparison,#pki-compare) .pkp-record-grid > br,body .pkp-page :is(#pkp-comparison,#pki-compare) .pkp-record-grid > p:empty { display:none; }
body .pkp-page :is(#pkp-comparison,#pki-compare) .pkp-record-card { display:flex; flex-direction:column; gap:10px; min-width:0; height:auto; padding:22px; }
body .pkp-page :is(#pkp-comparison,#pki-compare) .pkp-record-category { display:block; color:var(--pk-dark); font-size:12px; font-weight:700; letter-spacing:.04em; line-height:1.5; text-transform:uppercase; }
body .pkp-page :is(#pkp-comparison,#pki-compare) .pkp-record-card h3 { margin:0; font-size:21px; line-height:1.3; color:var(--pk-red); }
body .pkp-page :is(#pkp-comparison,#pki-compare) .pkp-record-purpose { margin:0; font-size:15px; line-height:1.6; }
body .pkp-page :is(#pkp-comparison,#pki-compare) .pkp-record-details { margin:4px 0 0; border-top:1px solid var(--pk-border); }
body .pkp-page :is(#pkp-comparison,#pki-compare) .pkp-record-details summary { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:48px; margin:0; padding:12px 0; font-family:inherit; font-size:14px; font-weight:600; line-height:1.5; color:var(--pk-dark); cursor:pointer; list-style:none; }
body .pkp-page :is(#pkp-comparison,#pki-compare) .pkp-record-details summary::-webkit-details-marker { display:none; }
body .pkp-page :is(#pkp-comparison,#pki-compare) .pkp-record-details summary::after { content:none; display:none; }
body .pkp-page :is(#pkp-comparison,#pki-compare) .pkp-record-toggle::before { content:"+"; display:block; color:var(--pk-red); font-size:22px; line-height:1; }
body .pkp-page :is(#pkp-comparison,#pki-compare) .pkp-record-details[open] .pkp-record-toggle::before { content:"−"; }
body .pkp-page :is(#pkp-comparison,#pki-compare) .pkp-record-details dl { display:grid; gap:12px; margin:0 0 12px; padding:14px; border-radius:5px; background:#faf3f3; }
body .pkp-page :is(#pkp-comparison,#pki-compare) .pkp-record-details:not([open]) > dl { display:none; }
body .pkp-page :is(#pkp-comparison,#pki-compare) .pkp-record-details dt { margin:0 0 3px; color:var(--pk-dark); font-size:12px; line-height:1.5; font-weight:700; }
body .pkp-page :is(#pkp-comparison,#pki-compare) .pkp-record-details dd { margin:0; color:var(--pk-dark); font-size:14px; line-height:1.6; }
body .pkp-page :is(#pkp-comparison,#pki-compare) a.pkp-record-guide { display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:44px; padding:6px 0; color:var(--pk-red); font-size:14px; font-weight:600; line-height:1.5; text-decoration:none; }
body .pkp-page :is(#pkp-comparison,#pki-compare) a.pkp-record-guide:hover { text-decoration:underline; }
body .pkp-page :is(#pkp-comparison,#pki-compare) :is(summary,a):focus-visible { outline:2px solid var(--pk-red); outline-offset:3px; }
body .pkp-page :is(#pkp-comparison,#pki-compare) .pkp-record-note { font-size:15px; line-height:1.6; }
body .pkp-page :is(#pkp-comparison,#pki-compare) .pkp-record-card > p:empty,body .pkp-page :is(#pkp-comparison,#pki-compare) .pkp-record-card > br,body .pkp-page :is(#pkp-comparison,#pki-compare) summary br { display:none; }
@media(max-width:600px) {
 body .pkp-page :is(#pkp-comparison,#pki-compare) .pkp-record-grid { grid-template-columns:minmax(0,1fr); gap:12px; }
 body .pkp-page :is(#pkp-comparison,#pki-compare) .pkp-record-card { padding:18px; gap:8px; }
 body .pkp-page :is(#pkp-comparison,#pki-compare) .pkp-comparison-fee { padding:16px; }
}


/* INTIQAL / MUTATION CHILD PAGE — shared site components and scoped additions */












.pki-breadcrumb{font-size:13px;color:#717176;margin-bottom:14px}.pki-breadcrumb a{color:#65656a}


.pki-urdu-subtitle{margin:0 0 14px;color:var(--pki-red);font-size:21px}






.pki-answer-strip{border-top:1px solid var(--pki-border);border-bottom:1px solid var(--pki-border);background:var(--pki-soft)}.pki-answer-strip p{margin:0;font-size:17px}







.pki-verify{display:inline-block;padding:3px 7px;background:#fff1c4;color:#694500;font-size:11px;font-weight:700;letter-spacing:.04em}





.pki-samples{display:grid;gap:18px}.pki-sample-card{border:1px solid var(--pki-border);background:#fff}.pki-sample-head{padding:17px 17px 10px}.pki-sample-head p:last-child{margin-bottom:0}
.pki-sample-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px;padding:0 17px 17px}
.pki-swipe{position:relative;overflow:hidden;aspect-ratio:4/3;background:#efefef;border:1px solid var(--pki-border)}.pki-swipe img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.pki-swipe .pki-after{clip-path:inset(0 50% 0 0)}.pki-swipe-line{position:absolute;top:0;bottom:0;left:50%;width:2px;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.25);pointer-events:none}.pki-swipe input{position:absolute;left:12px;right:12px;bottom:10px;width:calc(100% - 24px);z-index:5}.pki-swipe-label{position:absolute;top:8px;padding:4px 7px;background:rgba(0,0,0,.68);color:#fff;font-size:11px;z-index:6}.pki-swipe-label.left{left:8px}.pki-swipe-label.right{right:8px}
.pki-readable-table{width:100%;max-width:100%;overflow-x:auto}.pki-readable-table table{width:100%;border-collapse:collapse;table-layout:fixed;font-size:13px;line-height:1.45}.pki-readable-table th,.pki-readable-table td{padding:8px 9px;border:1px solid var(--pki-border);text-align:left;vertical-align:top;overflow-wrap:anywhere}.pki-readable-table th{width:35%;background:var(--pki-soft);color:var(--pki-heading)}
.pki-sample-note{padding:10px 17px;background:var(--pki-soft);font-size:12.5px}.pki-download{display:inline-flex;margin-top:9px;padding:8px 11px;border:1px solid var(--pki-red);font-size:13px}

.pki-table-wrap{width:100%;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}.pki-table{width:100%;border-collapse:collapse;min-width:700px;font-size:13px;line-height:1.45}.pki-table th,.pki-table td{padding:9px 10px;border:1px solid var(--pki-border);text-align:left;vertical-align:top}.pki-table th{background:var(--pki-charcoal);color:#fff}


.pki-country-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.pki-country{padding:16px;border:1px solid var(--pki-border);background:#fff}.pki-country h3{font-size:18px}.pki-country .source{font-size:12px}
.pki-glossary-search{width:100%;min-height:44px;padding:9px 11px;border:1px solid var(--pki-border);font:inherit;margin-bottom:11px}.pki-glossary{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.pki-term{padding:11px;border:1px solid var(--pki-border);background:#fff}.pki-term-line{display:flex;gap:7px;flex-wrap:wrap;align-items:baseline}.pki-term-line strong{color:var(--pki-heading)}.pki-term p{font-size:13px;margin:5px 0 0}


.pki-review{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;padding:15px;border:1px solid var(--pki-border);background:var(--pki-soft)}.pki-review strong{display:block;color:var(--pki-heading)}.pki-review div{font-size:13px}

.pki-media-missing{display:grid;place-items:center;min-height:220px;padding:16px;border:1px dashed var(--pki-border);background:var(--pki-soft);text-align:center;color:#666;font-size:13px}

@media(max-width:1024px){}
@media(max-width:782px){.pki-sample-grid,.pki-country-grid{grid-template-columns:1fr}.pki-glossary{grid-template-columns:1fr}.pki-review{grid-template-columns:1fr 1fr}.pki-table{min-width:0}.pki-table,.pki-table tbody,.pki-table tr,.pki-table td{display:block;width:100%}.pki-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}.pki-table tr{border:1px solid var(--pki-border);margin-bottom:11px}.pki-table td{display:grid;grid-template-columns:minmax(110px,35%) minmax(0,1fr);gap:8px;border:0;border-bottom:1px solid var(--pki-border)}.pki-table td:last-child{border-bottom:0}.pki-table td:before{font-weight:700;color:var(--pki-heading)}.pki-comparison td:nth-child(1):before{content:"Document"}.pki-comparison td:nth-child(2):before{content:"What it shows"}.pki-comparison td:nth-child(3):before{content:"Who issues"}.pki-comparison td:nth-child(4):before{content:"When created"}.pki-comparison td:nth-child(5):before{content:"Common overseas use"}}
@media(max-width:480px){.pki-review{grid-template-columns:1fr}.pki-table td{grid-template-columns:1fr;gap:3px}}
@media(prefers-reduced-motion:reduce){}

body .pki-page { --pki-red:var(--pk-red); --pki-red-dark:#650003; --pki-charcoal:var(--pk-dark); --pki-heading:var(--pk-dark); --pki-text:var(--pk-dark); --pki-soft:var(--pk-light); --pki-paper:#fffdf9; --pki-border:var(--pk-border); --pki-amber:#8a5a00; padding-bottom:0; }
body .pki-page .pk-hero h1 { font-size:34px; line-height:1.3; margin:0 0 10px; }
body .pki-page .pk-layout > aside,body .pki-page .pk-layout > .pki-content { min-width:0; }
body .pki-page .pki-answer-strip p { font-size:16px; line-height:1.6; }
body .pki-page .pki-service-card { display:flex; flex-direction:column; gap:12px; height:auto; }
body .pki-page .pki-service-card h3 { margin:0; font-size:21px; }
body .pki-page .pki-service-action { display:flex; justify-content:space-between; align-items:center; gap:10px; min-height:44px; padding-top:12px; margin-top:auto; border-top:1px solid var(--pk-border); color:var(--pk-red); font-size:14px; font-weight:600; line-height:1.5; text-decoration:none; }
body .pki-page .pki-service-card > br,body .pki-page .pki-service-grid > br,body .pki-page .pki-service-grid > p:empty { display:none; }
body .pki-page .pki-result #pki-wa { display:inline-flex; justify-content:center; align-items:center; width:100%; min-height:46px; padding:12px 14px; border:1px solid #fff; border-radius:6px; background:#fff; color:#8a0000; font-size:15px; line-height:1.5; font-weight:600; text-decoration:none; }
body .pki-page .pki-result p a { color:#fff; text-decoration:underline; }
body .pki-page .pki-check input[type="checkbox"]::before,body .pki-page .pki-check input[type="checkbox"]::after { content:none!important; display:none!important; }
body .pki-page .pki-sample-card { border-radius:var(--pk-radius); }
body .pki-page .pki-sample-head { padding:24px 24px 16px; }
body .pki-page .pki-sample-grid { padding:0 24px 24px; gap:20px; }
body .pki-page .pki-country { padding:24px; border-radius:var(--pk-radius); }
body .pki-page .pki-country h3 { font-size:21px; }
body .pki-page .pki-glossary .pki-term[hidden] { display:none!important; }
body .pki-page .pki-fees > br,body .pki-page .pki-calc > br,body .pki-page .pki-country-grid > br { display:none; }
@media(max-width:782px) { body .pki-page .pki-sample-grid,body .pki-page .pki-calc,body .pki-page .pki-country-grid { grid-template-columns:minmax(0,1fr); } }
@media(max-width:782px) { body .pki-page .pki-table td::before { content:attr(data-label); } }
@media(max-width:768px) { body .pki-page .pk-hero h1 { font-size:32px; } }
/* Mobile TOC button: hide line breaks WordPress inserts inside it */
body .pk-page .pk-mobile-toc br,
body .pk-page .pk-toc-toggle-input + br {
  display: none;
}

body .pk-page .pk-mobile-toc {
  line-height: 1.4;
}
/* =========================================================
   PK-LEGAL — HOW-TO-ORDER FLOW ANIMATION (v3)
   Append to the END of Additional CSS. Pure CSS: no JS, no
   inline <svg>. Wrapper .pk-order-flow, prefix pkof- (does not
   touch the older .pk-order-animation / pkoa- component).

   Timing: one loop of --pkof-cycle, split into four equal
   phases. Every element tagged .pkof-p1 … .pkof-p4 receives a
   phase offset in --pkof-at; its children inherit that offset,
   so chat, illustration and step list stay in sync.
   Hover or keyboard focus pauses the whole loop.
   ========================================================= */

.pk-order-flow {
  --pkof-red: #8a0104;
  --pkof-red-dark: #650003;
  --pkof-charcoal: #4b4a4d;
  --pkof-text: #4c4c4e;
  --pkof-soft: #f8f4f4;
  --pkof-border: #eadede;
  --pkof-wa: #25d366;
  --pkof-wa-bubble: #e4f6e9;
  --pkof-tick: #34b7f1;
  --pkof-ok: #1f6b43;
  --pkof-cycle: 28s;
  --pkof-at: 0s;
  --pkof-ease: cubic-bezier(0.22, 1, 0.36, 1);

  display: block;
  width: 100%;
  clear: both;
  float: none;
  margin: 32px 0;
  overflow: hidden;
  color: var(--pkof-text);
  background: #fff;
  border: 1px solid var(--pkof-border);
  container: pkof / inline-size;
}

.pk-order-flow *,
.pk-order-flow *::before,
.pk-order-flow *::after {
  box-sizing: border-box;
}

/* The WordPress editor strips empty or class-less <span>/<i>, so the HTML
   uses classed <div>s only. It can still inject <p>, <p>&nbsp;</p> and <br>
   filler; none of those may take a grid cell or push the layout. */
.pk-order-flow p:empty,
.pk-order-flow .pkof-head > p:empty,
.pk-order-flow .pkof-phone-top > p,
.pk-order-flow .pkof-step > p,
.pk-order-flow .pkof-scan > p,
.pk-order-flow .pkof-scene > p,
.pk-order-flow .pkof-final > p,
.pk-order-flow .pkof-id > p,
.pk-order-flow .pkof-page > p,
.pk-order-flow .pkof-attach > p,
.pk-order-flow .pkof-typing > p,
.pk-order-flow .pkof-desk > p,
.pk-order-flow .pkof-stage > p,
.pk-order-flow .pkof-desk br,
.pk-order-flow .pkof-phone-top br,
.pk-order-flow .pkof-step > br {
  display: none !important;
}

.pk-order-flow .pkof-p1 { --pkof-at: 0s; }
.pk-order-flow .pkof-p2 { --pkof-at: calc(var(--pkof-cycle) * 0.25); }
.pk-order-flow .pkof-p3 { --pkof-at: calc(var(--pkof-cycle) * 0.5); }
.pk-order-flow .pkof-p4 { --pkof-at: calc(var(--pkof-cycle) * 0.75); }

/* ─── Header ───────────────────────────────────────────── */

.pk-order-flow .pkof-head {
  padding: 26px 28px 22px;
  border-top: 5px solid var(--pkof-red);
  background: linear-gradient(135deg, #fff 0%, var(--pkof-soft) 100%);
}

.pk-order-flow .pkof-kicker {
  display: inline-block;
  margin-bottom: 8px;
  color: var(--pkof-red);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.pk-order-flow .pkof-head h2 {
  margin: 0 0 8px;
  padding: 0;
}

.pk-order-flow .pkof-head p {
  max-width: 820px;
  margin: 0;
}

/* ─── Stage ────────────────────────────────────────────── */

.pk-order-flow .pkof-stage {
  display: grid;
  grid-template-columns: 270px minmax(0, 1fr);
  gap: 24px;
  padding: 28px;
  align-items: start;
}

.pk-order-flow .pkof-stage > .pkof-phone-wrap { grid-column: 1; grid-row: 1; }
.pk-order-flow .pkof-stage > .pkof-main { grid-column: 2; grid-row: 1; }

/* ─── Phone ────────────────────────────────────────────── */

.pk-order-flow .pkof-phone-wrap {
  position: relative;
  display: flex;
  justify-content: center;
  padding: 26px 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 20% 15%, rgba(138, 1, 4, 0.09) 0, transparent 45%),
    radial-gradient(circle at 85% 90%, rgba(37, 211, 102, 0.12) 0, transparent 40%),
    var(--pkof-soft);
  border: 1px solid var(--pkof-border);
  border-radius: 14px;
}

.pk-order-flow .pkof-phone-wrap::before {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  width: 360px;
  height: 360px;
  border: 1px dashed rgba(138, 1, 4, 0.14);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: pkofSpin 60s linear infinite;
}

.pk-order-flow .pkof-phone {
  position: relative;
  z-index: 1;
  width: 250px;
  height: 470px;
  overflow: hidden;
  background: #efe7de;
  border: 9px solid #2f2e31;
  border-radius: 34px;
  box-shadow:
    0 0 0 1px #5b5a5e,
    0 22px 40px rgba(46, 35, 35, 0.22);
  animation: pkofFloat 6s ease-in-out infinite;
}

.pk-order-flow .pkof-notch {
  position: absolute;
  z-index: 3;
  top: 0;
  left: 50%;
  width: 84px;
  height: 18px;
  background: #2f2e31;
  border-radius: 0 0 12px 12px;
  transform: translateX(-50%);
}

.pk-order-flow .pkof-phone-top {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 24px 12px 9px;
  color: #fff;
  background: var(--pkof-charcoal);
  font-size: 13px;
  line-height: 1.2;
}

.pk-order-flow .pkof-phone-top strong {
  display: block;
  color: #fff;
  font-size: 13.5px;
}

.pk-order-flow .pkof-phone-top small {
  display: block;
  color: #d9f7e3;
  font-size: 11px;
}

.pk-order-flow .pkof-avatar {
  display: grid;
  place-items: center;
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  color: var(--pkof-red);
  background: #fff;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 800;
}

.pk-order-flow .pkof-phone-top small::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 4px;
  background: var(--pkof-wa);
  border-radius: 50%;
  animation: pkofBlink 1.6s ease-in-out infinite;
}

.pk-order-flow .pkof-chat {
  position: relative;
  height: 372px;
  background:
    radial-gradient(rgba(75, 74, 77, 0.07) 1px, transparent 1.4px) 0 0 / 14px 14px,
    #efe7de;
}

.pk-order-flow .pkof-group {
  position: absolute;
  top: 12px;
  left: 10px;
  right: 10px;
  animation: pkofScene var(--pkof-cycle) var(--pkof-ease) var(--pkof-at) infinite backwards;
}

.pk-order-flow .pkof-day {
  width: max-content;
  margin: 0 auto 10px;
  padding: 3px 10px;
  color: #6b6b70;
  background: rgba(255, 255, 255, 0.85);
  border-radius: 8px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.pk-order-flow .pkof-bubble {
  position: relative;
  max-width: 88%;
  margin-bottom: 8px;
  padding: 8px 10px 6px;
  color: #303033;
  border-radius: 12px;
  font-size: 12.5px;
  line-height: 1.42;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08);
}

.pk-order-flow .pkof-bubble.user {
  margin-left: auto;
  background: var(--pkof-wa-bubble);
  border-top-right-radius: 3px;
  animation: pkofIn04 var(--pkof-cycle) var(--pkof-ease) var(--pkof-at) infinite backwards;
}

.pk-order-flow .pkof-bubble.firm {
  background: #fff;
  border-top-left-radius: 3px;
  animation: pkofIn14 var(--pkof-cycle) var(--pkof-ease) var(--pkof-at) infinite backwards;
}

.pk-order-flow .pkof-meta {
  display: block;
  margin-top: 2px;
  color: #8a8a8f;
  font-size: 10px;
  text-align: right;
}

.pk-order-flow .pkof-meta b {
  margin-left: 3px;
  font-weight: 700;
  letter-spacing: -0.2em;
  animation: pkofTicks var(--pkof-cycle) linear var(--pkof-at) infinite backwards;
}

.pk-order-flow .pkof-reply {
  position: relative;
  min-height: 36px;
}

.pk-order-flow .pkof-typing {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  gap: 4px;
  padding: 11px 12px;
  background: #fff;
  border-radius: 12px;
  border-top-left-radius: 3px;
  animation: pkofTyping var(--pkof-cycle) linear var(--pkof-at) infinite backwards;
}

.pk-order-flow .pkof-typing .pkof-dot {
  width: 6px;
  height: 6px;
  background: #9a9a9f;
  border-radius: 50%;
  animation: pkofDot 1s ease-in-out infinite;
}

.pk-order-flow .pkof-typing .pkof-dot:nth-child(2) { animation-delay: 0.15s; }
.pk-order-flow .pkof-typing .pkof-dot:nth-child(3) { animation-delay: 0.3s; }

/* Attachments inside bubbles */

.pk-order-flow .pkof-attach {
  display: flex;
  gap: 5px;
  margin: 2px 0 6px;
}

.pk-order-flow .pkof-thumb {
  position: relative;
  flex: 1;
  height: 50px;
  background:
    linear-gradient(#7aa98f, #7aa98f) 6px 6px / 14px 17px no-repeat,
    linear-gradient(#b9d3c4, #b9d3c4) 25px 8px / 55% 3px no-repeat,
    linear-gradient(#b9d3c4, #b9d3c4) 25px 15px / 40% 3px no-repeat,
    linear-gradient(#b9d3c4, #b9d3c4) 25px 22px / 48% 3px no-repeat,
    linear-gradient(#b9d3c4, #b9d3c4) 6px 32px / 80% 3px no-repeat,
    linear-gradient(#b9d3c4, #b9d3c4) 6px 39px / 60% 3px no-repeat,
    linear-gradient(150deg, #f4faf6, #dcece3);
  border: 1px solid #c4ddcf;
  border-radius: 5px;
}

.pk-order-flow .pkof-thumb.back {
  background:
    repeating-linear-gradient(90deg, #6f7f76 0 2px, transparent 2px 4px) 6px 30px / 60% 12px no-repeat,
    linear-gradient(#b9d3c4, #b9d3c4) 6px 8px / 70% 3px no-repeat,
    linear-gradient(#b9d3c4, #b9d3c4) 6px 15px / 50% 3px no-repeat,
    linear-gradient(150deg, #f4faf6, #dcece3);
}

.pk-order-flow .pkof-file {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 2px 0 6px;
  padding: 7px 8px;
  background: var(--pkof-soft);
  border-radius: 7px;
  font-size: 11.5px;
  font-weight: 600;
}

.pk-order-flow .pkof-file::before {
  content: "PDF";
  display: grid;
  place-items: center;
  flex: 0 0 26px;
  height: 30px;
  color: #fff;
  background: var(--pkof-red);
  border-radius: 3px 8px 3px 3px;
  font-size: 8px;
  font-weight: 800;
}

.pk-order-flow .pkof-chat-footer {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 8px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 36px;
  gap: 6px;
}

.pk-order-flow .pkof-message-field {
  min-height: 36px;
  padding: 9px 13px;
  color: #8a8a8f;
  background: #fff;
  border-radius: 20px;
  font-size: 12px;
}

.pk-order-flow .pkof-send {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  color: #fff;
  background: var(--pkof-wa);
  border-radius: 50%;
  font-size: 14px;
  animation: pkofSend calc(var(--pkof-cycle) / 4) ease-out infinite;
}

/* ─── Right column ─────────────────────────────────────── */

.pk-order-flow .pkof-main {
  min-width: 0;
  container: pkofmain / inline-size;
}

/* Illustration "desk" */

.pk-order-flow .pkof-desk {
  position: relative;
  height: 250px;
  margin-bottom: 18px;
  overflow: hidden;
  background:
    linear-gradient(rgba(138, 1, 4, 0.045) 1px, transparent 1px) 0 0 / 22px 22px,
    linear-gradient(90deg, rgba(138, 1, 4, 0.045) 1px, transparent 1px) 0 0 / 22px 22px,
    linear-gradient(160deg, #fff 0%, var(--pkof-soft) 100%);
  border: 1px solid var(--pkof-border);
  border-radius: 14px;
}

.pk-order-flow .pkof-desk-label {
  position: absolute;
  z-index: 2;
  top: 12px;
  left: 14px;
  width: 210px;
  height: 24px;
  overflow: hidden;
  color: #fff;
  background: var(--pkof-charcoal);
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  line-height: 24px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.pk-order-flow .pkof-desk-label .pkof-label {
  position: absolute;
  inset: 0;
  padding: 0 12px;
  white-space: nowrap;
  animation: pkofScene var(--pkof-cycle) var(--pkof-ease) var(--pkof-at) infinite backwards;
}

.pk-order-flow .pkof-scene {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 40px 20px 20px;
  animation: pkofScene var(--pkof-cycle) var(--pkof-ease) var(--pkof-at) infinite backwards;
}

.pk-order-flow .pkof-chip {
  position: absolute;
  right: 14px;
  bottom: 14px;
  padding: 6px 12px;
  color: #fff;
  background: var(--pkof-ok);
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
  box-shadow: 0 6px 14px rgba(31, 107, 67, 0.25);
  animation: pkofIn18 var(--pkof-cycle) var(--pkof-ease) var(--pkof-at) infinite backwards;
}

/* Scene 1 — scanning an ID card */

.pk-order-flow .pkof-scan {
  position: relative;
  width: 230px;
  height: 146px;
}

.pk-order-flow .pkof-id {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: linear-gradient(150deg, #f4faf6 0%, #d6eadf 100%);
  border: 1px solid #b9d3c4;
  border-radius: 10px;
  box-shadow: 0 10px 22px rgba(30, 60, 45, 0.15);
}

.pk-order-flow .pkof-id.back {
  transform: translate(22px, -14px) rotate(5deg);
  opacity: 0.75;
}

.pk-order-flow .pkof-id-band {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 22px;
  background: linear-gradient(90deg, #2f6f4f, #5c9a78);
}

.pk-order-flow .pkof-id-photo {
  position: absolute;
  top: 34px;
  left: 14px;
  width: 52px;
  height: 64px;
  background:
    radial-gradient(circle at 50% 38%, #9fb8aa 0 13px, transparent 14px),
    radial-gradient(ellipse at 50% 112%, #9fb8aa 0 26px, transparent 27px),
    #e9f2ed;
  border: 1px solid #b9d3c4;
  border-radius: 4px;
}

.pk-order-flow .pkof-id-lines {
  position: absolute;
  top: 38px;
  left: 80px;
  right: 14px;
  display: grid;
  gap: 9px;
}

.pk-order-flow .pkof-id-lines .pkof-ln {
  display: block;
  height: 5px;
  background: #a9c7b6;
  border-radius: 3px;
}

.pk-order-flow .pkof-id-lines .pkof-ln:nth-child(2) { width: 70%; }
.pk-order-flow .pkof-id-lines .pkof-ln:nth-child(3) { width: 85%; }
.pk-order-flow .pkof-id-lines .pkof-ln:nth-child(4) { width: 55%; }

.pk-order-flow .pkof-frame {
  --c: var(--pkof-red);
  position: absolute;
  inset: -12px;
  background:
    linear-gradient(var(--c), var(--c)) top left / 22px 3px no-repeat,
    linear-gradient(var(--c), var(--c)) top left / 3px 22px no-repeat,
    linear-gradient(var(--c), var(--c)) top right / 22px 3px no-repeat,
    linear-gradient(var(--c), var(--c)) top right / 3px 22px no-repeat,
    linear-gradient(var(--c), var(--c)) bottom left / 22px 3px no-repeat,
    linear-gradient(var(--c), var(--c)) bottom left / 3px 22px no-repeat,
    linear-gradient(var(--c), var(--c)) bottom right / 22px 3px no-repeat,
    linear-gradient(var(--c), var(--c)) bottom right / 3px 22px no-repeat;
  animation: pkofPulse 1.6s ease-in-out infinite;
}

.pk-order-flow .pkof-beam {
  position: absolute;
  left: -8px;
  right: -8px;
  top: 0;
  height: 3px;
  background: var(--pkof-red);
  border-radius: 3px;
  box-shadow: 0 0 14px 4px rgba(138, 1, 4, 0.35);
  animation: pkofBeam var(--pkof-cycle) ease-in-out var(--pkof-at) infinite backwards;
}

/* Scene 2 — review and quote */

.pk-order-flow .pkof-quote {
  width: min(320px, 100%);
  padding: 14px 16px;
  background: #fff;
  border: 1px solid var(--pkof-border);
  border-top: 4px solid var(--pkof-red);
  border-radius: 10px;
  box-shadow: 0 12px 26px rgba(35, 35, 45, 0.1);
  font-size: 13px;
}

.pk-order-flow .pkof-quote-head {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px dashed var(--pkof-border);
  font-weight: 700;
}

.pk-order-flow .pkof-quote-head em {
  color: #8a8a8f;
  font-size: 11.5px;
  font-weight: 600;
  font-style: normal;
}

.pk-order-flow .pkof-quote ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.pk-order-flow .pkof-quote li {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 3px 0;
  line-height: 1.35;
}

.pk-order-flow .pkof-quote li::before {
  content: "✓";
  display: grid;
  place-items: center;
  flex: 0 0 18px;
  height: 18px;
  color: #fff;
  background: var(--pkof-ok);
  border-radius: 50%;
  font-size: 11px;
  font-weight: 700;
}

.pk-order-flow .pkof-quote li:nth-child(1) { animation: pkofIn06 var(--pkof-cycle) var(--pkof-ease) var(--pkof-at) infinite backwards; }
.pk-order-flow .pkof-quote li:nth-child(2) { animation: pkofIn09 var(--pkof-cycle) var(--pkof-ease) var(--pkof-at) infinite backwards; }
.pk-order-flow .pkof-quote li:nth-child(3) { animation: pkofIn12 var(--pkof-cycle) var(--pkof-ease) var(--pkof-at) infinite backwards; }

.pk-order-flow .pkof-quote-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--pkof-border);
  font-weight: 700;
}

.pk-order-flow .pkof-quote-total strong {
  padding: 3px 10px;
  color: var(--pkof-red);
  border: 2px solid var(--pkof-red);
  border-radius: 4px;
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  animation: pkofStampSmall var(--pkof-cycle) var(--pkof-ease) var(--pkof-at) infinite backwards;
}

/* Scene 3 — Urdu to English draft */

.pk-order-flow .pkof-page {
  position: relative;
  width: 118px;
  height: 150px;
  padding: 26px 12px 12px;
  background: #fff;
  border: 1px solid var(--pkof-border);
  border-radius: 6px;
  box-shadow: 0 10px 22px rgba(35, 35, 45, 0.1);
}

.pk-order-flow .pkof-page-tag {
  position: absolute;
  top: 7px;
  left: 10px;
  color: var(--pkof-red);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.pk-order-flow .pkof-page.urdu .pkof-page-tag {
  right: 10px;
  left: auto;
  color: #6b6b70;
}

.pk-order-flow .pkof-page .pkof-ln {
  display: block;
  height: 5px;
  margin-bottom: 9px;
  background: #d9d3d0;
  border-radius: 3px;
}

.pk-order-flow .pkof-page.urdu .pkof-ln {
  margin-left: auto;
}

.pk-order-flow .pkof-page .pkof-ln:nth-child(odd) { width: 82%; }
.pk-order-flow .pkof-page .pkof-ln:nth-child(3n) { width: 60%; }

.pk-order-flow .pkof-page.english .pkof-ln {
  background: var(--pkof-charcoal);
  opacity: 0.55;
  transform-origin: left center;
}

.pk-order-flow .pkof-page.english .pkof-ln:nth-child(2) { animation: pkofWrite var(--pkof-cycle) linear var(--pkof-at) infinite backwards; }
.pk-order-flow .pkof-page.english .pkof-ln:nth-child(3) { animation: pkofWrite var(--pkof-cycle) linear calc(var(--pkof-at) + 0.5s) infinite backwards; }
.pk-order-flow .pkof-page.english .pkof-ln:nth-child(4) { animation: pkofWrite var(--pkof-cycle) linear calc(var(--pkof-at) + 1s) infinite backwards; }
.pk-order-flow .pkof-page.english .pkof-ln:nth-child(5) { animation: pkofWrite var(--pkof-cycle) linear calc(var(--pkof-at) + 1.5s) infinite backwards; }
.pk-order-flow .pkof-page.english .pkof-ln:nth-child(6) { animation: pkofWrite var(--pkof-cycle) linear calc(var(--pkof-at) + 2s) infinite backwards; }
.pk-order-flow .pkof-page.english .pkof-ln:nth-child(7) { animation: pkofWrite var(--pkof-cycle) linear calc(var(--pkof-at) + 2.5s) infinite backwards; }

.pk-order-flow .pkof-mark {
  position: absolute;
  left: 8px;
  right: 18px;
  top: 58px;
  height: 13px;
  background: rgba(255, 210, 60, 0.45);
  border-radius: 3px;
  transform-origin: left center;
  animation: pkofMark var(--pkof-cycle) var(--pkof-ease) var(--pkof-at) infinite backwards;
}

.pk-order-flow .pkof-arrow {
  position: relative;
  width: 56px;
  height: 4px;
  background: repeating-linear-gradient(90deg, var(--pkof-red) 0 6px, transparent 6px 11px);
  background-size: 22px 4px;
  animation: pkofDash 0.8s linear infinite;
}

.pk-order-flow .pkof-arrow::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -4px;
  border: 7px solid transparent;
  border-left-color: var(--pkof-red);
  transform: translateY(-50%);
}

/* Scene 4 — notary stamp and delivery */

.pk-order-flow .pkof-final {
  position: relative;
}

.pk-order-flow .pkof-final .pkof-page {
  width: 136px;
  height: 160px;
}

.pk-order-flow .pkof-final .pkof-page .pkof-ln {
  background: var(--pkof-charcoal);
  opacity: 0.5;
}

.pk-order-flow .pkof-sign {
  position: absolute;
  left: 12px;
  bottom: 18px;
  width: 54px;
  height: 14px;
  border-bottom: 2px solid #233a8a;
  border-radius: 0 0 40% 60%;
  transform-origin: left center;
  animation: pkofSign var(--pkof-cycle) var(--pkof-ease) var(--pkof-at) infinite backwards;
}

.pk-order-flow .pkof-seal {
  position: absolute;
  z-index: 2;
  right: -30px;
  bottom: 6px;
  display: grid;
  place-items: center;
  width: 78px;
  height: 78px;
  color: var(--pkof-red);
  background: rgba(255, 255, 255, 0.6);
  border: 3px solid var(--pkof-red);
  border-radius: 50%;
  box-shadow: inset 0 0 0 4px #fff, inset 0 0 0 5px var(--pkof-red);
  font-size: 9px;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: 0.06em;
  text-align: center;
  text-transform: uppercase;
  animation: pkofSeal var(--pkof-cycle) var(--pkof-ease) var(--pkof-at) infinite backwards;
}

.pk-order-flow .pkof-seal-text {
  max-width: 54px;
}

.pk-order-flow .pkof-seal::after {
  content: "";
  position: absolute;
  inset: -6px;
  border: 2px solid var(--pkof-red);
  border-radius: 50%;
  opacity: 0;
  animation: pkofRipple var(--pkof-cycle) ease-out var(--pkof-at) infinite backwards;
}

.pk-order-flow .pkof-courier {
  display: grid;
  gap: 6px;
  margin-left: 26px;
  font-size: 12px;
  font-weight: 600;
}

.pk-order-flow .pkof-courier .pkof-c {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 10px;
  background: #fff;
  border: 1px solid var(--pkof-border);
  border-radius: 8px;
}

.pk-order-flow .pkof-courier .pkof-c::before {
  content: "✓";
  color: var(--pkof-ok);
  font-weight: 800;
}

.pk-order-flow .pkof-courier .pkof-c:nth-child(1) { animation: pkofIn12 var(--pkof-cycle) var(--pkof-ease) var(--pkof-at) infinite backwards; }
.pk-order-flow .pkof-courier .pkof-c:nth-child(2) { animation: pkofIn14 var(--pkof-cycle) var(--pkof-ease) var(--pkof-at) infinite backwards; }
.pk-order-flow .pkof-courier .pkof-c:nth-child(3) { animation: pkofIn16 var(--pkof-cycle) var(--pkof-ease) var(--pkof-at) infinite backwards; }

/* Step list — always readable; only the highlight animates. */

.pk-order-flow .pkof-steps {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pk-order-flow .pkof-step {
  position: relative;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 12px;
  margin: 0;
  padding: 14px 14px 16px;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--pkof-border);
  border-radius: 10px;
  animation: pkofStep var(--pkof-cycle) var(--pkof-ease) var(--pkof-at) infinite backwards;
}

.pk-order-flow .pkof-num {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  color: #fff;
  background: var(--pkof-charcoal);
  border-radius: 10px;
  font-size: 15px;
  font-weight: 800;
  animation: pkofNum var(--pkof-cycle) var(--pkof-ease) var(--pkof-at) infinite backwards;
}

.pk-order-flow .pkof-step h3 {
  margin: 4px 0 4px;
  padding: 0;
  font-size: 16px;
  line-height: 1.3;
}

.pk-order-flow .pkof-step p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.55;
}

.pk-order-flow .pkof-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: var(--pkof-red);
  transform-origin: left center;
  animation: pkofBar var(--pkof-cycle) linear var(--pkof-at) infinite backwards;
}

.pk-order-flow .pkof-hint {
  margin: 12px 0 0;
  color: #8a8a8f;
  font-size: 12px;
  text-align: right;
}

/* Pause everything together on hover / focus. */

.pk-order-flow:hover *,
.pk-order-flow:hover *::before,
.pk-order-flow:hover *::after,
.pk-order-flow:focus-within *,
.pk-order-flow:focus-within *::before,
.pk-order-flow:focus-within *::after {
  animation-play-state: paused !important;
}

/* ─── Keyframes (percentages are of the full 4-phase loop) ─── */

@keyframes pkofScene {
  0% { opacity: 0; visibility: visible; transform: translateY(14px); }
  3%, 22.5% { opacity: 1; visibility: visible; transform: none; }
  25% { opacity: 0; visibility: hidden; transform: translateY(-14px); }
  100% { opacity: 0; visibility: hidden; transform: translateY(-14px); }
}

@keyframes pkofIn04 {
  0%, 2.5% { opacity: 0; transform: translateY(8px) scale(0.94); }
  4.5%, 100% { opacity: 1; transform: none; }
}

@keyframes pkofIn06 {
  0%, 4.5% { opacity: 0; transform: translateX(-8px); }
  6.5%, 100% { opacity: 1; transform: none; }
}

@keyframes pkofIn09 {
  0%, 7.5% { opacity: 0; transform: translateX(-8px); }
  9.5%, 100% { opacity: 1; transform: none; }
}

@keyframes pkofIn12 {
  0%, 10.5% { opacity: 0; transform: translateY(6px) scale(0.94); }
  12.5%, 100% { opacity: 1; transform: none; }
}

@keyframes pkofIn14 {
  0%, 12.5% { opacity: 0; transform: translateY(8px) scale(0.94); }
  14.5%, 100% { opacity: 1; transform: none; }
}

@keyframes pkofIn16 {
  0%, 14.5% { opacity: 0; transform: translateY(6px) scale(0.94); }
  16.5%, 100% { opacity: 1; transform: none; }
}

@keyframes pkofIn18 {
  0%, 16.5% { opacity: 0; transform: translateY(10px) scale(0.85); }
  18.5% { opacity: 1; transform: scale(1.06); }
  19.5%, 100% { opacity: 1; transform: none; }
}

@keyframes pkofTyping {
  0%, 6.5% { opacity: 0; }
  7.5%, 12% { opacity: 1; }
  13%, 100% { opacity: 0; }
}

@keyframes pkofTicks {
  0%, 8% { color: #9a9a9f; }
  9.5%, 100% { color: var(--pkof-tick); }
}

@keyframes pkofStep {
  0% { border-color: var(--pkof-border); background: #fff; box-shadow: none; transform: none; }
  2%, 23% { border-color: var(--pkof-red); background: var(--pkof-soft); box-shadow: 0 10px 22px rgba(138, 1, 4, 0.12); transform: translateY(-2px); }
  25%, 100% { border-color: var(--pkof-border); background: #fff; box-shadow: none; transform: none; }
}

@keyframes pkofNum {
  0% { background: var(--pkof-charcoal); transform: none; }
  2% { background: var(--pkof-red); transform: scale(1.12); }
  4%, 23% { background: var(--pkof-red); transform: none; }
  25%, 100% { background: var(--pkof-charcoal); transform: none; }
}

@keyframes pkofBar {
  0% { opacity: 1; transform: scaleX(0); }
  24.9% { opacity: 1; transform: scaleX(1); }
  25%, 100% { opacity: 0; transform: scaleX(0); }
}

@keyframes pkofBeam {
  0%, 2% { top: 0; opacity: 0; }
  3% { top: 0; opacity: 1; }
  9% { top: calc(100% - 3px); opacity: 1; }
  15% { top: 0; opacity: 1; }
  16.5%, 100% { top: 0; opacity: 0; }
}

@keyframes pkofStampSmall {
  0%, 15% { opacity: 0; transform: scale(2) rotate(-14deg); }
  17% { opacity: 1; transform: scale(0.92) rotate(-6deg); }
  18%, 100% { opacity: 1; transform: rotate(-6deg); }
}

@keyframes pkofWrite {
  0%, 3% { transform: scaleX(0); }
  6%, 100% { transform: scaleX(1); }
}

@keyframes pkofMark {
  0%, 13.5% { opacity: 0; transform: scaleX(0); }
  15.5%, 100% { opacity: 1; transform: scaleX(1); }
}

@keyframes pkofSign {
  0%, 3% { transform: scaleX(0); }
  6.5%, 100% { transform: scaleX(1); }
}

@keyframes pkofSeal {
  0%, 6.5% { opacity: 0; transform: translateY(-90px) scale(1.9) rotate(-28deg); }
  9% { opacity: 1; transform: scale(0.9) rotate(-12deg); }
  10%, 100% { opacity: 1; transform: rotate(-12deg); }
}

@keyframes pkofRipple {
  0%, 8.8% { opacity: 0; transform: scale(1); }
  9% { opacity: 0.7; transform: scale(1); }
  12%, 100% { opacity: 0; transform: scale(1.6); }
}

@keyframes pkofSend {
  0%, 6% { transform: none; box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.5); }
  9% { transform: scale(0.88); }
  13% { transform: none; box-shadow: 0 0 0 10px rgba(37, 211, 102, 0); }
  100% { transform: none; box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}

@keyframes pkofDot {
  0%, 100% { opacity: 0.35; transform: none; }
  50% { opacity: 1; transform: translateY(-3px); }
}

@keyframes pkofFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

@keyframes pkofSpin {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes pkofBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

@keyframes pkofPulse {
  0%, 100% { opacity: 1; transform: none; }
  50% { opacity: 0.55; transform: scale(1.02); }
}

@keyframes pkofDash {
  to { background-position: 22px 0; }
}

/* ─── Responsive (container-based, so it adapts inside narrow columns too) ─── */

/* Side by side down to 700px of component width — the desktop content
   column beside the sticky TOC is ~845px, so it must stay two-column. */
@container pkof (max-width: 700px) {
  .pk-order-flow .pkof-stage {
    grid-template-columns: minmax(0, 1fr);
  }

  .pk-order-flow .pkof-stage > .pkof-phone-wrap,
  .pk-order-flow .pkof-stage > .pkof-main {
    grid-column: 1;
    grid-row: auto;
  }
}

/* Step cards go single-column whenever the right column itself is narrow. */
@container pkofmain (max-width: 560px) {
  .pk-order-flow .pkof-steps {
    grid-template-columns: minmax(0, 1fr);
  }
}

@container pkof (max-width: 560px) {
  .pk-order-flow .pkof-head,
  .pk-order-flow .pkof-stage {
    padding: 18px 16px;
  }

  .pk-order-flow .pkof-page {
    width: 96px;
    height: 130px;
  }

  .pk-order-flow .pkof-arrow {
    width: 34px;
  }

  .pk-order-flow .pkof-courier {
    display: none;
  }

  .pk-order-flow .pkof-final .pkof-page {
    width: 120px;
    height: 140px;
  }

  .pk-order-flow .pkof-hint {
    text-align: left;
  }
}

/* ─── Phones: one compact story instead of three stacked panels ───
   The illustration desk repeats what the chat already shows, so it is
   dropped; the four step cards collapse into a 1–4 stepper whose caption
   shows only the active step, directly under the phone. Only when motion
   is allowed — reduced-motion users keep the full readable list. */

@media (prefers-reduced-motion: no-preference) {
  @container pkof (max-width: 560px) {
    .pk-order-flow .pkof-stage {
      --pkof-cycle: 32s;
      gap: 14px;
    }

    .pk-order-flow .pkof-head h2 {
      font-size: 24px;
      line-height: 1.25;
    }

    .pk-order-flow .pkof-head p {
      font-size: 15px;
      line-height: 1.55;
    }

    .pk-order-flow .pkof-desk {
      display: none;
    }

    .pk-order-flow .pkof-phone-wrap {
      padding: 14px 0;
    }

    .pk-order-flow .pkof-phone-wrap::before {
      display: none;
    }

    .pk-order-flow .pkof-phone {
      width: 256px;
      height: 420px;
      animation: none;
    }

    .pk-order-flow .pkof-chat {
      height: 330px;
    }

    .pk-order-flow .pkof-day {
      display: none;
    }

    .pk-order-flow .pkof-bubble {
      max-width: 92%;
      font-size: 13.5px;
      line-height: 1.45;
    }

    /* Stepper */

    .pk-order-flow .pkof-steps {
      position: relative;
      display: block;
      height: 176px;
    }

    .pk-order-flow .pkof-steps::before {
      content: "";
      position: absolute;
      top: 17px;
      left: 12.5%;
      right: 12.5%;
      height: 2px;
      background: var(--pkof-border);
    }

    .pk-order-flow .pkof-step {
      position: static;
      display: block;
      padding: 0;
      background: none;
      border: 0;
      box-shadow: none;
      animation: none;
    }

    .pk-order-flow .pkof-num {
      position: absolute;
      z-index: 1;
      top: 0;
      left: calc(12.5% - 17px);
      box-shadow: 0 0 0 4px #fff;
    }

    .pk-order-flow .pkof-step:nth-child(2) .pkof-num { left: calc(37.5% - 17px); }
    .pk-order-flow .pkof-step:nth-child(3) .pkof-num { left: calc(62.5% - 17px); }
    .pk-order-flow .pkof-step:nth-child(4) .pkof-num { left: calc(87.5% - 17px); }

    .pk-order-flow .pkof-step-body {
      position: absolute;
      top: 48px;
      left: 0;
      right: 0;
      bottom: 0;
      padding: 12px 14px 14px;
      background: var(--pkof-soft);
      border: 1px solid var(--pkof-border);
      border-left: 4px solid var(--pkof-red);
      border-radius: 10px;
      animation: pkofScene var(--pkof-cycle) var(--pkof-ease) var(--pkof-at) infinite backwards;
    }

    .pk-order-flow .pkof-step h3 {
      margin: 0 0 4px;
      font-size: 17px;
    }

    .pk-order-flow .pkof-step p {
      font-size: 15px;
      line-height: 1.5;
    }

    .pk-order-flow .pkof-bar {
      left: 4px;
      right: 0;
      bottom: 0;
      border-radius: 0 0 10px 0;
    }
  }
}

/* Touch screens have no hover: tapping the section pauses it instead
   (it is focusable), so the hint says "tap". */

.pk-order-flow:focus {
  outline: none;
}

.pk-order-flow:focus-visible {
  outline: 3px solid var(--pkof-ok);
  outline-offset: 3px;
}

.pk-order-flow .pkof-hint-tap {
  display: none;
}

@media (hover: none) {
  .pk-order-flow .pkof-hint-hover {
    display: none;
  }

  .pk-order-flow .pkof-hint-tap {
    display: inline;
  }
}

/* ─── Reduced motion: no animation, show a static readable state ─── */

@media (prefers-reduced-motion: reduce) {
  .pk-order-flow *,
  .pk-order-flow *::before,
  .pk-order-flow *::after {
    animation: none !important;
  }

  .pk-order-flow .pkof-group:not(.pkof-p1),
  .pk-order-flow .pkof-scene:not(.pkof-p4),
  .pk-order-flow .pkof-desk-label .pkof-label:not(.pkof-p4),
  .pk-order-flow .pkof-typing,
  .pk-order-flow .pkof-beam,
  .pk-order-flow .pkof-hint {
    display: none;
  }
}



/* =========================================================
   Step 1.6 (31 Oct 2026) — skip link and archive headings
   ========================================================= */
/* Skip link styles moved to an inline <style> in inc/pk-layout.php (1 Nov 2026), so they also reach the homepage. */

.pk-archive-header { box-sizing: border-box; max-width: 100%; padding: 32px 20px 8px; }
.pk-archive-title {
  font-family: 'Noto Serif Lao', Georgia, serif; font-weight: 500;
  font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem); line-height: 1.2;
  color: #1f1e21; margin: 0 0 8px;
}
.pk-archive-intro { color: #4b4a4d; font-size: 1.05rem; margin: 0; max-width: 60ch; }

/* =========================================================
   1 Nov 2026 — owner's fixes for the page-content blocks (.pk-page), site-wide
   ========================================================= */
/* Buttons: the <br> between two buttons was its own flex item, tripling the gap. */
body .pk-page .pk-actions br { display: none; }
/* Four-box facts: the value text inherited 20px and looked bigger than its 17px heading. */
body .pk-page .pk-fact { font-size: 15px; line-height: 1.5; color: var(--pk-dark); }
/* Contact strip: plain values (consultation hours) inherited 20px; match the 16px links. */
body .pk-page .pk-contact-item { font-size: 16px; font-weight: 600; line-height: 1.5; }
/* "Ready to file" box: office hours printed under the buttons (inc/pk-legacy-content.php). */
body .pk-page .pk-cta .pk-actions { align-items: flex-start; }
body .pk-page .pk-cta-hours { flex: none; width: 100%; contain: inline-size; text-wrap: balance; margin: 4px 0 0; font-size: 14px; line-height: 1.5; color: var(--pk-white); opacity: 0.9; } /* contain: never widen the buttons column on desktop */
/* Maroon "Ready to file" boxes: text links were maroon on maroon (1 Nov 2026). */
body .pk-page .pk-cta a:not(.btn), .pkc-cta p a { color: #fff; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, 0.6); text-underline-offset: 3px; }
body .pk-page .pk-cta a:not(.btn):hover, .pkc-cta p a:hover { text-decoration-color: #fff; }
/* Blog posts: headings sat right under the paragraph above (margin-top 0). */
body .pk-blog-post > h2:not(:first-child) { margin-top: 2.5rem; }
body .pk-blog-post > h3:not(:first-child) { margin-top: 1.75rem; }
body .pk-blog-post > p + p { margin-top: 0.9rem; }
/* Box stacked (≤1024 px): buttons area spans the box, so the hours line is not squeezed to one word per line. */
@media (max-width: 1024px) { body .pk-page .pk-cta .pk-actions { align-self: stretch; } }
/* Archive H1 (Step 1.6) sits inside the blog's flex row; give it its own full-width row above posts + sidebar (1 Nov 2026). */
body .blog_page { flex-wrap: wrap; }
body .blog_page > .pk-archive-header { flex: 0 0 100%; max-width: 100%; }
@media (min-width: 1025px) { body .blog_page > .blog_section { flex: 1 1 0; } }
/* Older-page and blog FAQs: open answer closer to its question (owner, 2 Nov 2026). */
body .pk-page details.pk-faq[open] > summary { padding-bottom: 6px; }
.pk-layout > * { min-width: 0; }
.pk-main img { max-width: 100%; height: auto; }