/* Full-bleed sayfa bolumleri icin Kadence'in icerik kutusunu sifirlar.
   article:not(.loop-entry) sarti sart: blog kartlari da ayni sinifi tasiyor,
   ve !important yuzunden kartlarin ic boslugu hicbir zaman uygulanamiyordu. */
article:not(.loop-entry)>.entry-content-wrap,
body:not(.single-post) .entry-content.single-content,
body:not(.single-post) .single-entry .entry-content-wrap,
.page .entry-content-wrap {
  padding: 0 !important;
  margin: 0 !important;
}

/* -------- 1. TOKENS ---------- */
:root {
  --es-canvas: #0B1E33;
  --es-canvas-2: #13314F;
  --es-canvas-3: #0E2740;
  --es-accent: #E0A53B;
  --es-accent-deep: #C68A24;
  --es-accent-ink: #3D2A06;
  --es-paper: #F5F7FA;
  --es-paper-2: #E8EDF3;
  --es-ink: #1F2933;
  --es-ink-soft: #4A5568;
  --es-text-on-dark: #F2EFE9;
  --es-muted-on-dark: #8FA3B8;
  --es-meta: #157567;
  /* directory badges ONLY */
  --es-hairline: rgba(20, 32, 50, .15);
  --es-hairline-dark: rgba(242, 239, 233, .18);
  --es-serif: "Fraunces", Georgia, "Times New Roman", serif;
  --es-sans: "Archivo", "Segoe UI", system-ui, -apple-system, sans-serif;
  --es-shell: 1500px;
  --es-radius: 10px;
  --es-arch: 999px 999px 0 0;
  --es-ease: cubic-bezier(.22, .61, .36, 1);
  --es-reveal-dur: .7s;
}

/* ---------- 2. BASE & TYPE ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font: 400 17px/1.65 var(--es-sans);
  color: var(--es-ink);
  background: var(--es-paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img {
  max-width: 100%;
  display: block;
}

html,
body {
  overflow-x: clip;
}

a {
  color: inherit;
}

::selection {
  background: var(--es-accent);
  color: var(--es-accent-ink);
}

h1,
h2,
h3,
h4 {
  margin: 0 0 .5em;
}

.es-h1,
.es-h2 {
  font-family: var(--es-serif);
  font-weight: 500;
  letter-spacing: 0;
}

.es-h1 {
  font-size: clamp(38px, 5.2vw, 68px);
  line-height: 1.05;
}

.es-h2 {
  font-size: clamp(28px, 3.2vw, 42px);
  line-height: 1.15;
}

.es-h1 em,
.es-h2 em {
  font-style: italic;
  font-weight: 600;
}

/* italic ems gain half a weight step */
h3 {
  font-family: var(--es-sans);
  font-weight: 600;
  font-size: 20px;
  line-height: 1.3;
}

.es-lead {
  font-size: clamp(18px, 1.6vw, 20px);
  line-height: 1.55;
  max-width: 60ch;
}

p {
  margin: 0 0 1em;
  max-width: 68ch;
}

.es-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font: 600 13px/1.4 var(--es-sans);
  letter-spacing: .06em;
  text-transform: uppercase;
}

.es-eyebrow::before {
  content: "";
  width: 9px;
  height: 12px;
  border-radius: 999px 999px 0 0;
  background: var(--es-accent);
  /* accent square */
}

:focus-visible {
  outline: 2px solid var(--es-accent);
  outline-offset: 2px;
}

.es-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------- 3. UTILITIES ---------- */
.es-shell {
  max-width: var(--es-shell);
  margin: 0 auto;
  padding: 0 24px;
}

.es-rule {
  border: 0;
  height: 1px;
  background: var(--es-hairline);
  position: relative;
  margin: 0;
}

.es-rule::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 48px;
  height: 1px;
  background: var(--es-accent);
}

.es-dark .es-rule {
  background: var(--es-hairline-dark);
}

/* word-split wrappers (GSAP headline reveal) */
.es-w {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  /* Room for descenders (g y p q j) and for the sideways overhang of an
     italic word: the mask reaches past the glyph, then the negative margins
     take that room back out of layout so word spacing is unchanged.
     0.16em was enough for the roman but not for Fraunces italic, which
     descends further and leans right, so an emphasised word such as
     <em>directory</em> lost the tail of its y and its final letter. */
  padding: 0 0.08em 0.24em;
  margin: 0 -0.08em -0.24em;
}

.es-w>span {
  display: inline-block;
}

/* Lenis smooth scroll active: native smooth off */
html.has-lenis {
  scroll-behavior: auto;
}

/* quarter-circle arc backdrop — one per dark section max */
.es-arc {
  position: relative;
  overflow: hidden;
}

.es-arc::after {
  content: "";
  position: absolute;
  right: -12vw;
  bottom: -18vw;
  width: 44vw;
  height: 44vw;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  opacity: .05;
  pointer-events: none;
}

/* ---------- 4. BUTTONS ---------- */
.es-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  /* One line, always.
     A pill with a rounded 999px radius reads as a button; the same pill
     wrapped onto two lines reads as a paragraph somebody drew a box round,
     and the arrow ends up orphaned under the last word. The longest label
     on the site is "Find an expert for independent medical examinations",
     so the size is a clamp rather than a fixed 16px: it holds 16px wherever
     there is room and gives way before the text does. The padding tracks it
     for the same reason - a long label in a narrow column should lose the
     generous inset before it loses the single line. */
  font: 600 clamp(13px, .34vw + 12.1px, 16px)/1 var(--es-sans);
  padding: 16px clamp(18px, 1.9vw, 28px);
  white-space: nowrap;
  border-radius: 999px;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .18s ease-out, background .18s ease-out, border-color .18s ease-out;
}

/* The arrow is decoration and must never be what pushes a label over the
   edge: it keeps its own space but is the first thing allowed to give. */
.es-btn .arr {
  flex: 0 0 auto;
}

@media (max-width: 560px) {

  /* Below this the columns are single-file, so a long label has the whole
     screen and can drop to the smallest size that still reads. */
  .es-btn {
    font-size: clamp(12.5px, 3.5vw, 15px);
    padding: 14px 18px;
    gap: 8px;
  }
}

.es-btn--gold {
  background: var(--es-accent);
  color: var(--es-accent-ink);
}

.es-btn--gold:hover,
.es-btn--gold:focus-visible {
  background: var(--es-accent-deep);
  transform: translateY(-1px);
}

.es-btn--ghost {
  border-color: currentColor;
  color: inherit;
  background: transparent;
}

.es-btn--ghost:hover,
.es-btn--ghost:focus-visible {
  transform: translateY(-1px);
  border-color: var(--es-accent);
  color: var(--es-accent);
}

.es-btn .arr {
  transition: transform .18s ease-out;
}

.es-btn:hover .arr {
  transform: translateX(3px);
}

.es-textlink {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: text-decoration-thickness .15s;
}

.es-textlink:hover,
.es-textlink:focus-visible {
  text-decoration-thickness: 2px;
  color: var(--es-accent-deep);
}

.es-dark .es-textlink:hover {
  color: var(--es-accent);
}

/* ---------- 5. ARCH FRAMES — the signature geometry ---------- */
.es-arch-frame {
  position: relative;
}

.es-arch-frame__img {
  border-radius: var(--es-arch);
  overflow: hidden;
  position: relative;
  z-index: 1;
}

.es-arch-frame__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.es-arch-frame::before {
  /* single offset hairline arch echo */
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  transform: translate(22px, -22px);
  border-radius: var(--es-arch);
  border: 1.5px solid var(--es-accent);
  opacity: .45;
  pointer-events: none;
}

.es-light .es-arch-frame::before {
  border-color: var(--es-accent-deep);
  opacity: .5;
}

.es-routes-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .72fr);
  gap: clamp(28px, 4.5vw, 64px);
  align-items: center;
}

.es-routes-grid .es-halfarch {
  aspect-ratio: 4 / 5;
}

.es-halfarch--r {
  /* same arch; the sibling across the page differs by content, not by shape */
  border-radius: 999px 999px 14px 14px;
}

.es-halfarch {
  /* true arch: rounded crown, square feet - the hero geometry, section scale */
  border-radius: 999px 999px 14px 14px;
  overflow: hidden;
  position: relative;
  aspect-ratio: 4 / 5;
}

.es-halfarch img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- 6. REVEAL STATES (motion spec §6) ---------- */
.js [data-es-reveal] {
  opacity: 0;
  transform: translateY(18px);
  will-change: opacity, transform;
}

.js [data-es-reveal].es-in {
  opacity: 1;
  transform: none;
  will-change: auto;
  transition: opacity var(--es-reveal-dur) var(--es-ease), transform var(--es-reveal-dur) var(--es-ease);
}

/* stagger: children of [data-es-stagger] get delays from JS (90ms steps, max 5) */

/* ---------- 8. HERO: SVG arcade, towers escape the arches ---------- */
.es-hero .es-shell {
  max-width: 1380px;
}

.es-hero {
  background: var(--es-canvas);
  color: var(--es-text-on-dark);
  padding: clamp(6px, 1vw, 14px) 0 clamp(30px, 4vw, 54px);
}

.es-hero__stage {
  position: relative;
}

.es-hero__art {
  position: relative;
}

.es-arcade-svg {
  display: block;
  width: 100%;
  height: auto;
}

/* The supplied panorama is intentionally low-key. Lift the photograph itself
   instead of brightening the navy page background or weakening the text. */
.es-arcade-svg .es-arcade-photo {
  filter: brightness(1.8) contrast(1.03) saturate(1.08);
}

.es-hero__overlay {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: clamp(26px, 5vw, 62px);
  transform: translateX(-50%);
  width: min(92%, 880px);
  text-align: center;
  display: grid;
  justify-items: center;
  gap: 17px;
  background: radial-gradient(ellipse 62% 78% at 50% 58%, rgba(11, 30, 51, .14) 0%, rgba(11, 30, 51, 0) 68%);
}

.es-hero__overlay .es-h1 {
  font-size: clamp(38px, 5.4vw, 76px);
  margin: 0;
  text-wrap: balance;
  text-shadow: 0 2px 14px rgba(7, 16, 28, .85), 0 2px 44px rgba(7, 16, 28, .6);
}

.es-hero__overlay .es-lead {
  text-wrap: balance;
  color: rgba(242, 239, 233, .9);
  max-width: 56ch;
  margin: 0;
  font-size: clamp(16px, 1.4vw, 19px);
}

.es-hero__actions {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 6px;
}

.es-hero .es-textlink {
  color: rgba(242, 239, 233, .88);
}

/* ---------- 9. PROOF STRIP ---------- */
.es-proof {
  background: #E8EDF3;
  color: var(--es-ink);
}

.es-proof__grid {
  display: grid;
  /* minmax(0,...) not 1fr. A bare 1fr is minmax(auto, 1fr), and that
     `auto` floor is min-content - so one long unbreakable value drags
     its track wider than its share and pushes the whole strip past the
     shell. Measured: "Remote & Face-to-Face" took a 269px column to
     453px and ran off the right edge at 1440. */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  padding: 34px 0 26px;
}

/* The keystone caps the rule, so it has to be centred on it (7 Aug).
   `left` is measured from the padding box, so the 1px border-left occupies
   -1px to 0 and its centre sits at -0.5px. Half the keystone is 4.5px, so
   -0.5 - 4.5 = -5px. At -1px the rule met the keystone's left edge. */
.es-proof__item::before {
  content: "";
  position: absolute;
  left: -5px;
  top: 0;
  width: 9px;
  height: 12px;
  border-radius: 999px 999px 0 0;
  background: var(--es-accent);
}

.es-proof__item {
  position: relative;
  border-left: 1px solid var(--es-hairline);
  padding-left: 18px;
}

.es-proof__num {
  font: 500 clamp(18px, 1.5vw, 22px)/1.15 var(--es-serif);
  /* this slot holds numbers AND phrases. `anywhere` is deliberate:
     unlike break-word it also lowers the element's min-content width,
     which is what actually lets the track shrink. balance keeps a
     two-line phrase from breaking as one word and one orphan. */
  overflow-wrap: anywhere;
  text-wrap: balance;
}

.es-proof__num em {
  font-style: italic;
  font-weight: 600;
}

/* A tile whose "number" is a phrase rather than a figure (7 Aug).
   At the numeral size a two-word phrase wraps to a second line and the
   four labels stop sitting on one baseline; this keeps it to one line. */
.es-proof__num--text {
  font-size: clamp(18px, 1.5vw, 22px);
  line-height: 1.15;
  letter-spacing: -.01em;
}

@media (min-width: 1200px) {
  .es-proof__num--text {
    white-space: nowrap;
  }
}

/* Every tile is a link (7 Aug). The keystone already nods on hover, so the
   tile itself only needs the gold rule and the ink shift: enough affordance
   to read as clickable, restrained enough not to turn the strip into a row
   of buttons. Plus a focus ring, which the div version never needed. */
a.es-proof__item {
  display: block;
  text-decoration: none;
  color: inherit;
  transition: border-left-color .22s var(--es-ease);
}

a.es-proof__item .es-proof__num {
  transition: color .22s var(--es-ease);
}

a.es-proof__item:hover {
  border-left-color: var(--es-accent);
}

a.es-proof__item:hover .es-proof__num {
  color: var(--es-accent-deep);
}

a.es-proof__item:focus-visible {
  outline: 2px solid var(--es-accent);
  outline-offset: 4px;
}

.es-proof__lbl {
  font: 400 13.5px/1.4 var(--es-sans);
  color: var(--es-ink-soft);
  margin-top: 6px;
}

.es-proof__note {
  padding: 0 0 30px;
  color: var(--es-ink-soft);
  font-size: 15px;
  max-width: none;
}

/* ---------- 10. SEARCH BANNER ---------- */
.es-banner {
  background: var(--es-paper-2);
  border-bottom: 1px solid var(--es-hairline);
}

.es-banner__row {
  display: flex;
  align-items: flex-end;
  gap: 14px;
  padding: 26px 0;
  flex-wrap: wrap;
}

.es-banner__lead {
  font: 500 clamp(22px, 2vw, 26px)/1.1 var(--es-serif);
  margin-right: 10px;
}

.es-banner__lead em {
  font-style: italic;
  font-weight: 600;
}

.es-field {
  display: grid;
  gap: 6px;
  flex: 1 1 180px;
  position: relative;
}

.es-field>span {
  font: 600 12px/1 var(--es-sans);
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--es-ink-soft);
}

.es-field input[type="search"],
.es-field input[type="text"] {
  font: 400 15.5px/1.2 var(--es-sans);
  color: var(--es-ink);
  background: #fff;
  border: 1px solid var(--es-hairline);
  border-radius: 8px;
  padding: 13px 14px;
  width: 100%;
}

.es-field input:focus-visible {
  outline: 2px solid var(--es-accent);
  outline-offset: 0;
  border-color: transparent;
}

.es-combo__list {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 40;
  background: #fff;
  border: 1px solid var(--es-hairline);
  border-radius: 8px;
  max-height: 260px;
  overflow: auto;
  /* Reaching the bottom of this list handed the wheel to the page behind
     it, so the last flick of a scroll jumped the whole document. The
     directory's lists have had this since it was found there; the banner's
     never got it. Also gives the thumb the same weight as the directory's,
     which is thin and gold rather than the browser default. */
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--es-accent-deep) transparent;
  box-shadow: 0 14px 30px rgba(20, 30, 45, .12);
}

.es-combo__list::-webkit-scrollbar {
  width: 10px;
}

.es-combo__list::-webkit-scrollbar-track {
  background: transparent;
}

.es-combo__list::-webkit-scrollbar-thumb {
  background: var(--es-hairline);
  border-radius: 999px;
  border: 3px solid #fff;
}

.es-combo__list::-webkit-scrollbar-thumb:hover {
  background: var(--es-accent-deep);
}

.es-combo__list[hidden] {
  display: none;
}

.es-combo__opt {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  font: 400 15px/1.3 var(--es-sans);
  padding: 10px 14px;
  cursor: pointer;
}

.es-combo__opt:hover,
.es-combo__opt:focus-visible {
  background: var(--es-paper-2);
}

.es-combo__opt[aria-selected="true"] {
  background: var(--es-paper-2);
  font-weight: 600;
}

/* ---------- 11. DIRECTORY (restyles expert.php output, ewd-*) ---------- */
.ewd {
  background: var(--es-paper);
  padding: clamp(40px, 6vw, 76px) 0;
}

.ewd__wrap {
  max-width: var(--es-shell);
  margin: 0 auto;
  padding: 0 24px;
}

.ewd__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font: 600 13px/1.4 var(--es-sans);
  letter-spacing: .06em;
  text-transform: uppercase;
}

.ewd__eyebrow::before {
  content: "";
  width: 8px;
  height: 8px;
  background: var(--es-accent);
}

.ewd__title {
  font: 500 clamp(28px, 3.2vw, 42px)/1.15 var(--es-serif);
  margin: 12px 0 10px;
}

.ewd__intro {
  color: var(--es-ink-soft);
  max-width: 72ch;
}

/* ---- filter panel ---- */
.ewd__panel {
  margin-top: 28px;
}

.ewd__filters {
  display: grid;
  grid-template-columns: 1.5fr repeat(4, 1fr) auto;
  gap: 14px;
  align-items: start;
}

.ewd__field {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.ewd__field>span {
  font: 600 11.5px/1 var(--es-sans);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--es-ink-soft);
}

/* ---- keyword field: input + apply, one unit ---- */
.ewd-search {
  display: flex;
  background: #fff;
  border: 1px solid var(--es-hairline);
  border-radius: 10px;
  overflow: hidden;
  transition: border-color .15s, box-shadow .15s;
}

.ewd-search:focus-within {
  border-color: var(--es-accent);
  box-shadow: 0 0 0 3px rgba(224, 165, 59, .18);
}

.ewd-search input {
  flex: 1;
  min-width: 0;
  font: 400 15px/1.2 var(--es-sans);
  color: var(--es-ink);
  background: none;
  border: 0;
  padding: 13px 14px;
}

.ewd-search input:focus {
  outline: none;
}

.ewd-search input::-webkit-search-cancel-button {
  -webkit-appearance: none;
}

.ewd-search__apply {
  flex: none;
  font: 600 13.5px/1 var(--es-sans);
  color: var(--es-accent-ink);
  background: var(--es-accent);
  border: 0;
  padding: 0 18px;
  cursor: pointer;
  transition: background .15s;
}

.ewd-search__apply:hover,
.ewd-search__apply:focus-visible {
  background: var(--es-accent-deep);
}

.ewd-search__hint {
  font: 400 11.5px/1.4 var(--es-sans);
  color: var(--es-ink-soft);
  opacity: .8;
}

/* ---- combo: the trigger ---- */
.ewd-combo {
  position: relative;
}

.ewd-combo input {
  width: 100%;
  font: 400 15px/1.2 var(--es-sans);
  color: var(--es-ink);
  background: #fff;
  border: 1px solid var(--es-hairline);
  border-radius: 10px;
  padding: 13px 40px 13px 14px;
  text-overflow: ellipsis;
  transition: border-color .15s, box-shadow .15s;
}

.ewd-combo input:focus {
  outline: none;
  border-color: var(--es-accent);
  box-shadow: 0 0 0 3px rgba(224, 165, 59, .18);
}

.ewd-combo input[readonly] {
  cursor: pointer;
}

.ewd-combo__toggle {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: 0;
  padding: 9px;
  cursor: pointer;
  color: var(--es-ink-soft);
  display: grid;
  place-items: center;
}

.ewd-combo__icon {
  width: 16px;
  height: 16px;
  transition: transform .2s;
}

.ewd-combo.is-open .ewd-combo__icon {
  transform: rotate(180deg);
  color: var(--es-accent-deep);
}

/* ---- combo: the list ---- */
.ewd-combo__list {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 45;
  background: #fff;
  border: 1px solid var(--es-hairline);
  border-radius: 10px;
  padding: 6px;
  max-height: 288px;
  overflow-y: auto;
  /* the fix: wheel events stop at the list edge instead of scrolling the page */
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--es-accent-deep) transparent;
  box-shadow: 0 18px 38px rgba(20, 30, 45, .16);
}

.ewd-combo.is-up .ewd-combo__list {
  top: auto;
  bottom: calc(100% + 6px);
}

.ewd-combo__list[hidden] {
  display: none;
}

.ewd-combo__list::-webkit-scrollbar {
  width: 10px;
}

.ewd-combo__list::-webkit-scrollbar-track {
  background: transparent;
}

.ewd-combo__list::-webkit-scrollbar-thumb {
  background: var(--es-hairline);
  border-radius: 999px;
  border: 3px solid #fff;
}

.ewd-combo__list::-webkit-scrollbar-thumb:hover {
  background: var(--es-accent-deep);
}

.ewd-combo__option {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  border-radius: 7px;
  font: 400 14.5px/1.35 var(--es-sans);
  color: var(--es-ink);
  padding: 10px 12px;
  cursor: pointer;
  transition: background .12s, color .12s;
}

.ewd-combo__option[hidden] {
  display: none;
}

.ewd-combo__option:hover,
.ewd-combo__option.is-active {
  background: var(--es-paper-2);
}

.ewd-combo__option:focus-visible {
  outline: 2px solid var(--es-accent);
  outline-offset: -2px;
}

.ewd-combo__option[aria-selected="true"] {
  background: var(--es-canvas);
  color: var(--es-text-on-dark);
  font-weight: 600;
}

.ewd-combo__empty {
  padding: 16px 12px;
  font: 400 14px/1.4 var(--es-sans);
  color: var(--es-ink-soft);
  text-align: center;
}

.ewd-combo__empty[hidden] {
  display: none;
}

.ewd__reset {
  align-self: end;
  background: none;
  border: 0;
  font: 600 13.5px/1 var(--es-sans);
  color: var(--es-ink-soft);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  padding: 15px 4px;
  white-space: nowrap;
}

.ewd__reset:hover,
.ewd__reset:focus-visible {
  color: var(--es-accent-deep);
}

/* ---- applied filters: every one removable ---- */
.ewd__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin: 18px 0 0;
}

.ewd__chips[hidden] {
  display: none;
}

.ewd__chip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font: 400 13.5px/1 var(--es-sans);
  color: var(--es-ink);
  background: #fff;
  border: 1px solid var(--es-hairline);
  border-radius: 999px;
  padding: 8px 8px 8px 14px;
  animation: ewd-chip-in .18s var(--es-ease);
}

@keyframes ewd-chip-in {
  from {
    opacity: 0;
    transform: translateY(-3px);
  }
}

.ewd__chip-text b {
  font-weight: 600;
  color: var(--es-accent-deep);
  margin-right: 5px;
}

.ewd__chip-x {
  background: var(--es-paper-2);
  border: 0;
  border-radius: 999px;
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  font-size: 15px;
  line-height: 1;
  color: var(--es-ink-soft);
  cursor: pointer;
  transition: background .15s, color .15s;
}

.ewd__chip-x:hover,
.ewd__chip-x:focus-visible {
  background: var(--es-canvas);
  color: var(--es-text-on-dark);
}

.ewd__chip--clear {
  padding: 8px 14px;
  border-style: dashed;
  color: var(--es-ink-soft);
  cursor: pointer;
  font-weight: 600;
}

.ewd__chip--clear:hover {
  border-color: var(--es-accent-deep);
  color: var(--es-accent-deep);
}

.ewd__meta {
  margin: 18px 0 10px;
  font-size: 14.5px;
  color: var(--es-ink-soft);
}

.ewd__meta strong {
  color: var(--es-ink);
}


/* ---- cards ---- */
.ewd__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 10px;
}

.ewd-card {
  background: #fff;
  border: 1px solid var(--es-hairline);
  border-radius: var(--es-radius);
  padding: 22px;
  position: relative;
  display: flex;
  flex-direction: column;
  transition: transform .2s ease-out, box-shadow .2s ease-out;
}

.ewd-card[hidden] {
  display: none;
}

.ewd-card::after {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  width: 48px;
  height: 2px;
  background: var(--es-accent);
  opacity: 0;
  transition: opacity .2s ease-out;
}

.ewd-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(20, 30, 45, .09);
}

.ewd-card:hover::after {
  opacity: 1;
}

.ewd-card__top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 14px;
}

.ewd-card__initials {
  width: 46px;
  height: 46px;
  flex: none;
  display: grid;
  place-items: center;
  font: 500 16px/1 var(--es-serif);
  color: var(--es-canvas);
  border: 1.5px solid var(--es-accent);
  /* the arch, at card scale */
  border-radius: 999px 999px 6px 6px;
}

.ewd-card__badges {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.ewd-card__badge {
  font: 500 11.5px/1 var(--es-sans);
  color: var(--es-meta);
  border: 1px solid currentColor;
  border-radius: 999px;
  padding: 5px 10px;
  white-space: nowrap;
}

.ewd-card__name {
  font: 600 17.5px/1.3 var(--es-sans);
  margin: 0 0 3px;
}

.ewd-card__specialty {
  color: var(--es-accent-deep);
  font-size: 14.5px;
  font-weight: 500;
  margin: 0 0 14px;
}

/* ---- areas of experience: the bullet list a real expert card carries ---- */
.ewd-card__tags {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  display: grid;
  gap: 7px;
  border-top: 1px solid var(--es-hairline);
  padding-top: 14px;
}

.ewd-card__tags li {
  position: relative;
  padding-left: 16px;
  font: 400 13.5px/1.4 var(--es-sans);
  color: var(--es-ink-soft);
}

.ewd-card__tags li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .48em;
  width: 6px;
  height: 6px;
  background: var(--es-accent);
}

.ewd-card__appointment {
  font-size: 12.5px;
  color: var(--es-ink-soft);
  margin: 0 0 16px;
}

.ewd-card__appointment span {
  border: 1px solid var(--es-hairline);
  border-radius: 999px;
  padding: 5px 11px;
  display: inline-block;
}

.ewd-card__contact {
  margin-top: auto;
  font: 600 14.5px/1 var(--es-sans);
  color: var(--es-accent-ink);
  background: var(--es-accent);
  border: 0;
  border-radius: 999px;
  padding: 12px 18px;
  cursor: pointer;
  transition: background .18s, transform .18s;
}

.ewd-card__contact:hover,
.ewd-card__contact:focus-visible {
  background: var(--es-accent-deep);
  transform: translateY(-1px);
}

.ewd__empty {
  padding: 56px 0;
  text-align: center;
  color: var(--es-ink-soft);
  font-size: 16px;
}

.ewd__empty[hidden] {
  display: none;
}

/* ---- pagination: windowed, never 57 buttons ---- */
.ewd__pagination {
  display: flex;
  gap: 6px;
  justify-content: center;
  align-items: center;
  margin-top: 34px;
  flex-wrap: wrap;
}

.ewd__page {
  min-width: 42px;
  padding: 11px 13px;
  font: 600 14px/1 var(--es-sans);
  color: var(--es-ink);
  background: #fff;
  border: 1px solid var(--es-hairline);
  border-radius: 9px;
  cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
}

.ewd__page:hover:not(.is-active) {
  border-color: var(--es-accent-deep);
  color: var(--es-accent-deep);
}

.ewd__page.is-active {
  background: var(--es-canvas);
  color: var(--es-text-on-dark);
  border-color: var(--es-canvas);
}

.ewd__page--nav {
  font-size: 16px;
  padding: 11px 15px;
}

.ewd__page-gap {
  color: var(--es-ink-soft);
  padding: 0 2px;
  user-select: none;
}

/* ---- modal ---- */
.ewd-modal {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: 20px;
}

.ewd-modal[hidden] {
  display: none;
}

.ewd-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(7, 16, 28, .62);
  backdrop-filter: blur(2px);
}

.ewd-modal__dialog {
  position: relative;
  background: var(--es-paper);
  border-radius: var(--es-radius);
  max-width: 560px;
  width: 100%;
  max-height: 88vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 32px;
}

.ewd-modal__close {
  position: absolute;
  top: 12px;
  right: 14px;
  background: none;
  border: 0;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  color: var(--es-ink-soft);
}

.ewd-modal__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font: 600 12.5px/1.4 var(--es-sans);
  letter-spacing: .06em;
  text-transform: uppercase;
}

.ewd-modal__eyebrow::before {
  content: "";
  width: 8px;
  height: 8px;
  background: var(--es-accent);
}

.ewd-modal__head h2 {
  font: 500 26px/1.2 var(--es-serif);
  margin: 10px 0 4px;
}

.ewd-modal__head p {
  color: var(--es-ink-soft);
  font-size: 15px;
}

@media (max-width:1180px) {
  .ewd__filters {
    grid-template-columns: repeat(3, 1fr);
  }

  .ewd__field--search {
    grid-column: 1 / -1;
  }

  .ewd__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width:720px) {
  .ewd__filters {
    grid-template-columns: repeat(2, 1fr);
  }

  .ewd__grid {
    grid-template-columns: 1fr;
  }

  .ewd__reset {
    grid-column: 1 / -1;
    justify-self: start;
  }
}

@media (prefers-reduced-motion:reduce) {

  .ewd-card,
  .ewd-card__contact,
  .ewd__chip,
  .ewd-combo__icon {
    transition: none;
    animation: none;
  }
}

/* ---------- 12. SECTIONS ---------- */
.es-sec {
  content-visibility: auto;
  contain-intrinsic-size: auto 600px;
}

.es-sec {
  padding: clamp(48px, 7vw, 92px) 0;
}

.es-sec--band {
  background: var(--es-paper-2);
}

.es-sec--dark {
  background: var(--es-canvas);
  color: var(--es-text-on-dark);
}

.es-sec__head {
  max-width: 720px;
  margin-bottom: clamp(26px, 4vw, 44px);
}

.es-sec__head .es-h2 {
  margin: 14px 0 12px;
}

.es-sec__intro {
  color: var(--es-ink-soft);
}

.es-sec--dark .es-sec__intro {
  color: var(--es-muted-on-dark);
}

/* specialty group cards - editorial rows, not boxes */
.es-groups {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0 clamp(28px, 4vw, 56px);
}

.es-group {
  position: relative;
  padding: 26px 0 30px;
  border-top: 1px solid var(--es-hairline);
  transition: none;
}

.es-group::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 48px;
  height: 2px;
  background: var(--es-accent);
  opacity: 0;
  transition: opacity .2s ease-out;
}

.es-group:hover::before {
  opacity: 1;
}

.es-group__num::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 11px;
  border-radius: 999px 999px 0 0;
  background: var(--es-accent);
  margin-right: 9px;
  vertical-align: baseline;
}

.es-group__num {
  display: block;
  font: italic 400 15px/1 var(--es-serif);
  color: var(--es-accent-deep);
  margin-bottom: 14px;
  letter-spacing: .04em;
}

.es-group h3 {
  font-family: var(--es-serif);
  font-weight: 500;
  font-size: 23px;
  margin-bottom: 8px;
}

.es-group p {
  color: var(--es-ink-soft);
  font-size: 15px;
  margin: 0;
  max-width: 34ch;
}

.es-groups__foot {
  margin-top: 34px;
}

/* two-column prose */
.es-cols {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(24px, 3.4vw, 52px);
}

.es-cols p:last-child {
  margin-bottom: 0;
}

/* routing list */
.es-routes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
}

.es-routes li {
  display: grid;
  grid-template-columns: 190px 1fr;
  gap: 18px;
  padding: 18px 0;
  border-top: 1px solid var(--es-hairline);
}

.es-routes li:last-child {
  border-bottom: 1px solid var(--es-hairline);
}

.es-routes .t::before {
  content: "";
  display: inline-block;
  width: 9px;
  height: 12px;
  border-radius: 999px 999px 0 0;
  background: var(--es-accent);
  margin-right: 12px;
}

.es-routes .t {
  font: 600 16px/1.4 var(--es-sans);
}

.es-routes .t a {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

.es-routes .t a:hover {
  color: var(--es-accent-deep);
  text-decoration-thickness: 2px;
}

.es-routes .d {
  color: var(--es-ink-soft);
  font-size: 15.5px;
  margin: 0;
}

.es-midcta {
  margin-top: 30px;
}

/* register section */
.es-register__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .85fr);
  gap: clamp(30px, 5vw, 70px);
  align-items: center;
}

.es-register__visual .es-halfarch {
  aspect-ratio: 4 / 5;
  max-width: 420px;
}

/* closing block */
.es-close {
  background: var(--es-canvas);
  color: var(--es-text-on-dark);
}

.es-close__inner {
  display: grid;
  gap: 26px;
  justify-items: center;
  text-align: center;
  padding: clamp(52px, 7vw, 88px) 0;
}

.es-close__strip {
  display: flex;
  gap: 30px;
  flex-wrap: wrap;
  justify-content: center;
  color: var(--es-muted-on-dark);
  font-size: 15px;
}

.es-close__strip span {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
}

.es-close__strip span+span::before {
  content: "";
  width: 9px;
  height: 12px;
  border-radius: 999px 999px 0 0;
  background: var(--es-accent);
  opacity: .8;
  margin-right: 22px;
  align-self: center;
}

.es-close__strip strong {
  color: var(--es-text-on-dark);
  font: 500 18px/1 var(--es-serif);
}

.es-close .es-h2 {
  max-width: 16ch;
}

.es-close__actions {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
  justify-content: center;
}

/* ---------- 14. PREVIEW-ONLY (delete before WP paste) ---------- */
.es-preview-note {
  background: repeating-linear-gradient(-45deg, #fff3cd, #fff3cd 12px, #ffe69c 12px, #ffe69c 24px);
  color: #664d03;
  font: 600 13px/1.5 var(--es-sans);
  padding: 10px 16px;
  border-radius: 8px;
  margin: 0 0 18px;
}

/* ---------- 15. RESPONSIVE ---------- */
@media (max-width: 1100px) {

  .ewd__filters {
    grid-template-columns: repeat(3, 1fr);
  }

  .ewd__grid,
  .es-groups {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 900px) {
  .es-routes-grid {
    grid-template-columns: 1fr;
  }

  .es-routes-grid .es-halfarch {
    max-width: 480px;
  }

  .es-register__grid {
    grid-template-columns: 1fr;
  }

  .es-register__visual {
    order: -1;
    max-width: 480px;
  }

  .es-proof__grid {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 26px;
  }
}

@media (max-width: 640px) {
  .es-cols {
    grid-template-columns: 1fr;
  }

  .es-hero__art {
    overflow: hidden;
    border-radius: 12px;
  }

  .es-arcade-svg {
    width: 235%;
    margin-left: -67.5%;
  }

  .es-hero__overlay {
    bottom: 18px;
    gap: 12px;
  }

  .es-hero__overlay .es-lead {
    font-size: 15px;
  }

  .es-arcade {
    grid-template-columns: 1fr;
    transform: none !important;
  }

  .es-hero__stage::before,
  .es-hero__stage::after,
  .es-arcade::after {
    display: none;
  }

  .es-hero__overlay .es-h1 {
    font-size: clamp(31px, 8.6vw, 42px);
  }

  .es-banner__row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .es-banner__row .es-btn {
    width: 100%;
    justify-content: center;
  }

  .es-hero__overlay {
    width: 94%;
    gap: 12px;
    bottom: 22px;
  }

  .es-hero__overlay .es-lead {
    font-size: 15px;
  }

  body {
    font-size: 16px;
  }

  .ewd__grid,
  .es-groups {
    grid-template-columns: 1fr;
  }

  .ewd__filters {
    grid-template-columns: 1fr 1fr;
  }

  .es-routes li {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .es-banner__row {
    padding: 20px 0;
  }

  .es-proof__grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* ---------- HUB PAGES: breadcrumb, head, discipline list ----------
   (classes used by specialties.html and the coming tier hubs) */
.es-crumb ol {
  list-style: none;
  display: flex;
  flex-wrap: nowrap;
  white-space: nowrap;
  gap: 4px;
  margin: 0 0 18px;
  padding: 0;
  font: 600 12px/1.4 var(--es-sans);
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--es-ink-soft);
}

.es-crumb ol li {
  display: flex;
  align-items: center;
}

.es-crumb ol li+li::before {
  content: "";
  width: 5px;
  height: 5px;
  background: var(--es-accent);
  transform: rotate(45deg);
  margin: 0 10px;
  opacity: .7;
}

.es-crumb a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color .18s var(--es-ease), border-color .18s var(--es-ease);
}

.es-crumb a:hover,
.es-crumb a:focus-visible {
  color: var(--es-accent-deep);
  border-bottom-color: currentColor;
}

/* ---------- REDUCED MOTION ---------- */
@media (prefers-reduced-motion: reduce) {
  .es-marquee__track {
    animation: none;
  }

  html {
    scroll-behavior: auto;
  }

  .js [data-es-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
    will-change: auto;
  }

  .es-hero__visual .es-arch-frame__img img {
    transform: none !important;
  }
}

/* ============================================================
   16. WP THEME HARDENING + V4 POLISH (29 Jul, late)
   The WP theme overrides heading and button colours; every rule
   here is deliberately !important, same as the old build.
   ============================================================ */

/* ---- headings: white on dark, ink on light. Always. ---- */
.es-hero .es-h1,
.es-hero .es-h1 span,
.es-hero .es-h1 em,
.es-close .es-h2,
.es-close .es-h2 span,
.es-close .es-h2 em,
.es-sec--dark .es-h2,
.es-sec--dark .es-h2 span {
  color: var(--es-text-on-dark) !important;
}

.es-close__strip strong {
  color: var(--es-text-on-dark) !important;
}

.es-proof__num,
.es-proof__num em {
  color: var(--es-ink) !important;
}

.es-proof__lbl,
.es-proof__note {
  color: var(--es-ink-soft) !important;
}

.es-hero__overlay .es-lead {
  color: rgba(242, 239, 233, .92) !important;
}

.es-sec:not(.es-sec--dark) .es-h2,
.es-sec:not(.es-sec--dark) .es-h2 span,
.es-sec:not(.es-sec--dark) .es-h2 em,
.es-group h3,
.ewd__title,
.es-routes .t,
.es-routes .t a {
  color: var(--es-ink) !important;
}

.es-hero__overlay .es-eyebrow {
  color: var(--es-text-on-dark) !important;
}

/* ---- dropdowns and inputs: readable regardless of theme ---- */
.ewd-combo__list,
.es-combo__list {
  background: #fff !important;
}

.ewd-combo__option,
.es-combo__opt {
  color: var(--es-ink) !important;
  background: transparent !important;
}

.ewd-combo__option:hover,
.ewd-combo__option:focus-visible,
.es-combo__opt:hover,
.es-combo__opt:focus-visible {
  background: var(--es-paper-2) !important;
}

.es-field input,
.ewd__field input,
.ewd-combo input {
  color: var(--es-ink) !important;
  background-color: #fff !important;
}

.es-field input::placeholder,
.ewd__field input::placeholder,
.ewd-combo input::placeholder {
  color: rgba(31, 41, 51, .5) !important;
}

/* ---- search fields carry the doorway mark ---- */
.es-field input[type="search"],
.ewd__field>input[type="search"],
.ewd-combo>input {
  padding-left: 40px !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 18'><path d='M2 17 V8.5 a5 5 0 0 1 10 0 V17' fill='none' stroke='%23C68A24' stroke-width='1.7' stroke-linecap='round'/></svg>") !important;
  background-repeat: no-repeat !important;
  background-position: 14px 50% !important;
  background-size: 12px 15px !important;
}

/* ---- stylish chevrons ---- */
.ewd-combo__toggle {
  color: var(--es-accent-deep) !important;
}

.ewd-combo__icon {
  width: 15px;
  height: 15px;
  transition: transform .25s var(--es-ease);
}

.ewd-combo.is-open .ewd-combo__icon {
  transform: rotate(180deg);
}

.es-field[data-es-combo]::after {
  content: "";
  position: absolute;
  right: 15px;
  bottom: 18px;
  width: 8px;
  height: 8px;
  border-right: 1.8px solid var(--es-accent-deep);
  border-bottom: 1.8px solid var(--es-accent-deep);
  transform: rotate(45deg);
  transition: transform .25s var(--es-ease), bottom .25s var(--es-ease);
  pointer-events: none;
}

.es-field[data-es-combo].is-open::after {
  transform: rotate(225deg);
  bottom: 14px;
}

/* ---- focus: soft gold glow ---- */
.es-field input:focus-visible,
.ewd__field input:focus-visible,
.ewd-combo input:focus-visible {
  box-shadow: 0 0 0 4px rgba(224, 165, 59, .25) !important;
  outline: none !important;
  border-color: var(--es-accent) !important;
}

/* ---- CTA shimmer sweep ---- */
.es-btn--gold {
  position: relative;
  overflow: hidden;
}

.es-btn--gold::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 32%, rgba(255, 255, 255, .5) 50%, transparent 68%);
  transform: translateX(-130%);
  transition: transform .6s ease;
  pointer-events: none;
}

.es-btn--gold:hover::before {
  transform: translateX(130%);
}

/* ---- discipline marquee band ---- */
.es-marquee {
  overflow: hidden;
  max-width: 100%;
  background: var(--es-canvas-3);
  padding: 20px 0;
}

.es-marquee:hover .es-marquee__track {
  animation-play-state: paused;
}

.es-marquee__track {
  display: flex;
  width: max-content;
  animation: es-marq 46s linear infinite;
}

.es-marquee:hover .es-marquee__track {
  animation-play-state: paused;
}

.es-marquee__group {
  display: flex;
  align-items: center;
}

/* Upright, not italic (7 Aug). Fraunces' italic reads as decorative at this
   size and the discipline names are a list of facts, not an aside. */
.es-marquee__group span {
  display: inline-flex;
  align-items: center;
  font: normal 500 clamp(17px, 1.7vw, 22px)/1 var(--es-serif);
  font-style: normal;
  color: var(--es-text-on-dark) !important;
  white-space: nowrap;
}

.es-marquee__group span::after {
  content: "";
  width: 8px;
  height: 11px;
  border-radius: 999px 999px 0 0;
  background: var(--es-accent);
  opacity: .85;
  margin: 0 26px;
}

@keyframes es-marq {
  to {
    transform: translateX(-50%);
  }
}

/* ---- scroll progress: thin gold line above everything ---- */
.es-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0;
  background: linear-gradient(90deg, var(--es-accent), var(--es-accent-deep));
  z-index: 120;
  pointer-events: none;
}

/* ---- nothing sits under decorative layers ---- */
.es-sec>.es-shell,
.es-close__inner,
.es-proof>.es-shell {
  position: relative;
  z-index: 1;
}

.es-arc::after {
  z-index: 0;
}

/* anchor jumps never hide a heading under a sticky header */
section[id],
.ewd,
.es-sec {
  scroll-margin-top: 96px;
}

@media (prefers-reduced-motion: reduce) {
  .es-marquee__track {
    animation: none;
  }

  .es-btn--gold::before {
    display: none;
  }
}

/* ---- pre-paint stagger hide: bootstrap ile birlikte calisir ---- */
.js [data-es-stagger]>* {
  opacity: 0;
  transform: translateY(18px);
  will-change: opacity, transform;
}

.js [data-es-stagger]>.es-in,
.js [data-es-reveal].es-in {
  opacity: 1 !important;
  transform: none !important;
  will-change: auto;
  transition: opacity var(--es-reveal-dur) var(--es-ease), transform var(--es-reveal-dur) var(--es-ease);
}

/* ============================================================
   17. THE DOORWAY HOVER LANGUAGE - one motion vocabulary,
   every interactive element. The arch rises, the gold sweeps.
   ============================================================ */

/* ---- text links: gold underline sweeps through the doorway ---- */
.es-textlink {
  position: relative;
  text-decoration: none !important;
}

.es-textlink::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 1.5px;
  background: currentColor;
  opacity: .3;
}

.es-textlink::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  height: 2px;
  width: 0;
  background: var(--es-accent-deep);
  transition: width .35s var(--es-ease);
  z-index: 1;
}

.es-textlink:hover::before,
.es-textlink:focus-visible::before {
  width: 100%;
}

.es-hero .es-textlink::before,
.es-close .es-textlink::before {
  background: var(--es-accent);
}

/* ---- cards: the gold segment SWEEPS in, the doorway lights up ---- */
.ewd-card::after {
  width: 0 !important;
  opacity: 1 !important;
  transition: width .35s var(--es-ease) !important;
}

.ewd-card:hover::after {
  width: 64px !important;
}

.ewd-card__initials {
  transition: background .25s var(--es-ease), color .25s var(--es-ease), border-color .25s var(--es-ease), transform .25s var(--es-ease) !important;
}

.ewd-card:hover .ewd-card__initials {
  background: var(--es-accent) !important;
  color: var(--es-accent-ink) !important;
  border-color: var(--es-accent) !important;
  transform: translateY(-2px);
}

.es-group::before {
  width: 0 !important;
  opacity: 1 !important;
  transition: width .35s var(--es-ease) !important;
}

.es-group:hover::before {
  width: 64px !important;
}

.es-group__num::before {
  transition: transform .25s var(--es-ease);
}

.es-group:hover .es-group__num::before {
  transform: translateY(-3px);
}

.es-group h3 {
  transition: color .25s var(--es-ease);
}

.es-group:hover h3 {
  color: var(--es-accent-deep) !important;
}

/* ---- route rows: the doorway lifts, gold washes across ---- */
.es-routes li {
  transition: background .3s var(--es-ease);
}

.es-routes li:hover {
  background: linear-gradient(90deg, rgba(224, 165, 59, .08), transparent 55%);
}

.es-routes .t::before {
  transition: transform .25s var(--es-ease);
}

.es-routes li:hover .t::before {
  transform: translateY(-3px);
}

.es-routes .t a {
  transition: color .2s var(--es-ease);
}

/* ---- every gold button shimmers and lifts (directory cards too) ---- */
.ewd-card__contact {
  position: relative;
  overflow: hidden;
}

.ewd-card__contact::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 32%, rgba(255, 255, 255, .5) 50%, transparent 68%);
  transform: translateX(-130%);
  transition: transform .6s ease;
  pointer-events: none;
}

.ewd-card__contact:hover::before {
  transform: translateX(130%);
}

/* ---- chips, pagination, badges: consistent lift ---- */
.ewd__chip {
  transition: border-color .2s var(--es-ease), transform .2s var(--es-ease);
}

.ewd__chip:hover {
  border-color: var(--es-accent-deep);
  transform: translateY(-1px);
}

.ewd__page {
  transition: border-color .2s var(--es-ease), color .2s var(--es-ease), transform .2s var(--es-ease), border-radius .25s var(--es-ease);
}

.ewd__page:hover:not(.is-active):not(.ewd__page--gap) {
  transform: translateY(-2px);
  border-radius: 999px 999px 8px 8px;
  /* every box becomes a doorway on hover */
}

/* ---- proof items: arch tick nods on hover ---- */
.es-proof__item::before {
  transition: transform .25s var(--es-ease);
}

.es-proof__item:hover::before {
  transform: translateY(-3px);
}

@media (prefers-reduced-motion: reduce) {

  .es-textlink::before,
  .ewd-card::after,
  .es-group::before {
    transition: none;
  }
}

/* ---- pagination: readable regardless of theme ---- */
.ewd__page {
  color: var(--es-ink) !important;
  background: #fff !important;
  border: 1px solid rgba(20, 32, 50, .28) !important;
}

.ewd__page--nav {
  color: var(--es-accent-deep) !important;
}

.ewd__page--gap {
  color: var(--es-ink-soft) !important;
  background: none !important;
  border: 0 !important;
}

.ewd__page.is-active {
  background: var(--es-canvas) !important;
  color: var(--es-text-on-dark) !important;
  border-color: var(--es-canvas) !important;
}

.ewd__page:hover:not(.is-active):not(.ewd__page--gap) {
  color: var(--es-accent-deep) !important;
  border-color: var(--es-accent-deep) !important;
}

/* ============================================================
   18. THE FILTER CONSOLE - the directory's filter bar becomes
   a navy console: white fields on deep ground, doorway arrows,
   gold sweeps. Pure CSS over expert.php's unchanged markup.
   ============================================================ */

/* ---- section head: rule with gold segment beneath ---- */
.ewd__head {
  position: relative;
  padding-bottom: 22px;
  margin-bottom: 26px;
}

.ewd__head::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--es-hairline);
}

.ewd__head::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 48px;
  background: var(--es-accent);
  z-index: 1;
}

.ewd__intro {
  font-size: 15.5px;
  max-width: 62ch;
}

/* ---- the console ---- */
.ewd__filters {
  background: var(--es-canvas) !important;
  border: 1px solid rgba(224, 165, 59, .25);
  border-radius: 16px;
  padding: 22px;
  grid-template-columns: 2fr 1fr 1fr 1fr 1fr auto;
  gap: 14px;
  position: relative;
  overflow: visible;
}

/* doorway keystone on the console's top edge */
.ewd__filters::before {
  content: "";
  position: absolute;
  top: -7px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 12px;
  height: 12px;
  background: var(--es-accent);
  border-radius: 2px;
}

.ewd__field>span {
  color: rgba(242, 239, 233, .78) !important;
  font-size: 11.5px !important;
  letter-spacing: .07em !important;
}

/* fields: clean white slabs, no borders, taller */
.ewd__field input[type="search"],
.ewd-combo input {
  border: 1.5px solid transparent !important;
  border-radius: 10px !important;
  padding-top: 14px !important;
  padding-bottom: 14px !important;
  font-size: 15px !important;
  transition: border-color .25s var(--es-ease), box-shadow .25s var(--es-ease), transform .25s var(--es-ease);
}

.ewd__field input[type="search"]:hover,
.ewd-combo input:hover {
  border-color: var(--es-accent) !important;
  transform: translateY(-1px);
}

/* ---- the arrows: gold doorway buttons ---- */
.ewd-combo__toggle {
  right: 7px !important;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  padding: 0 !important;
  background: var(--es-accent) !important;
  border-radius: 999px 999px 7px 7px !important;
  color: var(--es-accent-ink) !important;
  transition: background .2s var(--es-ease), transform .25s var(--es-ease);
}

.ewd-combo__toggle:hover {
  background: var(--es-accent-deep) !important;
}

.ewd-combo.is-open .ewd-combo__toggle {
  transform: translateY(-50%) rotate(180deg);
  border-radius: 7px 7px 999px 999px !important;
}

.ewd-combo.is-open .ewd-combo__icon {
  transform: none;
}

.ewd-combo__icon {
  width: 13px;
  height: 13px;
}

/* ---- reset: quiet cream link on navy ---- */
.ewd__reset {
  color: rgba(242, 239, 233, .85) !important;
  font-size: 13.5px !important;
  text-decoration: none !important;
  position: relative;
  padding: 14px 2px !important;
}

.ewd__reset::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 10px;
  height: 1.5px;
  background: currentColor;
  opacity: .35;
}

.ewd__reset::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 10px;
  height: 2px;
  width: 0;
  background: var(--es-accent);
  transition: width .35s var(--es-ease);
}

.ewd__reset:hover {
  color: #fff !important;
}

.ewd__reset:hover::before {
  width: 100%;
}

/* ---- dropdown lists: doorway options ---- */
.ewd-combo__list {
  border: 0 !important;
  border-radius: 12px !important;
  box-shadow: 0 22px 48px rgba(7, 16, 28, .28) !important;
  padding: 6px !important;
}

.ewd-combo__option {
  position: relative;
  border-radius: 8px !important;
  padding: 11px 13px 11px 14px !important;
  transition: background .18s var(--es-ease), padding-left .22s var(--es-ease);
}

.ewd-combo__option::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 50%;
  translate: 0 -50%;
  width: 7px;
  height: 10px;
  border-radius: 999px 999px 0 0;
  background: var(--es-accent);
  opacity: 0;
  transition: opacity .18s var(--es-ease);
}

.ewd-combo__option:hover,
.ewd-combo__option:focus-visible {
  background: rgba(224, 165, 59, .14) !important;
  padding-left: 22px !important;
}

.ewd-combo__option:hover::before,
.ewd-combo__option:focus-visible::before {
  opacity: 1;
}

/* ---- chips ride the console's bottom edge ---- */
.ewd__chips {
  margin-top: 16px;
}

/* ---- console responsive ---- */
@media (max-width: 1100px) {
  .ewd__filters {
    grid-template-columns: 1fr 1fr !important;
  }

  /* The first field used to be the keyword box, which earned a full row.
     That box went on 11 Aug and :first-child silently transferred the
     privilege to Main category, so between 621px and 1100px one combo
     spanned both columns and the other three sat in a ragged 2-1
     stack. The rule now names the field it was written for; nothing in
     the console carries that class any more, so it simply never
     applies - which is the intended behaviour, not a leftover. */
  .ewd__filters .ewd__field--search {
    grid-column: 1 / -1;
  }
}

@media (max-width: 640px) {
  .ewd__filters {
    grid-template-columns: 1fr !important;
    padding: 18px;
  }
}

/* ---- console refinements v2: breathing room in the combos ---- */
.ewd__filters {
  grid-template-columns: 1.5fr repeat(4, 1.15fr) auto;
}

.ewd-combo>input {
  padding-left: 32px !important;
  padding-right: 44px !important;
  font-size: 14px !important;
  background-position: 11px 50% !important;
  background-size: 11px 14px !important;
}

.ewd-combo input::placeholder {
  font-size: 13.5px !important;
}

.ewd-combo__toggle {
  right: 6px !important;
  width: 28px;
  height: 28px;
}

.ewd__reset {
  align-self: center !important;
}

/* ============================================================
   19. FINAL POLISH (29 Jul, night)
   ============================================================ */

/* reveal a touch quicker sitewide */
:root {
  --es-reveal-dur: .55s;
}

/* ---- marquee: names fade at the edges instead of hard-clipping ---- */
.es-marquee {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}

/* ---- progress line ends in a tiny doorway cap ---- */
.es-progress::after {
  content: "";
  position: absolute;
  right: -1px;
  top: -4px;
  width: 8px;
  height: 11px;
  border-radius: 999px 999px 0 0;
  background: var(--es-accent-deep);
}

/* ---- hero decor (echo arches + keystone) enters AFTER the content ---- */
.js .es-hero__stage::before,
.js .es-hero__stage::after {
  opacity: 0;
  transition: opacity .9s var(--es-ease) .75s;
}

.js .es-hero__stage.is-decor::before {
  opacity: .55;
}

.js .es-hero__stage.is-decor::after {
  opacity: .28;
}

.js .es-hero__stage .es-arcade::after {
  opacity: 0;
  transform: translateX(-50%) translateY(8px) rotate(45deg);
  transition: opacity .7s var(--es-ease) 1s, transform .7s var(--es-ease) 1s;
}

.js .es-hero__stage.is-decor .es-arcade::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0) rotate(45deg);
}

/* ---- reduced motion: pre-paint hide must never stick ---- */
@media (prefers-reduced-motion: reduce) {
  .js [data-es-stagger]>* {
    opacity: 1;
    transform: none;
    transition: none;
    will-change: auto;
  }

  .js .es-hero__stage::before,
  .js .es-hero__stage::after,
  .js .es-hero__stage .es-arcade::after {
    opacity: 1;
    transition: none;
  }

  .js .es-hero__stage::after {
    opacity: .28;
  }

  .js .es-hero__stage::before {
    opacity: .55;
  }

  .es-marquee {
    -webkit-mask-image: none;
    mask-image: none;
  }
}

/* ============================================================
   20. PERFORMANCE - no permanent layer promotion
   ============================================================ */
.js [data-es-reveal],
.js [data-es-stagger]>* {
  will-change: auto;
}

/* ============================================================
   DIRECTORY CONSOLE — search v2 integration (30 Jul)
   The console (dark slab, keystone, gold doorway toggles) is the
   established design. These rules fit the new pieces into it:
   the Apply button, the stacking keyword chips, the searchable
   experience filter, and scroll containment in every list.
   ============================================================ */

/* six columns now: keyword needs room for its Apply button */
.ewd__filters {
  grid-template-columns: 1.9fr repeat(4, 1.05fr) auto;
  align-items: start;
}

/* ---- keyword field: input and Apply read as one control ---- */
.ewd-search {
  display: flex;
  align-items: stretch;
  background: #fff;
  border: 1.5px solid transparent;
  border-radius: 10px;
  overflow: hidden;
  transition: border-color .25s var(--es-ease), box-shadow .25s var(--es-ease), transform .25s var(--es-ease);
}

.ewd-search:hover {
  border-color: var(--es-accent);
  transform: translateY(-1px);
}

.ewd-search:focus-within {
  border-color: var(--es-accent);
  box-shadow: 0 0 0 3px rgba(224, 165, 59, .22);
}

/* the wrapper owns the frame, so the input inside must not draw one */
.ewd-search input[type="search"] {
  flex: 1;
  min-width: 0;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: none !important;
  transform: none !important;
  padding: 14px 12px 14px 14px !important;
  font-size: 14px !important;
}

.ewd-search input[type="search"]:hover {
  transform: none !important;
}

.ewd-search input[type="search"]:focus {
  outline: none;
}

.ewd-search input::-webkit-search-cancel-button {
  -webkit-appearance: none;
}

.ewd-search__apply {
  flex: none;
  font: 600 13px/1 var(--es-sans);
  letter-spacing: .03em;
  color: var(--es-accent-ink);
  background: var(--es-accent);
  border: 0;
  padding: 0 17px;
  cursor: pointer;
  /* the doorway, at button scale */
  border-radius: 999px 999px 8px 8px;
  margin: 5px 5px 5px 0;
  transition: background .2s var(--es-ease);
}

.ewd-search__apply:hover,
.ewd-search__apply:focus-visible {
  background: var(--es-accent-deep);
}

.ewd-search__hint {
  font: 400 11px/1.4 var(--es-sans);
  color: rgba(242, 239, 233, .5);
  margin-top: 2px;
}

/* ---- applied filters: chips sit under the console ---- */
.ewd__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 18px;
}

.ewd__chips[hidden] {
  display: none;
}

.ewd__chip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font: 400 13px/1 var(--es-sans);
  color: var(--es-ink);
  background: #fff;
  border: 1px solid var(--es-hairline);
  border-radius: 999px;
  padding: 8px 8px 8px 14px;
  animation: ewd-chip-in .18s var(--es-ease);
}

@keyframes ewd-chip-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
}

.ewd__chip-text b {
  font-weight: 600;
  color: var(--es-accent-deep);
  margin-right: 6px;
}

.ewd__chip-x {
  background: var(--es-paper-2);
  border: 0;
  border-radius: 999px;
  width: 21px;
  height: 21px;
  display: grid;
  place-items: center;
  font-size: 15px;
  line-height: 1;
  color: var(--es-ink-soft);
  cursor: pointer;
  transition: background .15s, color .15s;
}

.ewd__chip-x:hover,
.ewd__chip-x:focus-visible {
  background: var(--es-canvas);
  color: var(--es-text-on-dark);
}

.ewd__chip--clear {
  padding: 8px 15px;
  border-style: dashed;
  color: var(--es-ink-soft);
  cursor: pointer;
  font-weight: 600;
}

.ewd__chip--clear:hover,
.ewd__chip--clear:focus-visible {
  border-color: var(--es-accent-deep);
  color: var(--es-accent-deep);
}

/* ---- lists: contain the wheel, flip up when the viewport is tight ---- */
.ewd-combo__list {
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--es-accent-deep) transparent;
  max-height: 300px;
}

.ewd-combo__list::-webkit-scrollbar {
  width: 10px;
}

.ewd-combo__list::-webkit-scrollbar-track {
  background: transparent;
}

.ewd-combo__list::-webkit-scrollbar-thumb {
  background: rgba(31, 41, 51, .22);
  border-radius: 999px;
  border: 3px solid #fff;
}

.ewd-combo__list::-webkit-scrollbar-thumb:hover {
  background: var(--es-accent-deep);
}

.ewd-combo.is-up .ewd-combo__list {
  top: auto;
  bottom: calc(100% + 6px);
}

.ewd-combo__option.is-active {
  background: var(--es-paper-2);
}

.ewd-combo__option[aria-selected="true"] {
  background: var(--es-canvas);
  color: var(--es-text-on-dark);
  font-weight: 600;
}

.ewd-combo__option[aria-selected="true"]::before {
  background: var(--es-accent) !important;
}

.ewd-combo__empty {
  padding: 18px 12px;
  font: 400 13.5px/1.4 var(--es-sans);
  color: var(--es-ink-soft);
  text-align: center;
}

.ewd-combo__empty[hidden] {
  display: none;
}

/* ---- windowed pagination ---- */
.ewd__page-gap {
  color: var(--es-ink-soft);
  padding: 0 3px;
  user-select: none;
}

.ewd__page--nav {
  font-size: 16px;
}

@media (max-width: 1100px) {
  .ewd__filters {
    grid-template-columns: 1fr 1fr !important;
  }
}

@media (max-width: 640px) {
  .ewd-search__apply {
    padding: 0 14px;
  }
}

@media (prefers-reduced-motion: reduce) {

  .ewd__chip,
  .ewd-search,
  .ewd-search__apply {
    animation: none;
    transition: none;
  }
}

/* ============================================================
   21. CHIP CLOSE + RESET BUTTON (30 Jul)

   Two theme-fights, both only visible once rendered:

   a) The chip's close control used a "×" text glyph. A glyph is
      centred on its line box, not on its ink, so it sat high and left
      inside the 21px circle and read as crooked. It is now an SVG
      cross, which centres to the pixel in any font.

   b) .ewd__reset is a <button>, so the WordPress theme's button rules
      were painting a blue background on hover. Every interactive state
      is now pinned flat, with a proper accent focus ring kept for
      keyboard users.
   ============================================================ */

.ewd__chip-x {
  flex: none;
  padding: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

.ewd__chip-x svg {
  display: block;
  width: 10px;
  height: 10px;
  pointer-events: none;
  /* stroke follows the button's colour transition */
  color: inherit;
}

/* the theme paints buttons; this one is a quiet text link */
.ewd__reset,
.ewd__reset:hover,
.ewd__reset:focus,
.ewd__reset:focus-visible,
.ewd__reset:active,
.ewd__reset:visited {
  background: none !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  text-shadow: none !important;
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
}

/* removing the UA outline above would strand keyboard users, so the
   accent ring is put back deliberately */
.ewd__reset:focus {
  outline: none;
}

.ewd__reset:focus-visible {
  outline: 2px solid var(--es-accent) !important;
  outline-offset: 4px;
  border-radius: 3px;
}

/* ============================================================
   22. SPELLING CORRECTION NOTICE (30 Jul)

   Sits between the console and the chips. Quiet by design: a register
   states what it did, it does not congratulate itself for doing it.
   ============================================================ */

.ewd__notice {
  margin-top: 16px;
}

.ewd__notice[hidden] {
  display: none;
}

.ewd__notice p {
  margin: 0;
  font: 400 14px/1.55 var(--es-sans);
  color: var(--es-ink-soft);
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 2px 6px;
}

.ewd__notice p b {
  font-weight: 600;
  color: var(--es-ink);
}

.ewd__notice-act {
  background: none !important;
  background-color: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  -webkit-appearance: none;
  appearance: none;
  padding: 0 !important;
  font: 600 14px/1.55 var(--es-sans);
  color: var(--es-accent-deep);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color .15s var(--es-ease);
}

.ewd__notice-act:hover,
.ewd__notice-act:focus-visible {
  color: var(--es-ink);
}

.ewd__notice-act:focus {
  outline: none;
}

.ewd__notice-act:focus-visible {
  outline: 2px solid var(--es-accent);
  outline-offset: 3px;
  border-radius: 3px;
}

/* ============================================================
   23. CONSOLE BREATHING ROOM (30 Jul)

   Measured, not guessed. Six tracks on one row gave each dropdown a
   166px field; the gold toggle takes 30px of that plus its offset, so
   roughly 120px was left for text and every placeholder truncated to
   "Search or ...".

   Four tracks over two rows, with the keyword field spanning two, puts
   every dropdown at ~312px on a 1380px shell. The keyword field keeps
   its prominence at ~640px, and Reset lands at the end of the second
   row instead of orphaned under the search box.
   ============================================================ */

@media (min-width: 1101px) {

  /* Keyword search removed 11 Aug, the experience and assessment type
     dropdowns 12 Aug, all at the client's instruction. The console now
     holds exactly four combos — main category, expert speciality, specific
     expertise, location — so they share one row with Reset in a narrow end
     track, instead of Reset stranded alone on a second row. */
  .ewd__filters {
    grid-template-columns: repeat(4, minmax(0, 1fr)) auto !important;
    gap: 18px !important;
    padding: 26px !important;
  }

  .ewd__reset {
    grid-column: -2 / -1;
  }
}

/* the fields themselves: taller, and the label given room to breathe */
.ewd__field {
  gap: 9px;
}

.ewd__field>span {
  font-size: 11px !important;
  letter-spacing: .09em !important;
}

.ewd__field input[type="search"],
.ewd-combo input {
  padding-top: 16px !important;
  padding-bottom: 16px !important;
  padding-right: 46px !important;
  /* the toggle sits at right:7px and is 30px wide */
}

/* the open list: roomier rows, and enough height that the wheel has
   somewhere to go */
.ewd-combo__list {
  max-height: 340px;
  padding: 8px !important;
}

.ewd-combo__option {
  padding: 13px 14px 13px 16px !important;
  font-size: 14.5px;
}

/* a wider list reads better than a cramped one hugging the field */
.ewd-combo__list {
  min-width: 100%;
  width: max-content;
  max-width: min(380px, 92vw);
}

/* Reset is a word, not a column: stretched across a 306px track its underline
   ran the full width and read as a broken rule */
.ewd__reset {
  justify-self: end;
  width: max-content;
}

/* ---- the practitioner's line under the directory ----
   Deliberately quiet and deliberately last. The page belongs to the
   solicitor; this is the one place a clinician is addressed, and it earns
   that place by sitting after the results rather than competing with them. */
.ewd__join {
  margin-top: 34px;
  padding-top: 26px;
  border-top: 1px solid var(--es-hairline);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px 16px;
  text-align: center;
}

.ewd__join p {
  margin: 0;
  font: 400 15px/1.5 var(--es-sans);
  color: var(--es-ink-soft);
}

.ewd__join-act {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font: 600 15px/1 var(--es-sans);
  color: var(--es-accent-deep);
  text-decoration: none;
  padding: 11px 20px;
  border: 1px solid rgba(198, 138, 36, .4);
  border-radius: 999px 999px 7px 7px;
  transition: background .2s var(--es-ease), transform .2s var(--es-ease), border-color .2s var(--es-ease);
}

.ewd__join-act:hover,
.ewd__join-act:focus-visible {
  background: rgba(224, 165, 59, .12);
  border-color: var(--es-accent-deep);
  transform: translateY(-2px);
}

/* ---- the same address on the home page, inside "A register, not an agency" ---- */
.es-joinbox {
  margin-top: 26px;
  padding: 18px 22px;
  border: 1px solid var(--es-hairline);
  border-left: 3px solid var(--es-accent);
  border-radius: 4px 10px 10px 4px;
  background: rgba(224, 165, 59, .05);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 20px;
}

.es-joinbox p {
  margin: 0;
  font: 400 15px/1.5 var(--es-sans);
  color: var(--es-ink-soft);
}

.es-joinbox__act {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font: 600 15px/1 var(--es-sans);
  color: var(--es-accent-deep);
  text-decoration: none;
  white-space: nowrap;
  transition: gap .2s var(--es-ease), color .2s var(--es-ease);
}

.es-joinbox__act:hover,
.es-joinbox__act:focus-visible {
  gap: 14px;
  color: var(--es-ink);
}

@media (max-width: 560px) {
  .es-joinbox {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 1100px) {
  .ewd__filters {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px !important;
  }

  .ewd__field--search {
    grid-column: 1 / -1;
  }
}

@media (max-width: 620px) {
  .ewd__filters {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .ewd-combo__list {
    max-width: 100%;
    width: auto;
  }
}

/* ============================================================
   24. FORMINATOR (30 Jul)

   The plugin ships its own look and there was nothing here to
   override it, so both modal forms rendered as stock Forminator
   inside a paper dialogue that is anything but. These rules put the
   fields on the same footing as the directory console: same input
   height, same 1.5px transparent border that turns gold on focus,
   same arch-topped submit.

   Scoped to .ewd-modal__form so the plugin is free to look like
   itself anywhere else on the site.
   ============================================================ */

.ewd-modal__form .forminator-row {
  margin: 0 0 16px !important;
}

.ewd-modal__form .forminator-row-last {
  margin-bottom: 0 !important;
}

.ewd-modal__form .forminator-label {
  display: block !important;
  font: 600 11px/1.3 var(--es-sans) !important;
  letter-spacing: .09em !important;
  text-transform: uppercase !important;
  color: var(--es-ink-soft) !important;
  margin: 0 0 8px !important;
}

.ewd-modal__form .forminator-required {
  color: var(--es-accent-deep) !important;
}

.ewd-modal__form .forminator-input,
.ewd-modal__form .forminator-textarea,
.ewd-modal__form select {
  width: 100% !important;
  background: #fff !important;
  border: 1.5px solid var(--es-hairline) !important;
  border-radius: 10px !important;
  padding: 15px 16px !important;
  font: 400 15px/1.45 var(--es-sans) !important;
  color: var(--es-ink) !important;
  box-shadow: none !important;
  transition: border-color .2s var(--es-ease), box-shadow .2s var(--es-ease) !important;
}

.ewd-modal__form .forminator-input:hover,
.ewd-modal__form .forminator-textarea:hover {
  border-color: rgba(198, 138, 36, .5) !important;
}

.ewd-modal__form .forminator-input:focus,
.ewd-modal__form .forminator-textarea:focus,
.ewd-modal__form select:focus {
  outline: none !important;
  border-color: var(--es-accent) !important;
  box-shadow: 0 0 0 3px rgba(224, 165, 59, .18) !important;
}

.ewd-modal__form .forminator-input::placeholder,
.ewd-modal__form .forminator-textarea::placeholder {
  color: var(--es-ink-soft) !important;
  opacity: .6 !important;
}

.ewd-modal__form .forminator-description {
  display: block !important;
  font: 400 12.5px/1.4 var(--es-sans) !important;
  color: var(--es-ink-soft) !important;
  margin: 6px 0 0 !important;
}

/* ---- consent: the checkbox is the one control that must not be missed ---- */
.ewd-modal__form .forminator-field-consent .forminator-checkbox__wrapper {
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
  padding: 14px 16px !important;
  background: rgba(224, 165, 59, .06) !important;
  border: 1px solid var(--es-hairline) !important;
  border-left: 3px solid var(--es-accent) !important;
  border-radius: 4px 10px 10px 4px !important;
}

.ewd-modal__form .forminator-checkbox-box {
  width: 20px !important;
  height: 20px !important;
  border: 1.5px solid var(--es-ink-soft) !important;
  border-radius: 4px !important;
  background: #fff !important;
  flex: none !important;
}

.ewd-modal__form input[type="checkbox"]:checked+.forminator-checkbox-box {
  background: var(--es-accent) !important;
  border-color: var(--es-accent-deep) !important;
}

.ewd-modal__form input[type="checkbox"]:focus-visible+.forminator-checkbox-box {
  outline: 2px solid var(--es-accent) !important;
  outline-offset: 2px !important;
}

.ewd-modal__form .forminator-consent__label p,
.ewd-modal__form .forminator-checkbox__label p {
  margin: 0 !important;
  font: 400 14px/1.5 var(--es-sans) !important;
  color: var(--es-ink) !important;
}

/* ---- submit: the same doorway every primary action on this site uses ---- */
.ewd-modal__form .forminator-button-submit {
  width: 100% !important;
  background: var(--es-accent) !important;
  color: var(--es-accent-ink) !important;
  border: 0 !important;
  border-radius: 26px 26px 9px 9px !important;
  font: 600 15px/1 var(--es-sans) !important;
  padding: 17px 24px !important;
  cursor: pointer !important;
  box-shadow: 0 4px 16px rgba(224, 165, 59, .22) !important;
  transition: background .2s var(--es-ease), transform .2s var(--es-ease) !important;
}

.ewd-modal__form .forminator-button-submit:hover,
.ewd-modal__form .forminator-button-submit:focus-visible {
  background: var(--es-accent-deep) !important;
  transform: translateY(-2px) !important;
}

/* ---- validation and response ---- */
.ewd-modal__form .forminator-error input,
.ewd-modal__form .forminator-error textarea,
.ewd-modal__form .forminator-has_error input {
  border-color: #B3261E !important;
}

.ewd-modal__form .forminator-error-message {
  font: 400 13px/1.4 var(--es-sans) !important;
  color: #B3261E !important;
  margin-top: 6px !important;
}

.ewd-modal__form .forminator-response-message {
  border-radius: 10px !important;
  padding: 14px 16px !important;
  font: 400 14.5px/1.5 var(--es-sans) !important;
  margin-bottom: 16px !important;
}

.ewd-modal__form .forminator-response-message[aria-hidden="true"] {
  display: none !important;
}

/* the plugin's own admin affordance has no business on a public page */
.ewd-modal__form .forminator-edit-module {
  display: none !important;
}

/* ============================================================
   25. SOLICITOR ENQUIRY

   Rebuilt 19 Aug. What was here before was two boxes on flat paper:
   an eyebrow and a heading with nothing under them, a small navy card
   on the left, a white form on the right, and two thirds of the page
   empty below both. The gold tab on the form card was clipped by its
   own overflow:hidden and read as a rendering fault.

   The page now opens on a navy band carrying the arcade the rest of
   the site is built on, and the form lifts into it so the two read as
   one composition. The left column earns its width: how to reach the
   office, what makes an enquiry answerable, and the way out to the
   directory for anyone who would rather look for themselves.

   The form is the first column at every width - it is the task, and
   the guidance beside it is support, not a preamble to read first.

   Nothing here promises a timescale or an outcome. See CONTENT_STANDARDS.
   ============================================================ */

.es-enquire {
  position: relative;
  padding: 0 0 clamp(72px, 9vw, 132px);
  background: var(--es-paper);
  isolation: isolate;
}

/* ---- the band ---- */

.es-enquire__banner {
  position: relative;
  overflow: hidden;
  padding: clamp(54px, 7vw, 104px) 24px clamp(112px, 12vw, 176px);
  color: var(--es-text-on-dark);
  background:
    radial-gradient(112% 145% at 88% -14%, rgba(224, 165, 59, .22), transparent 54%),
    linear-gradient(158deg, var(--es-canvas) 0%, var(--es-canvas-3) 58%, #09182B 100%);
}

/* The arcade. It sat across the foot of the band at first and the cards
   covered its legs, so what was left read as loose curves rather than as
   an arcade. It lives in the band's right half instead - the one part of
   the band nothing overlaps - where the whole silhouette is visible and
   it fills a corner that was otherwise bare navy. Hairline only: this is
   a watermark, not an illustration. */
.es-enquire__arcade {
  position: absolute;
  top: clamp(34px, 4.5vw, 76px);
  right: clamp(-56px, -3vw, -16px);
  width: min(54%, 700px);
  aspect-ratio: 620 / 320;
  height: auto;
  color: var(--es-accent);
  opacity: .3;
  pointer-events: none;
}

.es-enquire__arcade path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.15;
  vector-effect: non-scaling-stroke;
}

/* below the band's own breakpoint the copy needs the full width */
@media (max-width: 900px) {
  .es-enquire__arcade {
    opacity: .17;
  }
}

.es-enquire__banner-inner {
  position: relative;
  z-index: 1;
  width: min(100%, 1240px);
  margin: 0 auto;
}

.es-enquire__banner .es-eyebrow {
  margin: 0 0 14px;
  color: var(--es-accent);
}

.es-enquire__banner .es-h1 {
  max-width: 15ch;
  margin: 0;
  color: inherit;
}

/* house rule: italic on the argument word, and italic gains half a
   weight step so it holds against the roman around it */
.es-enquire__banner .es-h1 em {
  font-style: italic;
  font-weight: 500;
  color: var(--es-accent);
}

.es-enquire__lead {
  max-width: 54ch;
  margin: 18px 0 0;
  color: rgba(242, 239, 233, .8);
  font: 400 clamp(16px, 1.35vw, 18.5px)/1.6 var(--es-sans);
}

/* ---- the grid, lifted into the band ---- */

.es-enquire__inner {
  width: min(100%, 1240px);
  margin: 0 auto;
  padding-inline: 24px;
}

.es-enquire .es-crumb {
  margin-bottom: clamp(20px, 3vw, 34px);
}

.es-enquire__grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.42fr) minmax(300px, 1fr);
  align-items: start;
  gap: clamp(20px, 2.4vw, 34px);
  margin-top: clamp(-140px, -9.5vw, -86px);
}

/* ---- the form ---- */

.es-enquire__form {
  position: relative;
  padding: clamp(28px, 3.4vw, 50px);
  background: #fff;
  border: 1px solid var(--es-hairline);
  border-radius: 20px;
  box-shadow:
    0 34px 74px -30px rgba(9, 24, 41, .38),
    0 2px 6px rgba(9, 24, 41, .05);
}

/* The accent sits INSIDE the card. The old one was a tab hung off the
   top edge, and it was cut in half by the card's own overflow; hanging it
   the other way just moved the problem, because a shape outside the card
   silhouette reads as a rendering fault rather than as an accent. A short
   rule above the eyebrow cannot be cropped by anything. */
.es-enquire__form-head::before {
  display: block;
  width: 54px;
  height: 3px;
  margin-bottom: 18px;
  content: "";
  background: var(--es-accent);
  border-radius: 2px;
}

.es-enquire__form-head {
  margin-bottom: clamp(24px, 2.6vw, 34px);
  padding-bottom: clamp(18px, 2vw, 24px);
  border-bottom: 1px solid var(--es-hairline);
}

.es-enquire__form-head .es-eyebrow {
  margin: 0 0 9px;
}

.es-enquire__form-head .es-h2 {
  margin: 0;
}

/* the live slot carries no chrome of its own - the card is the chrome */
.es-enquire__form-slot {
  display: block;
  min-height: 0;
  padding: 0;
  text-align: left;
  background: none;
  border: 0;
}

.es-enquire__privacy {
  margin: 20px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--es-hairline);
  color: var(--es-ink-soft);
  font: 400 12.5px/1.55 var(--es-sans);
}

.es-enquire__privacy a {
  color: inherit;
  text-decoration-color: rgba(198, 138, 36, .8);
  text-underline-offset: 3px;
}

/* ---- the aside ---- */

.es-enquire__aside {
  display: grid;
  align-content: start;
  gap: clamp(14px, 1.6vw, 20px);
}

/* The form is a long column and the guidance beside it is short, so the
   right side used to run out half way down. Sticky keeps it beside the
   fields it is about instead of stranding it at the top. */
@media (min-width: 1021px) {
  .es-enquire__aside {
    position: sticky;
    /* Clears the sticky site header. At 24px the column slid under
       the header before it locked; 112px is the offset .ewl-toc
       already uses - the same shape of thing, a sticky card in a
       two-column page. */
    top: 112px;
  }
}

.es-enquire__contact,
.es-enquire__notes {
  padding: clamp(22px, 2.4vw, 30px);
  background: #fff;
  border: 1px solid var(--es-hairline);
  border-radius: 18px;
  box-shadow: 0 18px 40px -30px rgba(9, 24, 41, .3);
}

.es-enquire__contact .es-eyebrow {
  margin: 0 0 10px;
}

.es-enquire__contact .es-h2,
.es-enquire__notes .es-h2 {
  margin: 0 0 16px;
  font-size: clamp(20px, 1.9vw, 24px);
}

.es-enquire__contact-mail {
  display: inline-block;
  max-width: 100%;
  padding: 11px 18px;
  border: 1px solid rgba(198, 138, 36, .42);
  border-radius: 999px;
  background: rgba(224, 165, 59, .11);
  color: var(--es-accent-deep);
  font: 600 14.5px/1.2 var(--es-sans);
  overflow-wrap: anywhere;
  text-decoration: none;
  transition: background .18s var(--es-ease), color .18s var(--es-ease), border-color .18s var(--es-ease);
}

.es-enquire__contact-mail:hover,
.es-enquire__contact-mail:focus-visible {
  border-color: var(--es-accent);
  background: var(--es-accent);
  color: var(--es-accent-ink);
}

.es-enquire__contact-mail:focus-visible {
  outline: 2px solid var(--es-accent);
  outline-offset: 2px;
}

.es-enquire__contact-sub {
  margin: 12px 0 0;
  color: var(--es-ink-soft);
  font: 400 12.5px/1.55 var(--es-sans);
}

/* ---- before you send ---- */

.es-enquire__steps {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}

.es-enquire__step {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 4px 12px;
  padding: 16px 0;
  border-top: 1px solid var(--es-hairline);
}

.es-enquire__step:first-child {
  padding-top: 4px;
  border-top: 0;
}

.es-enquire__step:last-child {
  padding-bottom: 0;
}

/* the oversized Fraunces italic numeral, as elsewhere on the site */
.es-enquire__step-n {
  color: var(--es-accent);
  font: 300 italic clamp(30px, 3vw, 38px)/.9 var(--es-serif);
  font-variation-settings: "opsz" 96;
}

.es-enquire__step h3 {
  margin: 0 0 4px;
  color: var(--es-ink);
  font: 600 14px/1.35 var(--es-sans);
}

.es-enquire__step p {
  margin: 0;
  color: var(--es-ink-soft);
  font: 400 13.5px/1.6 var(--es-sans);
}

/* ---- the way out to the directory ---- */

/* The aside's one primary action. It uses the site's .es-btn pill rather
   than a shape of its own, so the main action on this page looks like the
   main action on every other page; the only thing said here is that in a
   narrow column it should fill the column and centre its label. */
.es-enquire__back {
  width: 100%;
  justify-content: center;
}

/* ---- narrow ---- */

@media (max-width: 1020px) {
  .es-enquire__grid {
    grid-template-columns: 1fr;
    margin-top: clamp(-104px, -8vw, -72px);
  }

  .es-enquire__banner .es-h1 {
    max-width: 20ch;
  }
}

@media (max-width: 560px) {
  .es-enquire__banner {
    padding-inline: 18px;
  }

  .es-enquire__inner {
    padding-inline: 16px;
  }

  .es-enquire__form,
  .es-enquire__contact,
  .es-enquire__notes {
    border-radius: 14px;
  }

  .es-enquire__form {
    padding: 26px 20px;
  }

  .es-enquire__step {
    grid-template-columns: 34px minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {

  .es-enquire__back,
  .es-enquire__back .arr,
  .es-enquire__contact-mail {
    transition: none;
  }

  .es-enquire__back:hover {
    transform: none;
  }
}

/* ============================================================
   26. TIER HUBS

   Shared architecture for group, claim, report, location and resource
   indexes. Individual hubs differ in their content, never their visual
   system: dark crown, a restrained scope band, card-led navigation and
   one closing action.
   ============================================================ */

.es-tier-hub {
  background: var(--es-paper);
}

.es-tier-crown {
  position: relative;
  overflow: hidden;
  padding: clamp(54px, 8vw, 112px) 24px clamp(48px, 7vw, 92px);
  color: var(--es-text-on-dark);
  background: linear-gradient(140deg, var(--es-canvas) 0%, var(--es-canvas-3) 100%);
}

.es-tier-crown::after {
  position: absolute;
  right: -4vw;
  bottom: -84px;
  width: min(38vw, 520px);
  height: min(38vw, 520px);
  content: "";
  border: 1px solid rgba(224, 165, 59, .32);
  border-radius: 999px 999px 0 0;
}

.es-tier-crown__inner,
.es-tier-sec__inner {
  position: relative;
  z-index: 1;
  width: min(100%, 1180px);
  margin: 0 auto;
}

.es-tier-crown .es-crumb {
  margin-bottom: clamp(38px, 6vw, 74px);
}

.es-tier-crown .es-crumb a,
.es-tier-crown .es-crumb [aria-current="page"] {
  color: rgba(255, 255, 255, .72);
}

.es-tier-crown .es-eyebrow {
  margin: 0 0 12px;
  color: var(--es-accent);
}

.es-tier-crown .es-h1 {
  max-width: 830px;
  margin: 0;
  color: inherit;
}

.es-tier-crown__lead {
  max-width: 680px;
  margin: 18px 0 0;
  color: rgba(255, 255, 255, .76);
  font: 400 clamp(16px, 1.6vw, 19px)/1.58 var(--es-sans);
}

.es-tier-crown__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
  margin-top: 30px;
}

.es-tier-crown .es-textlink {
  color: rgba(255, 255, 255, .86);
}

.es-tier-sec {
  padding: clamp(58px, 8vw, 108px) 24px;
}

.es-tier-sec--paper {
  background: #fff;
}

.es-tier-sec--tint {
  background: linear-gradient(180deg, rgba(224, 165, 59, .08), rgba(224, 165, 59, .025));
}

.es-tier-sec__head {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(260px, .58fr);
  align-items: end;
  gap: 36px;
  margin-bottom: clamp(30px, 4vw, 50px);
}

.es-tier-sec__head .es-h2 {
  max-width: 570px;
  margin: 0;
}

.es-tier-sec__head p {
  max-width: 470px;
  margin: 0;
  color: var(--es-ink-soft);
  font: 400 15px/1.6 var(--es-sans);
}

.es-tier-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.es-tier-card {
  position: relative;
  display: flex;
  min-height: 174px;
  flex-direction: column;
  justify-content: space-between;
  padding: 24px;
  color: var(--es-ink);
  background: var(--es-paper-2, #f5f1ea);
  border: 1px solid var(--es-hairline);
  border-radius: 46px 46px 12px 12px;
  text-decoration: none;
  transition: transform .22s var(--es-ease), border-color .22s var(--es-ease), box-shadow .22s var(--es-ease);
}

.es-tier-card::before {
  width: 26px;
  height: 26px;
  margin-bottom: 28px;
  content: "";
  border: 1px solid rgba(198, 138, 36, .58);
  border-radius: 26px 26px 0 0;
}

.es-tier-card:hover,
.es-tier-card:focus-visible {
  color: var(--es-ink);
  border-color: rgba(198, 138, 36, .64);
  box-shadow: 0 14px 28px rgba(17, 37, 56, .09);
  transform: translateY(-4px);
}

.es-tier-card h3 {
  margin: 0;
  font: 500 clamp(20px, 2vw, 27px)/1.06 var(--es-serif);
}

.es-tier-card p {
  margin: 11px 0 0;
  color: var(--es-ink-soft);
  font: 400 14px/1.5 var(--es-sans);
}

.es-tier-card__go {
  display: block;
  margin-top: 22px;
  color: var(--es-accent-deep);
  font: 600 12px/1 var(--es-sans);
  letter-spacing: .07em;
  text-transform: uppercase;
}

.es-tier-cluster+.es-tier-cluster {
  margin-top: 48px;
}

.es-tier-cluster__title {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 17px;
  color: var(--es-ink-soft);
  font: 600 11px/1.2 var(--es-sans);
  letter-spacing: .1em;
  text-transform: uppercase;
}

.es-tier-cluster__title::after {
  height: 1px;
  flex: 1;
  content: "";
  background: var(--es-hairline);
}

.es-tier-links {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.es-tier-links a,
.es-tier-links span {
  padding: 10px 13px;
  color: var(--es-ink);
  background: #fff;
  border: 1px solid var(--es-hairline);
  border-radius: 999px;
  font: 500 13px/1.2 var(--es-sans);
  text-decoration: none;
}

.es-tier-links a:hover,
.es-tier-links a:focus-visible {
  color: var(--es-accent-ink);
  background: var(--es-canvas);
  border-color: var(--es-canvas);
}

.es-tier-note {
  max-width: 760px;
  margin: 0;
  color: var(--es-ink-soft);
  font: 400 16px/1.65 var(--es-sans);
}

.es-tier-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 42px;
}

.es-tier-nav a {
  padding: 11px 15px;
  color: var(--es-ink);
  border: 1px solid var(--es-hairline);
  border-radius: 999px;
  font: 500 13px/1.2 var(--es-sans);
  text-decoration: none;
}

.es-tier-nav a:hover,
.es-tier-nav a:focus-visible {
  color: var(--es-accent-ink);
  background: var(--es-accent);
  border-color: var(--es-accent);
}

.es-tier-close {
  padding: clamp(52px, 7vw, 96px) 24px;
  color: var(--es-text-on-dark);
  background: var(--es-canvas);
}

.es-tier-close__inner {
  width: min(100%, 1180px);
  margin: 0 auto;
}

.es-tier-close .es-h2 {
  max-width: 610px;
  margin: 0;
  color: inherit;
}

.es-tier-close__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
  margin-top: 26px;
}

.es-tier-close .es-textlink {
  color: rgba(255, 255, 255, .84);
}

.es-tier-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.es-tier-list a,
.es-tier-list span {
  display: block;
  padding: 14px 0;
  color: var(--es-ink);
  border-bottom: 1px solid var(--es-hairline);
  font: 500 14px/1.35 var(--es-sans);
  text-decoration: none;
}

.es-tier-list a:hover,
.es-tier-list a:focus-visible {
  color: var(--es-accent-deep);
}

@media (max-width: 900px) {
  .es-tier-sec__head {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .es-tier-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .es-tier-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {

  .es-tier-crown,
  .es-tier-sec,
  .es-tier-close {
    padding-inline: 16px;
  }

  .es-tier-grid,
  .es-tier-list {
    grid-template-columns: 1fr;
  }

  .es-tier-card {
    min-height: 150px;
    padding: 21px;
  }
}

/* ============================================================
   27. FIRST PAINT (30 Jul)

   The reveal engine hides every [data-es-reveal] and every child of
   [data-es-stagger] at opacity 0 as soon as the inline bootstrap adds
   .js, and only test.js can bring them back. That is correct for
   content further down, and wrong for the hero: the largest element
   on the page was invisible until a 47KB script had parsed and run,
   so the measured paint was of an empty navy rectangle.

   The hero is exempt from here on. It is above the fold, it is the
   LCP candidate, and there is nothing to reveal about something the
   reader is already looking at. GSAP still animates it when it loads,
   because it animates FROM a visible state; without GSAP the hero is
   simply there, immediately.
   ============================================================ */

.js .es-hero [data-es-reveal],
.js .es-hero [data-es-stagger]>*,
.js .es-hero .es-h1,
.js .es-hero .es-lead,
.js .es-hero .es-hero__actions,
.js .es-hero .es-hero__art {
  opacity: 1 !important;
  transform: none !important;
  will-change: auto !important;
}

/* the word masks only exist for the GSAP entrance; with no GSAP the
   words must not sit clipped out of view */
.js .es-hero .es-w>span {
  transform: none;
}

/* ============================================================
   26. HUB PAGES (30 Jul, v2)

   v1 was a document: paper from top to bottom, no motif, no depth,
   and a four-column wall of 138 links carrying most of the page.
   This version gives the hub the same architecture the home page
   has — a dark crown with the arcade frieze, arch-topped cards, one
   image in an arch, and the discipline list as chips rather than a
   directory index.
   ============================================================ */

/* ---- 1. the dark crown ---- */
.main-hub__crown {
  position: relative;
  background: linear-gradient(180deg, var(--es-canvas) 0%, var(--es-canvas-3) 100%);
  color: var(--es-text-on-dark);
  overflow: hidden;
}

.main-hub__frieze {
  display: block;
  width: 100%;
  height: 74px;
  opacity: .9;
}

.main-hub__crown-inner {
  position: relative;
  padding: 8px 0 clamp(44px, 5vw, 68px);
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  align-items: end;
  gap: 30px clamp(36px, 5vw, 72px);
}

.main-hub__crown .es-h1 {
  color: var(--es-text-on-dark);
  margin: 14px 0 18px;
  max-width: 18ch;
}

.main-hub__crown-lead {
  font: 400 clamp(16px, 1.35vw, 18px)/1.65 var(--es-sans);
  color: var(--es-muted-on-dark);
  margin: 0 0 28px;
  max-width: 54ch;
}

.main-hub__crown .es-eyebrow {
  display: none;
}

/* Hub crowns use the H1 as their opening line: remove the repeated eyebrow
   and reclaim its vertical space without changing the HTML copied to WordPress. */
.main-hub__crown-inner {
  padding-top: 0;
}

.main-hub__crown .es-h1 {
  margin-top: 0;
}

.main-hub__crown-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px 22px;
}

.main-hub__crown-actions .es-textlink {
  color: var(--es-muted-on-dark);
  border-bottom-color: var(--es-hairline-dark);
}

.main-hub__crown-actions .es-textlink:hover {
  color: var(--es-accent);
}

/* A page-specific image replaces the old metric block in every hub crown.
   The arch and its single gold echo carry the site motif without making the
   hero compete with its heading. */
.main-hub__hero-art {
  position: relative;
  width: min(100%, 390px);
  margin: 0 0 0 auto;
  align-self: end;
}

.main-hub__hero-art::before {
  content: "";
  position: absolute;
  inset: 18px -18px -18px 18px;
  border: 1px solid rgba(224, 165, 59, .62);
  border-radius: 999px 999px 8px 8px;
  pointer-events: none;
}

.main-hub__hero-art img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 999px 999px 8px 8px;
  box-shadow: 0 26px 54px rgba(2, 11, 22, .34);
}

.main-hub__split-art--document img {
  object-position: center;
}

/* register-true proof, sitting in the crown where it carries weight */
.main-hub__stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px 30px;
  padding-left: clamp(0px, 2vw, 34px);
  border-left: 1px solid var(--es-hairline-dark);
}

.main-hub__stat b {
  display: block;
  font: 400 clamp(26px, 2.6vw, 34px)/1 var(--es-serif);
  color: var(--es-text-on-dark);
  letter-spacing: -.01em;
  margin-bottom: 7px;
}

.main-hub__stat span {
  font: 500 10px/1.3 var(--es-sans);
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--es-muted-on-dark);
}

/* ---- breadcrumb ----
   The base rule. Without it the <ol> falls back to a numbered list with
   markers and the trail reads as unstyled, whatever colours sit on top. */
.es-crumb ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
  font: 400 13px/1.4 var(--es-sans);
}

.es-crumb li {
  display: inline-flex;
  align-items: center;
}

/* the separator is a chevron, drawn in CSS so no glyph can shift the baseline */
.es-crumb li+li::before {
  content: "";
  width: 5px;
  height: 5px;
  margin: 0 11px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg);
  opacity: .45;
  flex: none;
}

.es-crumb a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--es-hairline);
  padding-bottom: 1px;
  transition: color .18s var(--es-ease), border-color .18s var(--es-ease);
}

.es-crumb [aria-current="page"] {
  font-weight: 500;
}

/* breadcrumb on the dark crown */
.main-hub__crown .es-crumb {
  padding: 20px 0 0;
  color: var(--es-muted-on-dark);
}

.main-hub__crown .es-crumb a {
  border-bottom-color: var(--es-hairline-dark);
}

.main-hub__crown .es-crumb a:hover {
  color: var(--es-accent);
  border-color: var(--es-accent);
}

.main-hub__crown .es-crumb [aria-current="page"] {
  color: var(--es-text-on-dark);
}

/* ---- 2. group cards: the doorway, at card scale ---- */
.main-hub__cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 2vw, 26px);
}

.main-hub__card {
  position: relative;
  display: block;
  padding: 30px 26px 26px;
  background: #fff;
  border: 1px solid var(--es-hairline);
  border-radius: 90px 90px 12px 12px;
  text-decoration: none;
  color: inherit;
  transition: transform .25s var(--es-ease), box-shadow .25s var(--es-ease), border-color .25s var(--es-ease);
}

.main-hub__card::before {
  content: "";
  position: absolute;
  top: -6px;
  left: 50%;
  width: 11px;
  height: 11px;
  background: var(--es-accent);
  border-radius: 2px;
  transform: translateX(-50%) rotate(45deg);
  opacity: 0;
  transition: opacity .25s var(--es-ease);
}

.main-hub__card:hover,
.main-hub__card:focus-visible {
  transform: translateY(-4px);
  border-color: rgba(224, 165, 59, .5);
  box-shadow: 0 18px 40px rgba(20, 30, 45, .12);
}

.main-hub__card:hover::before,
.main-hub__card:focus-visible::before {
  opacity: 1;
}

.main-hub__card-n {
  font: 500 11px/1 var(--es-sans);
  letter-spacing: .16em;
  color: var(--es-accent-deep);
  display: block;
  text-align: center;
  margin-bottom: 14px;
}

.main-hub__card h3 {
  font: 500 21px/1.25 var(--es-serif);
  color: var(--es-ink);
  margin: 0 0 10px;
  text-align: center;
}

.main-hub__card p {
  margin: 0;
  font: 400 14.5px/1.6 var(--es-sans);
  color: var(--es-ink-soft);
  text-align: center;
}

.main-hub__card-go {
  display: block;
  text-align: center;
  margin-top: 16px;
  font: 600 13.5px/1 var(--es-sans);
  color: var(--es-accent-deep);
}

/* ---- 3. the split band: one arch, one ask ---- */
.main-hub__split {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  align-items: center;
  gap: clamp(28px, 5vw, 70px);
}

.main-hub__split-copy .es-h2 {
  margin: 10px 0 16px;
}

.main-hub__split-copy p {
  color: var(--es-ink-soft);
  margin: 0 0 24px;
  max-width: 52ch;
}


/* Group specialty hubs ---------------------------------------------------
   Mental health used the earlier hub markup and therefore missed the crown
   and card treatment shared by the current specialty index. These rules give
   all six group hubs one stable, responsive visual system. */
.es-group-hub .main-hub__crown-inner {
  grid-template-columns: minmax(0, 1fr) minmax(280px, .62fr);
}

.es-group-hub .main-hub__hero-art {
  width: min(100%, 370px);
}

.es-group-hub .main-hub__hero-art img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center;
}

.es-group-hub__scope {
  padding-block: clamp(56px, 8vw, 108px);
}

.es-group-hub__cluster+.es-group-hub__cluster {
  margin-top: clamp(46px, 7vw, 92px);
}

.es-group-hub__cluster header {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: 18px 48px;
  align-items: end;
  margin-bottom: 24px;
}

.es-group-hub__cluster header .es-eyebrow {
  grid-column: 1;
  margin: 0 0 8px;
}

.es-group-hub__cluster header .es-h2 {
  grid-column: 1;
  margin: 0;
}

.es-group-hub__cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.es-group-hub__card {
  position: relative;
  display: flex;
  min-height: 190px;
  flex-direction: column;
  padding: 24px 22px 20px;
  overflow: hidden;
  border: 1px solid var(--es-hairline);
  background: var(--es-paper);
  color: inherit;
  text-decoration: none;
  transition: transform .24s var(--es-ease), border-color .24s var(--es-ease), background .24s var(--es-ease);
}

.es-group-hub__card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: var(--es-accent);
  transform: scaleX(.23);
  transform-origin: left;
  transition: transform .35s var(--es-ease);
}

.es-group-hub__card:hover,
.es-group-hub__card:focus-visible {
  transform: translateY(-3px);
  border-color: rgba(224, 165, 59, .6);
  background: #fff;
}

.es-group-hub__card:hover::before,
.es-group-hub__card:focus-visible::before {
  transform: scaleX(1);
}

.es-group-hub__card h3 {
  margin: 12px 0 10px;
  color: var(--es-ink);
  font: 500 clamp(19px, 1.65vw, 23px)/1.2 var(--es-serif);
}

.es-group-hub__card p {
  margin: 0;
  color: var(--es-ink-soft);
  font: 400 14px/1.55 var(--es-sans);
}

.es-group-hub__card span {
  margin-top: auto;
  padding-top: 18px;
  color: var(--es-accent-deep);
  font: 600 11px/1 var(--es-sans);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.es-group-hub__card span b {
  padding-left: 6px;
  font-size: 15px;
}

.es-group-hub__card--static {
  background: rgba(255, 255, 255, .58);
}

.es-group-hub__nav {
  border-top: 1px solid var(--es-hairline);
  border-bottom: 1px solid var(--es-hairline);
  background: var(--es-paper-2);
}

.es-group-hub__nav .es-shell {
  display: flex;
  gap: 0;
  overflow-x: auto;
}

.es-group-hub__nav a {
  position: relative;
  flex: 0 0 auto;
  padding: 18px 18px 16px;
  color: var(--es-ink-soft);
  font: 600 11px/1 var(--es-sans);
  letter-spacing: .08em;
  text-decoration: none;
  text-transform: uppercase;
}

.es-group-hub__nav a::after {
  content: "";
  position: absolute;
  right: 18px;
  bottom: 0;
  left: 18px;
  height: 2px;
  background: var(--es-accent);
  transform: scaleX(0);
  transition: transform .2s var(--es-ease);
}

.es-group-hub__nav a:hover,
.es-group-hub__nav a:focus-visible,
.es-group-hub__nav a[aria-current="page"] {
  color: var(--es-ink);
}

.es-group-hub__nav a:hover::after,
.es-group-hub__nav a:focus-visible::after,
.es-group-hub__nav a[aria-current="page"]::after {
  transform: scaleX(1);
}

@media (max-width: 980px) {
  .es-group-hub .main-hub__crown-inner {
    grid-template-columns: 1fr;
  }

  .es-group-hub .main-hub__hero-art {
    margin-inline: 0;
  }

  .es-group-hub__cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .es-group-hub__cluster header {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .es-group-hub__cluster header .es-eyebrow,
  .es-group-hub__cluster header .es-h2 {
    grid-column: 1;
  }
}

@media (max-width: 600px) {
  .es-group-hub__cards {
    grid-template-columns: 1fr;
  }

  .es-group-hub__card {
    min-height: 0;
  }

  .es-group-hub__nav a {
    padding-inline: 14px;
  }
}

/* Legacy Mental Health hub: keep the existing content, but give its original
   markup the same crown, image and card treatment as the new group hubs. */
.main-hub--mental-health:not(.es-group-hub) .main-hub__hero {
  position: relative;
  overflow: hidden;
  padding: 34px 0 clamp(54px, 8vw, 96px);
  color: var(--es-text-on-dark);
  background: linear-gradient(135deg, var(--es-canvas), var(--es-canvas-3));
}

.main-hub--mental-health:not(.es-group-hub) .main-hub__hero::after {
  content: "";
  position: absolute;
  right: -12vw;
  bottom: -14vw;
  width: min(48vw, 620px);
  aspect-ratio: 1;
  border: 1px solid rgba(224, 165, 59, .32);
  border-radius: 50% 50% 0 0;
  pointer-events: none;
}

.main-hub--mental-health:not(.es-group-hub) .main-hub__hero .es-shell {
  position: relative;
  z-index: 1;
}

.main-hub--mental-health:not(.es-group-hub) .main-hub__hero .es-crumb {
  margin-bottom: 28px;
  color: var(--es-muted-on-dark);
}

.main-hub--mental-health:not(.es-group-hub) .main-hub__hero .es-crumb a {
  border-color: var(--es-hairline-dark);
}

.main-hub--mental-health:not(.es-group-hub) .main-hub__hero .es-eyebrow {
  display: none;
}

.main-hub--mental-health:not(.es-group-hub) .main-hub__hero .es-h1 {
  max-width: 15ch;
  margin: 0 0 18px;
  color: var(--es-text-on-dark);
}

.main-hub--mental-health:not(.es-group-hub) .main-hub__lead {
  max-width: 61ch;
  margin: 0 0 28px;
  color: var(--es-muted-on-dark);
  font: 400 clamp(16px, 1.35vw, 18px)/1.65 var(--es-sans);
}

.main-hub--mental-health:not(.es-group-hub) .main-hub__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 22px;
}

.main-hub--mental-health:not(.es-group-hub) .main-hub__actions .es-textlink {
  color: var(--es-muted-on-dark);
  border-bottom-color: var(--es-hairline-dark);
}

.main-hub--mental-health:not(.es-group-hub) .main-hub__feature-image {
  width: min(88vw, 1120px);
  margin: clamp(-44px, -4vw, -26px) auto 0;
  position: relative;
  z-index: 2;
}

.main-hub--mental-health:not(.es-group-hub) .main-hub__feature-image img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 7;
  object-fit: cover;
  object-position: center 32%;
}

.main-hub--mental-health:not(.es-group-hub) .es-detail__discipline-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.main-hub--mental-health:not(.es-group-hub) .es-detail__discipline-grid a {
  min-height: 184px;
  transition: transform .22s var(--es-ease), background .22s var(--es-ease);
}

.main-hub--mental-health:not(.es-group-hub) .es-detail__discipline-grid a:hover {
  transform: translateY(-3px);
}

@media (max-width: 760px) {
  .main-hub--mental-health:not(.es-group-hub) .main-hub__feature-image {
    width: 92vw;
  }

  .main-hub--mental-health:not(.es-group-hub) .es-detail__discipline-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 980px) {
  .main-hub__crown-inner {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .main-hub__hero-art {
    margin: 8px 0 0;
    width: min(100%, 390px);
  }

  .main-hub__stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-left: 0;
    border-top: 1px solid var(--es-hairline-dark);
    padding: 26px 0 0;
  }

  .main-hub__cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .main-hub__split {
    grid-template-columns: 1fr;
  }

  .main-hub__split-art {
    order: -1;
    max-width: 420px;
  }
}

@media (max-width: 560px) {
  .main-hub__stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .main-hub__cards {
    grid-template-columns: 1fr;
  }

  .main-hub__card {
    border-radius: 70px 70px 12px 12px;
  }
}

/* ============================================================
   27. MAIN-HUB BROWSER - two-pane discipline browser (31 Jul)

   Groups on the left, that group's disciplines on the right. A
   tablist, so arrow keys move between groups and the panel follows.
   Typing in the filter leaves tab mode and shows matches across all
   six groups at once, each labelled with its group; clearing returns.

   Named main-hub__*, so /claims/, /reports/ and /locations/ reuse it
   and change only their content. The JS reads data-hub-* only.
   ============================================================ */

/* ---- section head: copy left, search right ---- */
.main-hub__index-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 340px);
  align-items: end;
  gap: 22px 48px;
  margin-bottom: 28px;
}

.main-hub__index-head .es-h2 {
  margin: 0 0 10px;
}

.main-hub__index-note {
  margin: 0;
  max-width: 56ch;
  color: var(--es-ink-soft);
  font-size: 15px;
  line-height: 1.6;
}

.main-hub__filter label {
  display: block;
  font: 500 10.5px/1 var(--es-sans);
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--es-ink-soft);
  margin-bottom: 9px;
}

.main-hub__filter input {
  width: 100%;
  font: 400 15px/1 var(--es-sans);
  color: var(--es-ink);
  background: #fff;
  border: 1px solid var(--es-hairline);
  border-radius: 999px 999px 8px 8px;
  padding: 14px 18px;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color .18s var(--es-ease), box-shadow .18s var(--es-ease);
}

.main-hub__filter input:focus {
  outline: none;
  border-color: var(--es-accent-deep);
  box-shadow: 0 0 0 3px rgba(224, 165, 59, .16);
}

.main-hub__filter [data-hub-count] {
  margin: 9px 0 0;
  font-size: 13px;
  color: var(--es-ink-soft);
}

.main-hub__filter [data-hub-count] b {
  font-weight: 600;
  color: var(--es-ink);
}

.main-hub__browser {
  display: grid;
  grid-template-columns: minmax(220px, 290px) minmax(0, 1fr);
  gap: 0;
  border: 1px solid var(--es-hairline);
  border-radius: 18px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 18px 44px rgba(11, 30, 51, .07);
}

/* ---- left rail ---- */
.main-hub__tabs {
  display: flex;
  flex-direction: column;
  background: var(--es-paper-2);
  border-right: 1px solid var(--es-hairline);
  padding: 10px;
  gap: 2px;
}

.main-hub__tabs button {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: left;
  font: 500 15px/1.3 var(--es-sans);
  color: var(--es-ink);
  background: none;
  border: 0;
  cursor: pointer;
  padding: 15px 16px;
  /* the doorway, at tab scale. Capped rather than 999px: on a box this
     short and this wide 999px clamps to half the WIDTH and draws a dome. */
  border-radius: 16px 16px 7px 7px;
  position: relative;
  transition: background .18s var(--es-ease), color .18s var(--es-ease);
  -webkit-appearance: none;
  appearance: none;
}

.main-hub__tabs button:hover {
  background: rgba(255, 255, 255, .7);
}

.main-hub__tabs button[aria-selected="true"] {
  background: #fff;
  color: var(--es-canvas);
  box-shadow: 0 3px 12px rgba(11, 30, 51, .09);
}

.main-hub__tabs button:focus-visible {
  outline: 2px solid var(--es-accent);
  outline-offset: -2px;
}

.main-hub__tab-n {
  font: 500 10.5px/1 var(--es-sans);
  letter-spacing: .1em;
  color: var(--es-ink-soft);
  transition: color .18s var(--es-ease);
}

.main-hub__tabs button[aria-selected="true"] .main-hub__tab-n {
  color: var(--es-accent-deep);
}

.main-hub__tab-c {
  font: 400 12px/1 var(--es-sans);
  color: var(--es-ink-soft);
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(11, 30, 51, .06);
}

.main-hub__tabs button[aria-selected="true"] .main-hub__tab-c {
  background: rgba(224, 165, 59, .16);
  color: var(--es-accent-deep);
}

/* ---- right pane ---- */
.main-hub__panels {
  padding: 30px 32px 32px;
  min-height: 430px;
}

.main-hub__panel-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px 30px;
  flex-wrap: wrap;
  margin-bottom: 22px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--es-hairline);
}

.main-hub__panel-head p {
  margin: 0;
  max-width: 52ch;
  font-size: 15px;
  line-height: 1.6;
  color: var(--es-ink-soft);
}

.main-hub__panel-hub {
  flex: none;
  font: 600 13.5px/1 var(--es-sans);
  color: var(--es-accent-deep);
  text-decoration: none;
  white-space: nowrap;
  padding: 11px 17px;
  border: 1px solid rgba(224, 165, 59, .4);
  border-radius: 999px 999px 6px 6px;
  transition: background .2s var(--es-ease), transform .2s var(--es-ease);
}

.main-hub__panel-hub:hover,
.main-hub__panel-hub:focus-visible {
  background: rgba(224, 165, 59, .12);
  transform: translateY(-1px);
}

.main-hub__panel-list {
  list-style: none;
  margin: 0;
  padding: 0;
  columns: 3;
  column-gap: 30px;
}

.main-hub__panel-list li {
  break-inside: avoid;
}

.main-hub__panel-list a {
  display: block;
  font: 400 14.5px/1.35 var(--es-sans);
  color: var(--es-ink);
  text-decoration: none;
  padding: 7px 10px 7px 13px;
  margin-left: -13px;
  border-radius: 999px 999px 4px 4px;
  position: relative;
  transition: background .16s var(--es-ease), color .16s var(--es-ease);
}

/* the arch, reduced to a 3px upright */
.main-hub__panel-list a::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 50%;
  translate: 0 -50%;
  width: 3px;
  height: 12px;
  border-radius: 999px 999px 0 0;
  background: var(--es-accent);
  opacity: 0;
  transition: opacity .16s var(--es-ease);
}

.main-hub__panel-list a:hover,
.main-hub__panel-list a:focus-visible {
  background: var(--es-paper-2);
  color: var(--es-accent-deep);
}

.main-hub__panel-list a:hover::before,
.main-hub__panel-list a:focus-visible::before {
  opacity: 1;
}

/* the group label a result carries when the filter crosses all six */
.main-hub__panel-list a em {
  display: block;
  font: 400 11px/1 var(--es-sans);
  font-style: normal;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--es-ink-soft);
  margin-top: 4px;
}

.main-hub__index-empty {
  margin: 0;
  padding: 24px 0;
  color: var(--es-ink-soft);
  font-size: 15px;
}

@media (max-width: 1100px) {
  .main-hub__panel-list {
    columns: 2;
  }
}

@media (max-width: 860px) {
  .main-hub__index-head {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .main-hub__browser {
    grid-template-columns: 1fr;
  }

  .main-hub__tabs {
    flex-direction: row;
    overflow-x: auto;
    border-right: 0;
    border-bottom: 1px solid var(--es-hairline);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }

  .main-hub__tabs button {
    flex: none;
    grid-template-columns: auto auto;
    gap: 9px;
    padding: 12px 15px;
  }

  /* the ordinal is decoration; on a horizontal rail it costs width */
  .main-hub__tab-n {
    display: none;
  }

  .main-hub__panels {
    padding: 24px 20px 26px;
    min-height: 0;
  }
}

@media (max-width: 560px) {
  .main-hub__panel-list {
    columns: 1;
  }

  .main-hub__panel-head {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (prefers-reduced-motion: reduce) {

  .main-hub__tabs button,
  .main-hub__panel-list a,
  .main-hub__panel-list a::before,
  .main-hub__panel-hub {
    transition: none;
  }
}

/* ============================================================
   28. MAIN-CONTACT - the contact page (31 Jul)

   No hero, as asked. A compact crown band, three routing cards, then
   the form beside the details.

   inneg's contact page stacks a phone number, an email and a map and
   leaves the reader to work out which applies to them. Three different
   audiences reach a contact page wanting three different things, so
   this routes first and gives details second.

   Named main-contact__*, so /about/, /enquire/ and the rest of the
   core tier reuse the same components.
   ============================================================ */

/* The crown on a no-hero page.

   First attempt kept the hub's vertical rhythm and just dropped the stats
   column, which left a 500px band with its whole right half empty and the
   copy stranded at the bottom of it. A head band is not a hero with the
   picture removed; it is genuinely short.

   Height comes down by roughly 45%, the copy sits at the top of the band
   rather than the foot, and the measure is capped so the lead does not run
   the full 1380px shell. */
.main-hub__crown--tight .main-hub__crown-inner {
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  padding: 4px 0 clamp(30px, 3vw, 42px);
  gap: 0;
}

/* A short band whose copy fills only half the shell leaves a void beside
   it that reads as a broken layout. The band is now genuinely short, and
   the heading and the lead sit side by side so the block uses the width
   the shell already has. */
.main-hub__crown--tight .main-hub__crown-inner {
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  align-items: end;
  gap: 10px clamp(40px, 5vw, 76px);
  padding: 10px 0 clamp(32px, 3vw, 44px);
}

.main-hub__crown--tight .es-h1 {
  font-size: clamp(34px, 4.1vw, 54px);
  margin: 0;
  max-width: 13ch;
}

.main-hub__crown--tight .main-hub__crown-side {
  display: grid;
  gap: 22px;
  justify-items: start;
  padding-bottom: 6px;
}

.main-hub__crown--tight .main-hub__crown-lead {
  margin: 0;
  max-width: 52ch;
}

/* the frieze is decoration; on a short band it must not out-weigh the copy */
.main-hub__crown--tight .main-hub__frieze {
  height: 56px;
  opacity: .7;
}

.main-hub__crown--tight .es-crumb {
  padding-top: 16px;
}

@media (max-width: 900px) {
  .main-hub__crown--tight .main-hub__crown-inner {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 18px;
  }

  .main-hub__crown--tight .es-h1 {
    max-width: 18ch;
  }
}

/* ---- three routes ---- */
.main-contact__routes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  margin-top: 34px;
}

.main-contact__route {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  background: #fff;
  border: 1px solid var(--es-hairline);
  /* the doorway, at card scale */
  border-radius: 20px 20px 12px 12px;
  padding: 30px 28px 26px;
  position: relative;
  transition: transform .22s var(--es-ease), box-shadow .22s var(--es-ease), border-color .22s var(--es-ease);
}

.main-contact__route:hover {
  transform: translateY(-3px);
  border-color: rgba(224, 165, 59, .5);
  box-shadow: 0 16px 38px rgba(11, 30, 51, .09);
}

.main-contact__route-n {
  font: 500 10.5px/1 var(--es-sans);
  letter-spacing: .16em;
  color: var(--es-accent-deep);
}

.main-contact__route h3 {
  font: 400 21px/1.25 var(--es-serif);
  color: var(--es-canvas);
  margin: 0;
  letter-spacing: -.01em;
}

.main-contact__route p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--es-ink-soft);
}

.main-contact__route-go {
  margin-top: auto;
  padding-top: 6px;
  font: 600 14px/1 var(--es-sans);
  color: var(--es-accent-deep);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: gap .2s var(--es-ease);
}

.main-contact__route-go:hover,
.main-contact__route-go:focus-visible {
  gap: 13px;
}

/* ---- form beside details ---- */
.main-contact__split {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(280px, .95fr);
  gap: 48px;
  align-items: start;
}

.main-contact__formcol>p {
  color: var(--es-ink-soft);
  max-width: 54ch;
  margin: 0 0 26px;
}

.main-contact__form {
  background: #fff;
  border: 1px solid var(--es-hairline);
  border-radius: 18px;
  padding: 32px 30px;
  box-shadow: 0 16px 40px rgba(11, 30, 51, .07);
}

/* The slot before the shortcode lands. :empty was wrong here: the slot
   carries an HTML comment and whitespace, so it never matched and the box
   collapsed to a bare white rectangle that read as a broken page. This is a
   real element the operator deletes along with the comment. */
.main-contact__slot {
  margin: 0;
  padding: 44px 24px;
  text-align: center;
  font: 500 15px/1.6 var(--es-sans);
  color: var(--es-ink-soft);
  border: 1px dashed var(--es-hairline);
  border-radius: 12px;
  background: var(--es-paper-2);
}

.main-contact__slot span {
  display: block;
  margin-top: 8px;
  font-weight: 400;
  font-size: 13.5px;
}

.main-contact__slot code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12.5px;
  background: #fff;
  border: 1px solid var(--es-hairline);
  border-radius: 5px;
  padding: 2px 6px;
}

/* ---- details panel ---- */
.main-contact__details {
  background: var(--es-canvas);
  color: var(--es-text-on-dark);
  border-radius: 18px;
  padding: 32px 28px;
  position: relative;
  overflow: hidden;
}

/* the gold-led hairline every panel on this site carries */
.main-contact__details::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--es-accent) 0 56px, transparent 56px);
}

.main-contact__details .es-h3 {
  font: 400 22px/1.25 var(--es-serif);
  color: var(--es-text-on-dark);
  margin: 0 0 22px;
}

.main-contact__row {
  display: grid;
  gap: 4px;
  padding: 15px 0;
  border-bottom: 1px solid var(--es-hairline-dark);
}

.main-contact__row-k {
  font: 500 10px/1 var(--es-sans);
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--es-accent);
}

.main-contact__row-v {
  font-size: 15px;
  line-height: 1.5;
  color: var(--es-text-on-dark);
  word-break: break-word;
}

.main-contact__row-v a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--es-hairline-dark);
  transition: border-color .18s var(--es-ease), color .18s var(--es-ease);
}

.main-contact__row-v a:hover,
.main-contact__row-v a:focus-visible {
  color: var(--es-accent);
  border-bottom-color: var(--es-accent);
}

.main-contact__note {
  margin: 22px 0 20px;
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--es-muted-on-dark);
}

.main-contact__details .es-textlink {
  color: var(--es-accent);
}

@media (max-width: 1000px) {
  .main-contact__routes {
    grid-template-columns: 1fr 1fr;
  }

  .main-contact__split {
    grid-template-columns: 1fr;
    gap: 34px;
  }
}

@media (max-width: 640px) {
  .main-contact__routes {
    grid-template-columns: 1fr;
  }

  .main-contact__form {
    padding: 24px 20px;
  }
}

@media (prefers-reduced-motion: reduce) {

  .main-contact__route,
  .main-contact__route-go,
  .main-contact__row-v a {
    transition: none;
  }
}

/* ============================================================
   DIRECTORY PAGE AND HOME SEARCH PATHWAYS
   Shared with test.css so the WordPress test stylesheet renders
   the new directory page and homepage replacement identically.
   ============================================================ */

.ewd-card__contact {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.es-directory-hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, var(--es-canvas) 0%, var(--es-canvas-3) 100%);
  color: #fff;
  padding: clamp(72px, 10vw, 132px) 0 clamp(54px, 7vw, 88px);
}

.es-directory-hero__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(300px, .72fr);
  gap: clamp(38px, 7vw, 110px);
  align-items: end;
}

.es-directory-hero .es-eyebrow {
  color: var(--es-accent);
}

.es-directory-hero .es-h1 {
  max-width: 780px;
  color: #fff;
  margin: 12px 0 22px;
}

.es-directory-hero__lead {
  max-width: 650px;
  margin: 0;
  color: rgba(255, 255, 255, .76);
  font: 400 clamp(17px, 1.7vw, 21px)/1.58 var(--es-serif);
}

.es-directory-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 26px;
  align-items: center;
  margin-top: 30px;
}

.es-directory-hero .es-textlink {
  color: #fff;
}

.es-directory-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border: 1px solid rgba(224, 165, 59, .42);
  background: rgba(255, 255, 255, .045);
}

.es-directory-metrics>div {
  min-height: 144px;
  padding: 22px 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-right: 1px solid rgba(224, 165, 59, .24);
  border-bottom: 1px solid rgba(224, 165, 59, .24);
}

.es-directory-metrics>div:nth-child(2n) {
  border-right: 0;
}

.es-directory-metrics>div:nth-last-child(-n+2) {
  border-bottom: 0;
}

.es-directory-metrics strong {
  color: var(--es-accent);
  font: 500 clamp(29px, 3vw, 42px)/1 var(--es-serif);
}

/* ---- a stat tile whose bold half is a WORD, not a figure ----
   These slots are sized for numerals. 42px of serif is right for "5,648"
   and far too big for "UK-Ireland", which is ten characters and overruns
   its column, shoving the hairline divider out of line. No selector can
   ask what an element says, so test.js adds .is-word-stat wherever the bold
   half contains no digit, and the size lives here where the rest of the
   type does. Weight, colour and family are untouched - it is the same
   tile, set at a size its content actually fits. */
.about-register__fact.is-word-stat strong,
.about-register__fact.is-word-stat b {
  font-size: clamp(18px, 1.7vw, 25px);
  letter-spacing: -.005em;
}

.es-directory-metrics>div.is-word-stat strong,
.es-directory-metrics>div.is-word-stat b {
  font-size: clamp(18px, 1.65vw, 24px);
  letter-spacing: -.005em;
}

.main-hub__stat.is-word-stat b {
  font-size: clamp(16px, 1.5vw, 22px);
  letter-spacing: -.005em;
}

/* The closing strip is deliberately NOT in the list above. Its bold half is
   already 18px, so a rule sized to bring 42px down would have pushed it UP
   to nearly 22px - shrinking the tiles that are too big and enlarging the
   one that was fine. "UK-Ireland" fits there as it stands. */

.es-directory-metrics span {
  max-width: 142px;
  color: rgba(255, 255, 255, .68);
  font: 500 11px/1.42 var(--es-sans);
  letter-spacing: .045em;
  text-transform: uppercase;
}

.es-home-pathways {
  padding: clamp(54px, 8vw, 106px) 0;
  background: #F2F0EB;
}

.es-home-pathways__head {
  max-width: 730px;
}

.es-home-pathways__head .es-h2 {
  margin: 8px 0 14px;
}

.es-home-pathways__head>p:last-child {
  margin: 0;
  color: var(--es-ink-soft);
  font: 400 17px/1.6 var(--es-serif);
}

.es-home-pathways__grid,
.es-directory-routes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 34px;
}

.es-home-pathway,
.es-directory-route {
  position: relative;
  min-height: 286px;
  padding: 26px 25px 23px;
  border: 1px solid rgba(11, 30, 51, .16);
  background: #fff;
  color: var(--es-ink);
  text-decoration: none;
  transition: transform .25s var(--es-ease), border-color .25s var(--es-ease), box-shadow .25s var(--es-ease);
}

.es-home-pathway:hover,
.es-home-pathway:focus-visible,
.es-directory-route:hover,
.es-directory-route:focus-visible {
  color: var(--es-ink);
  border-color: var(--es-accent-deep);
  box-shadow: 0 15px 30px rgba(11, 30, 51, .11);
  transform: translateY(-4px);
}

.es-home-pathway__num,
.es-directory-route>span {
  display: block;
  margin-bottom: 38px;
  color: var(--es-accent-deep);
  font: 600 11px/1 var(--es-sans);
  letter-spacing: .12em;
  text-transform: uppercase;
}

.es-home-pathway h3,
.es-directory-route h3 {
  margin: 0;
  font: 500 clamp(23px, 2.2vw, 30px)/1.1 var(--es-serif);
}

.es-home-pathway p,
.es-directory-route p {
  margin: 13px 0 22px;
  color: var(--es-ink-soft);
  font: 400 15px/1.55 var(--es-sans);
}

.es-home-pathway__go,
.es-directory-route b {
  position: absolute;
  bottom: 23px;
  color: var(--es-ink);
  font: 600 13px/1 var(--es-sans);
}

.es-home-pathways__act {
  margin-top: 28px;
}

.es-directory-routes {
  margin-top: 37px;
}

.es-directory-route {
  min-height: 250px;
  background: rgba(255, 255, 255, .7);
}

@media (max-width: 860px) {
  .es-directory-hero__grid {
    grid-template-columns: 1fr;
  }

  .es-directory-metrics {
    max-width: 620px;
  }

  .es-home-pathways__grid,
  .es-directory-routes {
    grid-template-columns: 1fr;
  }

  .es-home-pathway,
  .es-directory-route {
    min-height: 218px;
  }

  .es-home-pathway__num,
  .es-directory-route>span {
    margin-bottom: 26px;
  }
}

@media (max-width: 520px) {
  .es-directory-hero {
    padding-top: 72px;
  }

  .es-directory-metrics>div {
    min-height: 128px;
    padding: 18px 15px;
  }

  .es-directory-hero__actions {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* ============================================================
   ABOUT | /about/
   Purposefully restrained: this is a register-positioning page, not a
   conversion landing page. Motion uses opacity and transform only.
   ============================================================ */
.about-register__crown {
  overflow: hidden;
}

.about-register__hero-art img {
  transition: transform .18s linear;
  will-change: transform;
}

.about-register__split {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: clamp(34px, 6vw, 92px);
  align-items: center;
}

.about-register__split-art {
  aspect-ratio: 4 / 5;
  overflow: hidden;
}

.about-register__split-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.about-register__copy {
  max-width: 60ch;
}

.about-register__copy .es-h2 {
  margin: 9px 0 16px;
}

.about-register__copy>p:not(.es-eyebrow) {
  margin: 0 0 17px;
  color: var(--es-ink-soft);
}

.about-register__facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 30px;
}

.about-register__fact {
  position: relative;
  min-height: 126px;
  padding: 22px 18px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border: 1px solid var(--es-hairline);
  border-top: 3px solid var(--es-accent);
  background: rgba(255, 255, 255, .72);
  box-shadow: 0 10px 24px rgba(11, 30, 51, .05);
}

.about-register__fact+.about-register__fact {
  padding-left: 18px;
  border-left: 1px solid var(--es-hairline);
}

.about-register__fact strong {
  color: var(--es-canvas);
  font: 500 clamp(29px, 3vw, 43px)/.95 var(--es-serif);
}

.about-register__fact span {
  color: var(--es-ink-soft);
  font: 600 10.5px/1.35 var(--es-sans);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.about-register__section-head {
  max-width: 760px;
}

.about-register__section-head .es-h2 {
  margin: 9px 0 15px;
}

.about-register__editorial-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, .34fr);
  gap: clamp(30px, 6vw, 86px);
  align-items: end;
}

.about-register__editorial-art {
  margin: 0;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 999px 999px 8px 8px;
  box-shadow: 0 18px 38px rgba(11, 30, 51, .11);
}

.about-register__editorial-art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Two cards since 20 Aug, not three, and they take the full shell.
   An earlier version capped the pair at 980px, which was a mistake worth
   recording: three cards in a 1500px shell were 490px each, and two cards
   inside a 980px cap are 482px - narrower than before. The point of going
   to two columns is the width, so the cap is gone and each card is ~740px. */
.about-register__principles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-top: clamp(32px, 5vw, 56px);
}

.about-register__principle {
  position: relative;
  /* 250px was the floor when a card was a third of the row. At ~740px the
     text wraps to two lines, so the floor comes down again - a card that is
     mostly empty space reads as something failing to load. */
  min-height: 190px;
  padding: 26px 25px 24px;
  border: 1px solid var(--es-hairline);
  background: rgba(255, 255, 255, .56);
  overflow: hidden;
  transition: transform .2s var(--es-ease), border-color .2s var(--es-ease), background .2s var(--es-ease);
}

.about-register__principle::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 48px;
  height: 2px;
  background: var(--es-accent);
  transform: scaleX(.35);
  transform-origin: left;
  transition: transform .25s var(--es-ease);
}

.about-register__principle:hover,
.about-register__principle:focus-within {
  transform: translateY(-2px);
  border-color: rgba(198, 138, 36, .65);
  background: #fff;
}

.about-register__principle:hover::before,
.about-register__principle:focus-within::before,
.about-register__principle.is-inview::before {
  transform: scaleX(1);
}

.about-register__principle>span {
  display: block;
  color: var(--es-accent-deep);
  font: 600 11px/1 var(--es-sans);
  letter-spacing: .12em;
}

.about-register__principle h3 {
  margin: 42px 0 11px;
  color: var(--es-ink);
  font: 600 20px/1.25 var(--es-sans);
}

.about-register__principle p {
  margin: 0;
  color: var(--es-ink-soft);
  font: 400 15px/1.56 var(--es-sans);
}

.about-register__practitioners {
  padding-top: clamp(56px, 8vw, 105px);
  padding-bottom: clamp(56px, 8vw, 105px);
}

.about-register__practitioners-inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(250px, .8fr) minmax(200px, .52fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
  padding: clamp(32px, 5vw, 66px);
  overflow: hidden;
  color: #fff;
  background: var(--es-canvas);
  box-shadow: 0 18px 44px rgba(11, 30, 51, .15);
}

.about-register__practitioners-inner::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: min(34%, 280px);
  height: 3px;
  background: var(--es-accent);
}

.about-register__practitioners-heading {
  position: relative;
  z-index: 1;
}

.about-register__practitioners-inner .es-eyebrow {
  color: var(--es-accent);
}

/* The theme-hardening rule (section 16) forces ink onto every .es-h2 span in
   a section that is not .es-sec--dark - and it is the SECTION that carries
   es-sec here, while the dark navy panel is the inner div. The split-word
   spans therefore need the same important-level override the claim and
   context headings already use. */
.about-register__practitioners-inner .es-h2,
.about-register__practitioners-inner .es-h2 span,
.about-register__practitioners-inner .es-h2 .es-w,
.about-register__practitioners-inner .es-h2 .es-w>span {
  margin: 9px 0 0;
  color: #fff !important;
}

.about-register__practitioners-inner .es-h2 span {
  margin: 0;
}

.about-register__practitioners-action {
  position: relative;
  z-index: 1;
  padding-left: clamp(24px, 4vw, 54px);
  border-left: 1px solid rgba(255, 255, 255, .22);
}

.about-register__practitioners-action p {
  max-width: 36ch;
  margin: 0 0 22px;
  color: rgba(255, 255, 255, .78);
  font: 400 17px/1.62 var(--es-sans);
}

.about-register__practitioners-art {
  position: relative;
  z-index: 1;
  margin: 0;
  overflow: hidden;
  border-radius: 999px 999px 8px 8px;
  aspect-ratio: 4 / 5;
  box-shadow: 0 18px 38px rgba(0, 0, 0, .2);
}

.about-register__practitioners-art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.about-register__fact[data-about-principle] strong,
.about-register__fact[data-about-principle] span {
  opacity: 1;
  transform: none;
}

@media (max-width: 860px) {

  .about-register__split,
  .about-register__practitioners-inner {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .about-register__split-art {
    max-width: 420px;
  }

  .about-register__practitioners-action {
    padding: 24px 0 0;
    border-top: 1px solid rgba(255, 255, 255, .22);
    border-left: 0;
  }

  .about-register__practitioners-art {
    max-width: 320px;
  }

  .about-register__editorial-intro {
    grid-template-columns: 1fr;
  }

  .about-register__editorial-art {
    max-width: 320px;
  }

  .about-register__principles {
    grid-template-columns: 1fr;
  }

  .about-register__principle {
    min-height: 0;
  }
}

@media (max-width: 560px) {
  .about-register__facts {
    grid-template-columns: 1fr;
  }

  .about-register__fact {
    min-height: 96px;
    padding: 17px 18px;
  }

  .about-register__fact+.about-register__fact {
    padding-left: 18px;
    border-left: 1px solid var(--es-hairline);
  }
}

@media (prefers-reduced-motion: reduce) {
  .about-register__hero-art img {
    transform: none !important;
    transition: none;
  }

  .about-register__fact[data-about-principle] strong,
  .about-register__fact[data-about-principle] span {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ============================================================
   DETAIL PAGES | T1 specialties · T3 claims · T4 reports · T5 cities
   One shared editorial shell, with page-type colour cues and an active
   section rail.  Content is supplied by each individual production brief.
   ============================================================ */
.es-detail {
  background: var(--es-paper);
  color: var(--es-ink);
}

.es-detail__hero {
  position: relative;
  overflow: hidden;
  color: var(--es-text-on-dark);
  background: var(--es-canvas);
}

.es-detail__hero::before {
  content: "";
  position: absolute;
  right: -11vw;
  bottom: -17vw;
  width: min(53vw, 720px);
  aspect-ratio: 1;
  border: 1px solid rgba(224, 165, 59, .24);
  border-radius: 50% 50% 0 0;
  pointer-events: none;
}

.es-detail__hero::after {
  content: "";
  position: absolute;
  right: 8vw;
  bottom: -10vw;
  width: min(39vw, 520px);
  aspect-ratio: 1;
  border: 1px solid rgba(242, 239, 233, .1);
  border-radius: 50% 50% 0 0;
  pointer-events: none;
}

.es-detail__crumb {
  position: relative;
  z-index: 1;
  padding: 22px 0 0;
  color: var(--es-muted-on-dark);
}

.es-detail__crumb a {
  border-bottom-color: rgba(242, 239, 233, .25);
}

.es-detail__crumb [aria-current="page"] {
  color: var(--es-text-on-dark);
}

.es-detail__hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, .33fr);
  gap: clamp(34px, 7vw, 118px);
  align-items: end;
  min-height: clamp(390px, 43vw, 530px);
  padding: clamp(54px, 7vw, 92px) 0 clamp(58px, 7vw, 96px);
}

.es-detail__hero-copy {
  max-width: 760px;
}

.es-detail__kicker {
  margin: 0 0 17px;
  color: var(--es-accent);
  font: 600 11px/1 var(--es-sans);
  letter-spacing: .13em;
  text-transform: uppercase;
}

.es-detail__kicker::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin: 0 10px 1px 0;
  background: var(--es-accent);
}

.es-detail__hero .es-h1 {
  max-width: 15ch;
  margin: 0 0 20px;
  color: var(--es-text-on-dark);
}

.es-detail__lead {
  max-width: 59ch;
  margin: 0;
  color: var(--es-muted-on-dark);
  font: 400 clamp(17px, 1.45vw, 20px)/1.6 var(--es-sans);
}

.es-detail__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 15px 22px;
  margin-top: 31px;
}

.es-detail__actions .es-textlink {
  color: var(--es-text-on-dark);
  border-bottom-color: rgba(242, 239, 233, .3);
}

.es-detail__hero-note {
  align-self: end;
  margin: 0;
  padding: 24px 0 0 24px;
  border-top: 1px solid rgba(242, 239, 233, .3);
  border-left: 1px solid rgba(242, 239, 233, .16);
}

.es-detail__hero-note>span {
  display: block;
  margin-bottom: 36px;
  color: var(--es-accent);
  font: 400 58px/.85 var(--es-serif);
}

.es-detail__hero-note p {
  max-width: 25ch;
  margin: 0;
  color: rgba(242, 239, 233, .82);
  font: 400 14px/1.55 var(--es-sans);
}

.es-detail__feature-image {
  position: relative;
  z-index: 3;
  margin: 0;
  overflow: hidden;
}

.es-detail__feature-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.es-detail__nav {
  position: sticky;
  top: 0;
  z-index: 22;
  border-bottom: 1px solid var(--es-hairline);
  background: rgba(246, 242, 234, .96);
  backdrop-filter: blur(10px);
}

.es-detail__nav .es-shell {
  display: flex;
  overflow-x: auto;
}

.es-detail__nav a {
  position: relative;
  flex: 0 0 auto;
  padding: 15px 21px 14px;
  color: var(--es-ink-soft);
  font: 600 11px/1 var(--es-sans);
  letter-spacing: .075em;
  text-decoration: none;
  text-transform: uppercase;
  transition: color .18s ease-out;
}

.es-detail__nav a::after {
  content: "";
  position: absolute;
  right: 21px;
  bottom: 0;
  left: 21px;
  height: 2px;
  background: var(--es-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .18s ease-out;
}

.es-detail__nav a:hover,
.es-detail__nav a:focus-visible,
.es-detail__nav a.is-current {
  color: var(--es-ink);
}

.es-detail__nav a:hover::after,
.es-detail__nav a:focus-visible::after,
.es-detail__nav a.is-current::after {
  transform: scaleX(1);
}

.es-detail__section {
  padding-top: clamp(66px, 9vw, 122px);
  padding-bottom: clamp(66px, 9vw, 122px);
  scroll-margin-top: 53px;
}

.es-detail__split {
  display: grid;
  grid-template-columns: minmax(220px, .58fr) minmax(0, 1.08fr);
  gap: clamp(40px, 8vw, 140px);
  align-items: start;
}

.es-detail__section-heading {
  position: sticky;
  top: 94px;
}

.es-detail__number {
  margin: 0 0 -10px;
  color: rgba(19, 49, 79, .09);
  font: 400 clamp(78px, 11vw, 154px)/.8 var(--es-serif);
}

.es-detail__section-heading .es-eyebrow,
.es-detail__section-intro .es-eyebrow,
.es-detail__report-grid .es-eyebrow {
  margin: 0 0 11px;
}

.es-detail__section-heading .es-h2 {
  margin: 0;
  max-width: 11ch;
  color: #ffffff;
}

.es-detail__prose {
  max-width: 66ch;
}

.es-detail__prose>p {
  margin: 0 0 19px;
  color: var(--es-ink-soft);
  font: 400 17px/1.68 var(--es-sans);
}

.es-detail__prose>p:last-child {
  margin-bottom: 0;
}

.es-detail__question-list {
  display: grid;
  gap: 0;
  margin: 31px 0 28px;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--es-hairline);
}

.es-detail__question-list li {
  position: relative;
  padding: 17px 0 17px 30px;
  border-bottom: 1px solid var(--es-hairline);
  color: var(--es-ink);
  font: 500 15px/1.55 var(--es-sans);
}

.es-detail__question-list li::before {
  content: "";
  position: absolute;
  top: 25px;
  left: 1px;
  width: 12px;
  height: 12px;
  background: var(--es-accent);
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}

/* These read as sentences, so they start like sentences. ::first-letter and
   not text-transform: capitalize - capitalize would hit every word and turn
   "whether aspiration risk was identified in time" into a headline. The
   ::before diamond carries an empty content string, so it is not what
   ::first-letter lands on. */
.es-detail__question-list li::first-letter {
  text-transform: uppercase;
}

.es-detail__section-intro {
  max-width: 700px;
}

.es-detail__section-intro .es-h2 {
  margin: 0 0 16px;
}

.es-detail__section-intro>p:last-child {
  margin: 0;
  color: var(--es-ink-soft);
  font: 400 17px/1.65 var(--es-sans);
}

.es-detail__cards {
  display: grid;
  gap: 14px;
  margin-top: clamp(30px, 4vw, 54px);
}

.es-detail__cards--three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.es-detail__card {
  position: relative;
  display: flex;
  min-height: 270px;
  flex-direction: column;
  padding: 27px 25px 24px;
  overflow: hidden;
  border: 1px solid var(--es-hairline);
  background: rgba(255, 255, 255, .56);
  color: inherit;
  text-decoration: none;
  transition: transform .2s var(--es-ease), border-color .2s var(--es-ease), background .2s var(--es-ease);
}

.es-detail__card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 48px;
  height: 2px;
  background: var(--es-accent);
  transform: scaleX(.35);
  transform-origin: left;
  transition: transform .22s var(--es-ease);
}

.es-detail__card:hover,
.es-detail__card:focus-visible {
  border-color: rgba(198, 138, 36, .68);
  background: #fff;
  transform: translateY(-2px);
}

.es-detail__card:hover::before,
.es-detail__card:focus-visible::before {
  transform: scaleX(1);
}

.es-detail__card>span {
  color: var(--es-accent-deep);
  font: 600 11px/1 var(--es-sans);
  letter-spacing: .12em;
}

.es-detail__card h3 {
  margin: 42px 0 11px;
  color: var(--es-ink);
  font: 600 20px/1.25 var(--es-sans);
}

.es-detail__card p {
  margin: 0;
  color: var(--es-ink-soft);
  font: 400 15px/1.56 var(--es-sans);
}

.es-detail__card b {
  margin-top: auto;
  padding-top: 25px;
  color: var(--es-ink);
  font: 600 11px/1.2 var(--es-sans);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.es-detail__route {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: clamp(30px, 5vw, 64px);
  padding-top: 28px;
  border-top: 1px solid var(--es-hairline);
}

.es-detail__route p {
  max-width: 39ch;
  margin: 0;
  color: var(--es-ink-soft);
  font: 400 16px/1.55 var(--es-sans);
}

.es-detail__discipline-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin-top: clamp(31px, 5vw, 62px);
  border: 1px solid var(--es-hairline);
  background: var(--es-hairline);
}

.es-detail__discipline-grid a {
  min-height: 170px;
  padding: 25px;
  background: var(--es-paper);
  color: inherit;
  text-decoration: none;
  transition: background .18s ease-out;
}

.es-detail__discipline-grid a:hover,
.es-detail__discipline-grid a:focus-visible {
  background: #fff;
}

.es-detail__discipline-grid b {
  display: block;
  margin-bottom: 13px;
  color: var(--es-ink);
  font: 600 19px/1.2 var(--es-sans);
}

.es-detail__discipline-grid span {
  display: block;
  color: var(--es-ink-soft);
  font: 400 14px/1.54 var(--es-sans);
}

.es-detail__requirement-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin-top: clamp(30px, 4vw, 54px);
  border: 1px solid rgba(242, 239, 233, .16);
  background: rgba(242, 239, 233, .16);
}

.es-detail__requirement-grid article {
  min-height: 234px;
  padding: 26px 22px;
  background: var(--es-canvas);
}

.es-detail__requirement-grid span {
  color: var(--es-accent);
  font: 400 42px/.9 var(--es-serif);
}

.es-detail__requirement-grid h3 {
  margin: 31px 0 10px;
  color: var(--es-text-on-dark);
  font: 600 18px/1.25 var(--es-sans);
}

.es-detail__requirement-grid p {
  margin: 0;
  color: var(--es-muted-on-dark);
  font: 400 14px/1.55 var(--es-sans);
}

.es-detail__report-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, .34fr);
  gap: clamp(38px, 8vw, 130px);
  align-items: start;
}

.es-detail__report-grid .es-h2 {
  margin: 0 0 16px;
}

.es-detail__aside {
  padding: 24px;
  border-top: 3px solid var(--es-accent);
  background: var(--es-paper-2);
}

.es-detail__aside-label {
  margin: 0 0 22px !important;
  color: var(--es-accent-deep) !important;
  font: 600 10.5px/1 var(--es-sans) !important;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.es-detail__aside>a {
  display: block;
  padding: 14px 0;
  border-top: 1px solid var(--es-hairline);
  color: var(--es-ink);
  font: 600 15px/1.35 var(--es-sans);
  text-decoration: none;
}

.es-detail__aside>a::after {
  content: " →";
  color: var(--es-accent-deep);
}

.es-detail__aside>p:not(.es-detail__aside-label) {
  margin: 0;
  color: var(--es-ink-soft);
  font: 400 15px/1.58 var(--es-sans);
}

.es-detail__close {
  position: relative;
  overflow: hidden;
  padding: clamp(58px, 8vw, 106px) 0;
  color: var(--es-text-on-dark);
  background: var(--es-canvas-3);
}

.es-detail__close::before {
  content: "";
  position: absolute;
  top: -17vw;
  right: -5vw;
  width: min(42vw, 560px);
  aspect-ratio: 1;
  border: 1px solid rgba(224, 165, 59, .2);
  border-radius: 50%;
}

.es-detail__close .es-shell {
  position: relative;
  display: grid;
  grid-template-columns: minmax(230px, .78fr) minmax(220px, .86fr) minmax(220px, .7fr);
  gap: clamp(28px, 5vw, 78px);
  align-items: end;
}

.es-detail__metrics {
  display: grid;
  gap: 11px;
}

.es-detail__metrics span {
  color: var(--es-muted-on-dark);
  font: 500 11px/1.2 var(--es-sans);
  letter-spacing: .07em;
  text-transform: uppercase;
}

.es-detail__metrics b {
  display: inline-block;
  min-width: 60px;
  color: var(--es-text-on-dark);
  font: 400 28px/1 var(--es-serif);
  letter-spacing: 0;
}

.es-detail__close .es-eyebrow {
  margin: 0 0 10px;
  color: var(--es-accent);
}

.es-detail__close .es-h2 {
  margin: 0;
  color: var(--es-text-on-dark);
}

.es-detail__close-action {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

.es-detail__close-action .es-textlink {
  color: var(--es-text-on-dark);
  border-bottom-color: rgba(242, 239, 233, .3);
}

@media (max-width: 900px) {

  .es-detail__hero-grid,
  .es-detail__split,
  .es-detail__report-grid,
  .es-detail__close .es-shell {
    grid-template-columns: 1fr;
  }

  .es-detail__hero-grid {
    min-height: 0;
  }

  .es-detail__hero-note {
    max-width: 360px;
    align-self: start;
  }

  .es-detail__section-heading {
    position: static;
  }

  .es-detail__section-heading .es-h2 {
    max-width: 17ch;
  }

  .es-detail__cards--three {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .es-detail__requirement-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .es-detail__close .es-shell {
    align-items: start;
  }
}

@media (max-width: 620px) {
  .es-detail__hero-grid {
    padding-top: 42px;
  }

  .es-detail__hero-note {
    padding-left: 18px;
  }

  .es-detail__hero-note>span {
    margin-bottom: 20px;
    font-size: 46px;
  }

  .es-detail__nav a {
    padding-right: 16px;
    padding-left: 16px;
  }

  .es-detail__nav a::after {
    right: 16px;
    left: 16px;
  }

  .es-detail__cards--three,
  .es-detail__discipline-grid,
  .es-detail__requirement-grid {
    grid-template-columns: 1fr;
  }

  .es-detail__card {
    min-height: 0;
  }

  .es-detail__route {
    display: block;
  }

  .es-detail__route .es-btn {
    margin-top: 18px;
  }

  .es-detail__actions {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* ---- Template personalities: these are deliberately not generic overrides. ---- */

/* T1 | Specialty: a clinical evidence ledger, ordered from the question to the claim. */
.es-detail--specialty .es-detail__hero-note {
  border-left-color: var(--es-accent);
}

.es-detail--specialty .es-detail__hero-note::after {
  content: "";
  display: block;
  width: 46px;
  height: 46px;
  margin: 28px 0 -1px auto;
  border: 1px solid rgba(224, 165, 59, .55);
  border-radius: 50% 50% 0 0;
}

.es-detail--specialty .es-detail__feature-image {
  width: min(78vw, 1080px);
  aspect-ratio: 16 / 7;
  margin: -62px auto 0;
  border-radius: 999px 999px 10px 10px;
  box-shadow: 0 18px 40px rgba(11, 30, 51, .16);
}

.es-detail--specialty .es-detail__feature-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(11, 30, 51, .26), transparent 54%);
  pointer-events: none;
}

.es-detail--specialty .es-detail__split {
  grid-template-columns: minmax(240px, .45fr) minmax(0, 1.2fr);
}

.es-detail--specialty .es-detail__question-list {
  position: relative;
  gap: 12px;
  border: 0;
}

.es-detail--specialty .es-detail__question-list::before {
  content: "";
  position: absolute;
  top: 24px;
  bottom: 24px;
  left: 6px;
  width: 1px;
  background: var(--es-accent);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform .9s var(--es-ease);
}

.es-detail--specialty .es-detail__question-list.is-effect-live::before {
  transform: scaleY(1);
}

.es-detail--specialty .es-detail__question-list li {
  min-height: 82px;
  padding: 21px 22px 21px 50px;
  border: 1px solid var(--es-hairline);
  background: rgba(255, 255, 255, .56);
  transition: transform .2s var(--es-ease), border-color .2s var(--es-ease), background .2s var(--es-ease);
}

.es-detail--specialty .es-detail__question-list li::before {
  top: 28px;
  left: 0;
  z-index: 1;
  width: 13px;
  height: 13px;
  box-shadow: 0 0 0 6px var(--es-paper);
}

.es-detail--specialty .es-detail__question-list li::after {
  content: counter(es-evidence, decimal-leading-zero);
  position: absolute;
  top: 19px;
  left: 24px;
  color: var(--es-accent-deep);
  font: 600 10px/1 var(--es-sans);
  letter-spacing: .08em;
}

.es-detail--specialty .es-detail__question-list {
  counter-reset: es-evidence;
}

.es-detail--specialty .es-detail__question-list li {
  counter-increment: es-evidence;
}

.es-detail--specialty .es-detail__question-list li:hover {
  border-color: rgba(198, 138, 36, .65);
  background: #fff;
  transform: translateX(3px);
}

.es-detail--specialty .es-detail__cards--three {
  grid-template-columns: 1.08fr .92fr 1.08fr;
  gap: 0;
  border-top: 1px solid var(--es-hairline);
  border-bottom: 1px solid var(--es-hairline);
}

.es-detail--specialty .es-detail__cards--three .es-detail__card {
  min-height: 310px;
  border-width: 0 0 0 1px;
  background: transparent;
}

.es-detail--specialty .es-detail__cards--three .es-detail__card:first-child {
  border-left: 0;
}

.es-detail--specialty .es-detail__cards--three .es-detail__card:hover {
  background: rgba(255, 255, 255, .7);
}

/* T3 | Claim: a six-discipline matrix, deliberately denser and more analytical. */
.es-detail--claim .es-detail__hero {
  background: linear-gradient(135deg, var(--es-canvas) 0%, var(--es-canvas-2) 100%);
}

.es-detail--claim .es-detail__hero::before {
  right: 16%;
  bottom: -24vw;
  width: min(58vw, 780px);
  border-radius: 0;
  transform: rotate(45deg);
}

.es-detail--claim .es-detail__hero::after {
  right: 31%;
  bottom: 13%;
  width: 9px;
  height: 9px;
  aspect-ratio: auto;
  border: 0;
  border-radius: 0;
  background: var(--es-accent);
}

/* ---- claim hero: the picture is a COLUMN, not a floated overlap ----

   It used to be placed by margin alone - "margin: -148px <right> -76px auto"
   - which is a set of numbers tuned against one particular box size. It sat
   outside the grid, so nothing held it level with anything, and the moment
   the box changed (the 9px white frame came off, which takes 18px out of
   both dimensions) the whole thing dropped down the page. Numbers that only
   work at one size are not a layout.

   It now occupies the second column of the hero grid, first row, aligned to
   the top - so it is level with the heading by construction and cannot
   drift when its own size changes.

   The note goes in the SAME cell, aligned to the bottom, over the picture.
   That is what frees the column the note used to occupy, which is the space
   the picture has now taken. */
@media (min-width: 901px) {
  .es-detail--claim .es-detail__hero-grid {
    grid-template-columns: minmax(0, 1fr) minmax(300px, .44fr);
    align-items: start;
    gap: clamp(30px, 5vw, 76px);
  }

  .es-detail--claim .es-detail__hero-copy {
    grid-column: 1;
    grid-row: 1;
    align-self: center;
  }

  .es-detail--claim .es-detail__feature-image {
    grid-column: 2;
    grid-row: 1;
    align-self: start;
    width: 100%;
    max-width: 435px;
    aspect-ratio: 4 / 5;
    margin: 0 0 0 auto;
    border-radius: 999px 999px 8px 8px;
    box-shadow: 0 18px 42px rgba(11, 30, 51, .18);
  }

  .es-detail--claim .es-detail__feature-image::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 18px -18px -18px 18px;
    border: 1px solid var(--es-accent);
    border-radius: 999px 999px 8px 8px;
  }

  /* The note now sits ON the photograph, so it needs its own ground: a
     picture is not a background you can put 14px text on and hope. The
     gradient is opaque where the words are and clears completely by the
     top, so it reads as the foot of the image rather than a panel dropped
     on it. text-shadow covers the case where the crop is pale exactly
     where the gradient is thinnest. */
  .es-detail--claim .es-detail__hero-note {
    grid-column: 2;
    grid-row: 1;
    align-self: end;
    position: relative;
    z-index: 4;
    width: 100%;
    max-width: 435px;
    margin: 0 0 0 auto;
    padding: 74px 24px 22px;
    border: 0;
    border-radius: 0 0 8px 8px;
    background: linear-gradient(to top,
        rgba(6, 16, 28, .93) 0%,
        rgba(6, 16, 28, .86) 38%,
        rgba(6, 16, 28, .58) 68%,
        rgba(6, 16, 28, 0) 100%);
  }

  .es-detail--claim .es-detail__hero-note>span {
    margin-bottom: 10px;
    font-size: 40px;
    line-height: .9;
    text-shadow: 0 1px 10px rgba(0, 0, 0, .5);
  }

  .es-detail--claim .es-detail__hero-note p {
    max-width: none;
    color: rgba(255, 255, 255, .92);
    text-shadow: 0 1px 8px rgba(0, 0, 0, .55);
  }
}

/* Below the breakpoint the grid is a single column: the picture is full
   width and the note goes back to being a block under it, on the page
   background, where it does not need a scrim. */
@media (max-width: 900px) {
  .es-detail--claim .es-detail__feature-image {
    width: 100%;
    aspect-ratio: 4 / 5;
    margin: 0 0 18px;
    border-radius: 999px 999px 8px 8px;
    box-shadow: 0 18px 42px rgba(11, 30, 51, .18);
  }
}

.es-detail--claim .es-detail__section-intro {
  display: grid;
  grid-template-columns: minmax(180px, .32fr) minmax(0, 1fr);
  gap: 28px;
  align-items: end;
  max-width: none;
}

.es-detail--claim .es-detail__section-intro .es-eyebrow {
  grid-column: 1;
  margin: 0;
}

.es-detail--claim .es-detail__section-intro .es-h2 {
  grid-column: 1;
  margin: 0;
}

.es-detail--claim .es-detail__section-intro>p:last-child {
  grid-column: 2;
  max-width: 53ch;
}

.es-detail--claim .es-detail__discipline-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  border: 0;
  background: none;
}

.es-detail--claim .es-detail__discipline-grid a {
  position: relative;
  min-height: 205px;
  padding: 27px 24px 24px;
  overflow: hidden;
  border: 1px solid var(--es-hairline);
  background: var(--es-paper-2);
}

.es-detail--claim .es-detail__discipline-grid a::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: var(--es-accent);
  transform: scaleX(.18);
  transform-origin: left;
  transition: transform .5s var(--es-ease);
}

.es-detail--claim .es-detail__discipline-grid.is-effect-live a::before {
  transform: scaleX(1);
}

.es-detail--claim .es-detail__discipline-grid a:hover {
  background: #fff;
  transform: translateY(-2px);
}

.es-detail--claim .es-detail__discipline-grid b::before {
  display: block;
  margin-bottom: 34px;
  color: var(--es-accent-deep);
  font: 600 10px/1 var(--es-sans);
  letter-spacing: .1em;
}

.es-detail--claim .es-detail__discipline-grid a:nth-child(1) b::before {
  content: "01 / injury";
}

.es-detail--claim .es-detail__discipline-grid a:nth-child(2) b::before {
  content: "02 / trauma";
}

.es-detail--claim .es-detail__discipline-grid a:nth-child(3) b::before {
  content: "03 / sequelae";
}

.es-detail--claim .es-detail__discipline-grid a:nth-child(4) b::before {
  content: "04 / pain";
}

.es-detail--claim .es-detail__discipline-grid a:nth-child(5) b::before {
  content: "05 / appearance";
}

.es-detail--claim .es-detail__discipline-grid a:nth-child(6) b::before {
  content: "06 / function";
}

.es-detail--claim .es-detail__route {
  padding: 30px;
  border: 0;
  color: var(--es-text-on-dark);
  background: var(--es-canvas);
}

.es-detail--claim .es-detail__route p {
  color: var(--es-muted-on-dark);
}

.es-detail--claim .es-detail__split {
  grid-template-columns: minmax(0, 1fr) minmax(260px, .7fr);
}

.es-detail--claim .es-detail__section-heading {
  padding: 30px;
  color: var(--es-text-on-dark);
  background: var(--es-canvas-2);
}

.es-detail--claim .es-detail__section-heading .es-h2 {
  color: var(--es-text-on-dark);
}

.es-detail--claim #jurisdictionTitle,
.es-detail--claim #jurisdictionTitle .es-w,
.es-detail--claim #jurisdictionTitle .es-w>span {
  color: var(--es-text-on-dark) !important;
}

.es-detail--claim #jurisdiction .es-detail__number {
  display: none;
}

.es-detail--claim .es-detail__section-heading .es-eyebrow {
  color: var(--es-accent);
}

.es-detail--claim .es-detail__number {
  color: rgba(242, 239, 233, .12);
}

/* T4 | Report: a formal report folio on paper, not a marketing surface. */
.es-detail--report {
  background: #f0ece4;
}

.es-detail--report .es-detail__hero {
  color: var(--es-text-on-dark);
  background: var(--es-canvas);
}

.es-detail--report .es-detail__hero::before {
  top: 0;
  right: 7%;
  bottom: auto;
  width: min(46vw, 590px);
  border-color: rgba(224, 165, 59, .22);
  border-radius: 50% 50% 0 0;
}

.es-detail--report .es-detail__hero::after {
  top: 0;
  right: 11%;
  bottom: auto;
  width: 1px;
  height: 100%;
  background: rgba(242, 239, 233, .12);
}

.es-detail--report .es-detail__crumb {
  color: var(--es-muted-on-dark);
}

.es-detail--report .es-detail__crumb a {
  border-bottom-color: rgba(242, 239, 233, .25);
}

.es-detail--report .es-detail__crumb [aria-current="page"],
.es-detail--report .es-detail__hero .es-h1 {
  color: var(--es-text-on-dark);
}

.es-detail--report .es-detail__lead {
  color: var(--es-muted-on-dark);
}

.es-detail--report .es-detail__actions .es-textlink {
  color: var(--es-text-on-dark);
  border-bottom-color: rgba(242, 239, 233, .3);
}

.es-detail--report .es-detail__hero-note {
  border-color: rgba(242, 239, 233, .2);
  background: rgba(19, 49, 79, .38);
}

.es-detail--report .es-detail__hero-note p {
  color: rgba(242, 239, 233, .82);
}

.es-detail--report .es-detail__feature-image {
  width: min(28vw, 390px);
  aspect-ratio: 4 / 5;
  margin: -126px max(8vw, calc((100vw - 1160px) / 2)) -58px auto;
  border-radius: 5px;
  box-shadow: 12px 14px 0 rgba(224, 165, 59, .26), 0 18px 38px rgba(11, 30, 51, .13);
}

.es-detail--report .es-detail__feature-image img {
  object-position: center;
  filter: saturate(.78) contrast(1.03);
}

.es-detail--report .es-detail__split {
  grid-template-columns: minmax(0, .82fr) minmax(0, 1fr);
}

.es-detail--report .es-detail__section-heading {
  padding: 30px;
  border-top: 3px solid var(--es-accent);
  background: #fff;
}

.es-detail--report .es-detail__requirement-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  border: 0;
  background: none;
}

.es-detail--report .es-detail__requirement-grid article {
  position: relative;
  min-height: 200px;
  padding: 32px;
  border: 1px solid var(--es-hairline);
  background: #fff;
  box-shadow: 0 8px 17px rgba(11, 30, 51, .035);
  transition: transform .45s var(--es-ease), box-shadow .45s var(--es-ease);
}

.es-detail--report .es-detail__requirement-grid article:nth-child(even) {
  transform: translateY(24px);
}

.es-detail--report .es-detail__requirement-grid.is-effect-live article:nth-child(even) {
  transform: translateY(0);
}

.es-detail--report .es-detail__requirement-grid article::after {
  content: "PD35";
  position: absolute;
  top: 24px;
  right: 26px;
  color: rgba(11, 30, 51, .24);
  font: 600 10px/1 var(--es-sans);
  letter-spacing: .12em;
}

.es-detail--report .es-detail__requirement-grid h3 {
  color: var(--es-ink);
}

.es-detail--report .es-detail__requirement-grid p {
  color: var(--es-ink-soft);
}

.es-detail--report .es-detail__route {
  border-top-color: var(--es-accent);
}

/* T5 | Location: an institutional route map, with local points as waymarkers. */
.es-detail--location .es-detail__hero {
  background: var(--es-canvas-2);
}

.es-detail--location .es-detail__hero::before {
  right: -8vw;
  bottom: -7vw;
  width: min(50vw, 670px);
  border-style: dashed;
  border-radius: 50%;
}

.es-detail--location .es-detail__hero-note {
  position: relative;
  padding-bottom: 24px;
}

.es-detail--location .es-detail__hero-note::before {
  content: none;
}

.es-detail--location .es-detail__feature-image {
  height: clamp(210px, 24vw, 365px);
  margin: 0;
}

.es-detail--location .es-detail__feature-image::after {
  content: attr(data-location-label) !important;
  position: absolute;
  right: clamp(20px, 7vw, 110px);
  bottom: 25px;
  color: rgba(242, 239, 233, .92);
  font: 600 clamp(10px, 1vw, 13px)/1 var(--es-sans);
  letter-spacing: .2em;
}

.es-detail--location .es-detail__feature-image img {
  object-position: center 40%;
  filter: saturate(.76) contrast(1.08) brightness(.8);
}

.es-detail--location .es-detail__split {
  grid-template-columns: minmax(0, .95fr) minmax(0, 1fr);
}

.es-detail--location .es-detail__section-heading {
  padding-left: clamp(28px, 5vw, 76px);
  border-left: 1px solid var(--es-accent);
}

.es-detail--location .es-detail__cards--three {
  position: relative;
  gap: 0;
  margin-top: clamp(35px, 6vw, 72px);
}

.es-detail--location .es-detail__cards--three::before {
  content: "";
  position: absolute;
  top: 41px;
  right: 12%;
  left: 12%;
  height: 1px;
  background: var(--es-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1s var(--es-ease);
}

.es-detail--location .es-detail__cards--three.is-effect-live::before {
  transform: scaleX(1);
}

.es-detail--location .es-detail__cards--three .es-detail__card {
  min-height: 260px;
  margin-left: -1px;
  border-top: 0;
  background: transparent;
}

.es-detail--location .es-detail__cards--three .es-detail__card::before {
  top: 35px;
  left: 50%;
  width: 13px;
  height: 13px;
  border: 4px solid var(--es-paper-2);
  border-radius: 50%;
  transform: translateX(-50%);
}

.es-detail--location .es-detail__cards--three .es-detail__card:nth-child(2) {
  margin-top: 32px;
}

.es-detail--location .es-detail__cards--three .es-detail__card:nth-child(3) {
  margin-top: 64px;
}

.es-detail--location .es-detail__cards--three .es-detail__card>span {
  margin-top: 45px;
}

.es-detail--location .es-detail__cards--three .es-detail__card h3 {
  margin-top: 28px;
}

.es-detail--location .es-detail__route {
  padding: 28px 0 0 28px;
  border-top: 0;
  border-left: 3px solid var(--es-accent);
}

@media (max-width: 900px) {
  .es-detail--claim .es-detail__section-intro {
    grid-template-columns: 1fr;
  }

  .es-detail--claim .es-detail__section-intro .es-eyebrow,
  .es-detail--claim .es-detail__section-intro .es-h2,
  .es-detail--claim .es-detail__section-intro>p:last-child {
    grid-column: 1;
  }

  .es-detail--claim .es-detail__discipline-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .es-detail--location .es-detail__split {
    grid-template-columns: 1fr;
  }

  .es-detail--claim .es-detail__feature-image,
  .es-detail--report .es-detail__feature-image {
    width: min(46vw, 380px);
    margin-right: 7vw;
  }
}

@media (max-width: 620px) {

  .es-detail--specialty .es-detail__cards--three,
  .es-detail--claim .es-detail__discipline-grid {
    grid-template-columns: 1fr;
  }

  .es-detail--specialty .es-detail__cards--three .es-detail__card {
    min-height: 220px;
    border-width: 1px 0 0;
  }

  .es-detail--specialty .es-detail__cards--three .es-detail__card:first-child {
    border-top: 0;
  }

  .es-detail--report .es-detail__requirement-grid {
    grid-template-columns: 1fr;
  }

  .es-detail--report .es-detail__requirement-grid article:nth-child(even) {
    transform: none;
  }

  .es-detail--location .es-detail__cards--three::before {
    top: 10%;
    bottom: 10%;
    left: 41px;
    width: 1px;
    height: auto;
    transform: scaleY(0);
    transform-origin: top;
  }

  .es-detail--location .es-detail__cards--three.is-effect-live::before {
    transform: scaleY(1);
  }

  .es-detail--location .es-detail__cards--three .es-detail__card,
  .es-detail--location .es-detail__cards--three .es-detail__card:nth-child(n) {
    margin: 0;
    border-top: 1px solid var(--es-hairline);
  }

  .es-detail--location .es-detail__cards--three .es-detail__card::before {
    top: 29px;
    left: 34px;
    transform: none;
  }

  .es-detail--location .es-detail__cards--three .es-detail__card>span {
    margin: 0 0 0 42px;
  }

  .es-detail--location .es-detail__cards--three .es-detail__card h3,
  .es-detail--location .es-detail__cards--three .es-detail__card p {
    margin-left: 42px;
  }

  .es-detail--specialty .es-detail__feature-image {
    width: calc(100% - 32px);
    margin-top: -26px;
    border-radius: 72px 72px 8px 8px;
  }

  .es-detail--claim .es-detail__feature-image,
  .es-detail--report .es-detail__feature-image {
    width: min(67vw, 330px);
    margin: -52px 20px -27px auto;
  }

  .es-detail--location .es-detail__feature-image {
    height: 200px;
  }
}

@media (prefers-reduced-motion: reduce) {

  .es-detail--specialty .es-detail__question-list::before,
  .es-detail--claim .es-detail__discipline-grid a::before,
  .es-detail--report .es-detail__requirement-grid article,
  .es-detail--location .es-detail__cards--three::before {
    transition: none !important;
    transform: none !important;
  }

  .es-detail--specialty .es-detail__question-list li,
  .es-detail--claim .es-detail__discipline-grid a,
  .es-detail--report .es-detail__requirement-grid article {
    transition: none !important;
  }
}

/* Shared panoramic image treatment requested for the four detail templates. */
.es-detail--specialty .es-detail__feature-image,
.es-detail--claim .es-detail__feature-image,
.es-detail--report .es-detail__feature-image {
  width: 100%;
  height: clamp(210px, 24vw, 365px);
  aspect-ratio: auto;
  margin: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.es-detail--specialty .es-detail__feature-image::before,
.es-detail--claim .es-detail__feature-image::before {
  display: none;
}

.es-detail--specialty .es-detail__feature-image::after,
.es-detail--claim .es-detail__feature-image::after,
.es-detail--report .es-detail__feature-image::after {
  position: absolute;
  top: auto;
  right: clamp(20px, 7vw, 110px);
  bottom: 25px;
  left: auto;
  width: auto;
  height: auto;
  color: rgba(242, 239, 233, .92);
  background: none;
  font: 600 clamp(10px, 1vw, 13px)/1 var(--es-sans);
  letter-spacing: .2em;
  transform: none;
}

.es-detail--specialty .es-detail__feature-image::after {
  content: attr(data-page-label);
}

.es-detail--claim .es-detail__feature-image::after {
  content: attr(data-page-label);
}

.es-detail--report .es-detail__feature-image::after {
  content: attr(data-page-label);
}

.es-detail--specialty .es-detail__feature-image img,
.es-detail--claim .es-detail__feature-image img {
  object-position: center 48%;
  filter: saturate(.76) contrast(1.08) brightness(.8);
}

.es-detail--report .es-detail__feature-image img {
  object-position: center 34%;
  filter: saturate(.76) contrast(1.08) brightness(.8);
}

.es-detail__hero-note>span {
  display: none;
}

@media (max-width: 620px) {

  .es-detail--specialty .es-detail__feature-image,
  .es-detail--claim .es-detail__feature-image,
  .es-detail--report .es-detail__feature-image {
    width: 100%;
    height: 200px;
    margin: 0;
    border: 0;
  }
}

/* Report pages: place the evidence image in the hero itself.  This removes the
   empty note column and makes every report type share one clear visual rhythm. */
.es-detail--report .es-detail__hero-grid {
  grid-template-columns: minmax(0, 1fr) minmax(290px, .64fr);
  gap: clamp(34px, 6vw, 92px);
  align-items: center;
  min-height: clamp(430px, 40vw, 525px);
}

.es-detail--report .es-detail__hero-media {
  display: block;
  width: min(100%, 410px);
  height: clamp(330px, 31vw, 440px);
  justify-self: end;
  aspect-ratio: auto;
  margin: 0;
  overflow: hidden;
  border: 7px solid rgba(242, 239, 233, .92);
  border-radius: 220px 220px 12px 12px;
  box-shadow: 13px 14px 0 rgba(224, 165, 59, .32), 0 20px 44px rgba(0, 0, 0, .24);
}

.es-detail--report .es-detail__hero-media img {
  height: 100%;
  object-position: center 35%;
  filter: saturate(.84) contrast(1.03) brightness(.9);
}

.es-detail--report .es-detail__hero-media::after {
  right: 23px;
  bottom: 24px;
  font-size: 10px;
  text-shadow: 0 1px 10px rgba(0, 0, 0, .45);
}

@media (max-width: 760px) {
  .es-detail--report .es-detail__hero-grid {
    grid-template-columns: 1fr;
    padding-bottom: 48px;
  }

  .es-detail--report .es-detail__hero-media {
    width: 100%;
    height: 260px;
    justify-self: stretch;
    border-width: 5px;
    border-radius: 120px 120px 8px 8px;
  }
}

section.es-detail__hero::after {
  display: none !important;
}

/* Final feature-image slot rule: shared by specialty, claim, report and location pages.
   This deliberately follows all template-specific and responsive declarations above. */
.es-detail .es-detail__feature-image {
  width: 100% !important;
  height: clamp(210px, 24vw, 365px) !important;
  aspect-ratio: auto !important;
  margin: 0 !important;
  overflow: hidden;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.es-detail .es-detail__feature-image::before {
  display: none !important;
}

.es-detail .es-detail__feature-image>img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center 48% !important;
}

@media (max-width: 620px) {
  .es-detail .es-detail__feature-image {
    height: 200px !important;
  }
}

/* ==========================================================================
   Feature image, restored into the hero -- whole image, never cropped.

   The old slot was a 5.2:1 full-bleed band. A 3:2 photograph lost about 71% of
   its height to it and a portrait one lost 87%, which is why the subject was
   unreadable. These sources are mixed: roughly two thirds landscape, one third
   portrait, in every template.

   So the size is bounded by HEIGHT, not width. `max-height` with `width: auto`
   lets each photograph keep its own aspect ratio and be shown in full -- a
   landscape shot renders wide and short, a portrait one narrow and tall, and
   neither is ever cut. `object-fit` is deliberately absent: there is no fixed
   box to fit into, so there is nothing to crop.

   Each template gets its own placement and framing.
   ========================================================================== */
.es-detail__feature-image {
  display: flex !important;
  position: relative;
  z-index: 3;
  justify-content: center;
  align-items: flex-end;
  width: min(1180px, 92vw) !important;
  height: auto !important;
  aspect-ratio: auto !important;
  margin: clamp(-96px, -7vw, -48px) auto 0 !important;
  padding: 0;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: none;
}

.es-detail__feature-image>img {
  display: block;
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: clamp(240px, 27vw, 380px) !important;
  object-fit: fill !important;
  object-position: center !important;
  filter: none !important;
  border-radius: 3px;
}

/* The label sat on top of a cropped photograph. With the whole image showing
   it would cover the subject, so it moves to the paper below the frame. */
.es-detail__feature-image::after {
  position: absolute;
  right: 0;
  bottom: -26px;
  left: auto;
  width: auto;
  height: auto;
  color: var(--es-accent-deep);
  background: none;
  font: 600 10px/1 var(--es-sans);
  letter-spacing: .2em;
  transform: none;
  pointer-events: none;
}

/* Specialty -- centred, framed in paper, sitting across the hero edge. */
.es-detail__feature-image--specialty>img {
  padding: 10px;
  border: 1px solid var(--es-hairline);
  background: var(--es-paper);
  box-shadow: 0 16px 38px rgba(11, 30, 51, .16);
}

/* Claim types -- pushed to the right, with a gold rule under the frame. */
.es-detail__feature-image--claim {
  justify-content: flex-end;
}

.es-detail__feature-image--claim>img {
  max-height: clamp(220px, 24vw, 340px) !important;
  border-bottom: 4px solid var(--es-accent);
  box-shadow: 0 14px 34px rgba(11, 30, 51, .2);
}

.es-detail__feature-image--claim::after {
  right: 0;
}

/* Reports -- offset gold shadow, the treatment the report template already
   used for its media. */
.es-detail__feature-image--report {
  justify-content: flex-end;
}

.es-detail__feature-image--report>img {
  max-height: clamp(210px, 23vw, 320px) !important;
  box-shadow: 12px 14px 0 rgba(224, 165, 59, .3), 0 16px 34px rgba(11, 30, 51, .14);
}

/* Locations -- wide and low, the shape a cityscape actually wants. */
.es-detail__feature-image--location>img {
  max-height: clamp(200px, 21vw, 290px) !important;
  box-shadow: 0 14px 32px rgba(11, 30, 51, .18);
}

.es-detail__feature-image--location::after {
  content: attr(data-location-label);
}

@media (max-width: 760px) {
  .es-detail__feature-image {
    width: calc(100% - 32px) !important;
    margin-top: -30px !important;
  }

  .es-detail__feature-image--claim,
  .es-detail__feature-image--report {
    justify-content: center;
  }

  .es-detail__feature-image>img {
    max-height: 220px !important;
  }

  .es-detail__feature-image--report>img {
    border-width: 5px;
  }
}

/* "Last reviewed" stamp hidden on the hub pages. */
.main-hub__reviewed {
  display: none !important;
}

/* CTA appended to the Search route aside on location and nation pages.
   `.es-detail__aside > a` styles the aside's link list and outranks `.es-btn`
   on specificity, so the button arrived full width, without side padding, with
   a rule above it and with a second arrow from that rule's ::after. Two class
   names here outrank it cleanly -- no !important needed. Sized down from the
   28px page-level button, because the aside column is narrow. */
.es-detail__aside .es-btn {
  display: inline-flex;
  width: auto;
  margin-top: 20px;
  padding: 11px 19px;
  border-top: 0;
  font: 600 13px/1 var(--es-sans);
}

.es-detail__aside .es-btn::after {
  content: none;
}

.es-detail__aside .es-btn .arr {
  font-size: 14px;
}

#context .es-h2,
#context .es-h2 .es-w,
#context .es-h2 .es-w span {
  color: #ffffff !important;
}


/* ==========================================================================
   JOIN THE REGISTER  /join-as-an-expert/
   Its own treatment rather than a detail-template copy: the page addresses
   practitioners, not instructing solicitors, and has one thing to do on it.
   ========================================================================== */
.join-expert__crown .main-hub__crown-inner {
  grid-template-columns: minmax(0, 1fr) minmax(280px, .5fr);
  align-items: center;
}

.join-expert__art img {
  width: 100%;
  height: auto;
  border-radius: 3px;
  box-shadow: 0 20px 44px rgba(0, 0, 0, .34);
}

.join-expert__terms-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin-top: clamp(30px, 4vw, 48px);
  background: var(--es-hairline);
  border: 1px solid var(--es-hairline);
}

.join-expert__term {
  padding: clamp(24px, 2.6vw, 34px);
  background: var(--es-paper);
}

/* The number is the ornament here: oversized and low contrast, sitting behind
   the heading the way the section numerals do elsewhere on the site. */
.join-expert__num {
  display: block;
  margin-bottom: 14px;
  color: rgba(19, 49, 79, .16);
  font: 400 44px/1 var(--es-serif);
}

.join-expert__term h3 {
  margin: 0 0 10px;
  color: var(--es-ink);
  font: 500 clamp(17px, 1.5vw, 20px)/1.25 var(--es-serif);
}

.join-expert__term p {
  margin: 0;
  color: var(--es-ink-soft);
  font: 400 14.5px/1.6 var(--es-sans);
}

.join-expert__apply-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, .82fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}

.join-expert__checklist {
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0;
}

.join-expert__checklist li {
  position: relative;
  padding: 13px 0 13px 26px;
  border-bottom: 1px solid var(--es-hairline);
  color: var(--es-ink-soft);
  font: 400 15px/1.5 var(--es-sans);
}

.join-expert__checklist li::before {
  content: "";
  position: absolute;
  top: 20px;
  left: 0;
  width: 7px;
  height: 7px;
  background: var(--es-accent);
  transform: rotate(45deg);
}

/* The form sits on paper against the dark band, so it reads as the one
   actionable object on the page. */
.join-expert__form-panel {
  padding: clamp(26px, 3vw, 38px);
  background: var(--es-paper);
  border-top: 3px solid var(--es-accent);
  border-radius: 2px;
  box-shadow: 0 22px 50px rgba(0, 0, 0, .3);
}

.join-expert__form-label {
  margin: 0 0 20px;
  color: var(--es-accent-deep);
  font: 600 10.5px/1 var(--es-sans);
  letter-spacing: .1em;
  text-transform: uppercase;
}

.join-expert__form-slot>* {
  max-width: 100%;
}

/* Placeholder, visible only while the slot is still empty. Once the shortcode
   is pasted in, the form renders instead and this never shows. */
.join-expert__form-empty {
  margin: 0;
  padding: 34px 0;
  color: var(--es-ink-soft);
  font: 400 14px/1.6 var(--es-sans);
  text-align: center;
  border: 1px dashed var(--es-hairline);
}

.join-expert__form-note {
  margin: 20px 0 0;
  color: var(--es-ink-soft);
  font: 400 12.5px/1.55 var(--es-sans);
}

@media (max-width: 1080px) {
  .join-expert__terms-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .join-expert__apply-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 620px) {
  .join-expert__terms-grid {
    grid-template-columns: 1fr;
  }

  .join-expert__crown .main-hub__crown-inner {
    grid-template-columns: 1fr;
  }
}


/* ==========================================================================
   GUIDE: EXPERT WITNESS REPORTS  /guides/expert-witness-report/
   A document about a document, so the spine is the report's own running
   order: a numbered ladder against a ruled margin, read top to bottom.
   ========================================================================== */
.guide-report__ladder {
  counter-reset: rung;
  margin: clamp(30px, 4vw, 46px) 0 0;
  padding: 0 0 0 clamp(46px, 5vw, 68px);
  list-style: none;
  border-left: 1px solid var(--es-hairline);
}

.guide-report__ladder li {
  position: relative;
  padding: 0 0 clamp(26px, 3vw, 36px);
}

.guide-report__ladder li:last-child {
  padding-bottom: 0;
}

.guide-report__ladder li::before {
  counter-increment: rung;
  content: counter(rung, decimal-leading-zero);
  position: absolute;
  top: 0;
  left: calc(clamp(46px, 5vw, 68px) * -1);
  width: clamp(46px, 5vw, 68px);
  color: var(--es-accent-deep);
  font: 400 13px/1.5 var(--es-sans);
  letter-spacing: .08em;
  text-align: center;
}

/* the keystone, marking each rung on the rule itself */
.guide-report__ladder li::after {
  content: "";
  position: absolute;
  top: 5px;
  left: calc(clamp(46px, 5vw, 68px) * -1 - 4px);
  width: 7px;
  height: 7px;
  background: var(--es-accent);
  transform: rotate(45deg);
}

.guide-report__ladder h3 {
  margin: 0 0 8px;
  color: var(--es-ink);
  font: 500 clamp(18px, 1.6vw, 22px)/1.25 var(--es-serif);
}

.guide-report__ladder p {
  margin: 0;
  max-width: 62ch;
  color: var(--es-ink-soft);
  font: 400 15px/1.65 var(--es-sans);
}

.guide-report__notes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(20px, 2.4vw, 32px);
  margin-top: clamp(28px, 3.5vw, 42px);
}

.guide-report__notes article {
  padding: clamp(22px, 2.4vw, 30px);
  background: var(--es-paper-2);
  border-top: 2px solid var(--es-accent);
}

.guide-report__notes h3 {
  margin: 0 0 9px;
  color: var(--es-ink);
  font: 500 clamp(16px, 1.4vw, 19px)/1.3 var(--es-serif);
}

.guide-report__notes p {
  margin: 0;
  color: var(--es-ink-soft);
  font: 400 14.5px/1.62 var(--es-sans);
}

@media (max-width: 760px) {
  .guide-report__notes {
    grid-template-columns: 1fr;
  }

  .guide-report__ladder {
    padding-left: 34px;
  }

  .guide-report__ladder li::before {
    left: -34px;
    width: 34px;
    font-size: 11.5px;
  }

  .guide-report__ladder li::after {
    left: -38px;
  }
}


/* ==========================================================================
   GUIDE: PART 35 QUESTIONS  /guides/part-35-questions/
   The subject is a sequence with a deadline in it, so the spine is a stepped
   timeline: the stage on the left, the substance beside it. Deliberately not
   the report guide's ladder, because these are moments rather than contents.
   ========================================================================== */
.guide-p35__timeline {
  margin: clamp(30px, 4vw, 46px) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0;
}

.guide-p35__timeline li {
  position: relative;
  display: grid;
  grid-template-columns: minmax(128px, .2fr) minmax(0, 1fr);
  gap: clamp(18px, 2.4vw, 40px);
  padding: clamp(22px, 2.6vw, 30px) 0;
  border-top: 1px solid var(--es-hairline);
}

.guide-p35__timeline li:last-child {
  border-bottom: 1px solid var(--es-hairline);
}

.guide-p35__when {
  padding-top: 4px;
  color: var(--es-accent);
  font: 600 11px/1.4 var(--es-sans);
  letter-spacing: .12em;
  text-transform: uppercase;
}

.guide-p35__timeline h3 {
  margin: 0 0 8px;
  color: var(--es-ink);
  font: 500 clamp(18px, 1.6vw, 22px)/1.25 var(--es-serif);
}

.guide-p35__timeline p {
  margin: 0;
  max-width: 64ch;
  color: var(--es-ink-soft);
  font: 400 15px/1.65 var(--es-sans);
}

.guide-p35__pairs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin-top: clamp(28px, 3.5vw, 42px);
  background: var(--es-hairline);
  border: 1px solid var(--es-hairline);
}

.guide-p35__pairs article {
  padding: clamp(22px, 2.4vw, 32px);
  background: var(--es-paper);
}

.guide-p35__pairs h3 {
  margin: 0 0 9px;
  color: var(--es-ink);
  font: 500 clamp(16px, 1.4vw, 19px)/1.3 var(--es-serif);
}

.guide-p35__pairs p {
  margin: 0;
  color: var(--es-ink-soft);
  font: 400 14.5px/1.62 var(--es-sans);
}

@media (max-width: 760px) {
  .guide-p35__timeline li {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .guide-p35__pairs {
    grid-template-columns: 1fr;
  }
}


/* ==========================================================================
   CLOSING SECTION  .es-close
   Two faults, both site-wide, both in the centred closing band.

   1. The heading was capped at 16ch. That is narrower than the headings it
      has to carry: "Cardiology listings" broke across two lines, and a
      sentence like "Search the register by discipline and location" fell into
      five or six. A centred block of short ragged lines reads as a mistake.
      The cap moves to a range that holds a normal headline on one or two
      lines and still stops a long one running the full shell width.

   2. The separator between the register figures was spaced asymmetrically:
      the flex gap sat before the marker and a 22px margin after it, so each
      marker hugged the item on its left and drifted from the one on its
      right. The margin goes; the gap alone now spaces both sides equally.
   ========================================================================== */
.es-close .es-h2 {
  max-width: min(24ch, 100%);
  text-wrap: balance;
}

.es-close__strip {
  gap: 16px 26px;
  align-items: center;
}

.es-close__strip span+span::before {
  margin-right: 26px;
}

/* The action row sat on the same 26px rhythm as everything else, which left
   the primary button no more weight than the strip above it. A little more
   air separates the ask from the supporting detail. */
.es-close__inner {
  gap: 22px;
}

.es-close__actions {
  margin-top: 10px;
}

@media (max-width: 620px) {

  /* Stacked, the arc markers separate nothing: each figure is already on its
     own line. Keeping them adds a stray gold tick to the left of every row. */
  .es-close__strip {
    gap: 10px 18px;
  }

  .es-close__strip span+span::before {
    display: none;
  }

  .es-close .es-h2 {
    max-width: 100%;
  }
}


/* ==========================================================================
   CORRECTION to the three new page blocks above.

   All three sit inside .es-sec--band, and that band is PAPER, not canvas:
   .es-sec--band { background: var(--es-paper-2) } resolves to #E8EDF3. The
   blocks were first written against the on-dark tokens, so the headings came
   out near-white on near-white and the hairlines vanished. Those colours are
   corrected in the blocks themselves rather than overridden here.

   What remains here is the timeline's layout. Each <li> is a two-column grid
   holding three children -- the stage label, the heading and the paragraph --
   so the third wrapped onto a new row in the FIRST column, which put the body
   text under the label with a gap where it should have been. The rows and
   columns are assigned explicitly instead of left to auto-placement.
   ========================================================================== */

/* ---- Part 35 timeline ---- */
.guide-p35__timeline li {
  grid-template-rows: auto auto;
}

.guide-p35__when {
  grid-column: 1;
  grid-row: 1 / span 2;
  color: var(--es-accent-deep);
}

.guide-p35__timeline h3 {
  grid-column: 2;
  grid-row: 1;
  color: var(--es-ink);
}

.guide-p35__timeline p {
  grid-column: 2;
  grid-row: 2;
  color: var(--es-ink-soft);
}

/* the notes sit on the same paper as the band, so they need their own ground */
.guide-report__notes article {
  background: var(--es-paper);
}


.join-expert__form-panel {
  box-shadow: 0 18px 40px rgba(20, 32, 50, .12);
}

@media (max-width: 760px) {

  /* Stacked, the label sits above its own heading, so it goes back to a
     single column and both rows follow it. */
  .guide-p35__when,
  .guide-p35__timeline h3,
  .guide-p35__timeline p {
    grid-column: 1;
    grid-row: auto;
  }
}


/* ==========================================================================
   "In practice" sections on the two guides.

   .es-detail__section-heading is sticky (top: 94px). With the cards stacked
   underneath it in normal flow, the heading stayed put while they scrolled up
   into it, so the two collided. Sticky only works when the thing that scrolls
   is BESIDE the thing that stays, so the shell becomes two columns: the
   heading holds the left, the cards take the right and pass it cleanly.

   The heading also carried max-width: 11ch, which broke "What separates a
   useful question from a wasted one" across five lines. Inside a column of
   its own the column sets the measure, so the cap is lifted.
   ========================================================================== */
.guide-p35__craft .es-shell,
.guide-report__practice .es-shell,
.join-expert__terms .es-shell {
  display: grid;
  grid-template-columns: minmax(210px, .32fr) minmax(0, 1fr);
  gap: clamp(26px, 4vw, 68px);
  align-items: start;
}

/* align-items: start matters: a stretched grid item is as tall as the row and
   has nothing left to travel, so it cannot stick. */
.guide-p35__craft .es-detail__section-heading,
.guide-report__practice .es-detail__section-heading,
.join-expert__terms .es-detail__section-heading {
  position: sticky;
  top: 118px;
}

.guide-p35__craft .es-detail__section-heading .es-h2,
.guide-report__practice .es-detail__section-heading .es-h2,
.join-expert__terms .es-detail__section-heading .es-h2 {
  max-width: none;
  /* .es-detail__section-heading .es-h2 carries color:#ffffff for the dark
     claim template. These three sections sit on paper, where white is
     invisible. */
  color: var(--es-ink);
}

/* the cards started the row, so the gap above them is now the grid's job */
.guide-p35__craft .guide-p35__pairs,
.guide-report__practice .guide-report__notes,
.join-expert__terms .join-expert__terms-grid {
  margin-top: 0;
}

/* Four columns fitted the full width; in the right-hand column of a split they
   would be 130px wide. Two rows of two reads at this width. */
.join-expert__terms .join-expert__terms-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 900px) {

  /* One column again. Sticky would pin the heading over the cards for the
     whole section, which is the fault this rule set exists to remove. */
  .guide-p35__craft .es-shell,
  .guide-report__practice .es-shell,
  .join-expert__terms .es-shell {
    grid-template-columns: 1fr;
  }

  .guide-p35__craft .es-detail__section-heading,
  .guide-report__practice .es-detail__section-heading,
  .join-expert__terms .es-detail__section-heading {
    position: static;
  }

  .guide-p35__craft .guide-p35__pairs,
  .guide-report__practice .guide-report__notes,
  .join-expert__terms .join-expert__terms-grid {
    margin-top: clamp(22px, 3vw, 32px);
  }
}

@media (max-width: 620px) {
  .join-expert__terms .join-expert__terms-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   /how-to-instruct/  --  four steps down a ruled spine

   The numeral sits in the margin and the rule runs behind it, so the sequence
   reads as one route rather than four cards. Deliberately not the guides'
   ladder or timeline, and not the detail templates' card grid: the page is a
   route with a beginning and an end.
   ========================================================================== */
.instruct__steps {
  padding-block: clamp(56px, 8vw, 104px);
}

.instruct__ladder {
  margin: clamp(34px, 5vw, 58px) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0;
}

.instruct__ladder>li {
  position: relative;
  display: grid;
  grid-template-columns: clamp(64px, 8vw, 104px) minmax(0, 1fr);
  gap: clamp(16px, 2.4vw, 34px);
  padding: clamp(26px, 3.4vw, 40px) 0;
  border-top: 1px solid var(--es-hairline);
}

.instruct__ladder>li:last-child {
  border-bottom: 1px solid var(--es-hairline);
}

/* the spine: a hairline through the numeral column, gold at the first step so
   the eye knows where the route starts */
.instruct__ladder>li::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: clamp(26px, 3.2vw, 42px);
  width: 1px;
  background: var(--es-hairline);
}

.instruct__ladder>li:first-child::before {
  top: 50%;
  background: var(--es-accent);
}

.instruct__ladder>li:last-child::before {
  bottom: 50%;
}

.instruct__num {
  position: relative;
  z-index: 1;
  align-self: start;
  justify-self: start;
  min-width: 34px;
  padding: 4px 0;
  color: var(--es-accent-deep);
  background: var(--es-paper);
  font: 500 clamp(15px, 1.5vw, 18px)/1 var(--es-serif);
  letter-spacing: .04em;
  text-align: center;
}

.instruct__ladder h3 {
  margin: 0 0 10px;
  color: var(--es-ink);
  font: 500 clamp(19px, 1.8vw, 24px)/1.24 var(--es-serif);
}

.instruct__ladder p {
  margin: 0 0 12px;
  max-width: 62ch;
  color: var(--es-ink-soft);
  font: 400 15.5px/1.66 var(--es-sans);
}

.instruct__ladder p:last-child {
  margin-bottom: 0;
}

.instruct__mid {
  margin-top: clamp(30px, 4vw, 46px);
}

/* the aside on the closing band is the detail templates' component, and it
   already carries its own treatment; only the split needs setting up */
.instruct__scope .es-detail__split {
  align-items: start;
}

@media (max-width: 760px) {
  .instruct__ladder>li {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  /* With one column the numeral no longer has a margin to sit in, so the
     spine has nothing to run through and is switched off. */
  .instruct__ladder>li::before {
    display: none;
  }

  .instruct__num {
    justify-self: start;
    min-width: 0;
    padding: 0;
    background: none;
  }
}

/* ============================================================
   32. FORMHOST — the two public Forminator forms (6 Aug)

   Hosts: .es-formhost wraps the enquiry form slot on /contact/
   (form 51) and the application form slot on /join-as-an-expert/
   (form 52). The field language is the house one the directory
   modal already speaks (section 24): hairline border that turns
   gold on focus, uppercase Archivo labels, arch-topped submit.
   What this section adds over section 24 is coverage the modal
   never needed — Select2, upload, datepicker, autofill, split
   columns — with the component patterns proven on the Paediatric
   Experts contact form, retold in this site's tokens.

   The Select2 dropdown and the jQuery-UI calendar render under
   <body>, OUTSIDE the host, so those two panels are scoped at
   root level by the per-form classes Forminator stamps on them
   (.forminator-custom-form-51 / -52).
   ============================================================ */

.es-formhost {
  --esf-h: 52px;
  --esf-radius: 10px;
  --esf-ring: 0 0 0 3px rgba(224, 165, 59, .18);
  --esf-error: #B3261E;
}

/* the contact slot's empty-state chrome (dashed panel, centred copy,
   304px min-height) has no business around a real form */
.es-enquire__form-slot--live {
  display: block;
  min-height: 0;
  padding: 0;
  text-align: left;
  background: none;
  border: 0;
}

.es-formhost .forminator-ui.forminator-custom-form {
  font-family: var(--es-sans) !important;
  color: var(--es-ink);
  max-width: 100%;
}

/* ---- rows and split columns ---- */
.es-formhost .forminator-ui .forminator-row {
  display: flex !important;
  flex-wrap: wrap;
  gap: 14px;
  margin: 0 0 16px !important;
}

.es-formhost .forminator-ui .forminator-row:last-child,
.es-formhost .forminator-ui .forminator-row-last {
  margin-bottom: 0 !important;
}

.es-formhost .forminator-ui .forminator-row:empty {
  display: none !important;
  margin: 0 !important;
}

.es-formhost .forminator-ui .forminator-col {
  flex: 1 1 0;
  min-width: 0;
  margin: 0 !important;
  padding: 0 !important;
}

.es-formhost .forminator-ui .forminator-col-12 {
  flex: 1 1 100%;
}

.es-formhost .forminator-ui .forminator-col-6 {
  flex: 1 1 calc(50% - 7px);
}

.es-formhost .forminator-ui .forminator-field {
  margin: 0 !important;
}

/* ---- labels ---- */
.es-formhost .forminator-ui .forminator-label {
  display: block !important;
  font: 600 11px/1.3 var(--es-sans) !important;
  letter-spacing: .09em !important;
  text-transform: uppercase !important;
  color: var(--es-ink-soft) !important;
  margin: 0 0 8px !important;
}

.es-formhost .forminator-ui .forminator-required {
  color: var(--es-accent-deep) !important;
  margin-left: 2px;
}

.es-formhost .forminator-ui .forminator-description {
  display: block !important;
  font: 400 12.5px/1.4 var(--es-sans) !important;
  color: var(--es-ink-soft) !important;
  margin: 6px 0 0 !important;
}

/* ---- text inputs, textarea, native select ---- */
.es-formhost .forminator-ui .forminator-input,
.es-formhost .forminator-ui .forminator-textarea,
.es-formhost .forminator-ui select.forminator-select {
  display: block;
  width: 100% !important;
  min-height: var(--esf-h);
  background: #fff !important;
  border: 1.5px solid var(--es-hairline) !important;
  border-radius: var(--esf-radius) !important;
  padding: 14px 16px !important;
  font: 400 15px/1.45 var(--es-sans) !important;
  color: var(--es-ink) !important;
  box-shadow: none !important;
  outline: none;
  transition: border-color .2s var(--es-ease), box-shadow .2s var(--es-ease);
  -webkit-appearance: none;
  appearance: none;
}

.es-formhost .forminator-ui .forminator-textarea {
  min-height: 140px;
  resize: vertical;
}

.es-formhost .forminator-ui .forminator-input::placeholder,
.es-formhost .forminator-ui .forminator-textarea::placeholder {
  color: var(--es-ink-soft) !important;
  opacity: .6 !important;
}

.es-formhost .forminator-ui .forminator-input:hover,
.es-formhost .forminator-ui .forminator-textarea:hover {
  border-color: rgba(198, 138, 36, .5) !important;
}

.es-formhost .forminator-ui .forminator-input:focus,
.es-formhost .forminator-ui .forminator-input:focus-visible,
.es-formhost .forminator-ui .forminator-textarea:focus,
.es-formhost .forminator-ui .forminator-textarea:focus-visible,
.es-formhost .forminator-ui select.forminator-select:focus {
  border-color: var(--es-accent) !important;
  box-shadow: var(--esf-ring) !important;
  outline: none !important;
}

/* autofill: keep the white field, keep the house ink */
.es-formhost .forminator-ui .forminator-input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px #fff inset !important;
  -webkit-text-fill-color: var(--es-ink) !important;
  transition: background-color 9999s ease-out;
}

/* ---- Select2: closed control (panel is styled at root, below) ---- */
.es-formhost .select2.select2-container {
  width: 100% !important;
  display: block;
}

.es-formhost .select2-container .select2-selection--single {
  display: flex !important;
  align-items: center;
  min-height: var(--esf-h) !important;
  height: auto !important;
  padding: 0 44px 0 16px !important;
  background: #fff !important;
  border: 1.5px solid var(--es-hairline) !important;
  border-radius: var(--esf-radius) !important;
  box-shadow: none !important;
  cursor: pointer;
  transition: border-color .2s var(--es-ease), box-shadow .2s var(--es-ease);
}

.es-formhost .select2-container .select2-selection--single:hover {
  border-color: rgba(198, 138, 36, .5) !important;
}

.es-formhost .select2-container--focus .select2-selection--single,
.es-formhost .select2-container--open .select2-selection--single,
.es-formhost .select2-container .select2-selection--single:focus,
.es-formhost .select2-container .select2-selection--single:focus-visible {
  border-color: var(--es-accent) !important;
  box-shadow: var(--esf-ring) !important;
  outline: none !important;
}

.es-formhost .select2-selection__rendered {
  font: 400 15px/1.45 var(--es-sans) !important;
  color: var(--es-ink) !important;
  padding: 0 !important;
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.es-formhost .select2-selection__arrow {
  position: absolute !important;
  right: 16px;
  top: 50% !important;
  width: auto !important;
  height: auto !important;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  color: var(--es-accent-deep);
  pointer-events: none;
  transition: transform .25s var(--es-ease);
}

.es-formhost .select2-container--open .select2-selection__arrow {
  transform: translateY(-50%) rotate(180deg);
}

.es-formhost .select2-selection__arrow b {
  display: none !important;
}

/* ---- consent / checkbox: the control that must not be missed ---- */
.es-formhost .forminator-field-consent .forminator-checkbox__wrapper {
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
  padding: 14px 16px !important;
  background: rgba(224, 165, 59, .06) !important;
  border: 1px solid var(--es-hairline) !important;
  border-left: 3px solid var(--es-accent) !important;
  border-radius: 4px 10px 10px 4px !important;
}

.es-formhost .forminator-checkbox-box {
  width: 20px !important;
  height: 20px !important;
  border: 1.5px solid var(--es-ink-soft) !important;
  border-radius: 4px !important;
  background: #fff !important;
  flex: none !important;
}

.es-formhost input[type="checkbox"]:checked+.forminator-checkbox-box {
  background: var(--es-accent) !important;
  border-color: var(--es-accent-deep) !important;
}

.es-formhost input[type="checkbox"]:focus-visible+.forminator-checkbox-box {
  outline: 2px solid var(--es-accent) !important;
  outline-offset: 2px !important;
}

.es-formhost .forminator-consent__label,
.es-formhost .forminator-consent__label p,
.es-formhost .forminator-checkbox__label,
.es-formhost .forminator-checkbox__label p {
  margin: 0 !important;
  font: 400 14px/1.5 var(--es-sans) !important;
  color: var(--es-ink) !important;
}

.es-formhost .forminator-consent__label a {
  color: var(--es-accent-deep) !important;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
}

/* ---- radios (instruction type on the application form) ---- */
.es-formhost .forminator-radio {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  cursor: pointer;
}

.es-formhost .forminator-radio-bullet {
  width: 20px !important;
  height: 20px !important;
  border: 1.5px solid var(--es-ink-soft) !important;
  border-radius: 50% !important;
  background: #fff !important;
  flex: none !important;
  position: relative;
}

.es-formhost .forminator-radio input:checked+.forminator-radio-bullet {
  border-color: var(--es-accent-deep) !important;
  background: radial-gradient(circle, var(--es-accent) 0 6px, #fff 7px) !important;
}

.es-formhost .forminator-radio input:focus-visible+.forminator-radio-bullet {
  outline: 2px solid var(--es-accent);
  outline-offset: 2px;
}

.es-formhost .forminator-radio__label {
  font: 400 14.5px/1.4 var(--es-sans) !important;
  color: var(--es-ink) !important;
}

/* ---- upload (CV / registration evidence) ---- */
.es-formhost .forminator-ui .forminator-file-upload {
  display: flex !important;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  min-height: var(--esf-h);
  padding: 6px 8px;
  background: #fff;
  border: 1.5px dashed var(--es-hairline);
  border-radius: var(--esf-radius);
  transition: border-color .2s var(--es-ease);
}

.es-formhost .forminator-ui .forminator-file-upload:hover {
  border-color: rgba(198, 138, 36, .5);
}

.es-formhost .forminator-ui .forminator-button-upload {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 0 18px !important;
  font: 600 13px/1 var(--es-sans) !important;
  color: var(--es-ink) !important;
  background: var(--es-paper-2) !important;
  border: 1px solid var(--es-hairline) !important;
  border-radius: 999px 999px 6px 6px !important;
  box-shadow: none !important;
  cursor: pointer;
  transition: border-color .2s var(--es-ease), transform .2s var(--es-ease);
}

.es-formhost .forminator-ui .forminator-button-upload:hover {
  border-color: var(--es-accent) !important;
  transform: translateY(-1px);
}

.es-formhost .forminator-ui .forminator-file-upload>span {
  flex: 1 1 auto;
  min-width: 0;
  font: 400 13px/1.4 var(--es-sans);
  color: var(--es-ink-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.es-formhost .forminator-ui .forminator-button-delete {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0 !important;
  border-radius: 50% !important;
  background: transparent !important;
  color: var(--es-ink-soft) !important;
  border: 1px solid var(--es-hairline) !important;
  cursor: pointer;
  transition: color .2s var(--es-ease), background .2s var(--es-ease);
}

.es-formhost .forminator-ui .forminator-button-delete:hover {
  color: #fff !important;
  background: var(--esf-error) !important;
  border-color: var(--esf-error) !important;
}

/* ---- datepicker input (calendar panel is styled at root, below) ---- */
.es-formhost .forminator-input-with-icon {
  position: relative;
  display: block;
}

.es-formhost .forminator-input-with-icon .forminator-icon-calendar {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  pointer-events: none;
  z-index: 1;
  background-color: var(--es-accent-deep);
  -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='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%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='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E") center/contain no-repeat;
}

.es-formhost .forminator-input-with-icon .forminator-icon-calendar::before {
  content: "" !important;
}

.es-formhost .forminator-input-with-icon .forminator-datepicker {
  padding-left: 46px !important;
  cursor: pointer;
}

/* ---- submit: the same doorway every primary action uses ---- */
.es-formhost .forminator-ui .forminator-button-submit {
  width: 100% !important;
  min-height: 54px;
  background: var(--es-accent) !important;
  color: var(--es-accent-ink) !important;
  border: 0 !important;
  border-radius: 26px 26px 9px 9px !important;
  font: 600 15px/1 var(--es-sans) !important;
  padding: 17px 24px !important;
  cursor: pointer !important;
  box-shadow: 0 4px 16px rgba(224, 165, 59, .22) !important;
  transition: background .2s var(--es-ease), transform .2s var(--es-ease) !important;
}

.es-formhost .forminator-ui .forminator-button-submit:hover,
.es-formhost .forminator-ui .forminator-button-submit:focus-visible {
  background: var(--es-accent-deep) !important;
  transform: translateY(-2px) !important;
}

.es-formhost .forminator-ui .forminator-button-submit:disabled {
  opacity: .55;
  cursor: not-allowed;
  transform: none !important;
}

/* ---- validation and response ---- */
.es-formhost .forminator-ui .forminator-response-message {
  border-radius: var(--esf-radius) !important;
  padding: 14px 16px !important;
  font: 400 14.5px/1.5 var(--es-sans) !important;
  margin: 0 0 16px !important;
}

.es-formhost .forminator-ui .forminator-response-message[aria-hidden="true"] {
  display: none !important;
}

.es-formhost .forminator-ui .forminator-response-message.forminator-error {
  background: rgba(179, 38, 30, .06);
  border: 1px solid rgba(179, 38, 30, .28);
  color: var(--esf-error);
}

.es-formhost .forminator-ui .forminator-response-message.forminator-success {
  background: rgba(31, 90, 49, .07);
  border: 1px solid rgba(31, 90, 49, .3);
  color: #1F5A31;
}

.es-formhost .forminator-ui .forminator-has_error .forminator-input,
.es-formhost .forminator-ui .forminator-has_error .forminator-textarea,
.es-formhost .forminator-ui .forminator-has_error .select2-selection--single,
.es-formhost .forminator-ui .forminator-has_error .forminator-file-upload {
  border-color: var(--esf-error) !important;
  box-shadow: 0 0 0 3px rgba(179, 38, 30, .1) !important;
}

.es-formhost .forminator-ui .forminator-error-message {
  display: block;
  font: 400 13px/1.4 var(--es-sans) !important;
  color: var(--esf-error) !important;
  margin: 7px 0 0 !important;
}

/* the plugin's admin affordance has no business on a public page */
.es-formhost .forminator-edit-module {
  display: none !important;
}

/* ---- responsive ---- */
@media (max-width: 640px) {
  .es-formhost .forminator-ui .forminator-row {
    flex-direction: column;
    gap: 14px;
  }

  .es-formhost .forminator-ui .forminator-col,
  .es-formhost .forminator-ui .forminator-col-6,
  .es-formhost .forminator-ui .forminator-col-12 {
    flex: 1 1 100%;
    width: 100%;
  }

  .es-formhost .forminator-ui .forminator-file-upload>span {
    white-space: normal;
  }
}

/* ============================================================
   32b. ROOT-SCOPED PANELS for forms 51 and 52 — Select2 dropdown
   and the jQuery-UI calendar render under <body>, outside any
   host, and carry the per-form class instead.
   ============================================================ */

.forminator-select-dropdown.forminator-custom-form-51,
.forminator-select-dropdown.forminator-custom-form-52 {
  font-family: var(--es-sans, "Archivo", "Segoe UI", system-ui, sans-serif) !important;
  background: #fff !important;
  border: 1px solid var(--es-hairline, rgba(20, 32, 50, .15)) !important;
  border-radius: 12px !important;
  box-shadow: 0 20px 44px -20px rgba(11, 30, 51, .45) !important;
  overflow: hidden;
  margin-top: 6px;
  z-index: 99999;
}

.forminator-select-dropdown.forminator-custom-form-51 .select2-search--dropdown,
.forminator-select-dropdown.forminator-custom-form-52 .select2-search--dropdown {
  display: block;
  padding: 10px 10px 6px;
}

.forminator-select-dropdown.forminator-custom-form-51 .select2-search__field,
.forminator-select-dropdown.forminator-custom-form-52 .select2-search__field {
  width: 100% !important;
  min-height: 40px;
  padding: 9px 12px !important;
  font: 400 14px/1.4 var(--es-sans, sans-serif) !important;
  color: var(--es-ink, #1F2933) !important;
  border: 1.5px solid var(--es-hairline, rgba(20, 32, 50, .15)) !important;
  border-radius: 8px !important;
  outline: none !important;
  box-shadow: none !important;
}

.forminator-select-dropdown.forminator-custom-form-51 .select2-search__field:focus,
.forminator-select-dropdown.forminator-custom-form-52 .select2-search__field:focus {
  border-color: var(--es-accent, #E0A53B) !important;
  box-shadow: 0 0 0 3px rgba(224, 165, 59, .18) !important;
}

.forminator-select-dropdown.forminator-custom-form-51 .select2-results__options,
.forminator-select-dropdown.forminator-custom-form-52 .select2-results__options {
  max-height: 264px;
  overflow-y: auto;
  padding: 6px !important;
  margin: 0 !important;
  list-style: none;
  scrollbar-width: thin;
}

.forminator-select-dropdown.forminator-custom-form-51 .select2-results__option,
.forminator-select-dropdown.forminator-custom-form-52 .select2-results__option {
  font: 500 14px/1.35 var(--es-sans, sans-serif) !important;
  color: var(--es-ink, #1F2933) !important;
  background: transparent !important;
  padding: 11px 13px !important;
  margin: 2px 0;
  border-radius: 8px !important;
  cursor: pointer;
  transition: background-color .15s ease, padding-left .15s ease;
}

.forminator-select-dropdown.forminator-custom-form-51 .select2-results__option--highlighted,
.forminator-select-dropdown.forminator-custom-form-52 .select2-results__option--highlighted {
  background: rgba(224, 165, 59, .12) !important;
  padding-left: 17px !important;
}

.forminator-select-dropdown.forminator-custom-form-51 .select2-results__option--selected,
.forminator-select-dropdown.forminator-custom-form-52 .select2-results__option--selected {
  background: rgba(224, 165, 59, .12) !important;
  color: var(--es-accent-deep, #C68A24) !important;
  box-shadow: inset 3px 0 0 var(--es-accent, #E0A53B);
}

.forminator-select-dropdown.forminator-custom-form-51 .select2-results__message,
.forminator-select-dropdown.forminator-custom-form-52 .select2-results__message {
  font: 400 13.5px/1.4 var(--es-sans, sans-serif);
  color: var(--es-ink-soft, #4A5568);
  padding: 11px 13px;
}

/* ------------------------------------------------------------------
   FORMINATOR DATEPICKER, house edition
   navy cap, gold frieze diamond, serif month, circular days.
   The doubled #ui-datepicker-div is deliberate: Forminator's own
   calendar theme (.forminator-calendar--default) styles the same
   nodes with !important, and only a higher-specificity selector
   outranks it. Scoped to forms 51/52 like the rest of §32.
   ------------------------------------------------------------------ */

#ui-datepicker-div#ui-datepicker-div.forminator-custom-form-51,
#ui-datepicker-div#ui-datepicker-div.forminator-custom-form-52 {
  z-index: 100000 !important;
  width: min(336px, calc(100vw - 32px)) !important;
  padding: 0 0 12px !important;
  margin-top: 8px !important;
  background: #fff !important;
  border: 1px solid var(--es-hairline, rgba(20, 32, 50, .15)) !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  box-shadow: 0 24px 60px -24px rgba(11, 30, 51, .5),
    0 4px 14px -8px rgba(11, 30, 51, .25) !important;
  font-family: var(--es-sans, sans-serif) !important;
  animation: esDpIn .18s ease-out;
}

@keyframes esDpIn {
  from {
    opacity: 0;
    transform: translateY(-5px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

#ui-datepicker-div#ui-datepicker-div.forminator-custom-form-51::before,
#ui-datepicker-div#ui-datepicker-div.forminator-custom-form-52::before,
#ui-datepicker-div#ui-datepicker-div.forminator-custom-form-51::after,
#ui-datepicker-div#ui-datepicker-div.forminator-custom-form-52::after {
  display: none !important;
  content: none !important;
}

/* ---- header: navy cap with the frieze diamond ---- */

#ui-datepicker-div#ui-datepicker-div.forminator-custom-form-51 .ui-datepicker-header,
#ui-datepicker-div#ui-datepicker-div.forminator-custom-form-52 .ui-datepicker-header {
  background: var(--es-canvas, #0B1E33) !important;
  color: var(--es-text-on-dark, #F2EFE9) !important;
  border: 0 !important;
  border-top: 3px solid var(--es-accent, #E0A53B) !important;
  border-radius: 0 !important;
  padding: 13px 46px 15px !important;
  position: relative !important;
}

#ui-datepicker-div#ui-datepicker-div.forminator-custom-form-51 .ui-datepicker-header::after,
#ui-datepicker-div#ui-datepicker-div.forminator-custom-form-52 .ui-datepicker-header::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  left: 50%;
  bottom: -4.5px;
  width: 9px;
  height: 9px;
  background: var(--es-accent, #E0A53B) !important;
  border-radius: 1.5px;
  transform: translateX(-50%) rotate(45deg);
}

#ui-datepicker-div#ui-datepicker-div.forminator-custom-form-51 .ui-datepicker-title,
#ui-datepicker-div#ui-datepicker-div.forminator-custom-form-52 .ui-datepicker-title {
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
}

/* month + year selects: chrome stripped, quiet gold caret */

#ui-datepicker-div#ui-datepicker-div.forminator-custom-form-51 .ui-datepicker-title select,
#ui-datepicker-div#ui-datepicker-div.forminator-custom-form-52 .ui-datepicker-title select {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: auto !important;
  height: auto !important;
  background: transparent url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' fill='none' stroke='%23E0A53B' stroke-width='1.8' stroke-linecap='round'/></svg>") no-repeat right 7px center !important;
  background-size: 9px 6px !important;
  border: 0 !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  margin: 0 !important;
  padding: 5px 22px 5px 9px !important;
  cursor: pointer !important;
  transition: background-color .15s ease;
}

#ui-datepicker-div#ui-datepicker-div.forminator-custom-form-51 .ui-datepicker-title select:hover,
#ui-datepicker-div#ui-datepicker-div.forminator-custom-form-52 .ui-datepicker-title select:hover {
  background-color: rgba(255, 255, 255, .08) !important;
}

#ui-datepicker-div#ui-datepicker-div.forminator-custom-form-51 .ui-datepicker-title select:focus,
#ui-datepicker-div#ui-datepicker-div.forminator-custom-form-52 .ui-datepicker-title select:focus {
  outline: 0 !important;
  box-shadow: inset 0 0 0 1.5px rgba(224, 165, 59, .55) !important;
}

#ui-datepicker-div#ui-datepicker-div.forminator-custom-form-51 select.ui-datepicker-month,
#ui-datepicker-div#ui-datepicker-div.forminator-custom-form-52 select.ui-datepicker-month {
  font: 500 16px/1.3 var(--es-serif, Georgia, serif) !important;
  color: var(--es-text-on-dark, #F2EFE9) !important;
}

#ui-datepicker-div#ui-datepicker-div.forminator-custom-form-51 select.ui-datepicker-year,
#ui-datepicker-div#ui-datepicker-div.forminator-custom-form-52 select.ui-datepicker-year {
  font: 600 12px/1.3 var(--es-sans, sans-serif) !important;
  letter-spacing: .14em !important;
  color: var(--es-accent, #E0A53B) !important;
}

#ui-datepicker-div#ui-datepicker-div.forminator-custom-form-51 .ui-datepicker-title select option,
#ui-datepicker-div#ui-datepicker-div.forminator-custom-form-52 .ui-datepicker-title select option {
  color: var(--es-ink, #1F2933);
  background: #fff;
}

/* plain-span title fallback if the dropdowns are ever turned off */

#ui-datepicker-div#ui-datepicker-div.forminator-custom-form-51 .ui-datepicker-title>span.ui-datepicker-month,
#ui-datepicker-div#ui-datepicker-div.forminator-custom-form-52 .ui-datepicker-title>span.ui-datepicker-month {
  font: 500 17px/1.45 var(--es-serif, Georgia, serif) !important;
  color: var(--es-text-on-dark, #F2EFE9) !important;
}

#ui-datepicker-div#ui-datepicker-div.forminator-custom-form-51 .ui-datepicker-title>span.ui-datepicker-year,
#ui-datepicker-div#ui-datepicker-div.forminator-custom-form-52 .ui-datepicker-title>span.ui-datepicker-year {
  font: 600 11.5px/1 var(--es-sans, sans-serif) !important;
  letter-spacing: .16em !important;
  color: var(--es-accent, #E0A53B) !important;
}

/* ---- prev / next: the icon span is a 1px screen-reader stub, so the
        chevron is drawn on the button itself ---- */

#ui-datepicker-div#ui-datepicker-div.forminator-custom-form-51 .ui-datepicker-prev,
#ui-datepicker-div#ui-datepicker-div.forminator-custom-form-52 .ui-datepicker-prev,
#ui-datepicker-div#ui-datepicker-div.forminator-custom-form-51 .ui-datepicker-next,
#ui-datepicker-div#ui-datepicker-div.forminator-custom-form-52 .ui-datepicker-next {
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 30px !important;
  height: 30px !important;
  background: none !important;
  border: 0 !important;
  border-radius: 999px !important;
  cursor: pointer !important;
  position: absolute !important;
  transition: background-color .15s ease;
}

#ui-datepicker-div#ui-datepicker-div.forminator-custom-form-51 .ui-datepicker-prev:hover,
#ui-datepicker-div#ui-datepicker-div.forminator-custom-form-52 .ui-datepicker-prev:hover,
#ui-datepicker-div#ui-datepicker-div.forminator-custom-form-51 .ui-datepicker-next:hover,
#ui-datepicker-div#ui-datepicker-div.forminator-custom-form-52 .ui-datepicker-next:hover {
  background-color: rgba(224, 165, 59, .18) !important;
}

#ui-datepicker-div#ui-datepicker-div.forminator-custom-form-51 .ui-datepicker-prev {
  left: 9px !important;
  right: auto !important;
}

#ui-datepicker-div#ui-datepicker-div.forminator-custom-form-52 .ui-datepicker-prev {
  left: 9px !important;
  right: auto !important;
}

#ui-datepicker-div#ui-datepicker-div.forminator-custom-form-51 .ui-datepicker-next {
  right: 9px !important;
  left: auto !important;
}

#ui-datepicker-div#ui-datepicker-div.forminator-custom-form-52 .ui-datepicker-next {
  right: 9px !important;
  left: auto !important;
}

#ui-datepicker-div#ui-datepicker-div.forminator-custom-form-51 .ui-datepicker-prev span,
#ui-datepicker-div#ui-datepicker-div.forminator-custom-form-52 .ui-datepicker-prev span,
#ui-datepicker-div#ui-datepicker-div.forminator-custom-form-51 .ui-datepicker-next span,
#ui-datepicker-div#ui-datepicker-div.forminator-custom-form-52 .ui-datepicker-next span {
  background: none !important;
  background-image: none !important;
}

#ui-datepicker-div#ui-datepicker-div.forminator-custom-form-51 .ui-datepicker-prev span::before,
#ui-datepicker-div#ui-datepicker-div.forminator-custom-form-52 .ui-datepicker-prev span::before,
#ui-datepicker-div#ui-datepicker-div.forminator-custom-form-51 .ui-datepicker-next span::before,
#ui-datepicker-div#ui-datepicker-div.forminator-custom-form-52 .ui-datepicker-next span::before,
#ui-datepicker-div#ui-datepicker-div.forminator-custom-form-51 .ui-datepicker-prev span::after,
#ui-datepicker-div#ui-datepicker-div.forminator-custom-form-52 .ui-datepicker-prev span::after,
#ui-datepicker-div#ui-datepicker-div.forminator-custom-form-51 .ui-datepicker-next span::after,
#ui-datepicker-div#ui-datepicker-div.forminator-custom-form-52 .ui-datepicker-next span::after,
#ui-datepicker-div#ui-datepicker-div.forminator-custom-form-51 .ui-datepicker-prev::before,
#ui-datepicker-div#ui-datepicker-div.forminator-custom-form-52 .ui-datepicker-prev::before,
#ui-datepicker-div#ui-datepicker-div.forminator-custom-form-51 .ui-datepicker-next::before,
#ui-datepicker-div#ui-datepicker-div.forminator-custom-form-52 .ui-datepicker-next::before {
  display: none !important;
  content: none !important;
}

#ui-datepicker-div#ui-datepicker-div.forminator-custom-form-51 .ui-datepicker-prev::after,
#ui-datepicker-div#ui-datepicker-div.forminator-custom-form-52 .ui-datepicker-prev::after,
#ui-datepicker-div#ui-datepicker-div.forminator-custom-form-51 .ui-datepicker-next::after,
#ui-datepicker-div#ui-datepicker-div.forminator-custom-form-52 .ui-datepicker-next::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  left: 50%;
  top: 50%;
  width: 8px;
  height: 8px;
  border: solid var(--es-accent, #E0A53B) !important;
  border-width: 2px 2px 0 0 !important;
  border-radius: .5px;
}

#ui-datepicker-div#ui-datepicker-div.forminator-custom-form-51 .ui-datepicker-prev::after,
#ui-datepicker-div#ui-datepicker-div.forminator-custom-form-52 .ui-datepicker-prev::after {
  transform: translate(-30%, -50%) rotate(-135deg) !important;
}

#ui-datepicker-div#ui-datepicker-div.forminator-custom-form-51 .ui-datepicker-next::after,
#ui-datepicker-div#ui-datepicker-div.forminator-custom-form-52 .ui-datepicker-next::after {
  transform: translate(-70%, -50%) rotate(45deg) !important;
}

#ui-datepicker-div#ui-datepicker-div.forminator-custom-form-51 .ui-datepicker-prev.ui-state-disabled,
#ui-datepicker-div#ui-datepicker-div.forminator-custom-form-52 .ui-datepicker-prev.ui-state-disabled,
#ui-datepicker-div#ui-datepicker-div.forminator-custom-form-51 .ui-datepicker-next.ui-state-disabled,
#ui-datepicker-div#ui-datepicker-div.forminator-custom-form-52 .ui-datepicker-next.ui-state-disabled {
  opacity: .3 !important;
  cursor: default !important;
}

/* ---- calendar grid ---- */

#ui-datepicker-div#ui-datepicker-div.forminator-custom-form-51 table.ui-datepicker-calendar,
#ui-datepicker-div#ui-datepicker-div.forminator-custom-form-52 table.ui-datepicker-calendar {
  margin: 10px auto 0 !important;
  border-collapse: collapse !important;
  width: calc(100% - 24px) !important;
  background: transparent !important;
}

#ui-datepicker-div#ui-datepicker-div.forminator-custom-form-51 .ui-datepicker-calendar th,
#ui-datepicker-div#ui-datepicker-div.forminator-custom-form-52 .ui-datepicker-calendar th {
  font: 600 10px/1 var(--es-sans, sans-serif) !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  color: var(--es-accent-deep, #C68A24) !important;
  padding: 8px 0 9px !important;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--es-hairline, rgba(20, 32, 50, .12)) !important;
}

#ui-datepicker-div#ui-datepicker-div.forminator-custom-form-51 .ui-datepicker-calendar tbody tr:first-child td,
#ui-datepicker-div#ui-datepicker-div.forminator-custom-form-52 .ui-datepicker-calendar tbody tr:first-child td {
  padding-top: 7px !important;
}

/* Forminator decorates the td itself (hover plate, today border, soft
   shadow); flatten the cell so only the circle on the <a> shows */
#ui-datepicker-div#ui-datepicker-div.forminator-custom-form-51 .ui-datepicker-calendar td,
#ui-datepicker-div#ui-datepicker-div.forminator-custom-form-52 .ui-datepicker-calendar td,
#ui-datepicker-div#ui-datepicker-div.forminator-custom-form-51 .ui-datepicker-calendar td.ui-datepicker-days-cell-over,
#ui-datepicker-div#ui-datepicker-div.forminator-custom-form-52 .ui-datepicker-calendar td.ui-datepicker-days-cell-over,
#ui-datepicker-div#ui-datepicker-div.forminator-custom-form-51 .ui-datepicker-calendar td.ui-datepicker-today,
#ui-datepicker-div#ui-datepicker-div.forminator-custom-form-52 .ui-datepicker-calendar td.ui-datepicker-today,
#ui-datepicker-div#ui-datepicker-div.forminator-custom-form-51 .ui-datepicker-calendar td.ui-datepicker-current-day,
#ui-datepicker-div#ui-datepicker-div.forminator-custom-form-52 .ui-datepicker-calendar td.ui-datepicker-current-day,
#ui-datepicker-div#ui-datepicker-div.forminator-custom-form-51 .ui-datepicker-calendar td:hover,
#ui-datepicker-div#ui-datepicker-div.forminator-custom-form-52 .ui-datepicker-calendar td:hover {
  padding: 2px !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

#ui-datepicker-div#ui-datepicker-div.forminator-custom-form-51 .ui-datepicker-calendar td a,
#ui-datepicker-div#ui-datepicker-div.forminator-custom-form-52 .ui-datepicker-calendar td a,
#ui-datepicker-div#ui-datepicker-div.forminator-custom-form-51 .ui-datepicker-calendar td span,
#ui-datepicker-div#ui-datepicker-div.forminator-custom-form-52 .ui-datepicker-calendar td span {
  display: grid !important;
  place-items: center !important;
  width: 36px !important;
  height: 36px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  position: relative !important;
  font: 500 13.5px/1 var(--es-sans, sans-serif) !important;
  color: var(--es-ink, #1F2933) !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 999px !important;
  box-shadow: none !important;
  text-align: center !important;
  outline: 0 !important;
  transition: background-color .12s ease, box-shadow .12s ease;
}

#ui-datepicker-div#ui-datepicker-div.forminator-custom-form-51 .ui-datepicker-calendar td a:hover,
#ui-datepicker-div#ui-datepicker-div.forminator-custom-form-52 .ui-datepicker-calendar td a:hover {
  background: rgba(224, 165, 59, .15) !important;
  box-shadow: inset 0 0 0 1px rgba(224, 165, 59, .55) !important;
}

#ui-datepicker-div#ui-datepicker-div.forminator-custom-form-51 .ui-datepicker-calendar td a:focus-visible,
#ui-datepicker-div#ui-datepicker-div.forminator-custom-form-52 .ui-datepicker-calendar td a:focus-visible {
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--es-accent, #E0A53B) !important;
}

#ui-datepicker-div#ui-datepicker-div.forminator-custom-form-51 .ui-datepicker-calendar td.ui-datepicker-today a,
#ui-datepicker-div#ui-datepicker-div.forminator-custom-form-52 .ui-datepicker-calendar td.ui-datepicker-today a {
  box-shadow: inset 0 0 0 1.5px var(--es-accent, #E0A53B) !important;
  font-weight: 600 !important;
}

#ui-datepicker-div#ui-datepicker-div.forminator-custom-form-51 .ui-datepicker-current-day a,
#ui-datepicker-div#ui-datepicker-div.forminator-custom-form-52 .ui-datepicker-current-day a,
#ui-datepicker-div#ui-datepicker-div.forminator-custom-form-51 .ui-datepicker-calendar td a.ui-state-active,
#ui-datepicker-div#ui-datepicker-div.forminator-custom-form-52 .ui-datepicker-calendar td a.ui-state-active {
  background: var(--es-accent, #E0A53B) !important;
  color: var(--es-accent-ink, #3D2A06) !important;
  font-weight: 600 !important;
  box-shadow: 0 8px 18px -8px rgba(198, 138, 36, .9) !important;
}

#ui-datepicker-div#ui-datepicker-div.forminator-custom-form-51 .ui-datepicker-calendar td.ui-datepicker-other-month a,
#ui-datepicker-div#ui-datepicker-div.forminator-custom-form-52 .ui-datepicker-calendar td.ui-datepicker-other-month a,
#ui-datepicker-div#ui-datepicker-div.forminator-custom-form-51 .ui-datepicker-calendar td.ui-datepicker-other-month span,
#ui-datepicker-div#ui-datepicker-div.forminator-custom-form-52 .ui-datepicker-calendar td.ui-datepicker-other-month span,
#ui-datepicker-div#ui-datepicker-div.forminator-custom-form-51 .ui-datepicker-calendar td.ui-state-disabled span,
#ui-datepicker-div#ui-datepicker-div.forminator-custom-form-52 .ui-datepicker-calendar td.ui-state-disabled span {
  color: var(--es-ink-soft, #4A5568) !important;
  opacity: .38 !important;
}

/* ---- Today / Done pane, when the form config shows it ---- */

#ui-datepicker-div#ui-datepicker-div.forminator-custom-form-51 .ui-datepicker-buttonpane,
#ui-datepicker-div#ui-datepicker-div.forminator-custom-form-52 .ui-datepicker-buttonpane {
  margin: 10px 12px 0 !important;
  padding: 10px 0 0 !important;
  border: 0 !important;
  border-top: 1px solid var(--es-hairline, rgba(20, 32, 50, .12)) !important;
  background: transparent !important;
}

#ui-datepicker-div#ui-datepicker-div.forminator-custom-form-51 .ui-datepicker-buttonpane button,
#ui-datepicker-div#ui-datepicker-div.forminator-custom-form-52 .ui-datepicker-buttonpane button {
  background: none !important;
  border: 0 !important;
  font: 600 12.5px/1 var(--es-sans, sans-serif) !important;
  color: var(--es-accent-deep, #C68A24) !important;
  cursor: pointer !important;
  padding: 6px 10px !important;
  border-radius: 7px !important;
}

@media (prefers-reduced-motion: reduce) {

  #ui-datepicker-div#ui-datepicker-div.forminator-custom-form-51,
  #ui-datepicker-div#ui-datepicker-div.forminator-custom-form-52 {
    animation: none;
  }

  #ui-datepicker-div#ui-datepicker-div.forminator-custom-form-51 *,
  #ui-datepicker-div#ui-datepicker-div.forminator-custom-form-52 * {
    transition: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {

  .es-formhost *,
  .forminator-select-dropdown.forminator-custom-form-51 *,
  .forminator-select-dropdown.forminator-custom-form-52 * {
    transition: none !important;
    animation: none !important;
  }
}

/* ============================================================
   33. THANK YOU — /thank-you/ (6 Aug)

   The post-submission page. Structure borrowed from the Dental
   Expert thank-you (hero + proof rail, three steps, reading
   links), retold in this site's language: the crown and arcade
   frieze, gold Fraunces numerals for the steps, arch-topped link
   cards, and the sitewide closing band in place of a phone strip.
   ============================================================ */

/* The detail templates make .es-detail__section-heading sticky (top: 94px)
   because there it lives in its own grid column beside the content. On this
   page heading and content share one column, so a sticky heading rides down
   over the steps as the page scrolls. Static here, with the gap the sticky
   layout used to provide. */
.es-thanks .es-detail__section-heading {
  position: static;
  margin-bottom: clamp(18px, 3vw, 30px);
}

.es-thanks .es-detail__section-heading .es-h2 {
  max-width: 24ch;
}

.es-thanks__crown-inner {
  max-width: 720px;
  padding: 10px 0 clamp(40px, 6vw, 72px);
}

.es-thanks__crown-inner .es-h1 {
  max-width: 18ch;
  margin: 0 0 18px;
}

/* proof rail: the crown's own facts, pinned to its lower edge */
.es-thanks__rail {
  border-top: 1px solid var(--es-hairline-dark);
  background: rgba(11, 30, 51, .55);
}

.es-thanks__rail .es-shell {
  display: flex;
  flex-wrap: wrap;
  gap: 10px clamp(26px, 4vw, 54px);
  padding-top: 15px;
  padding-bottom: 15px;
}

.es-thanks__rail span {
  position: relative;
  color: var(--es-muted-on-dark);
  font: 500 11.5px/1.4 var(--es-sans);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.es-thanks__rail span+span::before {
  content: "";
  position: absolute;
  top: 50%;
  left: calc(-1 * clamp(13px, 2vw, 27px));
  width: 7px;
  height: 7px;
  background: var(--es-accent);
  transform: translateY(-50%) rotate(45deg);
  opacity: .75;
}

/* ---- the three steps: a ladder with gold numerals ---- */
.es-thanks__steps {
  display: grid;
  gap: 0;
  max-width: 760px;
  margin: 34px 0 0;
  padding: 0;
  list-style: none;
}

.es-thanks__steps li {
  display: flex;
  gap: clamp(18px, 3vw, 34px);
  padding: 26px 0;
  border-top: 1px solid var(--es-hairline);
}

.es-thanks__steps li:last-child {
  border-bottom: 1px solid var(--es-hairline);
}

.es-thanks__num {
  flex: 0 0 auto;
  color: var(--es-accent-deep);
  font: 500 clamp(26px, 3vw, 34px)/1 var(--es-serif);
}

.es-thanks__steps h3 {
  margin: 2px 0 8px;
  color: var(--es-ink);
  font: 500 clamp(18px, 1.7vw, 21px)/1.25 var(--es-serif);
}

.es-thanks__steps p {
  margin: 0;
  max-width: 58ch;
  color: var(--es-ink-soft);
  font: 400 15px/1.62 var(--es-sans);
}

/* ---- reading links: arch-topped cards ---- */
.es-thanks__links {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 32px;
}

.es-thanks__links a {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 22px 20px 20px;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--es-hairline);
  border-radius: 26px 26px 8px 8px;
  text-decoration: none;
  transition: transform .22s var(--es-ease), border-color .22s var(--es-ease),
    box-shadow .22s var(--es-ease);
}

.es-thanks__links a::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: var(--es-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s var(--es-ease);
}

.es-thanks__links a:hover,
.es-thanks__links a:focus-visible {
  transform: translateY(-3px);
  border-color: rgba(224, 165, 59, .6);
  box-shadow: 0 14px 30px rgba(11, 30, 51, .1);
}

.es-thanks__links a:hover::before,
.es-thanks__links a:focus-visible::before {
  transform: scaleX(1);
}

/* flex: none, or the card squeezes the numeral until "01" breaks into two
   lines - exactly what happened on the first render */
.es-thanks__link-num {
  flex: 0 0 auto;
  color: var(--es-accent-deep);
  font: 500 15px/1 var(--es-serif);
  padding-top: 3px;
  white-space: nowrap;
}

.es-thanks__link-copy {
  display: block;
  min-width: 0;
}

.es-thanks__link-copy strong {
  display: block;
  margin: 0 0 6px;
  color: var(--es-ink);
  font: 500 16.5px/1.3 var(--es-serif);
}

.es-thanks__link-copy small {
  display: block;
  color: var(--es-ink-soft);
  font: 400 13px/1.55 var(--es-sans);
}

.es-thanks__link-arrow {
  margin-left: auto;
  color: var(--es-accent-deep);
  font-size: 16px;
  transition: transform .2s var(--es-ease);
}

.es-thanks__links a:hover .es-thanks__link-arrow {
  transform: translateX(4px);
}

@media (max-width: 860px) {
  .es-thanks__links {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 620px) {
  .es-thanks__steps li {
    flex-direction: column;
    gap: 8px;
    padding: 22px 0;
  }

  .es-thanks__rail .es-shell {
    gap: 8px 20px;
  }

  .es-thanks__rail span+span::before {
    display: none;
  }
}

/* ============================================================
   34. EXPERT HANDOFF BANNER — /contact/ (6 Aug)

   Injected by the expert-handoff module in test.js when the
   visitor arrives from a directory card. Same accent treatment
   as the consent box: a gold rail on a warm tint, so the two
   read as one family inside the white form panel.
   ============================================================ */

.es-enquire__expert {
  margin: 0 0 26px;
  padding: 16px 18px 15px;
  background: rgba(224, 165, 59, .06);
  border: 1px solid var(--es-hairline);
  border-left: 3px solid var(--es-accent);
  border-radius: 4px 10px 10px 4px;
}

.es-enquire__expert-label {
  margin: 0 0 8px;
  color: var(--es-accent-deep);
  font: 600 10.5px/1 var(--es-sans);
  letter-spacing: .1em;
  text-transform: uppercase;
}

.es-enquire__expert-name {
  margin: 0;
  color: var(--es-ink);
  font: 500 19px/1.25 var(--es-serif);
}

.es-enquire__expert-meta {
  margin: 5px 0 0;
  color: var(--es-ink-soft);
  font: 400 13.5px/1.5 var(--es-sans);
}

.es-enquire__expert-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 11px 0 0;
  padding: 0;
  list-style: none;
}

.es-enquire__expert-tags li {
  padding: 5px 11px;
  color: var(--es-ink);
  font: 500 11.5px/1 var(--es-sans);
  background: #fff;
  border: 1px solid var(--es-hairline);
  border-radius: 999px 999px 5px 5px;
}

/* ==========================================================================
   34. ENQUIRY CARRIER FIELD
   The "Requested expert" text field on form 51 exists only to carry the
   selected practitioner's details into the submission - a hidden field
   cannot, because Forminator recomputes hidden values server-side. The
   stylesheet removes it from view deterministically: with JavaScript off
   the field is still invisible and simply submits empty.
   :has() covers every modern browser; the attribute selectors below it are
   the fallback that still hides the input and its label elsewhere.
   ========================================================================== */
/* SCOPED to the /contact/ slot (10 Aug): Forminator numbers its slugs
   PER FORM, so every form has a text-1. Unscoped, these rules were one
   form-id change away from blanking the application form's own text
   fields sitewide — the footer modal (form 52) renders on every page.
   The class-addressed es-carrier rules in section 40 stay unscoped
   because their class names exist nowhere but the enquiry carriers. */
.es-formhost .forminator-ui .forminator-row:has(input[name="text-1"]),
.es-formhost .forminator-ui .forminator-row:has(input[name="text-2"]),
.es-formhost .forminator-ui .forminator-row:has(input[name="text-3"]),
.es-formhost .forminator-ui .forminator-row:has(input[name="text-4"]),
.es-formhost .forminator-ui .forminator-row:has(input[name="text-5"]),
.es-formhost .forminator-ui .forminator-row:has(input[name="text-6"]) {
  display: none !important;
}

.es-formhost .forminator-ui input[name="text-1"],
.es-formhost .forminator-ui label[for*="text-1"],
.es-formhost .forminator-ui input[name="text-2"],
.es-formhost .forminator-ui label[for*="text-2"],
.es-formhost .forminator-ui input[name="text-3"],
.es-formhost .forminator-ui label[for*="text-3"],
.es-formhost .forminator-ui input[name="text-4"],
.es-formhost .forminator-ui label[for*="text-4"],
.es-formhost .forminator-ui input[name="text-5"],
.es-formhost .forminator-ui label[for*="text-5"],
.es-formhost .forminator-ui input[name="text-6"],
.es-formhost .forminator-ui label[for*="text-6"] {
  display: none !important;
}

/* ============================================================
   35. BLOG — archive and single post (6 Aug, v2)

   The hero above the archive is printed by es-blog-hero.php and
   carries its own styles; a synchronised mirror sits in section
   36 below. This section dresses everything Kadence renders:
   the post loop and the single post, in the house language —
   arch-topped cards, the gold rule that sweeps in on hover,
   keystone diamonds, ghost numerals, Fraunces display.
   ============================================================ */

/* ---------- archive: the ground ----------
   The hero is printed inside #main, so #main must not add padding above
   it or a strip of page background shows between header and hero. */
.blog #main.site-main,
.archive.category #main.site-main,
.archive.tag #main.site-main {
  padding-top: 0;
  background:
    linear-gradient(180deg, rgba(224, 165, 59, .05), transparent 340px),
    var(--es-paper);
}

.blog #es-blog-hero,
.archive #es-blog-hero {
  margin-top: 0;
}

/* Kadence lays the loop out as a grid of <li>. Give the grid room to
   breathe between the hero and the footer, and space the columns. */
.blog #archive-container.post-archive,
.archive #archive-container.post-archive {
  width: min(100% - clamp(32px, 5vw, 72px), 1240px);
  margin-inline: auto;
  padding-top: clamp(52px, 7vw, 88px);
  padding-bottom: clamp(56px, 8vw, 100px);
  gap: clamp(24px, 2.6vw, 34px);
  counter-reset: es-post;
}

/* ---------- archive: the card ---------- */
.blog .entry-list-item,
.archive .entry-list-item {
  display: flex;
}

.blog article.entry.loop-entry,
.archive article.entry.loop-entry {
  position: relative;
  display: flex;
  width: 100%;
  flex-direction: column;
  overflow: hidden;
  margin: 0;
  background: #fff;
  border: 1px solid var(--es-hairline);
  border-radius: 24px 24px 8px 8px;
  box-shadow: 0 1px 2px rgba(11, 30, 51, .04);
  counter-increment: es-post;
  transition: transform .22s var(--es-ease), border-color .22s var(--es-ease),
    box-shadow .22s var(--es-ease);
}

.blog article.entry.loop-entry::before,
.archive article.entry.loop-entry::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: 100%;
  height: 3px;
  background: var(--es-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s var(--es-ease);
}

.blog article.entry.loop-entry:hover,
.archive article.entry.loop-entry:hover {
  transform: translateY(-4px);
  border-color: rgba(224, 165, 59, .6);
  box-shadow: 0 18px 40px rgba(11, 30, 51, .12);
}

.blog article.entry.loop-entry:hover::before,
.archive article.entry.loop-entry:hover::before {
  transform: scaleX(1);
}

/* ---------- archive: featured image (item-image-style-above) ---------- */
.blog .loop-entry .post-thumbnail,
.archive .loop-entry .post-thumbnail {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-bottom: 1px solid var(--es-hairline);
}

.blog .loop-entry .post-thumbnail-inner,
.archive .loop-entry .post-thumbnail-inner {
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  background: var(--es-paper-2);
}

.blog .loop-entry .post-thumbnail img,
.archive .loop-entry .post-thumbnail img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.8) contrast(1.02);
  transition: transform .5s var(--es-ease), filter .35s var(--es-ease);
}

.blog article.entry.loop-entry:hover .post-thumbnail img,
.archive article.entry.loop-entry:hover .post-thumbnail img {
  transform: scale(1.035);
  filter: saturate(1) contrast(1.02);
}

/* the keystone, sitting on the image's lower edge */
.blog .loop-entry .post-thumbnail::after,
.archive .loop-entry .post-thumbnail::after {
  content: "";
  position: absolute;
  right: 14px;
  bottom: 12px;
  z-index: 1;
  width: 9px;
  height: 9px;
  background: var(--es-accent);
  border-radius: 1px;
  transform: rotate(45deg);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .85);
}

/* ---------- archive: card body ---------- */
.blog .loop-entry .entry-content-wrap,
.archive .loop-entry .entry-content-wrap {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  /* Kadence's own default is 2rem; anything less reads as cramped, so this
     goes past it rather than under it. */
  padding: clamp(26px, 2.4vw, 38px) clamp(24px, 2.2vw, 34px) clamp(24px, 2.2vw, 32px);
}

/* A card with no featured image would otherwise be a block of text beside
   cards that have one. Kadence only prints .post-thumbnail when an image
   exists and adds .has-post-thumbnail to the article, so the slot is drawn
   here for the ones without: the same arcade band the site opens with,
   holding the space until an image is set. */
/* The card is a flex column, so this band is given order:-1 and takes its
   place as the first item. Positioning it absolutely instead would lay it
   over the text. */
.blog article.entry.loop-entry:not(.has-post-thumbnail)::after,
.archive article.entry.loop-entry:not(.has-post-thumbnail)::after {
  content: "";
  order: -1;
  flex: 0 0 auto;
  height: 244px;
  background-color: #0B1E33;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 74'%3E%3Cpath d='M0 74V64a50 50 0 0 1 100 0v10' fill='none' stroke='%23E0A53B' stroke-width='1.2' stroke-opacity='.28'/%3E%3Crect x='45' y='9' width='10' height='10' rx='1.5' transform='rotate(45 50 14)' fill='%23E0A53B' fill-opacity='.4'/%3E%3C/svg%3E");
  background-size: 84px 62px;
  background-repeat: repeat-x;
  background-position: bottom left;
  border-bottom: 1px solid var(--es-hairline);
  pointer-events: none;
}

/* the ghost numeral, kept light so it never competes with the title */
.blog .loop-entry .entry-content-wrap::before,
.archive .loop-entry .entry-content-wrap::before {
  content: counter(es-post, decimal-leading-zero);
  position: absolute;
  top: 22px;
  right: 24px;
  color: rgba(19, 49, 79, .07);
  font: 400 34px/1 var(--es-serif);
  pointer-events: none;
}


/* category chip: a label, not a destination — the card title is the link */
.blog .loop-entry .entry-taxonomies,
.archive .loop-entry .entry-taxonomies {
  margin: 0 0 11px;
}

.blog .loop-entry .entry-taxonomies .category-links,
.archive .loop-entry .entry-taxonomies .category-links {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
}

.blog .loop-entry .entry-taxonomies a,
.archive .loop-entry .entry-taxonomies a {
  display: inline-block;
  padding: 5px 11px;
  color: var(--es-accent-deep);
  font: 600 10px/1 var(--es-sans);
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
  background: rgba(224, 165, 59, .08);
  border: 1px solid var(--es-hairline);
  border-radius: 999px 999px 5px 5px;
  pointer-events: none;
  cursor: default;
}

.blog .loop-entry .entry-title,
.archive .loop-entry .entry-title {
  margin: 0 0 11px;
  max-width: 24ch;
  font: 500 clamp(18px, 1.5vw, 21px)/1.3 var(--es-serif);
  letter-spacing: 0;
}

.blog .loop-entry .entry-title a,
.archive .loop-entry .entry-title a {
  color: var(--es-ink);
  text-decoration: none;
  transition: color .2s var(--es-ease);
}

.blog .loop-entry .entry-title a:hover,
.archive .loop-entry .entry-title a:hover {
  color: var(--es-accent-deep);
}

/* meta: the date only. Who wrote it is not what a solicitor is
   scanning for, and Kadence's byline brings its own dot divider. */
.blog .loop-entry .entry-meta .posted-by,
.archive .loop-entry .entry-meta .posted-by,
.blog .loop-entry .entry-meta .entry-meta-divider,
.archive .loop-entry .entry-meta .entry-meta-divider,
.blog .loop-entry .entry-meta .comments-link,
.archive .loop-entry .entry-meta .comments-link {
  display: none !important;
}

.blog .loop-entry .entry-meta,
.archive .loop-entry .entry-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  color: var(--es-ink-soft);
  font: 600 10.5px/1.5 var(--es-sans);
  letter-spacing: .09em;
  text-transform: uppercase;
}

/* the dot divider Kadence inserts between meta items has nothing left
   to divide once the byline is gone */
.blog .loop-entry .entry-meta.entry-meta-divider-dot>span+span::before,
.archive .loop-entry .entry-meta.entry-meta-divider-dot>span+span::before {
  content: none;
}

.blog .loop-entry .entry-meta .posted-on::before,
.archive .loop-entry .entry-meta .posted-on::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-right: 8px;
  background: var(--es-accent);
  transform: rotate(45deg);
  vertical-align: 1px;
  opacity: .85;
}

.blog .loop-entry .entry-meta a,
.archive .loop-entry .entry-meta a {
  color: inherit;
  text-decoration: none;
}

.blog .loop-entry .entry-summary,
.archive .loop-entry .entry-summary {
  margin-top: 14px;
  color: var(--es-ink-soft);
  font: 400 14px/1.66 var(--es-sans);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.blog .loop-entry .entry-summary p,
.archive .loop-entry .entry-summary p {
  margin: 0;
}

/* footer pinned to the bottom so cards in a row end level */
.blog .loop-entry .entry-footer,
.archive .loop-entry .entry-footer {
  margin: 20px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--es-hairline);
}

.blog .loop-entry .entry-actions,
.archive .loop-entry .entry-actions {
  margin: 0;
}

.blog .loop-entry .more-link-wrap,
.archive .loop-entry .more-link-wrap {
  margin: 0;
}

.blog .loop-entry .post-more-link,
.archive .loop-entry .post-more-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--es-ink);
  font: 600 11px/1 var(--es-sans);
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  transition: color .2s var(--es-ease), gap .2s var(--es-ease);
}

/* Kadence prints its own arrow icon inside the link, so the arrow is
   styled rather than added: a second one drawn here would double it. */
.blog .loop-entry .post-more-link .kadence-svg-iconset,
.archive .loop-entry .post-more-link .kadence-svg-iconset {
  display: inline-flex;
  color: var(--es-accent-deep);
  transition: transform .2s var(--es-ease);
}

.blog .loop-entry .post-more-link svg,
.archive .loop-entry .post-more-link svg {
  width: 17px;
  height: 17px;
}

.blog article.entry.loop-entry:hover .post-more-link,
.archive article.entry.loop-entry:hover .post-more-link {
  color: var(--es-accent-deep);
}

.blog article.entry.loop-entry:hover .post-more-link .kadence-svg-iconset,
.archive article.entry.loop-entry:hover .post-more-link .kadence-svg-iconset {
  transform: translateX(4px);
}

/* ---------- archive: pagination ---------- */
.blog .pagination,
.archive .pagination {
  padding-bottom: clamp(40px, 6vw, 72px);
}

.blog .pagination .page-numbers,
.archive .pagination .page-numbers {
  display: inline-grid;
  min-width: 40px;
  height: 40px;
  place-items: center;
  padding: 0 12px;
  border: 1px solid var(--es-hairline);
  border-radius: 14px 14px 6px 6px;
  background: #fff;
  color: var(--es-ink);
  font: 600 13px/1 var(--es-sans);
  text-decoration: none;
  transition: border-color .2s var(--es-ease), background .2s var(--es-ease),
    transform .2s var(--es-ease);
}

.blog .pagination .page-numbers:hover,
.archive .pagination .page-numbers:hover {
  border-color: var(--es-accent);
  transform: translateY(-2px);
}

.blog .pagination .page-numbers.current,
.archive .pagination .page-numbers.current {
  background: var(--es-accent);
  border-color: var(--es-accent);
  color: var(--es-accent-ink);
}

/* A lone post should not stretch to a third of the viewport; cap the
   grid's column width so one card looks deliberate, not stranded. */
.blog #archive-container.post-archive.grid-cols,
.archive #archive-container.post-archive.grid-cols {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 268px), 332px));
  justify-content: start;
}

@media (max-width: 600px) {

  .blog .loop-entry .entry-content-wrap,
  .archive .loop-entry .entry-content-wrap {
    padding: 26px 22px 22px;
  }
}

/* ============================================================
   35b. SINGLE POST
   ============================================================ */

/* ---------- the crown: a navy header card with the arcade ---------- */
.single-post .entry-header.post-title {
  position: relative;
  overflow: hidden;
  margin: clamp(22px, 3.5vw, 40px) 0 0;
  padding: clamp(34px, 5vw, 62px) clamp(24px, 4vw, 56px) clamp(64px, 7vw, 92px);
  background: linear-gradient(180deg, var(--es-canvas-2, #13314F) 0%, #0B1E33 70%);
  border-radius: 30px 30px 10px 10px;
  text-align: left;
}

/* the arcade frieze along the crown's lower edge */
.single-post .entry-header.post-title::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 64px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 74'%3E%3Cpath d='M0 74V64a50 50 0 0 1 100 0v10' fill='none' stroke='%23E0A53B' stroke-width='1.2' stroke-opacity='.3'/%3E%3Crect x='45' y='9' width='10' height='10' rx='1.5' transform='rotate(45 50 14)' fill='%23E0A53B' fill-opacity='.45'/%3E%3C/svg%3E");
  background-size: 88px 64px;
  background-repeat: repeat-x;
  background-position: bottom left;
  opacity: .75;
  pointer-events: none;
}

/* the gold-led rule at the crown's top edge */
.single-post .entry-header.post-title::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: min(34%, 260px);
  height: 3px;
  background: var(--es-accent);
}

.single-post .entry-header .entry-taxonomies {
  position: relative;
  z-index: 1;
  margin-bottom: 16px;
}

.single-post .entry-header .entry-taxonomies a {
  display: inline-block;
  margin: 0 6px 6px 0;
  padding: 7px 13px;
  color: var(--es-accent);
  font: 600 10.5px/1 var(--es-sans);
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
  background: rgba(224, 165, 59, .12);
  border: 1px solid rgba(224, 165, 59, .38);
  border-radius: 999px 999px 5px 5px;
  transition: background .2s var(--es-ease);
}

.single-post .entry-header .entry-taxonomies a:hover {
  background: rgba(224, 165, 59, .22);
}

.single-post h1.entry-title,
.single-post h1.entry-title span {
  position: relative;
  z-index: 1;
  max-width: 24ch;
  margin: 0;
  color: #F2EFE9 !important;
  font: 500 clamp(30px, 4.2vw, 50px)/1.12 var(--es-serif);
  letter-spacing: -.015em;
  text-wrap: balance;
}

.single-post .entry-header .entry-meta {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-top: 18px;
  color: #8FA3B8;
  font: 600 11px/1.5 var(--es-sans);
  letter-spacing: .09em;
  text-transform: uppercase;
}

.single-post .entry-header .entry-meta>*::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-right: 8px;
  background: var(--es-accent);
  transform: rotate(45deg);
  vertical-align: 1px;
  opacity: .85;
}

.single-post .entry-header .entry-meta a {
  color: inherit;
  text-decoration: none;
}

.single-post .entry-header .entry-meta a:hover {
  color: var(--es-accent);
}

/* ---------- featured image: overlapping the crown ---------- */
.single-post .article-post-thumbnail,
.single-post .post-thumbnail {
  position: relative;
  z-index: 2;
}

.single-post .article-post-thumbnail img,
.single-post .post-thumbnail img {
  display: block;
  width: min(100%, 940px);
  margin: -46px auto 0;
  border-radius: 14px;
  box-shadow: 0 22px 52px rgba(11, 30, 51, .18);
}

/* ---------- content typography ---------- */
.single-post .entry-content.single-content {
  max-width: 812px;
  margin-inline: auto;
  padding: clamp(30px, 4.4vw, 52px) clamp(22px, 3vw, 34px) clamp(34px, 5vw, 60px);
  color: var(--es-ink-soft);
  font: 400 17.5px/1.75 var(--es-sans);
}

.single-post .entry-content.single-content>p {
  margin: 0 0 1.4em;
}

/* drop cap on the opening paragraph — the article begins like a document */
.single-post .entry-content.single-content>p:first-of-type::first-letter {
  float: left;
  margin: 6px 14px 0 0;
  color: var(--es-accent-deep);
  font: 500 3.6em/0.82 var(--es-serif);
}

/* headings: the gold-led hairline the whole site opens sections with */
.single-post .entry-content h2 {
  margin: 1.9em 0 .75em;
  padding-bottom: .45em;
  color: var(--es-ink);
  font: 500 clamp(24px, 2.5vw, 30px)/1.22 var(--es-serif);
  border-bottom: 1px solid var(--es-hairline);
  background: linear-gradient(90deg, var(--es-accent) 0 48px, transparent 48px) left bottom / 100% 2px no-repeat;
}

.single-post .entry-content h3 {
  position: relative;
  margin: 1.6em 0 .6em;
  padding-left: 20px;
  color: var(--es-ink);
  font: 500 clamp(19px, 1.9vw, 23px)/1.3 var(--es-serif);
}

.single-post .entry-content h3::before {
  content: "";
  position: absolute;
  left: 0;
  top: .5em;
  width: 8px;
  height: 8px;
  background: var(--es-accent);
  border-radius: 1px;
  transform: rotate(45deg);
}

.single-post .entry-content h4 {
  margin: 1.5em 0 .5em;
  color: var(--es-accent-deep);
  font: 600 12px/1.4 var(--es-sans);
  letter-spacing: .12em;
  text-transform: uppercase;
}

.single-post .entry-content a {
  color: var(--es-accent-deep);
  text-decoration: none;
  border-bottom: 1px solid rgba(198, 138, 36, .45);
  transition: color .18s var(--es-ease), border-color .18s var(--es-ease);
}

.single-post .entry-content a:hover {
  color: var(--es-ink);
  border-bottom-color: var(--es-accent);
}

/* lists: keystone bullets, gold serif numerals */
.single-post .entry-content ul {
  padding-left: 6px;
  list-style: none;
}

.single-post .entry-content ul>li {
  position: relative;
  margin: 0 0 .55em;
  padding-left: 22px;
}

.single-post .entry-content ul>li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: .58em;
  width: 7px;
  height: 7px;
  background: var(--es-accent);
  border-radius: 1px;
  transform: rotate(45deg);
}

.single-post .entry-content ol {
  padding-left: 1.4em;
}

.single-post .entry-content ol>li {
  margin: 0 0 .55em;
  padding-left: 6px;
}

.single-post .entry-content ol>li::marker {
  color: var(--es-accent-deep);
  font: 500 1em var(--es-serif);
}

/* blockquote: the pull-quote as a paper panel with an oversized mark */
.single-post .entry-content blockquote {
  position: relative;
  margin: 1.8em 0;
  padding: 26px 28px 22px 30px;
  background: var(--es-paper);
  border: 1px solid var(--es-hairline);
  border-left: 3px solid var(--es-accent);
  border-radius: 4px 14px 14px 4px;
  font: 400 18.5px/1.6 var(--es-serif);
  color: var(--es-ink);
}

.single-post .entry-content blockquote::before {
  content: "\201C";
  position: absolute;
  top: -6px;
  right: 16px;
  color: rgba(224, 165, 59, .25);
  font: 500 84px/1 var(--es-serif);
  pointer-events: none;
}

.single-post .entry-content blockquote p {
  margin: 0 0 .6em;
}

.single-post .entry-content blockquote p:last-child {
  margin: 0;
}

.single-post .entry-content blockquote cite {
  display: block;
  margin-top: 10px;
  color: var(--es-ink-soft);
  font: 600 11px/1.4 var(--es-sans);
  letter-spacing: .1em;
  text-transform: uppercase;
  font-style: normal;
}

/* the section rule, as a divider inside prose */
.single-post .entry-content hr {
  height: 1px;
  margin: 2.2em 0;
  border: 0;
  background: linear-gradient(90deg, var(--es-accent) 0 48px, var(--es-hairline) 48px);
}

/* images and figures inside the article */
.single-post .entry-content img {
  border-radius: 12px;
  box-shadow: 0 12px 30px rgba(11, 30, 51, .1);
}

.single-post .entry-content figcaption {
  margin-top: 10px;
  color: var(--es-ink-soft);
  font: 400 12.5px/1.5 var(--es-sans);
  text-align: center;
}

/* tables: hairline grid, navy head */
.single-post .entry-content table {
  width: 100%;
  margin: 1.6em 0;
  border-collapse: collapse;
  font-size: 15px;
}

.single-post .entry-content th {
  padding: 12px 14px;
  color: #F2EFE9;
  font: 600 11.5px/1.4 var(--es-sans);
  letter-spacing: .07em;
  text-transform: uppercase;
  text-align: left;
  background: #0B1E33;
}

.single-post .entry-content td {
  padding: 11px 14px;
  border: 1px solid var(--es-hairline);
  color: var(--es-ink-soft);
}

.single-post .entry-content tr:nth-child(even) td {
  background: var(--es-paper);
}

/* selection, in the house gold */
.single-post .entry-content ::selection {
  background: rgba(224, 165, 59, .3);
  color: var(--es-ink);
}

/* ---------- author box and post navigation ---------- */
.single-post .entry-author {
  max-width: 760px;
  margin: clamp(30px, 5vw, 48px) auto 0;
  padding: 22px 24px;
  background: #fff;
  border: 1px solid var(--es-hairline);
  border-left: 3px solid var(--es-accent);
  border-radius: 4px 14px 14px 4px;
}

.single-post .entry-author .author-name {
  color: var(--es-ink);
  font: 500 17px/1.3 var(--es-serif);
}

.single-post .post-navigation {
  max-width: 760px;
  margin: clamp(26px, 4vw, 40px) auto 0;
  border-top: 0;
}

.single-post .post-navigation .nav-links {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.single-post .post-navigation .nav-previous,
.single-post .post-navigation .nav-next {
  border: 1px solid var(--es-hairline);
  border-radius: 22px 22px 8px 8px;
  background: #fff;
  transition: transform .2s var(--es-ease), border-color .2s var(--es-ease);
}

.single-post .post-navigation .nav-previous:hover,
.single-post .post-navigation .nav-next:hover {
  transform: translateY(-2px);
  border-color: rgba(224, 165, 59, .6);
}

.single-post .post-navigation a {
  display: block;
  padding: 16px 18px;
  color: var(--es-ink);
  font: 500 14.5px/1.4 var(--es-serif);
  text-decoration: none;
}

.single-post .post-navigation .nav-next {
  text-align: right;
}

@media (max-width: 640px) {
  .single-post .post-navigation .nav-links {
    grid-template-columns: 1fr;
  }

  .single-post .article-post-thumbnail img,
  .single-post .post-thumbnail img {
    margin-top: -30px;
    border-width: 5px;
  }

  .single-post .entry-content.single-content>p:first-of-type::first-letter {
    font-size: 3em;
  }
}

/* ============================================================
   35c. SINGLE POST — COMMENTS
   Kadence'in yorum isaretlemesi hic stillenmemisti: varsayilan mavi
   buton ve ciplak liste geliyordu. Sayfanin geri kalaniyla ayni dil:
   kagit panel, tel cizgi, kemer tepeli yaricap.
   ============================================================ */
.single-post #comments {
  max-width: 812px;
  margin: clamp(38px, 6vw, 68px) auto 0;
  padding: 0 clamp(22px, 3vw, 34px) clamp(56px, 8vw, 96px);
}

.single-post .comments-title,
.single-post .comment-reply-title {
  position: relative;
  margin: 0 0 26px;
  padding-top: 18px;
  color: var(--es-ink);
  font: 500 clamp(21px, 2vw, 27px)/1.25 var(--es-serif);
  letter-spacing: 0;
}

.single-post .comments-title::before,
.single-post .comment-reply-title::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, var(--es-accent) 0 48px, var(--es-hairline) 48px);
}

.single-post .comment-reply-title small {
  margin-left: 12px;
  font: 600 11px/1 var(--es-sans);
  letter-spacing: .1em;
  text-transform: uppercase;
}

.single-post .comment-reply-title small a {
  color: var(--es-accent-deep);
  text-decoration: none;
}

/* ---------- the comment list ---------- */
.single-post .comment-list,
.single-post .comment-list li {
  margin: 0;
  padding: 0;
  list-style: none;
}

.single-post .comment-list li::before {
  content: none;
}

.single-post .comment-body {
  position: relative;
  margin: 0 0 16px;
  padding: 24px 26px 22px;
  background: #fff;
  border: 1px solid var(--es-hairline);
  border-radius: 20px 20px 6px 6px;
  box-shadow: 0 1px 2px rgba(11, 30, 51, .04);
}

/* replies step in behind a hairline rather than a raw list indent */
.single-post .comment-list .children {
  margin: 0 0 0 clamp(16px, 3vw, 38px);
  padding-left: clamp(14px, 2vw, 24px);
  border-left: 1px solid var(--es-hairline);
}

.single-post .comment-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  margin-bottom: 14px;
}

.single-post .comment-author.vcard {
  display: flex;
  align-items: center;
  gap: 12px;
}

.single-post .comment-author img.avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid var(--es-hairline);
  background: var(--es-paper);
}

.single-post .comment-author .fn {
  color: var(--es-ink);
  font: 600 15px/1.3 var(--es-sans);
  font-style: normal;
}

.single-post .comment-author .fn a {
  color: inherit;
  text-decoration: none;
  transition: color .2s var(--es-ease);
}

.single-post .comment-author .fn a:hover {
  color: var(--es-accent-deep);
}

/* "says" adds nothing once the name and date are laid out as meta */
.single-post .comment-author .says {
  display: none;
}

.single-post .comment-metadata {
  color: var(--es-ink-soft);
  font: 600 10.5px/1.5 var(--es-sans);
  letter-spacing: .09em;
  text-transform: uppercase;
}

.single-post .comment-metadata a {
  color: inherit;
  text-decoration: none;
}

.single-post .comment-metadata a:hover {
  color: var(--es-accent-deep);
}

.single-post .comment-metadata>a::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-right: 8px;
  background: var(--es-accent);
  transform: rotate(45deg);
  vertical-align: 1px;
  opacity: .85;
}

.single-post .comment-content {
  color: var(--es-ink-soft);
  font: 400 15.5px/1.72 var(--es-sans);
}

.single-post .comment-content p {
  margin: 0 0 12px;
}

.single-post .comment-content p:last-child {
  margin-bottom: 0;
}

.single-post .comment-content a {
  color: var(--es-accent-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

/* Kadence floats Reply right on wide comments; keep it in flow so it
   never collides with a long author name. */
.single-post .reply {
  float: none;
  margin-top: 14px;
}

.single-post .comment-reply-link {
  display: inline-flex;
  align-items: center;
  padding: 7px 16px;
  color: var(--es-accent-deep);
  font: 600 10.5px/1 var(--es-sans);
  letter-spacing: .11em;
  text-transform: uppercase;
  text-decoration: none;
  background: rgba(224, 165, 59, .07);
  border: 1px solid var(--es-hairline);
  border-radius: 999px 999px 5px 5px;
  transition: background .2s var(--es-ease), border-color .2s var(--es-ease);
}

.single-post .comment-reply-link:hover {
  background: rgba(224, 165, 59, .16);
  border-color: var(--es-accent);
}

/* ---------- the reply form ---------- */
.single-post #respond {
  margin-top: clamp(30px, 5vw, 48px);
  padding: clamp(24px, 3.4vw, 36px) clamp(22px, 3vw, 32px) clamp(26px, 3.4vw, 34px);
  background: #fff;
  border: 1px solid var(--es-hairline);
  border-radius: 24px 24px 8px 8px;
}

.single-post .logged-in-as,
.single-post .comment-notes {
  margin: 0 0 20px;
  color: var(--es-ink-soft);
  font: 400 13.5px/1.6 var(--es-sans);
}

.single-post .logged-in-as a,
.single-post .comment-notes a {
  color: var(--es-accent-deep);
  font-weight: 600;
  text-decoration: none;
}

.single-post .required-field-message,
.single-post .comment-form .required {
  color: var(--es-accent-deep);
}

.single-post .comment-form p {
  margin: 0 0 18px;
}

.single-post .comment-form label,
.single-post .comment-form .float-label {
  color: var(--es-ink-soft);
  font: 600 11px/1 var(--es-sans);
  letter-spacing: .09em;
  text-transform: uppercase;
}

.single-post .comment-form textarea,
.single-post .comment-form input[type="text"],
.single-post .comment-form input[type="email"],
.single-post .comment-form input[type="url"] {
  width: 100%;
  padding: 14px 16px;
  color: var(--es-ink);
  font: 400 15.5px/1.6 var(--es-sans);
  background: var(--es-paper);
  border: 1px solid var(--es-hairline);
  border-radius: 14px 14px 6px 6px;
  outline: none;
  transition: border-color .2s var(--es-ease), box-shadow .2s var(--es-ease),
    background .2s var(--es-ease);
}

.single-post .comment-form textarea {
  min-height: 168px;
  resize: vertical;
}

.single-post .comment-form textarea:focus,
.single-post .comment-form input[type="text"]:focus,
.single-post .comment-form input[type="email"]:focus,
.single-post .comment-form input[type="url"]:focus {
  background: #fff;
  border-color: var(--es-accent);
  box-shadow: 0 0 0 3px rgba(224, 165, 59, .16);
}

.single-post .comment-form ::placeholder {
  color: rgba(31, 41, 51, .45);
}

/* the house arch-topped gold pill, replacing the theme's default blue */
.single-post .form-submit {
  margin: 0;
}

.single-post .comment-form input#submit,
.single-post .comment-form input.submit {
  display: inline-flex;
  align-items: center;
  padding: 15px 32px;
  color: var(--es-accent-ink, #0B1E33);
  font: 700 12px/1 var(--es-sans);
  letter-spacing: .11em;
  text-transform: uppercase;
  background: var(--es-accent);
  border: 1px solid var(--es-accent-deep);
  border-radius: 999px 999px 8px 8px;
  cursor: pointer;
  transition: background .2s var(--es-ease), transform .2s var(--es-ease),
    box-shadow .2s var(--es-ease);
}

.single-post .comment-form input#submit:hover,
.single-post .comment-form input.submit:hover {
  background: var(--es-accent-deep);
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(224, 165, 59, .28);
}

@media (max-width: 640px) {
  .single-post .comment-body {
    padding: 20px 18px 18px;
  }

  .single-post .comment-author img.avatar {
    width: 36px;
    height: 36px;
  }
}

/* ---------- 35d. single post corrections (7 Aug) ----------
   Four changes taken against the rendered post captured in
   blog/single-page-sample.html:
     1. the "behind" featured image above the article goes
     2. the article's container runs wider
     3. the Pexels credit under the injected image is hidden
     4. Similar Posts, which Kadence printed unstyled, is dressed
        in the archive card language, loses the byline, and is
        ready for the thumbnails future posts will carry
   ----------------------------------------------------------- */

/* --- 1. the duplicate featured image ---
   Kadence prints the featured image here, above the article, while the
   n8n pipeline injects the same picture into the content as the opening
   figure. Only the second is wanted. The image itself stays set on the
   post, because the archive cards and the Similar Posts carousel below
   both read it. */
.single-post .content-wrap>.post-thumbnail.article-post-thumbnail {
  display: none;
}

/* --- 2. container width ---
   Kadence caps this at --global-content-width. On a single post the
   crown, the article and the related band all sit inside it, so the cap
   is raised here rather than globally: one number to tune.

   The reading column is deliberately NOT widened with it. At 17.5px the
   812px measure already runs to roughly 85 characters, which is the top
   of what stays comfortable to track back from. The crown and the
   related band take the extra width; the prose does not. */
.single-post .content-container.site-container {
  max-width: 1440px;
}

/* the author box and post navigation line up with the reading column
   rather than sitting narrower than it */
.single-post .entry-author,
.single-post .post-navigation {
  max-width: 812px;
}

/* --- 3. the image credit ---
   Pexels does not require attribution and the credit line interrupts the
   column before the first heading. To bring genuine captions back later,
   narrow this to `figure.wp-block-image:first-of-type figcaption`. */
.single-post .entry-content.single-content figcaption {
  display: none;
}

/* --- 4. Similar Posts ---------------------------------------------- */

/* the band: paper ground, so the white cards read as cards */
.single-post .entry-related {
  margin-top: clamp(46px, 6vw, 80px);
  padding: clamp(44px, 5.5vw, 72px) 0 clamp(48px, 6vw, 80px);
  border-top: 1px solid var(--es-hairline);
  background:
    linear-gradient(180deg, rgba(224, 165, 59, .05), transparent 300px),
    var(--es-paper);
}

.single-post .entry-related-title {
  margin: 0 0 clamp(24px, 3vw, 36px);
  padding-bottom: .45em;
  color: var(--es-ink);
  font: 500 clamp(22px, 2.2vw, 28px)/1.22 var(--es-serif);
  border-bottom: 1px solid var(--es-hairline);
  background: linear-gradient(90deg, var(--es-accent) 0 48px, transparent 48px) left bottom / 100% 2px no-repeat;
}

/* slides end level, so the cards inside them do too */
.single-post .entry-related .splide__list {
  align-items: stretch;
}

.single-post .entry-related .entry-list-item {
  display: flex;
  height: auto;
}

.single-post .entry-related article.entry.loop-entry {
  position: relative;
  display: flex;
  width: 100%;
  flex-direction: column;
  overflow: hidden;
  margin: 0;
  background: #fff;
  border: 1px solid var(--es-hairline);
  border-radius: 24px 24px 8px 8px;
  box-shadow: 0 1px 2px rgba(11, 30, 51, .04);
  transition: transform .22s var(--es-ease), border-color .22s var(--es-ease),
    box-shadow .22s var(--es-ease);
}

/* the gold rule that sweeps in on hover, as on the archive cards */
.single-post .entry-related article.entry.loop-entry::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: 100%;
  height: 3px;
  background: var(--es-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s var(--es-ease);
}

.single-post .entry-related article.entry.loop-entry:hover {
  transform: translateY(-4px);
  border-color: rgba(224, 165, 59, .6);
  box-shadow: 0 18px 40px rgba(11, 30, 51, .12);
}

.single-post .entry-related article.entry.loop-entry:hover::before {
  transform: scaleX(1);
}

/* the thumbnail slot, for the posts that will carry one.
   The single-post rules further up give .post-thumbnail img a negative
   top margin and an 8px white frame so it overlaps the crown; inside a
   card the image is flush, so both are undone here. */
.single-post .entry-related .loop-entry .post-thumbnail {
  position: relative;
  z-index: 0;
  margin: 0;
  overflow: hidden;
  border-bottom: 1px solid var(--es-hairline);
}

.single-post .entry-related .loop-entry .post-thumbnail-inner {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  background: var(--es-paper-2);
}

.single-post .entry-related .loop-entry .post-thumbnail img {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  object-fit: cover;
  filter: saturate(.8) contrast(1.02);
  transition: transform .5s var(--es-ease), filter .35s var(--es-ease);
}

.single-post .entry-related article.entry.loop-entry:hover .post-thumbnail img {
  transform: scale(1.035);
  filter: saturate(1) contrast(1.02);
}

/* the keystone, sitting on the image's lower edge */
.single-post .entry-related .loop-entry .post-thumbnail::after {
  content: "";
  position: absolute;
  right: 14px;
  bottom: 12px;
  z-index: 1;
  width: 9px;
  height: 9px;
  background: var(--es-accent);
  border-radius: 1px;
  transform: rotate(45deg);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .85);
}

/* a card with no image would otherwise be a block of text beside cards
   that have one, so it gets the arcade band the archive uses. The card
   is a flex column, hence order:-1 rather than absolute positioning. */
.single-post .entry-related article.entry.loop-entry:not(.has-post-thumbnail)::after {
  content: "";
  order: -1;
  flex: 0 0 auto;
  height: 168px;
  background-color: #0B1E33;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 74'%3E%3Cpath d='M0 74V64a50 50 0 0 1 100 0v10' fill='none' stroke='%23E0A53B' stroke-width='1.2' stroke-opacity='.28'/%3E%3Crect x='45' y='9' width='10' height='10' rx='1.5' transform='rotate(45 50 14)' fill='%23E0A53B' fill-opacity='.4'/%3E%3C/svg%3E");
  background-size: 84px 62px;
  background-repeat: repeat-x;
  background-position: bottom left;
  border-bottom: 1px solid var(--es-hairline);
  pointer-events: none;
}

.single-post .entry-related .loop-entry .entry-content-wrap {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  padding: clamp(22px, 2vw, 30px) clamp(20px, 1.9vw, 28px) clamp(20px, 1.8vw, 26px);
}

.single-post .entry-related .loop-entry .entry-header {
  margin: 0;
  padding: 0;
  background: none;
  border-radius: 0;
}

/* the category chip. The crown's chip rule (gold on navy) also matches
   a card header, so every property it sets is restated here. */
.single-post .entry-related .loop-entry .entry-taxonomies {
  margin: 0 0 11px;
}

.single-post .entry-related .loop-entry .entry-taxonomies .category-links {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
}

.single-post .entry-related .loop-entry .entry-taxonomies a {
  display: inline-block;
  margin: 0;
  padding: 5px 11px;
  color: var(--es-accent-deep);
  font: 600 10px/1 var(--es-sans);
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
  background: rgba(224, 165, 59, .08);
  border: 1px solid var(--es-hairline);
  border-radius: 999px 999px 5px 5px;
  pointer-events: none;
  cursor: default;
}

.single-post .entry-related .loop-entry h3.entry-title {
  margin: 0 0 11px;
  max-width: 26ch;
  color: var(--es-ink);
  font: 500 clamp(17px, 1.4vw, 20px)/1.3 var(--es-serif);
  letter-spacing: 0;
}

.single-post .entry-related .loop-entry .entry-title a {
  color: var(--es-ink);
  text-decoration: none;
  transition: color .2s var(--es-ease);
}

.single-post .entry-related .loop-entry .entry-title a:hover {
  color: var(--es-accent-deep);
}

/* the byline goes. Who wrote it is not what a solicitor scans a card
   for, and it matches the archive, where the same line is already cut. */
.single-post .entry-related .loop-entry .entry-meta .posted-by,
.single-post .entry-related .loop-entry .entry-meta .entry-meta-divider,
.single-post .entry-related .loop-entry .entry-meta .comments-link {
  display: none !important;
}

.single-post .entry-related .loop-entry .entry-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  margin: 0;
  color: var(--es-ink-soft);
  font: 600 10.5px/1.5 var(--es-sans);
  letter-spacing: .09em;
  text-transform: uppercase;
}

/* the dot divider Kadence inserts has nothing left to divide */
.single-post .entry-related .loop-entry .entry-meta.entry-meta-divider-dot>span+span::before {
  content: none;
}

/* the crown gives every meta item a gold diamond; on a card only the
   date survives, so the diamond is cleared and redrawn on it alone */
.single-post .entry-related .loop-entry .entry-meta>*::before {
  content: none;
}

.single-post .entry-related .loop-entry .entry-meta .posted-on::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-right: 8px;
  background: var(--es-accent);
  transform: rotate(45deg);
  vertical-align: 1px;
  opacity: .85;
}

.single-post .entry-related .loop-entry .entry-meta a,
.single-post .entry-related .loop-entry .entry-meta a:hover {
  color: inherit;
  text-decoration: none;
}

/* the summary grows, which is what pins the footer to the card's
   bottom edge so cards in a row end level */
.single-post .entry-related .loop-entry .entry-summary {
  display: -webkit-box;
  flex: 1 1 auto;
  margin-top: 12px;
  overflow: hidden;
  color: var(--es-ink-soft);
  font: 400 13.5px/1.66 var(--es-sans);
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.single-post .entry-related .loop-entry .entry-summary p {
  margin: 0;
}

.single-post .entry-related .loop-entry .entry-footer {
  margin: 20px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--es-hairline);
}

.single-post .entry-related .loop-entry .entry-actions,
.single-post .entry-related .loop-entry .more-link-wrap {
  margin: 0;
}

.single-post .entry-related .loop-entry .post-more-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--es-ink);
  font: 600 11px/1 var(--es-sans);
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  transition: color .2s var(--es-ease), gap .2s var(--es-ease);
}

/* Kadence prints its own arrow inside the link, so it is styled rather
   than added: a second one drawn here would double it. */
.single-post .entry-related .loop-entry .post-more-link .kadence-svg-iconset {
  display: inline-flex;
  color: var(--es-accent-deep);
  transition: transform .2s var(--es-ease);
}

.single-post .entry-related .loop-entry .post-more-link svg {
  width: 17px;
  height: 17px;
}

.single-post .entry-related article.entry.loop-entry:hover .post-more-link {
  color: var(--es-accent-deep);
}

.single-post .entry-related article.entry.loop-entry:hover .post-more-link .kadence-svg-iconset {
  transform: translateX(4px);
}

/* carousel controls. Splide prints these at runtime, so they are absent
   from the captured markup; position is left to Splide and Kadence and
   only the appearance is taken over. */
.single-post .entry-related .splide__arrow {
  width: 40px;
  height: 40px;
  background: #fff;
  border: 1px solid var(--es-hairline);
  border-radius: 999px 999px 6px 6px;
  opacity: 1;
  transition: background .2s var(--es-ease), border-color .2s var(--es-ease),
    transform .2s var(--es-ease);
}

.single-post .entry-related .splide__arrow svg {
  width: 16px;
  height: 16px;
  fill: var(--es-ink);
}

.single-post .entry-related .splide__arrow:hover:not(:disabled) {
  background: var(--es-accent);
  border-color: var(--es-accent-deep);
  transform: translateY(-2px);
}

.single-post .entry-related .splide__arrow:hover:not(:disabled) svg {
  fill: var(--es-accent-ink);
}

.single-post .entry-related .splide__arrow:disabled {
  opacity: .35;
}

.single-post .entry-related .splide__pagination {
  gap: 8px;
  margin-top: clamp(20px, 2.4vw, 30px);
  padding: 0;
}

.single-post .entry-related .splide__pagination__page {
  width: 8px;
  height: 8px;
  margin: 0;
  background: rgba(20, 32, 50, .22);
  border-radius: 1px;
  opacity: 1;
  transform: rotate(45deg);
  transition: background .2s var(--es-ease), transform .2s var(--es-ease);
}

.single-post .entry-related .splide__pagination__page.is-active {
  background: var(--es-accent);
  transform: rotate(45deg) scale(1.25);
}

@media (max-width: 720px) {
  .single-post .entry-related {
    padding-top: clamp(34px, 8vw, 48px);
  }

  .single-post .entry-related .loop-entry .post-thumbnail-inner {
    aspect-ratio: 16 / 9;
  }
}

/* ============================================================
   35e. BLOG — card trims and the responsive pass (7 Aug)

   Three trims taken across both pages, then the breakpoints that
   fluid clamps cannot cover on their own.
   ============================================================ */

/* ---------- the auto-excerpt ----------
   WordPress builds .entry-summary from the post body, and the body opens
   with the injected figure, so every card led with "Photo by ... via
   Pexels" and then repeated the title. The card reads better without it:
   image, discipline, title, date, the link.

   The upstream fix, if it is ever wanted: the n8n draft already returns
   an `excerpt` field (it feeds the RankMath description), but the
   WP Create Draft node does not pass it, so WordPress falls back to the
   body. Set the post excerpt there and this rule can come out. */
.blog .loop-entry .entry-summary,
.archive .loop-entry .entry-summary,
.single-post .entry-related .loop-entry .entry-summary {
  display: none;
}

/* the summary was the element that grew to push the footer to the card's
   lower edge, so cards in a row ended level. With it gone the job moves
   to the footer itself. */
.blog .loop-entry .entry-footer,
.archive .loop-entry .entry-footer,
.single-post .entry-related .loop-entry .entry-footer {
  margin-top: auto;
}

/* and the meta line needs its own breathing room, which the summary
   used to provide */
.blog .loop-entry .entry-meta,
.archive .loop-entry .entry-meta,
.single-post .entry-related .loop-entry .entry-meta {
  margin-bottom: 18px;
}

/* ---------- the byline ----------
   Already cut from the archive cards and from the related carousel.
   The crown above the article was the last place it appeared. */
.single-post .entry-header .entry-meta .posted-by,
.single-post .entry-header .entry-meta .entry-meta-divider,
.single-post .entry-header .entry-meta .comments-link {
  display: none !important;
}

/* the date is now the only item in the line, so Kadence's dot divider
   has nothing left to divide */
.single-post .entry-header .entry-meta.entry-meta-divider-dot>span+span::before {
  content: none;
}

/* ---------- responsive: what clamps cannot fix ----------
   Both pages are built on fluid clamps, so the type and the spacing
   already scale. What follows is the rest: aspect ratios that only make
   sense at one column count, the one block that cannot reflow, and the
   touch targets. */

/* long case citations and slugs break rather than push the page wide */
.single-post .entry-content.single-content,
.blog .loop-entry .entry-title,
.archive .loop-entry .entry-title,
.single-post .entry-related .loop-entry .entry-title,
.single-post h1.entry-title {
  overflow-wrap: break-word;
}

/* the injected figure never exceeds its column */
.single-post .entry-content.single-content figure,
.single-post .entry-content.single-content img {
  max-width: 100%;
  height: auto;
}

/* pagination wraps once the page count passes a phone's width */
.blog .pagination .nav-links,
.archive .pagination .nav-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

/* --- tablet and below --- */
@media (max-width: 760px) {

  /* a table is the one block that cannot reflow. It scrolls inside its
     own box rather than widening the page; the cells stop wrapping so
     the table keeps an intrinsic width to scroll through. */
  .single-post .entry-content.single-content table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    font-size: 14px;
  }

  .single-post .entry-content.single-content th,
  .single-post .entry-content.single-content td {
    padding: 9px 11px;
    white-space: nowrap;
  }

  .single-post .entry-header.post-title {
    border-radius: 22px 22px 8px 8px;
  }

  /* the 24ch measure keeps the headline off the crown's right edge on a
     wide screen; on a narrow one it only makes the block taller */
  .single-post h1.entry-title,
  .single-post h1.entry-title span,
  .single-post .entry-related .loop-entry h3.entry-title {
    max-width: none;
  }
}

/* --- the archive drops to one column at Kadence's sm breakpoint --- */
@media (max-width: 576px) {

  /* a 4:5 crop is right beside a sibling card. Alone in a single column
     it takes most of the screen before the title appears. */
  .blog .loop-entry .post-thumbnail-inner,
  .archive .loop-entry .post-thumbnail-inner {
    aspect-ratio: 16 / 10;
  }

  .blog article.entry.loop-entry:not(.has-post-thumbnail)::after,
  .archive article.entry.loop-entry:not(.has-post-thumbnail)::after {
    height: 150px;
  }

  .blog .loop-entry .entry-title,
  .archive .loop-entry .entry-title {
    max-width: none;
  }

  /* the ghost numeral sits exactly where the chip and title now run */
  .blog .loop-entry .entry-content-wrap::before,
  .archive .loop-entry .entry-content-wrap::before {
    display: none;
  }
}

/* --- phone --- */
@media (max-width: 560px) {
  .single-post .entry-content.single-content {
    font-size: 16.5px;
  }

  .single-post .entry-content.single-content>p:first-of-type::first-letter {
    margin: 4px 10px 0 0;
    font-size: 2.6em;
  }

  /* chips and the read-more link become touch targets */
  .single-post .entry-header .entry-taxonomies a,
  .blog .loop-entry .entry-taxonomies a,
  .archive .loop-entry .entry-taxonomies a,
  .single-post .entry-related .loop-entry .entry-taxonomies a {
    padding: 8px 14px;
  }

  .blog .loop-entry .post-more-link,
  .archive .loop-entry .post-more-link,
  .single-post .entry-related .loop-entry .post-more-link {
    padding: 6px 0;
  }

  /* the carousel is swiped on a phone, and the arrows overlay the cards */
  .single-post .entry-related .splide__arrows {
    display: none;
  }
}

/* --- small phone --- */
@media (max-width: 420px) {

  .single-post h1.entry-title,
  .single-post h1.entry-title span {
    font-size: 26px;
    line-height: 1.16;
  }

  .single-post .entry-header.post-title {
    padding-bottom: 58px;
  }

  .single-post .entry-content.single-content {
    padding-inline: 18px;
  }
}

/* ============================================================
   36. BLOG HERO — the banner above the post archive

   Markup comes from the es-blog-hero.php snippet, which hooks
   kadence_before_main_content and prints only on the Posts page.
   The styles live here and nowhere else: the snippet and the
   static blog-hero.html carry markup alone.
   ============================================================ */

.es-blog-hero {
  --es-bh-canvas: #0B1E33;
  --es-bh-canvas-2: #13314F;
  --es-bh-canvas-3: #0E2740;
  --es-bh-accent: #E0A53B;
  --es-bh-accent-2: #C68A24;
  --es-bh-ink: #3D2A06;
  --es-bh-cream: #F2EFE9;
  --es-bh-muted: #8FA3B8;
  --es-bh-line: rgba(242, 239, 233, .16);
  --es-bh-serif: "Fraunces", Georgia, "Times New Roman", serif;
  --es-bh-sans: "Archivo", "Segoe UI", system-ui, -apple-system, sans-serif;
  --es-bh-ease: cubic-bezier(.22, .61, .36, 1);

  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: clamp(3.25rem, 6vw, 5.25rem) 1.5rem clamp(3rem, 5.5vw, 4.5rem);
  background: linear-gradient(180deg, var(--es-bh-canvas-2) 0%, var(--es-bh-canvas) 62%, var(--es-bh-canvas-3) 100%);
  color: var(--es-bh-cream);
  overflow: hidden;
  isolation: isolate;
  font-family: var(--es-bh-sans);
}

/* --- The arcade, traced: the site's arch-and-keystone motif --- */
.es-blog-hero__arcade {
  position: absolute;
  inset: auto 0 0 0;
  z-index: -1;
  width: 100%;
  height: min(46%, 240px);
  opacity: .3;
  pointer-events: none;
}

.es-blog-hero__arcade path {
  fill: none;
  stroke: var(--es-bh-accent);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-dasharray: 2400;
  stroke-dashoffset: 2400;
  animation: es-bh-trace 16s linear infinite;
}

.es-blog-hero__arcade path.is-soft {
  stroke: var(--es-bh-cream);
  stroke-opacity: .35;
  animation-delay: -8s;
}

.es-blog-hero__arcade rect {
  fill: var(--es-bh-accent);
  opacity: .55;
}

@keyframes es-bh-trace {
  0% {
    stroke-dashoffset: 2400;
  }

  55% {
    stroke-dashoffset: 0;
  }

  100% {
    stroke-dashoffset: -2400;
  }
}

/* --- Inner wrapper (single column, left-aligned) --- */
.es-blog-hero__inner {
  position: relative;
  z-index: 1;
  max-width: 1380px;
  margin-inline: auto;
  text-align: left;
}

.es-blog-hero__copy {
  min-width: 0;
  animation: es-bh-rise .9s var(--es-bh-ease) both;
}

/* --- Kicker: the accent square and caps, the site's eyebrow device --- */
.es-blog-hero__kicker {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  color: var(--es-bh-accent);
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .17em;
  line-height: 1.2;
  text-transform: uppercase;
}

.es-blog-hero__kicker::before {
  content: "";
  width: 8px;
  height: 8px;
  flex: 0 0 8px;
  background: var(--es-bh-accent);
}

.es-blog-hero__title {
  margin: 1.4rem 0 0;
  max-width: 22ch;
  color: var(--es-bh-cream);
  font-family: var(--es-bh-serif);
  font-size: clamp(2.5rem, 4.2vw, 3.9rem);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -.015em;
  text-wrap: balance;
}

.es-blog-hero__title em {
  color: var(--es-bh-accent);
  font-style: normal;
}

.es-blog-hero__lede {
  margin: 1.4rem 0 0;
  max-width: 62ch;
  color: var(--es-bh-muted);
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1.7;
}

/* --- Meta: keystone diamonds over a hairline, as the panels use --- */
.es-blog-hero__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .7rem 1.6rem;
  margin: 2rem 0 0;
  padding-top: 1.35rem;
  border-top: 1px solid var(--es-bh-line);
}

.es-blog-hero__meta-item {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  color: var(--es-bh-muted);
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.es-blog-hero__meta-item::before {
  content: "";
  width: 6px;
  height: 6px;
  flex: 0 0 6px;
  background: var(--es-bh-accent);
  transform: rotate(45deg);
  opacity: .85;
}

/* --- Actions: the arch-topped doorway and the quiet textlink --- */
.es-blog-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1.6rem;
  align-items: center;
  margin: 2.2rem 0 0;
}

.es-blog-hero .es-blog-hero__btn,
.es-blog-hero .es-blog-hero__btn:visited {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 0 26px;
  border: 0;
  border-radius: 999px 999px 9px 9px;
  background: var(--es-bh-accent);
  color: var(--es-bh-ink);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 4px 16px rgba(224, 165, 59, .22);
  transition: background .2s var(--es-bh-ease), transform .2s var(--es-bh-ease),
    box-shadow .2s var(--es-bh-ease);
}

.es-blog-hero .es-blog-hero__btn:hover,
.es-blog-hero .es-blog-hero__btn:focus-visible {
  background: var(--es-bh-accent-2);
  color: var(--es-bh-ink);
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(224, 165, 59, .3);
}

.es-blog-hero__btn svg {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  transition: transform .2s var(--es-bh-ease);
}

.es-blog-hero .es-blog-hero__btn:hover svg {
  transform: translateX(4px);
}

.es-blog-hero .es-blog-hero__link,
.es-blog-hero .es-blog-hero__link:visited {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding-block: 7px;
  border-bottom: 1px solid rgba(224, 165, 59, .55);
  color: var(--es-bh-cream);
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
  transition: color .2s var(--es-bh-ease), gap .2s var(--es-bh-ease);
}

.es-blog-hero .es-blog-hero__link:hover,
.es-blog-hero .es-blog-hero__link:focus-visible {
  gap: 18px;
  color: var(--es-bh-accent);
}

.es-blog-hero a:focus-visible {
  outline: 2px solid var(--es-bh-accent);
  outline-offset: 4px;
}

@keyframes es-bh-rise {
  from {
    opacity: 0;
    transform: translateY(22px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

/* --- Responsive --- */
@media (max-width: 820px) {
  .es-blog-hero__title {
    max-width: none;
    font-size: clamp(2.2rem, 7.5vw, 3.1rem);
  }
}

@media (max-width: 600px) {
  .es-blog-hero {
    padding: clamp(2.4rem, 7vw, 3.25rem) 1.25rem clamp(2.2rem, 6vw, 2.75rem);
  }

  .es-blog-hero__lede {
    font-size: 1rem;
    line-height: 1.65;
  }

  .es-blog-hero__actions {
    align-items: stretch;
    flex-direction: column;
    gap: 1.15rem;
  }

  .es-blog-hero .es-blog-hero__btn {
    width: 100%;
    justify-content: center;
  }

  .es-blog-hero .es-blog-hero__link {
    align-self: flex-start;
  }
}

/* Content must never depend on motion to become visible. */
@media (prefers-reduced-motion: reduce) {

  .es-blog-hero__copy,
  .es-blog-hero__arcade path {
    animation: none !important;
  }

  .es-blog-hero__copy {
    opacity: 1;
    transform: none;
  }

  .es-blog-hero__arcade path {
    stroke-dashoffset: 0;
  }

  .es-blog-hero__btn,
  .es-blog-hero__btn svg,
  .es-blog-hero__link {
    transition: none;
  }
}

/* ============================================================
   37. HUB CROWN — flush under the site header (7 Aug)

   The hub pages open with a full-width dark crown that has to meet
   the header with no seam. Two things were putting a band of page
   background between them on /specialties/:

   1. Kadence's own vertical spacing on the content area, on #main
      and on the article. The blog archive already had this zeroed
      (section 35); pages never did.
   2. wpautop. The paste-ready HTML opens with an HTML comment, and
      WordPress wraps it in <p></p>. The paragraph renders at zero
      height but still carries the 1em bottom margin from the base
      type rules, and that margin collapses against the crown.

   Scoped with :has() to pages that genuinely open with a crown, so
   every other page keeps the spacing it is meant to have. :has()
   covers every modern browser and is already relied on in section 34.
   The four crown classes below are the ones the built pages use:
   main-hub (tier hubs and the specialties index), es-tier-crown,
   about-register and join-expert.
   ============================================================ */

#primary.content-area:has(.main-hub__crown, .es-tier-crown, .about-register__crown, .join-expert__crown, .ewl-hero) {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

#primary.content-area:has(.main-hub__crown, .es-tier-crown, .about-register__crown, .join-expert__crown, .ewl-hero) .content-container,
#primary.content-area:has(.main-hub__crown, .es-tier-crown, .about-register__crown, .join-expert__crown, .ewl-hero) #main.site-main,
#primary.content-area:has(.main-hub__crown, .es-tier-crown, .about-register__crown, .join-expert__crown, .ewl-hero) .content-wrap,
#primary.content-area:has(.main-hub__crown, .es-tier-crown, .about-register__crown, .join-expert__crown, .ewl-hero) article.entry {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

/* wpautop's wrapper around the leading HTML comment. :empty matches it:
   comments are not counted as children for that selector. Any other
   paragraph WordPress leaves empty in this content goes the same way,
   which is the intent. */
#primary.content-area:has(.main-hub__crown, .es-tier-crown, .about-register__crown, .join-expert__crown, .ewl-hero) .entry-content>p:empty {
  display: none;
}

/* and the crown opens at zero whatever ends up preceding it */
#primary.content-area .main-hub__crown,
#primary.content-area .es-tier-crown,
#primary.content-area .about-register__crown,
#primary.content-area .join-expert__crown,
#primary.content-area .ewl-hero {
  margin-top: 0;
}

/* ============================================================
   38. THE FOLD — hero + proof strip + marquee, inside one screen
   (7 Aug, v2)

   The opening unit is three separate sections, so sizing the hero
   alone was never going to work: the proof strip and the marquee
   still pushed it past the fold. They are budgeted together here.

     100svh = header + hero padding + arcade + proof strip + marquee

   Everything except the arcade is close to fixed, so the arcade takes
   whatever is left. It is one SVG with a viewBox of 2000 x 1012, very
   nearly 2:1, and its height follows its width, so the budget is spent
   by capping the hero shell's width rather than clamping any height:
   no crop, no letterbox, the overlay stays on the arches.

     arcade height = 100svh - reserve
     shell width   = arcade height x 2000/1012 + the shell's 2 x 24px

   --es-fold-reserve is the sum of everything that is not the arcade.
   It is retuned at two viewport-height tiers, in step with the
   compressions below, and again where the viewport is narrow enough
   that the proof strip wraps to two rows (the 900px rule further up).
   Each figure carries about 10px of slack so the section below peeks.

     tier          header  hero pad  proof  marquee  reserve
     A  > 820px      96       68      142      62      378
     B  <= 820px     96       36      110      43      294
     C  <= 700px     96       22       88      32      248
     A  narrow       96       68      250      62      486
     B  narrow       96       36      200      43      385
     C  narrow       96       22      164      32      324

   svh, not vh, so a tablet's collapsing browser chrome cannot push the
   marquee back out of view; a vh line precedes each svh line for
   anything that predates the unit.

   Phones (<= 640px) are excluded throughout: the block further up
   deliberately zooms and crops the arcade there, and the fold is a
   different problem on a phone.
   ============================================================ */

.es-hero {
  --es-fold-header: 96px;
  /* the sticky site header; retune if it changes */
  --es-fold-reserve: 378px;
  --es-fold-ratio: 1.9763;
  /* 2000 / 1012, the arcade viewBox */
}

@media (min-width: 641px) and (max-height: 820px) {
  .es-hero {
    --es-fold-reserve: 294px;
  }
}

@media (min-width: 641px) and (max-height: 700px) {
  .es-hero {
    --es-fold-reserve: 248px;
  }
}

/* the proof strip wraps to two rows below 900px, which costs about
   another 110px; these must come after the height tiers to win */
@media (min-width: 641px) and (max-width: 900px) {
  .es-hero {
    --es-fold-reserve: 486px;
  }
}

@media (min-width: 641px) and (max-width: 900px) and (max-height: 820px) {
  .es-hero {
    --es-fold-reserve: 385px;
  }
}

@media (min-width: 641px) and (max-width: 900px) and (max-height: 700px) {
  .es-hero {
    --es-fold-reserve: 324px;
  }
}

.es-hero .es-shell {
  max-width: min(1380px, max(560px, calc((100vh - var(--es-fold-reserve)) * var(--es-fold-ratio) + 48px)));
  max-width: min(1380px, max(560px, calc((100svh - var(--es-fold-reserve)) * var(--es-fold-ratio) + 48px)));
}

/* ---- tier B: laptops and tablet landscape (<= 820px tall) ---- */
@media (min-width: 641px) and (max-height: 820px) {
  .es-hero {
    padding: 8px 0 28px;
  }

  .es-proof__grid {
    padding: 22px 0 18px;
    row-gap: 18px;
  }

  .es-proof__num {
    font-size: clamp(17px, 1.5vw, 21px);
  }

  .es-proof__num--text {
    font-size: clamp(17px, 1.7vw, 21px);
  }

  .es-proof__lbl {
    font-size: 12.5px;
    margin-top: 5px;
  }

  .es-proof__note {
    display: none;
  }

  .es-marquee {
    padding: 12px 0;
  }

  .es-marquee__group span {
    font-size: clamp(15px, 1.4vw, 19px);
  }

  .es-marquee__group span::after {
    margin: 0 20px;
  }
}

/* ---- tier C: short laptops, 768-tall screens (<= 700px tall) ---- */
@media (min-width: 641px) and (max-height: 700px) {
  .es-hero {
    padding: 4px 0 18px;
  }

  .es-proof__grid {
    padding: 16px 0 12px;
    row-gap: 14px;
  }

  .es-proof__num {
    font-size: clamp(15px, 1.5vw, 18px);
  }

  .es-proof__num--text {
    font-size: clamp(15px, 1.5vw, 18px);
  }

  .es-proof__lbl {
    font-size: 11.5px;
    margin-top: 4px;
  }

  .es-marquee {
    padding: 8px 0;
  }

  .es-marquee__group span {
    font-size: clamp(14px, 1.2vw, 16px);
  }

  .es-marquee__group span::after {
    margin: 0 16px;
  }
}

/* ---- the overlay follows the arches down ----
   Without this the headline keeps its 5.4vw size while the arcade
   shrinks underneath it, and the two stop fitting each other. */
@media (min-width: 641px) {
  .es-hero__overlay .es-h1 {
    font-size: clamp(30px, min(5.4vw, 8.2vh), 76px);
    font-size: clamp(30px, min(5.4vw, 8.2svh), 76px);
  }

  .es-hero__overlay .es-lead {
    font-size: clamp(14px, min(1.4vw, 2.2vh), 19px);
    font-size: clamp(14px, min(1.4vw, 2.2svh), 19px);
  }

  .es-hero__overlay {
    gap: clamp(8px, 1.7vh, 17px);
    gap: clamp(8px, 1.7svh, 17px);
    bottom: clamp(16px, min(5vw, 5.6vh), 62px);
    bottom: clamp(16px, min(5vw, 5.6svh), 62px);
  }

  .es-hero__actions {
    margin-top: 0;
    gap: clamp(10px, 2.2vh, 22px);
    gap: clamp(10px, 2.2svh, 22px);
  }
}

/* ============================================================
   39. LEGAL PAGES — #ew-legal (7 Aug, v2)

   Privacy, Terms and Cookie. Same tokens and motifs as the rest of
   the site: a navy crown carrying the arcade frieze, Fraunces for
   headings, the gold-led hairline that opens every section, keystone
   list markers, arch-topped radii. Almost nothing animates; a policy
   page is read, not explored.

   STRUCTURE. v1 hung the two columns off a .ewl-body wrapper nested
   inside #ew-legal. When the markup is pasted across more than one
   block WordPress auto-closes the divs, that wrapper does not
   survive, and the layout collapses to a single column. The grid now
   lives on #ew-legal itself and the page has exactly three children:

     #ew-legal
       header.ewl-hero    -> spans both columns
       nav.ewl-toc        -> the rail
       main.ewl-main      -> the sections

   One wrapper, three siblings, no nesting to lose. Sections are the
   cards themselves; the section number sits inside its own h2 rather
   than in a separate head element.

   The block is full-bleed and rebuilds the 1120px measure with
   --ewl-gutter, so it does not matter how narrow the page template
   caps .entry-content, and the crown runs edge to edge either way.
   ============================================================ */

#ew-legal {
  --ewl-shell: 1120px;
  --ewl-rail: 250px;
  --ewl-gutter: max(clamp(20px, 4vw, 48px), calc((100vw - var(--ewl-shell)) / 2));

  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "hero"
    "toc"
    "main";
  column-gap: clamp(28px, 4vw, 64px);
  row-gap: clamp(24px, 3vw, 40px);

  width: 100vw;
  max-width: 100vw;
  margin-inline: calc(50% - 50vw);
  padding: 0 var(--ewl-gutter) clamp(56px, 7vw, 96px);

  background: var(--es-paper);
  color: var(--es-ink);
  font-family: var(--es-sans);
}

#ew-legal *,
#ew-legal *::before,
#ew-legal *::after {
  box-sizing: border-box;
}

@media (min-width: 1025px) {
  #ew-legal {
    grid-template-columns: var(--ewl-rail) minmax(0, 1fr);
    grid-template-areas:
      "hero hero"
      "toc  main";
  }
}

/* ---------- the crown ---------- */
.ewl-hero {
  grid-area: hero;
  position: relative;
  overflow: hidden;
  /* out through the page gutter, then its own measure back in */
  margin-inline: calc(var(--ewl-gutter) * -1);
  padding: clamp(38px, 5.5vw, 76px) var(--ewl-gutter) clamp(62px, 7vw, 96px);
  background: linear-gradient(180deg, var(--es-canvas-2) 0%, var(--es-canvas) 72%);
  color: var(--es-text-on-dark);
}

/* the crown meets the site header with no seam */
#ew-legal>.ewl-hero:first-child {
  margin-top: 0;
}

/* the gold-led rule at the top edge */
.ewl-hero::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: min(34%, 260px);
  height: 3px;
  background: var(--es-accent);
}

/* the arcade frieze along the lower edge */
.ewl-hero::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 64px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 74'%3E%3Cpath d='M0 74V64a50 50 0 0 1 100 0v10' fill='none' stroke='%23E0A53B' stroke-width='1.2' stroke-opacity='.3'/%3E%3Crect x='45' y='9' width='10' height='10' rx='1.5' transform='rotate(45 50 14)' fill='%23E0A53B' fill-opacity='.45'/%3E%3C/svg%3E");
  background-size: 88px 64px;
  background-repeat: repeat-x;
  background-position: bottom left;
  opacity: .75;
  pointer-events: none;
}

.ewl-hero__inner {
  position: relative;
  z-index: 1;
}

.ewl-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--es-accent);
  font: 600 11px/1 var(--es-sans);
  letter-spacing: .16em;
  text-transform: uppercase;
}

.ewl-eyebrow__dot {
  width: 9px;
  height: 12px;
  border-radius: 999px 999px 0 0;
  background: var(--es-accent);
}

.ewl-hero__title {
  max-width: 20ch;
  margin: 18px 0 0;
  color: var(--es-text-on-dark);
  font: 500 clamp(32px, 4.6vw, 56px)/1.1 var(--es-serif);
  letter-spacing: -.015em;
  text-wrap: balance;
}

.ewl-hero__lead {
  max-width: 62ch;
  margin: 18px 0 0;
  color: var(--es-muted-on-dark);
  font: 400 clamp(15px, 1.25vw, 17px)/1.68 var(--es-sans);
}

.ewl-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  margin-top: 26px;
  color: var(--es-muted-on-dark);
  font: 600 11px/1.5 var(--es-sans);
  letter-spacing: .09em;
  text-transform: uppercase;
}

.ewl-hero__meta>span {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}

.ewl-hero__meta strong {
  color: var(--es-text-on-dark);
  font-weight: 600;
}

.ewl-pip {
  width: 6px;
  height: 6px;
  background: var(--es-accent);
  transform: rotate(45deg);
}

/* ---------- the contents rail ---------- */
.ewl-toc {
  grid-area: toc;
  align-self: start;
  padding: 20px 18px 18px;
  background: #fff;
  border: 1px solid var(--es-hairline);
  border-radius: 20px 20px 6px 6px;
}

@media (min-width: 1025px) {
  .ewl-toc {
    position: sticky;
    top: 112px;
  }
}

.ewl-toc__h {
  margin: 0 0 12px;
  padding-bottom: 10px;
  color: var(--es-ink);
  font: 600 10.5px/1 var(--es-sans);
  letter-spacing: .14em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--es-hairline);
  background: linear-gradient(90deg, var(--es-accent) 0 34px, transparent 34px) left bottom / 100% 2px no-repeat;
}

.ewl-toc__list {
  counter-reset: ewl-toc;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ewl-toc__list li {
  counter-increment: ewl-toc;
  margin: 0;
}

.ewl-toc__list a {
  display: flex;
  gap: 9px;
  padding: 7px 0;
  color: var(--es-ink-soft);
  font: 400 13.5px/1.4 var(--es-sans);
  text-decoration: none;
  transition: color .18s var(--es-ease);
}

.ewl-toc__list a::before {
  content: counter(ewl-toc, decimal-leading-zero);
  flex: 0 0 auto;
  color: var(--es-accent-deep);
  font: 600 10.5px/1.7 var(--es-sans);
  opacity: .75;
}

.ewl-toc__list a:hover,
.ewl-toc__list a:focus-visible {
  color: var(--es-accent-deep);
}

/* below the fold-down the rail is a wrapping row of pills: a vertical
   list of twelve costs half a screen before the policy even starts */
@media (max-width: 1024px) {
  .ewl-toc__list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  .ewl-toc__list a {
    padding: 7px 13px;
    background: var(--es-paper);
    border: 1px solid var(--es-hairline);
    border-radius: 999px 999px 5px 5px;
    font-size: 12.5px;
  }

  .ewl-toc__list a::before {
    line-height: 1.45;
  }
}

/* ---------- the main column ---------- */
.ewl-main {
  grid-area: main;
  min-width: 0;
}

.ewl-main p {
  max-width: 72ch;
  margin: 0 0 1.05em;
  color: var(--es-ink-soft);
  font: 400 16px/1.72 var(--es-sans);
}

.ewl-main p:last-child {
  margin-bottom: 0;
}

.ewl-main a {
  color: var(--es-accent-deep);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.ewl-main a:hover {
  text-decoration-thickness: 2px;
}

/* ---------- the "in short" note ---------- */
.ewl-note {
  margin: 0 0 clamp(18px, 2.2vw, 26px);
  padding: 22px 24px;
  background: #fff;
  border: 1px solid var(--es-hairline);
  border-left: 3px solid var(--es-accent);
  border-radius: 4px 18px 18px 4px;
}

.ewl-note__label,
.ewl-callout__label,
.ewl-related__k {
  display: block;
  margin-bottom: 9px;
  color: var(--es-accent-deep);
  font: 600 10.5px/1 var(--es-sans);
  letter-spacing: .14em;
  text-transform: uppercase;
}

.ewl-note p {
  margin: 0;
  color: var(--es-ink);
}

/* ---------- sections: the section is the card ---------- */
.ewl-section {
  margin: 0 0 clamp(18px, 2.2vw, 26px);
  padding: clamp(24px, 3vw, 38px) clamp(20px, 2.6vw, 34px);
  background: #fff;
  border: 1px solid var(--es-hairline);
  border-radius: 24px 24px 8px 8px;
  scroll-margin-top: 104px;
}

.ewl-section__title {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin: 0 0 18px;
  padding-bottom: 12px;
  color: var(--es-ink);
  font: 500 clamp(20px, 2.1vw, 27px)/1.24 var(--es-serif);
  text-wrap: balance;
  border-bottom: 1px solid var(--es-hairline);
  background: linear-gradient(90deg, var(--es-accent) 0 48px, transparent 48px) left bottom / 100% 2px no-repeat;
}

.ewl-section__num {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 30px;
  height: 34px;
  margin-top: 1px;
  color: var(--es-accent-deep);
  font: 600 13px/1 var(--es-sans);
  background: rgba(224, 165, 59, .1);
  border: 1px solid rgba(224, 165, 59, .4);
  border-radius: 999px 999px 5px 5px;
}

.ewl-section h3 {
  position: relative;
  margin: 1.7em 0 .6em;
  padding-left: 19px;
  color: var(--es-ink);
  font: 500 clamp(16px, 1.5vw, 18.5px)/1.35 var(--es-serif);
}

.ewl-section h3::before {
  content: "";
  position: absolute;
  left: 0;
  top: .52em;
  width: 8px;
  height: 8px;
  background: var(--es-accent);
  border-radius: 1px;
  transform: rotate(45deg);
}

/* ---------- lists ---------- */
.ewl-list {
  max-width: 72ch;
  margin: 0 0 1.05em;
  padding: 0;
  list-style: none;
}

.ewl-list>li {
  position: relative;
  margin: 0 0 12px;
  padding-left: 24px;
  color: var(--es-ink-soft);
  font: 400 15.5px/1.7 var(--es-sans);
}

.ewl-list>li:last-child {
  margin-bottom: 0;
}

.ewl-list>li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: .62em;
  width: 7px;
  height: 9px;
  background: var(--es-accent);
  border-radius: 999px 999px 0 0;
  opacity: .9;
}

.ewl-list>li strong {
  color: var(--es-ink);
  font-weight: 600;
}

/* the rights list earns a tick rather than a keystone */
.ewl-list--check>li::before {
  content: "";
  left: 1px;
  top: .5em;
  width: 11px;
  height: 6px;
  background: none;
  border: 0;
  border-left: 2px solid var(--es-accent-deep);
  border-bottom: 2px solid var(--es-accent-deep);
  border-radius: 0;
  transform: rotate(-45deg);
}

/* ---------- the definition list ---------- */
.ewl-defs {
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--es-hairline);
}

.ewl-defs>div {
  display: grid;
  grid-template-columns: minmax(150px, 34%) minmax(0, 1fr);
  gap: 4px 20px;
  padding: 11px 0;
  border-bottom: 1px solid var(--es-hairline);
}

.ewl-defs dt {
  margin: 0;
  color: var(--es-ink-soft);
  font: 600 11px/1.5 var(--es-sans);
  letter-spacing: .07em;
  text-transform: uppercase;
}

.ewl-defs dd {
  margin: 0;
  color: var(--es-ink);
  font: 400 15px/1.55 var(--es-sans);
}

/* ---------- the cookie table ---------- */
.ewl-tablewrap {
  margin: 0 0 1.05em;
  overflow-x: auto;
  border: 1px solid var(--es-hairline);
  border-radius: 14px 14px 5px 5px;
}

.ewl-table {
  width: 100%;
  border-collapse: collapse;
  font: 400 14.5px/1.6 var(--es-sans);
}

.ewl-table th {
  padding: 12px 14px;
  color: var(--es-text-on-dark);
  font: 600 10.5px/1.4 var(--es-sans);
  letter-spacing: .1em;
  text-transform: uppercase;
  text-align: left;
  white-space: nowrap;
  background: var(--es-canvas);
}

.ewl-table td {
  padding: 12px 14px;
  color: var(--es-ink-soft);
  border-top: 1px solid var(--es-hairline);
  vertical-align: top;
}

.ewl-table tbody tr:nth-child(even) td {
  background: var(--es-paper);
}

.ewl-table code {
  color: var(--es-ink);
  font: 500 13px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  word-break: break-word;
}

.ewl-tag {
  display: inline-block;
  padding: 4px 10px;
  font: 600 10px/1.3 var(--es-sans);
  letter-spacing: .09em;
  text-transform: uppercase;
  white-space: nowrap;
  border-radius: 999px 999px 4px 4px;
  border: 1px solid;
}

.ewl-tag--need {
  color: #0E5B50;
  background: rgba(21, 117, 103, .1);
  border-color: rgba(21, 117, 103, .35);
}

.ewl-tag--func {
  color: var(--es-accent-deep);
  background: rgba(224, 165, 59, .12);
  border-color: rgba(224, 165, 59, .42);
}

.ewl-tag--data {
  color: #1D3F62;
  background: rgba(19, 49, 79, .08);
  border-color: rgba(19, 49, 79, .3);
}

/* ---------- the callout ---------- */
.ewl-callout {
  margin-top: 22px;
  padding: 20px 22px;
  background: var(--es-canvas);
  border-radius: 18px 18px 5px 5px;
}

.ewl-callout .ewl-callout__label {
  color: var(--es-accent);
}

.ewl-callout p {
  margin: 0;
  color: rgba(242, 239, 233, .86);
  font-size: 15px;
}

.ewl-callout a {
  color: var(--es-accent);
}

/* ---------- related policies ---------- */
.ewl-related {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
  margin: clamp(30px, 4vw, 46px) 0 0;
}

/* Anything WordPress drops between the two cards, most often an empty
   paragraph, becomes a grid item and takes a whole cell, which pushes the
   second card onto its own row. Only cards are allowed to hold a cell:
   display:none removes an element from the grid entirely. */
.ewl-related> :not(.ewl-related__card) {
  display: none;
}

.ewl-main .ewl-related__card,
.ewl-main .ewl-top a {
  color: inherit;
  text-decoration: none;
}

.ewl-related__card {
  display: block;
  padding: 20px 22px;
  background: #fff;
  border: 1px solid var(--es-hairline);
  border-radius: 20px 20px 6px 6px;
  text-decoration: none;
  transition: border-color .2s var(--es-ease), transform .2s var(--es-ease);
}

.ewl-related__card:hover {
  border-color: rgba(224, 165, 59, .6);
  transform: translateY(-2px);
}

.ewl-related__t {
  display: block;
  color: var(--es-ink);
  font: 500 19px/1.25 var(--es-serif);
}

.ewl-related__card:hover .ewl-related__t {
  color: var(--es-accent-deep);
}

/* ---------- back to top ---------- */
.ewl-top {
  margin: clamp(24px, 3vw, 34px) 0 0;
  text-align: right;
}

.ewl-top a {
  color: var(--es-ink-soft);
  font: 600 11px/1 var(--es-sans);
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
}

.ewl-top a::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 10px;
  margin-right: 9px;
  vertical-align: -1px;
  background: var(--es-accent);
  border-radius: 999px 999px 0 0;
}

.ewl-top a:hover {
  color: var(--es-accent-deep);
}

/* ---------- responsive ---------- */
@media (max-width: 640px) {
  .ewl-hero__title {
    max-width: none;
  }

  .ewl-hero__meta {
    gap: 8px 18px;
    font-size: 10.5px;
  }

  .ewl-section__title {
    gap: 11px;
  }

  .ewl-section__num {
    width: 26px;
    height: 30px;
    font-size: 12px;
  }

  .ewl-main p,
  .ewl-list>li {
    font-size: 15.5px;
  }

  .ewl-defs>div {
    grid-template-columns: minmax(0, 1fr);
    gap: 3px;
  }

  .ewl-top {
    text-align: left;
  }

  /* the cookie table stacks into one card per cookie: four columns of
     prose in 320px is unreadable, and a scroll box hides the purpose */
  .ewl-tablewrap {
    overflow: visible;
    border: 0;
    border-radius: 0;
  }

  .ewl-table,
  .ewl-table tbody,
  .ewl-table tr,
  .ewl-table td {
    display: block;
    width: 100%;
  }

  .ewl-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .ewl-table tr {
    margin-bottom: 12px;
    padding: 4px 14px 10px;
    border: 1px solid var(--es-hairline);
    border-radius: 14px 14px 5px 5px;
  }

  .ewl-table tbody tr:nth-child(even) td {
    background: none;
  }

  .ewl-table td {
    padding: 8px 0;
    border-top: 0;
    border-bottom: 1px solid var(--es-hairline);
  }

  .ewl-table td:last-child {
    border-bottom: 0;
  }

  .ewl-table td::before {
    content: attr(data-th);
    display: block;
    margin-bottom: 3px;
    color: var(--es-ink-soft);
    font: 600 9.5px/1.4 var(--es-sans);
    letter-spacing: .1em;
    text-transform: uppercase;
    opacity: .75;
  }
}

@media (max-width: 400px) {
  .ewl-section {
    padding: 20px 16px;
    border-radius: 18px 18px 6px 6px;
  }

  .ewl-note {
    padding: 18px 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ewl-related__card {
    transition: none;
  }

  .ewl-related__card:hover {
    transform: none;
  }
}

/* ---------- print ---------- */
@media print {
  #ew-legal {
    display: block;
    width: auto;
    max-width: none;
    margin: 0;
    padding: 0;
    background: none;
  }

  .ewl-hero {
    margin: 0;
    padding: 0 0 18px;
    background: none;
    color: #000;
  }

  .ewl-hero::before,
  .ewl-hero::after,
  .ewl-toc,
  .ewl-related,
  .ewl-top {
    display: none !important;
  }

  .ewl-hero__title,
  .ewl-hero__lead,
  .ewl-hero__meta,
  .ewl-hero__meta strong {
    color: #000;
  }

  .ewl-section {
    break-inside: avoid;
    margin-bottom: 14px;
    padding: 0 0 10px;
    background: none;
    border: 0;
    border-bottom: 1px solid #ccc;
    border-radius: 0;
  }

  .ewl-note,
  .ewl-callout {
    padding: 0 0 10px;
    background: none;
    border: 0;
    border-bottom: 1px solid #ccc;
    border-radius: 0;
  }

  .ewl-callout p,
  .ewl-callout a {
    color: #000;
  }

  .ewl-table th {
    color: #000;
    background: none;
    border-bottom: 1px solid #999;
  }

  .ewl-main p,
  .ewl-list>li,
  .ewl-table td {
    color: #000;
    font-size: 11pt;
  }
}

/* ============================================================
   40. MULTI-EXPERT SELECTION — shortlist + tray + handoff (10 Aug)

   Up to five practitioners in one enquiry. Three surfaces:
   - the card: an "Add to enquiry" toggle above the contact pill.
     expert.php ships the button with the [hidden] ATTRIBUTE and
     the JS removes it when the selection boots, so old CSS or old
     JS can never show a dead control. The html:not(.js) rule here
     is belt-and-braces only.
   - the tray: a fixed bar on the body (a transformed ancestor
     would break position:fixed), below the apply modal (z 90).
     Its measured height lands in --ewd-tray-h so the page's last
     line is never covered.
   - /contact/: the numbered verification banner (ol) extends the
     section-34 single-expert box, plus the carrier-field hiding
     for the class-addressed fields (.es-carrier-*). Slugs drift
     when fields are recreated; classes do not.
   ============================================================ */

/* --- card: actions + select toggle --- */

.ewd-card__actions {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.ewd-card__actions .ewd-card__contact {
  margin-top: 0;
  text-align: center;
}

/* ---- the shortlist meter, on the card ----
   The same number on every card, because it counts the shortlist rather
   than this practitioner. It sits directly above the button that changes
   it, and it is quiet until there is something in it: a card carries a
   name and a specialty first, and a counter that shouted would compete
   with them fifteen times over. */
.ewd-card__meter {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 1px;
  padding-bottom: 9px;
  border-bottom: 1px solid var(--es-hairline);
}

.ewd-card__meter-n {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  padding: 3px 8px;
  border: 1px solid var(--es-hairline);
  border-radius: 999px;
  background: #fff;
  color: var(--es-ink-soft);
  font: 600 11.5px/1 var(--es-sans);
  font-variant-numeric: tabular-nums;
  transition: background .18s var(--es-ease), color .18s var(--es-ease),
              border-color .18s var(--es-ease);
}

.ewd-card__meter-n.is-on {
  color: var(--es-accent-ink);
  background: var(--es-accent);
  border-color: var(--es-accent-deep);
}

.ewd-card__meter-n.is-full {
  box-shadow: 0 0 0 3px rgba(224, 165, 59, .22);
}

.ewd-card__meter-t {
  color: var(--es-ink-soft);
  font: 400 11.5px/1.35 var(--es-sans);
}

@media (prefers-reduced-motion: reduce) {
  .ewd-card__meter-n {
    transition: none;
  }
}

.ewd-card__select {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 16px;
  font: 600 13.5px/1 var(--es-sans);
  color: var(--es-ink);
  background: #fff;
  border: 1.5px solid var(--es-hairline);
  border-radius: 999px;
  cursor: pointer;
  transition: border-color .18s, background .18s, color .18s;
}

.ewd-card__select[hidden],
html:not(.js) .ewd-card__select {
  display: none;
}

.ewd-card__select:hover {
  border-color: var(--es-accent-deep);
}

.ewd-card__select:focus-visible {
  outline: 2px solid var(--es-accent-deep);
  outline-offset: 2px;
  box-shadow: 0 0 0 5px rgba(11, 30, 51, .18);
}

.ewd-card__select .ewd-card__select-on {
  display: none;
}

.ewd-card__select[aria-pressed="true"] {
  background: rgba(224, 165, 59, .14);
  border-color: var(--es-accent-deep);
}

.ewd-card__select[aria-pressed="true"] .ewd-card__select-off {
  display: none;
}

.ewd-card__select[aria-pressed="true"] .ewd-card__select-on {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.ewd-card__select .ewd-card__select-on::before {
  content: "✓";
  font-weight: 700;
  color: var(--es-accent-deep);
}

/* at five, unselected toggles recede but stay readable and clickable:
   the press explains the limit instead of doing nothing */
.ewd--maxed .ewd-card__select[aria-pressed="false"] {
  color: var(--es-ink-soft);
  border-style: dashed;
  cursor: not-allowed;
}

.ewd--maxed .ewd-card__select[aria-pressed="false"]:hover {
  border-color: var(--es-hairline);
}

.ewd-card.is-selected {
  border-color: var(--es-accent-deep);
  box-shadow: 0 0 0 1px var(--es-accent-deep);
}

/* the ring must not eat the hover elevation */
.ewd-card.is-selected:hover {
  box-shadow: 0 0 0 1px var(--es-accent-deep), 0 14px 30px rgba(20, 30, 45, .09);
}

/* --- the tray --- */

.ewd-tray {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 80;
  background: var(--es-canvas);
  border-top: 2px solid var(--es-accent);
  box-shadow: 0 -10px 30px rgba(11, 30, 51, .25);
}

.ewd-tray[hidden] {
  display: none;
}

/* the open mobile-nav drawer owns the screen: the tray must never
   paint over its lower edge (the drawer lives inside the sticky
   header's stacking context and cannot out-stack a fixed body child) */
html:has(.es-drawer.is-open) .ewd-tray {
  display: none;
}

@media (prefers-reduced-motion: no-preference) {
  .ewd-tray {
    animation: ewdTrayIn .28s var(--es-ease);
  }
}

@keyframes ewdTrayIn {
  from {
    transform: translateY(12px);
    opacity: 0;
  }

  to {
    transform: none;
    opacity: 1;
  }
}

body.has-ewd-tray {
  padding-bottom: calc(var(--ewd-tray-h, 96px) + 14px);
}

.ewd-tray__bar {
  /* the cross anchors to THIS, not to the tray: on a wide screen the bar is
     centred inside a full-width tray, and a cross pinned to the tray would
     sit alone at the edge of the glass, far from the row it clears. */
  position: relative;
  /* wider than the page shell on purpose: this is a fixed overlay, not a
     column of prose, and the width buys a sixth chip its place on the line */
  max-width: min(1720px, 100%);
  margin: 0 auto;
  /* right padding clears the corner cross */
  padding: 12px 56px 12px 22px;
  padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 10px 14px;
}

.ewd-tray__count {
  margin: 0;
  color: var(--es-text-on-dark);
  font: 600 13.5px/1.3 var(--es-sans);
  white-space: nowrap;
}

.ewd-tray__toggle {
  display: none;
  font: 600 12.5px/1 var(--es-sans);
  color: var(--es-accent);
  background: none;
  border: 1px solid var(--es-hairline-dark);
  border-radius: 999px;
  padding: 7px 13px;
  cursor: pointer;
}

.ewd-tray__chips {
  display: flex;
  /* ONE line, always. Six chips cannot fit a phone at any truncation worth
     reading, so the row scrolls sideways instead of wrapping - the bar keeps
     its height, and --ewd-tray-h (which pads the body) stops moving as the
     count climbs. */
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(242, 239, 233, .3) transparent;
  align-items: center;
  gap: 8px;
  flex: 1 1 auto;
  min-width: 0;
  /* the scrollbar must not crowd the chips when it is present */
  padding-bottom: 2px;
  /* A clipped chip at a hard edge reads as a rendering fault; the same chip
     under a fade reads as "there is more". When the row does not overflow the
     fade falls on empty space and nothing is lost. */
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 26px), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 26px), transparent);
  /* keyboard focus must not land under the fade */
  scroll-padding-inline: 4px 30px;
}

.ewd-tray__chips::-webkit-scrollbar {
  height: 4px;
}

.ewd-tray__chips::-webkit-scrollbar-thumb {
  background: rgba(242, 239, 233, .3);
  border-radius: 999px;
}

.ewd-tray__chips > * {
  flex: 0 0 auto;
}

.ewd-tray__chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  max-width: 100%;
  padding: 6px 6px 6px 11px;
  background: var(--es-canvas-3);
  border: 1px solid var(--es-hairline-dark);
  border-radius: 999px;
}

.ewd-tray__chip-n {
  color: var(--es-accent);
  font: 700 11.5px/1 var(--es-sans);
}

.ewd-tray__chip-text {
  color: var(--es-text-on-dark);
  font: 500 12.5px/1.2 var(--es-sans);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  /* 26ch fitted three chips and wrapped at four. The full name and title
     are on the card and in the enquiry; here the chip only has to be
     recognisable, and the title attribute carries the rest. */
  max-width: 18ch;
}

@media (max-width: 1400px) {
  .ewd-tray__chip-text {
    max-width: 14ch;
  }
}

@media (max-width: 1100px) {
  .ewd-tray__chip-text {
    max-width: 11ch;
  }
}

/* 12px of ink, 30px of target: WCAG target-size without a bloated chip */
.ewd-tray__chip-x {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  margin: -6px 0;
  padding: 0;
  color: var(--es-muted-on-dark);
  background: none;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}

.ewd-tray__chip-x svg {
  width: 12px;
  height: 12px;
}

.ewd-tray__chip-x:hover,
.ewd-tray__chip-x:focus-visible {
  color: var(--es-accent);
  background: rgba(224, 165, 59, .14);
}

.ewd-tray__chip-x:focus-visible {
  outline: 2px solid var(--es-accent);
  outline-offset: 1px;
}

.ewd-tray__msg {
  flex: 1 1 100%;
  margin: 0;
  color: var(--es-accent);
  font: 500 13px/1.45 var(--es-sans);
}

.ewd-tray__msg[hidden] {
  display: none;
}

.ewd-tray__msg-act {
  margin-left: 10px;
  font: 700 12.5px/1 var(--es-sans);
  color: var(--es-canvas);
  background: var(--es-accent);
  border: 0;
  border-radius: 999px;
  padding: 6px 14px;
  cursor: pointer;
}

.ewd-tray__acts {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
}


.ewd-tray__cta {
  font: 600 14px/1 var(--es-sans);
  color: var(--es-accent-ink);
  background: var(--es-accent);
  border-radius: 999px;
  padding: 12px 20px;
  text-decoration: none;
  white-space: nowrap;
  transition: background .18s, transform .18s;
}

.ewd-tray__close {
  position: absolute;
  top: 8px;
  right: 12px;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  color: var(--es-muted-on-dark);
  background: none;
  border: 1px solid transparent;
  border-radius: 50%;
  cursor: pointer;
  transition: color .16s var(--es-ease), background .16s var(--es-ease),
              border-color .16s var(--es-ease);
}

.ewd-tray__close svg {
  width: 14px;
  height: 14px;
}

.ewd-tray__close:hover,
.ewd-tray__close:focus-visible {
  color: var(--es-canvas);
  background: var(--es-accent);
  border-color: var(--es-accent);
}

.ewd-tray__close:focus-visible {
  outline: 2px solid var(--es-accent);
  outline-offset: 2px;
}

.ewd-tray__close[hidden] {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .ewd-tray__close {
    transition: none;
  }
}

.ewd-tray__cta:hover,
.ewd-tray__cta:focus-visible {
  background: #EBB558;
  transform: translateY(-1px);
}

.ewd-tray__cta[hidden] {
  display: none;
}

.ewd-tray__cta:focus-visible,
.ewd-tray__toggle:focus-visible,
.ewd-tray__close:focus-visible,
.ewd-tray__msg-act:focus-visible {
  outline: 2px solid var(--es-accent);
  outline-offset: 2px;
}

@media (max-width: 720px) {
  .ewd-tray__bar {
    /* right padding still clears the corner cross */
    padding: 10px 52px 10px 16px;
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  }

  /* Here the chips are a DRAWER, not a row: "View" opens them onto a second
     line on purpose, and flex-basis:100% can only do that if the bar is
     allowed to wrap. The no-wrap rule above is for the desktop bar, where
     the whole point is that six chips stay on one line. */
  .ewd-tray.is-open .ewd-tray__bar {
    flex-wrap: wrap;
  }

  .ewd-tray__toggle {
    display: inline-flex;
  }

  .ewd-tray__chips {
    display: none;
  }

  .ewd-tray.is-open .ewd-tray__chips {
    display: flex;
    flex-basis: 100%;
  }

  .ewd-tray__acts {
    margin-left: auto;
  }

  .ewd-tray__cta {
    padding: 11px 16px;
    font-size: 13.5px;
  }
}

/* --- the chooser: one click, one honest question --- */

/* ---- the chooser ----
   Shown when a card's enquiry button would silently drop a live shortlist.
   It asks one question and offers exactly the two answers that exist, so
   it is sized and spaced like a decision, not like a page. */

.ewd-choose {
  position: fixed;
  inset: 0;
  z-index: 95;
  display: grid;
  place-items: center;
  padding: 20px;
}

.ewd-choose__overlay {
  position: absolute;
  inset: 0;
  background: rgba(11, 30, 51, .62);
  backdrop-filter: blur(3px);
  animation: ewdChooseFade .16s var(--es-ease) both;
}

.ewd-choose__box {
  position: relative;
  width: min(440px, 100%);
  background: #fff;
  border-radius: 16px;
  /* the gold edge sits on the left, not the top: the eye enters this box
     at the question, and a rule above the first line is read as a lid */
  border-left: 3px solid var(--es-accent);
  padding: 26px 26px 18px;
  box-shadow: 0 28px 70px rgba(11, 30, 51, .38);
  display: flex;
  flex-direction: column;
  gap: 9px;
  animation: ewdChooseIn .2s var(--es-ease) both;
}

.ewd-choose__q {
  margin: 0 0 10px;
  color: var(--es-ink);
  font: 500 17.5px/1.4 var(--es-serif);
  text-wrap: balance;
}

.ewd-choose__act {
  font: 600 14px/1.2 var(--es-sans);
  color: var(--es-ink);
  background: #fff;
  border: 1.5px solid var(--es-hairline);
  border-radius: 999px;
  padding: 13px 18px;
  cursor: pointer;
  text-align: center;
  transition: border-color .16s var(--es-ease), background .16s var(--es-ease),
              transform .16s var(--es-ease);
}

.ewd-choose__act:hover {
  border-color: var(--es-accent-deep);
  background: var(--es-paper);
  transform: translateY(-1px);
}

.ewd-choose__act--primary {
  color: var(--es-accent-ink);
  background: var(--es-accent);
  border-color: var(--es-accent);
}

.ewd-choose__act--primary:hover {
  background: var(--es-accent-deep);
  border-color: var(--es-accent-deep);
}

/* Cancel is a third exit, not a third choice: it keeps its distance with a
   hairline above it and never competes with the two pills. */
.ewd-choose__cancel {
  align-self: stretch;
  margin-top: 6px;
  padding: 11px 12px 3px;
  border: 0;
  border-top: 1px solid var(--es-hairline);
  background: none;
  color: var(--es-ink-soft);
  font: 500 13px/1 var(--es-sans);
  cursor: pointer;
  text-decoration: none;
  transition: color .16s var(--es-ease);
}

.ewd-choose__cancel:hover {
  color: var(--es-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

@keyframes ewdChooseIn {
  from { opacity: 0; transform: translateY(8px) scale(.985); }
  to   { opacity: 1; transform: none; }
}

@keyframes ewdChooseFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {

  .ewd-choose__box,
  .ewd-choose__overlay {
    animation: none;
  }

  .ewd-choose__act,
  .ewd-choose__cancel {
    transition: none;
  }

  .ewd-choose__act:hover {
    transform: none;
  }
}

.ewd-choose__act:focus-visible,
.ewd-choose__cancel:focus-visible {
  outline: 2px solid var(--es-accent-deep);
  outline-offset: 2px;
  box-shadow: 0 0 0 5px rgba(11, 30, 51, .18);
}

/* --- /contact/: the numbered banner list + offer box ---
   A receipt to glance at, not the page's content. Each expert is one
   ruled row: a gold numbered badge in the margin, a sans-semibold name
   (the directory cards' own name voice), the meta on its own quiet
   line, and the areas as ONE line of text with gold dots — the chip
   boxes read as noise at this size. Every <button> in here is pinned
   against the WordPress theme, which paints its own hover background
   on bare buttons (the section-21 lesson). */

.es-enquire__expert {
  position: relative;
  /* anchors the single-expert remove cross */
  padding: 15px 18px 13px;
  background: linear-gradient(180deg, rgba(224, 165, 59, .09), rgba(224, 165, 59, .03));
}

/* single-expert mode: the cross sits on the box itself, clear of the label */
.es-enquire__expert>.es-enquire__expert-x {
  top: 11px;
  right: 12px;
}

.es-enquire__expert-label {
  margin-bottom: 4px;
}

/* single-expert banner: same voice as the list rows */
.es-enquire__expert-name {
  font: 600 15.5px/1.35 var(--es-sans);
}

/* tags, both banners: a quiet line, not a box pile */
.es-enquire__expert .es-enquire__expert-tags {
  display: block;
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
}

.es-enquire__expert .es-enquire__expert-tags li {
  display: inline;
  padding: 0;
  border: 0;
  background: none;
  color: var(--es-ink-soft);
  font: 400 12px/1.7 var(--es-sans);
}

.es-enquire__expert .es-enquire__expert-tags li+li::before {
  content: "·";
  margin: 0 7px;
  color: var(--es-accent-deep);
  font-weight: 700;
}

/* the rows */
.es-enquire__expert-list {
  margin: 2px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: es-exp;
}

.es-enquire__expert-list>li {
  counter-increment: es-exp;
  position: relative;
  padding: 10px 36px 10px 32px;
  border-top: 1px solid rgba(20, 32, 50, .09);
}

.es-enquire__expert-list>li:first-child {
  border-top: 0;
}

/* the numbered badge: the doorway, at badge scale */
.es-enquire__expert-list>li::before {
  content: counter(es-exp);
  position: absolute;
  left: 0;
  top: 11px;
  width: 21px;
  height: 21px;
  display: grid;
  place-items: center;
  color: var(--es-accent-ink);
  background: var(--es-accent);
  border-radius: 999px 999px 4px 4px;
  font: 700 10.5px/1 var(--es-sans);
}

.es-enquire__expert-liname {
  display: block;
  color: var(--es-ink);
  font: 600 14.5px/1.4 var(--es-sans);
}

.es-enquire__expert-liname,
.es-enquire__expert-name {
  font-family: var(--es-sans);
}

.es-enquire__expert-list .es-enquire__expert-meta {
  display: block;
  margin: 1px 0 0;
  color: var(--es-ink-soft);
  font: 400 12px/1.5 var(--es-sans);
}

/* one wrong pick is corrected here, not by abandoning the enquiry:
   12px of ink, 28px of target, top-right of its own row. Removal is a
   quiet warning, so the hover is the error red, not gold. */
.es-enquire__expert-x,
.es-enquire__expert-x:hover,
.es-enquire__expert-x:focus,
.es-enquire__expert-x:active {
  border: 0 !important;
  box-shadow: none !important;
  -webkit-appearance: none;
  appearance: none;
}

.es-enquire__expert-x {
  position: absolute;
  top: 8px;
  right: 0;
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0 !important;
  color: var(--es-ink-soft);
  background: none !important;
  border-radius: 50% !important;
  cursor: pointer;
  transition: color .15s var(--es-ease), background-color .15s var(--es-ease);
}

.es-enquire__expert-x svg {
  width: 12px;
  height: 12px;
}

.es-enquire__expert-x:hover,
.es-enquire__expert-x:focus-visible {
  color: #B3261E !important;
  background: rgba(179, 38, 30, .08) !important;
}

.es-enquire__expert-x:focus {
  outline: none;
}

.es-enquire__expert-x:focus-visible {
  outline: 2px solid #B3261E !important;
  outline-offset: 1px;
}

/* remove-all: a quiet textlink with the house gold sweep — and pinned
   flat first, so the theme's blue button hover never surfaces */
.es-enquire__expert-remove,
.es-enquire__expert-remove:hover,
.es-enquire__expert-remove:focus,
.es-enquire__expert-remove:focus-visible,
.es-enquire__expert-remove:active {
  background: none !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  text-shadow: none !important;
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
}

.es-enquire__expert-remove {
  position: relative;
  display: inline-block;
  margin-top: 12px;
  padding: 5px 0 !important;
  color: var(--es-ink-soft) !important;
  font: 600 11px/1 var(--es-sans);
  letter-spacing: .04em;
  cursor: pointer;
  text-decoration: none !important;
}

.es-enquire__expert-remove::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 1px;
  height: 1px;
  background: currentColor;
  opacity: .35;
}

.es-enquire__expert-remove::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 1px;
  height: 2px;
  width: 0;
  background: var(--es-accent-deep);
  transition: width .3s var(--es-ease);
  z-index: 1;
}

.es-enquire__expert-remove:hover,
.es-enquire__expert-remove:focus-visible {
  color: var(--es-ink) !important;
}

.es-enquire__expert-remove:hover::before,
.es-enquire__expert-remove:focus-visible::before {
  width: 100%;
}

.es-enquire__expert-remove:focus {
  outline: none;
}

.es-enquire__expert-remove:focus-visible {
  outline: 2px solid var(--es-accent) !important;
  outline-offset: 3px;
  border-radius: 3px;
}

/* --- the offer box (shortlist waiting in the directory) --- */

.es-enquire__offer {
  margin: 0 0 26px;
  padding: 15px 18px;
  background: var(--es-paper);
  border: 1px solid var(--es-hairline);
  border-left: 3px solid var(--es-accent);
  border-radius: 4px 10px 10px 4px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 14px;
}

.es-enquire__offer p {
  margin: 0;
  color: var(--es-ink);
  font: 500 14px/1.45 var(--es-sans);
}

/* both offer buttons pinned against the theme, same as above */
.es-enquire__offer-act,
.es-enquire__offer-act:hover,
.es-enquire__offer-act:focus,
.es-enquire__offer-act:active {
  border: 0 !important;
  box-shadow: none !important;
  -webkit-appearance: none;
  appearance: none;
}

.es-enquire__offer-act {
  font: 600 13px/1 var(--es-sans);
  color: var(--es-accent-ink) !important;
  background: var(--es-accent) !important;
  border-radius: 999px 999px 8px 8px !important;
  padding: 11px 17px !important;
  cursor: pointer;
  transition: background-color .18s var(--es-ease), transform .18s var(--es-ease);
}

.es-enquire__offer-act:hover,
.es-enquire__offer-act:focus-visible {
  background: var(--es-accent-deep) !important;
  transform: translateY(-1px);
}

.es-enquire__offer-dismiss,
.es-enquire__offer-dismiss:hover,
.es-enquire__offer-dismiss:focus,
.es-enquire__offer-dismiss:active {
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  -webkit-appearance: none;
  appearance: none;
}

.es-enquire__offer-dismiss {
  font: 500 12px/1 var(--es-sans);
  color: var(--es-ink-soft) !important;
  padding: 8px 4px !important;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.es-enquire__offer-dismiss:hover,
.es-enquire__offer-dismiss:focus-visible {
  color: var(--es-ink) !important;
}

/* --- the tray and chooser buttons get the same theme pinning: they are
   bare <button>s too, and the theme's hover paint is sitewide --- */

.ewd-tray__toggle,
.ewd-tray__close,
.ewd-tray__chip-x,
.ewd-tray__msg-act,
.ewd-choose__act,
.ewd-choose__cancel,
.ewd-card__select {
  -webkit-appearance: none;
  appearance: none;
  text-shadow: none !important;
  -webkit-tap-highlight-color: transparent;
}

.ewd-tray__close,
.ewd-tray__close:focus,
.ewd-tray__close:active {
  background: none !important;
  box-shadow: none !important;
}

/* colour pinned in every state. Leaving it out is what made the chooser's
   Cancel turn white-on-white under the theme's button:hover rule. */
.ewd-tray__close {
  color: var(--es-muted-on-dark) !important;
}

.ewd-tray__close:hover,
.ewd-tray__close:focus-visible {
  color: var(--es-canvas) !important;
  background: var(--es-accent) !important;
}

.ewd-tray__chip-x,
.ewd-tray__chip-x:focus,
.ewd-tray__chip-x:active {
  border: 0 !important;
  box-shadow: none !important;
}

.ewd-tray__chip-x {
  background: none !important;
}

.ewd-tray__chip-x:hover,
.ewd-tray__chip-x:focus-visible {
  background: rgba(224, 165, 59, .14) !important;
}

.ewd-tray__toggle,
.ewd-tray__toggle:hover,
.ewd-tray__toggle:focus,
.ewd-tray__toggle:active {
  background: none !important;
  box-shadow: none !important;
}

.ewd-tray__msg-act,
.ewd-tray__msg-act:hover,
.ewd-tray__msg-act:focus,
.ewd-tray__msg-act:active {
  border: 0 !important;
  box-shadow: none !important;
}

.ewd-tray__msg-act {
  background: var(--es-accent) !important;
  color: var(--es-canvas) !important;
}

.ewd-tray__msg-act:hover {
  background: #EBB558 !important;
}

.ewd-choose__act,
.ewd-choose__act:focus,
.ewd-choose__act:active {
  box-shadow: none !important;
}

.ewd-choose__act {
  background: #fff !important;
  color: var(--es-ink) !important;
}

.ewd-choose__act--primary {
  background: var(--es-accent) !important;
  color: var(--es-accent-ink) !important;
}

.ewd-choose__act--primary:hover {
  background: var(--es-accent-deep) !important;
}

.ewd-choose__cancel,
.ewd-choose__cancel:hover,
.ewd-choose__cancel:focus,
.ewd-choose__cancel:active {
  background: none !important;
  border: 0 !important;
  border-top: 1px solid var(--es-hairline) !important;
  box-shadow: none !important;
}

/* The theme paints its own colour onto a hovered button. Every other
   control in this dialog pins its colour against that; this one did not,
   so on hover the word "Cancel" turned white on white and read as having
   disappeared. */
.ewd-choose__cancel {
  color: var(--es-ink-soft) !important;
}

.ewd-choose__cancel:hover,
.ewd-choose__cancel:focus,
.ewd-choose__cancel:active {
  color: var(--es-ink) !important;
}

.ewd-card__select,
.ewd-card__select:focus,
.ewd-card__select:active {
  box-shadow: none !important;
}

.ewd-card__select {
  background: #fff !important;
  color: var(--es-ink) !important;
}

.ewd-card__select[aria-pressed="true"] {
  background: rgba(224, 165, 59, .14) !important;
}

.ewd-card__select:focus-visible {
  box-shadow: 0 0 0 5px rgba(11, 30, 51, .18) !important;
}

/* --- carrier fields addressed by CLASS (new ex1..ex5 + exn) ---
   Same deterministic invisibility as the section-34 name-addressed
   rules: JavaScript off means the fields simply submit empty.
   UNSCOPED on purpose, exactly like section 34: if the same form is
   ever rendered in a second host (a modal copy, a misassigned form
   id), six blank text boxes must not appear there. The class names
   are already unique to the carriers. JS filling stays scoped to the
   enquiry host, so data cannot bleed the other way. */

.forminator-ui .forminator-row:has(.es-carrier-ex1),
.forminator-ui .forminator-row:has(.es-carrier-ex2),
.forminator-ui .forminator-row:has(.es-carrier-ex3),
.forminator-ui .forminator-row:has(.es-carrier-ex4),
.forminator-ui .forminator-row:has(.es-carrier-ex5),
.forminator-ui .forminator-row:has(.es-carrier-ex6),
.forminator-ui .forminator-row:has(.es-carrier-search),
.forminator-ui .forminator-row:has(.es-carrier-area),
.forminator-ui .forminator-row:has(.es-carrier-exn) {
  display: none !important;
}

.forminator-ui .es-carrier-ex1,
.forminator-ui .es-carrier-ex2,
.forminator-ui .es-carrier-ex3,
.forminator-ui .es-carrier-ex4,
.forminator-ui .es-carrier-ex5,
.forminator-ui .es-carrier-ex6,
.forminator-ui .es-carrier-search,
.forminator-ui .es-carrier-area,
.forminator-ui .es-carrier-exn {
  display: none !important;
}

/* --- /contact/ card rules moved into section 25 (19 Aug) ---
   They lived down here because they were a late patch on top of the
   old enquiry block. The block was rebuilt, so they belong with it;
   left here they would have overridden the rebuild from below. */


/* ============================================================
   THE MOUSE-FOCUS GAP  (20 Aug)

   Every button below is a bare <button>, and this theme paints bare
   buttons white on :focus. The site pinned :hover and :focus-visible and
   stopped there - but a MOUSE click leaves :focus WITHOUT :focus-visible,
   and in that state `button:focus` (0,1,1) outranks a plain class
   (0,1,0). The control turned white on a light panel and read as gone.

   It showed up on the contact banner because the code moves focus to the
   next cross after a removal, so the state is entered without anybody
   pressing a key. The others are the same shape, unreported only because
   nothing focuses them programmatically yet.

   !important beats a more specific rule that lacks it, which is the whole
   mechanism here.

   :focus:not(:focus-visible) rather than :focus, and the difference
   matters: a plain :focus pin also covers the keyboard case, and since
   this block sits later in the file it would outrank the red
   focus-visible rule and take the keyboard state's colour away. Written
   this way the two never overlap - one owns mouse focus, the other owns
   keyboard focus.
   ============================================================ */

.es-enquire__expert-x,
.es-enquire__expert-x:focus:not(:focus-visible) {
  color: var(--es-ink-soft) !important;
}

.ewd-tray__chip-x,
.ewd-tray__chip-x:focus:not(:focus-visible),
.ewd-tray__close,
.ewd-tray__close:focus:not(:focus-visible) {
  color: var(--es-muted-on-dark) !important;
}

.ewd-tray__toggle,
.ewd-tray__toggle:focus:not(:focus-visible) {
  color: var(--es-accent) !important;
}

.ewd__chip-x,
.ewd__chip-x:focus:not(:focus-visible) {
  color: var(--es-ink-soft) !important;
}

.ewd-modal__close,
.ewd-modal__close:focus:not(:focus-visible) {
  color: var(--es-ink-soft) !important;
}


/* --- print: the shortlist is on-screen furniture, never on paper --- */

@media print {

  .ewd-tray,
  .ewd-choose,
  .ewd-card__select {
    display: none !important;
  }

  /* the hidden tray must not leave its padding behind on paper */
  body.has-ewd-tray {
    padding-bottom: 0 !important;
  }
}

/* ============================================================
   41. CLOSING-BAND SUPPORTING LINE (11 Aug)

   The About page's closing band gained one sentence of coverage
   copy under its heading (client content update). Without this
   rule the paragraph still renders acceptably — centred cream on
   navy from the band's own inheritance — this only quietens it to
   the strip's voice and removes the base 1em bottom margin, which
   would otherwise stack on the band's grid gap.
   ============================================================ */

.es-close__sub {
  margin: 0;
  max-width: 58ch;
  color: var(--es-muted-on-dark);
  font: 400 16px/1.6 var(--es-sans);
  text-align: center;
}

/* ============================================================
   42. LOCATION FALLBACK — remote practitioners as a second group
   (11 Aug)

   A location search now returns two groups: practitioners who
   consult in that city, then remote-capable practitioners from
   anywhere else. Four fifths of the register's 9,246
   specialty/city combinations have no local practitioner, and an
   empty page was never the honest answer — someone can take the
   instruction, just not in person.

   Everything here exists to keep that distinction impossible to
   miss. The divider names each group, and every card in the
   second group says where its practitioner actually is. A card
   must never read as local when it is not.
   ============================================================ */

/* --- the group divider --- */

.ewd__group {
  grid-column: 1 / -1;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin: 6px 0 2px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--es-hairline);
  position: relative;
}

/* the first group opens flush; the second earns air above it */
.ewd__group--remote {
  margin-top: 26px;
}

/* the gold segment every section head on this site opens with */
.ewd__group::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 48px;
  height: 2px;
  background: var(--es-accent);
}

.ewd__group-title {
  margin: 0;
  color: var(--es-ink);
  font: 600 12px/1.3 var(--es-sans);
  letter-spacing: .09em;
  text-transform: uppercase;
}

.ewd__group-note {
  margin: 0;
  color: var(--es-ink-soft);
  font: 400 13.5px/1.5 var(--es-sans);
}

/* --- the remote card --- */

/* Deliberately quiet: these are not lesser listings, they are listings
   with one fact attached. A dashed border or a grey wash would read as
   "second best" when the practitioner may be the right one for the case. */
.ewd-card--remote {
  border-left: 3px solid rgba(224, 165, 59, .55);
}

.ewd-card__remote {
  display: inline-flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0 5px;
  margin: -8px 0 12px;
  padding: 5px 11px;
  color: var(--es-accent-deep);
  font: 600 11.5px/1.35 var(--es-sans);
  background: rgba(224, 165, 59, .1);
  border-radius: 999px 999px 5px 5px;
}

.ewd-card__remote span {
  color: var(--es-ink-soft);
  font-weight: 400;
}

/* DOM-fallback mode has no payload to rebuild the card from, so the badge
   is printed from the attribute the card already carries. Screen readers
   announce generated content unevenly, which is why the payload path puts
   the same words in real markup instead. */
.ewd__grid:not([data-ewd-payload]) .ewd-card--remote::before {
  content: "Remote assessment · based in " attr(data-region);
  display: inline-block;
  align-self: flex-start;
  margin: 0 0 12px;
  padding: 5px 11px;
  color: var(--es-accent-deep);
  font: 600 11.5px/1.35 var(--es-sans);
  text-transform: capitalize;
  background: rgba(224, 165, 59, .1);
  border-radius: 999px 999px 5px 5px;
}

/* --- the count line --- */

.ewd__meta-remote {
  margin: 4px 0 0;
  color: var(--es-accent-deep);
  font: 500 13.5px/1.5 var(--es-sans);
}

.ewd__meta-remote[hidden] {
  display: none;
}

@media (max-width: 620px) {
  .ewd__group {
    gap: 2px;
  }

  .ewd__group--remote {
    margin-top: 18px;
  }
}

/* print: the grouping is the point, so it survives — but the tray and the
   selection controls do not (section 40) */
@media print {
  .ewd__group {
    break-after: avoid;
  }

  .ewd-card--remote {
    border-left: 3px solid #999;
  }
}

/* ============================================================
   43. CARRIED FROM THE CHAT (11 Aug)

   The Expert Finder widget sends the solicitor to /contact/ with
   what it understood. This is the receipt for that: quieter than
   the expert banner above it, because a search term is weaker
   information than a named practitioner, and the two must never
   look like the same statement.
   ============================================================ */

.es-enquire__fromchat {
  margin: 0 0 24px;
  padding: 13px 16px 12px;
  background: var(--es-paper);
  border: 1px solid var(--es-hairline);
  border-left: 3px solid rgba(224, 165, 59, .55);
  border-radius: 4px 10px 10px 4px;
}

.es-enquire__fromchat-label {
  margin: 0 0 7px;
  color: var(--es-ink-soft);
  font: 600 10px/1 var(--es-sans);
  letter-spacing: .1em;
  text-transform: uppercase;
}

.es-enquire__fromchat-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.es-enquire__fromchat-list li {
  padding: 5px 11px;
  color: var(--es-ink);
  font: 500 12px/1.3 var(--es-sans);
  background: #fff;
  border: 1px solid var(--es-hairline);
  border-radius: 999px;
}

@media print {
  .es-enquire__fromchat {
    display: none;
  }
}

/* ============================================================
   44. ENQUIRY SOURCE — the pre-filled subject line (12 Aug)

   Two Forminator fields, told apart by the class set on them in
   the field's own styling tab:

     .es-src-topic   visible, editable — what the enquiry is about
     .es-src-page    the machine carrier — which page it came from

   The visible one is deliberately NOT disguised as a system field.
   A solicitor who cannot tell that a box was filled in for them
   will either leave a wrong subject in place or distrust the form,
   and both cost more than the styling saves. So a pre-filled value
   is marked while it is still ours, and the marking disappears the
   moment they type — at which point it is their sentence.
   ============================================================ */

/* The carrier. display:none still submits — only `disabled` skips a
   field — so this reaches the office while never reaching the eye.
   It must not be marked required, or Forminator will demand a value
   for a box nobody can see. */
.es-src-page {
  display: none !important;
}

.es-src-topic {
  position: relative;
}

/* Kadence and Forminator both paint inputs; this pins the field so
   the pre-filled state reads the same on every theme update. */
.es-src-topic input {
  transition: border-color .22s cubic-bezier(.22, .61, .36, 1),
    background-color .22s cubic-bezier(.22, .61, .36, 1),
    box-shadow .22s cubic-bezier(.22, .61, .36, 1);
}

.es-src-topic.is-prefilled input {
  background: linear-gradient(90deg, rgba(224, 165, 59, .09), rgba(224, 165, 59, 0) 62%);
  border-color: rgba(198, 138, 36, .5) !important;
  box-shadow: inset 3px 0 0 rgba(224, 165, 59, .85);
}

/* Focus must beat the pre-filled tint: the visitor is editing it, so
   it is already on its way to being theirs. */
.es-src-topic.is-prefilled input:focus {
  background: #fff;
  box-shadow: inset 3px 0 0 rgba(198, 138, 36, .95);
}

.es-src-note {
  display: flex;
  gap: 7px;
  margin: 7px 0 0;
  color: var(--es-ink-soft);
  font: 400 12px/1.5 var(--es-sans);
}

/* A small gold rule rather than an icon: the site has no icon
   language in its forms, and one note does not justify inventing
   one. */
.es-src-note::before {
  content: "";
  flex: none;
  width: 2px;
  margin: 2px 0;
  background: rgba(224, 165, 59, .75);
  border-radius: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .es-src-topic input {
    transition: none;
  }
}

@media print {
  .es-src-note {
    display: none;
  }
}

/* ============================================================
   45. FACETED DIRECTORY (12 Aug)

   The visual layer over the bidirectional filter engine: counts
   inside options, L2 group headings inside the specialism list,
   the narrowed-by note at the top of an open list, the chips row's
   "Filtered by" label, and the no-results help. Everything rides
   the existing filter-console look (§18) — this section only adds
   what faceting needs to SAY, not a new style of saying it.
   ============================================================ */

/* the count beside an option: quiet, never part of the label */
.ewd-combo__count {
  margin-left: auto;
  padding-left: 12px;
  color: var(--es-ink-soft);
  font: 500 11px/1 var(--es-sans);
  letter-spacing: .02em;
  opacity: .75;
  flex: none;
}

.ewd-combo__option {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  text-align: left;
}

.ewd-combo__option.is-active .ewd-combo__count,
.ewd-combo__option:hover .ewd-combo__count {
  opacity: 1;
}

/* L2 group heading inside the specialism list: a label, not a row —
   visually a shelf the options sit on, never clickable */
.ewd-combo__group {
  position: sticky;
  top: 0;
  z-index: 1;
  margin: 6px 0 2px;
  padding: 7px 14px 6px;
  background: var(--es-paper);
  border-top: 1px solid var(--es-hairline);
  color: var(--es-ink-soft);
  font: 600 10px/1.2 var(--es-sans);
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: default;
  user-select: none;
}

.ewd-combo__list>.ewd-combo__group:first-of-type {
  border-top: 0;
  margin-top: 2px;
}

/* The "Narrowed by" banner was removed 13 Aug at the client's
   instruction. The state of the search is the page's job, and the page
   already does it once and well: the "Filtered by" chips under the
   console name every active filter and remove it in one click, and the
   count beside every option shows the narrowing live. A copy of that
   inside each popup was noise. */

/* chips row: the leading "Filtered by" label */
.ewd__chips-label {
  align-self: center;
  margin-right: 2px;
  color: var(--es-ink-soft);
  font: 600 10px/1 var(--es-sans);
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* ---------- no-results help ----------
   The empty state stops being a dead end: it names which single
   removal brings results back, with the count that removal returns. */

.ewd__empty-lead {
  margin: 0 0 6px;
  font: 500 15px/1.5 var(--es-sans);
  color: var(--es-ink);
}

.ewd__empty-sub {
  margin: 0 0 10px;
  font: 400 13px/1.5 var(--es-sans);
  color: var(--es-ink-soft);
}

.ewd__empty-acts {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin: 0 0 14px;
}

.ewd__empty-act,
.ewd__empty-act:hover,
.ewd__empty-act:focus {
  box-shadow: none !important;
  text-shadow: none !important;
}

.ewd__empty-act {
  display: inline-block;
  padding: 9px 16px !important;
  background: #fff !important;
  border: 1px solid var(--es-hairline) !important;
  border-radius: 999px !important;
  color: var(--es-ink) !important;
  font: 500 13px/1.3 var(--es-sans) !important;
  cursor: pointer;
  transition: border-color .15s ease, transform .15s ease;
}

.ewd__empty-act b {
  color: var(--es-gold-deep, #C68A24);
  font-weight: 600;
}

.ewd__empty-act:hover,
.ewd__empty-act:focus-visible {
  border-color: var(--es-gold-deep, #C68A24) !important;
  transform: translateY(-1px);
}

.ewd__empty-act--reset {
  background: var(--es-navy, #0B1E33) !important;
  border-color: var(--es-navy, #0B1E33) !important;
  color: #F2EFE9 !important;
}

@media (prefers-reduced-motion: reduce) {
  .ewd__empty-act {
    transition: none;
  }
}


/* ============================================================
   46. COMBO LIST INTERIOR v2 (12 Aug, night)

   The open dropdown's top edge was a patchwork: the list carried
   8px padding, the shelf heading carried its own margins and a
   border-top, and both of those areas are TRANSPARENT while the
   heading is position:sticky. Scrolled options slid through the
   gaps and showed as clipped text above the stuck heading - the
   broken top of the speciality list. The JS half of the fix
   resets scrollTop on every open (a display:none list keeps its
   old scroll position in Blink); this section removes every
   transparent gap a sticky element could let content bleed
   through.

   The layout contract from here on:
   - the LIST owns no padding; the breathing room lives on the
     options as margins, where nothing sticks
   - a sticky element (the shelf heading) is a full-width, solid,
     margin-free bar: there is no gap above or beside it to see
     through
   - the narrowed-by note is IN FLOW, not sticky - two sticky bars
     fighting for top:0 is how the note and the first heading
     overlapped
   - scroll-margin keeps keyboard-driven scrolling clear of the
     stuck heading
   ============================================================ */

/* the list keeps its chrome (radius, shadow, scrollbar) and loses its
   padding; !important because section 23 set the 8px the same way */
.ewd-combo__list {
  padding: 0 0 6px !important;
}

/* options carry the inset the list used to. Margins are safe here:
   options never stick, so the gutters only ever show the list's own
   white ground. */
/* One number, one source of truth. scroll-padding on the list and
   scroll-margin on the option are ADDITIVE - both were 46px, so
   scrollIntoView cleared 92px of space for a 31px heading and every
   arrow keypress threw the list two rows further than it needed to.
   The margin alone now covers the heading: 31px + the option's own 2px
   + the hairline. test.js uses the same figure when it seats a
   reopened list; if one changes the other must. */
.ewd-combo__list>.ewd-combo__option {
  width: calc(100% - 12px);
  margin: 2px 6px;
  scroll-margin-top: 34px;
  scroll-margin-bottom: 8px;
}

/* the reset row ("All specialities", "All locations"): the one option
   that is not a value. Quieter ink, a hairline under it, and the
   corner treatment says "header row", not "first result". */
.ewd-combo__list>.ewd-combo__option:first-of-type {
  margin: 6px 6px 8px;
  color: var(--es-ink-soft) !important;
  font-weight: 600;
  border-bottom: 1px solid var(--es-hairline) !important;
  border-radius: 8px 8px 3px 3px !important;
}

.ewd-combo__list>.ewd-combo__option:first-of-type[aria-selected="true"] {
  color: var(--es-text-on-dark) !important;
}

/* ---- the shelf heading: a solid, full-width, margin-free bar ----
   Solid and margin-free is the point: anything transparent around a
   stuck element becomes a window onto the options scrolling under it. */
.ewd-combo__group {
  position: sticky;
  top: 0;
  z-index: 3;
  margin: 0 !important;
  border-top: 0 !important;
  padding: 10px 14px 9px;
  background: #EDF1F6;
  box-shadow: 0 1px 0 var(--es-hairline);
  color: var(--es-ink-soft);
  font: 600 10px/1.2 var(--es-sans);
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* the keystone the site marks every section with, at shelf scale */
.ewd-combo__group::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 8px;
  margin-right: 8px;
  border-radius: 999px 999px 0 0;
  background: var(--es-accent);
  opacity: .85;
  vertical-align: -1px;
}

/* a heading that follows another heading (its whole section is one
   facet-hidden option away) still needs its own top hairline */
.ewd-combo__group+.ewd-combo__group {
  box-shadow: 0 1px 0 var(--es-hairline), 0 -1px 0 var(--es-hairline);
}

/* ---- the input's own chrome, complete ----
   The combo inputs are type="search", and WebKit prints its native ×
   cancel button in one the moment it holds text - which is the moment a
   choice has just been made. That × clears the TEXT but knows nothing
   of the FILTER, so pressing it left the input empty while the grid
   stayed narrowed: a control that looks like "remove this filter" and
   does half of it. The keyword field killed its copy back in §11; the
   combos never did. Filters are removed where removal actually works -
   the chips, the "All …" row, Reset. */
.ewd-combo input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
  display: none;
}

/* ---- entrance: the list arrives, it does not pop ---- */
@media (prefers-reduced-motion: no-preference) {
  .ewd-combo.is-open .ewd-combo__list {
    animation: ewd-list-in .16s var(--es-ease);
  }

  .ewd-combo.is-open.is-up .ewd-combo__list {
    animation-name: ewd-list-in-up;
  }
}

@keyframes ewd-list-in {
  from {
    opacity: 0;
    transform: translateY(-5px);
  }
}

@keyframes ewd-list-in-up {
  from {
    opacity: 0;
    transform: translateY(5px);
  }
}

/* the "no matches" line sits on the list's bare ground now that the
   list has no padding of its own */
.ewd-combo__empty {
  padding: 18px 14px !important;
}


/* ============================================================
   47. THE SELECTED ROW, AND THE KEYBOARD'S OWN HIGHLIGHT
   (13 Aug)

   This is the blank strip at the top of an open dropdown.

   Section 16 hardens the widget against the WordPress theme by pinning
   every option flat:

       .ewd-combo__option { background: transparent !important; }

   That was written when an option had one state. It now has three, and
   an !important declaration in section 16 outranks the plain rules that
   paint two of them, wherever they sit in the file:

     aria-selected="true"  section 20 paints navy with cream text. The
                           background was refused, the colour was not,
                           so the chosen row - which is "All
                           specialities", pinned to the top of every
                           list - rendered cream on white. Not a
                           highlight: a blank strip exactly where the
                           screenshot shows one.
     .is-active            the arrow-key highlight. Refused outright, so
                           keyboard navigation moved an invisible
                           cursor.

   Both are restored here at the same weight, and the keystone that
   marks a live row is lit with them. The hover treatment in section 18
   already carries its own !important and is untouched.
   ============================================================ */

.ewd-combo__option[aria-selected="true"] {
  background: var(--es-canvas) !important;
  color: var(--es-text-on-dark) !important;
  font-weight: 600;
}

.ewd-combo__option[aria-selected="true"]::before {
  opacity: 1;
  background: var(--es-accent) !important;
}

/* the reset row when it is the chosen one: it keeps its header shape,
   so it needs the navy explicitly rather than inheriting a hairline */
.ewd-combo__list>.ewd-combo__option:first-of-type[aria-selected="true"] {
  background: var(--es-canvas) !important;
  border-bottom-color: var(--es-canvas) !important;
}

/* the keyboard cursor. Same warm ground as hover, because it means the
   same thing - this is the row you are on - and a second visual
   language for it would only ask the reader to learn one more. */
.ewd-combo__option.is-active {
  background: rgba(224, 165, 59, .14) !important;
}

.ewd-combo__option.is-active::before {
  opacity: 1;
}

/* selection outranks the cursor: arrowing over the row you already
   chose must not make it look unchosen */
.ewd-combo__option.is-active[aria-selected="true"] {
  background: var(--es-canvas) !important;
}

/* ---- the count, and the hover reflow it was caught in ----

   Section 18 animates padding-left from 14px to 22px on hover. Inside a
   flex row whose count sits on `margin-left: auto`, those 8px come out
   of the label, so a long option rewrapped under the cursor and the
   rows below it moved - on a list the visitor is trying to click.

   The inset is now constant and the hover says what it has to say with
   the keystone alone. The count never wraps, and the label yields
   before it does: a number is worth less than the name it qualifies,
   but it must stay legible. */
.ewd-combo__count {
  white-space: nowrap;
}

.ewd-combo__list>.ewd-combo__option,
.ewd-combo__list>.ewd-combo__option:hover,
.ewd-combo__list>.ewd-combo__option:focus-visible {
  padding-left: 22px !important;
}

.ewd-combo__option>.ewd-combo__label,
.ewd-combo__option {
  min-width: 0;
}

/* hero görselinin altındaki data-page-label etiketi kapalı */
.es-detail__feature-image::after,
.es-detail--specialty .es-detail__feature-image::after,
.es-detail--claim .es-detail__feature-image::after,
.es-detail--report .es-detail__feature-image::after,
.es-detail--location .es-detail__feature-image::after {
  content: none !important;
  display: none !important;
}

/* ---- finder shortlist: page-level selection tray ---------------- */
.esf-tray {
  position: fixed;
  z-index: 80;
  right: 0;
  bottom: 0;
  left: 0;
  background: var(--es-canvas);
  border-top: 2px solid var(--es-accent);
  box-shadow: 0 -10px 30px rgba(11, 30, 51, .25)
}

.esf-tray[hidden] {
  display: none
}

body.esf-has-tray {
  padding-bottom: calc(var(--esf-tray-h, 120px) + 14px)
}

.esf-tray__bar {
  max-width: none;
  margin: 0;
  padding: 12px clamp(16px, 3vw, 44px);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 10px
}

.esf-tray__count {
  margin: 0;
  color: var(--es-text-on-dark);
  white-space: nowrap;
  font: 600 11.5px/1.3 var(--es-sans)
}

.esf-tray__chips {
  display: flex;
  flex: 1 1 140px;
  min-width: 0;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px
}

.esf-tray__chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  max-width: 100%;
  padding: 5px 5px 5px 8px;
  background: var(--es-canvas-3);
  border: 1px solid var(--es-hairline-dark);
  border-radius: 999px
}

.esf-tray__chip-n {
  flex: 0 0 auto;
  color: var(--es-accent);
  font: 700 10px/1 var(--es-sans)
}

.esf-tray__chip-text {
  overflow: hidden;
  color: var(--es-text-on-dark);
  font: 500 11px/1.2 var(--es-sans);
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 42ch
}

.esf-tray__chip-x {
  appearance: none;
  -webkit-appearance: none;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  margin: -4px 0 -4px -1px;
  border: 0;
  border-radius: 50%;
  padding: 0;
  background: transparent;
  color: var(--es-text-on-dark);
  cursor: pointer;
  font: 400 16px/1 var(--es-sans);
  text-shadow: none !important
}

.esf-tray__chip-x:hover,
.esf-tray__chip-x:focus-visible {
  color: var(--es-accent);
  background: rgba(224, 165, 59, .14) !important
}

.esf-tray__chip-x:focus-visible,
.esf-tray__clear:focus-visible,
.esf-tray__change:focus-visible {
  outline: 2px solid var(--es-accent);
  outline-offset: 2px
}

.esf-tray__empty {
  flex: 1 1 auto;
  margin: 0;
  color: var(--es-muted-on-dark);
  font: 500 10.5px/1.35 var(--es-sans)
}

.esf-tray__acts {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto
}

.esf-tray__clear {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  padding: 7px 3px;
  background: transparent !important;
  color: var(--es-muted-on-dark);
  cursor: pointer;
  font: 500 10.5px/1 var(--es-sans);
  text-decoration: underline;
  text-underline-offset: 3px
}

.esf-tray__clear:hover {
  color: var(--es-text-on-dark)
}

.esf-tray__change {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  border-radius: 999px;
  padding: 8px 11px;
  background: var(--es-accent) !important;
  color: var(--es-accent-ink) !important;
  cursor: pointer;
  font: 600 10.5px/1 var(--es-sans);
  text-shadow: none !important
}

.esf-tray__change:hover {
  background: #ebb558 !important;
  color: var(--es-accent-ink) !important
}

@media (max-width:1023px) {
  .esf-tray__bar {
    padding: 10px 14px
  }

  .esf-tray__chip-text {
    max-width: 28ch
  }
}
.es-thanks__next {
  padding: 64px 0 72px;
}

.es-thanks__next-inner {
  max-width: 720px;
}

.es-thanks__next-inner .es-h2 {
  margin-bottom: 16px;
}

.es-thanks__next-inner p {
  max-width: 640px;
  margin-bottom: 28px;
}
/* ---------- MAIN-HUB ACTIONS - generic (24 Aug) ----------
   The flex+gap styling existed only under the mental-health hub's
   scoped selector, so on every other hub the gold button and the
   text link rendered unstyled and touching. Same values, unscoped;
   the scoped rule still wins where it applies and agrees anyway. */
.main-hub__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 22px;
}

.main-hub__actions .es-textlink {
  color: var(--es-muted-on-dark);
  border-bottom-color: var(--es-hairline-dark);
}

.main-hub__actions .es-textlink:hover {
  color: var(--es-accent);
}
/* ---------- end MAIN-HUB ACTIONS ---------- */

/* ---------- DETAIL SEO SUPPORT - merged into the section above (24 Aug) ----------
   The block is pasted as its own <section>, so a full section's padding sat
   on both sides of the seam. Worse, its one child carries es-shell and
   es-detail__prose together: the prose max-width (66ch) beat the shell's,
   and the shell's auto margins then CENTRED that 66ch - a stray narrow
   column floating mid-page. The seam closes, the block takes the shell
   frame with its copy left-aligned under the section above, and a gold-led
   hairline marks it as that section's tail rather than a new chapter. */

.es-detail__section:has(+ .es-detail__seo-support) {
  padding-bottom: clamp(34px, 4vw, 52px);
}

.es-detail__seo-support {
  padding-top: 0;
  padding-bottom: clamp(56px, 7vw, 96px);
}

/* the shell frame wins again; the copy aligns left inside it */
.es-detail__seo-support .es-detail__prose {
  max-width: var(--es-shell);
}

/* the house divider: hairline with the 48px gold lead */
.es-detail__seo-support .es-detail__prose::before {
  content: "";
  display: block;
  height: 1px;
  margin-bottom: clamp(30px, 4vw, 46px);
  background: linear-gradient(90deg, var(--es-accent) 0 48px, var(--es-hairline) 48px);
}

/* sized as a follow-on heading, not a second page title */
.es-detail__seo-support .es-h2 {
  max-width: 26ch;
  margin-bottom: 14px;
  font-size: clamp(24px, 2.4vw, 32px);
}

/* paragraphs keep the base 68ch measure; two columns of air stay open
   on the right, matching the aside column above */
.es-detail__seo-support .es-detail__prose > p {
  max-width: 66ch;
}
/* ---------- end DETAIL SEO SUPPORT ---------- */