/*
 * Progressive Diagnostics — component classes.
 *
 * Brand components built on the tokens in design-system.css. GenerateBlocks
 * blocks and the /patterns/*.php files reference these via the block's
 * "Additional CSS class(es)" field, so page markup stays lean and the design
 * lives in one stylesheet. Change a value here (or a token) and every block,
 * pattern and page updates at once.
 *
 * Flat brand: hairline borders, generous white space, blue as a ~15% accent.
 * No drop shadows, no gradients, no glow. Never pure black — use --ink.
 *
 * Naming mirrors the homepage design (brand/redesign/homepage-modern.html):
 *   .pd-section  section shell        .pd-tile      bordered card
 *   .pd-wrap     1200px container     .pd-icon-chip tinted icon box
 *   .pd-eyebrow  blue kicker          .pd-statbar   figure row
 *   .pd-display/.pd-h2/.pd-h3         .pd-check     ticked list item
 *   .pd-lede     lead paragraph       .pd-cta       dark call-to-action
 *   .pd-btn      buttons              .pd-arrow-link tertiary link
 *   .pd-util-bar / .pd-site-bar       header chrome
 *   .pd-footer                        site footer
 *
 * AUTHORING CONTRACT — GenerateBlocks owns structure; this file owns look.
 * Prefer className=".pd-*" over baking colour/type/space into block styles.
 */

/* Smooth-scrolls same-page anchor links (e.g. hero "Book now" → #pd-sessions). */
@media (prefers-reduced-motion: no-preference) {
	html { scroll-behavior: smooth; }
}

/* ============================================================ LAYOUT */
.pd-section { padding: var(--pd-section) var(--pd-gutter); background: var(--white); }
.pd-section--paper { background: var(--paper); }
.pd-section--ink   { background: var(--ink); color: var(--on-ink-body); }
.pd-section--tight { padding-block: clamp(40px, 5vw, 56px); }
/* Credential strip on white — replaces the full-width paper band that read as a stray grey banner */
.pd-strip { background: var(--white); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

.pd-wrap { max-width: var(--pd-container); margin-inline: auto; }
.pd-wrap--narrow { max-width: 760px; }

/* Vertical stack with a consistent gap between children */
.pd-stack { display: flex; flex-direction: column; gap: var(--pd-space-md); }
.pd-stack--lg { gap: var(--pd-space-xl); }
.pd-stack--sm { gap: var(--pd-space-sm); }

/* Horizontal wrapping row (button clusters, meta rows) */
.pd-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pd-space-sm); }

/* Auto-fit responsive grids */
.pd-grid { display: grid; gap: var(--pd-space-md); }
.pd-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pd-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pd-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1024px) { .pd-grid--3, .pd-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .pd-grid--2, .pd-grid--3, .pd-grid--4 { grid-template-columns: 1fr; } }

/* Content + aside split (hero / feature rows) */
.pd-split { display: grid; gap: var(--pd-space-xl); align-items: center; grid-template-columns: 1.1fr .9fr; }
@media (max-width: 768px) { .pd-split { grid-template-columns: 1fr; gap: var(--pd-space-lg); } }

/* Section header: intro block on the left, optional link on the right */
.pd-section-head { display: flex; gap: var(--pd-space-lg); justify-content: space-between; align-items: flex-end; }
@media (max-width: 768px) { .pd-section-head { flex-direction: column; align-items: flex-start; gap: var(--pd-space-sm); } }

/* ============================================================ TYPOGRAPHY */
.pd-eyebrow {
	display: inline-flex; align-items: center; gap: 12px;
	font-family: var(--pd-font-text); font-size: var(--pd-text-label); font-weight: 600;
	letter-spacing: .16em; text-transform: uppercase; color: var(--blue);
}
/* Dash-marked variant (leading blue rule) */
.pd-eyebrow--mark::before { content: ""; width: 26px; height: 1.5px; background: var(--blue); flex-shrink: 0; }

.pd-display {
	font-family: var(--pd-font-display); font-size: var(--pd-text-display); font-weight: 500;
	letter-spacing: -.01em; line-height: 1.12; color: var(--ink); text-wrap: balance;
}
.pd-h2 {
	font-family: var(--pd-font-display); font-size: var(--pd-text-h2); font-weight: 500;
	letter-spacing: -.01em; line-height: 1.16; color: var(--ink); text-wrap: balance;
}
.pd-h3 {
	font-family: var(--pd-font-display); font-size: var(--pd-text-h3); font-weight: 500;
	line-height: 1.25; color: var(--ink);
}
.pd-lede { font-family: var(--pd-font-text); font-size: var(--pd-text-lead); line-height: var(--pd-leading); color: var(--slate); }
.pd-prose { font-size: var(--pd-text-body); line-height: var(--pd-leading); color: var(--slate); max-width: 68ch; }
.pd-prose > * + * { margin-top: 1em; }
.pd-prose h2 { margin-top: 1.6em; }
.pd-prose h3 { margin-top: 1.4em; }

/* Blue emphasis inside a heading (homepage <em> accent), de-italicised */
.pd-accent { font-style: normal; color: var(--blue); }

/* Uppercase micro-label on cards */
.pd-tag { font-family: var(--pd-font-text); font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.pd-tag--blue { color: var(--blue); }

/* On dark sections */
.pd-section--ink .pd-display,
.pd-section--ink .pd-h2,
.pd-section--ink .pd-h3 { color: var(--on-ink); }
.pd-section--ink .pd-lede { color: var(--on-ink-body); }
.pd-section--ink .pd-eyebrow { color: var(--sky); }

/* ============================================================ BUTTONS + LINKS */
.pd-btn {
	display: inline-flex; align-items: center; gap: var(--pd-space-xs);
	padding: var(--pd-btn-pad); border-radius: var(--pd-radius-sm); border: 1.5px solid transparent;
	font-family: var(--pd-font-text); font-size: 15px; font-weight: 600; line-height: 1;
	text-decoration: none; cursor: pointer; transition: background-color var(--pd-transition), border-color var(--pd-transition), color var(--pd-transition);
}
.pd-btn svg { width: 18px; height: 18px; }
/*
 * Hard color locks — GP Customizer `.inside-article a` (0,1,1) and theme.json
 * `a:where(:not(.wp-element-button))` paint links blue-d. GB buttons are bare
 * <a class="pd-btn"> without .wp-element-button, so they go blue-on-blue.
 */
.pd-btn--blue  { background: var(--blue); border-color: var(--blue); color: #fff !important; }
a.pd-btn--blue,
a.pd-btn--blue:hover,
a.pd-btn--blue:focus,
a.pd-btn--blue .gb-text { color: #fff !important; }
.pd-btn--blue:hover,
a.pd-btn--blue:hover,
a.pd-btn--blue:focus { background: var(--blue-d); border-color: var(--blue-d); }

.pd-btn--white { background: #fff; border-color: #fff; color: var(--ink) !important; }
a.pd-btn--white,
a.pd-btn--white:hover,
a.pd-btn--white:focus,
a.pd-btn--white .gb-text { color: var(--ink) !important; }
.pd-btn--white:hover,
a.pd-btn--white:hover,
a.pd-btn--white:focus { background: var(--paper); border-color: var(--paper); }

.pd-btn--ghost { background: transparent; border-color: var(--line-2); color: var(--ink) !important; }
a.pd-btn--ghost,
a.pd-btn--ghost .gb-text { color: var(--ink) !important; }
.pd-btn--ghost:hover,
a.pd-btn--ghost:hover,
a.pd-btn--ghost:focus { border-color: var(--blue); color: var(--blue-d) !important; }

/* .pd-ico hardcodes --blue for icons used as standalone accents (feature
   rows, credentials), which makes the trailing arrow invisible on a blue
   button. Buttons pair icons with their own text colour instead. */
.pd-btn--blue .pd-ico { color: #fff; }
.pd-btn--white .pd-ico { color: var(--ink); }
.pd-btn--ghost .pd-ico { color: var(--ink); }
.pd-section--ink .pd-btn--ghost .pd-ico { color: var(--on-ink); }

/* Tertiary arrow link — nudges right on hover (uses .pd-card__arrow hook from style.css when paired) */
.pd-arrow-link {
	display: inline-flex; align-items: center; gap: 6px; text-decoration: none;
	font-family: var(--pd-font-text); font-size: 15px; font-weight: 600; color: var(--blue);
}
.pd-arrow-link svg { width: 18px; height: 18px; transition: transform var(--pd-transition); }
.pd-arrow-link:hover svg { transform: translateX(4px); }
.pd-section--ink .pd-btn--ghost,
.pd-section--ink a.pd-btn--ghost,
.pd-section--ink a.pd-btn--ghost .gb-text { border-color: var(--on-ink-line); color: var(--on-ink) !important; }
.pd-section--ink .pd-btn--ghost:hover,
.pd-section--ink a.pd-btn--ghost:hover,
.pd-section--ink a.pd-btn--ghost:focus { border-color: var(--sky); color: var(--sky) !important; }

/* ============================================================ CARDS / TILES */
/* Base card look; pair with .pd-card (style.css) for the blue hover wash. */
.pd-tile {
	display: flex; flex-direction: column; gap: 12px;
	background: var(--white); border: 1px solid var(--line); border-radius: var(--pd-radius);
	padding: 28px; text-decoration: none; color: inherit;
}
.pd-tile--pad-lg { padding: 34px 32px; }
/* Icon chip or media image leads the card, then a slightly larger gap before the title */
.pd-tile > .pd-icon-chip, .pd-tile > .pd-icon-chip--sm, .pd-tile > .pd-tile__media { margin-bottom: 10px; }
/* Collection/feature image atop a card ([pd_collections]); paper backs transparent PNGs */
.pd-tile__media { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--pd-radius-sm); border: 1px solid var(--line); background: var(--paper); }
.pd-tile__title { font-family: var(--pd-font-display); font-size: var(--pd-text-h3); font-weight: 500; line-height: 1.2; color: var(--ink); }
.pd-tile__text  { font-size: 15.5px; line-height: 1.6; color: var(--slate); }
/* Trailing arrow-link / footer sinks to the bottom of equal-height cards */
.pd-tile > .pd-arrow-link { margin-top: auto; padding-top: 10px; }
.pd-tile__foot  { display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--line); padding-top: 16px; margin-top: auto; }

/* Tinted rounded icon box (homepage service cards) */
.pd-icon-chip { display: flex; align-items: center; justify-content: center; flex-shrink: 0;
	width: 52px; height: 52px; border-radius: 11px; background: var(--tint); color: var(--blue-d); }
.pd-icon-chip svg { width: 26px; height: 26px; }
.pd-icon-chip--sm { width: 46px; height: 46px; border-radius: 10px; background: var(--paper); border: 1px solid var(--line); color: var(--blue); }
.pd-icon-chip--sm svg { width: 23px; height: 23px; }

/* Standalone line icon (inherits colour; blue by default) */
.pd-ico { display: inline-flex; flex-shrink: 0; color: var(--blue); }
.pd-ico svg { width: 24px; height: 24px; }
.pd-ico--sm svg { width: 18px; height: 18px; }

/* Inline credential mark (icon + label) */
.pd-credential { display: inline-flex; align-items: center; gap: 9px; font-size: 14px; color: var(--slate); }
a.pd-credential { text-decoration: none; color: inherit; }
a.pd-credential:hover { color: var(--blue-d); }
.pd-credential .pd-ico svg { width: 18px; height: 18px; }

/* Pill badge */
.pd-badge { display: inline-flex; align-items: center; gap: 7px; padding: 9px 15px; border-radius: var(--pd-radius-pill);
	font-size: 13px; font-weight: 600; }
.pd-badge--blue { background: var(--blue); color: #fff; }
.pd-badge--tint { background: var(--tint); color: var(--blue-d); }
.pd-badge--line { background: var(--paper); color: var(--ink); border: 1px solid var(--line); }

/* ============================================================ STAT BAR */
.pd-statbar { display: grid; grid-template-columns: repeat(3, 1fr); }
.pd-statbar .pd-stat { display: flex; flex-direction: column; gap: 9px; padding: 34px 0 34px 34px; border-right: 1px solid var(--line); }
.pd-statbar .pd-stat:first-child { padding-left: 0; }
.pd-statbar .pd-stat:last-child { border-right: 0; }
.pd-stat__num   { font-family: var(--pd-font-display); font-size: clamp(30px, 4vw, 40px); font-weight: 500; letter-spacing: -.02em; line-height: 1; color: var(--ink); }
.pd-stat__label { font-size: 13px; font-weight: 500; color: var(--muted); }
.pd-section--ink .pd-stat__num { color: var(--on-ink); }
.pd-section--ink .pd-stat__label { color: var(--on-ink-muted); }
@media (max-width: 768px) { .pd-statbar { grid-template-columns: 1fr 1fr; } .pd-statbar .pd-stat:nth-child(2) { border-right: 0; } .pd-statbar .pd-stat { padding-left: 24px; } .pd-statbar .pd-stat:nth-child(odd) { padding-left: 0; } }
@media (max-width: 480px) { .pd-statbar { grid-template-columns: 1fr; } .pd-statbar .pd-stat { border-right: 0; border-top: 1px solid var(--line); padding: 24px 0; } .pd-statbar .pd-stat:first-child { border-top: 0; } }

/* Compact stat row inside a dark section (homepage "why us") */
.pd-statrow { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--pd-space-lg); border-top: 1px solid var(--on-ink-line); padding-top: var(--pd-space-xl); }
.pd-statrow .pd-stat { display: flex; flex-direction: column; gap: 6px; padding: 0; border: 0; }
@media (max-width: 768px) { .pd-statrow { grid-template-columns: 1fr 1fr; } }

/* ============================================================ CHECKLIST */
.pd-check { display: flex; align-items: flex-start; gap: 12px; font-size: 16px; line-height: 1.5; color: var(--slate); }
.pd-check .pd-ico { color: var(--blue); }
.pd-check .pd-ico svg { width: 22px; height: 22px; }
.pd-section--ink .pd-check { color: var(--on-ink-body); }
.pd-section--ink .pd-check .pd-ico { color: var(--sky); }

/* Row with a small bordered icon square + label (hero mini-list) */
.pd-featrow { display: flex; align-items: center; gap: 13px; padding: 14px 0; border-top: 1px solid var(--line); }
.pd-featrow__box { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 34px; height: 34px;
	border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--blue); }
.pd-featrow__box svg { width: 18px; height: 18px; }
.pd-featrow__label { font-size: 15px; font-weight: 500; color: var(--ink); }

/* ============================================================ STEPS (ordered process) */
.pd-step { display: flex; flex-direction: column; gap: 10px; }
.pd-step__num { font-family: var(--pd-font-display); font-size: 40px; font-weight: 500; line-height: 1; color: var(--blue); }
.pd-step__num::after { content: ""; display: block; width: 26px; height: 1.5px; background: var(--line-2); margin-top: 16px; }
.pd-step__title { font-family: var(--pd-font-display); font-size: var(--pd-text-h3); font-weight: 500; color: var(--ink); }
.pd-step__text { font-size: 15.5px; line-height: 1.6; color: var(--slate); }
.pd-section--ink .pd-step__num { color: var(--sky); }
.pd-section--ink .pd-step__title { color: var(--on-ink); }
.pd-section--ink .pd-step__text { color: var(--on-ink-body); }

/* ============================================================ FAQ (GB Pro accordion) */
.pd-faq { border-top: 1px solid var(--line); }
.pd-faq__item { border-bottom: 1px solid var(--line); }
.pd-faq__q,
.pd-faq .gb-accordion__toggle.pd-faq__q {
	list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 20px;
	width: 100%; margin: 0; padding: 22px 4px; border: 0; background: transparent; text-align: left;
	font-family: var(--pd-font-display); font-size: var(--pd-text-h3); font-weight: 500; color: var(--ink);
}
/* Native <details> fallback (patterns) */
.pd-faq__q::-webkit-details-marker { display: none; }
.pd-faq details > .pd-faq__q::after { content: "+"; font-family: var(--pd-font-text); font-size: 26px; font-weight: 400; color: var(--blue); line-height: 1; flex-shrink: 0; }
.pd-faq details[open] > .pd-faq__q::after { content: "−"; }
/* GB Pro toggle icons */
.pd-faq .gb-accordion__toggle-icon { flex-shrink: 0; color: var(--blue); line-height: 0; }
.pd-faq .gb-accordion__toggle-icon svg { width: 22px; height: 22px; display: block; }
.pd-faq__a { padding: 0 4px 24px; font-size: var(--pd-text-body); line-height: var(--pd-leading); color: var(--slate); max-width: 72ch; }
.pd-faq .gb-accordion__content .pd-faq__a:last-child { padding-bottom: 24px; }

/* ============================================================ DARK CTA BAND */
.pd-cta { display: grid; grid-template-columns: 1.2fr .8fr; gap: var(--pd-space-xl); align-items: center; }
@media (max-width: 768px) { .pd-cta { grid-template-columns: 1fr; } }
/* Quiet contact option — never the lead action (site CTAs come first) */
.pd-cta__phone { display: inline-flex; align-items: center; gap: 9px; text-decoration: none;
	font-family: var(--pd-font-text); font-size: 16px; font-weight: 600; color: var(--on-ink-body); }
.pd-cta__phone:hover { color: var(--on-ink); }
.pd-cta__phone .pd-ico { color: var(--sky); }
.pd-cta__phone .pd-ico svg { width: 18px; height: 18px; }
.pd-cta__note { font-size: 14px; color: var(--on-ink-muted); }

/* ============================================================ FORMS (native) */
.pd-field { display: flex; flex-direction: column; gap: 7px; }
.pd-label { font-size: 14px; font-weight: 600; color: var(--ink); }
.pd-input, .pd-textarea, .pd-select {
	font-family: var(--pd-font-text); font-size: 16px; color: var(--ink);
	background: #fff; border: 1.5px solid var(--line-2); border-radius: var(--pd-radius-sm); padding: 12px 14px;
}
.pd-input:focus, .pd-textarea:focus, .pd-select:focus { outline: 0; border-color: var(--blue); box-shadow: var(--pd-focus-ring); }
.pd-input::placeholder, .pd-textarea::placeholder { color: var(--muted); }
.pd-textarea { min-height: 130px; resize: vertical; }

/* ============================================================ FLUENTFORM SKIN */
/* Recolour the plugin via its own CSS variables (FluentForm 6.x), then align
   the field chrome with the brand form tokens. */
.fluentform {
	--fluentform--primary: var(--blue) !important;
	--fluentform--primary-hover: var(--blue-d) !important;
	--fluentform--secondary: var(--ink) !important;
}
/* Belt-and-suspenders: FluentForm sets the button colour inline per form. */
.fluentform .ff-btn-submit,
.fluentform button[type="submit"].ff-btn { background-color: var(--blue) !important; border-color: var(--blue) !important; }
.fluentform .ff-btn-submit:hover,
.fluentform button[type="submit"].ff-btn:hover { background-color: var(--blue-d) !important; border-color: var(--blue-d) !important; }
.fluentform .ff-el-input--label label { font-family: var(--pd-font-text); font-weight: 600; color: var(--ink); font-size: 14px; }
.fluentform .ff-el-input--content input[type="text"],
.fluentform .ff-el-input--content input[type="email"],
.fluentform .ff-el-input--content input[type="tel"],
.fluentform .ff-el-input--content input[type="number"],
.fluentform .ff-el-input--content textarea,
.fluentform .ff-el-input--content select {
	border: 1.5px solid var(--line-2); border-radius: var(--pd-radius-sm); padding: 12px 14px;
	font-family: var(--pd-font-text); font-size: 16px; color: var(--ink); background: #fff; box-shadow: none;
}
.fluentform .ff-el-input--content input:focus,
.fluentform .ff-el-input--content textarea:focus,
.fluentform .ff-el-input--content select:focus { border-color: var(--blue); box-shadow: var(--pd-focus-ring); outline: 0; }
.fluentform .ff-btn-submit,
.fluentform button[type="submit"] {
	background: var(--blue); border: 1.5px solid var(--blue); border-radius: var(--pd-radius-sm);
	padding: 13px 26px; font-family: var(--pd-font-text); font-weight: 600; font-size: 15px; color: #fff; cursor: pointer;
	transition: background-color var(--pd-transition), border-color var(--pd-transition);
}
.fluentform .ff-btn-submit:hover { background: var(--blue-d); border-color: var(--blue-d); }

/* ============================================================ DECOR */
/* Radial dot field (hero background motif) */
.pd-dots { background-color: #fff; background-image: radial-gradient(var(--line) 1px, transparent 1px); background-size: 24px 24px; }
/* Tint hexagon (hero decoration — echoes the logo's molecular mark).
   Pointy-top regular hexagon: set a width, aspect-ratio keeps it regular. */
.pd-blob {
	position: absolute; aspect-ratio: .866;
	clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
	background: var(--tint); opacity: .3; pointer-events: none; z-index: 0;
}

/* ============================================================ SITE HEADER */
.pd-util-bar {
	background: var(--white); border-bottom: 1px solid var(--line);
	color: var(--muted); font-family: var(--pd-font-text); font-size: 13px;
}
.pd-util-bar__inner {
	display: flex; align-items: center; justify-content: space-between;
	height: 40px; max-width: var(--pd-container); margin-inline: auto;
	padding-inline: 32px;
}
.pd-util-bar__meta { color: var(--muted); }
@media (max-width: 768px) { .pd-util-bar__meta { display: none; } }
.pd-util-bar__links { display: flex; align-items: center; gap: 24px; }
.pd-util-link {
	display: inline-flex; align-items: center; text-decoration: none;
	color: var(--ink); font-weight: 500;
}
.pd-util-link:hover { color: var(--blue-d); }

.pd-site-bar {
	position: sticky; top: 0; z-index: 50;
	background: rgba(255, 255, 255, 0.97); border-bottom: 1px solid var(--line);
	font-family: var(--pd-font-text);
}
.pd-site-bar__inner {
	display: flex; align-items: center; justify-content: space-between;
	gap: 28px; height: 78px; max-width: var(--pd-container); margin-inline: auto;
	padding-inline: 32px;
}
.pd-site-bar__logo { display: inline-flex; }
.pd-site-bar__logo img { height: 34px; width: auto; }
.pd-site-bar__phone {
	display: inline-flex; align-items: center; gap: 8px; text-decoration: none;
	color: var(--ink);
}
.pd-site-bar__phone:hover { color: var(--blue-d); }
.pd-site-bar__phone .pd-ico { color: var(--blue); }
.pd-site-bar__phone .pd-ico svg { width: 16px; height: 16px; }
.pd-site-bar__phone-num { font-size: 15px; font-weight: 600; }
@media (max-width: 600px) { .pd-site-bar__phone-num { display: none; } }

/* GB Pro nav — brand look via tokens (structure stays in the block) */
.pd-site-header .gb-menu-toggle {
	display: flex; align-items: center; column-gap: 5px; z-index: 2; padding: 10px;
	background: var(--ink); color: var(--white); border: 0; cursor: pointer;
}
.pd-site-header .gb-menu-toggle svg { width: 25px; height: 25px; fill: currentColor; }
.pd-site-header .gb-menu-container--mobile {
	background: var(--ink); color: var(--white); padding-bottom: 60px; position: fixed;
}
.pd-site-header .gb-menu-container--mobile .gb-menu { flex-direction: column; }
.pd-site-header .gb-menu-link {
	display: flex; justify-content: space-between; align-items: center;
	text-decoration: none; column-gap: 10px; padding: 1em 20px; color: inherit;
}
.pd-site-header .gb-sub-menu .menu-item { background: var(--ink); color: var(--white); }

/* ============================================================ SITE FOOTER */
.pd-footer {
	background: var(--footer-ink); color: var(--on-ink-muted);
	font-family: var(--pd-font-text); font-size: 14.5px;
	padding: 72px 0 30px;
}
.pd-footer__inner { max-width: var(--pd-container); margin-inline: auto; padding-inline: 32px; }
.pd-footer__grid {
	display: grid; grid-template-columns: 1.7fr 1fr 1fr 1fr; gap: 44px;
	padding-bottom: 48px; border-bottom: 1px solid var(--on-ink-line);
}
@media (max-width: 768px) { .pd-footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .pd-footer__grid { grid-template-columns: 1fr; } }
.pd-footer__brand { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.pd-footer__logo { height: 88px; width: auto; display: block; }
.pd-footer__blurb { color: var(--on-ink-muted); line-height: 1.7; max-width: 300px; margin: 0; }
.pd-footer__phone {
	display: inline-block; text-decoration: none;
	font-family: var(--pd-font-display); font-size: 24px; color: var(--on-ink);
}
.pd-footer__phone:hover { color: var(--sky); }
.pd-footer__col { display: flex; flex-direction: column; gap: 20px; }
.pd-footer__heading {
	margin: 0; color: var(--on-ink); font-size: 13px; font-weight: 600;
	letter-spacing: .06em; text-transform: uppercase;
}
.pd-footer__links { display: flex; flex-direction: column; gap: 12px; }
.pd-footer__link {
	display: inline-flex; text-decoration: none; color: var(--on-ink-muted); font-size: 14.5px;
}
.pd-footer__link:hover { color: var(--blue); }
.pd-footer__base {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
	gap: 12px; padding-top: 26px; font-size: 13px; color: var(--on-ink-muted);
}
.pd-footer__creds { display: flex; gap: 22px; color: var(--on-ink-body); }

/* ============================================================ COURSE SINGLE */
.pd-course-crumb {
	display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
	font-size: 13.5px; color: var(--muted);
}
.pd-course-crumb a { color: var(--muted); text-decoration: none; }
.pd-course-crumb a:hover { color: var(--blue-d); }
.pd-course-crumb__sep { opacity: .5; }
.pd-course-crumb [aria-current="page"] { color: var(--ink); font-weight: 500; }

.pd-course-hero {
	position: relative; overflow: hidden;
	background-color: var(--white);
	background-image: radial-gradient(var(--line) 1px, transparent 1px);
	background-size: 24px 24px;
	padding: clamp(48px, 6vw, 80px) var(--pd-gutter) clamp(48px, 5vw, 72px);
}
.pd-course-hero::before {
	content: ""; position: absolute; top: -160px; right: -140px;
	width: 560px; height: 560px; border-radius: 50%;
	background: var(--tint); opacity: .14; pointer-events: none;
}
.pd-course-hero__wrap {
	position: relative; max-width: var(--pd-container); margin: 0 auto;
	display: grid; grid-template-columns: 1.15fr .85fr; gap: 48px; align-items: start;
}
@media (max-width: 960px) {
	.pd-course-hero__wrap { grid-template-columns: 1fr; gap: 36px; }
}
.pd-course-hero__copy {
	display: flex; flex-direction: column; align-items: flex-start; gap: 20px;
}
.pd-course-hero__copy .pd-display { max-width: 640px; }
.pd-course-hero__copy .pd-lede { max-width: 540px; }
.pd-course-hero__unit {
	font-size: 15px; line-height: 1.55; color: var(--slate); max-width: 52ch;
}
.pd-course-hero__unit strong { color: var(--ink); font-weight: 600; }
.pd-course-hero__actions {
	display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin-top: 4px;
}
.pd-course-hero__creds {
	display: flex; flex-wrap: wrap; gap: 12px 26px;
	border-top: 1px solid var(--line); margin-top: 8px; padding-top: 22px;
}

/* Hero feature row — reuses .pd-featrow but laid out side-by-side instead of
   the stacked/bordered list it uses on the event detail page. */
.pd-course-features { margin-top: 6px; }
.pd-course-features .pd-featrow { border-top: 0; padding: 0; }

/* Hero price line — sits between the lede and the Book now / Enquire actions. */
.pd-course-price { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-top: 2px; }
.pd-course-price__now {
	font-family: var(--pd-font-display); font-size: 28px; font-weight: 500;
	letter-spacing: -.02em; color: var(--ink);
}
.pd-course-price__note { font-size: 13.5px; color: var(--muted); }

/* Course single: content column + sticky booking sidebar. */
.pd-course-layout {
	display: grid; grid-template-columns: 1fr 380px; gap: var(--pd-space-xl);
	align-items: start; padding: clamp(40px, 5vw, 64px) var(--pd-gutter);
	/* Bare .pd-wrap (no .pd-section parent), so it carries its own gutter;
	   widen by the same amount to keep content at --pd-container on desktop. */
	max-width: calc(var(--pd-container) + 2 * var(--pd-gutter));
}
@media (max-width: 960px) {
	.pd-course-layout { grid-template-columns: 1fr; }
}

/* Live session grid — see pd_ca_course_sessions_widget(). Built for a
   realistic 12–20 dates, so it wraps instead of scrolling in a sidebar. */
#pd-sessions { scroll-margin-top: 24px; }
.pd-course-sessions__grid { margin-top: 8px; }
.pd-course-session-card { gap: 10px; }
.pd-course-sessions__icon { color: var(--blue); }
.pd-course-sessions__icon svg { width: 22px; height: 22px; }
.pd-course-sessions__date { font-size: 16px; font-weight: 600; color: var(--ink); }
.pd-course-sessions__venue { font-size: 13.5px; color: var(--muted); margin-top: -6px; }
.pd-course-sessions__actions {
	display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 14px;
}
.pd-course-sessions__actions .pd-btn { flex: 1 1 auto; justify-content: center; }
.pd-course-sessions .pd-btn--sm { padding: 9px 14px; font-size: 13.5px; }
.pd-course-sessions .pd-btn--sm svg { width: 15px; height: 15px; }
.pd-course-sessions > .pd-arrow-link { margin-top: 20px; }
.pd-course-sessions > .pd-course-enrol__fine { margin-top: 10px; }

.pd-course-enrol {
	position: relative; background: var(--paper); border: 1px solid var(--line);
	border-radius: var(--pd-radius-lg); padding: 28px 28px 26px;
	display: flex; flex-direction: column; gap: 0;
}
.pd-course-enrol > .pd-badge { position: absolute; top: -14px; right: 24px; }
.pd-course-enrol__head { padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.pd-course-enrol__kicker {
	font-size: var(--pd-text-label); font-weight: 600; letter-spacing: .16em;
	text-transform: uppercase; color: var(--blue);
}
.pd-course-enrol__title {
	font-family: var(--pd-font-display); font-size: 26px; font-weight: 500;
	letter-spacing: -.01em; line-height: 1.2; color: var(--ink); margin: 6px 0 0;
}
.pd-course-enrol__meta { display: grid; gap: 0; margin: 0; }
.pd-course-enrol__row {
	display: grid; grid-template-columns: 110px 1fr; gap: 12px; align-items: baseline;
	padding: 14px 0; border-bottom: 1px solid var(--line); margin: 0;
}
.pd-course-enrol__row:last-of-type { border-bottom: 0; }
.pd-course-enrol__label {
	font-size: 12px; font-weight: 600; letter-spacing: .12em;
	text-transform: uppercase; color: var(--muted);
}
.pd-course-enrol__value {
	font-size: 15.5px; font-weight: 500; color: var(--ink); line-height: 1.45; margin: 0;
}
.pd-course-enrol__value--cost {
	font-family: var(--pd-font-display); font-size: 28px; font-weight: 500;
	letter-spacing: -.02em; line-height: 1.1;
}
.pd-course-enrol__note {
	display: block; margin-top: 4px; font-size: 13px; font-weight: 400; color: var(--muted);
}
.pd-course-enrol__modes { display: flex; flex-wrap: wrap; gap: 6px; }
.pd-course-enrol__modes .gb-looper { display: flex; flex-wrap: wrap; gap: 6px; }
.pd-course-enrol__modes .gb-loop-item { display: contents; }
.pd-course-enrol__mode {
	font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
	color: var(--slate); background: var(--white); border: 1px solid var(--line);
	border-radius: var(--pd-radius-pill); padding: 5px 11px; white-space: nowrap;
}
.pd-course-enrol__actions {
	display: flex; flex-direction: column; gap: 12px;
	padding-top: 18px; border-top: 1px solid var(--line); margin-top: 4px;
}
.pd-course-enrol__actions .pd-btn { justify-content: center; width: 100%; }
.pd-course-enrol__actions .pd-arrow-link { justify-content: center; }
.pd-course-enrol__fine {
	font-size: 12.5px; line-height: 1.5; color: var(--muted); text-align: center; margin: 0;
}
@media (min-width: 961px) {
	.pd-course-enrol--sticky { position: sticky; top: 88px; }
}

/* Hide empty optional enrol rows / notice when meta blank */
.pd-course-notice:empty,
.pd-course-enrol__row:has(dd:empty) { display: none; }

/* Live Cloud Assess session picker — see pd_ca_course_sessions_widget().
   Lives in its own full-width "#pd-sessions" section, not inside the
   sidebar, so it carries no border/inset of its own. */
.pd-course-sessions {
	display: flex; flex-direction: column; gap: 12px;
}

/* Delivery enrolment cards — Online / Blended / Face-to-face / Onsite */
.pd-delivery-cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--pd-space-lg);
	margin-top: 8px;
}
.pd-delivery-cards .gb-looper.pd-delivery-cards,
.gb-looper.pd-delivery-cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--pd-space-lg);
}
@media (max-width: 900px) {
	.pd-delivery-cards,
	.gb-looper.pd-delivery-cards { grid-template-columns: 1fr; }
}
.pd-delivery-card {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 24px 22px 22px;
	border: 1px solid var(--line);
	border-radius: var(--pd-radius-lg);
	background: var(--paper);
	min-height: 100%;
}
.pd-delivery-card__label {
	font-size: 12px; font-weight: 600; letter-spacing: .14em;
	text-transform: uppercase; color: var(--blue);
}
.pd-delivery-card__desc {
	font-size: 15px; line-height: 1.55; color: var(--slate); margin: 0;
	flex: 1 1 auto;
}
.pd-delivery-card__desc:empty { display: none; }
.pd-delivery-card__price { display: flex; flex-direction: column; gap: 4px; margin-top: auto; }
.pd-delivery-card__cost {
	font-family: var(--pd-font-display); font-size: 28px; font-weight: 500;
	letter-spacing: -.02em; line-height: 1.1; color: var(--ink);
}
.pd-delivery-card__cost:empty,
.pd-delivery-card__note:empty { display: none; }
.pd-delivery-card__price:not(:has(.pd-delivery-card__cost:not(:empty))) { display: none; }
.pd-delivery-card__note {
	font-size: 13px; font-weight: 400; color: var(--muted); line-height: 1.4;
}
.pd-delivery-card__cta { justify-content: center; width: 100%; margin-top: 4px; }
.pd-delivery-card__cta[href=""],
.pd-delivery-card__cta:not([href]) { display: none; }

.pd-course-notice {
	font-size: 14.5px; line-height: 1.55; color: var(--slate);
	max-width: 54ch; margin: 0;
	padding: 14px 0 0;
	border-top: 1px solid var(--line);
}
.pd-course-notice:empty { display: none; padding: 0; border: 0; }

.pd-course-resources .gb-looper {
	display: flex; flex-direction: column; gap: 14px;
}
.pd-course-resources .gb-loop-item { display: contents; }

.pd-course-strip {
	border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
	padding: 0 var(--pd-gutter); background: var(--white);
}
.pd-course-strip__wrap {
	max-width: var(--pd-container); margin: 0 auto;
	display: grid; grid-template-columns: repeat(4, 1fr);
}
.pd-course-strip__item {
	display: flex; align-items: flex-start; gap: 14px;
	padding: 26px 0 26px 28px; border-right: 1px solid var(--line);
}
.pd-course-strip__item:first-child { padding-left: 0; }
.pd-course-strip__item:last-child { border-right: 0; }
.pd-course-strip__item .pd-ico { color: var(--blue); flex-shrink: 0; margin-top: 2px; }
.pd-course-strip__item .pd-ico svg { width: 22px; height: 22px; }
.pd-course-strip__item strong,
.pd-course-strip__item .gb-text:first-child { display: block; font-size: 15px; font-weight: 600; color: var(--ink); }
.pd-course-strip__item span { font-size: 13.5px; color: var(--muted); line-height: 1.45; }
@media (max-width: 900px) {
	.pd-course-strip__wrap { grid-template-columns: 1fr 1fr; }
	.pd-course-strip__item {
		border-right: 0; border-top: 1px solid var(--line); padding: 18px 0;
	}
	.pd-course-strip__item:nth-child(1),
	.pd-course-strip__item:nth-child(2) { border-top: 0; }
}
@media (max-width: 520px) {
	.pd-course-strip__wrap { grid-template-columns: 1fr; }
}

.pd-course-checks { display: grid; gap: 14px; margin-top: 8px; }
.pd-course-checks .gb-looper { display: grid; gap: 14px; }
.pd-course-audience { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.pd-course-audience .gb-looper { display: flex; flex-wrap: wrap; gap: 8px; }
.pd-course-audience .gb-loop-item { display: contents; }
.pd-course-chip {
	font-size: 13px; font-weight: 500; color: var(--ink); background: var(--paper);
	border: 1px solid var(--line); border-radius: var(--pd-radius-pill); padding: 7px 14px;
}

.pd-course-steps {
	display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--pd-space-lg);
}
@media (max-width: 768px) {
	.pd-course-steps { grid-template-columns: 1fr; }
}

.pd-course-quotes {
	display: grid; grid-template-columns: 1fr 1fr; gap: var(--pd-space-xl);
}
@media (max-width: 768px) {
	.pd-course-quotes { grid-template-columns: 1fr; }
}
.pd-course-quote { border-top: 2px solid var(--blue); padding-top: 26px; margin: 0; }
.pd-course-quote blockquote {
	font-family: var(--pd-font-display); font-size: clamp(21px, 2.2vw, 26px);
	font-weight: 500; line-height: 1.4; letter-spacing: -.01em; color: var(--ink); margin: 0;
}
.pd-course-quote figcaption { margin-top: 16px; font-size: 13.5px; color: var(--muted); }

.pd-course-related { border-top: 1px solid var(--line); }
.pd-course-related__row {
	display: grid; grid-template-columns: minmax(200px, .9fr) 1.3fr auto;
	gap: 18px 40px; align-items: center; padding: 28px 0; border-bottom: 1px solid var(--line);
}
.pd-course-related__row h3 {
	font-family: var(--pd-font-display); font-size: 22px; font-weight: 500;
	letter-spacing: -.01em; line-height: 1.25; color: var(--ink); margin: 0;
}
.pd-course-related__row p {
	font-size: 15.5px; line-height: 1.55; max-width: 52ch; margin: 0; color: var(--slate);
}
@media (max-width: 768px) {
	.pd-course-related__row { grid-template-columns: 1fr; gap: 10px; }
}

.pd-course-head {
	display: flex; align-items: flex-end; justify-content: space-between;
	gap: 24px; margin-bottom: clamp(24px, 3.5vw, 36px);
}
@media (max-width: 768px) {
	.pd-course-head { flex-direction: column; align-items: flex-start; gap: 10px; }
}
.pd-course-head p { max-width: 48ch; margin: 0; color: var(--slate); }

/* Course archive — card grid (/training/courses/). */
.pd-course-cards .pd-badge { align-self: flex-start; }
.pd-course-card__modes { display: flex; flex-wrap: wrap; gap: 6px; }
.pd-course-card__price {
	font-family: var(--pd-font-display); font-size: 17px; font-weight: 500; color: var(--ink);
}

.pd-course-mobar {
	display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 90;
	background: var(--white); border-top: 1px solid var(--line);
	padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
	gap: 12px; align-items: center; justify-content: space-between;
}
.pd-course-mobar__cost {
	font-family: var(--pd-font-display); font-size: 22px; font-weight: 500;
	color: var(--ink); line-height: 1.1;
}
.pd-course-mobar__note {
	display: block; font-size: 12px; color: var(--muted); margin-top: 2px;
}
.pd-course-mobar .pd-btn { flex-shrink: 0; }
@media (max-width: 960px) {
	.pd-course-mobar { display: flex; }
	body.single-course { padding-bottom: 76px; }
}

/* Non-accredited courses: hide unit-of-competency chrome */
body.pd-course--professional .pd-course-only-accredited { display: none !important; }
/* NRT logo must sit on a white background per ASQA conditions of use */
.pd-nrt-badge {
	background: #fff; border: 1px solid var(--line); border-radius: 6px; padding: 10px 14px;
	height: 88px; width: auto; box-sizing: content-box;
	/* .pd-stack is a column flex container (align-items: stretch by default), which
	   would otherwise stretch this img to the full row width instead of its own size. */
	align-self: flex-start;
}
/* Professional-development badge: tint instead of solid blue */
body.pd-course--professional .pd-course-enrol > .pd-badge--blue {
	background: var(--tint); color: var(--blue-d);
}
/* Card/list badge: blue only when the course is accredited */
.pd-course--accredited .pd-tag { color: var(--blue); }

/* Training hub catalogue — ruled rows (query loop) */
.pd-course-list { border-top: 1px solid var(--line); }
.pd-course-list__row {
	display: grid; grid-template-columns: minmax(240px, .85fr) 1.15fr minmax(180px, auto);
	gap: 14px 48px; align-items: start; padding: 32px 0;
	border-bottom: 1px solid var(--line);
}
.pd-course-list__row h3 {
	font-family: var(--pd-font-display); font-size: 23px; font-weight: 500;
	letter-spacing: -.01em; line-height: 1.25; color: var(--ink); margin: 0;
	text-wrap: balance;
}
.pd-course-list__row > .gb-text:nth-child(2),
.pd-course-list__excerpt {
	font-size: 15.5px; line-height: 1.6; max-width: 56ch; margin: 0; color: var(--slate);
}
.pd-course-list__meta {
	display: flex; flex-direction: column; align-items: flex-end; gap: 14px;
	padding-top: 4px; /* optically aligns pills with the serif title cap height */
}
.pd-course-list__modes {
	display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px;
}
.pd-course-list__modes .gb-looper {
	display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px;
}
.pd-course-list__modes .gb-loop-item { display: contents; }
@media (max-width: 900px) {
	.pd-course-list__row { grid-template-columns: 1fr; gap: 10px; }
	.pd-course-list__meta {
		flex-direction: row; align-items: center; justify-content: space-between;
		flex-wrap: wrap; gap: 10px;
	}
	.pd-course-list__modes,
	.pd-course-list__modes .gb-looper { justify-content: flex-start; }
}

/* ============================================================ EVENTS FILTER */
.pd-events-filter {
	display: flex; flex-wrap: wrap; gap: 8px;
	margin-bottom: var(--pd-space-md);
}
.pd-events-filter__btn {
	font-family: var(--pd-font-text); font-size: 13.5px; font-weight: 500;
	color: var(--ink); background: var(--white); border: 1px solid var(--line);
	border-radius: var(--pd-radius-sm); padding: 8px 14px; text-decoration: none;
	line-height: 1.2;
}
.pd-events-filter__btn:hover,
.pd-events-filter__btn:focus {
	border-color: var(--blue); color: var(--blue-d);
}
.pd-events-filter__btn.is-active {
	background: var(--ink); border-color: var(--ink); color: #fff;
}
.pd-events-filter__btn.is-active:hover,
.pd-events-filter__btn.is-active:focus {
	background: var(--ink); border-color: var(--ink); color: #fff;
}
/* Client-side venue filtering hides cards via the hidden attribute — win
   over any explicit display the card classes set */
.pd-grid [data-location][hidden] { display: none !important; }
.pd-btn[aria-disabled="true"] {
	opacity: .55; pointer-events: none; cursor: not-allowed;
}

/* ============================================================ REDUCED MOTION */
@media (prefers-reduced-motion: reduce) {
	.pd-btn, .pd-arrow-link svg { transition: none; }
}

/* Enrol page — Cloud Assess webform embedded on /…/enrol/, see templates/enrol.php.
   The page is a flex column (topbar, sticky header, slim title bar) and the
   frame takes every remaining pixel, so only the form itself scrolls.
   Footer and chat bubble are hidden there: the bubble sat over Submit. */
body.pd-enrol-body { display: flex; flex-direction: column; min-height: 100dvh; }
body.pd-enrol-body #page, body.pd-enrol-body #content, body.pd-enrol-body .pd-enrol-main {
	flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; width: 100%; max-width: none; margin: 0; padding: 0;
}
body.pd-enrol-body .site-footer, body.pd-enrol-body .pd-footer, body.pd-enrol-body .urlar-pd-chat { display: none; }
.pd-enrol-bar { border-bottom: 1px solid var(--line); background: #fff; padding: 20px var(--pd-gutter, 24px); }
.pd-enrol-bar__row { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.pd-enrol-bar .pd-h3 { margin: 4px 0 0; }
.pd-enrol-bar .pd-btn { padding: 9px 14px; font-size: 13.5px; }
.pd-enrol-bar__meta { margin: 4px 0 0; color: var(--slate); font-size: var(--pd-text-small); }
.pd-enrol-frame { flex: 1 1 auto; display: block; width: 100%; min-height: 480px; border: 0; background: #fff; }