/* ============================================================
   WILDMAN - Blocks
   Block style variations, and the prose rules the converted
   Divi posts render through.
   ============================================================ */

.wp-block-group.is-style-wm-card,
.wp-block-column.is-style-wm-card {
  background: var(--wm-surface-card);
  border: 1px solid var(--wm-rule);
  border-radius: var(--wm-radius-card);
  padding: var(--wm-space-lg);
  transition: border-color var(--wm-transition), transform var(--wm-transition-spring);
}

.wp-block-group.is-style-wm-glow,
.wp-block-column.is-style-wm-glow {
  position: relative;
  overflow: hidden;
  background: var(--wm-surface-card);
  border: 1px solid var(--wm-rule);
  border-radius: var(--wm-radius-card);
  padding: var(--wm-space-lg);
  transition: border-color var(--wm-transition), transform var(--wm-transition-spring);
}
.wp-block-group.is-style-wm-glow::before,
.wp-block-column.is-style-wm-glow::before {
  content: '';
  position: absolute;
  top: var(--glow-y, 50%);
  left: var(--glow-x, 50%);
  width: 300px;
  height: 300px;
  background: radial-gradient(circle,
    rgba(12, 86, 191, 0.40) 0%,
    rgba(12, 86, 191, 0.10) 40%,
    transparent 70%);
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity var(--wm-transition);
  pointer-events: none;
  z-index: 1;
}
.wp-block-group.is-style-wm-glow:hover::before,
.wp-block-column.is-style-wm-glow:hover::before { opacity: 1; }
.wp-block-group.is-style-wm-glow:hover,
.wp-block-column.is-style-wm-glow:hover {
  border-color: var(--wm-border-hover);
  transform: translateY(-4px);
}
.wp-block-group.is-style-wm-glow > *,
.wp-block-column.is-style-wm-glow > * { position: relative; z-index: 2; }

.wp-block-group.is-style-wm-frosted {
  background: rgba(10, 22, 40, 0.6);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: var(--wm-radius-card);
  padding: var(--wm-space-lg);
}

.wp-block-heading.is-style-wm-gradient {
  background-image: var(--wm-gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.wp-block-heading.is-style-wm-eyebrow {
  font-family: var(--wm-font-heading);
  font-size: var(--wm-text-xs);
  font-weight: var(--wm-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--wm-blue-bright);
  line-height: 1.4;
}

.wp-block-button.is-style-wm-inverse .wp-block-button__link {
  background: #fff;
  color: var(--wm-blue);
}
.wp-block-button.is-style-wm-inverse .wp-block-button__link:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.22);
}

/* Check list - the "what's included" pattern throughout the design. */
.wp-block-list.is-style-wm-checks {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.wp-block-list.is-style-wm-checks li {
  position: relative;
  padding-left: 32px;
  font-family: var(--wm-font-body);
  color: var(--wm-fg-soft);
  line-height: 1.55;
}
.wp-block-list.is-style-wm-checks li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--wm-gradient-blue);
}
.wp-block-list.is-style-wm-checks li::after {
  content: '';
  position: absolute;
  left: 5px;
  top: 8px;
  width: 10px;
  height: 5px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(-45deg);
}

/* ============================================================
   Prose - post and page body content, including all 135 posts
   converted out of Divi (paragraphs, headings, lists, images,
   galleries).
   ============================================================ */

.wm-prose {
  font-family: var(--wm-font-body);
  font-size: var(--wm-text-md);
  line-height: 1.72;
  color: var(--wm-fg-soft);
}
.wm-prose > * + * { margin-top: 1.35em; }

.wm-prose h2 {
  font-family: var(--wm-font-heading);
  font-size: clamp(26px, 3vw, 38px);
  font-weight: var(--wm-weight-bold);
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--wm-fg);
  margin-top: 1.9em;
}
.wm-prose h3 {
  font-family: var(--wm-font-heading);
  font-size: clamp(21px, 2.2vw, 27px);
  font-weight: var(--wm-weight-semibold);
  line-height: 1.3;
  color: var(--wm-fg);
  margin-top: 1.7em;
}
.wm-prose h4 {
  font-family: var(--wm-font-heading);
  font-size: var(--wm-text-lg);
  font-weight: var(--wm-weight-semibold);
  color: var(--wm-fg);
  margin-top: 1.5em;
}
.wm-prose h2:first-child, .wm-prose h3:first-child { margin-top: 0; }

.wm-prose a {
  color: var(--wm-blue-bright);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(90, 155, 255, 0.4);
}
.wm-prose a:hover { text-decoration-color: currentColor; }

.wm-prose strong { color: var(--wm-fg); font-weight: var(--wm-weight-bold); }

.wm-prose ul, .wm-prose ol { padding-left: 1.3em; }
.wm-prose ul { list-style: disc; }
.wm-prose ol { list-style: decimal; }
.wm-prose li + li { margin-top: 0.55em; }
.wm-prose li::marker { color: var(--wm-blue-bright); }

.wm-prose blockquote {
  border-left: 3px solid var(--wm-blue);
  padding: 4px 0 4px 24px;
  margin-block: 1.8em;
  font-size: var(--wm-text-lg);
  line-height: 1.55;
  color: var(--wm-fg);
}
.wm-prose blockquote cite {
  display: block;
  margin-top: 12px;
  font-size: var(--wm-text-sm);
  font-style: normal;
  color: var(--wm-fg-muted);
}

.wm-prose img, .wm-prose .wp-block-image img { border-radius: var(--wm-radius-card); }
.wm-prose figure { margin-block: 1.8em; }
.wm-prose figcaption {
  margin-top: 10px;
  font-size: var(--wm-text-sm);
  color: var(--wm-fg-muted);
  text-align: center;
}

.wm-prose hr, .wm-prose .wp-block-separator {
  border: 0;
  height: 1px;
  background: var(--wm-rule);
  margin-block: 2.4em;
}

.wm-prose code {
  font-family: var(--wm-font-mono);
  font-size: 0.9em;
  background: rgba(255, 255, 255, 0.06);
  padding: 0.15em 0.4em;
  border-radius: 5px;
  color: var(--wm-blue-bright);
}
.wm-prose pre {
  background: var(--wm-bg-card-deep);
  border: 1px solid var(--wm-rule);
  border-radius: var(--wm-radius-card);
  padding: var(--wm-space-md);
  overflow-x: auto;
}
.wm-prose pre code { background: none; padding: 0; color: inherit; }

.wm-prose table { width: 100%; border-collapse: collapse; font-size: var(--wm-text-sm); }
.wm-prose th, .wm-prose td { border: 1px solid var(--wm-rule); padding: 12px 14px; text-align: left; }
.wm-prose th {
  font-family: var(--wm-font-heading);
  font-weight: var(--wm-weight-semibold);
  color: var(--wm-fg);
  background: rgba(255, 255, 255, 0.03);
}
/* Tables scroll inside their own box, never the page. */
.wm-prose .wp-block-table { overflow-x: auto; }

.wm-prose .wp-block-gallery { margin-block: 1.8em; }

/* FAQ accordion */

.wm-faq { display: flex; flex-direction: column; gap: 10px; }
.wm-faq__item {
  border: 1px solid var(--wm-rule);
  border-radius: var(--wm-radius-card);
  background: var(--wm-surface-card);
  overflow: hidden;
  transition: border-color var(--wm-transition);
}
.wm-faq__item[open] { border-color: var(--wm-border-hover); }
.wm-faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 20px var(--wm-space-md);
  font-family: var(--wm-font-heading);
  font-size: var(--wm-text-md);
  font-weight: var(--wm-weight-semibold);
  color: var(--wm-fg);
  line-height: 1.4;
}
.wm-faq__q:hover { color: var(--wm-blue-bright); }
.wm-faq__icon { flex-shrink: 0; transition: transform var(--wm-transition-spring); color: var(--wm-blue-bright); }
.wm-faq__item[open] .wm-faq__icon { transform: rotate(45deg); }
.wm-faq__a {
  padding: 0 var(--wm-space-md) 22px;
  font-family: var(--wm-font-body);
  font-size: var(--wm-text-base);
  line-height: 1.7;
  color: var(--wm-fg-soft);
}
.wm-faq__a > * + * { margin-top: 1em; }

/* Alignment */

.wm-prose .alignwide  { max-width: 1100px; margin-inline: auto; }
.wm-prose .alignfull  { max-width: none; }
.wm-prose .alignleft  { float: left; margin: 0 1.6em 1.2em 0; max-width: 50%; }
.wm-prose .alignright { float: right; margin: 0 0 1.2em 1.6em; max-width: 50%; }
.wm-prose .aligncenter { margin-inline: auto; text-align: center; }

@media (max-width: 640px) {
  .wm-prose .alignleft, .wm-prose .alignright { float: none; margin-inline: 0; max-width: 100%; }
}
/* ============================================================
   Hero (wildman/hero)
   ============================================================ */

.wm-hero {
  position: relative;
  overflow: hidden;
  background: var(--wm-bg);
  border-bottom: 1px solid var(--wm-border);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(60px, 9vw, 124px) var(--wm-gutter) clamp(52px, 7vw, 96px);
}
.wm-hero--tall { min-height: min(880px, 90svh); }

.wm-hero__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
}

/* Two overlays reproduce the prototype's vignette: a radial that darkens
   the edges, and a linear that keeps the left side readable behind copy. */
.wm-hero__vignette,
.wm-hero__scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}
.wm-hero__vignette {
  background: radial-gradient(ellipse 120% 90% at 78% 45%,
    transparent 0%, rgba(3, 5, 8, 0.55) 55%, #030508 100%);
}
.wm-hero__scrim {
  background: linear-gradient(100deg,
    #030508 8%, rgba(3, 5, 8, 0.92) 34%, rgba(3, 5, 8, 0.25) 62%, rgba(3, 5, 8, 0.55) 100%);
}

.wm-hero__inner {
  position: relative;
  z-index: 2;
  max-width: var(--wm-maxw);
  width: 100%;
  margin-inline: auto;
}
.wm-hero__content { max-width: 860px; }
.wm-hero__eyebrow { margin-bottom: 16px; }

.wm-hero__content h1 {
  font-family: var(--wm-font-heading);
  font-weight: var(--wm-weight-extrabold);
  font-size: clamp(33px, min(7.2vw, 10.5vh), 104px);
  line-height: 0.94;
  letter-spacing: -0.045em;
  color: var(--wm-text);
  animation: wmUp .8s .12s var(--wm-ease-spring) both;
}
.wm-hero__content > p:not(.wm-label) {
  font-family: var(--wm-font-body);
  font-size: clamp(17px, 1.5vw, 21px);
  line-height: 1.62;
  color: var(--wm-text-secondary);
  max-width: 600px;
  margin-top: clamp(16px, 2.2vh, 32px);
  animation: wmUp .8s .48s var(--wm-ease-spring) both;
}
.wm-hero__content .wp-block-buttons {
  margin-top: clamp(22px, 3vh, 40px);
  animation: wmUp .8s .6s var(--wm-ease-spring) both;
}

/* Same row, as the front-page template writes it. */
.wm-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: clamp(22px, 3vh, 40px);
  animation: wmUp .8s .6s var(--wm-ease-spring) both;
}

/* Standard height heroes sit on inner pages and lead with a gradient wash
   rather than the canvas. */
.wm-hero:not(.wm-hero--tall) {
  background: linear-gradient(180deg, rgba(12, 86, 191, 0.11), transparent 72%), var(--wm-bg);
}

@media (prefers-reduced-motion: reduce) {
  .wm-hero__content h1,
  .wm-hero__content > p,
  .wm-hero__content .wp-block-buttons,
  .wm-hero__actions,
  .wm-hero__proof { animation: none; }
}

/* Editor stand-in - a static wash instead of the live canvas. */
.wm-hero.is-editor {
  background: radial-gradient(ellipse 100% 80% at 75% 40%, rgba(12, 86, 191, 0.28), transparent 60%), var(--wm-bg);
  min-height: 0;
  padding-block: clamp(40px, 5vw, 72px);
}

/* FAQ block editor preview */
.wm-faq-editor {
  border: 1px dashed rgba(90, 155, 255, 0.35);
  border-radius: var(--wm-radius-card);
  padding: var(--wm-space-md);
}
.wm-faq-editor__label {
  font-family: var(--wm-font-heading);
  font-size: var(--wm-text-xs);
  font-weight: var(--wm-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--wm-blue-bright);
  margin-bottom: 12px;
}
.wm-faq-editor__list { margin: 0; padding-left: 1.1em; }
.wm-faq-editor__list li { margin-bottom: 6px; }
/* ============================================================
   Section bands used by the patterns
   ============================================================ */

/* Blue-washed dark band - the closing CTA on most pages. */
.wm-cta-dark {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(12, 86, 191, 0.16), rgba(3, 5, 8, 0.4) 62%);
}
.wm-cta-dark .wm-h2 { font-weight: var(--wm-weight-extrabold); letter-spacing: -0.04em; }
.wm-cta-dark .wm-lead { margin-top: 18px; }
.wm-cta-dark .wp-block-buttons { margin-top: 28px; }

/* Solid brand-blue band - risk reversal and mid-page CTAs.
   Everything inside is on blue, so the theme vars flip to white ink. */
.wm-band-blue {
  position: relative;
  overflow: hidden;
  background: var(--wm-gradient-blue);
  border-bottom: 0;
  --wm-fg: #fff;
  --wm-fg-soft: rgba(255, 255, 255, 0.86);
  --wm-fg-muted: rgba(255, 255, 255, 0.7);
  --wm-rule: rgba(255, 255, 255, 0.18);
  color: #fff;
}
.wm-band-blue h2,
.wm-band-blue h3 { color: #fff; }
.wm-band-blue p { color: rgba(255, 255, 255, 0.86); }
.wm-band-blue .wm-h2 {
  font-weight: var(--wm-weight-extrabold);
  letter-spacing: -0.035em;
  margin-bottom: clamp(28px, 4vw, 48px);
}
.wm-band-blue .wp-block-button__link {
  background: #fff;
  color: var(--wm-blue);
}
.wm-band-blue a { color: #fff; text-decoration: underline; }

/* Pattern grids: core/columns stacks on narrow screens by default, but the
   design wants a wrapping auto-fit grid rather than equal rigid columns. */
.wp-block-columns.wm-grid {
  display: grid;
  gap: clamp(20px, 3vw, 34px);
  align-items: stretch;
}
.wp-block-columns.wm-grid > .wp-block-column { flex-basis: auto !important; margin: 0; }
.wp-block-columns.wm-grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }
.wp-block-columns.wm-grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }
.wp-block-columns.wm-grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); }

/* The proof bar is a grid of ruled cells, not cards. */
.wp-block-columns.wm-proof {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
}
.wp-block-columns.wm-proof > .wp-block-column {
  flex-basis: auto !important;
  margin: 0;
  padding: 26px 24px 30px;
  border-top: 1px solid var(--wm-rule);
}
.wp-block-columns.wm-proof > .wp-block-column:first-child { padding-left: 0; }
.wp-block-columns.wm-proof > .wp-block-column:last-child { padding-right: 0; }

/* Section heading rhythm inside patterns. */
.wm-section .is-style-wm-eyebrow + .wm-h2 { margin-top: 16px; }
.wm-section .wm-h2 + .wm-lead { margin-top: 18px; max-width: 62ch; }
.wm-section .wm-lead + .wp-block-columns { margin-top: clamp(36px, 5vw, 64px); }
.wm-section .wm-h2 + .wp-block-columns { margin-top: clamp(36px, 5vw, 64px); }
/* ============================================================
   Homepage / page-content helpers
   ============================================================ */

/* Numbered pillar cards (01-04). */
.wm-steps .wm-step__num {
  font-family: var(--wm-font-heading);
  font-size: var(--wm-text-sm);
  font-weight: var(--wm-weight-bold);
  letter-spacing: 0.14em;
  color: var(--wm-blue-bright);
  margin-bottom: 10px;
}

/* Card footer link. */
.wm-card__link {
  margin-top: 16px;
  font-family: var(--wm-font-heading);
  font-size: var(--wm-text-sm);
  font-weight: var(--wm-weight-semibold);
}
.wm-card__link a,
.wm-arrow-link a { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }
.wm-card__link a::after,
.wm-arrow-link a::after {
  content: '';
  width: 14px;
  height: 14px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform var(--wm-transition);
}
.wm-card__link a:hover::after,
.wm-arrow-link a:hover::after { transform: translateX(3px); }

/* Review quote cards. */
.wm-quote__text {
  font-family: var(--wm-font-body);
  font-size: var(--wm-text-md);
  line-height: 1.6;
  color: var(--wm-fg);
  margin-block: 12px 18px;
}
.wm-quote__name {
  font-family: var(--wm-font-heading);
  font-weight: var(--wm-weight-semibold);
  color: var(--wm-fg);
}
.wm-quote__meta {
  font-size: var(--wm-text-sm);
  color: var(--wm-fg-muted);
}

.wm-featured-case { margin-top: clamp(24px, 3vw, 34px); }

/* Unfilled content carried over from the design, marked so it is obvious
   at a glance which blocks still need real copy or imagery. */
.wm-placeholder-tag {
  display: inline-block;
  font-family: var(--wm-font-heading);
  font-size: 11px;
  font-weight: var(--wm-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--wm-blue-bright);
  border: 1px dashed rgba(90, 155, 255, 0.45);
  border-radius: var(--wm-radius-pill);
  padding: 3px 12px;
  margin-bottom: 4px;
}
.wm-theme-light .wm-placeholder-tag {
  color: var(--wm-blue);
  border-color: rgba(12, 86, 191, 0.35);
}

/* Buttons block spacing inside sections. */
.wm-section .wp-block-buttons { margin-top: clamp(26px, 3vw, 38px); }
.wm-section .wp-block-columns + .wp-block-buttons { margin-top: clamp(30px, 4vw, 46px); }

/* Core outline button variation mapped onto the design's outline style. */
.wp-block-button.is-style-outline .wp-block-button__link {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--wm-rule);
  color: var(--wm-fg);
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
  border-color: var(--wm-border-hover);
  background: rgba(12, 86, 191, 0.10);
}
.wm-theme-light .wp-block-button.is-style-outline .wp-block-button__link {
  background: transparent;
  border-color: var(--wm-border-light);
  color: var(--wm-text-dark);
}

/* Headings that are links inside cards keep the card's ink colour. */
.wm-card__title a { color: inherit; }
.wm-card__title a:hover { color: var(--wm-blue-bright); }

/* Check list on light bands. */
.wm-theme-light .wp-block-list.is-style-wm-checks li { color: var(--wm-text-dark-secondary); }

/* Hero proof bar sits under the buttons with breathing room. */
.wm-hero .wm-proof { margin-top: clamp(28px, 4vh, 64px); }
/* The proof bar is its own band below the hero copy, outside
   .wm-hero__inner, so it repeats that container's max-width and stacking
   context. Without the z-index it paints beneath the vignette and scrim,
   which is darkest on the left - hiding the first cell completely. */
.wm-hero__proof {
  position: relative;
  z-index: 2;
  max-width: var(--wm-maxw);
  width: 100%;
  margin: clamp(28px, 4vh, 64px) auto 0;
  animation: wmUp .8s .72s var(--wm-ease-spring) both;
}
/* The gap belongs to the wrapper here, so the inner grid does not add it again. */
.wm-hero__proof > .wm-proof { margin-top: 0; }
/* ============================================================
   Design sections - values taken from the prototype
   ============================================================ */

/* Two-column split: copy left, feature right. The design's core layout. */
.wm-split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: clamp(30px, 5vw, 80px);
  align-items: center;
}
.wm-split--end { align-items: end; }

/* Header row: heading cluster left, arrow link right. */
.wm-rowhead {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: clamp(24px, 4vw, 64px);
  align-items: end;
}
.wm-rowhead__link { justify-self: start; }
@media (min-width: 900px) {
  .wm-rowhead__link { justify-self: end; }
}

/* Pill row - "Captures every lead" etc. */
.wm-pills { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.wm-pill {
  font-family: var(--wm-font-heading);
  font-size: 12px;
  font-weight: var(--wm-weight-semibold);
  letter-spacing: 0.04em;
  padding: 8px 14px;
  border-radius: var(--wm-radius-pill);
  border: 1px solid var(--wm-rule);
  color: var(--wm-fg-soft);
}

/* Text link with trailing arrow. */
.wm-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--wm-font-heading);
  font-size: 15px;
  font-weight: var(--wm-weight-semibold);
  color: var(--wm-fg);
}
.wm-arrow svg { transition: transform var(--wm-transition); }
.wm-arrow:hover svg { transform: translateX(3px); }
.wm-theme-light .wm-arrow { color: var(--wm-text-dark); }

/* ---- Pillar grid card ---- */
.wm-pillars {
  position: relative;
  overflow: hidden;
  display: block;
  background: var(--wm-gradient-card-blue);
  border: 1px solid var(--wm-border-blue);
  border-radius: var(--wm-radius-lg);
  box-shadow: var(--wm-shadow-deep);
  padding: clamp(28px, 3vw, 44px);
  min-height: 280px;
  color: inherit;
}
.wm-pillars__orb {
  position: absolute;
  width: 320px;
  height: 320px;
  right: -90px;
  top: -110px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(12, 86, 191, 0.35), transparent 70%);
  pointer-events: none;
}
.wm-pillars__grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  z-index: 2;
}
.wm-pillars__cell {
  border: 1px solid var(--wm-border);
  border-radius: var(--wm-radius-card);
  background: rgba(3, 5, 8, 0.5);
  padding: 18px;
  display: block;
}
.wm-pillars__num {
  display: block;
  font-family: var(--wm-font-heading);
  font-size: 12px;
  font-weight: var(--wm-weight-bold);
  letter-spacing: 0.14em;
  color: var(--wm-blue-bright);
}
.wm-pillars__label {
  display: block;
  margin-top: 8px;
  font-family: var(--wm-font-heading);
  font-size: var(--wm-text-base);
  font-weight: var(--wm-weight-semibold);
  color: var(--wm-text);
}

/* ---- Icon card ---- */
.wm-icards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(238px, 100%), 1fr));
  gap: clamp(16px, 2vw, 22px);
  margin-top: clamp(34px, 4.4vw, 56px);
}
.wm-icard {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border-radius: var(--wm-radius-lg);
  padding: clamp(24px, 2.6vw, 32px);
  min-height: 212px;
  color: inherit;
  background: var(--wm-surface-card);
  border: 1px solid var(--wm-rule);
  transition: transform .4s var(--wm-ease-spring), box-shadow .4s var(--wm-ease-spring), border-color var(--wm-transition);
}
.wm-icard:hover { transform: translateY(-5px); color: inherit; }

/* On the light band the design uses solid white cards with a soft shadow. */
.wm-theme-light .wm-icard {
  background: #fff;
  border-color: var(--wm-border-light);
  box-shadow: var(--wm-shadow-card);
}
.wm-theme-light .wm-icard:hover { box-shadow: 0 26px 56px rgba(0, 0, 0, 0.14); }

.wm-icard__icon {
  width: 46px;
  height: 46px;
  border-radius: var(--wm-radius-btn);
  background: var(--wm-gradient-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  flex-shrink: 0;
}
.wm-icard__body { display: block; margin-top: 18px; }
.wm-icard__title {
  display: block;
  font-family: var(--wm-font-heading);
  font-size: var(--wm-text-lg);
  font-weight: var(--wm-weight-semibold);
  line-height: 1.3;
  color: var(--wm-fg);
}
.wm-icard__text {
  display: block;
  margin-top: 8px;
  font-family: var(--wm-font-body);
  font-size: var(--wm-text-sm);
  line-height: 1.6;
  color: var(--wm-fg-soft);
}
.wm-icard__more {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: auto;
  padding-top: 18px;
  font-family: var(--wm-font-heading);
  font-size: var(--wm-text-sm);
  font-weight: var(--wm-weight-semibold);
  color: var(--wm-blue-bright);
}
.wm-theme-light .wm-icard__more { color: var(--wm-blue); }
.wm-icard__more svg { transition: transform var(--wm-transition); }
.wm-icard:hover .wm-icard__more svg { transform: translateX(3px); }

/* ---- Stat ---- */
.wm-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
  gap: clamp(14px, 1.8vw, 18px);
}
.wm-stat__value {
  font-family: var(--wm-font-heading);
  font-size: clamp(26px, 3vw, 40px);
  font-weight: var(--wm-weight-extrabold);
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--wm-fg);
}
.wm-stat__label {
  font-family: var(--wm-font-body);
  font-size: 14px;
  color: var(--wm-fg-muted);
  margin-top: 8px;
}
.wm-stat--card {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--wm-rule);
  border-radius: var(--wm-radius-card);
  background: var(--wm-surface-card);
  padding: clamp(20px, 2.2vw, 28px);
}

/* ---- Review ---- */
.wm-reviews { display: grid; gap: clamp(16px, 2vw, 22px); }
.wm-review {
  margin: 0;
  border: 1px solid var(--wm-rule);
  border-radius: var(--wm-radius-lg);
  background: var(--wm-surface-card);
  padding: clamp(22px, 2.4vw, 30px);
}
.wm-theme-light .wm-review { background: #fff; box-shadow: var(--wm-shadow-card); }
.wm-review__stars { display: flex; gap: 3px; color: var(--wm-blue); }
.wm-review__quote { margin: 14px 0 0; border: 0; padding: 0; }
.wm-review__quote p {
  font-family: var(--wm-font-body);
  font-size: var(--wm-text-base);
  line-height: 1.62;
  color: var(--wm-fg-soft);
  margin-top: 8px;
}
.wm-review__by { display: flex; align-items: center; gap: 12px; margin-top: 18px; }
.wm-review__avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  flex-shrink: 0;
  background: linear-gradient(135deg, rgba(12,86,191,.35), rgba(27,174,205,.25));
  border: 1px solid var(--wm-rule);
}
.wm-review__who { display: flex; flex-direction: column; }
.wm-review__name {
  font-family: var(--wm-font-heading);
  font-size: var(--wm-text-sm);
  font-weight: var(--wm-weight-semibold);
  color: var(--wm-fg);
}
.wm-review__meta { font-family: var(--wm-font-body); font-size: 13px; color: var(--wm-fg-muted); }

/* Editor stand-ins */
.wm-icard--editor, .wm-pillars--editor, .wm-review--editor, .wm-stat--editor {
  border: 1px dashed rgba(90, 155, 255, 0.35);
  border-radius: var(--wm-radius-card);
  padding: 18px;
  min-height: 0;
  box-shadow: none;
}
.wm-icard__icon-ph {
  display: inline-block;
  font-family: var(--wm-font-mono);
  font-size: 11px;
  color: var(--wm-blue-bright);
  border: 1px solid rgba(90,155,255,.35);
  border-radius: 6px;
  padding: 2px 8px;
  margin-bottom: 10px;
}
/* Pill row rendered from a core list so the labels stay editable. */
ul.wm-pills { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
ul.wm-pills li {
  font-family: var(--wm-font-heading);
  font-size: 12px;
  font-weight: var(--wm-weight-semibold);
  letter-spacing: 0.04em;
  padding: 8px 14px;
  border-radius: var(--wm-radius-pill);
  border: 1px solid var(--wm-rule);
  color: var(--wm-fg-soft);
  margin: 0;
}

/* Arrow link paragraph. */
.wm-arrow-link {
  margin-top: 26px;
  font-family: var(--wm-font-heading);
  font-size: 15px;
  font-weight: var(--wm-weight-semibold);
}
.wm-arrow-link a { color: var(--wm-fg); }
.wm-theme-light .wm-arrow-link a { color: var(--wm-text-dark); }

/* Hero headline lines are block-level in the design. */
.wm-hero__content h1 span { display: block; }

/* Hero proof bar: ruled cells, matching the design's top borders. */
.wm-proof { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin-top: clamp(28px, 4vh, 64px); }
.wm-proof .wm-stat { padding: 26px 24px 30px; border-top: 1px solid var(--wm-rule); }
.wm-proof .wm-stat:first-child { padding-left: 0; }
.wm-proof .wm-stat:last-child { padding-right: 0; }
.wm-proof .wm-stat__value { font-size: clamp(30px, 3.6vw, 46px); }

/* Reviews: stacked on narrow screens, three across once there is room. */
.wm-reviews { margin-top: clamp(34px, 4.4vw, 56px); grid-template-columns: 1fr; }
@media (min-width: 900px) {
  .wm-reviews { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }
}

/* Stat with a leading icon - Command Center strip. */
.wm-stat__icon { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 10px; background: var(--wm-gradient-blue); color: #fff; margin-bottom: 14px; }

/* Bare icon item - pillar feature grids, no card chrome. */
.wm-icard--bare { background: none; border: 0; box-shadow: none; padding: 0; min-height: 0; }
.wm-theme-light .wm-icard--bare { background: none; box-shadow: none; border: 0; }
.wm-icard--bare:hover { transform: none; }
.wm-icard--bare .wm-icard__icon { width: 38px; height: 38px; border-radius: 10px; }
.wm-icard--bare .wm-icard__title { font-size: var(--wm-text-base); }

/* Browser chrome mock used around Command Center screenshots. */
.wm-mock { border: 1px solid var(--wm-rule); border-radius: var(--wm-radius-lg); overflow: hidden; background: #04070d; }
.wm-mock__bar { display: flex; align-items: center; gap: 7px; padding: 11px 14px; border-bottom: 1px solid var(--wm-rule); background: rgba(255,255,255,.03); }
.wm-mock__dot { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.18); }
.wm-mock__url { margin-left: 8px; font-family: var(--wm-font-body); font-size: 12px; color: var(--wm-text-muted); }
.wm-theme-light .wm-mock { background: #0a1628; }
.wm-mock__body { position: relative; aspect-ratio: 16/9; }

/* ============================================================
   Design corrections
   ============================================================ */

/* Blue CTA hover, matching the design's lift + glow. */
.wp-block-button__link {
  transition: box-shadow .4s var(--wm-ease-spring), transform .4s var(--wm-ease-spring), background .3s ease, border-color .3s ease;
}
.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
  box-shadow: var(--wm-shadow-button);
  transform: translateY(-3px);
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
  border-color: var(--wm-border-hover);
  background: rgba(12, 86, 191, 0.10);
  transform: translateY(-2px);
}
.wm-band-blue .wp-block-button .wp-block-button__link:hover {
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.22);
  transform: translateY(-3px);
}

/* The proof bar runs the full container width in the design; only the
   copy above it is held to a narrow measure. */
.wm-hero__content { max-width: none; }
.wm-hero__content > *:not(.wm-proof) { max-width: 860px; }
.wm-hero__content > .wm-proof { max-width: none; width: 100%; }

/* Eyebrow labels. The design uses brand blue on light bands and the
   brighter tint on dark ones - they are not the same swatch. */
.wm-label {
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--wm-blue-bright);
}
.wm-theme-light .wm-label,
.wm-theme-light .is-style-wm-eyebrow { color: var(--wm-blue); }
.wm-band-blue .wm-label { color: rgba(255, 255, 255, 0.85); }

/* Proof figures read blue on the light band. */
.wm-theme-light .wm-stat__value {
  color: var(--wm-blue);
  font-size: clamp(28px, 3.2vw, 42px);
  letter-spacing: -0.045em;
}
.wm-theme-light .wm-stat__label { color: var(--wm-text-dark-secondary); margin-top: 7px; }

/* A lead sized to sit on a single line at container width. */
.wm-lead--tight {
  font-size: clamp(14px, 1.1vw, 16.5px);
  max-width: none;
  text-wrap: nowrap;
}
@media (max-width: 1100px) { .wm-lead--tight { text-wrap: pretty; } }

/* Featured case study: a dark card sitting on the light band. */
.wm-theme-light .wm-icard--dark,
.wm-icard--dark {
  background: var(--wm-gradient-card);
  border: 1px solid var(--wm-border-blue);
  box-shadow: var(--wm-shadow-deep);
  min-height: 248px;
  justify-content: space-between;
}
.wm-icard--dark .wm-icard__title { color: var(--wm-text); }
.wm-icard--dark .wm-icard__text { color: var(--wm-text-secondary); }
.wm-icard--dark .wm-icard__more { color: var(--wm-blue-bright); }
.wm-icard--dark .wm-placeholder-tag { color: var(--wm-blue-bright); border-color: rgba(90,155,255,.45); }

/* Long stat values ("Lawrence, KS") must wrap inside their card. */
.wm-stat__value {
  overflow-wrap: anywhere;
  hyphens: none;
  max-width: 100%;
}
.wm-stat--card .wm-stat__value { font-size: clamp(22px, 2.2vw, 32px); }

/* Stacked band: copy row, then cards in equal thirds. */
.wm-stack > * + * { margin-top: clamp(34px, 4.4vw, 56px); }
.wm-thirds { display: grid; grid-template-columns: 1fr; gap: clamp(16px, 2vw, 22px); }
@media (min-width: 860px) { .wm-thirds { grid-template-columns: repeat(3, 1fr); } }

/* ============================================================
   Timeline steps (wildman/step)
   ============================================================ */

ol.wm-steps-list { max-width: 940px; margin-inline: auto; padding: 0; list-style: none; }

.wm-step {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(16px, 2.6vw, 34px);
  padding-bottom: clamp(20px, 2.4vw, 30px);
}
.wm-step__marker { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.wm-step__dot {
  width: clamp(44px, 5vw, 54px);
  height: clamp(44px, 5vw, 54px);
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--wm-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--wm-font-heading);
  font-size: 15px;
  font-weight: var(--wm-weight-bold);
  color: var(--wm-blue);
  flex-shrink: 0;
}
.wm-step__line {
  flex: 1;
  width: 2px;
  background: linear-gradient(180deg, rgba(12, 86, 191, 0.5), rgba(12, 86, 191, 0.16));
}

.wm-step__card {
  background: #fff;
  border: 1px solid var(--wm-border-light);
  border-radius: var(--wm-radius-lg);
  padding: clamp(20px, 2.4vw, 30px);
  box-shadow: var(--wm-shadow-card);
  display: block;
}
.wm-step__title {
  display: block;
  font-family: var(--wm-font-heading);
  font-size: clamp(19px, 2.1vw, 27px);
  font-weight: var(--wm-weight-bold);
  letter-spacing: -0.02em;
  color: var(--wm-text-dark);
}
.wm-step__text {
  display: block;
  font-family: var(--wm-font-body);
  font-size: clamp(15px, 1.3vw, 17px);
  line-height: 1.7;
  color: var(--wm-text-dark-secondary);
  margin-top: 9px;
}

/* Highlighted milestones: filled marker, tinted card, badge pill. */
.wm-step--hi .wm-step__dot {
  background: var(--wm-gradient-blue);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 8px 22px rgba(12, 86, 191, 0.35);
}
.wm-step--hi .wm-step__card {
  border-color: rgba(12, 86, 191, 0.28);
  box-shadow: 0 18px 44px rgba(12, 86, 191, 0.14);
}
.wm-step__badge {
  display: inline-flex;
  font-family: var(--wm-font-heading);
  font-size: 10px;
  font-weight: var(--wm-weight-bold);
  letter-spacing: 0.14em;
  padding: 5px 11px;
  border-radius: var(--wm-radius-pill);
  background: var(--wm-blue);
  color: #fff;
}
.wm-step__badge + .wm-step__title { margin-top: 12px; }
.wm-step--last { padding-bottom: 0; }

/* On dark bands the cards invert. */
.wm-theme-dark .wm-step__dot { background: var(--wm-bg-card); }
.wm-theme-dark .wm-step__card { background: var(--wm-gradient-card); border-color: var(--wm-border); box-shadow: none; }
.wm-theme-dark .wm-step__title { color: var(--wm-text); }
.wm-theme-dark .wm-step__text { color: var(--wm-text-secondary); }

/* ============================================================
   Case study card (wildman/case-study)
   ============================================================ */

.wm-cases { display: flex; flex-direction: column; gap: clamp(18px, 2.4vw, 26px); margin-top: clamp(30px, 4vw, 48px); }
.wm-case {
  background: #fff;
  border: 1px solid var(--wm-border-light);
  border-radius: var(--wm-radius-lg);
  box-shadow: var(--wm-shadow-card);
  overflow: hidden;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
}
.wm-case__media { position: relative; min-height: 250px; background: #e9eef4; }
.wm-case__img { width: 100%; height: 100%; object-fit: cover; }
.wm-case__body { padding: clamp(24px, 2.8vw, 38px); }
.wm-case__eyebrow {
  font-family: var(--wm-font-heading);
  font-size: 10px;
  font-weight: var(--wm-weight-semibold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--wm-blue);
}
.wm-case__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); gap: 20px; margin-top: 20px; }
.wm-case__label {
  display: block;
  font-family: var(--wm-font-heading);
  font-size: 11px;
  font-weight: var(--wm-weight-semibold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--wm-text-dark-secondary);
}
.wm-case__field p {
  font-family: var(--wm-font-body);
  font-size: 15px;
  line-height: 1.6;
  color: var(--wm-text-dark-secondary);
  margin-top: 7px;
}
.wm-case__result { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--wm-border-light); }
.wm-case__metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(110px, 100%), 1fr)); gap: 10px; margin-top: 12px; }
.wm-case__metric { border: 1px solid rgba(12, 86, 191, 0.3); border-radius: var(--wm-radius-btn); padding: 13px 15px; background: rgba(12, 86, 191, 0.04); }
/* An unfilled metric stays dashed and greyed so it reads as pending. */
.wm-case__metric.is-empty { border-style: dashed; }
.wm-case__metric-value {
  display: block;
  font-family: var(--wm-font-heading);
  font-size: 22px;
  font-weight: var(--wm-weight-extrabold);
  letter-spacing: -0.03em;
  color: var(--wm-blue);
}
.wm-case__metric.is-empty .wm-case__metric-value { color: rgba(0, 0, 0, 0.22); }
.wm-case__metric-label { display: block; font-family: var(--wm-font-body); font-size: 12px; color: var(--wm-text-dark-secondary); margin-top: 3px; }
.wm-case__note { font-family: var(--wm-font-body); font-size: 13px; line-height: 1.6; color: var(--wm-text-dark-secondary); margin-top: 12px; }

/* Narrower container for the Results and About bands. */
.wm-wrap--mid { max-width: 1160px; }

/* Plain story rows: marker beside copy, no card. */
.wm-step--plain .wm-step__card { background: none; border: 0; box-shadow: none; padding: 0; }
.wm-step--plain .wm-step__title { font-size: var(--wm-text-base); font-weight: var(--wm-weight-semibold); }
.wm-step--plain .wm-step__text { font-size: clamp(15px, 1.3vw, 17px); margin-top: 4px; }
.wm-step--plain .wm-step__dot { width: 44px; height: 44px; font-size: 13px; }
.wm-step--plain .wm-step__dot svg { color: var(--wm-blue); }
.wm-theme-dark .wm-step--plain .wm-step__dot svg { color: var(--wm-blue-bright); }

/* Stacked icon rows beside a mock on the service pages. */
.wm-rows { display: flex; flex-direction: column; gap: clamp(12px, 1.6vw, 16px); }
.wm-rows .wm-icard { min-height: 0; flex-direction: row; align-items: flex-start; gap: 16px; padding: clamp(18px, 1.9vw, 22px); }
.wm-rows .wm-icard__icon { width: 38px; height: 38px; border-radius: 10px; }
.wm-rows .wm-icard__body { margin-top: 0; align-self: center; }
.wm-rows .wm-icard__text { margin-top: 0; font-size: var(--wm-text-base); color: var(--wm-fg); }

/* Hero eyebrow keeps the label colour, not the lead paragraph colour. */
.wm-hero .wm-label, .wm-hero__eyebrow { color: var(--wm-blue-bright); margin-bottom: 16px; }


/* Proof bar on phones - the block and pattern variants of the same three
   cells. Placed last so these beat the .wm-theme-light figure sizes above. */
@media (max-width: 700px) {
  .wm-proof .wm-stat,
  .wp-block-columns.wm-proof > .wp-block-column { padding: 18px 10px 20px; }
  .wp-block-columns.wm-proof > .wp-block-column:first-child { padding-left: 0; }
  .wp-block-columns.wm-proof > .wp-block-column:last-child { padding-right: 0; }

  .wm-proof .wm-stat__value { font-size: clamp(19px, 5.2vw, 30px); }
  .wm-proof .wm-stat__label { font-size: clamp(10px, 2.8vw, 13px); margin-top: 5px; line-height: 1.35; }
  .wm-proof .wm-stat__icon { width: 28px; height: 28px; margin-bottom: 8px; }

  .wp-block-columns.wm-proof .wm-proof__num { font-size: clamp(19px, 5.2vw, 30px); }
  .wp-block-columns.wm-proof .wm-proof__label { font-size: clamp(10px, 2.8vw, 13px); margin-top: 5px; line-height: 1.35; }
}


/* ============================================================
   Hero - mobile composition
   Desktop sets the copy beside the signal artwork. Below 820px
   hero-canvas.js already re-centres its hub, so the same design turns a
   quarter turn: artwork across the top, copy stacked beneath it. What was
   missing is that the two washes and the type ramp still pointed at the
   desktop composition, so on a phone they blacked out the artwork and
   pinned the headline to the bottom of its clamp.
   820px is the canvas breakpoint too - keep the two in step.
   ============================================================ */
@media (max-width: 819px) {

  /* Copy sits at the foot of the frame; the space above it is the artwork. */
  .wm-hero--tall {
    justify-content: flex-end;
    padding-top: clamp(64px, 22vh, 240px);
    padding-bottom: clamp(26px, 3.4vh, 44px);
  }

  /* The canvas keeps to the top of the frame so the hub lands above the copy
     rather than behind it. Shortening the element also shortens the
     projection focal length, which is what stops the scene magnifying until
     only the hub core is on screen. */
  .wm-hero--tall .wm-hero__canvas { height: 36%; bottom: auto; }

  /* Both washes were aimed across the frame - the scrim near-opaque until
     62%, the vignette clear at 78% - which on a phone is exactly where the
     re-centred hub sits. Aim them down the frame instead: clear over the
     artwork, solid under the copy. */
  .wm-hero--tall .wm-hero__scrim {
    background: linear-gradient(180deg,
      rgba(3, 5, 8, 0.42) 0%,
      rgba(3, 5, 8, 0.03) 11%,
      rgba(3, 5, 8, 0.12) 22%,
      rgba(3, 5, 8, 0.70) 32%,
      rgba(3, 5, 8, 0.95) 44%,
      #030508 56%);
  }
  .wm-hero--tall .wm-hero__vignette {
    background: radial-gradient(ellipse 126% 34% at 50% 18%,
      transparent 0%, rgba(3, 5, 8, 0.22) 62%, rgba(3, 5, 8, 0.68) 100%);
  }

  /* The authored line breaks are a desktop measure. Held to on a phone they
     capped the headline at 37px here and 32.5px on the Command Center, where
     the middle line already wrapped below 360px. Letting everything but the
     gradient payoff line reflow buys about a third more headline. */
  /* 11.3vw puts the headline at 44px on a 390px screen - 1.5x the 30px
     section headings, which is close to the 1.7x the desktop hero holds over
     its own h2. A vw ramp also keeps the wrap identical at every width,
     because the type scales with the column.
     text-wrap:pretty, not the inherited balance: balance mishandles the
     mixed inline/block runs here and produced an ascending 47/64/80 rag. */
  /* The column is what the headline wraps into, so size the type off the
     container rather than the viewport. Below 450px the gutter is a flat
     18px, so column/viewport drifts as the screen grows - on the Command
     Center that drift was enough at 412px to flip a word and leave a 46%
     line. cqw pins the ratio, so the wrap is identical at every width. The
     vw declaration above stays as the fallback where cqw is unsupported. */
  .wm-hero__content { container-type: inline-size; }
  .wm-hero__content h1 {
    font-size: clamp(34px, min(11.3vw, 13vh), 60px);
    font-size: clamp(34px, min(12.8cqw, 13vh), 60px);
    text-wrap: pretty;
  }
  .wm-hero__content h1 span { display: inline; }
  .wm-hero__content h1 span.wm-gradient-text { display: block; }

  .wm-hero__content > p:not(.wm-label) { margin-top: clamp(12px, 1.8vh, 20px); }
  .wm-hero__actions { margin-top: clamp(18px, 2.4vh, 30px); }
  .wm-hero__proof { margin-top: clamp(22px, 3vh, 40px); }
}

/* From 700px the column is wide enough to hold the authored line breaks at
   the capped type size again, so give them back. Between 700 and 819 the
   reflow was leaving the tail of the headline on a 34-36% line, where the
   original breaks land cleanly. */
@media (min-width: 700px) and (max-width: 819px) {
  .wm-hero__content h1 span { display: block; }
}

@media (max-width: 560px) {
  /* Shrink-wrapped, the two buttons wrapped to a 240px row and a 212px row,
     which reads as an accident. Full width reads as a decision. */
  .wm-hero__actions { flex-direction: column; align-items: stretch; gap: 10px; }
  .wm-hero__actions .wm-btn { width: 100%; }
}

/* The answer container holds elements now, so trim the outer margins. */
.wm-faq__a > :first-child { margin-top: 0; }
.wm-faq__a > :last-child { margin-bottom: 0; }