/* ==========================================================================
   PDC Visa International — inner-page components
   Loaded after styles.css and site.css on every page except the homepage.
   Each page composes its own layout from these pieces; nothing here forces a
   page shape. Class prefix: pg-
   ========================================================================== */

:root {
  --pg-h1: clamp(2.25rem, 1.5rem + 3vw, 3.5rem);
  --pg-h2: clamp(1.75rem, 1.25rem + 1.8vw, 2.5rem);
  --pg-section: clamp(2.75rem, 1.75rem + 3.5vw, 4.75rem);
  --pg-anchor: calc(var(--header-h) + 72px);
}

/* ------------------------------------------------------------- Page hero */
.pg-hero { background: var(--hp-surface); border-bottom: 1px solid var(--hp-line); }
.pg-hero__inner { padding-block: clamp(2.5rem, 1.5rem + 3.25vw, 4.25rem); }
.pg-hero h1 { max-width: 18ch; font-size: var(--pg-h1); line-height: 1.08; letter-spacing: -.015em; text-wrap: balance; }
.pg-hero__lead { max-width: 60ch; margin-top: 16px; font-size: 1.1875rem; line-height: 1.65; color: var(--hp-text-soft); }
.pg-hero__meta { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 20px; font-size: .9375rem; color: var(--muted); }
.pg-hero__meta strong { font-weight: 600; color: var(--brand-950); }
.pg-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }

.pg-crumbs { display: flex; flex-wrap: wrap; gap: 6px 10px; margin-bottom: 16px; font-size: .875rem; color: var(--muted); }
.pg-crumbs a { color: var(--brand-900); font-weight: 500; }
.pg-crumbs li + li::before { content: "/"; margin-right: 10px; color: #B7B0CD; }

.pg-hero--photo .pg-hero__inner {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: clamp(28px, 4vw, 56px); align-items: center;
}
.pg-hero--photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--hp-radius); }

.pg-hero--dark { background: var(--brand-950); border-bottom: 0; color: #fff; }
.pg-hero--dark h1 { color: #fff; }
.pg-hero--dark .pg-hero__lead { color: rgba(255, 255, 255, .84); }
.pg-hero--dark .eyebrow { color: #C9C2F2; }
.pg-hero--dark .pg-hero__meta, .pg-hero--dark .pg-crumbs { color: rgba(255, 255, 255, .62); }
.pg-hero--dark .pg-hero__meta strong, .pg-hero--dark .pg-crumbs a { color: #fff; }
.pg-hero--dark .pg-crumbs li + li::before { color: rgba(255, 255, 255, .35); }

.pg-hero--visas {
  background-image:
    linear-gradient(90deg, rgba(24, 15, 57, .96) 0%, rgba(24, 15, 57, .9) 42%, rgba(24, 15, 57, .58) 72%, rgba(24, 15, 57, .48) 100%),
    url("assets/generated/visa-consultation-thailand.webp");
  background-position: center, 64% 45%;
  background-size: cover;
  background-repeat: no-repeat;
}
.pg-hero--visas .pg-hero__inner { min-height: clamp(420px, 52vw, 570px); }

/* Video hero: copy on the left over footage, subject of the clip on the right. */
.pg-hero--video { position: relative; isolation: isolate; overflow: hidden; background: #E6EDF2; border-bottom: 0; }
.pg-hero--video .pg-hero__bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.pg-hero--video .pg-hero__bg img, .pg-hero__video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 0%;
}
.pg-hero__video { opacity: 0; transition: opacity .6s var(--ease); }
.pg-hero__video.is-ready { opacity: 1; }
.pg-hero__veil {
  position: absolute; inset: 0;
  background: linear-gradient(90deg,
    rgba(248, 247, 252, .9) 0%, rgba(248, 247, 252, .8) 34%,
    rgba(248, 247, 252, .48) 50%, rgba(248, 247, 252, .12) 64%, rgba(248, 247, 252, 0) 76%);
}
.pg-hero--video .pg-hero__inner {
  display: flex; align-items: center; min-height: clamp(520px, 70vh, 680px);
  padding-block: calc(var(--header-h) + clamp(1.5rem, 1rem + 2vw, 3rem)) clamp(2.5rem, 1.5rem + 3vw, 4rem);
}
.pg-hero--video .pg-hero__copy { max-width: 600px; }
.pg-hero--video .hero__video-toggle { display: none !important; }
.site-header--overlay:not(.is-stuck) { background: transparent; border-bottom-color: transparent; box-shadow: none; }

.pg-hero--minimal .pg-hero__inner { padding-block: clamp(2rem, 1.5rem + 2vw, 3.25rem); }
.pg-hero--minimal h1 { font-size: clamp(2rem, 1.5rem + 2vw, 2.75rem); }

/* --------------------------------------------------- Sticky in-page nav */
.pg-subnav {
  position: sticky; top: var(--header-h); z-index: 40;
  background: rgba(255, 255, 255, .96); backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--hp-line);
}
.pg-subnav ul { display: flex; gap: 4px; padding-block: 8px; overflow-x: auto; scrollbar-width: none; }
.pg-subnav ul::-webkit-scrollbar { display: none; }
.pg-subnav a {
  display: inline-flex; align-items: center; min-height: 40px; padding: 6px 14px;
  border-radius: 999px; font-size: .9375rem; font-weight: 500; color: var(--ink); white-space: nowrap;
}
.pg-subnav a:hover { background: var(--hp-surface); color: var(--brand-900); }
.pg-subnav a.is-active { background: var(--brand-100); color: var(--brand-900); font-weight: 600; }

/* --------------------------------------------------------------- Sections */
.pg-section { padding-block: var(--pg-section); }
.pg-section--tint { background: var(--hp-surface); }
.pg-section--line { border-top: 1px solid var(--hp-line); }
.pg-section--tight { padding-block: clamp(2rem, 1.25rem + 2.5vw, 3.25rem); }
.pg-anchor { scroll-margin-top: var(--pg-anchor); }
.pg-section__head { max-width: 720px; margin-bottom: clamp(1.5rem, 2.5vw, 2.25rem); }
.pg-section__head--center { margin-inline: auto; text-align: center; }
.pg-section__head--split { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; max-width: none; }
.pg-section__head--split > div { max-width: 680px; }
.pg-title { font-size: var(--pg-h2); line-height: 1.15; letter-spacing: -.01em; text-wrap: balance; }
.pg-lead { margin-top: 12px; font-size: 1.125rem; line-height: 1.65; color: var(--muted); }

/* ------------------------------------------------ Two columns with aside */
.pg-cols { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: clamp(28px, 4vw, 56px); align-items: start; }
.pg-cols--asideLeft { grid-template-columns: 260px minmax(0, 1fr); }
.pg-cols--wideAside { grid-template-columns: minmax(0, 1fr) 360px; }
.pg-aside { position: sticky; top: calc(var(--header-h) + 24px); }
.pg-aside__box { padding: 20px; background: #fff; border: 1px solid var(--hp-line); border-radius: var(--hp-radius); }
.pg-aside__box + .pg-aside__box { margin-top: 12px; }
.pg-aside__image { margin-bottom: 16px; }
.pg-aside__image img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--hp-radius); }
.pg-aside__box h3 {
  margin-bottom: 14px; font-family: var(--font-body); font-size: .8125rem; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; color: var(--brand-800);
}
.pg-aside__box > ul { display: grid; }
.pg-aside__box > ul li a { display: block; padding: 9px 0; border-bottom: 1px solid var(--hp-line); font-size: .9375rem; color: var(--ink); }
.pg-aside__box > ul li:last-child a { border-bottom: 0; }
.pg-aside__box > ul li a:hover, .pg-aside__box > ul li a.is-active { color: var(--brand-900); font-weight: 600; }
.pg-aside__box dl { display: grid; gap: 14px; }
.pg-aside__box dt { font-size: .8125rem; color: var(--muted); }
.pg-aside__box dd { margin: 2px 0 0; font-weight: 600; color: var(--brand-950); line-height: 1.45; }
.pg-aside__box p { font-size: .9375rem; line-height: 1.6; color: var(--muted); }
.pg-aside__box .btn { width: 100%; margin-top: 16px; }
.pg-aside__box--navy { background: var(--brand-950); border-color: var(--brand-950); color: #fff; }
.pg-aside__box--navy h3 { color: #C9C2F2; }
.pg-aside__box--navy p { color: rgba(255, 255, 255, .8); }
.pg-aside__box--navy strong { color: #fff; }

/* ------------------------------------------------------------------ Prose */
.pg-prose { max-width: 70ch; font-size: 1.0625rem; line-height: 1.7; color: var(--ink); }
.pg-prose > * + * { margin-top: 1em; }
.pg-prose h2 { font-size: clamp(1.625rem, 1.2rem + 1.4vw, 2.125rem); line-height: 1.2; margin-top: 2em; scroll-margin-top: var(--pg-anchor); }
.pg-prose h2:first-child { margin-top: 0; }
.pg-prose h3 { font-family: var(--font-body); font-size: 1.1875rem; font-weight: 600; margin-top: 1.6em; scroll-margin-top: var(--pg-anchor); }
.pg-prose h2 + p, .pg-prose h3 + p { margin-top: .8em; }
.pg-prose p { color: var(--hp-text-soft); }
.pg-prose ul, .pg-prose ol { display: grid; gap: 8px; color: var(--hp-text-soft); }
.pg-prose ul li { position: relative; padding-left: 26px; }
.pg-prose ul li::before { content: ""; position: absolute; left: 6px; top: .72em; width: 7px; height: 7px; border-radius: 50%; background: var(--brand-800); }
.pg-prose ol { counter-reset: item; }
.pg-prose ol li { position: relative; padding-left: 40px; counter-increment: item; }
.pg-prose ol li::before {
  content: counter(item); position: absolute; left: 0; top: .1em;
  display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  background: var(--brand-900); color: #fff; font-size: .8125rem; font-weight: 600;
}
.pg-prose a { color: var(--brand-900); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: #CBC6E6; }
.pg-prose a:hover { text-decoration-color: currentColor; }
.pg-prose strong { color: var(--brand-950); font-weight: 600; }
.pg-prose figure { margin: 2em 0; }
.pg-prose figure img { width: 100%; border-radius: var(--hp-radius); }
.pg-prose figcaption { margin-top: 10px; font-size: .875rem; color: var(--muted); }
.pg-prose--wide { max-width: none; }

/* Check list */
.pg-check { display: grid; gap: 10px; }
.pg-check li { position: relative; padding-left: 30px; line-height: 1.55; color: var(--ink); }
.pg-check li::before {
  content: ""; position: absolute; left: 0; top: 3px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--brand-100) var(--hp-check) center / 12px no-repeat;
}
.pg-prose .pg-check li { padding-left: 30px; }
.pg-prose .pg-check li::before { left: 0; top: 4px; width: 20px; height: 20px; border-radius: 50%; background: var(--brand-100) var(--hp-check) center / 12px no-repeat; }

/* Callouts */
.pg-callout { padding: 16px 20px; border-left: 4px solid var(--brand-800); border-radius: 12px; background: var(--hp-surface); }
.pg-callout--warn { border-left-color: var(--magenta-600); }
.pg-callout strong { display: block; margin-bottom: 6px; color: var(--brand-950); }
.pg-callout p { font-size: 1rem; line-height: 1.65; color: var(--hp-text-soft); }
.pg-callout p + p { margin-top: 8px; }

/* Key facts */
.pg-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; }
.pg-fact { padding: 20px 22px; background: #fff; border: 1px solid var(--hp-line); border-radius: 14px; }
.pg-fact span { display: block; margin-bottom: 8px; font-size: .75rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--brand-800); }
.pg-fact strong { font-size: 1.0625rem; font-weight: 600; line-height: 1.4; color: var(--brand-950); }
.pg-fact p { margin-top: 6px; font-size: .9rem; line-height: 1.55; color: var(--muted); }

/* ----------------------------------------------------------- Region cards */
.pg-regions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.pg-region { display: flex; flex-direction: column; gap: 10px; padding: 22px; background: #fff; border: 1px solid var(--hp-line); border-radius: var(--hp-radius); }
.pg-region__tag { font-size: .75rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--brand-800); }
.pg-region h3 { font-size: 1.375rem; }
.pg-region p { font-size: .9375rem; line-height: 1.6; color: var(--muted); }
.pg-region dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin-top: 4px; padding-top: 14px; border-top: 1px solid var(--hp-line); font-size: .9rem; }
.pg-region dt { color: var(--muted); }
.pg-region dd { margin: 0; font-weight: 500; color: var(--ink); }
.pg-region .link-cta { margin-top: auto; padding-top: 4px; }

/* ------------------------------------------------------------------ Table */
.pg-table-wrap { overflow-x: auto; background: #fff; border: 1px solid var(--hp-line); border-radius: var(--hp-radius); }
.pg-table { width: 100%; border-collapse: collapse; font-size: .9875rem; }
.pg-table th, .pg-table td { padding: 12px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--hp-line); line-height: 1.5; }
.pg-table thead th { background: var(--hp-surface); font-size: .8125rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--brand-800); }
.pg-table tbody th { width: 24%; font-weight: 600; color: var(--brand-950); }
.pg-table tbody tr:last-child th, .pg-table tbody tr:last-child td { border-bottom: 0; }
.pg-table td { color: var(--hp-text-soft); }
.pg-table .yes { font-weight: 600; color: var(--brand-900); }
.pg-table .yes::before {
  content: ""; display: inline-block; width: 18px; height: 18px; margin-right: 8px; vertical-align: -3px;
  border-radius: 50%; background: var(--brand-100) var(--hp-check) center / 11px no-repeat;
}
.pg-table .no { color: #A9A4C2; }
.pg-table--featured thead th:nth-child(3), .pg-table--featured td:nth-child(3) { background: rgba(38, 35, 126, .04); }
.pg-table__note { margin-top: 12px; font-size: .875rem; color: var(--muted); }

/* --------------------------------------------------------------- Timeline */
.pg-timeline { display: grid; }
.pg-phase { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 16px 40px; padding-block: 28px; border-top: 1px solid var(--hp-line); scroll-margin-top: var(--pg-anchor); }
.pg-phase:last-child { border-bottom: 1px solid var(--hp-line); }
.pg-phase__when { position: sticky; top: calc(var(--header-h) + 80px); }
.pg-phase__when span { display: block; font-size: .75rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--brand-800); }
.pg-phase__when h3 { margin-top: 8px; font-size: 1.5rem; }
.pg-phase__body { display: grid; gap: 14px; max-width: 70ch; }
.pg-phase__body p { font-size: 1.0625rem; line-height: 1.7; color: var(--hp-text-soft); }
.pg-phase__tasks { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 24px; }
.pg-phase__tasks li { font-size: .9875rem; }

/* ----------------------------------------- Feature rows (image + copy) */
.pg-feature { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 3.5vw, 52px); align-items: center; padding-block: clamp(1.75rem, 2.5vw, 2.5rem); scroll-margin-top: var(--pg-anchor); }
.pg-feature + .pg-feature { border-top: 1px solid var(--hp-line); }
.pg-feature--flip .pg-feature__media { order: 2; }
.pg-feature__media img { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; border-radius: var(--hp-radius); }
.pg-feature__body h2, .pg-feature__body h3 { font-size: clamp(1.5rem, 1.2rem + 1vw, 1.875rem); line-height: 1.2; }
.pg-feature__body > p { margin-top: 12px; font-size: 1.0625rem; line-height: 1.7; color: var(--hp-text-soft); }
.pg-feature__body .pg-check { margin-top: 16px; }
.pg-feature__body .link-cta { margin-top: 22px; }

/* ------------------------------------------------------- Numbered steps */
.pg-steps { display: grid; }
.pg-step {
  display: grid; grid-template-columns: 88px minmax(0, 1fr) minmax(0, .85fr);
  gap: 16px clamp(20px, 3.5vw, 48px); align-items: center;
  padding-block: clamp(1.75rem, 3vw, 2.75rem); border-top: 1px solid var(--hp-line);
  scroll-margin-top: var(--pg-anchor);
}
.pg-step:last-child { border-bottom: 1px solid var(--hp-line); }
.pg-step__num { font-family: var(--font-head); font-size: clamp(3rem, 5vw, 4.5rem); font-weight: 600; line-height: 1; color: #DAD6EC; }
.pg-step h3 { font-size: 1.5rem; }
.pg-step p { margin-top: 10px; font-size: 1.0625rem; line-height: 1.7; color: var(--hp-text-soft); }
.pg-step__meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.pg-step__meta span { padding: 6px 12px; border-radius: 999px; background: var(--hp-surface); font-size: .8125rem; font-weight: 500; color: var(--brand-900); }
.pg-step__media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--hp-radius); }

/* ------------------------------------------------------- Reading list */
.pg-featured {
  display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(28px, 4vw, 56px); align-items: center;
  padding: clamp(20px, 2.5vw, 32px); background: #fff; border: 1px solid var(--hp-line); border-radius: var(--hp-radius);
}
.pg-featured img { width: 100%; aspect-ratio: 16 / 11; object-fit: cover; border-radius: 14px; }
.pg-featured h2 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); line-height: 1.2; }
.pg-featured p { margin-top: 14px; font-size: 1.0625rem; line-height: 1.7; color: var(--hp-text-soft); }
.pg-featured .btn { margin-top: 20px; }

.pg-reading { border-top: 1px solid var(--hp-line); }
.pg-reading li { border-bottom: 1px solid var(--hp-line); }
.pg-reading a { display: grid; grid-template-columns: 130px minmax(0, 1fr) auto; gap: 20px; align-items: center; padding: 16px 0; color: var(--ink); }
.pg-reading__tag { font-size: .75rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--brand-800); }
.pg-reading h3 { font-family: var(--font-body); font-size: 1.125rem; font-weight: 600; color: var(--brand-950); }
.pg-reading a:hover h3 { color: var(--brand-800); }
.pg-reading p { margin-top: 4px; font-size: .9375rem; line-height: 1.55; color: var(--muted); }
.pg-reading__arrow { font-size: 1.25rem; color: var(--brand-800); }
.pg-topic-groups { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(20px, 3.5vw, 44px); }
.pg-topic-group h2 { font-size: 1.5rem; margin-bottom: 6px; scroll-margin-top: var(--pg-anchor); }
.pg-topic-group > p { margin-bottom: 8px; font-size: .9875rem; color: var(--muted); }

/* --------------------------------------------------------------- FAQ page */
.pg-faq-group { scroll-margin-top: var(--pg-anchor); }
.pg-faq-group + .pg-faq-group { margin-top: clamp(2rem, 3vw, 2.75rem); }
.pg-faq-group h2 { font-size: 1.5rem; margin-bottom: 6px; }
.pg-faq-group > p { margin-bottom: 14px; font-size: .9875rem; color: var(--muted); }
.pg-faq { border-top: 1px solid var(--hp-line); }
.pg-faq details { border-bottom: 1px solid var(--hp-line); }
.pg-faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 15px 0; cursor: pointer; list-style: none;
  font-size: 1.0625rem; font-weight: 600; line-height: 1.4; color: var(--brand-950);
}
.pg-faq summary::-webkit-details-marker { display: none; }
.pg-faq summary::after {
  content: "+"; flex: none; display: grid; place-items: center; width: 30px; height: 30px;
  border: 1px solid #CBC6E6; border-radius: 50%; color: var(--brand-900); font-size: 1.25rem; font-weight: 400; line-height: 1;
}
.pg-faq details[open] summary::after { content: "\2212"; }
.pg-faq details p { max-width: 68ch; padding-bottom: 16px; line-height: 1.7; color: var(--muted); }
.pg-faq details p + p { margin-top: -8px; }
.pg-faq details a { color: var(--brand-900); text-decoration: underline; text-underline-offset: 4px; }

/* ------------------------------------------------------------------ About */
.pg-statement { max-width: 28ch; font-family: var(--font-head); font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem); font-weight: 500; line-height: 1.35; color: var(--brand-950); }
.pg-values { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.pg-value { padding: 22px; background: #fff; border: 1px solid var(--hp-line); border-radius: 14px; }
.pg-value .ico { width: 26px; height: 26px; margin-bottom: 14px; color: var(--brand-800); }
.pg-value h3 { margin-bottom: 6px; font-family: var(--font-body); font-size: 1.0625rem; font-weight: 600; }
.pg-value p { font-size: .9375rem; line-height: 1.6; color: var(--muted); }
.pg-office { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: center; }
.pg-office__card { padding: clamp(20px, 2.5vw, 30px); background: #fff; border: 1px solid var(--hp-line); border-radius: var(--hp-radius); }
.pg-office__card img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 14px; margin-bottom: 22px; }
.pg-office__card dl { display: grid; gap: 16px; }
.pg-office__card dt { font-size: .75rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--brand-800); }
.pg-office__card dd { margin: 4px 0 0; line-height: 1.55; color: var(--ink); }
.pg-office__card dd a { color: var(--brand-900); }
.pg-photo-strip { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; }
.pg-photo-strip img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--hp-radius); aspect-ratio: 16 / 10; }

/* ---------------------------------------------------------------- Contact */
.pg-channels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.pg-channel { display: flex; gap: 12px; align-items: flex-start; padding: 16px 18px; background: #fff; border: 1px solid var(--hp-line); border-radius: 14px; color: var(--ink); transition: border-color .2s var(--ease); }
.pg-channel:hover { border-color: var(--brand-900); }
.pg-channel__icon { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--hp-surface); color: var(--brand-800); }
.pg-channel__icon .ico { width: 22px; height: 22px; }
.pg-channel--wa .pg-channel__icon { background: #E7F8EE; color: #128C4A; }
.pg-channel--line .pg-channel__icon { background: #E6F7EC; color: #06834A; }
.pg-channel--fb .pg-channel__icon { background: #E9EEFB; color: #1B4EC0; }
.pg-channel--mail .pg-channel__icon { background: #FBE9F3; color: var(--magenta-600); }
.pg-channel__text { min-width: 0; }
.pg-channel__text strong { display: block; font-weight: 600; color: var(--brand-950); }
.pg-channel__text > span { display: block; margin-top: 2px; font-size: .875rem; line-height: 1.5; color: var(--muted); overflow-wrap: anywhere; }
.pg-contact { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(28px, 3.5vw, 52px); align-items: start; }
.pg-contact .consult__formWrap { border-radius: var(--hp-radius); box-shadow: none; }
.pg-contact__media { margin-bottom: 16px; }
.pg-contact__media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--hp-radius); }
.pg-hours { display: grid; gap: 8px; }
.pg-hours li { display: flex; justify-content: space-between; gap: 16px; padding: 8px 0; border-bottom: 1px solid var(--hp-line); font-size: .9375rem; }
.pg-hours li:last-child { border-bottom: 0; }
.pg-hours span:last-child { font-weight: 600; color: var(--brand-950); }

/* ------------------------------------------------------------ Legal docs */
.pg-doc { max-width: 76ch; font-size: 1.0625rem; line-height: 1.7; }
.pg-doc > * + * { margin-top: 1em; }
.pg-doc h2 { margin-top: 1.8em; padding-top: 1.2em; border-top: 1px solid var(--hp-line); font-size: 1.5rem; scroll-margin-top: var(--pg-anchor); }
.pg-doc h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.pg-doc h2 + p { margin-top: .7em; }
.pg-doc p, .pg-doc li { color: var(--hp-text-soft); }
.pg-doc ul { display: grid; gap: 8px; }
.pg-doc ul li { position: relative; padding-left: 26px; }
.pg-doc ul li::before { content: ""; position: absolute; left: 6px; top: .72em; width: 7px; height: 7px; border-radius: 50%; background: var(--brand-800); }
.pg-doc a { color: var(--brand-900); text-decoration: underline; text-underline-offset: 4px; }
.pg-doc__meta { font-size: .9375rem; color: var(--muted); }

/* ------------------------------------------------------------- End CTA */
.pg-cta { background: var(--brand-950); color: #fff; }
.pg-cta__inner { display: flex; align-items: center; justify-content: space-between; gap: 28px; padding-block: clamp(2.25rem, 3.5vw, 3.25rem); }
.pg-cta h2 { font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.125rem); line-height: 1.2; color: #fff; }
.pg-cta p { max-width: 50ch; margin-top: 10px; line-height: 1.6; color: rgba(255, 255, 255, .8); }
.pg-cta__actions { display: flex; flex: none; flex-wrap: wrap; gap: 12px; }
.btn--ghostOnNavy { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .45); }
.btn--ghostOnNavy:hover { background: rgba(255, 255, 255, .08); border-color: #fff; }

/* ---------------------------------------------------------- Next steps */
.pg-next { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.pg-next a { display: block; padding: 18px 20px; background: #fff; border: 1px solid var(--hp-line); border-radius: 14px; color: var(--ink); transition: border-color .2s var(--ease); }
.pg-next a:hover { border-color: var(--brand-900); }
.pg-next span { display: block; margin-bottom: 8px; font-size: .75rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--brand-800); }
.pg-next strong { display: block; font-size: 1.0625rem; font-weight: 600; line-height: 1.4; color: var(--brand-950); }
.pg-next em { display: block; margin-top: 6px; font-size: .9rem; font-style: normal; line-height: 1.5; color: var(--muted); }

/* ------------------------------------------------------------ Responsive */
@media (max-width: 1023px) {
  .pg-cols, .pg-cols--asideLeft, .pg-cols--wideAside { grid-template-columns: 1fr; }
  .pg-aside { position: static; }
  .pg-cols--asideLeft .pg-aside { order: -1; }
  .pg-aside--mobileFirst, .pg-contact__side { order: -1; }
  .pg-hero--photo .pg-hero__inner { grid-template-columns: 1fr; }
  .pg-hero--photo img { aspect-ratio: 16 / 9; }
  .pg-section__head--split { flex-direction: column; align-items: flex-start; gap: 16px; }
  .pg-regions { grid-template-columns: 1fr 1fr; }
  .pg-phase { grid-template-columns: 1fr; gap: 12px; }
  .pg-phase__when { position: static; }
  .pg-feature { grid-template-columns: 1fr; }
  .pg-feature--flip .pg-feature__media { order: 0; }
  .pg-feature__media img { aspect-ratio: 16 / 9; }
  .pg-step { grid-template-columns: 64px minmax(0, 1fr); }
  .pg-step__media { grid-column: 2; }
  .pg-featured { grid-template-columns: 1fr; }
  .pg-values { grid-template-columns: 1fr 1fr; }
  .pg-office, .pg-contact, .pg-topic-groups { grid-template-columns: 1fr; }
  .pg-channels { grid-template-columns: 1fr 1fr; }
  .pg-next { grid-template-columns: 1fr; }
  .pg-cta__inner { flex-direction: column; align-items: flex-start; }
  .pg-photo-strip { grid-template-columns: 1fr; }
}

@media (max-width: 767px) {
  :root { --pg-section: 2.5rem; }
  .pg-hero--visas {
    background-image:
      linear-gradient(rgba(24, 15, 57, .86), rgba(24, 15, 57, .92)),
      url("assets/generated/visa-consultation-thailand.webp");
    background-position: center, 58% center;
  }
  .pg-hero--visas .pg-hero__inner { min-height: 0; }
  /* Phones: footage fills the top, copy rests on a white fade below it. */
  .pg-hero--video .pg-hero__inner { align-items: flex-end; min-height: min(78vh, 600px); padding-block: calc(var(--header-h) + 30vh) 1.5rem; }
  .pg-hero--video .pg-hero__bg img, .pg-hero__video { object-position: 70% 0%; }
  .pg-hero__veil {
    background: linear-gradient(180deg,
      rgba(248, 247, 252, .12) 0%, rgba(248, 247, 252, .06) 30%,
      rgba(248, 247, 252, .68) 52%, rgba(248, 247, 252, .95) 66%, #F8F7FC 100%);
  }
  .pg-hero--video .pg-crumbs { display: none; }
  .pg-hero h1 { max-width: none; }
  .pg-regions, .pg-channels, .pg-values, .pg-phase__tasks { grid-template-columns: 1fr; }
  .pg-reading a { grid-template-columns: 1fr; gap: 6px; }
  .pg-reading__arrow { display: none; }
  .pg-step { grid-template-columns: 1fr; }
  .pg-step__num { font-size: 2.5rem; }
  .pg-step__media { grid-column: auto; }
  .pg-table th, .pg-table td { padding: 12px 14px; font-size: .9375rem; }
  .pg-table tbody th { width: auto; }
  .pg-subnav ul { margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); }
  .pg-featured { padding: 18px; }
}

/* ==========================================================================
   V4 page components (PDC-Visa-Website-Design_V4.pdf). Appended after the
   original responsive blocks, so each one carries its own breakpoints.
   ========================================================================== */

/* About hero: logo card on the right */
.pg-hero__logo { justify-self: end; width: min(100%, 340px); margin: 0; padding: clamp(18px, 2.4vw, 30px); background: #fff; border-radius: var(--hp-radius); }
.pg-hero--photo .pg-hero__logo img { aspect-ratio: auto; object-fit: contain; border-radius: 0; }

/* Big-number facts */
.pg-fact--stat strong { display: block; font-family: var(--font-head); font-size: clamp(1.75rem, 1.4rem + 1vw, 2.25rem); font-weight: 600; line-height: 1.1; color: var(--brand-900); }
.pg-fact--stat p { margin-top: 8px; }

/* Heading beside copy */
.pg-split { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(24px, 4vw, 64px); align-items: start; }

/* Four-up cards and reasons */
.pg-values--four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pg-value .link-cta { margin-top: 12px; }
.pg-reasons { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(20px, 2.4vw, 32px); }
.pg-reasons li { padding-top: 16px; border-top: 2px solid var(--brand-900); }
.pg-reasons h3 { font-family: var(--font-body); font-size: 1.0625rem; font-weight: 600; }
.pg-reasons p { margin-top: 8px; font-size: .9375rem; line-height: 1.6; color: var(--muted); }

.pg-offices-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 22px; font-size: .9375rem; color: var(--muted); }

/* Card variants */
.pg-region--navy { background: var(--brand-950); border-color: var(--brand-950); }
.pg-region--navy h3 { color: #fff; }
.pg-region--navy p { color: rgba(255, 255, 255, .82); }
.pg-region--navy .pg-region__tag { color: #C9C2F2; }
.pg-region--navy .btn { margin-top: auto; }
.pg-region .pg-region__best { margin-top: auto; padding-top: 4px; font-size: .875rem; font-weight: 600; color: var(--magenta-600); }

/* A / B / C money routes */
.pg-abc { display: grid; gap: 12px; }
.pg-abc li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; align-items: start; padding: 18px 20px; background: #fff; border: 1px solid var(--hp-line); border-radius: 14px; }
.pg-abc span { font-family: var(--font-head); font-size: 1.75rem; line-height: 1; color: var(--magenta-600); }
.pg-abc p { line-height: 1.65; color: var(--hp-text-soft); }
.pg-abc strong { color: var(--brand-950); font-weight: 600; }

/* Tick-as-you-go document checklists */
.pg-checklists { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 20px); }
.pg-checklists--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pg-checklist { padding: clamp(20px, 2.4vw, 28px); background: #fff; border: 1px solid var(--hp-line); border-radius: var(--hp-radius); }
.pg-checklist h3 { font-size: 1.375rem; }
.pg-checklist ul { display: grid; gap: 10px; margin-top: 16px; }
.pg-checklist label { display: flex; gap: 12px; align-items: flex-start; font-size: .9875rem; line-height: 1.55; color: var(--ink); cursor: pointer; }
.pg-checklist input { flex: none; width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--brand-800); cursor: pointer; }
.pg-checklist label:has(input:checked) { color: var(--muted); text-decoration: line-through; text-decoration-color: rgba(106, 100, 132, .5); }

/* Navy band with four numbered steps */
.pg-section--navy { background: var(--brand-950); color: #fff; }
.pg-section--navy .pg-title { color: #fff; }
.pg-steps4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(20px, 2.4vw, 32px); }
.pg-steps4 li { padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, .25); }
.pg-steps4 span { display: block; font-family: var(--font-head); font-size: 1.5rem; color: var(--magenta-300); }
.pg-steps4 h3 { margin-top: 8px; font-family: var(--font-body); font-size: 1.0625rem; font-weight: 600; color: #fff; }
.pg-steps4 p { margin-top: 6px; font-size: .9375rem; line-height: 1.6; color: rgba(255, 255, 255, .78); }

/* Centred FAQ */
.pg-narrow { max-width: 860px; }
.pg-title--center { margin-bottom: clamp(1.25rem, 2vw, 1.75rem); text-align: center; }

@media (max-width: 1023px) {
  .pg-values--four, .pg-reasons, .pg-steps4, .pg-checklists--three { grid-template-columns: 1fr 1fr; }
  .pg-split { grid-template-columns: 1fr; }
  .pg-hero__logo { justify-self: start; }
}
@media (max-width: 767px) {
  .pg-values--four, .pg-reasons, .pg-steps4, .pg-checklists, .pg-checklists--three { grid-template-columns: 1fr; }
  .pg-hero__logo { display: none; }
}
/* edit_1: four language codes have to fit the same card as one number. */
.pg-fact--stat .pg-fact__langs { font-size: clamp(1.25rem, 1rem + .7vw, 1.625rem); white-space: nowrap; }