/*
Theme Name: The Demand Practice
Theme URI: https://thedemandpractice.com
Author: Anu Wadhwani
Description: Block theme built to The Demand Practice web brand system. Editorial, restrained, fast. No page builder, no framework.
Version: 1.2.0
Requires at least: 6.6
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: demand-practice
Tags: block-patterns, site-editor, full-site-editing, one-column, editor-style
*/

/* Colour, type, spacing and the type ramp all live in theme.json.
   This file carries only what theme.json cannot express.
   Source of truth: docs/web-brand-system.md */

:root {
  color-scheme: light;

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-pill: 999px;
  --radius-organic: var(--radius-lg) var(--radius-lg) var(--radius-lg) 48px;
  --radius-organic-lg: 28px 28px 28px 80px;

  --blob-1: 56% 44% 48% 52% / 54% 46% 54% 46%;
  --blob-2: 44% 56% 52% 48% / 46% 52% 48% 54%;
  --blob-3: 52% 48% 44% 56% / 50% 54% 46% 50%;
  --blob-4: 48% 52% 56% 44% / 52% 48% 52% 48%;

  --shadow-sm: 0 1px 2px rgba(16,31,69,0.06);
  --shadow-md: 0 4px 16px rgba(16,31,69,0.08);
  --shadow-lg: 0 12px 32px rgba(16,31,69,0.10);

  --line-dark: rgba(244,248,250,0.20);
  --visited: #5A4A9E;

  --ease: cubic-bezier(0.2, 0, 0, 1);
  --dur-fast: 120ms;
  --dur: 200ms;
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-optical-sizing: auto;
}

h1, h2, h3, h4, .wp-block-heading { text-wrap: balance; }
p { text-wrap: pretty; }
:is(h1, .dp-hero__title) { max-width: 20ch; }
h2 { max-width: 28ch; }

/* ---------- Focus. Non-negotiable. ---------- */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--wp--preset--color--brand);
  outline-offset: 2px;
  border-radius: 4px;
}
.dp-section--dark :where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline-color: var(--wp--preset--color--teal);
}

/* ---------- Links in running text ---------- */
.wp-block-post-content a:not(.wp-element-button),
.dp-prose a:not(.wp-element-button) {
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
  transition: color var(--dur-fast) var(--ease), text-decoration-thickness var(--dur-fast) var(--ease);
}
.wp-block-post-content a:not(.wp-element-button):hover,
.dp-prose a:not(.wp-element-button):hover { text-decoration-thickness: 2px; }
.wp-block-post-content a:not(.wp-element-button):visited,
.dp-prose a:not(.wp-element-button):visited { color: var(--visited); }

/* ---------- Buttons ---------- */
.wp-element-button, .wp-block-button__link {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease),
              border-color var(--dur) var(--ease), transform var(--dur-fast) var(--ease);
}
.wp-element-button:active, .wp-block-button__link:active { transform: translateY(1px); }

.wp-block-button.is-style-outline .wp-block-button__link {
  background: transparent;
  border: 2px solid var(--wp--preset--color--brand);
  color: var(--wp--preset--color--brand-ink);
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
  background: var(--wp--preset--color--teal-tint);
}
.wp-block-button.is-style-outline .wp-block-button__link:active {
  border-color: var(--wp--preset--color--brand);
  color: var(--wp--preset--color--brand-press);
}
.dp-section--dark .wp-block-button__link {
  background: var(--wp--preset--color--card);
  color: var(--wp--preset--color--ink);
}
.dp-section--dark .wp-block-button.is-style-outline .wp-block-button__link {
  background: transparent;
  border-color: var(--wp--preset--color--teal);
  color: var(--wp--preset--color--on-dark);
}

/* ---------- Eyebrow ---------- */
.dp-eyebrow {
  display: block;
  font-family: var(--wp--preset--font-family--body);
  font-size: var(--wp--preset--font-size--step--1);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--wp--preset--color--brand-ink);
  margin-bottom: 0.75rem;
}
.dp-section--dark .dp-eyebrow { color: var(--wp--preset--color--teal); }

/* ---------- Lead paragraph, and the one italic display line ---------- */
.dp-lead {
  font-size: var(--wp--preset--font-size--step-1);
  line-height: 1.6;
  max-width: 65ch;
}
.dp-statement {
  font-family: var(--wp--preset--font-family--display);
  font-style: italic;
  font-weight: 500;
  font-size: var(--wp--preset--font-size--step-3);
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--wp--preset--color--ink);
  max-width: 28ch;
}
.dp-section--dark .dp-statement { color: var(--wp--preset--color--teal); }

/* ---------- Cards ---------- */
.dp-card {
  background: var(--wp--preset--color--card);
  border: 1px solid var(--wp--preset--color--line);
  border-radius: var(--radius-organic);
  padding: var(--wp--preset--spacing--60);
}
@media (min-width: 768px) { .dp-card { padding: var(--wp--preset--spacing--70); } }
.dp-card--lg { border-radius: var(--radius-organic-lg); }
.dp-card--dark {
  background: rgba(244, 248, 250, 0.055);
  border-color: var(--line-dark);
  color: var(--wp--preset--color--on-dark-body);
}
.dp-card--dark :is(h1,h2,h3,h4,h5,h6) { color: var(--wp--preset--color--on-dark); }
.dp-card--link { transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
@media (prefers-reduced-motion: no-preference) {
  .dp-card--link:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
}

/* Card grid. Explicit tracks, because auto-fit silently becomes four columns
   on a wide container and leaves an orphan row. */
.dp-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--wp--preset--spacing--50);
}
@media (min-width: 560px) { .dp-cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .dp-cards { grid-template-columns: repeat(3, 1fr); } }

/* Four items must break 4 / 2 / 1, never 3 + 1 orphan. */
.dp-cards--4 { grid-template-columns: 1fr; }
@media (min-width: 560px)  { .dp-cards--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .dp-cards--4 { grid-template-columns: repeat(4, 1fr); } }
.dp-cards--4 .dp-card { padding: var(--wp--preset--spacing--60); }

/* ---------- Statistics ---------- */
.dp-stat__value {
  display: block;
  font-family: var(--wp--preset--font-family--display);
  font-size: var(--wp--preset--font-size--step-5);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -0.028em;
  font-variant-numeric: tabular-nums;
  color: var(--wp--preset--color--brand);
  margin-bottom: 0.5rem;
}
.dp-stat__label { display: block; line-height: 1.5; color: var(--wp--preset--color--body); }
.dp-stat__source {
  display: block;
  margin-top: 0.75rem;
  font-size: var(--wp--preset--font-size--step--1);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--wp--preset--color--muted);
}
.dp-section--dark .dp-stat__value  { color: var(--wp--preset--color--teal); }
.dp-section--dark .dp-stat__label  { color: var(--wp--preset--color--on-dark-body); }
.dp-section--dark .dp-stat__source { color: var(--wp--preset--color--on-dark-muted); }
.dp-tabular { font-variant-numeric: tabular-nums; }

/* ---------- Hairline list ---------- */
.dp-list { list-style: none; margin: 0; padding: 0; }
.dp-list > li {
  margin: 0;
  padding: var(--wp--preset--spacing--40) 0;
  border-top: 1px solid var(--wp--preset--color--line);
}
.dp-list > li:last-child { border-bottom: 1px solid var(--wp--preset--color--line); }
.dp-section--dark .dp-list > li { border-color: var(--line-dark); }

/* ---------- Section bands ---------- */
.dp-section {
  padding-block: clamp(3rem, 8vw, 8rem);
  position: relative;
  overflow: hidden;
}
.dp-section--paper { background: var(--wp--preset--color--paper); }
.dp-section--dark  { background: var(--wp--preset--color--ink); color: var(--wp--preset--color--on-dark-body); }
.dp-section--dark :is(h1,h2,h3,h4,h5,h6) { color: var(--wp--preset--color--on-dark); }
.dp-section--dark a:not(.wp-element-button) { color: var(--wp--preset--color--teal); }
.dp-section--near-black { background: var(--wp--preset--color--near-black); color: var(--wp--preset--color--on-dark-body); }

/* ---------- Decorative blobs ---------- */
.dp-blob {
  position: absolute;
  pointer-events: none;
  z-index: 0;
  opacity: 0.3;
  border-radius: var(--blob-1);
}
.dp-blob--2 { border-radius: var(--blob-2); }
.dp-blob--3 { border-radius: var(--blob-3); }
.dp-blob--4 { border-radius: var(--blob-4); }
.dp-blob--brand { background: var(--wp--preset--color--brand); }
.dp-blob--teal  { background: var(--wp--preset--color--teal); }
.dp-blob--peri  { background: var(--wp--preset--color--periwinkle); }
.dp-blob--faint { opacity: 0.14; }
.dp-blob--strong { opacity: 0.45; }
@media (max-width: 767px) { .dp-blob--sm { display: none; } }
.dp-section > .wp-block-group,
.dp-section > .dp-inner { position: relative; z-index: 1; }

/* ---------- Forms ---------- */
:where(input[type="text"], input[type="email"], input[type="tel"], input[type="url"], textarea, select) {
  font-family: var(--wp--preset--font-family--body);
  font-size: var(--wp--preset--font-size--step-0);
  min-height: 48px;
  padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
  border: 1px solid var(--wp--preset--color--line);
  border-radius: var(--radius-md);
  background: var(--wp--preset--color--card);
  color: var(--wp--preset--color--ink);
}
:where(input, textarea, select):focus {
  border: 2px solid var(--wp--preset--color--brand);
}
label {
  display: block;
  font-size: var(--wp--preset--font-size--step--1);
  font-weight: 600;
  color: var(--wp--preset--color--ink);
  margin-bottom: var(--wp--preset--spacing--20);
}

/* ---------- Tables ---------- */
.wp-block-table table { border-collapse: collapse; width: 100%; }
.wp-block-table th {
  background: var(--wp--preset--color--paper);
  font-size: var(--wp--preset--font-size--step--1);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--wp--preset--color--muted);
  text-align: left;
}
.wp-block-table :is(th, td) {
  border: 0;
  border-bottom: 1px solid var(--wp--preset--color--line);
  padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
}
.wp-block-table td:has(+ td), .dp-num { font-variant-numeric: tabular-nums; }
.dp-num { text-align: right; }

/* ---------- Motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- Logo ---------- */
/* The lockup is 1958x488, so roughly 4:1. Minimum 140px wide per the brand
   spec, with clear space of half its height on every side. */
.dp-header .wp-block-site-logo img { width: clamp(150px, 18vw, 200px); height: auto; }
.dp-footer-logo img { width: 180px; height: auto; }
.dp-logo-clearspace { padding: calc(0.5 * 1em) ; }

/* ---------- Card as a whole-card link ---------- */
a.dp-card {
  display: block;
  text-decoration: none;
  color: inherit;
}
a.dp-card :is(h2,h3,h4) { color: var(--wp--preset--color--ink); }
a.dp-card p { color: var(--wp--preset--color--body); margin-bottom: 0; }
a.dp-card h3 { margin: 0 0 0.5rem; }
.dp-card > :first-child { margin-top: 0; }
.dp-card > :last-child { margin-bottom: 0; }
.dp-cards .dp-card h3 { margin-top: 0; }

/* ---------- Fit columns ---------- */
.dp-fit {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--wp--preset--spacing--50);
}
@media (min-width: 820px) { .dp-fit { grid-template-columns: repeat(2, 1fr); } }
.dp-fit h3 {
  font-family: var(--wp--preset--font-family--body);
  font-size: var(--wp--preset--font-size--step--1);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin: 0 0 var(--wp--preset--spacing--40);
}
.dp-fit__yes { color: var(--wp--preset--color--brand-ink); }
.dp-fit__no  { color: var(--wp--preset--color--muted); }
.dp-fit .dp-list > li:first-child { border-top: 0; padding-top: 0; }

/* ---------- Portrait ---------- */
/* The source headshot is a circular crop on white, so a circle mask is the
   only shape that hides the corners. It also echoes the brand's ring mark. */
.dp-portrait { max-width: 300px; }
.dp-portrait img {
  border-radius: 50%;
  width: 100%;
  height: auto;
  display: block;
}

/* ---------- Footer columns ---------- */
/* Three columns at 46% / 1fr / 1fr wrap on a 1200px container once the
   default 280px minimum kicks in. Narrow the minimum so they hold. */
.dp-footer .wp-block-column { min-width: 180px; }
@media (max-width: 781px) { .dp-footer .wp-block-column { flex-basis: 100% !important; } }

/* ---------- Section headers ---------- */
/* A lone narrow column inside a 1200px frame reads as a mistake. Section
   headers pair the heading with something on the right so the row resolves. */
.dp-section-head { margin-bottom: var(--wp--preset--spacing--70); }
.dp-section-head h2 { margin-bottom: 0; }


/* Where there is nothing to sit beside it, the heading runs the full measure
   instead of hugging the left edge of a wide container. */
.dp-head-wide { max-width: 22ch; }
@media (min-width: 1024px) { .dp-head-wide { max-width: 1200px; } }

.dp-right { justify-content: flex-start; }
@media (min-width: 782px) { .dp-right { justify-content: flex-end; } }

/* ---------- The 95-5 figure ---------- */
.dp-figure { margin: 0; }
.dp-dots { width: 100%; max-width: 420px; height: auto; display: block; }
.dp-dot {
  fill: none;
  stroke: var(--wp--preset--color--line);
  stroke-width: 1.5;
}
.dp-dot--live {
  fill: var(--wp--preset--color--brand);
  stroke: var(--wp--preset--color--brand);
}
.dp-figure__caption {
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--30);
  margin-top: var(--wp--preset--spacing--50);
  max-width: 420px;
  font-size: var(--wp--preset--font-size--step--1);
  color: var(--wp--preset--color--muted);
}
.dp-figure__key { display: flex; gap: 0.6rem; align-items: flex-start; line-height: 1.45; }
.dp-swatch {
  flex: none;
  width: 0.85rem; height: 0.85rem;
  margin-top: 0.28rem;
  border-radius: 50%;
  border: 1.5px solid var(--wp--preset--color--line);
}
.dp-swatch--live {
  background: var(--wp--preset--color--brand);
  border-color: var(--wp--preset--color--brand);
}
.dp-section--dark .dp-dot { stroke: var(--line-dark); }
.dp-section--dark .dp-figure__caption { color: var(--wp--preset--color--on-dark-muted); }

/* ---------- Section header, balanced ---------- */
/* Inside a paired header the supporting text should fill its column rather
   than wrap into a tall ribbon, so the reading caps are lifted here. */
.dp-section-head .dp-lead,
.dp-section-head .dp-statement,
.dp-section-head p { max-width: none; }
.dp-section-head__aside p + p { margin-top: var(--wp--preset--spacing--40); }
.dp-section-head .dp-statement { font-size: var(--wp--preset--font-size--step-2); }

/* ---------- Figure fills its column ---------- */
.dp-dots { max-width: 100%; }
.dp-figure__caption { max-width: 100%; }
@media (min-width: 782px) {
  .dp-figure__caption { flex-direction: row; gap: var(--wp--preset--spacing--50); }
  .dp-figure__key { flex: 1 1 0; }
}

/* ---------- Services CTA card ---------- */
.dp-card--cta {
  background: var(--wp--preset--color--ink);
  border-color: transparent;
  color: var(--wp--preset--color--on-dark-body);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--wp--preset--spacing--40);
}
.dp-card--cta h3 { color: var(--wp--preset--color--on-dark); margin: 0; }
.dp-card--cta p { color: var(--wp--preset--color--on-dark-body); margin: 0; }
.dp-card--cta .wp-element-button {
  margin-top: auto;
  background: var(--wp--preset--color--card);
  color: var(--wp--preset--color--ink);
}
.dp-card--cta .wp-element-button:hover { background: var(--wp--preset--color--teal); }

/* ---------- Two-part layouts, as grid ---------- */
/* Flex columns with percentage bases plus a gap are fragile: the percentages
   and the gap compete for the same width and one side collapses. These use
   grid, where the gap is taken out of the track sizing for you. */

.dp-section-head {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--wp--preset--spacing--50);
  margin-bottom: var(--wp--preset--spacing--70);
}
.dp-section-head__main > :last-child,
.dp-section-head__aside > :last-child { margin-bottom: 0; }
@media (min-width: 900px) {
  .dp-section-head {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: var(--wp--preset--spacing--80);
    align-items: end;
  }
  .dp-section-head--center { align-items: center; }
}

.dp-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--wp--preset--spacing--70);
}
.dp-split > * > :last-child { margin-bottom: 0; }
@media (min-width: 900px) {
  .dp-split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--wp--preset--spacing--80);
    align-items: start;
  }
  .dp-split--portrait { grid-template-columns: 260px minmax(0, 1fr); align-items: start; }
}

/* The figure takes the whole of its half */
.dp-split__aside .dp-figure,
.dp-split__aside .dp-dots { width: 100%; }

/* Body copy is capped at 65ch by the brand spec, so the portrait split is
   capped to match. Otherwise the text stops and leaves a tail of nothing. */
@media (min-width: 900px) {
  .dp-split--portrait { max-width: 950px; }
}

/* ---------- Section head: eyebrow sits above, halves share a top line ---------- */
.dp-section > .dp-eyebrow { margin-bottom: var(--wp--preset--spacing--30); }
@media (min-width: 900px) {
  .dp-section-head { align-items: start; }
  .dp-section-head--center { align-items: center; }
}

/* Equal-height fit columns, and no rule hanging off the last item */
.dp-fit .dp-card { display: flex; flex-direction: column; }
.dp-fit .dp-list > li:last-child { border-bottom: 0; padding-bottom: 0; }

/* ---------- Tinted panel ---------- */
.dp-panel-tint {
  background: var(--wp--preset--color--paper);
  border-radius: var(--radius-organic-lg);
  padding: clamp(1.75rem, 4vw, 3.5rem);
}
.dp-section--paper .dp-panel-tint { background: var(--wp--preset--color--card); }

/* ---------- About ---------- */
.dp-about { display: grid; grid-template-columns: 1fr; gap: var(--wp--preset--spacing--60); }
@media (min-width: 820px) {
  .dp-about { grid-template-columns: 240px minmax(0, 1fr); gap: var(--wp--preset--spacing--80); align-items: start; }
}
.dp-about__portrait { position: relative; width: 200px; }
@media (min-width: 820px) { .dp-about__portrait { width: 100%; } }
.dp-about__portrait img {
  position: relative; z-index: 1;
  width: 100%; height: auto; display: block;
  border-radius: 50%;
}
/* One soft ring behind the portrait, offset, so it is composed rather than pasted on */
.dp-about__blob {
  position: absolute;
  inset: -14px -14px auto auto;
  width: 100%; aspect-ratio: 1;
  border-radius: 50%;
  border: 2px solid var(--wp--preset--color--brand);
  opacity: 0.35;
  pointer-events: none;
}
.dp-about__body > :first-child { margin-top: 0; }
.dp-about__body h2 { margin-bottom: var(--wp--preset--spacing--40); }
.dp-about__body p { max-width: 62ch; }
.dp-about__more { margin-bottom: 0; }

/* Credentials rail under the panel */
.dp-creds {
  list-style: none; margin: var(--wp--preset--spacing--70) 0 0; padding: 0;
  display: grid; grid-template-columns: 1fr; gap: var(--wp--preset--spacing--50);
  border-top: 1px solid var(--wp--preset--color--line);
  padding-top: var(--wp--preset--spacing--60);
}
@media (min-width: 720px) { .dp-creds { grid-template-columns: repeat(3, 1fr); gap: var(--wp--preset--spacing--60); } }
.dp-creds li { margin: 0; }
.dp-creds strong {
  display: block; color: var(--wp--preset--color--ink);
  font-size: var(--wp--preset--font-size--step-0); font-weight: 600; margin-bottom: 0.2rem;
}
.dp-creds span { color: var(--wp--preset--color--muted); font-size: var(--wp--preset--font-size--step--1); line-height: 1.45; }

/* ---------- Writing strip ---------- */
.dp-writing {
  display: grid; grid-template-columns: 1fr; gap: var(--wp--preset--spacing--50);
  align-items: center;
  background: var(--wp--preset--color--card);
  border-radius: var(--radius-organic-lg);
  padding: clamp(1.75rem, 4vw, 3rem);
}
@media (min-width: 900px) {
  .dp-writing { grid-template-columns: 84px minmax(0, 1fr) auto; gap: var(--wp--preset--spacing--70); }
}
.dp-writing__mark { display: none; color: var(--wp--preset--color--brand); }
@media (min-width: 900px) { .dp-writing__mark { display: block; } }
.dp-writing__mark svg { width: 84px; height: 84px; display: block; }
.dp-writing__body > :first-child { margin-top: 0; }
.dp-writing__body h2 {
  font-size: var(--wp--preset--font-size--step-3);
  margin-bottom: var(--wp--preset--spacing--30);
  max-width: 24ch;
}
.dp-writing__body p { margin-bottom: 0; color: var(--wp--preset--color--muted); max-width: 52ch; }
.dp-writing__action .wp-element-button { white-space: nowrap; }

/* ---------- Two-up card grid, for longer card copy ---------- */
.dp-cards--2 { grid-template-columns: 1fr; }
@media (min-width: 820px) { .dp-cards--2 { grid-template-columns: repeat(2, 1fr); } }
.dp-cards--2 .dp-card h3 { margin-bottom: var(--wp--preset--spacing--30); }
.dp-cards--2 .dp-card p:last-child { margin-bottom: 0; }

/* Card link affordance */
.dp-card__more {
  display: inline-block;
  margin-top: var(--wp--preset--spacing--40);
  font-size: var(--wp--preset--font-size--step--1);
  font-weight: 600;
  color: var(--wp--preset--color--brand-ink);
}
a.dp-card:hover .dp-card__more { text-decoration: underline; text-underline-offset: 0.18em; }
a.dp-card h2 { font-size: var(--wp--preset--font-size--step-3); margin: 0 0 var(--wp--preset--spacing--30); color: var(--wp--preset--color--ink); }
.dp-card--cta h2 { font-size: var(--wp--preset--font-size--step-3); margin: 0; color: var(--wp--preset--color--on-dark); }

/* ---------- Numbered sequence ---------- */
/* Numbered because the order genuinely matters here, not for decoration. */
.dp-steps { list-style: none; margin: 0; padding: 0; }
.dp-steps > li {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--wp--preset--spacing--30);
  padding: var(--wp--preset--spacing--60) 0;
  border-top: 1px solid var(--wp--preset--color--line);
  margin: 0;
}
.dp-steps > li:last-child { border-bottom: 1px solid var(--wp--preset--color--line); }
@media (min-width: 820px) {
  .dp-steps > li { grid-template-columns: 260px minmax(0, 1fr); gap: var(--wp--preset--spacing--80); align-items: start; }
}
.dp-steps__label { display: flex; flex-direction: column; gap: 0.15rem; }
.dp-steps__num {
  font-family: var(--wp--preset--font-family--display);
  font-size: var(--wp--preset--font-size--step-2);
  font-weight: 500;
  color: var(--wp--preset--color--brand);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.dp-steps__name {
  font-family: var(--wp--preset--font-family--display);
  font-size: var(--wp--preset--font-size--step-3);
  color: var(--wp--preset--color--ink);
  line-height: 1.2;
}
.dp-steps__time {
  font-size: var(--wp--preset--font-size--step--1);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--wp--preset--color--muted);
  margin-top: 0.35rem;
}
.dp-steps > li p { margin: 0; max-width: 62ch; }
.dp-steps__close { margin-top: var(--wp--preset--spacing--70); max-width: 46ch; }

/* ---------- Closer panel ---------- */
.dp-closer {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--wp--preset--spacing--50);
  align-items: center;
  background: var(--wp--preset--color--card);
  border-radius: var(--radius-organic-lg);
  padding: clamp(1.75rem, 4vw, 3.5rem);
}
@media (min-width: 900px) { .dp-closer { grid-template-columns: minmax(0, 1fr) auto; gap: var(--wp--preset--spacing--80); } }
.dp-closer h2 { font-size: var(--wp--preset--font-size--step-3); margin-bottom: var(--wp--preset--spacing--30); max-width: 34ch; }
.dp-closer p { margin-bottom: 0; color: var(--wp--preset--color--body); max-width: 62ch; }
.dp-closer__action .wp-element-button { white-space: nowrap; }

.dp-creds--3 { margin-top: var(--wp--preset--spacing--60); }

/* ---------- Page shell ---------- */
/* The theme owns its own gutters and centring rather than relying on the
   editor's root padding and alignfull breakout, so what renders on the site
   is identical to what renders in the local preview. */
.dp-section {
  padding-inline: clamp(1.25rem, 4vw, 3rem);
}
.dp-section > *:not(.dp-blob) {
  margin-inline: auto;
}
:where(.dp-section > *) {
  max-width: 1200px;
}
.dp-header,
.dp-footer {
  padding-inline: clamp(1.25rem, 4vw, 3rem);
}
.dp-header > *,
.dp-footer > * {
  max-width: 1200px;
  margin-inline: auto;
}
/* Anything a page adds outside a section still gets a sane measure */
.wp-block-post-content > :not([class*="dp-section"]):not(.alignfull) {
  max-width: 760px;
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 3rem);
}

/* ---------- Spec list beside a heading ---------- */
/* On the service pages the scope list sits in the right half of a paired
   header. The first item shares the heading's top line, and no rule hangs
   off the last one. */
.dp-section-head__aside .dp-list > li:first-child { border-top: 0; padding-top: 0; }
.dp-section-head__aside .dp-list > li:last-child { border-bottom: 0; padding-bottom: 0; }

/* ---------- Eyebrow as a direct child of a section ---------- */
/* Holds the eyebrow on the same left edge as the grid beneath it, whatever
   paragraph measure applies elsewhere. */
.dp-section > .dp-eyebrow { max-width: 1200px; }

/* Three items go straight from one column to three, so there is never a
   two-plus-one orphan at tablet widths. */
.dp-cards--3 { grid-template-columns: 1fr; }
@media (min-width: 900px) { .dp-cards--3 { grid-template-columns: repeat(3, 1fr); } }

/* ---------- Composed pages, whatever the page template ---------- */
/* A page built from dp-section patterns runs edge to edge. The default page
   template constrains post content to the 760px content size, which squeezed
   every section to 760px and clipped the card grids. These rules hold the
   composed layout under either template, and remove the block gap WordPress
   adds between the header, each section and the footer. */
.wp-site-blocks > * + * { margin-block-start: 0; }
main:has(> .wp-block-post-content > .dp-section) {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
main:has(> .wp-block-post-content > .dp-section) > .wp-block-post-title { display: none; }
.wp-block-post-content:has(> .dp-section) {
  max-width: none !important;
  margin: 0 !important;
  padding-inline: 0;
}
.wp-block-post-content > .dp-section { margin-block: 0; }
.wp-block-post-content > p:empty { display: none; }

/* ---------- Component margins ---------- */
/* Raw HTML inside an HTML block keeps browser default margins, which pushed
   headings below the text beside them. Components own their edges. */
.dp-section > .dp-eyebrow { margin-top: 0; }
.dp-section-head > .dp-section-head__main,
.dp-section-head > .dp-section-head__aside { margin-block: 0; }
.dp-section-head__main > :first-child,
.dp-section-head__aside > :first-child,
.dp-closer__body > :first-child,
.dp-panel-tint > :first-child { margin-top: 0; }
.dp-closer__body > :last-child { margin-bottom: 0; }

/* ---------- Blobs beside a paired header ---------- */
/* The right half of a paired header carries text, so a blob there is pulled
   up into the corner where no text can reach, whatever the inline style says. */
.dp-section:has(> .dp-section-head) > .dp-blob {
  width: 22rem !important;
  height: 22rem !important;
  top: -15rem !important;
  right: -14rem !important;
  left: auto !important;
  bottom: auto !important;
}

/* ---------- Narrow children of a section sit on its left edge ---------- */
/* Anything with its own reading cap (an italic statement, a lead, a capped
   heading) was being centred by the constrained layout's auto margins. The
   left margin here matches where a full 1200px child starts. */
.dp-section > :is(p, h1, h2, h3, .dp-statement, .dp-lead, .dp-head-wide) {
  margin-left: max(0px, calc((100% - 1200px) / 2)) !important;
  margin-right: auto !important;
}

/* ---------- Blobs never reach text at narrower widths ---------- */
/* Paired headers stack on phones, so their blob would sit on the eyebrow.
   A hero without a paired header runs its headline wide below 1280px. */
@media (max-width: 767px) {
  .dp-section:has(> .dp-section-head) > .dp-blob { display: none; }
}
@media (max-width: 1279px) {
  .dp-section:has(h1):not(:has(> .dp-section-head)) > .dp-blob { display: none; }
}