/**
 * DocuPOW — Main stylesheet
 * Reset -> base type -> layout -> links -> buttons -> card -> header/nav ->
 * drawer -> footer -> motion -> a11y utilities.
 *
 * Colours/spacing/fonts come exclusively from tokens.css via var(--token).
 * The only hardcoded hex is the ~8%-darker Tech-Blue button hover (documented).
 * No inline styles anywhere; motion is transform/opacity/background-position only.
 */

/* =========================================================================
   (a) Reset — modern, minimal
   ========================================================================= */
*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  min-height: 100svh;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  background: none;
  border: none;
  cursor: pointer;
}

a {
  color: inherit;
  text-decoration: none;
}

ul[class],
ol[class] {
  list-style: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

/* Reset respects reduced-motion (safety block also at end of file). */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* =========================================================================
   (b) Base typography — type scale + tokens
   ========================================================================= */
html {
  font-family: var(--font-sans);
}

body {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 26px;
  font-weight: 400;
  color: var(--ink);
  background-color: var(--white);
}

h1 {
  font-size: 56px;
  line-height: 64px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

h2 {
  font-size: 36px;
  line-height: 44px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

h3 {
  font-size: 24px;
  line-height: 32px;
  font-weight: 500;
}

/* Body copy default */
p {
  font-size: 16px;
  line-height: 26px;
  font-weight: 400;
}

/* Caption (14/20) */
.dp-caption {
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
}

/* Mono caption (12/18, JetBrains Mono) */
.dp-caption--mono {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 18px;
  font-weight: 400;
}

/* Mobile: scale headings ~25-30% down on the 8px rhythm. */
@media (max-width: 768px) {
  h1 {
    font-size: 40px;
    line-height: 48px;
  }

  h2 {
    font-size: 28px;
    line-height: 36px;
  }

  h3 {
    font-size: 20px;
    line-height: 28px;
  }
}

/* =========================================================================
   (c) Layout — container
   ========================================================================= */
.dp-container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--space-3);
}

.dp-main {
  display: block;
}

/* Rendered post/page content — vertical rhythm on the 8px scale. */
.dp-entry-content > * + * {
  margin-top: var(--space-3);
}

/* =========================================================================
   (d) Links — base + .dp-link underline-slide hover
   ========================================================================= */
a:hover {
  color: var(--techblue);
}

/* .dp-link: Tech-Blue with an underline that slides in on hover.
   Animates background-size only (no layout thrash). */
.dp-link {
  color: var(--techblue);
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1px;
  transition: background-size .3s ease;
  padding-bottom: 2px;
}

.dp-link:hover,
.dp-link:focus-visible {
  color: var(--techblue);
  background-size: 100% 1px;
}

/* =========================================================================
   (e) Buttons
   ========================================================================= */
.dp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius);
  border: 1px solid transparent;
  font-family: inherit;
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  transition: transform .2s ease, opacity .2s ease,
    background-color .2s ease, border-color .2s ease;
}

.dp-btn:active {
  transform: translateY(1px);
}

/* Primary — Tech-Blue fill, white text. */
.dp-btn--primary {
  background-color: var(--techblue);
  color: var(--white);
  border-color: var(--techblue);
}

/* Hover: Tech-Blue darkened ~8% (#2B76D2 * 0.92 -> #276CC1). Keeps AA on white. */
.dp-btn--primary:hover,
.dp-btn--primary:focus-visible {
  background-color: #276CC1;
  border-color: #276CC1;
}

/* Secondary — indigo ghost. */
.dp-btn--secondary {
  background-color: transparent;
  color: var(--indigo);
  border-color: var(--indigo);
}

.dp-btn--secondary:hover,
.dp-btn--secondary:focus-visible {
  /* Subtle indigo tint (token-derived, low alpha). */
  background-color: rgba(61, 46, 112, .08);
  color: var(--indigo);
}

/* Text — plain link style (used for Log in). */
.dp-btn--text {
  background-color: transparent;
  border-color: transparent;
  color: var(--ink);
  font-weight: 500;
  padding-inline: var(--space-1);
}

.dp-btn--text:hover,
.dp-btn--text:focus-visible {
  color: var(--indigo);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* =========================================================================
   (f) Card
   ========================================================================= */
.dp-card {
  background-color: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: var(--space-3);
}

/* Muted surface variant. */
.dp-card--muted {
  background-color: var(--gray);
}

/* =========================================================================
   (g) Header / nav chrome
   ========================================================================= */
.dp-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background-color: var(--white);
  border-bottom: 1px solid var(--border);
  /* Progressive enhancement: translucent + blur where supported. */
  -webkit-backdrop-filter: saturate(180%) blur(8px);
  backdrop-filter: saturate(180%) blur(8px);
}

@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .dp-header {
    background-color: rgba(255, 255, 255, .85);
  }
}

.dp-nav {
  width: 100%;
}

.dp-nav__inner {
  /* Positioning context for the Solutions mega panel: its <li> goes
     position:static (below) so .dp-nav__panel--mega resolves against this
     container-width box instead of the item. Regular dropdown items keep
     their own position:relative and are unaffected. */
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  height: 72px; /* 8px rhythm */
}

/* Covers both the bundled fallback (.dp-nav__logo) and WordPress'
   the_custom_logo() output (.custom-logo-link / .custom-logo). */
.dp-nav__logo,
.dp-nav .custom-logo-link {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
}

.dp-nav__logo img,
.dp-nav .custom-logo {
  height: 40px; /* stacked dp lockup — 8px rhythm, fits the 72px nav */
  width: auto;
}

.dp-nav__menu {
  display: flex;
  align-items: center;
  /* --space-2: the 7-item bar (Home added, user-directed) no longer fits
     16px gaps at 1280 without wrapping. */
  gap: var(--space-2);
  list-style: none;
}

.dp-nav__item {
  display: inline-flex;
}

.dp-nav__link {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) 0;
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
  color: var(--ink);
  transition: color .2s ease;
}

.dp-nav__link:hover,
.dp-nav__link:focus-visible,
.dp-nav__link[aria-current="page"] {
  color: var(--techblue);
}

/* ---- Desktop dropdown groups (Platform / Solutions) --------------------
   Group = top-level link (still navigates to the hub) + adjacent caret
   <button> (owns aria-expanded) + absolutely positioned panel. The panel is
   position:absolute so opening causes ZERO layout shift, and — FLAT policy —
   it carries a 1px border only, never a shadow. */
.dp-nav__item--has-children {
  position: relative;
  align-items: center;
}

/* Caret — 44px-tall hit area; kept narrow (28px) so the 1024px bar
   (6 items + 3 CTAs) still fits without wrapping. It is a REDUNDANT
   affordance (hover on the group also opens the panel; the label link
   navigates), so the reduced width is an accepted trade-off. */
.dp-nav__caret {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 44px;
  min-height: 44px;
  margin-left: 2px;
  border-radius: var(--radius);
  color: var(--ink);
  transition: color .2s ease, background-color .2s ease;
}

.dp-nav__caret:hover,
.dp-nav__caret:focus-visible,
.dp-nav__caret[aria-expanded="true"] {
  color: var(--techblue);
}

.dp-nav__caret:hover,
.dp-nav__caret:focus-visible {
  background-color: var(--gray);
}

/* Chevron rotates 180° while its panel is open (200ms under no-preference;
   the global reduced-motion block makes it instant otherwise). */
.dp-nav__caret[aria-expanded="true"] .dp-nav__caret-icon {
  transform: rotate(180deg);
}

/* SHOW/HIDE TECHNIQUE (commented choice): the panel stays in the DOM at all
   times — [hidden] is neutralised to display:block below so display toggling
   never fights the open/close transition. Visual state is driven entirely by
   .is-open via visibility/opacity/transform: visibility:hidden keeps closed
   panels out of the tab order AND the a11y tree, pointer-events:none stops
   ghost hovers. JS keeps the hidden attribute + aria-expanded in sync as
   semantic state (and as the no-JS default). */
.dp-nav__panel[hidden] {
  display: block;
}

.dp-nav__panel {
  position: absolute;
  /* Link box is 40px tall centred in the 72px bar -> +16px lands the panel
     flush under the header's bottom border. */
  top: calc(100% + var(--space-2));
  left: 0;
  z-index: 10;
  min-width: 224px;
  padding: var(--space-1);
  background-color: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  /* FLAT policy: no shadow on nav elements. */
  visibility: hidden;
  opacity: 0;
  transform: translateY(4px);
  pointer-events: none;
}

.dp-nav__panel.is-open {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Panel fade + 4px rise, 180ms ease-out — motion only under no-preference
   (the global reduce block also force-disables transitions as a safety net).
   The transition lives on .is-open ONLY, so opening animates but closing is
   INSTANT: visibility:hidden lands immediately, which guarantees a closing
   panel can never sit in the tab order (no delayed-visibility window). */
@media (prefers-reduced-motion: no-preference) {
  .dp-nav__panel.is-open {
    transition: opacity .18s ease-out, transform .18s ease-out;
  }

  .dp-nav__caret-icon {
    transition: transform .2s ease;
  }
}

.dp-nav__subitem {
  display: block;
}

/* Sub-links — >=44px rows, ink -> techblue + gray wash on hover/focus. */
.dp-nav__sublink {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius);
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
  color: var(--ink);
  white-space: nowrap;
  transition: color .2s ease, background-color .2s ease;
}

.dp-nav__sublink:hover,
.dp-nav__sublink:focus-visible {
  color: var(--techblue);
  background-color: var(--gray);
}

/* Exact-match current sub-page (aria-current set server-side). */
.dp-nav__sublink[aria-current="page"] {
  color: var(--techblue);
  font-weight: 600;
}

/* ---- Solutions mega panel (desktop) -------------------------------------
   .dp-nav__panel--mega widens the standard panel into a 3-column grid
   aligned with the nav container instead of its own <li>: the mega item is
   position:static, so the absolutely positioned panel resolves against
   .dp-nav__inner (position:relative above). The left/right insets equal the
   container gutter (--space-3), so the panel tracks the content edges of the
   --maxw container and can NEVER overflow the viewport; it is absolute like
   the standard panels, so opening causes zero layout shift, and it inherits
   .dp-nav__panel's show/hide + fade/rise motion (open animated, close
   instant, reduce = instant) unchanged. FLAT policy: same white surface,
   1px var(--border), 8px radius, no shadow. */
.dp-nav__item--mega {
  position: static;
}

.dp-nav__panel--mega {
  /* Anchored to the 72px .dp-nav__inner: +2px lands the top edge on the same
     visual line as the standard panels (their 44px <li> anchor bottom sits
     at 58px inside the bar; 58 + 16 = 74 = 72 + 2). */
  top: calc(100% + 2px);
  left: var(--space-3);
  right: var(--space-3);
  min-width: 0;
  padding: var(--space-3); /* 24px — 8px rhythm */
}

/* Named grid wrapper — a <ul>, one <li class="dp-nav__mega-col"> per column.
   auto-fit drops 3 -> 2 columns if a viewport ever squeezes below
   3 × 200px + gaps (at 1024 the panel is ~976px wide so all three fit); the
   panel itself never scrolls horizontally. */
.dp-nav__mega-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-3) var(--space-4);
  list-style: none;
}

/* Column stack: header -> items -> footer link. The footer is pinned to the
   column bottom (margin-top:auto) so the three "view all" rows align across
   unequal item counts. */
.dp-nav__mega-col {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

/* Column header — mono 12 uppercase tracked muted; a <p>, never a link/button
   (non-interactive by design: the column footer is the hub target). */
.dp-nav__mega-header {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 18px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 0 var(--space-2); /* aligns with the sub-link text inset */
  margin-bottom: var(--space-1);
}

/* Mega items reuse .dp-nav__sublink (44px rows, ink -> techblue + gray wash);
   the columns are fluid, so let long labels wrap instead of overflowing. */
.dp-nav__panel--mega .dp-nav__sublink {
  white-space: normal;
}

/* Column footer — tertiary-link pattern (16/600 Tech Blue + arrow, underline
   on hover/focus) over a hairline top separator. */
.dp-nav__mega-more {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  min-height: 44px;
  margin-top: auto; /* pin to the column bottom */
  padding: var(--space-1) var(--space-2);
  border-top: 1px solid var(--border);
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
  color: var(--techblue);
}

.dp-nav__mega-more:hover,
.dp-nav__mega-more:focus-visible {
  color: var(--techblue);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.dp-nav__mega-more-icon {
  flex: 0 0 auto;
}

.dp-nav__actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex: 0 0 auto;
}

/* Header/drawer "Login" (Master Plan 4.1) — nav-link treatment (16/500),
   muted at rest, Tech-Blue on hover/focus. Sits after the (e) button rules
   so it overrides .dp-btn--text's ink/indigo+underline at equal specificity. */
.dp-header__login {
  color: var(--text-muted);
}

.dp-header__login:hover,
.dp-header__login:focus-visible {
  color: var(--techblue);
  text-decoration: none;
}

/* Hamburger — hidden on desktop, shown under the mobile breakpoint. */
.dp-nav__toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  border-radius: var(--radius);
  color: var(--ink);
}

.dp-nav__toggle:hover,
.dp-nav__toggle:focus-visible {
  background-color: var(--gray);
}

.dp-nav__toggle-icon {
  width: 24px;
  height: 24px;
}

/* 1024–1279: tighten gaps so the full bar (6 items, two of them with
   dropdown carets, + 3 CTAs) never wraps or overflows. Desktop >=1280 is
   untouched. Gaps drop one spacing step and the carets slim to 24px (their
   44px-tall hit area is preserved; hover on the group opens the panel too). */
@media (min-width: 1024px) and (max-width: 1279.98px) {
  .dp-nav__inner {
    gap: var(--space-1);
  }

  .dp-nav__menu {
    gap: var(--space-1);
  }

  .dp-nav__caret {
    width: 24px;
    margin-left: 0;
  }

  /* Seven items (Home added, user-directed): links drop to 15px and the
     CTA padding slims so the bar still fits 1024 without overflow. */
  .dp-nav__link {
    font-size: 15px;
  }

  .dp-nav__actions .dp-btn {
    padding-left: var(--space-2);
    padding-right: var(--space-2);
  }

  .dp-nav__actions {
    gap: var(--space-1);
  }

  .dp-nav__actions .dp-btn {
    padding-inline: var(--space-2);
  }
}

/* Below 1024px the full bar cannot fit: swap to the hamburger + drawer. */
@media (max-width: 1023.98px) {
  .dp-nav__menu,
  .dp-nav__actions {
    display: none;
  }

  .dp-nav__toggle {
    display: inline-flex;
  }
}

/* =========================================================================
   (h) Mobile drawer — off-canvas, slides in from the right
   ========================================================================= */
.dp-drawer {
  position: fixed;
  inset: 0;
  z-index: 1100;
  visibility: hidden;
  pointer-events: none;
}

.dp-drawer.is-open {
  visibility: visible;
  pointer-events: auto;
}

.dp-drawer__backdrop {
  position: absolute;
  inset: 0;
  background-color: rgba(28, 28, 40, .5); /* obsidian @ 50% */
  opacity: 0;
  transition: opacity .3s ease;
}

.dp-drawer.is-open .dp-drawer__backdrop {
  opacity: 1;
}

.dp-drawer__panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(360px, 86vw);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-3);
  background-color: var(--white);
  border-left: 1px solid var(--border);
  box-shadow: var(--shadow);
  /* Slide via transform only. */
  transform: translateX(100%);
  transition: transform .3s ease;
  overflow-y: auto;
}

.dp-drawer.is-open .dp-drawer__panel {
  transform: translateX(0);
}

.dp-drawer__close {
  align-self: flex-end;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  border-radius: var(--radius);
  color: var(--ink);
}

.dp-drawer__close:hover,
.dp-drawer__close:focus-visible {
  background-color: var(--gray);
}

.dp-drawer__menu {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  list-style: none;
}

.dp-drawer__menu .dp-nav__link {
  display: block;
  padding: var(--space-2) 0;
  font-size: 18px;
  line-height: 28px;
  border-bottom: 1px solid var(--border);
}

/* ---- Drawer accordion sections (Platform / Solutions) -------------------
   Full-row toggle styled like a drawer link; the hub link lives INSIDE the
   panel as the first sub-item ("Platform overview" / "All solutions").
   The panel uses plain [hidden] display toggling — instant-friendly under
   reduced motion; only the chevron animates (and only under no-preference). */

/* The section <li> shares .dp-nav__item (inline-flex) with plain items; it
   holds TWO children (toggle + panel), so stack them or the panel would sit
   beside the toggle. */
.dp-drawer__section {
  display: block;
}

.dp-drawer__section-toggle {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  min-height: 44px;
  padding: var(--space-2) 0;
  font-size: 18px;
  line-height: 28px;
  font-weight: 500;
  text-align: left;
  color: var(--ink);
  border-bottom: 1px solid var(--border);
  transition: color .2s ease;
}

.dp-drawer__section-toggle:hover,
.dp-drawer__section-toggle:focus-visible,
.dp-drawer__section-toggle.is-current {
  color: var(--techblue);
}

.dp-drawer__chevron {
  flex: 0 0 auto;
}

.dp-drawer__section-toggle[aria-expanded="true"] .dp-drawer__chevron {
  transform: rotate(180deg);
}

@media (prefers-reduced-motion: no-preference) {
  .dp-drawer__chevron {
    transition: transform .2s ease;
  }
}

.dp-drawer__sublist {
  list-style: none;
}

/* Sub-links — >=44px rows, indented one spacing step under the section. */
.dp-drawer__sublink {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: var(--space-1) 0 var(--space-1) var(--space-3);
  font-size: 16px;
  line-height: 24px;
  color: var(--ink);
  border-bottom: 1px solid var(--border);
  transition: color .2s ease;
}

.dp-drawer__sublink:hover,
.dp-drawer__sublink:focus-visible {
  color: var(--techblue);
}

/* Exact-match current sub-page (aria-current set server-side). */
.dp-drawer__sublink[aria-current="page"] {
  color: var(--techblue);
  font-weight: 600;
}

/* ---- Drawer mega groups (Solutions) --------------------------------------
   Inside the ONE Solutions accordion panel (the section toggle, chevron and
   [hidden] behaviour are untouched): three labeled sub-groups — a
   non-interactive mono header (<p>) + the standard indented 44px sub-links +
   a weighted Tech-Blue hub link per group ("Browse all Flows" /
   "All solutions" / "All industries"). */
.dp-drawer__group {
  display: block;
}

.dp-drawer__group-header {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 18px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-muted);
  /* Indented to the sub-link text line; extra top space separates groups. */
  padding: var(--space-2) 0 var(--space-1) var(--space-3);
}

/* Group hub link — same 44px indented row as .dp-drawer__sublink (it carries
   that class too); weighted Tech Blue so it reads as the "view all" action.
   Declared after the aria-current rule at equal specificity, so it wins. */
.dp-drawer__sublink--hub {
  color: var(--techblue);
  font-weight: 600;
}

/* Action buttons stack full-width inside the drawer. */
.dp-drawer__panel .dp-btn {
  width: 100%;
}

/* Action cluster: stack with consistent spacing, pushed to the panel bottom. */
.dp-drawer__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: auto;
}

/* Body scroll-lock while the drawer is open. main.js toggles .is-nav-open on
   <html>; CSS owns the actual overflow rule (kept out of the reduced-motion
   block so the lock always applies). */
html.is-nav-open,
html.is-nav-open body {
  overflow: hidden;
}

/* Only expose the drawer affordance while the hamburger is in use. */
@media (min-width: 1024px) {
  .dp-drawer {
    display: none;
  }
}

/* =========================================================================
   (i) Footer — light Stitch surface (white, hairline top border), responsive column grid
   ========================================================================= */
.dp-footer {
  /* Stitch light footer: white surface, 1px hairline top border, flat —
     no shadows, no dark background. Muted text is 9.34:1 on white (AA). */
  background-color: var(--white);
  border-top: 1px solid var(--border);
  color: var(--text-muted);
  padding-block: var(--space-6) var(--space-4);
}

/* Link columns. Fixed column counts per breakpoint (no auto-fit surprises);
   min-width:0 children so long labels can never force horizontal overflow.
   >=1024: 5 cols | 768-1023: 3 | 640-767: 2 | <640: 1 (source order). */
.dp-footer__grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--space-5) var(--space-4);
}

.dp-footer__col {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* Column headings — Tech Blue, SemiBold, sentence case (per the Stitch
   export; replaces the old uppercase/letter-spaced dark treatment). */
.dp-footer__heading {
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  color: var(--techblue);
}

.dp-footer__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  list-style: none;
}

/* Links — muted, Tech-Blue on hover/focus, no underline (per the export). */
.dp-footer__link {
  display: inline-block;
  font-size: 15px;
  line-height: 24px;
  color: var(--text-muted);
  transition: color .16s ease;
}

.dp-footer__link:hover,
.dp-footer__link:focus-visible {
  color: var(--techblue);
}

/* Contact block inside "Get in touch" — <address> is semantically right but
   defaults to italic; reset it. Each line stacks. */
.dp-footer__address {
  font-style: normal;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-top: var(--space-2);
  font-size: 15px;
  line-height: 24px;
}

/* Brand row — sits between the columns grid and the legal bar.
   Mark + attribution inline, left-aligned with the grid. */
.dp-footer__brandrow {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-6);
}

/* Standard full-color DocuPOW mark — the mark locks to Royal Indigo on a
   white canvas (brand rule), sized to the export's 32px footer logo. */
.dp-footer__mark {
  display: block;
  height: 32px;
  width: auto;
  flex: 0 0 auto;
}

.dp-footer__attribution {
  font-size: 14px;
  line-height: 20px;
  color: var(--text-muted);
  transition: color .16s ease;
}

/* Endorsement lockup (user-directed): parent-company mark + text as one
   link. min-height keeps the tap target >=44px; the lockup wraps as a
   single unit at narrow widths (inline-flex + nowrap-safe gap). */
.dp-footer__attribution--lockup {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: 44px;
}

/* Third-party brand rule: the POW IT UP mark renders AS-IS — never
   recolour or CSS-filter it; white/workspace-gray surfaces only. */
.dp-footer__pu-mark {
  display: block;
  height: 24px;
  width: auto;
  flex: 0 0 auto;
}

.dp-footer__attribution:hover,
.dp-footer__attribution:focus-visible {
  color: var(--techblue);
}

/* Legal bar — © left, links right; wraps naturally, never mid-phrase from a
   width constraint. Stacks (links above ©) under 640px. */
.dp-footer__legalbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-3);
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border);
}

.dp-footer__copyright {
  font-size: 14px;
  line-height: 20px;
}

.dp-footer__legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  list-style: none;
}

.dp-footer__legal .dp-footer__link {
  font-size: 14px;
  line-height: 20px;
}

/* 768-1023: three columns (wraps to a second row). */
@media (max-width: 1023.98px) {
  .dp-footer__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* 640-767: two columns; touch widths get >=44px tap targets. */
@media (max-width: 767.98px) {
  .dp-footer__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dp-footer__list .dp-footer__link,
  .dp-footer__address .dp-footer__link,
  .dp-footer__legal .dp-footer__link,
  .dp-footer__attribution {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  /* The 44px rows provide the vertical rhythm. */
  .dp-footer__list,
  .dp-footer__address {
    gap: 0;
  }
}

/* <640: single column; legal bar stacks with links ABOVE the © line. */
@media (max-width: 639.98px) {
  .dp-footer__grid {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }

  .dp-footer__legalbar {
    flex-direction: column-reverse;
    align-items: flex-start;
  }

  /* Spacing loosens slightly on the smallest screens. */
  .dp-footer__legal {
    gap: var(--space-2) var(--space-4);
  }
}

/* =========================================================================
   (j) Motion — scroll reveal + signature gradient border
   ========================================================================= */

/* Scroll-reveal base state; JS toggles .is-revealed once in view. */
[data-dp-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .6s ease, transform .6s ease;
  will-change: opacity, transform;
}

.is-revealed {
  opacity: 1;
  transform: none;
}

/* Signature gradient border — JS adds .dp-gradient-border-active to elements
   marked with data-dp-gradient-border (only when reduced-motion is not set).
   Uses a low-opacity animated conic gradient behind the element, drawn as a
   border via mask compositing so only the 1px ring is visible. Animates the
   --dp-angle custom property (cheap; no layout thrash). */
@property --dp-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

.dp-gradient-border-active {
  position: relative;
  border-radius: var(--radius);
}

.dp-gradient-border-active::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: conic-gradient(
    from var(--dp-angle),
    var(--indigo),
    var(--techblue),
    var(--indigo)
  );
  /* Show only the border ring. */
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: .35; /* subtle, ambient */
  pointer-events: none;
  animation: dp-border-spin 7s linear infinite;
}

@keyframes dp-border-spin {
  to {
    --dp-angle: 360deg;
  }
}

/* Progressive fallback for browsers without @property angle animation:
   animate background-position of a linear gradient instead. */
@supports not (background: conic-gradient(from var(--dp-angle), red, blue)) {
  .dp-gradient-border-active::before {
    background: linear-gradient(90deg, var(--indigo), var(--techblue), var(--indigo));
    background-size: 200% 100%;
    animation: dp-border-slide 7s linear infinite;
  }

  @keyframes dp-border-slide {
    to {
      background-position: 200% 0;
    }
  }
}

/* Reduced-motion safety net: kill all non-essential animation/transition and
   make revealed content fully visible. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }

  [data-dp-reveal] {
    opacity: 1;
    transform: none;
  }
}

/* =========================================================================
   (k) Accessibility utilities — skip link, sr-only, focus ring
   ========================================================================= */

/* Skip link — off-screen until focused, then visible top-left. */
.dp-skip-link {
  position: fixed;
  top: var(--space-1);
  left: var(--space-1);
  z-index: 2000;
  padding: var(--space-1) var(--space-2);
  background-color: var(--techblue);
  color: var(--white);
  border-radius: var(--radius);
  font-weight: 600;
  transform: translateY(-200%);
  transition: transform .2s ease;
}

.dp-skip-link:focus,
.dp-skip-link:focus-visible {
  transform: translateY(0);
  color: var(--white);
}

/* Screen-reader-only (standard clip pattern). */
.dp-visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Visible focus — never removed without replacement. */
:focus-visible {
  outline: 2px solid var(--techblue);
  outline-offset: 2px;
}