/* DMND Engine, WordPress additions. Loaded after site.css and light.css.
   Only the block variants the static CSS has no rule for, in the site's own tokens. */

/* ---------- enquiry form: the send button spins while the server answers ---------- */
.quote__send:disabled{cursor:progress}
.quote__send.is-loading{animation:none}
.quote__send.is-loading .btn__label{visibility:hidden}
.quote__send.is-loading::after{
  content:"";position:absolute;z-index:2;left:50%;top:50%;
  width:1.25em;height:1.25em;margin:-.625em 0 0 -.625em;
  border-radius:50%;border:2px solid rgba(255,255,255,.35);border-top-color:var(--white);
  animation:quote-spin .8s linear infinite;
}
.quote__status{
  margin:clamp(12px,.9vw,31px) 0 0;
  font-size:clamp(13px,.78vw,27px);line-height:1.45;
  color:var(--crimson);
}
@media (prefers-reduced-motion:reduce){ .quote__send.is-loading::after{animation-duration:2s} }

/* ---------- reverse layouts (Settings → Reverse) for blocks the static CSS draws one way only ---------- */
.jobs--rev{grid-template-columns:minmax(0,42%) minmax(0,1fr)}
.jobs--rev .jobs__media{order:-1}
.why--rev{grid-template-columns:minmax(0,1fr) minmax(0,42%)}
.why--rev .why__media{order:2}
.fit--rev > :first-child{order:2}
@media (max-width:860px){
  .jobs--rev,.why--rev{grid-template-columns:minmax(0,1fr)}
  .why--rev .why__media{order:-1}
  .fit--rev > :first-child{order:0}
}

/* ---------- paper and plain blocks moved onto the dark slab (Style → Dark slab) ---------- */
.slab .why{background:transparent;color:var(--white)}
.slab .why__item p{color:rgba(255,255,255,.66)}
.slab .vert{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.14)}
.slab .vert p,
.slab .tier p{color:rgba(255,255,255,.66)}
.slab .client--empty{border-color:rgba(255,255,255,.2);color:rgba(255,255,255,.4)}

/* ---------- hero, Style → Ink: a black hero on the slab ---------- */
.slab .hero.hero--ink{background:var(--black);--fg:var(--white);color:var(--white)}
.hero--ink .hero__copy{color:rgba(255,255,255,.72)}
.hero--ink .btn--ghost{border-color:var(--white);color:var(--white)}
.hero--ink .btn--ghost:hover{border-color:var(--crimson)}
.hero--ink .awards img{filter:none}
.hero--ink .hero__art{opacity:.5}
.hero--ink + .wedge path{fill:var(--black);stroke:rgba(255,255,255,.16)}
.slab-edge:not(:has(.wedge)) .slab--dark:has(.hero--ink){background:var(--black)}

/* ---------- CTA, Style → Ink: a black band, the chevron a shade lighter ---------- */
.cta.cta--ink{background:var(--black);color:var(--white);--eyebrow-dim:#1d1d1d}
.cta--ink .cta__sub{color:rgba(255,255,255,.72)}

/* ---------- pages without blocks (privacy policy) and the blog templates ---------- */
.prose--page{max-width:72ch}
.prose--page :is(h2,h3){font-family:var(--font-display);font-style:italic;font-weight:600;line-height:1.15;margin:clamp(28px,2vw,69px) 0 0}
.prose--page :is(ul,ol){list-style:revert;padding-left:1.4em;color:var(--charcoal);font-size:clamp(15px,.95vw,32px);line-height:1.55}
.prose--page a,.vert h3 a:hover{color:var(--accent)}
.prose--page a{text-decoration:underline}
.post-meta{margin:clamp(14px,1vw,34px) 0 0;font-size:clamp(13px,.72vw,25px);letter-spacing:.14em;text-transform:uppercase;color:var(--charcoal)}
.pager{display:flex;gap:16px;margin-top:clamp(28px,2.4vw,82px)}