/* ==========================================================================
   PA Blog — reskin components
   Consumes the tokens declared in pa-tokens.css. Loaded after site.css so it
   wins over the legacy rules it replaces.

   Phase 1: base typography + global chrome (header, nav, drawer, footer).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Base
   -------------------------------------------------------------------------- */
body {
  background-color: var(--surface-page);
  color: var(--text-body);
  font-family: var(--font-sans);
  font-weight: var(--weight-body);
  line-height: var(--leading-body);
  /* Legacy site.css offsets the old 66px fixed navbar; the reskinned header
     is sticky rather than fixed, so no body offset is required. */
  padding-top: 0;
  /* Matches the handoff's theme cross-fade on the app shell. */
  transition: background-color .3s var(--ease-standard),
              color .3s var(--ease-standard);
}

/* --------------------------------------------------------------------------
   Theme cross-fade.
   The handoff animates background and colour on the app shell when switching
   themes. Applied to the surfaces and borders that remap between light and
   dark so the whole page transitions together rather than the body alone.

   Scoped to these components on purpose: a blanket `* { transition }` would
   also animate hover states and layout-driven colour changes, and would be
   costly on long article pages.
   -------------------------------------------------------------------------- */
.pa-header,
.pa-footer,
.pa-card,
.pa-panel,
.pa-dropdown,
.pa-flyout,
.pa-drawer,
.pa-badge,
.pa-input,
.umbraco-forms-field-wrapper input,
.umbraco-forms-field-wrapper select,
.umbraco-forms-field-wrapper textarea {
  transition: background-color .3s var(--ease-standard),
              border-color .3s var(--ease-standard),
              color .3s var(--ease-standard);
}

/* Respect reduced-motion: swap instantly instead of cross-fading. */
@media (prefers-reduced-motion: reduce) {
  body,
  .pa-header,
  .pa-footer,
  .pa-card,
  .pa-panel,
  .pa-iconbtn,
  .pa-dropdown,
  .pa-flyout,
  .pa-drawer,
  .pa-badge,
  .pa-input,
  .umbraco-forms-field-wrapper input,
  .umbraco-forms-field-wrapper select,
  .umbraco-forms-field-wrapper textarea {
    transition: none;
  }
}

/* The legacy site.css sets `html, body { height: 100% }`, which makes the body
   a fixed-height scroll container. `position: sticky` resolves against that
   container, so the sticky header scrolled away once the page moved past the
   viewport height. Letting the document grow naturally restores it.
   `padding-top: 66px` from site.css is also dropped: it offset the old fixed
   navbar, and now just leaves a gap above the sticky header. */
html,
body {
  height: auto;
  min-height: 100%;
}

/* Replaces the legacy `padding-top: 66px` from site.css, which offset the old
   Bootstrap navbar. Now reserves the space taken by the fixed .pa-header. */
body {
  padding-top: var(--header-height);
}

/* scroll-padding-top belongs on the scroll container only. Declaring it on
   <body> as well made the browser's "scroll focused element into view" pass
   resolve against the sticky header and jump the page to the top whenever the
   search field took focus. */
html {
  scroll-padding-top: calc(var(--header-height) + var(--space-3));
}

h1, h2, h3, h4, h5, h6 {
  color: var(--text-heading);
  font-weight: var(--weight-heading);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-heading);
}

/* Bootstrap 5 sets `a { text-decoration: underline }` globally and the legacy
   site.css leans on that. The handoff never underlines a link - not at rest
   and not on hover - so the decoration is reset here once rather than being
   switched off component by component.

   Article body copy is the deliberate exception: richtext.css / site.css give
   those links an orange inset underline, which is the design's intent. */
a {
  color: var(--text-link);
  text-decoration: none;
}

a:hover,
a:focus {
  text-decoration: none;
}

:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

.pa-container {
  width: 100%;
  max-width: var(--container-wide);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.pa-container--content { max-width: var(--container-content); }
.pa-container--narrow  { max-width: var(--container-narrow); }

.pa-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   2. Buttons
   -------------------------------------------------------------------------- */
.pa-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  padding: 11px 22px;
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: var(--weight-semibold);
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--duration-base) var(--ease-standard),
              color var(--duration-base) var(--ease-standard),
              border-color var(--duration-base) var(--ease-standard);
}

.pa-btn--primary {
  background: var(--btn-primary-bg);
  color: #FFFFFF;
}
.pa-btn--primary:hover,
.pa-btn--primary:focus { background: var(--btn-primary-bg-hover); color: #FFFFFF; }
.pa-btn--primary:active { background: var(--btn-primary-bg-active); }

.pa-btn--inverse {
  background: var(--pa-offwhite);
  color: var(--pa-purple);
}
.pa-btn--inverse:hover,
.pa-btn--inverse:focus { background: #FFFFFF; color: var(--pa-deep-purple); }

.pa-btn--outline {
  background: transparent;
  color: var(--btn-outline-fg);
  border-color: var(--btn-outline-border);
}
.pa-btn--outline:hover,
.pa-btn--outline:focus {
  background: var(--btn-ghost-bg-hover);
  color: var(--btn-outline-fg);
}

.pa-btn--block { width: 100%; }

/* Design system Button size="lg" - 52px tall */
.pa-btn--lg {
  height: 52px;
  padding: 0 28px;
  font-size: 16px;
}

/* --------------------------------------------------------------------------
   3. Header
   -------------------------------------------------------------------------- */
/* `position: fixed`, not `sticky`.

   A sticky header is painted at its stuck offset, but its *layout* box stays
   where it sits in the document - the very top. The browser's native "keep
   the focused element and caret visible" pass resolves against that layout
   box, so typing in the header search field scrolled the page back to the top
   on every keystroke. That pass is not cancellable and correcting it from JS
   only produces a visible jitter.

   Taking the header out of flow removes the document-top layout position
   entirely, so there is nothing for the browser to scroll to. `body` gets
   matching top padding to reserve the space the header no longer occupies. */
.pa-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background: var(--surface-page);
  border-bottom: 1px solid var(--border-subtle);
}

.pa-header__inner {
  display: flex;
  align-items: center;
  gap: var(--gutter);
  height: var(--header-height);
  max-width: var(--container-wide);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.pa-header__logo {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  line-height: 0;
}

.pa-header__logo img {
  width: clamp(150px, 20vw, 210px);
  height: auto;
}

.pa-header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-left: auto;
}

/* Round icon buttons (search, theme, hamburger) */
.pa-iconbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  padding: 0;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  background: var(--surface-card);
  color: var(--text-heading);
  cursor: pointer;
  transition: background-color var(--duration-base) var(--ease-standard),
              border-color var(--duration-base) var(--ease-standard),
              color var(--duration-base) var(--ease-standard);
}

.pa-iconbtn:hover,
.pa-iconbtn:focus {
  background: var(--surface-tint);
  color: var(--interactive-accent-strong);
}

.pa-iconbtn svg { width: 18px; height: 18px; display: block; }

.pa-iconbtn--square { border-radius: var(--radius-sm); }

/* Theme toggle icon swap. The glyph advertises the mode the button switches
   TO, so light mode shows the moon ("go dark") and dark mode shows the sun. */
.pa-theme-toggle .pa-theme-toggle__sun { display: none; }
.pa-theme-toggle .pa-theme-toggle__moon { display: block; }
[data-pa-theme="dark"] .pa-theme-toggle .pa-theme-toggle__moon { display: none; }
[data-pa-theme="dark"] .pa-theme-toggle .pa-theme-toggle__sun { display: block; }

/* Header search — collapses to a round button, expands to a pill input.
   The field keeps a fixed height at all times so opening it never changes the
   header's height. */
.pa-header__search { display: flex; align-items: center; }

.pa-header__search-field {
  width: 0;
  height: 42px;
  padding: 0;
  border: 0;
  opacity: 0;
  transition: width var(--duration-base) var(--ease-standard),
              opacity var(--duration-base) var(--ease-standard);
}

.pa-header__search.is-open .pa-header__search-field {
  width: 200px;
  padding: 0 16px;
  margin-right: var(--space-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  background: var(--surface-card);
  color: var(--text-body);
  font-size: 14px;
  opacity: 1;
}

.pa-header__search-field::placeholder { color: var(--text-muted); opacity: .7; }

/* --------------------------------------------------------------------------
   4. Desktop pill nav
   -------------------------------------------------------------------------- */
.pa-nav { display: none; }

.pa-nav__list {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  list-style: none;
  margin: 0;
  padding: 0;
}

.pa-nav__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 14px;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--text-heading);
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: var(--weight-semibold);
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--duration-base) var(--ease-standard),
              color var(--duration-base) var(--ease-standard);
}

.pa-nav__link:hover,
.pa-nav__link:focus,
.pa-nav__link[aria-expanded="true"],
.pa-nav__link.is-active {
  background: var(--surface-tint);
  color: var(--interactive-accent);
}

.pa-nav__chevron {
  width: 12px;
  height: 12px;
  transition: transform var(--duration-fast) var(--ease-standard);
}

.pa-nav__link[aria-expanded="true"] .pa-nav__chevron { transform: rotate(180deg); }

/* --- Categories dropdown ------------------------------------------------- */
.pa-nav__item { position: relative; }

.pa-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  z-index: 60;
  width: 280px;
  padding: var(--space-2);
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: 16px;
  box-shadow: var(--shadow-raised);
  animation: paMegaDrop var(--duration-base) var(--ease-standard);
}

.pa-dropdown[hidden] { display: none; }

.pa-dropdown__row {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  padding: 12px 14px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-heading);
  font-size: 15px;
  font-weight: var(--weight-semibold);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

/* Row wrapper: positions the flyout, which is a sibling of the toggle button */
.pa-dropdown__item { position: relative; }

.pa-dropdown__row:hover,
.pa-dropdown__row:focus,
.pa-dropdown__item.is-open > .pa-dropdown__row {
  background: var(--surface-tint);
  color: var(--interactive-accent);
}

.pa-dropdown__dot {
  width: 9px;
  height: 9px;
  flex: 0 0 9px;
  border-radius: var(--radius-pill);
}

.pa-dropdown__dot--topics     { background: var(--pa-cyan-shade); }
.pa-dropdown__dot--products   { background: var(--pa-purple); }
.pa-dropdown__dot--industries { background: var(--pa-orange); }

.pa-dropdown__row-chevron { margin-left: auto; width: 12px; height: 12px; opacity: .6; }

/* Flyout submenu */
.pa-flyout {
  position: absolute;
  top: -8px;
  left: calc(100% + 8px);
  z-index: 61;
  width: 540px;
  padding: var(--space-4);
  column-count: 2;
  column-gap: var(--space-4);
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: 16px;
  box-shadow: var(--shadow-raised);
  animation: paMegaDrop var(--duration-fast) var(--ease-standard);
}

.pa-flyout--single { width: 290px; column-count: 1; }

.pa-flyout[hidden] { display: none; }

.pa-flyout__link {
  display: block;
  break-inside: avoid;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  color: var(--text-body);
  font-size: 14.5px;
  text-decoration: none;
}

.pa-flyout__link:hover,
.pa-flyout__link:focus {
  background: var(--surface-tint);
  color: var(--interactive-accent);
}

@keyframes paMegaDrop {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   5. Mobile drawer
   -------------------------------------------------------------------------- */
.pa-drawer-overlay {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: rgba(15, 6, 26, .5);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--duration-base) var(--ease-standard),
              visibility var(--duration-base) var(--ease-standard);
}

.pa-drawer-overlay.is-open { opacity: 1; visibility: visible; }

.pa-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 71;
  display: flex;
  flex-direction: column;
  width: min(340px, 86vw);
  padding: var(--space-5);
  overflow-y: auto;
  background: var(--surface-page);
  transform: translateX(100%);
  transition: transform var(--duration-base) var(--ease-standard);
}

.pa-drawer.is-open { transform: none; }

.pa-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}

.pa-drawer__head img { width: 150px; height: auto; }

.pa-drawer__search {
  width: 100%;
  height: 44px;
  padding: 0 16px;
  margin-bottom: var(--space-4);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  background: var(--surface-card);
  color: var(--text-body);
  font-size: 14px;
}

.pa-drawer__link {
  display: block;
  padding: 11px 12px;
  border-radius: var(--radius-sm);
  color: var(--text-heading);
  font-size: 15px;
  font-weight: var(--weight-semibold);
  text-decoration: none;
}

.pa-drawer__link:hover,
.pa-drawer__link:focus { background: var(--surface-tint); color: var(--interactive-accent); }

.pa-drawer__group-title {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  padding: 11px 12px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-heading);
  font-size: 15px;
  font-weight: var(--weight-semibold);
  text-align: left;
  cursor: pointer;
}

.pa-drawer__group-title:hover { background: var(--surface-tint); }

.pa-drawer__group-title .pa-nav__chevron { margin-left: auto; }
.pa-drawer__group-title[aria-expanded="true"] .pa-nav__chevron { transform: rotate(180deg); }

.pa-drawer__sublist { list-style: none; margin: 0 0 var(--space-2); padding: 0 0 0 var(--space-5); }
.pa-drawer__sublist[hidden] { display: none; }

.pa-drawer__sublist a {
  display: block;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  color: var(--text-body);
  font-size: 14.5px;
  text-decoration: none;
}

.pa-drawer__sublist a:hover,
.pa-drawer__sublist a:focus { background: var(--surface-tint); color: var(--interactive-accent); }

.pa-drawer__divider {
  height: 1px;
  margin: var(--space-4) 0;
  background: var(--border-subtle);
  border: 0;
}

.pa-drawer__social {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.pa-drawer__social a { color: var(--interactive-accent); font-size: 18px; }

body.pa-scroll-locked { overflow: hidden; }

/* --------------------------------------------------------------------------
   6. Responsive — swap compact nav for the full pill nav at 1040px
   -------------------------------------------------------------------------- */
@media (min-width: 1040px) {
  .pa-nav { display: block; }
  .pa-header__hamburger { display: none; }
}

@media (max-width: 1039.98px) {
  .pa-header__search { display: none; }
}

/* --------------------------------------------------------------------------
   7. Footer
   -------------------------------------------------------------------------- */
.pa-footer {
  margin-top: auto;
  background: var(--pa-deep-purple);
  color: rgba(255, 255, 255, .82);
}

.pa-footer a { color: rgba(255, 255, 255, .82); text-decoration: none; }
.pa-footer a:hover,
.pa-footer a:focus { color: #FFFFFF; }
/* Keyboard users still get an underline cue; pointer hover does not, per the handoff. */
.pa-footer a:focus-visible { text-decoration: underline; }

.pa-footer__inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 40px;
  max-width: var(--container-wide);
  margin-inline: auto;
  padding: var(--space-8) var(--gutter) var(--space-7);
}

.pa-footer__logo { width: 190px; height: auto; margin-bottom: var(--space-4); }

.pa-footer__blurb { font-size: 14.5px; line-height: var(--leading-body); }

.pa-footer__heading {
  margin-bottom: var(--space-4);
  color: #FFFFFF;
  font-size: 15px;
  font-weight: var(--weight-heading);
  letter-spacing: var(--tracking-tight);
}

.pa-footer__list { list-style: none; margin: 0; padding: 0; font-size: 14.5px; }
.pa-footer__list li { margin-bottom: var(--space-2); }

.pa-footer__social { display: flex; flex-wrap: wrap; gap: var(--space-3); list-style: none; margin: 0; padding: 0; }

.pa-footer__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, .1);
  transition: background-color var(--duration-base) var(--ease-standard);
}

.pa-footer__social a:hover,
.pa-footer__social a:focus { background: rgba(255, 255, 255, .2); }

.pa-footer__social img { width: 18px; height: 18px; }

.pa-footer__legal {
  max-width: var(--container-wide);
  margin-inline: auto;
  padding: var(--space-5) var(--gutter);
  border-top: 1px solid rgba(255, 255, 255, .12);
  color: rgba(255, 255, 255, .55);
  font-size: 12.5px;
}

/* --------------------------------------------------------------------------
   8. Page transition
   -------------------------------------------------------------------------- */
main[role="main"] { animation: paFadeUp .3s var(--ease-standard); }

/* --------------------------------------------------------------------------
   9. Badges (category pills)
   -------------------------------------------------------------------------- */
.pa-badges { display: flex; flex-wrap: wrap; gap: var(--space-2); }

.pa-badge {
  display: inline-flex;
  align-items: center;
  padding: 5px 11px;
  border-radius: var(--radius-pill);
  background: var(--badge-neutral-bg);
  color: var(--badge-neutral-fg);
  font-size: 11px;
  font-weight: var(--weight-semibold);
  letter-spacing: .04em;
  line-height: 1.4;
  text-transform: uppercase;
  text-decoration: none;
  /* Badges also sit inside the <article> cards, so cancel the legacy
     `article ... a` orange inset underline from site.css. */
  box-shadow: none;
}

.pa-badge--purple     { background: var(--badge-purple-bg);  color: var(--badge-purple-fg); }
.pa-badge--cyan       { background: var(--badge-cyan-bg);    color: var(--badge-cyan-fg); }
.pa-badge--orange     { background: var(--badge-orange-bg);  color: var(--badge-orange-fg); }
.pa-badge--amber      { background: var(--badge-amber-bg);   color: var(--badge-amber-fg); }

/* Hover / focus for linked pills. Rather than hand-authoring a hover colour
   per family per theme, we mix each pill's own fill toward its own text
   colour. In light mode the text colour is the dark shade, so the tint
   deepens; in dark mode the text colour is the bright tint, so the overlay
   lifts. That keeps every family legible in both themes from one rule.
   `--onimage` is excluded because it carries its own overlay treatment. */
a.pa-badge {
  transition: background-color var(--duration-fast) var(--ease-standard),
              color var(--duration-fast) var(--ease-standard);
}

a.pa-badge:not(.pa-badge--onimage):hover,
a.pa-badge:not(.pa-badge--onimage):focus-visible {
  background: color-mix(in srgb, var(--badge-neutral-bg), currentColor 14%);
}

a.pa-badge--purple:hover,
a.pa-badge--purple:focus-visible { background: color-mix(in srgb, var(--badge-purple-bg), currentColor 14%); }

a.pa-badge--cyan:hover,
a.pa-badge--cyan:focus-visible   { background: color-mix(in srgb, var(--badge-cyan-bg), currentColor 14%); }

a.pa-badge--orange:hover,
a.pa-badge--orange:focus-visible { background: color-mix(in srgb, var(--badge-orange-bg), currentColor 14%); }

a.pa-badge--amber:hover,
a.pa-badge--amber:focus-visible  { background: color-mix(in srgb, var(--badge-amber-bg), currentColor 14%); }

/* Over imagery (hero overlays) */
.pa-badge--onimage {
  padding: 6px 14px;
  background: rgba(255, 255, 255, .2);
  color: #FFFFFF;
}

.pa-badge--onimage:hover,
.pa-badge--onimage:focus { background: rgba(255, 255, 255, .34); color: #FFFFFF; }

/* --------------------------------------------------------------------------
   10. Post card
   -------------------------------------------------------------------------- */
.pa-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

.pa-cards--2up { grid-template-columns: repeat(2, minmax(0, 1fr)); }

@media (max-width: 1039.98px) {
  .pa-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 719.98px) {
  .pa-cards,
  .pa-cards--2up { grid-template-columns: minmax(0, 1fr); gap: 18px; }
}

.pa-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  transition: box-shadow var(--duration-base) var(--ease-standard),
              transform var(--duration-base) var(--ease-standard);
}

.pa-card:hover {
  box-shadow: var(--shadow-raised);
  transform: translateY(-3px);
}

.pa-card__media {
  display: block;
  height: 190px;
  overflow: hidden;
  background: var(--surface-subtle);
}

.pa-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.pa-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--space-3);
  padding: 22px;
}

.pa-card__title { margin: 0; font-size: 19px; font-weight: var(--weight-heading); line-height: 1.3; }

/* The handoff makes the whole card the hover target (shadow + lift); the title
   itself has no hover state, so it stays inert and simply inherits the heading
   colour. Keyboard focus is still shown via the global :focus-visible ring.

   The cards render as <article> elements, so the legacy site.css rule
   `article h3 a { box-shadow: 0 -1px 0 0 #ec6607 inset }` was painting an
   orange underline across every card title. That treatment is meant for
   in-copy links in the article body only, so it is cancelled here. */
.pa-card__title a,
.pa-card__title a:hover,
.pa-card__title a:focus {
  color: var(--text-heading);
  text-decoration: none;
  box-shadow: none;
}

.pa-card__excerpt {
  margin: 0;
  color: var(--text-muted);
  font-size: 14.5px;
  line-height: var(--leading-body);
}

.pa-card__meta {
  margin: auto 0 0;
  color: var(--text-muted);
  font-size: 13px;
}

/* Full-width card variant used by search results */
.pa-card--wide { border-radius: var(--radius-md); }
.pa-card--wide .pa-card__body { padding: 24px 26px; }
.pa-card--wide .pa-card__title { font-size: 20px; }

/* --------------------------------------------------------------------------
   11. Pagination
   -------------------------------------------------------------------------- */
.pa-pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin: var(--space-7) 0;
  padding: 0;
  list-style: none;
}

.pa-pagination > li > a,
.pa-pagination > li > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 8px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xs);
  background: var(--surface-card);
  color: var(--text-heading);
  font-size: 14.5px;
  font-weight: var(--weight-semibold);
  text-decoration: none;
  transition: background-color var(--duration-base) var(--ease-standard),
              color var(--duration-base) var(--ease-standard);
}

/* Previous / next chevrons render as plain 40x40 square cells, per the design */
.pa-pagination__nav {
  padding: 0;
  font-size: 20px;
  line-height: 1;
}

/* The glyph span inside a chevron link must not inherit the cell box */
.pa-pagination__nav > span {
  display: block;
  min-width: 0;
  height: auto;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
}

.pa-pagination a:hover,
.pa-pagination a:focus { background: var(--surface-tint); color: var(--interactive-accent); }

.pa-pagination .is-active > a,
.pa-pagination .is-active > span {
  background: var(--pa-purple);
  border-color: var(--pa-purple);
  color: #FFFFFF;
}

.pa-pagination .is-disabled > span { opacity: .45; }

/* --------------------------------------------------------------------------
   12. Listing page header band
   -------------------------------------------------------------------------- */
.pa-pagehead {
  position: relative;
  overflow: hidden;
  background: var(--surface-tint);
  border-bottom: 1px solid var(--border-subtle);
}

.pa-pagehead__inner {
  position: relative;
  z-index: 1;
  max-width: var(--container-content);
  margin-inline: auto;
  padding: 34px var(--gutter) 40px;
}

.pa-pagehead__kicker {
  margin: 0 0 12px;
  color: var(--interactive-accent);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.pa-pagehead__title {
  margin: 0 0 14px;
  font-size: clamp(28px, 5vw, 46px);
  line-height: 1.08;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.pa-pagehead__count {
  margin: 0 0 6px;
  max-width: 60ch;
  color: var(--text-muted);
  font-size: clamp(15px, 2vw, 17px);
  line-height: 1.6;
}

/* Oversized swirl bleeding off the corner */
.pa-pagehead__swirl {
  position: absolute;
  top: -140px;
  right: -120px;
  width: 440px;
  height: 340px;
  background: var(--pa-purple);
  opacity: .07;
}

/* --------------------------------------------------------------------------
   13. Listing layout (content + sticky sidebar)
   -------------------------------------------------------------------------- */
.pa-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 44px;
  max-width: var(--container-content);
  margin-inline: auto;
  padding: var(--space-6) var(--gutter) var(--space-8);
}

/* Home and other full-width pages run on the wide container per the design. */
.pa-layout--wide { max-width: var(--container-wide); }

.pa-layout--article { grid-template-columns: minmax(0, 1fr) 320px; gap: 56px; }

.pa-layout__aside { position: sticky; top: 96px; align-self: start; }

/* Related articles band. Sits below the article/sidebar grid so the cards get
   the full content width and render 3-up like the mockup. */
.pa-related {
  max-width: var(--container-content);
  margin-inline: auto;
  padding: 0 var(--gutter) var(--space-8);
}

@media (max-width: 1039.98px) {
  .pa-layout,
  .pa-layout--article { grid-template-columns: minmax(0, 1fr); gap: var(--space-7); }
  .pa-layout__aside { position: static; }
}

@media (max-width: 719.98px) {
  .pa-layout,
  .pa-layout--article { padding: var(--space-6) var(--gutter) var(--space-7); }
}

/* --------------------------------------------------------------------------
   14. Sidebar panels
   -------------------------------------------------------------------------- */
.pa-panel {
  position: relative;
  overflow: hidden;
  margin-bottom: var(--space-5);
  padding: 28px;
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
}

.pa-panel__title {
  margin: 0 0 var(--space-4);
  font-size: 17px;
  font-weight: var(--weight-heading);
}

/* Secondary panels (Browse tags) use tighter padding per the handoff. */
.pa-panel--tight { padding: 22px; }

/* Small uppercase accent heading used by the Browse tags panel. */
.pa-panel__label {
  margin: 0 0 14px;
  color: var(--interactive-accent);
  font-size: 13px;
  font-weight: var(--weight-heading);
  letter-spacing: .05em;
  text-transform: uppercase;
}

/* Purple enquiry / CTA panel */
.pa-panel--brand {
  background: var(--pa-purple);
  border-color: transparent;
  color: rgba(255, 255, 255, .85);
}

.pa-panel--brand .pa-panel__title { color: #FFFFFF; }

/* Eyebrow label above the panel title (article sidebar) */
.pa-panel__eyebrow {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 10px;
  color: rgba(255, 255, 255, .72);
  font-size: 11.5px;
  font-weight: var(--weight-heading);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.pa-panel__eyebrow span { font-size: 14px; }

.pa-panel--brand .pa-panel__swirl {
  position: absolute;
  bottom: -100px;
  right: -70px;
  width: 240px;
  height: 185px;
  background: #FFFFFF;
  opacity: .09;
}

/* CMS-supplied background device. Applied as a mask like the default swirl so the
   artwork is tinted to the panel's own colour - brand SVGs ship with a hardcoded
   purple fill which would be invisible against the purple panel. */
.pa-panel--brand .pa-panel__swirl--image {
  background-color: #FFFFFF;
  background-image: none !important;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  opacity: .1;
  pointer-events: none;
}

.pa-panel--brand > * { position: relative; z-index: 1; }

/* Popular posts */
.pa-poplist { display: grid; gap: var(--space-4); margin: 0; padding: 0; list-style: none; }

.pa-poplist a {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--text-heading);
  text-decoration: none;
}

.pa-poplist img {
  width: 52px;
  height: 52px;
  flex: 0 0 52px;
  border-radius: var(--radius-sm);
  object-fit: cover;
}

.pa-poplist__title { font-size: 14px; font-weight: var(--weight-semibold); line-height: 1.35; }
.pa-poplist__meta { display: block; margin-top: 2px; color: var(--text-muted); font-size: 12.5px; font-weight: var(--weight-body); }

.pa-poplist a:hover .pa-poplist__title { color: var(--interactive-accent); }

/* Tag pills */
.pa-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }

.pa-tag {
  display: inline-flex;
  padding: 5px 12px;
  border: 1.5px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  color: var(--text-body);
  font-size: 12.5px;
  font-weight: var(--weight-body);
  white-space: nowrap;
  text-decoration: none;
  transition: border-color var(--duration-base) var(--ease-standard),
              color var(--duration-base) var(--ease-standard);
}

.pa-tag:hover,
.pa-tag:focus-visible { border-color: var(--interactive-accent); color: var(--interactive-accent); }

/* --------------------------------------------------------------------------
   15. Section headings with the orange dot marker
   -------------------------------------------------------------------------- */
.pa-section-heading {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: 0 0 var(--space-5);
  font-size: clamp(20px, 2.6vw, 26px);
}

.pa-section-heading::before {
  content: "";
  width: 10px;
  height: 10px;
  flex: 0 0 10px;
  border-radius: var(--radius-pill);
  background: var(--pa-orange);
}

/* --------------------------------------------------------------------------
   16. Hero (home featured post + article header)
   -------------------------------------------------------------------------- */
.pa-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 540px;
  overflow: hidden;
  border-radius: var(--radius-hero);
  background: var(--pa-deep-purple);
}

.pa-hero__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.pa-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
              rgba(20, 8, 34, .88),
              rgba(20, 8, 34, .4) 52%,
              rgba(20, 8, 34, .1));
}

.pa-hero__content {
  position: relative;
  z-index: 1;
  margin-top: auto;
  max-width: 840px;
  padding: clamp(24px, 5vw, 44px) clamp(20px, 5vw, 48px);
  color: #FFFFFF;
}

.pa-hero__content .pa-badges { margin-bottom: var(--space-4); }

.pa-hero__title {
  margin: 0 0 14px;
  color: #FFFFFF;
  font-size: clamp(28px, 4.5vw, 48px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.pa-hero__title a {
  color: inherit;
  text-decoration: none;
}

/* The handoff's hero title has no hover colour change - it stays white on the
   dark overlay. The accent colour (purple in light mode) was unreadable here. */
.pa-hero__title a:hover,
.pa-hero__title a:focus { color: #FFFFFF; }

/* Keyboard users still get an underline cue; pointer hover does not. */
.pa-hero__title a:focus-visible { text-decoration: underline; }

/* Spacing wrapper when the hero leads a page (design: 52px top, 40px bottom) */
.pa-hero-band { padding-top: 52px; padding-bottom: 40px; }

@media (max-width: 719.98px) {
  .pa-hero-band { padding-top: var(--space-6); padding-bottom: var(--space-6); }
}

.pa-hero__excerpt {
  margin: 0 0 22px;
  max-width: 54ch;
  color: rgba(255, 255, 255, .85);
  font-size: clamp(15px, 2vw, 17px);
  line-height: 1.6;
}

.pa-hero__meta {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  color: rgba(255, 255, 255, .82);
  font-size: 13.5px;
}

.pa-hero__meta-dot {
  width: 3px;
  height: 3px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, .5);
}

/* Design places the CTA and the meta on one row */
.pa-hero__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 18px;
}

@media (max-width: 719.98px) {
  .pa-hero { min-height: 380px; }
}

/* --------------------------------------------------------------------------
   17. Article body
   -------------------------------------------------------------------------- */
.pa-article {
  color: var(--text-body);
  font-size: clamp(15.5px, 1.8vw, 17.5px);
  line-height: var(--leading-article);
}

.pa-article > * + * { margin-top: var(--space-5); }

.pa-article h2 { margin-top: var(--space-7); font-size: clamp(22px, 3vw, 28px); }
.pa-article h3 { margin-top: var(--space-6); font-size: clamp(19px, 2.4vw, 22px); }

.pa-article a { color: var(--interactive-accent); }

.pa-article img { max-width: 100%; height: auto; border-radius: var(--radius-md); }

.pa-article ul,
.pa-article ol { padding-left: var(--space-5); }
.pa-article li + li { margin-top: 10px; }

.pa-article blockquote {
  margin: var(--space-6) 0;
  padding-left: var(--space-5);
  border-left: 3px solid var(--interactive-accent);
  color: var(--text-heading);
  font-size: clamp(19px, 2.6vw, 24px);
  font-weight: var(--weight-quote);
  line-height: var(--leading-body);
}

.pa-article figure { margin: var(--space-6) 0; }

.pa-article figure img {
  width: 100%;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
}

.pa-article figcaption {
  margin-top: var(--space-3);
  color: var(--text-muted);
  font-size: 13.5px;
}

/* Enlarge button on inline figures */
.pa-figure { position: relative; }

.pa-figure__zoom {
  position: absolute;
  top: 12px;
  right: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: var(--radius-pill);
  background: rgba(20, 8, 34, .55);
  backdrop-filter: blur(4px);
  color: #FFFFFF;
  cursor: pointer;
}

.pa-figure__zoom svg { width: 16px; height: 16px; }

/* Lightbox */
.pa-lightbox {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
  background: rgba(15, 6, 26, .92);
}

.pa-lightbox[hidden] { display: none; }

.pa-lightbox img {
  max-width: 100%;
  max-height: 90vh;
  border-radius: var(--radius-md);
}

.pa-lightbox__close {
  position: absolute;
  top: 24px;
  right: 24px;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, .15);
  color: #FFFFFF;
  cursor: pointer;
}

/* Video block */
.pa-video { margin: var(--space-6) 0; }

.pa-video__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--pa-deep-purple);
}

.pa-video__frame iframe,
.pa-video__frame video,
.pa-video__frame img {
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
}

.pa-video__play {
  position: absolute;
  top: 50%;
  left: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--pa-orange);
  color: #FFFFFF;
  transform: translate(-50%, -50%);
  cursor: pointer;
}

.pa-video__meta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-3);
  color: var(--text-muted);
  font-size: 13.5px;
}

/* Article tag row: inline "Tags" label followed by the pills. */
.pa-tagrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
  margin: 34px 0 8px;
}

.pa-tagrow__label {
  margin-right: 4px;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: var(--weight-semibold);
}

/* --------------------------------------------------------------------------
   18. Share row
   -------------------------------------------------------------------------- */
.pa-share {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: 20px 0 36px;
  padding: 20px 0;
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
}

.pa-share__label {
  margin: 0;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: var(--weight-semibold);
}

.pa-share__list { display: flex; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }

/* The Facebook trigger is an <a> with no href (it opens the FB SDK dialog via
   JS), so Bootstrap's `a:not([href]):not([class])` reboot rule and the legacy
   `article a` rules resolve it differently to the other three icons. Styling
   the list items rather than relying on the anchor's default colour keeps all
   four identical, and `color`/`background` are token-driven so they track the
   light and dark themes together. */
.pa-share__list a,
.pa-share__list a:not([href]),
.pa-share__list a:not([href]):not([class]) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-pill);
  background: var(--surface-tint);
  color: var(--interactive-accent);
  text-decoration: none;
  cursor: pointer;
  box-shadow: none;
  transition: background-color var(--duration-base) var(--ease-standard),
              color var(--duration-base) var(--ease-standard);
}

/* Icons inherit rather than carrying their own brand colours. */
.pa-share__list a i { color: inherit; }

.pa-share__list a:hover,
.pa-share__list a:focus-visible,
.pa-share__list a:not([href]):hover,
.pa-share__list a:not([href]):focus-visible {
  background: var(--interactive-accent);
  color: var(--surface-card);
}

/* --------------------------------------------------------------------------
   19. Comments
   -------------------------------------------------------------------------- */
.pa-comments { margin-top: var(--space-8); }

.pa-comment-list { display: grid; gap: var(--space-5); margin: 0 0 var(--space-7); padding: 0; list-style: none; }

.pa-comment { display: flex; gap: var(--space-4); }

.pa-comment__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  border-radius: var(--radius-pill);
  background: var(--badge-purple-bg);
  color: var(--badge-purple-fg);
  font-size: 16px;
  font-weight: var(--weight-heading);
  text-transform: uppercase;
}

.pa-comment__name { margin: 0; color: var(--text-heading); font-size: 15px; font-weight: var(--weight-semibold); }
.pa-comment__meta { margin: 2px 0 var(--space-3); color: var(--text-muted); font-size: 12.5px; }
.pa-comment__body { margin: 0; font-size: 15px; line-height: var(--leading-body); }

.pa-comment-form {
  padding: 28px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--surface-card);
}

.pa-comment-form__title {
  margin: 0 0 18px;
  font-size: 19px;
  font-weight: var(--weight-heading);
  letter-spacing: var(--tracking-tight);
  color: var(--text-heading);
}

/* The handoff's comment form relies on placeholders rather than labels, and
   pulls the submit button to the right alongside the "save my details"
   checkbox. Umbraco Forms renders its own label/nav markup, so we reshape it
   here rather than forking the form theme. */
.pa-comment-form .umbraco-forms-form,
.pa-comment-form .umbraco-forms-page,
.pa-comment-form .umbraco-forms-fieldset { margin: 0; padding: 0; border: 0; }

.pa-comment-form .umbraco-forms-caption { display: none; }
.pa-comment-form .umbraco-forms-label { display: none; }

.pa-comment-form .umbraco-forms-navigation {
  display: flex;
  justify-content: flex-end;
  margin-top: var(--space-4);
}

/* --------------------------------------------------------------------------
   20. Reading progress rail
   Absolutely positioned in the gutter to the left of the sticky sidebar, so it
   tracks with it. Desktop only, and only after scrolling past the header.
   -------------------------------------------------------------------------- */
.pa-progress {
  position: absolute;
  top: 0;
  left: -20px;
  width: 1px;
  height: min(100%, 62vh);
  border-radius: 2px;
  background: rgba(128, 128, 128, .20);
  opacity: 0;
  transition: opacity var(--duration-base) var(--ease-standard);
}

.pa-progress.is-visible { opacity: 1; }

.pa-progress__fill {
  display: block;
  width: 100%;
  height: 0;
  border-radius: 2px;
  background: #9A9A9A;
  transition: height .08s linear;
}

[data-pa-theme="dark"] .pa-progress__fill { background: rgba(255, 255, 255, .38); }

@media (max-width: 1039.98px) {
  .pa-progress { display: none; }
}

/* --------------------------------------------------------------------------
   21. Home page sections
   -------------------------------------------------------------------------- */
.pa-section {
  max-width: var(--container-wide);
  margin-inline: auto;
  padding: var(--space-8) var(--gutter);
}

.pa-section--content { max-width: var(--container-content); }
.pa-section--narrow  { max-width: var(--container-narrow); }
.pa-section--flush   { padding-top: 0; }

/* Home "Latest articles" band - design: 36px 20px 24px */
.pa-section--latest { padding: var(--space-6) var(--gutter) var(--space-5); }

/* Home "Talk to us" band - design: 20px 20px 64px */
.pa-section--cta { padding: var(--space-5) var(--gutter) var(--space-8); }

/* "Talk to us" CTA band */
.pa-cta {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  align-items: center;
  gap: 28px;
  padding: 52px 48px;
  border-radius: var(--radius-xl);
  background: var(--pa-deep-purple);
  color: rgba(255, 255, 255, .85);
}

[data-pa-theme="dark"] .pa-cta {
  background: var(--pa-purple);
  border: 1px solid rgba(255, 255, 255, .16);
}

.pa-cta > * { position: relative; z-index: 1; }

/* Post-submit "thank you" state - keep it centred and padded like the form it replaces */
.pa-cta__form,
.pa-formzone--cta { align-self: center; }

/* Submitted state: the form wrapper keeps stray margins/height from the Forms
   markup, which pins the message to the top edge. Reset it and centre it. */
.pa-cta:has(.umbraco-forms-submitmessage) { align-items: center; }
.pa-cta:has(.umbraco-forms-submitmessage) .pa-cta__form,
.pa-cta:has(.umbraco-forms-submitmessage) .pa-formzone--cta {
  align-self: center;
  margin: 0;
  padding: 0;
  height: auto;
  min-height: 0;
}
.pa-cta .pa-formzone--cta > div:has(> .umbraco-forms-submitmessage),
.pa-cta .umbraco-forms-form:has(.umbraco-forms-submitmessage) {
  margin: 0;
  padding: 0;
  min-height: 0;
}

.pa-cta .umbraco-forms-submitmessage,
.pa-panel--brand .umbraco-forms-submitmessage {
  display: block;
  margin: 0;
  padding: 24px 28px;
  border-radius: var(--radius-lg, 16px);
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .16);
  color: #FFFFFF;
  font-size: 15px;
  line-height: 1.6;
}

.pa-cta .umbraco-forms-submitmessage p,
.pa-panel--brand .umbraco-forms-submitmessage p { margin: 0 0 8px; }
.pa-cta .umbraco-forms-submitmessage p:last-child,
.pa-panel--brand .umbraco-forms-submitmessage p:last-child { margin-bottom: 0; }

.pa-cta__swirl {
  position: absolute;
  bottom: -160px;
  left: -120px;
  width: 460px;
  height: 355px;
  z-index: 0;
  background: #FFFFFF;
  opacity: .06;
  pointer-events: none;
}

/* CMS-supplied background device. Masked for the same reason as the sidebar panel. */
.pa-cta__swirl--image {
  background-color: #FFFFFF;
  background-image: none !important;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  opacity: .08;
}

.pa-cta__eyebrow {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 10px;
  color: rgba(255, 255, 255, .72);
  font-size: 11.5px;
  font-weight: var(--weight-heading);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.pa-cta__eyebrow span { font-size: 14px; }

.pa-cta__title {
  margin: 0 0 var(--space-3);
  color: #FFFFFF;
  font-size: clamp(24px, 4vw, 34px);
  line-height: 1.05;
}

.pa-cta__copy {
  margin: 0;
  max-width: 44ch;
  color: rgba(255, 255, 255, .82);
  font-size: 16px;
  line-height: 1.6;
}

@media (max-width: 719.98px) {
  .pa-cta { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); padding: 34px 26px; }
}

/* --------------------------------------------------------------------------
   22. Search page
   -------------------------------------------------------------------------- */
.pa-searchfield {
  display: flex;
  gap: var(--space-3);
  max-width: 560px;
  margin-top: var(--space-5);
}

.pa-searchfield input {
  flex: 1;
  height: 54px;
  padding: 0 22px;
  border: 1.5px solid var(--border-strong);
  border-radius: var(--radius-pill);
  background: var(--surface-card);
  color: var(--text-body);
  font-size: 15px;
}

.pa-searchfield input::placeholder { color: var(--text-muted); opacity: .7; }

.pa-results { display: grid; gap: var(--space-5); margin: 0; padding: 0; list-style: none; }

/* --------------------------------------------------------------------------
   23. Empty state / 404
   -------------------------------------------------------------------------- */
.pa-empty {
  position: relative;
  overflow: hidden;
  max-width: 760px;
  margin-inline: auto;
  padding: var(--space-9) var(--gutter);
  text-align: center;
}

.pa-empty__swirl {
  position: absolute;
  top: -22%;
  right: -14%;
  width: 460px;
  height: 460px;
  background: var(--pa-purple);
  opacity: .08;
}

.pa-empty > * { position: relative; z-index: 1; }

.pa-empty__code {
  margin: 0;
  color: var(--interactive-accent);
  font-size: clamp(90px, 16vw, 150px);
  font-weight: var(--weight-heading);
  letter-spacing: -0.04em;
  line-height: 1;
}

.pa-empty__title { margin: var(--space-5) 0 var(--space-4); font-size: clamp(24px, 3.4vw, 34px); }

.pa-empty__copy { margin: 0 auto var(--space-6); max-width: 52ch; color: var(--text-muted); }

.pa-empty__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: center; }

/* --------------------------------------------------------------------------
   24. Umbraco Forms
   The "basic" theme markup is retained; only its presentation is re-tokenised
   so forms inherit the reskin in every context they appear (article sidebar,
   listing sidebar, comment form, CTA band).
   -------------------------------------------------------------------------- */
.umbraco-forms-caption {
  margin: 0 0 var(--space-4);
  font-size: 17px;
  font-weight: var(--weight-heading);
}

.umbraco-forms-fieldset { margin: 0; padding: 0; border: 0; }

.umbraco-forms-label {
  display: block;
  margin-bottom: 6px;
  color: inherit;
  font-size: 13.5px;
  font-weight: var(--weight-semibold);
}

.umbraco-forms-indicator { color: var(--pa-orange); }

.umbraco-forms-tooltip {
  display: block;
  margin-bottom: 6px;
  color: var(--text-muted);
  font-size: 12.5px;
}

.umbraco-forms-field-wrapper input[type="text"],
.umbraco-forms-field-wrapper input[type="email"],
.umbraco-forms-field-wrapper input[type="tel"],
.umbraco-forms-field-wrapper input[type="url"],
.umbraco-forms-field-wrapper input[type="number"],
.umbraco-forms-field-wrapper input[type="password"],
.umbraco-forms-field-wrapper input[type="date"],
.umbraco-forms-field-wrapper select,
.umbraco-forms-field-wrapper textarea {
  width: 100%;
  padding: 11px 16px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background: var(--surface-card);
  color: var(--text-body);
  font-family: var(--font-sans);
  font-size: 14.5px;
  line-height: 1.4;
}

.umbraco-forms-field-wrapper input:not([type="checkbox"]):not([type="radio"]),
.umbraco-forms-field-wrapper select { height: 46px; }

.umbraco-forms-field-wrapper textarea { min-height: 120px; resize: vertical; }

.umbraco-forms-field-wrapper input:focus,
.umbraco-forms-field-wrapper select:focus,
.umbraco-forms-field-wrapper textarea:focus {
  border-color: var(--focus-ring);
  outline: 2px solid var(--focus-ring);
  outline-offset: 1px;
}

.umbraco-forms-field-wrapper ::placeholder { color: var(--text-muted); opacity: .7; }

.umbraco-forms-navigation .btn,
.umbraco-forms-form .btn-main {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 11px 22px;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  background: var(--btn-primary-bg);
  color: #FFFFFF;
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: var(--weight-semibold);
  cursor: pointer;
  transition: background-color var(--duration-base) var(--ease-standard);
}

.umbraco-forms-navigation .btn:hover,
.umbraco-forms-form .btn-main:hover { background: var(--btn-primary-bg-hover); color: #FFFFFF; }

.umbraco-forms-navigation .btn.cancel {
  background: transparent;
  border-color: var(--btn-outline-border);
  color: var(--btn-outline-fg);
}

.field-validation-error,
.umbraco-forms-form .text-danger { color: #D93025; font-size: 12.5px; }

/* Forms inside the purple panel / CTA band get white fields on purple */
.pa-panel--brand .umbraco-forms-label,
.pa-cta .umbraco-forms-label { color: rgba(255, 255, 255, .9); }

.pa-panel--brand .umbraco-forms-tooltip,
.pa-cta .umbraco-forms-tooltip { color: rgba(255, 255, 255, .65); }

.pa-panel--brand .umbraco-forms-field-wrapper input,
.pa-panel--brand .umbraco-forms-field-wrapper select,
.pa-panel--brand .umbraco-forms-field-wrapper textarea,
.pa-cta .umbraco-forms-field-wrapper input,
.pa-cta .umbraco-forms-field-wrapper select,
.pa-cta .umbraco-forms-field-wrapper textarea {
  border-color: transparent;
  background: #FFFFFF;
  color: var(--pa-neutral-900);
}

.pa-panel--brand .umbraco-forms-navigation .btn,
.pa-panel--brand .umbraco-forms-form .btn-main,
.pa-cta .umbraco-forms-navigation .btn,
.pa-cta .umbraco-forms-form .btn-main {
  background: var(--pa-offwhite);
  color: var(--pa-purple);
}

.pa-panel--brand .umbraco-forms-navigation .btn:hover,
.pa-cta .umbraco-forms-navigation .btn:hover { background: #FFFFFF; color: var(--pa-deep-purple); }

/* --------------------------------------------------------------------------
   "Talk to us" band form - matches the design's compact field treatment
   -------------------------------------------------------------------------- */
.pa-cta .umbraco-forms-form,
.pa-cta .umbraco-forms-page,
.pa-cta .umbraco-forms-fieldset { margin: 0; padding: 0; border: 0; }

/* Design shows unlabelled fields driven by placeholders only */
.pa-cta .umbraco-forms-label { display: none; }

/* The basic theme lays fields out with Bootstrap: a `.row` per fieldset and a
   `.umbraco-forms-container.col-md-*` per field, where the width comes from the
   form definition (First/Last = col-md-6, etc). Do NOT override the column
   widths here - only retune the gutters and the per-field margin so the
   handoff spacing is exact. */
.pa-formzone--cta .row {
  --bs-gutter-x: 16px;
  --bs-gutter-y: 0;
}

.pa-formzone--cta .umbraco-forms-field.mb-3 { margin-bottom: 16px !important; }

.pa-cta .umbraco-forms-field-wrapper input:not([type="checkbox"]):not([type="radio"]),
.pa-cta .umbraco-forms-field-wrapper select {
  height: 46px;
  padding: 0 14px;
}

.pa-cta .umbraco-forms-field-wrapper input,
.pa-cta .umbraco-forms-field-wrapper select,
.pa-cta .umbraco-forms-field-wrapper textarea {
  border-radius: var(--radius-sm);
  font-size: 15px;
}

.pa-cta .umbraco-forms-field-wrapper textarea {
  min-height: 88px;
  padding: 12px 14px;
}

/* Consent checkbox row: left aligned next to its label, never centred */
.pa-formzone--cta .umbraco-forms-field.checkbox,
.pa-formzone--cta .umbraco-forms-field.dataconsent {
  display: flex !important;
  flex-direction: row !important;
  justify-content: flex-start !important;
  align-items: center !important;
  gap: 10px;
  margin-top: 4px;
}

.pa-formzone--cta .umbraco-forms-field.checkbox .umbraco-forms-label,
.pa-formzone--cta .umbraco-forms-field.dataconsent .umbraco-forms-label {
  display: block;
  order: 2;
  margin: 0;
}

.pa-formzone--cta .umbraco-forms-field.checkbox .umbraco-forms-field-wrapper,
.pa-formzone--cta .umbraco-forms-field.dataconsent .umbraco-forms-field-wrapper {
  order: 1;
  flex: 0 0 auto;
}

.pa-formzone--cta input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: #FFFFFF;
}

/* Fields stay white in both themes, so the placeholder must not follow the
   theme's --text-muted (near-white in dark mode). */
.pa-cta .umbraco-forms-field-wrapper ::placeholder { color: #6B6B6B; opacity: 1; }

/* Consent / checkbox rows and legal copy sit on the purple band */
.pa-cta .umbraco-forms-field.dataconsent .umbraco-forms-field-wrapper,
.pa-cta .umbraco-forms-field-wrapper label { color: #FFFFFF; font-size: 14px; }

.pa-formzone--cta .umbraco-forms-field.titleanddescription,
.pa-formzone--cta .umbraco-forms-field.titleanddescription * {
  color: rgba(255, 255, 255, .72);
  font-size: 12.5px;
  line-height: 1.45;
  text-align: left !important;
}

/* Home band: auto-width pill, left aligned under the message field.
   Single-page forms render the submit inside `.text-end`, not
   `.umbraco-forms-navigation`, so both wrappers are reset here. */
.pa-formzone--cta .umbraco-forms-navigation,
.pa-formzone--cta .text-end {
  margin-top: 16px;
  padding: 0;
  text-align: left !important;
}

.pa-formzone--cta .umbraco-forms-navigation .btn,
.pa-formzone--cta .umbraco-forms-form .btn-main {
  width: auto;
  height: 44px;
  padding: 0 24px;
  float: none;
}

/* --------------------------------------------------------------------------
   Article / listing sidebar enquiry form.
   Values below are taken verbatim from the design handoff so the compact
   sidebar treatment differs from the roomier home CTA band:
   fields 42px tall, 10px radius, 0 13px padding, 14px text, 10px gap,
   textarea min 76px, and a full-width 44px submit button.
   -------------------------------------------------------------------------- */
.pa-panel--brand { padding: 24px; }

.pa-panel--brand .pa-panel__title {
  margin: 0 0 6px;
  font-size: 19px;
}

.pa-panel--brand > p {
  margin: 0 0 16px;
  font-size: 13.5px;
  line-height: 1.5;
  color: rgba(255, 255, 255, .82);
}

.pa-panel--brand .umbraco-forms-form,
.pa-panel--brand .umbraco-forms-page,
.pa-panel--brand .umbraco-forms-fieldset { margin: 0; padding: 0; border: 0; }

/* Design shows unlabelled fields driven by placeholders only */
.pa-panel--brand .umbraco-forms-label { display: none; }

/* Sidebar is narrow, so every field is forced to a full-width row regardless
   of the col-md-* width set on the form definition. */
.pa-formzone--article .row,
.pa-formzone--listing .row {
  --bs-gutter-x: 0;
  --bs-gutter-y: 0;
}

.pa-formzone--article .umbraco-forms-container,
.pa-formzone--listing .umbraco-forms-container {
  flex: 0 0 100%;
  width: 100%;
  max-width: 100%;
}

.pa-formzone--article .umbraco-forms-field.mb-3,
.pa-formzone--listing .umbraco-forms-field.mb-3 { margin-bottom: 12px !important; }

/* Consent checkbox row: left aligned next to its label, never centred */
.pa-formzone--article .umbraco-forms-field.checkbox,
.pa-formzone--article .umbraco-forms-field.dataconsent,
.pa-formzone--listing .umbraco-forms-field.checkbox,
.pa-formzone--listing .umbraco-forms-field.dataconsent {
  display: flex !important;
  flex-direction: row !important;
  justify-content: flex-start !important;
  align-items: center !important;
  gap: 10px;
  margin-top: 2px;
}

.pa-formzone--article .umbraco-forms-field.checkbox .umbraco-forms-label,
.pa-formzone--article .umbraco-forms-field.dataconsent .umbraco-forms-label,
.pa-formzone--listing .umbraco-forms-field.checkbox .umbraco-forms-label,
.pa-formzone--listing .umbraco-forms-field.dataconsent .umbraco-forms-label {
  display: block;
  order: 2;
  margin: 0;
}

.pa-formzone--article .umbraco-forms-field.checkbox .umbraco-forms-field-wrapper,
.pa-formzone--article .umbraco-forms-field.dataconsent .umbraco-forms-field-wrapper,
.pa-formzone--listing .umbraco-forms-field.checkbox .umbraco-forms-field-wrapper,
.pa-formzone--listing .umbraco-forms-field.dataconsent .umbraco-forms-field-wrapper {
  order: 1;
  flex: 0 0 auto;
}

.pa-formzone--article input[type="checkbox"],
.pa-formzone--listing input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: #FFFFFF;
}

.pa-panel--brand .umbraco-forms-field-wrapper input:not([type="checkbox"]):not([type="radio"]),
.pa-panel--brand .umbraco-forms-field-wrapper select {
  height: 42px;
  padding: 0 13px;
}

.pa-panel--brand .umbraco-forms-field-wrapper input,
.pa-panel--brand .umbraco-forms-field-wrapper select,
.pa-panel--brand .umbraco-forms-field-wrapper textarea {
  border-radius: 10px;
  font-size: 14px;
}

.pa-panel--brand .umbraco-forms-field-wrapper textarea {
  min-height: 76px;
  padding: 10px 13px;
}

.pa-panel--brand .umbraco-forms-field-wrapper ::placeholder { color: #6B6B6B; opacity: 1; }

/* Consent row and legal copy sit directly on the purple panel */
.pa-panel--brand .umbraco-forms-field.dataconsent .umbraco-forms-field-wrapper,
.pa-panel--brand .umbraco-forms-field-wrapper label { color: #FFFFFF; font-size: 13px; }

.pa-panel--brand .umbraco-forms-field.titleanddescription,
.pa-panel--brand .umbraco-forms-field.titleanddescription * {
  color: rgba(255, 255, 255, .72);
  font-size: 12px;
  line-height: 1.45;
  text-align: left !important;
}

.pa-formzone--article .umbraco-forms-navigation,
.pa-formzone--article .text-end,
.pa-formzone--listing .umbraco-forms-navigation,
.pa-formzone--listing .text-end {
  margin-top: 14px;
  padding: 0;
  text-align: left !important;
}

/* Article / listing sidebar: compact auto-width pill, left aligned */
.pa-formzone--article .umbraco-forms-navigation .btn,
.pa-formzone--article .umbraco-forms-form .btn-main,
.pa-formzone--listing .umbraco-forms-navigation .btn,
.pa-formzone--listing .umbraco-forms-form .btn-main {
  width: auto;
  height: 44px;
  padding: 0 22px;
  float: none;
}