/* =============================================================================
   Delfunt Law - theme.css
   One firm, two front doors. Door-level colour is expressed as custom
   properties on <body>; everything below reads those, never a raw hex.
   Contrast pairings are the measured ones from the brand book (WCAG 2.2 AA).
   ========================================================================== */

/* ---------------------------------------------------------------- Tokens */
:root {
  --df-ground:       var(--wp--preset--color--ivory);
  --df-ground-2:     var(--wp--preset--color--ivory-deep);
  --df-ink:          var(--wp--preset--color--slate);
  --df-body:         var(--wp--preset--color--steel);
  --df-muted:        var(--wp--preset--color--steel-muted);
  --df-rule:         #D9D3C5;
  --df-rule-strong:  var(--wp--preset--color--grey-script);
  --df-accent:       var(--wp--preset--color--gold);
  --df-accent-ink:   var(--wp--preset--color--slate);
  --df-accent-text:  var(--wp--preset--color--gold-deep);
  --df-eyebrow-ink:  #7A6139; /* eyebrow label gold: 5.3:1 on ivory at label size (AA); gold-deep is 4.16:1 */
  --df-focus:        var(--wp--preset--color--gold-deep);
  --df-link-hover:   var(--wp--preset--color--gold-deep);
  --df-header-h:     4.5rem;
  --df-safety-h:     2.75rem; /* the quick-exit bar on the VAWA and U-Visa pages */
  --df-ease:         cubic-bezier(.2,.7,.2,1);
  --df-shadow:       0 1px 0 rgba(35,43,54,.06), 0 12px 32px -12px rgba(35,43,54,.18);
}
body.door-defense {
  --df-ground:       var(--wp--preset--color--slate);
  --df-ground-2:     var(--wp--preset--color--slate-deep);
  --df-ink:          var(--wp--preset--color--ivory);
  --df-body:         #E6E1D7;
  --df-muted:        var(--wp--preset--color--grey-script);
  --df-rule:         #3A4452;
  --df-rule-strong:  #5A6473;
  --df-accent-text:  var(--wp--preset--color--gold);
  --df-focus:        var(--wp--preset--color--gold);
  --df-link-hover:   var(--wp--preset--color--gold);
  --df-shadow:       0 1px 0 rgba(0,0,0,.2), 0 12px 32px -12px rgba(0,0,0,.5);
}

/* ---------------------------------------------------------------- Base */
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--df-header-h) + 1rem); scroll-padding-bottom: 4.5rem; -webkit-text-size-adjust: 100%; overflow-x: clip; }
body { overflow-x: clip; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  background: var(--df-ground);
  color: var(--df-body);
  font-family: var(--wp--preset--font-family--sans);
  font-size: var(--wp--preset--font-size--body);
  line-height: 1.6;
  margin: 0;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, h5, h6 { color: var(--df-ink); text-wrap: balance; margin-block: 0 .6em; }
/* Block layouts zero heading margins; put the rhythm back with matching specificity. */
.is-layout-flow > :is(h1, h2, h3, h4, h5, h6), .is-layout-constrained > :is(h1, h2, h3, h4, h5, h6) { margin-block-end: .55em; }
.is-layout-flow > :is(h2, h3) + :is(p, ul, ol), .is-layout-constrained > :is(h2, h3) + :is(p, ul, ol) { margin-block-start: 0; }
p { margin-block: 0 1.1em; }
a { color: var(--df-ink); text-decoration-thickness: 1px; text-underline-offset: .18em; transition: color 150ms var(--df-ease), background-color 150ms var(--df-ease); }
a:hover { color: var(--df-link-hover); }
img, svg, video { max-width: 100%; height: auto; display: block; }
strong { font-weight: 600; }
::selection { background: var(--df-accent); color: var(--df-accent-ink); }

/* Focus: 3px ring in a colour measured at 4.5:1+ against both grounds. */
:focus { outline: none; }
:focus-visible { outline: 3px solid var(--df-focus); outline-offset: 3px; border-radius: 2px; }
.df-btn:focus-visible, .wp-block-button__link:focus-visible { outline-offset: 4px; }

.visually-hidden, .screen-reader-text {
  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;
}
.df-skip {
  position: absolute; top: -100vh; left: 1rem; z-index: 100;
  background: var(--wp--preset--color--slate); color: var(--wp--preset--color--ivory);
  padding: .75rem 1.25rem; border-radius: 2px; font-weight: 600; text-decoration: none;
}
.df-skip:focus { top: 1rem; outline-color: var(--wp--preset--color--gold); }

.df-eyebrow, .wp-block-post-terms.df-eyebrow, .wp-block-post-date.df-eyebrow {
  font-family: var(--wp--preset--font-family--sans);
  font-size: var(--wp--preset--font-size--label);
  font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--df-eyebrow-ink, var(--df-accent-text)); margin: 0 0 .9rem;
}
.df-eyebrow a { color: inherit; text-decoration: none; }
.df-muted { color: var(--df-muted); }
.df-disclaimer { font-size: var(--wp--preset--font-size--small); color: var(--df-body); line-height: 1.5; max-width: 65ch; }
.df-link { font-weight: 600; text-decoration: none; color: var(--df-ink); border-bottom: 1px solid var(--df-accent); padding-bottom: .1em; }
.df-link:hover { color: var(--df-link-hover); }

/* Quick exit: a full-width bar pinned above the header on the VAWA and U-Visa pages. Always visible
   while scrolling, first in the tab order, works without scripts; Esc also leaves (theme.js). The page
   gets padding so the bar never covers content, and the sticky header sticks just below it. */
.df-quick-exit { position: fixed; z-index: 95; top: var(--wp-admin--admin-bar--height, 0px); left: 0; right: 0; height: var(--df-safety-h); display: flex; align-items: center; justify-content: center; gap: .65rem; white-space: nowrap; background: var(--wp--preset--color--gold); color: var(--wp--preset--color--slate); font-family: var(--wp--preset--font-family--sans); font-size: var(--wp--preset--font-size--label); letter-spacing: .06em; padding: 0 1rem; text-decoration: none; box-shadow: 0 1px 8px rgba(0,0,0,.2); }
.df-quick-exit strong { font-weight: 700; text-transform: uppercase; }
.df-quick-exit__hint { font-weight: 500; opacity: .85; }
.df-quick-exit:hover, .df-quick-exit:focus-visible { background: var(--wp--preset--color--slate); color: var(--wp--preset--color--ivory); }
.df-quick-exit:focus-visible { outline-offset: -3px; }
@media (max-width: 40rem) { .df-quick-exit__hint { display: none; } } /* the bar never wraps: fixed height, hint drops first */
/* Arrival: one deliberate move so the reader learns the bar is there, then stillness.
   The bar slides into its reserved space (no layout shift) and a single light passes over it. */
@media (prefers-reduced-motion: no-preference) {
  .df-quick-exit { overflow: hidden; animation: df-qx-arrive .5s var(--df-ease-lux, ease-out) .35s both; }
  .df-quick-exit::after { content: ""; position: absolute; inset: 0 auto 0 0; width: 30%;
    background: linear-gradient(105deg, transparent, rgba(255,255,255,.38), transparent);
    transform: translateX(-120%) skewX(-12deg); animation: df-qx-sheen .9s ease-out 1.05s 1 forwards; pointer-events: none; }
}
@keyframes df-qx-arrive { from { transform: translateY(-100%); } to { transform: translateY(0); } }
@keyframes df-qx-sheen { to { transform: translateX(460%) skewX(-12deg); } }
body.df-safety { padding-top: var(--df-safety-h); }
body.df-safety .wp-site-blocks > .wp-block-template-part:has(> .df-header) { top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--df-safety-h)); }
body.df-safety .df-nav__panel, html.df-nav-compact body.df-safety .df-nav__panel { inset: calc(var(--df-header-h) + var(--wp-admin--admin-bar--height, 0px) + var(--df-safety-h)) 0 0 0; }
html:has(body.df-safety) { scroll-padding-top: calc(var(--df-header-h) + var(--df-safety-h) + 1rem); }

/* ---------------------------------------------------------------- Buttons */
.df-btn, .wp-block-button__link {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 3rem; padding: .8rem 1.5rem; border-radius: 2px; border: 1.5px solid transparent;
  font-family: var(--wp--preset--font-family--sans); font-weight: 600; font-size: var(--wp--preset--font-size--body); line-height: 1.2;
  text-decoration: none; cursor: pointer; text-align: center;
  transition: background-color 150ms var(--df-ease), color 150ms var(--df-ease), border-color 150ms var(--df-ease), transform 150ms var(--df-ease);
}
.df-btn--primary, .wp-block-button__link { background: var(--df-accent); color: var(--df-accent-ink); border-color: var(--df-accent); }
.df-btn--primary:hover, .wp-block-button__link:hover, .df-btn--primary:focus-visible { background: var(--wp--preset--color--gold-deep); border-color: var(--wp--preset--color--gold-deep); color: var(--wp--preset--color--white); }
.df-btn--outline, .is-style-outline .wp-block-button__link { background: transparent; color: var(--df-ink); border-color: var(--df-ink); }
.df-btn--outline:hover, .is-style-outline .wp-block-button__link:hover { background: var(--df-ink); color: var(--df-ground); }
.df-btn, .wp-block-button__link, .df-sticky__btn { box-sizing: border-box; }
.df-btn--block { width: 100%; }
.df-btn__label + .df-btn__num { font-variant-numeric: tabular-nums; }
.df-btn__num::before { content: ""; display: inline-block; width: 1px; height: 1em; background: currentColor; opacity: .4; margin: 0 .35rem 0 .1rem; vertical-align: -.15em; }
@media (prefers-reduced-motion: no-preference) { .df-btn:active { transform: translateY(1px); } }

/* ---------------------------------------------------------------- Layout */
.df-main { padding-bottom: 0; }
.df-main > .wp-block-post-content { padding-block: var(--wp--preset--spacing--50) var(--wp--preset--spacing--60); }
.df-main--home > .wp-block-post-content { padding-top: 0; }
.wp-block-post-content > * + * { margin-block-start: var(--wp--preset--spacing--50); }
.wp-block-post-content > .alignfull:last-child { margin-bottom: calc(-1 * var(--wp--preset--spacing--60)); }
.df-main--practice .df-block--cta-band { margin-top: 0; }
.wp-block-post-content > h2 + p, .wp-block-post-content > h3 + p, .wp-block-post-content > .answer-block + .answer-block { margin-block-start: 0; }
.wp-block-post-content > p + p, .wp-block-post-content > p + ul, .wp-block-post-content > p + ol, .wp-block-post-content > ul + p, .wp-block-post-content > ol + p { margin-block-start: 1.1em; }
/* A paragraph narrower than the column would be centred by the constrained layout;
   keep prose on the left rail by letting the column itself be the measure. */
.is-layout-constrained > p, .is-layout-constrained > .df-disclaimer, .is-layout-constrained > ul, .is-layout-constrained > ol { max-width: var(--wp--style--global--content-size); }
.wp-block-post-content > p + h2, .wp-block-post-content > ul + h2, .wp-block-post-content > ol + h2 { margin-block-start: var(--wp--preset--spacing--40); }
.wp-block-post-content > p + h3, .wp-block-post-content > ul + h3 { margin-block-start: var(--wp--preset--spacing--30); }

/* ---------------------------------------------------------------- Header */
.df-header {
  position: sticky; top: 0; z-index: 60;
  background: color-mix(in srgb, var(--df-ground) 88%, transparent);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--df-rule);
  transition: box-shadow 200ms var(--df-ease);
}
.df-header.is-scrolled { box-shadow: var(--df-shadow); }
/* Pinned header. WordPress wraps the header template part in a div exactly the
   header's height, so the header itself has no room to stick: pin the wrapper.
   When someone is logged in it sits below the WordPress admin bar. */
.wp-site-blocks > .wp-block-template-part:has(> .df-header) { position: sticky; top: var(--wp-admin--admin-bar--height, 0px); z-index: 60; }
.wp-block-template-part > .df-header { position: relative; top: auto; }
.df-header__inner {
  display: flex; align-items: center; gap: clamp(1rem, 2.5vw, 2.25rem); /* capped at its 1440px value: the header is capped too, so wider screens must not lose menu room */
  min-height: var(--df-header-h); max-width: 88rem; margin-inline: auto;
  padding-inline: var(--wp--preset--spacing--30);
}
.df-logo { display: inline-flex; align-items: center; color: var(--df-ink); text-decoration: none; flex-shrink: 0; }
.df-logo__svg { height: 2.75rem; width: auto; color: currentColor; }
.df-logo--monogram .df-logo__svg { height: 2.5rem; }
.df-header__actions { display: flex; align-items: center; gap: 1.25rem; margin-left: auto; flex-shrink: 0; }
.df-header .is-layout-flow > * + *, .df-footer .is-layout-flow > * + * { margin-block-start: 0; }
.df-header .is-layout-flow > * { margin-block: 0; }
.df-lang { font-size: .9375rem; font-weight: 500; text-decoration: none; color: var(--df-body); padding: .5rem .25rem; }
.df-lang:hover { color: var(--df-link-hover); text-decoration: underline; }

.df-door-cta { display: flex; align-items: center; gap: 1rem; }
.df-door-cta__phone { font-weight: 600; text-decoration: none; white-space: nowrap; color: var(--df-ink); font-variant-numeric: tabular-nums; }
.df-door-cta__hours { font-size: var(--wp--preset--font-size--small); color: var(--df-muted); white-space: nowrap; }
.df-header .df-door-cta { flex-direction: row-reverse; gap: .75rem; }
.df-header .df-door-cta .df-btn { min-height: 2.75rem; padding-block: .6rem; padding-inline: 1.1rem; white-space: nowrap; }
.df-header .df-door-cta__hours { display: none; }
.df-header .df-door-cta--phone .df-btn__label, .df-header .df-door-cta--firm .df-btn__label { display: none; }
.df-header .df-door-cta--phone .df-btn__num::before, .df-header .df-door-cta--firm .df-btn__num::before { display: none; }
.df-header .df-door-cta--phone .df-btn::after { content: "24/7"; font-size: .7rem; letter-spacing: .08em; font-weight: 600; padding: .15rem .4rem; border: 1px solid currentColor; border-radius: 999px; margin-left: .25rem; }
.df-header .df-door-cta--form .df-btn { font-size: .9375rem; }
.df-header .df-door-cta__phone { display: none; }

/* Navigation - desktop */
.df-nav { flex: 1 1 auto; min-width: 0; }
.df-nav__toggle { display: none; }
.df-nav__list { display: flex; flex-wrap: nowrap; gap: .25rem clamp(.75rem, 1.2vw, 1.08rem); list-style: none; margin: 0; padding: 0; }
.df-nav__list a {
  display: inline-block; padding: .55rem 0; font-size: .875rem; font-weight: 500; text-decoration: none; color: var(--df-ink); white-space: nowrap;
  background-image: linear-gradient(var(--df-accent), var(--df-accent)); background-size: 0 2px; background-repeat: no-repeat; background-position: 0 100%;
  transition: background-size 200ms var(--df-ease), color 150ms var(--df-ease);
}
.df-nav__list a:hover, .df-nav__list a[aria-current] { background-size: 100% 2px; color: var(--df-ink); }
.df-nav__extra { display: none; }

/* Navigation - collapsed */
@media (max-width: 79.99rem) {
  .df-header__inner { gap: .6rem; }
  .df-header .df-door-cta__phone, .df-header .df-door-cta__hours, .df-header .df-lang { display: none; }
  .df-header .df-door-cta .df-btn { padding-inline: .85rem; font-size: .9rem; }
  .df-header .df-door-cta .df-btn__num { display: none; }
  .df-header .df-door-cta--phone .df-btn__label, .df-header .df-door-cta--firm .df-btn__label { display: inline; }
  .df-header .df-door-cta--form .df-btn { font-size: .875rem; }
  .df-header__actions { gap: .6rem; margin-left: auto; }
  .df-nav { flex: 0 0 auto; order: 3; }
  .df-nav__toggle {
    display: inline-flex; align-items: center; gap: .6rem; min-height: 2.75rem; padding: .5rem .75rem;
    background: transparent; border: 1.5px solid var(--df-rule-strong); border-radius: 2px; color: var(--df-ink); font: inherit; font-weight: 600; cursor: pointer;
  }
  .df-nav__toggle-bars { position: relative; display: block; width: 1.125rem; height: 2px; background: currentColor; transition: background 150ms; }
  .df-nav__toggle-bars::before, .df-nav__toggle-bars::after { content: ""; position: absolute; left: 0; width: 100%; height: 2px; background: currentColor; transition: transform 200ms var(--df-ease), top 200ms var(--df-ease); }
  .df-nav__toggle-bars::before { top: -6px; } .df-nav__toggle-bars::after { top: 6px; }
  .df-nav.is-open .df-nav__toggle-bars { background: transparent; }
  .df-nav.is-open .df-nav__toggle-bars::before { top: 0; transform: rotate(45deg); }
  .df-nav.is-open .df-nav__toggle-bars::after { top: 0; transform: rotate(-45deg); }
  .df-nav__panel {
    display: none; position: fixed; inset: calc(var(--df-header-h) + var(--wp-admin--admin-bar--height, 0px)) 0 0 0; z-index: 55; overflow-y: auto;
    background: var(--df-ground); padding: 1.5rem var(--wp--preset--spacing--30) 6rem; border-top: 1px solid var(--df-rule);
  }
  .df-nav.is-open .df-nav__panel { display: block; }
  html.df-nav-open { overflow: hidden; }
  .df-nav__list { flex-direction: column; gap: 0; }
  .df-nav__list li { border-bottom: 1px solid var(--df-rule); }
  .df-nav__list a { display: block; padding: 1rem 0; font-family: var(--wp--preset--font-family--serif); font-size: 1.75rem; font-weight: 400; background: none; }
  .df-nav__list a[aria-current] { color: var(--df-accent-text); }
  .df-nav__extra { display: grid; gap: 1.25rem; margin-top: 1.5rem; }
  .df-nav__doors { display: grid; gap: .75rem; margin: 0; }
  .df-nav__doors a { display: flex; align-items: center; justify-content: center; min-height: 3rem; padding: .8rem 1rem; border-radius: 2px; font-weight: 600; text-decoration: none; background: var(--df-accent); color: var(--df-accent-ink); text-align: center; }
  .df-nav__doors a:first-child { background: transparent; color: var(--df-ink); border: 1.5px solid var(--df-ink); }
  .df-nav__phones { display: grid; gap: .5rem; margin: 0; font-size: .9375rem; }
  .df-nav__phones a { text-decoration: none; padding: .35rem 0; color: var(--df-body); }
  .df-nav__phones strong { color: var(--df-ink); font-variant-numeric: tabular-nums; }
  .df-lang--inline { display: inline-block; font-size: 1.0625rem; padding: .5rem 0; }
}

/* Same collapsed header, switched on by theme.js whenever the full menu does not fit
   at the current width (longer Spanish labels, 1366px laptops, browser zoom). */
html.df-nav-compact .df-header__inner {gap: .6rem; }
html.df-nav-compact .df-header .df-door-cta__phone, html.df-nav-compact .df-header .df-door-cta__hours, html.df-nav-compact .df-header .df-lang {display: none; }
html.df-nav-compact .df-header .df-door-cta .df-btn {padding-inline: .85rem; font-size: .9rem; }
html.df-nav-compact .df-header .df-door-cta .df-btn__num {display: none; }
html.df-nav-compact .df-header .df-door-cta--phone .df-btn__label, html.df-nav-compact .df-header .df-door-cta--firm .df-btn__label {display: inline; }
html.df-nav-compact .df-header .df-door-cta--form .df-btn {font-size: .875rem; }
html.df-nav-compact .df-header__actions {gap: .6rem; margin-left: auto; }
html.df-nav-compact .df-nav {flex: 0 0 auto; order: 3; }
html.df-nav-compact .df-nav__toggle {display: inline-flex; align-items: center; gap: .6rem; min-height: 2.75rem; padding: .5rem .75rem; background: transparent; border: 1.5px solid var(--df-rule-strong); border-radius: 2px; color: var(--df-ink); font: inherit; font-weight: 600; cursor: pointer; }
html.df-nav-compact .df-nav__toggle-bars {position: relative; display: block; width: 1.125rem; height: 2px; background: currentColor; transition: background 150ms; }
html.df-nav-compact .df-nav__toggle-bars::before, html.df-nav-compact .df-nav__toggle-bars::after {content: ""; position: absolute; left: 0; width: 100%; height: 2px; background: currentColor; transition: transform 200ms var(--df-ease), top 200ms var(--df-ease); }
html.df-nav-compact .df-nav__toggle-bars::before {top: -6px; }
html.df-nav-compact .df-nav__toggle-bars::after {top: 6px; }
html.df-nav-compact .df-nav.is-open .df-nav__toggle-bars {background: transparent; }
html.df-nav-compact .df-nav.is-open .df-nav__toggle-bars::before {top: 0; transform: rotate(45deg); }
html.df-nav-compact .df-nav.is-open .df-nav__toggle-bars::after {top: 0; transform: rotate(-45deg); }
html.df-nav-compact .df-nav__panel {display: none; position: fixed; inset: calc(var(--df-header-h) + var(--wp-admin--admin-bar--height, 0px)) 0 0 0; z-index: 55; overflow-y: auto; background: var(--df-ground); padding: 1.5rem var(--wp--preset--spacing--30) 6rem; border-top: 1px solid var(--df-rule); }
html.df-nav-compact .df-nav.is-open .df-nav__panel {display: block; }
html.df-nav-compact.df-nav-open {overflow: hidden; }
html.df-nav-compact .df-nav__list {flex-direction: column; gap: 0; }
html.df-nav-compact .df-nav__list li {border-bottom: 1px solid var(--df-rule); }
html.df-nav-compact .df-nav__list a {display: block; padding: 1rem 0; font-family: var(--wp--preset--font-family--serif); font-size: 1.75rem; font-weight: 400; background: none; }
html.df-nav-compact .df-nav__list a[aria-current] {color: var(--df-accent-text); }
html.df-nav-compact .df-nav__extra {display: grid; gap: 1.25rem; margin-top: 1.5rem; }
html.df-nav-compact .df-nav__doors {display: grid; gap: .75rem; margin: 0; }
html.df-nav-compact .df-nav__doors a {display: flex; align-items: center; justify-content: center; min-height: 3rem; padding: .8rem 1rem; border-radius: 2px; font-weight: 600; text-decoration: none; background: var(--df-accent); color: var(--df-accent-ink); text-align: center; }
html.df-nav-compact .df-nav__doors a:first-child {background: transparent; color: var(--df-ink); border: 1.5px solid var(--df-ink); }
html.df-nav-compact .df-nav__phones {display: grid; gap: .5rem; margin: 0; font-size: .9375rem; }
html.df-nav-compact .df-nav__phones a {text-decoration: none; padding: .35rem 0; color: var(--df-body); }
html.df-nav-compact .df-nav__phones strong {color: var(--df-ink); font-variant-numeric: tabular-nums; }
html.df-nav-compact .df-lang--inline {display: inline-block; font-size: 1.0625rem; padding: .5rem 0; }
@media (max-width: 30rem) {
  .df-logo__svg { height: 2.1rem; }
  .df-header__inner { min-height: 4rem; padding-inline: 1rem; }
  :root { --df-header-h: 4rem; }
  .df-nav__toggle { padding: .5rem .6rem; min-width: 2.75rem; justify-content: center; }
  .df-nav__toggle-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .df-header .df-door-cta .df-btn { padding-inline: .7rem; }
  .df-header .df-door-cta--phone .df-btn::after { margin-left: .15rem; }
  .df-header .df-door-cta--form .df-btn { font-size: .8125rem; }
}

/* ---------------------------------------------------------------- Split doors (home) */
/* The two doors are one framed object on the ivory page (inset diptych), so the
   light door has an edge and the dark door is not the only "thing" on screen. */
.df-doors {
  --df-seam-travel: 8cqw;                  /* how far the join slides on hover */
  --df-text-travel: calc(var(--df-seam-travel) * .4);  /* how far the hovered door's text drifts */
  --df-ease-io: cubic-bezier(.65, 0, .35, 1);
  position: relative; display: flex; container-type: inline-size;
  width: min(100% - 3rem, 92rem); margin: 1.5rem auto 0;
  min-height: min(calc(100svh - var(--df-header-h) - 3rem), 52rem);
  border-radius: 4px; overflow: hidden; isolation: isolate;
  box-shadow: 0 0 0 1px var(--df-rule), 0 30px 80px -40px rgba(35,43,54,.35);
}
.df-header { border-bottom-color: transparent; }
.df-header.is-scrolled { border-bottom-color: var(--df-rule); }
/* Each door is a flex panel. Only its width ever changes (the seam slides
   sideways); the outer rail, and the text on it, never reflow. */
.df-door {
  --df-rail: clamp(1.5rem, 4vw, 4rem);
  --df-seam-pad: 1.5rem;
  flex: 0 0 50%; min-width: 0; box-sizing: border-box;
  display: flex; align-items: center; text-decoration: none; position: relative; isolation: isolate; overflow: hidden;
  padding: clamp(2rem, 6vw, 5rem) var(--df-seam-pad);
  transition: flex-basis 650ms var(--df-ease-io), box-shadow 650ms var(--df-ease-io);
}
.df-door--immigration { padding-left: var(--df-rail); }
.df-door--defense { padding-right: var(--df-rail); }
.df-door--immigration { background: var(--wp--preset--color--ivory); color: var(--wp--preset--color--steel); --df-ink: var(--wp--preset--color--slate); --df-accent-text: var(--wp--preset--color--gold-deep); --df-muted: var(--wp--preset--color--steel-muted); }
.df-door--defense { background: var(--wp--preset--color--slate); color: #E6E1D7; --df-ink: var(--wp--preset--color--ivory); --df-accent-text: var(--wp--preset--color--gold); --df-eyebrow-ink: var(--wp--preset--color--gold); --df-muted: var(--wp--preset--color--grey-script); --df-focus: var(--wp--preset--color--gold); }
/* Environmental image behind each door, meeting at the seam; a scrim keeps the
   text on solid ground. Images are placeholders sized for the real shoot.
   The image box is sized to the door's WIDEST state (50% + travel) and anchored
   to the outer edge, so widening the door reveals more image instead of zooming. */
.df-door::before, .df-door::after {
  content: ""; position: absolute; inset-block: 0; width: calc(50cqw + var(--df-seam-travel)); pointer-events: none;
}
.df-door::before { z-index: -2; background-size: cover; background-repeat: no-repeat; background-position: center; }
.df-door::after { z-index: -1; }
.df-door--immigration::before, .df-door--immigration::after { left: 0; }
.df-door--defense::before, .df-door--defense::after { right: 0; }
.df-door--immigration::before {
  background-image: url("../img/door-immigration.jpg");
  background-image: image-set(url("../img/door-immigration.webp") type("image/webp"), url("../img/door-immigration.jpg") type("image/jpeg"));
  background-position: 70% 40%; opacity: .92;
}
.df-door--immigration::after { background: linear-gradient(90deg, #F7F4EE 0%, #F7F4EE 42%, rgba(247,244,238,.92) 54%, rgba(247,244,238,.55) 72%, rgba(247,244,238,.08) 100%); }
.df-door--defense::before {
  background-image: url("../img/door-defense.jpg");
  background-image: image-set(url("../img/door-defense.webp") type("image/webp"), url("../img/door-defense.jpg") type("image/jpeg"));
  background-position: 30% 40%; opacity: .9;
}
.df-door--defense::after { background: linear-gradient(270deg, #232B36 0%, #232B36 42%, rgba(35,43,54,.92) 54%, rgba(35,43,54,.6) 72%, rgba(35,43,54,.12) 100%); }
.df-door:focus-visible { outline-offset: -6px; }
/* The door is one large link: keep its body colour on hover, not the link colour. */
.df-door--immigration:hover, .df-door--immigration:focus-visible { color: var(--wp--preset--color--steel); }
.df-door--defense:hover, .df-door--defense:focus-visible { color: #E6E1D7; }
.df-door__inner { display: flex; flex-direction: column; gap: 1.1rem; max-width: 28rem; position: relative; transition: margin 650ms var(--df-ease-io); }
.df-door--defense .df-door__inner { margin-left: auto; }
/* Sliding-wardrobe hover: one seam, moving sideways only. The hovered door widens
   by the seam travel (its image is uncovered, not scaled) and its text drifts a
   fraction of that distance; the other door simply narrows, text unmoved.
   Crossing from one door to the other is a single continuous seam move. */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .df-doors:has(.df-door--immigration:hover) .df-door--immigration, .df-doors:has(.df-door--immigration:focus-visible) .df-door--immigration,
  .df-doors:has(.df-door--defense:hover) .df-door--defense, .df-doors:has(.df-door--defense:focus-visible) .df-door--defense { flex-basis: calc(50% + var(--df-seam-travel)); z-index: 2; }
  .df-doors:has(.df-door--immigration:hover) .df-door--defense, .df-doors:has(.df-door--immigration:focus-visible) .df-door--defense,
  .df-doors:has(.df-door--defense:hover) .df-door--immigration, .df-doors:has(.df-door--defense:focus-visible) .df-door--immigration { flex-basis: calc(50% - var(--df-seam-travel)); }
  .df-door--immigration:hover, .df-door--immigration:focus-visible { box-shadow: 18px 0 40px -18px rgba(35,43,54,.45); }
  .df-door--defense:hover, .df-door--defense:focus-visible { box-shadow: -18px 0 40px -18px rgba(0,0,0,.55); }
  .df-door--immigration:hover .df-door__inner, .df-door--immigration:focus-visible .df-door__inner { margin-left: var(--df-text-travel); }
  .df-door--defense:hover .df-door__inner, .df-door--defense:focus-visible .df-door__inner { margin-right: var(--df-text-travel); }
}
@media (prefers-reduced-motion: reduce) {
  .df-door:hover, .df-door:focus-visible { z-index: 2; }
}
.df-door__eyebrow { font-size: var(--wp--preset--font-size--label); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--df-accent-text); }
.df-door__title { font-family: var(--wp--preset--font-family--serif); font-size: clamp(2.75rem, 6.5vw, 5.25rem); line-height: 1.02; letter-spacing: -.015em; color: var(--df-ink); text-wrap: balance; }
.df-door__who { font-size: var(--wp--preset--font-size--body); line-height: 1.6; max-width: 40ch; }
.df-door__act { display: flex; flex-direction: column; align-items: flex-start; gap: .6rem; margin-top: .4rem; }
.df-door__sub { font-size: var(--wp--preset--font-size--small); color: var(--df-muted); }
.df-door:hover .df-btn, .df-door:focus-visible .df-btn { background: var(--wp--preset--color--gold-deep); border-color: var(--wp--preset--color--gold-deep); color: var(--wp--preset--color--white); }
.df-doors__seam {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%; z-index: 2;
  width: 7.5rem; height: 7.5rem; border-radius: 50%; display: grid; place-items: center;
  background: var(--wp--preset--color--ivory); color: var(--wp--preset--color--slate);
  box-shadow: 0 0 0 1px var(--wp--preset--color--gold), 0 0 0 8px var(--wp--preset--color--ivory), 0 24px 60px -20px rgba(0,0,0,.45);
}
.df-doors__mono { width: 3.6rem; height: auto; }
@media (prefers-reduced-motion: no-preference) {
  .df-door__inner > * { animation: df-rise 700ms var(--df-ease) both; }
  .df-door__inner > :nth-child(2) { animation-delay: 80ms; } .df-door__inner > :nth-child(3) { animation-delay: 160ms; } .df-door__inner > :nth-child(4) { animation-delay: 240ms; }
  .df-door--defense .df-door__inner > * { animation-delay: calc(120ms + var(--i, 0) * 80ms); }
  @keyframes df-rise { from { opacity: 0; translate: 0 14px; } to { opacity: 1; translate: 0 0; } }
}
@media (max-width: 47.99rem) {
  .df-doors { flex-direction: column; width: calc(100% - 2rem); margin-top: 1rem; min-height: calc(100svh - var(--df-header-h) - 2rem); }
  .df-door { flex: 1 1 0; }
  .df-door--immigration::before, .df-door--immigration::after, .df-door--defense::before, .df-door--defense::after { inset: 0; width: auto; }
  .df-door { align-items: center; padding: clamp(1.5rem, 6vw, 2.5rem) var(--wp--preset--spacing--30); }
  .df-door--immigration { padding-bottom: 3.25rem; }
  .df-door--defense { padding-top: 3.25rem; padding-right: var(--wp--preset--spacing--30); }
  .df-door--defense .df-door__inner { margin-left: 0; }
  .df-door--immigration::before { background-image: url("../img/door-immigration-800.jpg"); background-image: image-set(url("../img/door-immigration-800.webp") type("image/webp"), url("../img/door-immigration-800.jpg") type("image/jpeg")); background-position: 80% 30%; }
  .df-door--defense::before { background-image: url("../img/door-defense-800.jpg"); background-image: image-set(url("../img/door-defense-800.webp") type("image/webp"), url("../img/door-defense-800.jpg") type("image/jpeg")); background-position: 80% 30%; }
  .df-door--immigration::after { background: linear-gradient(90deg, #F7F4EE 0%, #F7F4EE 40%, rgba(247,244,238,.9) 60%, rgba(247,244,238,.45) 100%); }
  .df-door--defense::after { background: linear-gradient(90deg, #232B36 0%, #232B36 40%, rgba(35,43,54,.9) 60%, rgba(35,43,54,.5) 100%); }
  .df-door__inner { gap: .75rem; }
  .df-door__title { font-size: clamp(2.25rem, 10vw, 3rem); }
  .df-door__who { font-size: .9375rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .df-door__sub { display: none; }
  .df-doors__seam { width: 4.75rem; height: 4.75rem; box-shadow: 0 0 0 1px var(--wp--preset--color--gold), 0 0 0 6px var(--wp--preset--color--ivory), 0 16px 40px -16px rgba(0,0,0,.5); }
  .df-doors__mono { width: 2.3rem; }
}

/* ---------------------------------------------------------------- Split-door variants (design review; body.hero-*) */
/* (A, the inset diptych, is now the default above.)
   B. Tonal rebalance: the immigration door gets its own ground
   (Ivory Deep) and a richer image, the defense scrim is pulled back so the warm
   lamp-light carries more of the right half, and a hairline frames the hero. */
body.hero-tonal .df-doors, body.hero-asym .df-doors { border-block: 1px solid var(--df-rule); }
body.hero-tonal .df-door--immigration, body.hero-asym .df-door--immigration { background: #EEE9DF; }
body.hero-tonal .df-door--immigration::before, body.hero-asym .df-door--immigration::before { opacity: 1; filter: saturate(1.08) contrast(1.04); }
body.hero-tonal .df-door--immigration::after, body.hero-asym .df-door--immigration::after { background: linear-gradient(90deg, #EEE9DF 0%, #EEE9DF 42%, rgba(238,233,223,.9) 54%, rgba(238,233,223,.45) 72%, rgba(238,233,223,0) 100%); }
body.hero-tonal .df-door--defense::before, body.hero-asym .df-door--defense::before { opacity: 1; filter: brightness(1.12); }
body.hero-tonal .df-door--defense::after, body.hero-asym .df-door--defense::after { background: linear-gradient(270deg, #232B36 0%, #232B36 40%, rgba(35,43,54,.88) 54%, rgba(35,43,54,.42) 74%, rgba(35,43,54,0) 100%); }
/* C. Asymmetric: dark reads heavier, so give the light door more width (55/45)
   on top of the tonal rebalance; the seal moves to the new seam. */
body.hero-asym .df-door--immigration { flex-basis: 54.5%; }
body.hero-asym .df-door--defense { flex-basis: 45.5%; }
body.hero-asym .df-doors__seam { left: 54.5%; }

/* ---------------------------------------------------------------- Page hero */
.df-hero { padding-block: clamp(2.5rem, 6vw, 5rem) clamp(2rem, 5vw, 3.5rem); border-bottom: 1px solid var(--df-rule); }
/* One left edge: 88rem boxes pad 1.5rem inside (border-box), so their text sits on the 85rem column = theme.json wideSize. */
.df-hero__inner { max-width: 88rem; margin-inline: auto; padding-inline: var(--wp--preset--spacing--30); box-sizing: border-box; }
.df-hero .df-crumbs { padding-inline: var(--wp--preset--spacing--30); box-sizing: border-box; }
.df-hero--post, .df-main--archive .df-hero, .df-main--404 .df-hero { padding-inline: var(--wp--preset--spacing--30); }
.df-hero__title { font-size: var(--wp--preset--font-size--display); line-height: 1.02; max-width: 18ch; margin-bottom: .35em; }
.df-hero--post .df-hero__title { max-width: 24ch; font-size: clamp(2rem, 4.5vw, 3.25rem); }
.df-hero__sub { font-family: var(--wp--preset--font-family--serif, inherit); font-size: clamp(1.15rem, 2vw, 1.5rem); line-height: 1.3; font-weight: 500; color: var(--df-accent-text); max-width: 56ch; text-wrap: balance; margin: 0 0 .5em; }
.df-hero__lede { font-size: var(--wp--preset--font-size--lede); line-height: 1.5; max-width: 58ch; color: var(--df-body); margin: 0; }
.df-hero__cta { margin-top: 1.75rem; }
.df-reviewed { margin: 1rem 0 0; font-size: var(--wp--preset--font-size--small); color: var(--df-muted); }
.df-reviewed a { color: var(--df-body); font-weight: 600; text-decoration: none; border-bottom: 1px solid var(--df-accent); }
.df-reviewed a:hover { color: var(--df-link-hover); }
.df-hero__cta .df-door-cta { flex-wrap: wrap; }
.df-hero__date { font-size: var(--wp--preset--font-size--small); color: var(--df-muted); }
.df-crumbs { margin: 0 auto 1.75rem; max-width: 88rem; font-size: var(--wp--preset--font-size--small); }
.df-crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: .35rem; margin: 0; padding: 0; color: var(--df-muted); }
.df-crumbs li + li::before { content: "/"; margin-right: .35rem; opacity: .6; }
.df-crumbs a { color: var(--df-muted); text-decoration: none; }
.df-crumbs a:hover { color: var(--df-link-hover); text-decoration: underline; }
.df-crumbs [aria-current] { color: var(--df-body); }

/* ---------------------------------------------------------------- Practice layout */
.df-practice { display: grid; grid-template-columns: minmax(0, 1fr); gap: 3rem; padding-block: var(--wp--preset--spacing--50) var(--wp--preset--spacing--60); }
.df-practice__content > .wp-block-post-content { max-width: 44rem; }
.df-practice__content > .wp-block-post-content > .alignwide { max-width: none; }
.df-practice__aside { display: grid; gap: 2rem; align-content: start; }
@media (min-width: 64rem) {
  .df-practice { grid-template-columns: minmax(0, 1fr) 21rem; gap: clamp(3rem, 6vw, 6rem); }
  .df-practice__aside { position: sticky; top: calc(var(--df-header-h) + 1.5rem + var(--wp-admin--admin-bar--height, 0px)); }
}
.df-card { background: var(--df-ground-2); border: 1px solid var(--df-rule); border-radius: 4px; padding: 1.5rem; }
.df-card--action { display: grid; gap: .85rem; }
/* In the narrow card the phone button stacks: small label, big number, one line each. */
.df-card--action .df-btn--primary { flex-direction: column; align-items: flex-start; gap: .1rem; text-align: left; padding: .8rem 1.1rem; }
.df-card--action .df-btn__label { font-size: var(--wp--preset--font-size--small); font-weight: 500; letter-spacing: .01em; }
.df-card--action .df-btn__num { font-size: 1.375rem; line-height: 1.1; }
.df-card--action .df-btn__num::before { display: none; }
.df-card--action .df-btn--outline { white-space: normal; text-align: center; }
.df-card__note { font-size: var(--wp--preset--font-size--small); color: var(--df-muted); margin: 0; }
.df-card__phone { margin: 0; font-weight: 600; }
.df-card__hours { margin: 0; font-size: var(--wp--preset--font-size--small); color: var(--df-muted); }
.df-phone { text-decoration: none; color: var(--df-ink); }
.df-phone__num { font-variant-numeric: tabular-nums; }
.df-card__who { display: flex; align-items: center; gap: .85rem; margin-top: .5rem; padding-top: 1rem; border-top: 1px solid var(--df-rule); text-decoration: none; color: var(--df-body); font-size: var(--wp--preset--font-size--small); line-height: 1.35; }
.df-card__who img { width: 3.5rem; height: 4.375rem; object-fit: cover; border-radius: 2px; flex-shrink: 0; }
.df-card__who strong { display: block; color: var(--df-ink); font-size: var(--wp--preset--font-size--body); }
.df-card__who:hover strong { color: var(--df-link-hover); }

.df-section-nav ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--df-rule); }
.df-section-nav li { border-bottom: 1px solid var(--df-rule); }
.df-section-nav a { display: block; padding: .7rem 0; text-decoration: none; color: var(--df-body); font-size: .9375rem; }
.df-section-nav a:hover { color: var(--df-link-hover); }
.df-section-nav a[aria-current] { color: var(--df-ink); font-weight: 600; box-shadow: inset 3px 0 0 var(--df-accent); padding-left: .85rem; }

/* ---------------------------------------------------------------- Child pages grid (numbered bento) */
.df-grid__heading { margin-bottom: 1.5rem; }
.df-grid__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--df-rule); border-left: 1px solid var(--df-rule); grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); }
/* Hairlines are card borders, not a coloured background showing through gaps, so a short last row leaves plain background. */
.df-grid__item { border-right: 1px solid var(--df-rule); border-bottom: 1px solid var(--df-rule); }
.df-grid__link {
  display: flex; flex-direction: column; gap: .7rem; height: 100%; min-height: 15rem; box-sizing: border-box;
  padding: 1.75rem; background: var(--df-ground); text-decoration: none; color: var(--df-body); position: relative;
  transition: background-color 200ms var(--df-ease);
}
.df-grid__link:hover { background: var(--df-ground-2); }
.df-grid__link:focus-visible { outline-offset: -4px; z-index: 1; }
/* List-shaped hover: one horizontal move. A 3px gold rule draws left-to-right along
   the card's top edge, the arrow slides, the number darkens. No lift for lists. */
.df-grid__link::before { content: ""; position: absolute; top: 0; left: 0; height: 3px; width: 0; background: var(--wp--preset--color--gold); transition: width 450ms var(--df-ease); }
.df-grid__link:hover::before, .df-grid__link:focus-visible::before, .df-hover-grid .df-grid__item:nth-child(2) .df-grid__link::before { width: 100%; }
.df-hover-grid .df-grid__item:nth-child(2) .df-grid__link { background: var(--df-ground-2); }
.df-grid__num { font-family: var(--wp--preset--font-family--serif); font-size: 1.125rem; color: var(--df-accent-text); letter-spacing: .04em; transition: color 300ms var(--df-ease); }
.df-grid__link:hover .df-grid__num, .df-grid__link:focus-visible .df-grid__num { color: var(--df-ink); }
@media (prefers-reduced-motion: reduce) { .df-grid__link::before { transition: none; } }
.df-grid__title { font-family: var(--wp--preset--font-family--serif); font-size: var(--wp--preset--font-size--subhead); line-height: 1.2; color: var(--df-ink); text-wrap: balance; }
.df-grid__lede { font-size: .9375rem; line-height: 1.55; }
.df-grid__more { margin-top: auto; padding-top: .5rem; color: var(--df-accent-text); font-size: 1.25rem; transition: translate 200ms var(--df-ease); }
@media (prefers-reduced-motion: no-preference) { .df-grid__link:hover .df-grid__more { translate: 6px 0; } }

/* ---------------------------------------------------------------- Answer blocks */
.answer-block {
  display: grid; grid-template-columns: 2.75rem minmax(0, 1fr); column-gap: .5rem; row-gap: .5rem;
  border-top: 1px solid var(--df-rule); padding-block: 1.6rem; margin: 0; max-width: 44rem;
}
.answer-block::before { content: "Q"; grid-row: 1 / span 4; font-family: var(--wp--preset--font-family--serif); font-style: italic; font-size: 1.75rem; line-height: 1; color: var(--df-accent-text); padding-top: .15rem; }
.answer-block > * { grid-column: 2; margin: 0; }
.answer-block h2, .answer-block h3 { font-size: var(--wp--preset--font-size--subhead); line-height: 1.25; }
.answer-block p { max-width: 62ch; }
.answer-block__meta { font-size: var(--wp--preset--font-size--small); color: var(--df-muted); }
.answer-block:last-of-type { border-bottom: 1px solid var(--df-rule); }
/* Hover: the same treatment as the card grid (tint, gold bar drawing across, accent to ink). Cosmetic only,
   theme CSS, so approvals are untouched. The tint and bar bleed 1rem each side by box-shadow and offset, so
   no text moves and the separator rules stay where they are. */
.answer-block { position: relative; transition: background-color 200ms var(--df-ease), box-shadow 200ms var(--df-ease); }
.answer-block::after { content: ""; position: absolute; top: -1px; left: -1rem; height: 3px; width: 0; background: var(--wp--preset--color--gold); transition: width 450ms var(--df-ease); }
.answer-block:hover { background: var(--df-ground-2); box-shadow: -1rem 0 0 var(--df-ground-2), 1rem 0 0 var(--df-ground-2); }
.answer-block:hover::after { width: calc(100% + 2rem); }
.answer-block:hover::before { color: var(--df-ink); }
@media (prefers-reduced-motion: reduce) { .answer-block, .answer-block::after { transition: none; } }
.df-answers-intro { max-width: 44rem; }

/* ---------------------------------------------------------------- Credentials strip */
.df-creds { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--df-rule); border-left: 1px solid var(--df-rule); grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }
.df-cred { background: var(--df-ground); padding: 1.6rem 1.5rem; display: grid; gap: .5rem; align-content: start; border-right: 1px solid var(--df-rule); border-bottom: 1px solid var(--df-rule); }
.df-cred__n { font-family: var(--wp--preset--font-family--serif); font-size: clamp(2.5rem, 5vw, 3.75rem); line-height: 1; color: var(--df-ink); letter-spacing: -.02em; }
.df-cred__t { font-size: .9375rem; line-height: 1.5; color: var(--df-body); max-width: 24ch; }

/* ---------------------------------------------------------------- Attorney cards */
.df-attorney { display: grid; gap: 1.5rem; align-items: start; }
.df-attorney--card { grid-template-columns: minmax(0, 9rem) minmax(0, 1fr); }
.df-attorney--feature { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
@media (min-width: 48rem) { .df-attorney--feature { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; } }
.df-attorney__media { display: block; }
.df-attorney__media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: top; border-radius: 4px; }
.df-attorney--feature .df-attorney__media img { aspect-ratio: 4 / 5; max-height: 34rem; }
.df-attorney__name { margin-bottom: .6rem; font-size: var(--wp--preset--font-size--section); }
.df-attorney--card .df-attorney__name { font-size: var(--wp--preset--font-size--subhead); }
.df-attorney__name a { text-decoration: none; }
.df-attorney__name a:hover { color: var(--df-link-hover); }
.df-attorney__blurb { max-width: 52ch; }
.df-attorneys-pair { display: grid; gap: 2.5rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); align-items: stretch; }
.df-attorneys-pair .df-attorney--card { align-content: start; }
/* These groups are grids, not flows: stop the block-gap margin landing on the second column. */
.df-attorneys-pair.is-layout-flow > * + *, .df-intro.is-layout-flow > * + *, .df-answers-preview.is-layout-flow > * + *, .df-feature.is-layout-flow > * + * { margin-block-start: 0; }

/* Our team: the staff under the attorneys. Smaller than the bio cards, no links, name and title only. */
.df-team { margin-block-start: clamp(3rem, 7vw, 5rem); }
.df-team__heading { margin-bottom: 1.5rem; font-size: var(--wp--preset--font-size--subhead); }
.df-team__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2rem 1.5rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 12rem), 1fr)); }
.df-team__media { aspect-ratio: 4 / 5; border-radius: 4px; overflow: hidden; background: var(--wp--preset--color--ivory-deep); display: grid; place-items: center; margin-bottom: .9rem; }
.df-team__media img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.df-team__initials { font-family: var(--wp--preset--font-family--serif); font-size: 2.5rem; letter-spacing: .04em; opacity: .55; }
.df-team__name { margin: 0; font-weight: 600; }
.df-team__title { margin: .2rem 0 0; font-size: .95em; opacity: .8; }

/* Bio cards (the pair): quiet at rest, one deliberate move on hover. The card
   lifts off the page with a soft shadow and a photo-corner grows from one
   corner. Joanna top-left, Brandon bottom-right, so the two corners bracket the
   pair as a single firm. Same on keyboard focus; no animation for reduced motion. */
.df-attorney--card {
  --df-corner: 128px; --df-corner-w: 3px;
  position: relative; padding: 1.25rem; margin: -1.25rem; border-radius: 4px;
  background: var(--df-ground);
  transition: translate 320ms var(--df-ease), box-shadow 320ms var(--df-ease);
}
.df-attorney--card::before {
  content: ""; position: absolute; width: 0; height: 0; pointer-events: none;
  border: 0 solid var(--wp--preset--color--gold); opacity: 0;
  transition: width 420ms var(--df-ease) 60ms, height 420ms var(--df-ease) 60ms, opacity 200ms var(--df-ease);
}
.df-attorney--joanna::before  { top: 0; left: 0; border-top-width: var(--df-corner-w); border-left-width: var(--df-corner-w); border-top-left-radius: 4px; }
.df-attorney--brandon::before { bottom: 0; right: 0; border-bottom-width: var(--df-corner-w); border-right-width: var(--df-corner-w); border-bottom-right-radius: 4px; }
.df-attorney--card:hover, .df-attorney--card:focus-within,
.df-hover-joanna .df-attorney--joanna, .df-hover-brandon .df-attorney--brandon {
  z-index: 2; translate: 0 -4px;
  box-shadow: 0 1px 0 rgba(35,43,54,.04), 0 18px 40px -18px rgba(35,43,54,.28);
}
.df-attorney--card:hover::before, .df-attorney--card:focus-within::before,
.df-hover-joanna .df-attorney--joanna::before, .df-hover-brandon .df-attorney--brandon::before { width: var(--df-corner); height: var(--df-corner); opacity: 1; }
body.door-defense .df-attorney--card { background: var(--df-ground); }
body.door-defense .df-attorney--card:hover, body.door-defense .df-attorney--card:focus-within { box-shadow: 0 18px 40px -18px rgba(0,0,0,.6); }
@media (prefers-reduced-motion: reduce) {
  .df-attorney--card, .df-attorney--card::before { transition: none; }
  .df-attorney--card:hover, .df-attorney--card:focus-within { translate: none; }
}
@media (max-width: 47.99rem) { .df-attorney--card { padding: 1rem; margin: -1rem; } }

/* ---------------------------------------------------------------- CTA band */
.df-band { background: var(--df-ground-2); border-block: 1px solid var(--df-rule); padding-block: clamp(3rem, 7vw, 6rem); }
.df-band__inner { max-width: 88rem; margin-inline: auto; padding-inline: var(--wp--preset--spacing--30); box-sizing: border-box; display: grid; gap: 1.1rem; justify-items: start; }
.df-band__h { font-size: var(--wp--preset--font-size--section); max-width: 22ch; margin: 0; }
.df-band__t { max-width: 58ch; margin: 0 0 .5rem; }
body.door-firm .df-band, body.door-immigration .df-band--invert {
  --df-ground: var(--wp--preset--color--slate); --df-ground-2: var(--wp--preset--color--slate-deep); --df-ink: var(--wp--preset--color--ivory); --df-body: #E6E1D7; --df-muted: var(--wp--preset--color--grey-script); --df-rule: #3A4452; --df-accent-text: var(--wp--preset--color--gold); --df-eyebrow-ink: var(--wp--preset--color--gold); --df-focus: var(--wp--preset--color--gold); --df-link-hover: var(--wp--preset--color--gold);
  background: var(--wp--preset--color--slate); color: var(--df-body);
}
.df-both { display: flex; flex-wrap: wrap; gap: .75rem; }

/* ---------------------------------------------------------------- Home sections */
.df-intro { display: grid; gap: 2rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 48rem) { .df-intro { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: clamp(2rem, 6vw, 6rem); } }
.df-intro__h { font-size: var(--wp--preset--font-size--section); margin: 0; max-width: 16ch; }
.df-intro p:first-child { font-size: var(--wp--preset--font-size--lede); line-height: 1.5; color: var(--df-ink); }
.df-feature { display: grid; gap: 1.5rem; padding: clamp(1.75rem, 4vw, 3rem); background: var(--df-ground-2); border: 1px solid var(--df-rule); border-radius: 4px; }
@media (min-width: 48rem) { .df-feature { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; } }
.df-feature h2 { font-size: var(--wp--preset--font-size--section); }
.df-feature__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.df-feature__list li { padding-left: 1.25rem; position: relative; }
.df-feature__list li::before { content: ""; position: absolute; left: 0; top: .7em; width: .5rem; height: 1px; background: var(--df-accent); }
.df-answers-preview { display: grid; gap: 2rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 60rem) { .df-answers-preview { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2rem, 5vw, 4rem); } }
.df-answers-preview .answer-block { max-width: none; }
.df-answers-preview .answer-block:first-of-type { border-top: 1px solid var(--df-rule); }
.df-col { display: grid; gap: 0; align-content: start; }
.df-col > .df-eyebrow { margin-bottom: 1rem; }
.df-steps { list-style: none; counter-reset: step; margin: 0; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--df-rule); max-width: 44rem; }
.df-steps li { counter-increment: step; display: grid; grid-template-columns: 3rem minmax(0, 1fr); column-gap: .5rem; row-gap: .25rem; padding-block: 1.25rem; border-bottom: 1px solid var(--df-rule); }
.df-steps li::before { content: counter(step, decimal-leading-zero); grid-column: 1; grid-row: 1 / span 2; font-family: var(--wp--preset--font-family--serif); font-size: 1.25rem; color: var(--df-accent-text); padding-top: .15rem; }
.df-steps li > * { grid-column: 2; }
.df-steps strong { display: block; color: var(--df-ink); font-family: var(--wp--preset--font-family--serif); font-weight: 400; font-size: var(--wp--preset--font-size--subhead); line-height: 1.25; }
.df-steps__body { max-width: 60ch; }
.df-result { display: grid; gap: .75rem; padding: 1.75rem; border: 1px solid var(--df-rule); border-left: 3px solid var(--df-accent); background: var(--df-ground-2); max-width: 44rem; }
.df-result h3 { margin: 0; }
.df-result .df-disclaimer { margin: .25rem 0 0; }

/* ---------------------------------------------------------------- Sticky mobile bar */
.df-sticky {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 50; display: flex; gap: 1px;
  background: var(--df-rule); border-top: 1px solid var(--df-rule); padding-bottom: env(safe-area-inset-bottom);
  transition: translate 250ms var(--df-ease);
}
.df-sticky.is-hidden { translate: 0 110%; }
.df-sticky__btn { flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; gap: .35rem; min-height: 3.5rem; padding: .5rem 1rem; text-align: center; text-decoration: none; font-weight: 600; font-size: .9375rem; background: var(--df-ground); color: var(--df-ink); }
.df-sticky__btn--primary { background: var(--wp--preset--color--gold); color: var(--wp--preset--color--slate); }
.df-sticky__btn--primary:hover { background: var(--wp--preset--color--gold-deep); color: var(--wp--preset--color--white); }
.df-sticky__btn--wide span { font-weight: 400; }
.df-sticky__btn strong { font-variant-numeric: tabular-nums; }
@media (max-width: 63.99rem) { body { padding-bottom: 3.5rem; } }
@media (min-width: 64rem) { .df-sticky { display: none; } }

/* ---------------------------------------------------------------- Footer inversion
   As the footer scrolls into view the whole page crosses from the ivory set to the
   slate set: every colour on the site is a variable on <body>, so animating those
   variables from the footer's own view timeline inverts everything still on screen.
   Only on light-ground pages (defense pages are already light-on-dark). Browsers
   without scroll-driven animations keep the dark footer band and nothing else. */
@property --df-ground      { syntax: "<color>"; inherits: true; initial-value: #F7F4EE; }
@property --df-ground-2    { syntax: "<color>"; inherits: true; initial-value: #EEE9DF; }
@property --df-ink         { syntax: "<color>"; inherits: true; initial-value: #232B36; }
@property --df-body        { syntax: "<color>"; inherits: true; initial-value: #3E4A59; }
@property --df-muted       { syntax: "<color>"; inherits: true; initial-value: #68707F; }
@property --df-rule        { syntax: "<color>"; inherits: true; initial-value: #D9D3C5; }
@property --df-rule-strong { syntax: "<color>"; inherits: true; initial-value: #8B93A0; }
@property --df-accent-text { syntax: "<color>"; inherits: true; initial-value: #8E7143; }
@property --df-focus       { syntax: "<color>"; inherits: true; initial-value: #8E7143; }
@property --df-link-hover  { syntax: "<color>"; inherits: true; initial-value: #8E7143; }
@supports (animation-timeline: view()) and (timeline-scope: --x) {
  html { timeline-scope: --df-footer; }
  .df-footer { view-timeline: --df-footer block; }
  body:not(.door-defense) {
    animation: df-invert linear both;
    animation-timeline: --df-footer;
    animation-range: entry 0% entry 55%;
  }
  @keyframes df-invert {
    to {
      --df-ground: #232B36; --df-ground-2: #1A2029; --df-ink: #F7F4EE; --df-body: #E6E1D7;
      --df-muted: #8B93A0; --df-rule: #3A4452; --df-rule-strong: #5A6473;
      --df-accent-text: #B08D57; --df-eyebrow-ink: #B08D57; --df-focus: #B08D57; --df-link-hover: #B08D57;
    }
  }
  /* Elements that hard-code the light ground follow the inversion too, and the
     main column paints the same variable as <body> so every region interpolates
     identically mid-transition. */
  .df-door--immigration { background: var(--df-ground); }
  .df-main, .df-hero { background: var(--df-ground); }
}
/* No stray block-gap between header, main and footer (the ivory line above the footer). */
body .wp-site-blocks > * + * { margin-block-start: 0; }

/* ---------------------------------------------------------------- Footer */
.df-footer {
  --df-ground: var(--wp--preset--color--slate); --df-ground-2: var(--wp--preset--color--slate-deep); --df-ink: var(--wp--preset--color--ivory); --df-body: #E6E1D7; --df-muted: var(--wp--preset--color--grey-script); --df-rule: #3A4452; --df-accent-text: var(--wp--preset--color--gold); --df-eyebrow-ink: var(--wp--preset--color--gold); --df-focus: var(--wp--preset--color--gold); --df-link-hover: var(--wp--preset--color--gold);
  background: var(--df-ground); color: var(--df-body); padding-block: clamp(3rem, 6vw, 5rem) 2rem; margin-top: 0;
}
body.door-defense .df-footer { background: var(--wp--preset--color--slate-deep); border-top: 1px solid #3A4452; }
/* The footer is always slate, so its text colours are literals: nothing upstream
   (door variables, the inversion animation, a browser's handling of registered
   properties) can ever darken them. */
.df-footer, .df-footer p, .df-footer address, .df-footer li { color: #E6E1D7; }
.df-footer a, .df-footer__tag, .df-footer__phone, .df-footer strong { color: #F7F4EE; }
.df-footer .df-muted, .df-footer__meta, .df-footer__meta a { color: #8B93A0; }
.df-footer .df-eyebrow { color: #B08D57; }
.df-footer__logo { color: #F7F4EE; }
.df-footer .df-disclaimer { color: #E6E1D7; }
.df-footer a { text-decoration: none; }
.df-footer a:hover { color: #B08D57; text-decoration: underline; }
.df-footer__grid { display: grid; gap: 2.5rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); margin-bottom: 2.5rem; }
.df-footer__col--firm { grid-column: span 1; }
@media (min-width: 64rem) { .df-footer__grid { grid-template-columns: 1.4fr 1fr 1fr .8fr; } }
.df-footer__menu { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.df-footer__menu a, .df-footer__menu .df-lang { color: var(--df-body); text-decoration: none; font-size: .9375rem; padding: 0; }
.df-footer__menu a:hover, .df-footer__menu .df-lang:hover { color: var(--df-link-hover); text-decoration: underline; }
.df-footer__logo { height: 2.75rem; width: auto; color: var(--df-ink); margin-bottom: 1rem; }
.df-footer__tag { font-family: var(--wp--preset--font-family--serif); font-size: var(--wp--preset--font-size--lede); color: var(--df-ink); margin-bottom: 1rem; }
.df-footer__addr { font-style: normal; line-height: 1.6; margin-bottom: .75rem; }
.df-footer__phone { font-weight: 600; font-size: 1.125rem; font-variant-numeric: tabular-nums; }
.df-footer__legal { border-top: 1px solid var(--df-rule); padding-top: 1.5rem; display: grid; gap: .5rem; max-width: var(--wp--style--global--wide-size); margin-inline: auto; }
.df-footer__meta { font-size: var(--wp--preset--font-size--small); color: var(--df-muted); margin: 0; }
.df-footer__meta a { color: var(--df-muted); }
.df-footer .df-disclaimer { color: var(--df-body); }

/* ---------------------------------------------------------------- Archive / search */
.df-archive__list { display: grid; gap: 0; }
.df-archive__item { padding-block: 1.75rem; border-bottom: 1px solid var(--df-rule); }
.df-archive__title { font-size: var(--wp--preset--font-size--subhead); margin-bottom: .5rem; }
.df-archive__title a { text-decoration: none; }
.df-pagination { margin-top: 2rem; display: flex; gap: 1rem; flex-wrap: wrap; }
.df-search { max-width: 32rem; margin-top: 1.5rem; }
.wp-block-search__label { font-weight: 600; margin-bottom: .5rem; display: block; }
.wp-block-search__input { border: 1.5px solid var(--df-rule-strong); background: var(--wp--preset--color--white); color: var(--wp--preset--color--slate); border-radius: 2px; padding: .7rem .9rem; font: inherit; min-height: 3rem; }
.wp-block-search__button { background: var(--df-accent); color: var(--df-accent-ink); border: 0; border-radius: 2px; padding: .7rem 1.25rem; font: inherit; font-weight: 600; min-height: 3rem; }
.wp-block-search__button:hover { background: var(--wp--preset--color--gold-deep); color: #fff; }

/* ---------------------------------------------------------------- Gravity Forms */
.gform_wrapper { max-width: 44rem; }
.gform_wrapper .gform_required_legend { font-size: var(--wp--preset--font-size--small); color: var(--df-muted); margin-bottom: 1rem; }
.gform_wrapper .gform_fields { display: grid; gap: 1.25rem; }
.gform_wrapper .gfield_label, .gform_wrapper legend.gfield_label { display: block; font-weight: 600; color: var(--df-ink); margin-bottom: .4rem; font-size: var(--wp--preset--font-size--body); }
.gform_wrapper .gfield_required { color: var(--df-accent-text); font-weight: 600; }
.gform_wrapper .gfield_description { font-size: var(--wp--preset--font-size--small); color: var(--df-muted); margin-top: .35rem; max-width: 60ch; }
.gform_wrapper input[type="text"], .gform_wrapper input[type="email"], .gform_wrapper input[type="tel"], .gform_wrapper input[type="number"], .gform_wrapper input[type="date"], .gform_wrapper select, .gform_wrapper textarea {
  width: 100%; box-sizing: border-box; min-height: 3rem; padding: .7rem .9rem; font: inherit; font-size: 1.0625rem; color: var(--wp--preset--color--slate); background: var(--wp--preset--color--white);
  border: 1.5px solid var(--df-rule-strong); border-radius: 2px; transition: border-color 150ms var(--df-ease);
}
.gform_wrapper textarea { min-height: 9rem; }
.gform_wrapper input:focus-visible, .gform_wrapper select:focus-visible, .gform_wrapper textarea:focus-visible { border-color: var(--wp--preset--color--slate); outline-offset: 2px; }
.gform_wrapper .ginput_container_radio .gfield_radio, .gform_wrapper .ginput_container_checkbox .gfield_checkbox { display: grid; gap: .5rem; }
.gform_wrapper .gchoice { display: flex; align-items: flex-start; gap: .6rem; }
.gform_wrapper .gchoice input { width: 1.25rem; height: 1.25rem; margin: .2rem 0 0; accent-color: var(--wp--preset--color--gold-deep); flex-shrink: 0; }
.gform_wrapper .gchoice label { font-weight: 400; margin: 0; }
.gform_wrapper .gfield_error input, .gform_wrapper .gfield_error textarea, .gform_wrapper .gfield_error select { border-color: #A23B2B; }
.gform_wrapper .gfield_validation_message, .gform_wrapper .validation_message { color: #7F2E22; background: #FBEDEA; border: 1px solid #E8B9B1; border-radius: 2px; padding: .5rem .75rem; margin-top: .5rem; font-size: var(--wp--preset--font-size--small); }
.gform_wrapper .gform_validation_errors { border: 1px solid #E8B9B1; background: #FBEDEA; color: #7F2E22; padding: 1rem 1.25rem; border-radius: 2px; margin-bottom: 1.5rem; }
.gform_wrapper .gform_validation_errors h2 { font-family: var(--wp--preset--font-family--sans); font-size: 1rem; color: inherit; margin: 0 0 .5rem; }
.gform_wrapper .gform_footer { margin-top: 1.5rem; display: grid; gap: .75rem; justify-items: start; }
.gform_wrapper .gform_button, .gform_wrapper .gform_next_button, .gform_wrapper .gform_previous_button { display: inline-flex; align-items: center; min-height: 3rem; padding: .8rem 1.5rem; border: 1.5px solid var(--df-accent); border-radius: 2px; background: var(--df-accent); color: var(--df-accent-ink); font: inherit; font-weight: 600; cursor: pointer; }
.gform_wrapper .gform_button:hover { background: var(--wp--preset--color--gold-deep); border-color: var(--wp--preset--color--gold-deep); color: #fff; }
.gform_wrapper .gform_previous_button { background: transparent; color: var(--df-ink); border-color: var(--df-ink); }
.gform_wrapper .gf_page_steps { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; margin-bottom: 1.5rem; padding: 0; list-style: none; font-size: var(--wp--preset--font-size--small); }
.gform_wrapper .gf_step { color: var(--df-muted); }
.gform_wrapper .gf_step_active { color: var(--df-ink); font-weight: 600; }
.gform_wrapper .gf_step_number { display: inline-grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; border: 1px solid currentColor; margin-right: .4rem; font-size: .75rem; }
.gform_wrapper .gfield--type-html { font-size: var(--wp--preset--font-size--small); color: var(--df-muted); }
.gform_wrapper .gform_confirmation_message { font-size: var(--wp--preset--font-size--lede); color: var(--df-ink); }
body.door-defense .gform_wrapper input, body.door-defense .gform_wrapper select, body.door-defense .gform_wrapper textarea { background: #FFFFFF; }
.df-form__disclaimer { margin: 0; }
.df-form__legend { display: inline-block; }

/* ---------------------------------------------------------------- Reveal
   CSS scroll-driven animation: no JavaScript, nothing is ever left hidden, and
   browsers without support (or visitors who prefer reduced motion) simply see
   the content in place. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .df-grid__item, .df-cred, .answer-block, .df-attorney, .df-band__inner, .df-feature, .df-intro, .df-steps li, .df-result {
      animation: df-reveal linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 35%;
    }
    @keyframes df-reveal { from { opacity: 0; translate: 0 18px; } to { opacity: 1; translate: 0 0; } }
  }
}

/* ---------------------------------------------------------------- Print */
@media print {
  .df-header, .df-sticky, .df-nav, .df-band, .df-skip { display: none !important; }
  body { background: #fff; color: #000; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .8em; }
}

/* ---------------------------------------------------------------- Forced colours (Windows High Contrast) */
@media (forced-colors: active) {
  .df-btn, .wp-block-button__link, .df-sticky__btn { border: 2px solid ButtonText; forced-color-adjust: none; background: ButtonFace; color: ButtonText; }
  .df-nav__list a[aria-current] { text-decoration: underline; }
  .df-doors__seam { border: 1px solid CanvasText; }
}

/* ---------------------------------------------------------------- Motion: subtle luxury
   All three effects are enabled by theme.js only, only without reduced motion,
   and every element is fully visible if the script never runs. Easing is one
   slow ease-out; nothing bounces, nothing travels more than a third of a line. */
:root { --df-ease-lux: cubic-bezier(.22,.61,.36,1); }

/* 1. Typeset headings: letters rise a third of an em and settle. */
.df-ts__w { display: inline-block; white-space: nowrap; }
.df-ts__c { display: inline-block; }
@media (prefers-reduced-motion: no-preference) {
  .js .df-typeset .df-ts__c { opacity: 0; transform: translateY(.32em); transition: opacity .55s var(--df-ease-lux), transform .8s var(--df-ease-lux); }
  .js .df-typeset.is-set .df-ts__c { opacity: 1; transform: none; }
}

/* 2. Reading light: full opacity in the middle band; linear fade to 0 through the top and bottom 20% of the viewport. */
.df-focus { transition: opacity .12s linear; } /* opacity is written per frame from position; this only smooths frame steps */

/* 4. Dropped lists: bullets wait until the whole list is on screen, then drop into place
   one after another, top to bottom (theme.js adds .df-drop, then .is-dropped). */
@media (prefers-reduced-motion: no-preference) {
  .js .df-drop > li { opacity: 0; transform: translateY(-.85em); transition: opacity .45s var(--df-ease-lux), transform .6s var(--df-ease-lux); transition-delay: calc(var(--df-drop-i, 0) * 120ms); }
  .df-drop.is-dropped > li { opacity: 1; transform: none; }
}

/* 3. Case file: "what happens next" steps as a rolodex (desktop).
   Every card sticks at the same top, so each scrolls up and completely covers
   the one before it; theme.js eases the covered card back and gives all cards
   the same height. An equal gap after every card, the last included, lets the
   finished stack scroll away as one piece with nothing peeking out. */
.df-steps { --df-deck-dim: .08; }
body.door-defense .df-steps { --df-deck-dim: .22; }
@media (min-width: 64rem) {
  .df-steps--deck { --df-deck-gap: 1.5rem; display: flow-root; border-top: 0; padding: 0; }
  .df-steps--deck li {
    position: sticky; top: calc(var(--df-header-h) + 2rem + var(--wp-admin--admin-bar--height, 0px)); box-sizing: border-box; margin: 0 0 var(--df-deck-gap);
    padding: 1.05rem 2.25rem 1.75rem; grid-template-columns: 4rem minmax(0, 1fr); row-gap: .5rem; align-content: start;
    background: var(--df-ground-2); border: 1px solid var(--df-rule); border-radius: 4px;
    box-shadow: 0 1px 0 rgba(35,43,54,.03), 0 -18px 40px -30px rgba(35,43,54,.28), 0 22px 44px -30px rgba(35,43,54,.35);
    transform-origin: 50% 0; will-change: transform, filter; animation: none;
  }
  .df-steps--deck li::before { font-size: 1.5rem; line-height: 1.3; padding-top: 0; }
  .df-steps--deck strong { font-size: var(--wp--preset--font-size--subhead); }
  body.door-defense .df-steps--deck li { box-shadow: 0 -18px 40px -26px rgba(0,0,0,.55), 0 22px 44px -26px rgba(0,0,0,.65); }
}