/* Jack Ross 2026 theme styles.
   Source: the approved prototype design-challenge-575/src/css/site.css (copied unchanged below, less the woff2
   @font-face rules, which theme.json now prints), followed by the WordPress layer. */

/* Jack Ross design system, Iteration 3.
   Base: direction B2 (human-led boutique). Carried in: B1 display scale, J stroke, masthead strap, figures table;
   B3 particulars register, services grouped by need, menu sheet with a primary action.
   Crimson is reserved for the logo, the primary button, the J stroke, figure emphasis and focus rings. */

@font-face { font-family: "Spectral Fallback"; src: local("Georgia"); size-adjust: 102%; ascent-override: 92%; descent-override: 36%; }
@font-face { font-family: "Hanken Fallback"; src: local("Arial"); size-adjust: 97%; ascent-override: 100%; descent-override: 28%; }

:root {
  /* colour */
  --navy: #142B3F;
  --ivory: #F7F5F1;
  --ivory-deep: #EFEBE4;
  --white: #FFFFFF;
  --crimson: #98012E;
  --crimson-press: #7A0125;
  --stone: #DAD5CC;
  --stone-soft: #E9E4DB;
  --ink: #142B3F;
  --text: #22303C;
  --muted: #4D5A66;
  --line-strong: #6B7680;
  --on-navy: #FFFFFF;
  --on-navy-muted: #C5CFD8;

  /* type */
  --f-display: "Spectral", "Spectral Fallback", Georgia, serif;
  --f-text: "Hanken Grotesk", "Hanken Fallback", Arial, sans-serif;
  --s-xs: 0.8125rem;
  --s-small: 0.9375rem;
  --s-body: clamp(1.0625rem, 0.2vw + 1rem, 1.125rem);
  --s-lead: clamp(1.1875rem, 0.5vw + 1.05rem, 1.4375rem);
  --s-h3: clamp(1.3125rem, 0.6vw + 1.15rem, 1.625rem);
  --s-head: clamp(2.125rem, 2.6vw + 1.3rem, 3.75rem);
  --s-title: clamp(2.375rem, 3.6vw + 1.3rem, 4.5rem);
  --s-display: clamp(2.5rem, 4.6vw + 1.1rem, 4.5rem);

  /* space */
  --sp-1: 0.5rem; --sp-2: 1rem; --sp-3: 1.5rem; --sp-4: 2rem; --sp-5: 3rem; --sp-6: 4rem; --sp-7: 6rem;
  --section: clamp(4rem, 5.5vw + 1.5rem, 8rem);
  --margin: clamp(1rem, 3.2vw, 2.5rem);
  --measure: 66ch;

  --t-hover: 180ms; --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: var(--sp-3); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; background: var(--ivory); color: var(--text); font: 400 var(--s-body)/1.6 var(--f-text); font-optical-sizing: auto; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img, svg { display: block; max-width: 100%; height: auto; }
h1, h2, h3, h4 { font-family: var(--f-display); font-weight: 500; color: var(--ink); margin: 0; text-wrap: balance; font-variant-numeric: lining-nums; }
h1 { font-size: var(--s-title); line-height: 1.04; letter-spacing: -0.022em; }
h2 { font-size: var(--s-head); line-height: 1.06; letter-spacing: -0.018em; }
h3 { font-size: var(--s-h3); line-height: 1.2; letter-spacing: -0.006em; }
h4 { font: 650 var(--s-body)/1.35 var(--f-text); }
p { margin: 0 0 var(--sp-2); text-wrap: pretty; }
ul, ol { margin: 0 0 var(--sp-2); }
a { color: var(--ink); text-decoration-line: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; text-decoration-color: rgba(20, 43, 63, 0.4); transition: text-decoration-color var(--t-hover), color var(--t-hover), background-color var(--t-hover); }
a:hover { text-decoration-color: currentColor; }
strong, b { font-weight: 650; color: var(--ink); }
:focus-visible { outline: 3px solid var(--crimson); outline-offset: 3px; }
::selection { background: var(--stone); color: var(--ink); }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: var(--margin); top: -5rem; z-index: 40; background: var(--white); color: var(--ink); font-weight: 650; padding: 0.75rem 1rem; border: 2px solid var(--ink); }
.skip:focus { top: var(--sp-1); }

/* Layout */
.wrap { width: 100%; max-width: 81rem; margin-inline: auto; padding-inline: var(--margin); }
.section { padding-block: var(--section); }
.section--white { background: var(--white); }
.section--ivory { background: var(--ivory); }
.section--stone { background: var(--ivory-deep); }
.section + .section.section--white, .section--white + .section--white { border-top: 1px solid var(--stone); }
.section__head { max-width: 50rem; margin-bottom: clamp(2rem, 3vw + 1rem, 3.5rem); }
.section__head h2 { margin-top: 0; }
.section__lede { margin-top: var(--sp-3); font-size: var(--s-lead); line-height: 1.5; color: var(--text); max-width: 38em; }
.grid-2, .grid-3 { display: grid; gap: var(--sp-5) var(--sp-4); }
@media (min-width: 48rem) { .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 48rem) { .grid-3:has(> :nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.layout { display: grid; gap: var(--sp-5) var(--sp-4); align-items: start; }
@media (min-width: 64rem) {
  .grid-2 { column-gap: var(--sp-6); }
  .layout { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .layout > .layout__main { grid-column: 1 / span 7; }
  .layout > .layout__aside { grid-column: 9 / -1; }
}

/* Text */
.eyebrow { display: flex; align-items: center; gap: 0.75rem; margin: 0 0 var(--sp-2); font: 650 var(--s-xs)/1.3 var(--f-text); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.eyebrow::before { content: ""; flex: none; width: 1.5rem; height: 1px; background: currentColor; }
.lede { font-size: var(--s-lead); line-height: 1.5; color: var(--text); max-width: 38em; }
.small { font-size: var(--s-small); line-height: 1.55; }
.muted { color: var(--muted); }
.tbc { display: inline-block; padding: 0 0.4em; border: 1px dashed var(--line-strong); font: 600 0.8125rem/1.5 var(--f-text); letter-spacing: 0.01em; color: var(--muted); white-space: nowrap; vertical-align: 0.08em; }

/* Long-form reading: Spectral as the reading face.
   The plain-table rules sit in :where() (zero specificity) so a table's own embedded styles in legacy content win. */
.prose { max-width: var(--measure); font: 400 clamp(1.125rem, 0.25vw + 1.05rem, 1.25rem)/1.68 var(--f-display); color: var(--text); font-variant-numeric: lining-nums; }
.prose > * + * { margin-top: 1.1em; }
.prose p, .prose ul, .prose ol { margin-bottom: 0; }
.prose h2 { font-size: clamp(1.75rem, 1.4vw + 1.3rem, 2.375rem); line-height: 1.12; margin-top: 2.2em; scroll-margin-top: var(--sp-3); }
.prose h3 { font-size: var(--s-h3); margin-top: 1.8em; }
.prose h2 + *, .prose h3 + * { margin-top: 0.6em; }
.prose li + li { margin-top: 0.45em; }
.prose ul, .prose ol { padding-left: 1.25em; }
.prose li::marker { color: var(--muted); }
.prose strong { font-weight: 600; }
.prose a { text-decoration-color: rgba(20, 43, 63, 0.45); }
.prose blockquote { margin-inline: 0; padding-left: var(--sp-3); border-left: 1px solid var(--stone); font-style: italic; }
:where(.prose table:not(.figures, .is-style-jr-figures table)) { width: 100%; max-width: 100%; border-collapse: collapse; font: 400 var(--s-small)/1.45 var(--f-text); font-variant-numeric: tabular-nums; }
:where(.prose table:not(.figures, .is-style-jr-figures table) caption) { text-align: left; caption-side: top; padding-bottom: var(--sp-1); color: var(--muted); }
:where(.prose table:not(.figures, .is-style-jr-figures table) th, .prose table:not(.figures, .is-style-jr-figures table) td) { text-align: left; vertical-align: top; padding: 0.625rem 0.875rem; min-width: 6ch; border-bottom: 1px solid var(--stone); }
:where(.prose table:not(.figures, .is-style-jr-figures table) thead th) { border-bottom: 1px solid var(--ink); font-weight: 650; color: var(--ink); }

/* Buttons and links */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.6em; min-height: 3.25rem; padding: 0.8rem 1.5rem; border: 1px solid transparent; border-radius: 1px; font: 650 1rem/1.25 var(--f-text); letter-spacing: 0.005em; text-align: center; text-decoration: none; cursor: pointer; transition: background-color var(--t-hover), color var(--t-hover), border-color var(--t-hover); }
.btn--primary { background: var(--crimson); color: var(--white); }
.btn--primary:hover { background: var(--crimson-press); color: var(--white); }
.btn--secondary { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--secondary:hover { background: var(--ink); color: var(--white); }
.btn:active { transform: translateY(1px); }
.btn--small { min-height: 2.75rem; padding: 0.5rem 1rem; font-size: 0.9375rem; }
button.btn { font-family: var(--f-text); }
.link-arrow { display: inline-flex; align-items: center; gap: 0.5em; min-height: 2.75rem; font-weight: 650; color: var(--ink); text-decoration-line: underline; text-decoration-color: rgba(20, 43, 63, 0.3); text-underline-offset: 0.3em; }
.link-arrow::after { content: "\2192" / ""; display: inline-block; font-weight: 400; transition: transform var(--t-hover) var(--ease); }
.link-arrow:hover { text-decoration-color: var(--ink); }
.link-arrow:hover::after { transform: translateX(0.2em); }
.phone { display: inline-flex; align-items: center; min-height: 2.75rem; font: 500 clamp(1.875rem, 1.6vw + 1.4rem, 2.75rem)/1.1 var(--f-display); letter-spacing: -0.01em; color: var(--ink); text-decoration: none; font-variant-numeric: lining-nums; white-space: nowrap; }
.phone:hover { text-decoration: underline; text-decoration-thickness: 1px; }

/* Masthead trust strap */

/* Header */
.site-header { position: relative; z-index: 10; background: var(--white); border-bottom: 1px solid var(--stone); }
.header__inner { display: flex; align-items: center; gap: 0.5rem; min-height: 4.5rem; }
.logo { flex: none; display: block; padding-block: 0.5rem; }
.logo img { height: 2.625rem; width: auto; }
.nav { display: none; }
.nav__list { list-style: none; margin: 0; padding: 0; display: flex; gap: 0 clamp(1.25rem, 2vw, 2.25rem); }
.nav__list a { position: relative; display: inline-flex; align-items: center; min-height: 2.75rem; font-weight: 550; font-size: 1rem; color: var(--ink); text-decoration: none; }
.nav__list a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0.45rem; height: 1px; background: var(--ink); transform: scaleX(0); transform-origin: left; transition: transform var(--t-hover) var(--ease); }
.nav__list a:hover::after, .nav__list a[aria-current="page"]::after { transform: scaleX(1); }
.nav__list a[aria-current="page"]::after { height: 2px; }
.header__actions { margin-left: auto; display: flex; align-items: center; gap: 0.5rem; }
.header__phone { display: inline-flex; align-items: center; min-height: 2.75rem; padding-inline: 0.25rem; font: 650 0.875rem/1 var(--f-text); color: var(--ink); text-decoration: none; white-space: nowrap; font-variant-numeric: tabular-nums; }
.header__phone:hover { text-decoration: underline; }
.header__cta-long { display: none; }
.menu-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 2.75rem; min-width: 2.75rem; padding: 0 0.75rem; border: 1px solid var(--ink); border-radius: 1px; background: var(--white); color: var(--ink); font: 650 0.9375rem/1 var(--f-text); cursor: pointer; }
.menu-btn:hover { background: var(--ivory); }
.menu-btn__icon { display: none; width: 1rem; height: 0.625rem; border-block: 1.5px solid currentColor; }
.no-js .menu-btn { display: none; }
.no-js .nav { display: block; order: 5; width: 100%; overflow-x: auto; }
.no-js .header__inner { flex-wrap: wrap; }
@media (max-width: 22.49rem) { .header__phone { display: none; } }
@media (min-width: 25rem) { .header__phone { font-size: 0.9375rem; } .menu-btn__icon { display: block; } .header__actions { gap: 0.75rem; } }
@media (min-width: 40rem) { .header__cta-long { display: inline; } .header__cta-short { display: none; } .header__inner { gap: 1.5rem; } }
@media (min-width: 64rem) { .header__inner { min-height: 5.75rem; } .logo img { height: 3.375rem; } }
@media (min-width: 72rem) {
  .nav, .no-js .nav { display: block; order: 0; width: auto; margin-left: auto; }
  .header__actions { margin-left: clamp(1rem, 2vw, 2.5rem); gap: 1.25rem; }
  .header__actions .menu-btn { display: none; }
  .header__phone { font-size: 1rem; }
}

/* Menu sheet (dialog) */
.sheet { width: 100%; max-width: 100%; height: 100%; max-height: 100%; margin: 0 0 0 auto; padding: 0; border: 0; background: var(--white); color: var(--text); overscroll-behavior: contain; }
.sheet::backdrop { background: rgba(20, 43, 63, 0.5); }
.sheet[open] { display: flex; flex-direction: column; overflow: hidden; }
@media (prefers-reduced-motion: no-preference) { .sheet[open] { animation: sheet-in 260ms var(--ease); } }
@keyframes sheet-in { from { transform: translateX(1.5rem); opacity: 0; } to { transform: none; opacity: 1; } }
.sheet__top { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); min-height: 4.5rem; padding-inline: var(--margin); border-bottom: 1px solid var(--stone); }
.sheet__title { margin: 0; font: 650 var(--s-xs)/1 var(--f-text); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.sheet__body { flex: 1; min-height: 0; overflow-y: auto; padding: var(--sp-2) var(--margin) var(--sp-3); }
.sheet__list { list-style: none; margin: 0 0 var(--sp-4); padding: 0; }
.sheet__list a { display: flex; align-items: center; justify-content: space-between; min-height: 3.5rem; padding-block: 0.5rem; border-bottom: 1px solid var(--stone); font: 500 clamp(1.625rem, 4vw + 0.8rem, 2rem)/1.15 var(--f-display); color: var(--ink); text-decoration: none; }
.sheet__list a::after { content: "\2192" / ""; font: 400 1.25rem/1 var(--f-text); color: var(--muted); }
.sheet__list a[aria-current="page"] { padding-left: 0.875rem; box-shadow: inset 2px 0 0 var(--ink); }
.sheet__cta { width: 100%; }
.sheet__contact { margin-top: var(--sp-4); padding-top: var(--sp-3); border-top: 1px solid var(--stone); }
.sheet__contact p { margin-bottom: var(--sp-1); color: var(--muted); font-size: var(--s-small); }
@media (min-width: 40rem) { .sheet { max-width: 30rem; border-left: 1px solid var(--stone); } }
body.sheet-open { overflow: hidden; }

/* Hero */
.hero { background: var(--ivory); padding-block: clamp(2rem, 3vw + 1rem, 5.5rem) clamp(3rem, 4vw + 1.5rem, 6.5rem); }
.hero__inner { display: grid; gap: var(--sp-5); align-items: center; }
.hero__strap { position: relative; display: flex; align-items: center; min-height: 2.25rem; margin: 0 0 var(--sp-3); padding-left: 1.875rem; font: 600 var(--s-small)/1.35 var(--f-text); letter-spacing: 0.01em; color: var(--ink); }
.hero__title { font-size: var(--s-display); line-height: 1.02; letter-spacing: -0.028em; max-width: 13em; }
.hero__lede { margin-top: var(--sp-3); font-size: var(--s-lead); line-height: 1.5; color: var(--text); max-width: 36em; }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem var(--sp-2); margin-top: var(--sp-4); }
.hero__call { gap: 0.25em; }
.hero__note { flex-basis: 100%; margin: 0; font-size: var(--s-small); color: var(--muted); }
.hero__jump { margin-top: var(--sp-2); }
.hero__jump::after { content: "\2193" / ""; }
.hero__jump:hover::after { transform: translateY(0.15em); }
.hero__meta { display: flex; flex-wrap: wrap; gap: 0.125rem 1.75rem; margin: var(--sp-3) 0 0; padding: var(--sp-2) 0 0; list-style: none; border-top: 1px solid var(--stone); font-size: var(--s-small); color: var(--muted); max-width: 40em; }
.hero__meta li { display: flex; align-items: center; }
@media (max-width: 39.98rem) {
  .hero { padding-block: 1.25rem 1.75rem; }
  .hero__strap { margin-bottom: 1rem; }
  .hero__lede { margin-top: 1rem; font-size: 1.0625rem; }
  .hero__actions { margin-top: 1.25rem; gap: 0.625rem; }
  .hero__actions .btn { flex: 1 1 auto; padding-inline: 1.125rem; }
  .hero__call { flex-grow: 0; }
  .hero__call-num { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .hero__jump { margin-top: 0.25rem; }
  .hero__meta { display: none; }
  .hero + .routes { padding-top: var(--sp-5); }
}

/* The J stroke: the crimson stem of the monogram's J, ending in its hook. Hero strap and pull quotes only. */
.hero__strap::before, .quote--pull::before { content: ""; position: absolute; width: 2px; background: var(--crimson); }
.hero__strap::after, .quote--pull::after { content: ""; position: absolute; border-right: 2px solid var(--crimson); border-bottom: 2px solid var(--crimson); border-bottom-right-radius: 100% 100%; }
.hero__strap::before { left: 0.875rem; top: 0; bottom: 0.5rem; }
.hero__strap::after { left: 0.1875rem; bottom: 0; width: calc(0.6875rem + 2px); height: 0.75rem; border-bottom-right-radius: 0.6875rem 0.75rem; }

/* Hero partners card (home, wide screens) */
.hero__aside { display: none; }
@media (min-width: 64rem) {
  .hero__inner { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--sp-4); align-items: start; }
  .hero__copy { grid-column: 1 / span 7; }
  .hero__aside { display: block; grid-column: 8 / -1; margin-top: calc(2.25rem + var(--sp-3)); background: var(--navy); color: var(--on-navy-muted); padding: var(--sp-4) var(--sp-4) var(--sp-2); }
}
@media (min-width: 80rem) { .hero__copy { grid-column: 1 / span 8; } .hero__aside { grid-column: 9 / -1; } }
.partners { list-style: none; margin: 0 0 var(--sp-3); padding: 0; }
.partners li { display: grid; grid-template-columns: 5rem 1fr; gap: 0 1.125rem; align-items: center; padding-block: 0.875rem; border-bottom: 1px solid var(--stone); }
.partners li:first-child { padding-top: 0; }
.partners .portrait::after { white-space: nowrap; }
.partners p { margin: 0; font-size: var(--s-small); line-height: 1.45; color: var(--muted); }
.partners strong { display: block; font: 500 1.3125rem/1.2 var(--f-display); color: var(--ink); }
/* On the navy card: white and pale grey only, never crimson */
.hero__aside .eyebrow, .hero__aside .partners p, .hero__aside .portrait::after { color: var(--on-navy-muted); }
.hero__aside .partners strong, .hero__aside .link-arrow { color: var(--on-navy); }
.hero__aside .partners li { border-bottom-color: rgba(255, 255, 255, 0.2); }
.hero__aside .portrait::before { background: rgba(255, 255, 255, 0.06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.24); color: var(--on-navy-muted); }
.hero__aside .link-arrow { text-decoration-color: rgba(255, 255, 255, 0.5); }
.hero__aside :focus-visible { outline-color: var(--on-navy); }

/* Routing */
.routes__list { list-style: none; margin: 0; padding: 0; display: grid; border-bottom: 1px solid var(--stone); }
.route { border-top: 1px solid var(--stone); }
.route__link { position: relative; display: flex; flex-direction: column; justify-content: center; gap: 0.25rem; min-height: 4.75rem; height: 100%; padding: 1rem 2.75rem 1rem 0; text-decoration: none; }
.route__link::after { content: "\2192" / ""; position: absolute; right: 0.25rem; top: 50%; transform: translateY(-50%); font-size: 1.25rem; color: var(--ink); transition: transform var(--t-hover) var(--ease); }
.route__label { font: 500 clamp(1.25rem, 0.6vw + 1.1rem, 1.5rem)/1.2 var(--f-display); color: var(--ink); text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 1px; text-underline-offset: 0.2em; transition: text-decoration-color var(--t-hover); }
.route__hint { font-size: var(--s-small); line-height: 1.45; color: var(--muted); }
.route__link:hover .route__label, .route__link:focus-visible .route__label { text-decoration-color: var(--ink); }
.route__link:hover::after { transform: translate(0.25rem, -50%); }
.routes__help { margin: var(--sp-3) 0 0; color: var(--muted); }
@media (min-width: 48rem) {
  .routes__list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--sp-4); border-bottom: 0; }
  .route { border-bottom: 1px solid var(--stone); margin-bottom: -1px; }
}
@media (min-width: 64rem) {
  .routes__inner { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--sp-4); align-items: start; }
  .routes__inner > .section__head { grid-column: 1 / span 4; margin: 0; }
  .routes__inner > .routes__list { grid-column: 6 / -1; }
  .routes__inner > .routes__help { grid-column: 6 / -1; }
  .routes__inner .section__head h2 { font-size: clamp(2.125rem, 2vw + 1.2rem, 3.25rem); }
}

/* Services grouped by need */
.service-groups { display: grid; gap: var(--sp-5) var(--sp-4); }
.service-group { padding-top: var(--sp-3); border-top: 1px solid var(--ink); }
.service-group > h3 { margin-bottom: var(--sp-2); }
.service-group > p { color: var(--muted); font-size: var(--s-small); }
.service-list { list-style: none; margin: 0; padding: 0; }
.service-list li { padding-block: 0.875rem; border-bottom: 1px solid var(--stone); }
.service-list li:last-child { border-bottom: 0; }
.service-list a { display: inline-flex; align-items: center; gap: 0.5em; min-height: 1.75rem; font-weight: 650; color: var(--ink); text-decoration: none; }
.service-list a::after { content: "\2192" / ""; font-weight: 400; transition: transform var(--t-hover) var(--ease); }
.service-list a:hover { text-decoration: underline; }
.service-list a:hover::after { transform: translateX(0.2em); }
.service-list p, .service-list span:not(.tbc) { display: block; margin: 0.25rem 0 0; font-size: var(--s-small); line-height: 1.5; color: var(--muted); }
@media (min-width: 48rem) { .service-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .service-groups { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* People. Until approved photographs exist, a portrait slot is a small pale monogram tile (from data-initials) with one
   "Portrait to follow" label; CSS draws both, so neither is text to assistive technology. A photograph goes in later as
   <img class="portrait__img"> inside .portrait and replaces them. */
.people { display: grid; gap: var(--sp-5) var(--sp-4); }
.person { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: 0 1.25rem; align-content: start; }
.person > * { grid-column: 1 / -1; }
.person > .portrait { grid-column: 1; grid-row: 1 / span 2; align-self: start; }
.person > .person__name { grid-column: 2; grid-row: 1; align-self: end; }
.person > .person__role { grid-column: 2; grid-row: 2; align-self: start; }
.person > .portrait + p.small { display: none; } /* a repeated "Portrait to follow" caption: the slot already carries the one label */
.person__name { font-size: var(--s-h3); line-height: 1.15; }
.person__role { margin: 0.375rem 0 0; font: 600 var(--s-small)/1.4 var(--f-text); color: var(--muted); }
.person__bio { margin-top: var(--sp-3); max-width: 36em; }
.person > .link-arrow { justify-self: start; }
.portrait { display: flex; flex-direction: column; gap: 0.375rem; width: 100%; max-width: 7.5rem; margin: 0; container-type: inline-size; }
.portrait::before { content: attr(data-initials) / ""; display: flex; align-items: center; justify-content: center; aspect-ratio: 1 / 1; background: var(--ivory-deep); box-shadow: inset 0 0 0 1px var(--stone); font: 500 34cqi/1 var(--f-display); letter-spacing: 0.04em; color: var(--line-strong); font-variant-numeric: lining-nums; }
.portrait::after { content: "Portrait to follow" / ""; font: 600 0.6875rem/1.3 var(--f-text); letter-spacing: 0.01em; color: var(--muted); }
.portrait__img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.portrait:has(> .portrait__img)::before, .portrait:has(> .portrait__img)::after { content: none; }

/* Lead person: on the home page the navy quote card sits beside the name card; without a card the lead is an ordinary card */
.person--lead > .quote--card { margin-top: var(--sp-4); }
@media (min-width: 48rem) {
  .people { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .people > .person--lead { grid-column: 1 / -1; }
  .people:not(:has(> .person:nth-of-type(3))) > .person--lead:not(:has(> .quote--card)) { grid-column: auto; }
}
@media (min-width: 64rem) {
  .people:has(> .person:nth-of-type(3)):not(:has(> .person--lead > .quote--card)) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .people:has(> .person:nth-of-type(3)):not(:has(> .person--lead > .quote--card)) > .person--lead { grid-column: auto; }
  .person--lead:has(> .quote--card) { grid-template-columns: 7.5rem minmax(0, 5fr) minmax(0, 7fr); }
  .person--lead:has(> .quote--card) > * { grid-column: 1 / 3; }
  .person--lead:has(> .quote--card) > .portrait { grid-column: 1; }
  .person--lead:has(> .quote--card) > .person__name, .person--lead:has(> .quote--card) > .person__role { grid-column: 2; }
  .person--lead:has(> .quote--card) > .person__name { font-size: clamp(1.75rem, 1.4vw + 1.3rem, 2.5rem); }
  .person--lead > .quote--card { grid-column: 3; grid-row: 1 / span 5; align-self: start; margin: 0 0 0 clamp(1rem, 3vw, 3rem); }
}
@media (min-width: 72rem) { .person { grid-template-columns: 7.5rem minmax(0, 1fr); } }

/* Quotes */
.quote { margin: 0; }
.quote__text { margin: 0; font: 400 var(--s-lead)/1.45 var(--f-display); color: var(--ink); }
.quote__text p { margin: 0; }
.quote__text p + p { margin-top: 0.75em; }
.quote__cite { margin-top: var(--sp-2); font-size: var(--s-small); color: var(--muted); }
.quote__cite a { display: inline-block; padding-block: 0.2rem; font-weight: 650; color: var(--ink); }
.quote--card { background: var(--navy); color: var(--on-navy); padding: clamp(1.75rem, 3vw + 0.75rem, 3.5rem); }
.quote--card .quote__text { font-size: clamp(1.375rem, 1.1vw + 1.1rem, 2rem); line-height: 1.32; letter-spacing: -0.005em; color: var(--on-navy); }
.quote--card .quote__cite { margin-top: var(--sp-3); color: var(--on-navy-muted); }
.quote--card .quote__cite a, .quote--card a { color: var(--on-navy); text-decoration-color: rgba(255, 255, 255, 0.5); }
.quote--card :focus-visible { outline-color: var(--on-navy); }
.quote--pull { position: relative; padding-left: 2.25rem; padding-bottom: 0.25rem; }
.quote--pull .quote__text { font-size: clamp(1.5rem, 1.6vw + 1.1rem, 2.375rem); line-height: 1.25; letter-spacing: -0.01em; }
.quote--pull::before { left: 1rem; top: 0.45rem; bottom: 1rem; }
.quote--pull::after { left: 0.25rem; bottom: 0.25rem; width: calc(0.75rem + 2px); height: 0.875rem; border-bottom-right-radius: 0.75rem 0.875rem; }

/* Proof */
.marks { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3) var(--sp-5); }
.marks li { display: flex; align-items: center; }
.marks a { display: block; padding: 0.25rem; }
.marks img { height: 4rem; width: auto; }
.marks img[src*="ICAEW"] { height: 4.5rem; }
.particulars { background: var(--white); border: 1px solid var(--stone); padding: var(--sp-1) var(--sp-3); }
.particulars dl { display: grid; grid-template-columns: minmax(6.5rem, 9rem) minmax(0, 1fr); margin: 0; }
.particulars dl > div { display: contents; }
.particulars dt, .particulars dd { padding-block: 0.875rem; border-top: 1px solid var(--stone); }
.particulars dl > dt:first-of-type, .particulars dl > dt:first-of-type + dd, .particulars dl > div:first-child > dt, .particulars dl > div:first-child > dd { border-top: 0; }
.particulars dt { padding-right: var(--sp-2); font: 650 var(--s-xs)/1.5 var(--f-text); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); padding-top: 1.05rem; }
.particulars dd { margin: 0; color: var(--ink); line-height: 1.5; }
.particulars dd a { display: inline-block; padding-block: 0.1rem; }
@media (max-width: 22.5rem) { .particulars dl { grid-template-columns: 1fr; } .particulars dd { border-top: 0; padding-top: 0; } }

/* Who to speak to about what */
.who { padding-top: var(--sp-3); border-top: 1px solid var(--ink); }
.who > h3 { margin-bottom: var(--sp-2); }
.who > p { margin-bottom: 0; }
.who > p + p { margin-top: var(--sp-2); color: var(--muted); }

/* Navy anchor: one contained panel per page at most, under 400px tall. White text and white focus rings; never crimson. */
.panel--navy { background: var(--navy); color: var(--on-navy); padding: clamp(1.75rem, 3vw + 0.75rem, 3.5rem); }
.panel--navy a { color: var(--on-navy); text-decoration-color: rgba(255, 255, 255, 0.5); }
.panel--navy :focus-visible { outline-color: var(--on-navy); }
.panel__title { margin: 0 0 var(--sp-3); font: 500 clamp(2rem, 2.4vw + 1.2rem, 3.5rem)/1.05 var(--f-display); letter-spacing: -0.02em; color: var(--on-navy); font-variant-numeric: lining-nums; }
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; margin: 0; }
.facts > div { padding-top: 0.875rem; border-top: 1px solid rgba(255, 255, 255, 0.28); }
.facts dt { font: 650 var(--s-xs)/1.3 var(--f-text); letter-spacing: 0.1em; text-transform: uppercase; color: var(--on-navy-muted); }
.facts dd { margin: 0.375rem 0 0; font: 500 clamp(1.0625rem, 0.8vw + 0.9rem, 1.5rem)/1.25 var(--f-display); color: var(--on-navy); }
@media (min-width: 64rem) {
  .panel--navy:has(> .facts) { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--sp-4); align-items: start; }
  .panel--navy > .panel__title { grid-column: 1 / span 4; margin: 0; }
  .panel--navy > .facts { grid-column: 6 / -1; column-gap: var(--sp-4); }
}

/* Steps: what happens next */
.steps { list-style: none; counter-reset: step; margin: 0; padding: 0; display: grid; gap: var(--sp-3) var(--sp-4); }
@media (min-width: 40rem) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } .steps:has(> li:nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.steps li { counter-increment: step; position: relative; padding-top: var(--sp-2); border-top: 1px solid var(--stone); }
.steps li::before { content: counter(step) / ""; display: block; margin-bottom: 0.5rem; font: 500 1.125rem/1 var(--f-display); color: var(--muted); font-variant-numeric: lining-nums; }
.steps strong { display: block; font: 500 var(--s-h3)/1.2 var(--f-display); color: var(--ink); }
.steps p { margin: 0.5rem 0 0; color: var(--text); max-width: 30em; }

/* CTA band: ivory or white with a stone border, never a navy field */
.cta-band { display: grid; gap: var(--sp-4); background: var(--white); border: 1px solid var(--stone); padding: clamp(1.5rem, 4vw, 4rem); }
.section--white .cta-band { background: var(--ivory); }
.cta-band > h2, .cta-band__intro h2 { font-size: clamp(2rem, 2.2vw + 1.2rem, 3.25rem); }
.cta-band__intro p { margin: var(--sp-2) 0 0; font-size: var(--s-lead); line-height: 1.5; max-width: 32em; }
.cta-band__contact { display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem; }
.cta-band__contact .eyebrow { margin: 0; }
.cta-band__contact p { margin: 0; }
.cta-band__contact .btn { margin-top: var(--sp-2); }
@media (min-width: 64rem) {
  .cta-band:has(> .cta-band__contact) { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--sp-4); row-gap: var(--sp-5); }
  .cta-band:has(> .cta-band__contact) > * { grid-column: 1 / span 8; }
  .cta-band:has(> .cta-band__contact) > .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cta-band > .cta-band__contact { grid-column: 10 / -1; grid-row: 1 / span 2; align-self: start; padding-left: var(--sp-4); border-left: 1px solid var(--stone); }
}

/* Guidance */
.guidance-list { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--stone); }
.guidance-list li { display: grid; gap: 0.375rem; padding-block: var(--sp-3); border-top: 1px solid var(--stone); }
.guidance-list time { font: 650 var(--s-xs)/1.4 var(--f-text); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.guidance-list a { font: 500 var(--s-h3)/1.25 var(--f-display); color: var(--ink); text-decoration-color: rgba(20, 43, 63, 0.3); }
.guidance-list a:hover { text-decoration-color: var(--ink); }
.guidance-list p { margin: 0.25rem 0 0; color: var(--muted); font-size: var(--s-small); }
.figures { width: 100%; border-collapse: collapse; background: var(--white); font: 400 var(--s-small)/1.45 var(--f-text); font-variant-numeric: lining-nums tabular-nums; }
.figures caption { caption-side: bottom; text-align: left; padding-top: 0.75rem; font-size: var(--s-xs); line-height: 1.5; color: var(--muted); }
.figures th, .figures td { text-align: left; vertical-align: top; padding: 0.875rem 1rem; border-bottom: 1px solid var(--stone); }
.figures thead th { padding-block: 0.75rem; border-bottom: 1px solid var(--ink); font: 650 var(--s-xs)/1.3 var(--f-text); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); }
.figures tbody th { font-weight: 500; color: var(--ink); }
.figures td { color: var(--text); white-space: nowrap; }
.figures td.is-new { color: var(--crimson); font-weight: 700; }
@media (max-width: 39.98rem) {
  .figures thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .figures, .figures tbody { display: block; }
  .figures tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 0.75rem; padding: 0.875rem 1rem 1rem; border-bottom: 1px solid var(--stone); }
  .figures tbody th { grid-column: 1 / -1; margin-bottom: 0.5rem; }
  .figures th, .figures td { display: block; padding: 0; border: 0; white-space: normal; }
  .figures td::before { content: attr(data-label); display: block; margin-bottom: 0.125rem; font: 600 0.75rem/1.3 var(--f-text); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
  .figures caption { display: block; padding-inline: 0; }
}

/* Inner page header and breadcrumbs */
.page-head { background: var(--ivory); padding-block: clamp(1.25rem, 2vw + 0.75rem, 2.5rem) clamp(2.5rem, 4vw + 1rem, 5rem); border-bottom: 1px solid var(--stone); }
.breadcrumbs { margin-bottom: clamp(1.5rem, 3vw, 3rem); font-size: var(--s-small); }
.breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; align-items: center; margin: 0; padding: 0; color: var(--muted); }
.breadcrumbs li { display: flex; align-items: center; }
.breadcrumbs li + li::before { content: "/" / ""; margin-inline: 0.625rem; color: var(--line-strong); }
.breadcrumbs a { display: inline-flex; align-items: center; min-height: 1.75rem; color: var(--muted); }
.breadcrumbs a:hover { color: var(--ink); }
.breadcrumbs [aria-current="page"] { color: var(--ink); font-weight: 600; }
.page-head__title { font-size: var(--s-title); line-height: 1.04; letter-spacing: -0.024em; max-width: 16em; }
.page-head__lede { margin-top: var(--sp-3); font-size: var(--s-lead); line-height: 1.5; color: var(--text); max-width: 38em; }
.page-head .hero__actions, .page-head .btn { margin-top: var(--sp-4); }
.page-head .hero__actions .btn { margin-top: 0; }

/* Article: page-head with meta, then body and a sticky adviser aside */
.article > .wrap:has(> .article__body) { display: grid; gap: var(--sp-5); align-items: start; padding-block: clamp(2.5rem, 4vw + 1rem, 5rem); }
.article__body { min-width: 0; }
.article__body > * + * { margin-top: var(--sp-4); }
.article__body > .prose { margin-top: var(--sp-5); }
.page-head .article__meta { margin: var(--sp-4) 0 var(--sp-3); }
.page-head .notice { max-width: 46rem; }
.article__meta { display: flex; flex-wrap: wrap; gap: 0.5rem 1.75rem; margin: 0 0 var(--sp-4); padding-block: var(--sp-2); border-block: 1px solid var(--stone); font-size: var(--s-small); line-height: 1.45; color: var(--muted); }
.article__meta > * { margin: 0; }
.article__meta > div { display: block; }
.article__meta dl, .article__meta ul { display: contents; }
.article__meta div, .article__meta li { list-style: none; }
.article__meta dt { display: inline; font-weight: 650; color: var(--ink); }
.article__meta dt::after { content: " "; }
.article__meta dd { display: inline; margin: 0; }
.article__meta strong { color: var(--ink); }
.article__meta a { display: inline-block; padding-block: 0.1rem; }
.keypoints { background: var(--white); border: 1px solid var(--stone); border-top: 2px solid var(--ink); padding: var(--sp-3) clamp(1.25rem, 2.5vw, 2rem); }
.keypoints > :first-child { margin-top: 0; }
.keypoints h2, .keypoints h3, .keypoints .keypoints__title { margin: 0 0 var(--sp-2); font: 650 var(--s-xs)/1.3 var(--f-text); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.keypoints ul, .keypoints ol { margin: 0; padding: 0; list-style: none; }
.keypoints li { position: relative; padding-left: 1.25rem; line-height: 1.5; }
.keypoints li + li { margin-top: 0.625rem; }
.keypoints li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 0.375rem; height: 0.375rem; background: var(--ink); }
.callout { background: var(--white); border: 1px solid var(--stone); border-left: 3px solid var(--ink); padding: var(--sp-3) clamp(1.25rem, 2.5vw, 2rem); font: 400 var(--s-body)/1.55 var(--f-text); }
.callout > :last-child { margin-bottom: 0; }
.callout h2, .callout h3, .callout strong:first-child { font: 500 var(--s-h3)/1.25 var(--f-display); color: var(--ink); margin: 0 0 0.5rem; }
.prose .callout { margin-block: 1.75em; }
.sources { margin: 0; padding-left: 1.5rem; font: 400 var(--s-small)/1.55 var(--f-text); color: var(--text); }
.sources li { padding-block: 0.375rem; }
.sources li::marker { color: var(--muted); font-variant-numeric: tabular-nums; }
.sources a { display: inline-block; min-height: 1.5rem; }
.article__aside { background: var(--white); border: 1px solid var(--stone); padding: var(--sp-3); font-size: var(--s-small); }
.article__aside > :last-child { margin-bottom: 0; }
.article__aside h2, .article__aside h3 { font-size: var(--s-h3); margin-bottom: var(--sp-2); }
.article__aside .person { grid-template-columns: 4.5rem minmax(0, 1fr); gap: 0 1rem; }
.article__aside .person__name { font-size: 1.25rem; }
.article__aside .person__bio { margin-top: var(--sp-2); }
.article__aside .btn { width: 100%; margin-top: var(--sp-2); }
.related h2 { font-size: clamp(1.75rem, 1.4vw + 1.3rem, 2.375rem); margin-bottom: var(--sp-3); }
.related ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0 var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
.related li { padding-block: var(--sp-2); border-top: 1px solid var(--stone); }
.related li a { font: 500 1.25rem/1.3 var(--f-display); color: var(--ink); }
.related li p, .related li span { display: block; margin: 0.375rem 0 0; font-size: var(--s-small); color: var(--muted); }
.article__aside .phone { font-size: 1.5rem; min-height: 2.75rem; }
.article__aside > p .btn { width: 100%; margin-top: 0; }
@media (min-width: 64rem) {
  .article > .wrap:has(> .article__body) { grid-template-columns: minmax(0, 1fr) minmax(17rem, 21rem); column-gap: clamp(3rem, 5vw, 6rem); }
  .article__aside { position: sticky; top: var(--sp-3); }
}

/* FAQ */
.faq { border-bottom: 1px solid var(--stone); max-width: 52rem; }
.faq details { border-top: 1px solid var(--stone); }
.faq summary { position: relative; display: flex; align-items: center; min-height: 3.5rem; padding: 1.125rem 3rem 1.125rem 0; list-style: none; cursor: pointer; font: 500 var(--s-h3)/1.25 var(--f-display); color: var(--ink); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before, .faq summary::after { content: ""; position: absolute; right: 0.5rem; top: 50%; width: 1rem; height: 1.5px; background: var(--ink); transition: transform var(--t-hover) var(--ease); }
.faq summary::after { transform: rotate(90deg); }
.faq details[open] > summary::after { transform: rotate(0deg); }
.faq summary:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.faq__answer { padding: 0 0 var(--sp-3); max-width: 40em; color: var(--text); }
.faq__answer > :last-child { margin-bottom: 0; }

/* Forms */
.form { display: grid; gap: var(--sp-3); max-width: 40rem; }
.field { display: grid; gap: 0.5rem; margin: 0; }
.field label, .field legend, .form legend { font-weight: 650; color: var(--ink); line-height: 1.35; }
.field input:not([type="checkbox"]):not([type="radio"]), .field select, .field textarea { width: 100%; min-height: 3.25rem; padding: 0.75rem 0.875rem; border: 1px solid var(--line-strong); border-radius: 1px; background: var(--white); color: var(--ink); font: 400 1.0625rem/1.4 var(--f-text); transition: border-color var(--t-hover), box-shadow var(--t-hover); }
.field textarea { min-height: 9rem; resize: vertical; }
.field select { appearance: none; padding-right: 2.75rem; background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%); background-position: calc(100% - 1.375rem) 50%, calc(100% - 1rem) 50%; background-size: 0.375rem 0.375rem; background-repeat: no-repeat; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--ink); }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 3px solid var(--crimson); outline-offset: 1px; border-color: var(--ink); }
.field input[type="checkbox"], .field input[type="radio"] { width: 1.375rem; height: 1.375rem; margin: 0.1rem 0 0; accent-color: var(--ink); flex: none; }
.field:has(> input[type="checkbox"]), .field:has(> input[type="radio"]) { grid-template-columns: auto minmax(0, 1fr); column-gap: 0.75rem; align-items: start; }
.field:has(> input[type="checkbox"]) > .field__hint, .field:has(> input[type="radio"]) > .field__hint { grid-column: 2; }
.field label:has(input[type="checkbox"]), .field label:has(input[type="radio"]) { display: flex; gap: 0.75rem; align-items: flex-start; font-weight: 500; min-height: 1.5rem; }
.field--required > label::after { content: "Required" / ""; display: inline-block; margin-left: 0.625rem; padding: 0.125rem 0.375rem; border: 1px solid var(--line-strong); font: 600 0.75rem/1.2 var(--f-text); letter-spacing: 0.02em; color: var(--muted); vertical-align: 0.1em; }
.field__hint { margin: 0; font-size: var(--s-small); line-height: 1.5; color: var(--muted); }
.form fieldset { margin: 0; padding: 0; border: 0; display: grid; gap: var(--sp-2); }
.form fieldset > legend { margin-bottom: 0.75rem; padding: 0; }
.form__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); margin-top: var(--sp-1); }
.form__actions p { margin: 0; font-size: var(--s-small); color: var(--muted); }
.notice { background: var(--ivory-deep); border: 1px solid var(--stone); border-left: 3px solid var(--ink); padding: var(--sp-2) var(--sp-3); color: var(--ink); font-size: var(--s-small); line-height: 1.55; }
.notice > :last-child { margin-bottom: 0; }
.notice strong:first-child { display: block; margin-bottom: 0.25rem; font-size: var(--s-body); }
.notice a { font-weight: 650; }

/* Footer: practice particulars in white, legal lines in a short navy base */
.site-footer { background: var(--white); border-top: 1px solid var(--stone); }
.footer__main { display: grid; gap: var(--sp-5) var(--sp-4); padding-block: clamp(3rem, 4vw + 1.5rem, 5.5rem); }
.footer__logo img { height: 4rem; width: auto; margin-bottom: var(--sp-3); }
.footer__label { margin: 0 0 var(--sp-2); font: 650 var(--s-xs)/1.3 var(--f-text); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.footer__nav ul { list-style: none; margin: 0 0 var(--sp-4); padding: 0; }
.footer__nav li a { display: inline-flex; align-items: center; min-height: 2.75rem; font: 500 1.25rem/1.2 var(--f-display); color: var(--ink); text-decoration: none; }
.footer__nav li a:hover, .footer__nav li a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 1px; }
.footer__group { font-size: var(--s-small); color: var(--muted); }
.footer__group a { color: var(--ink); }
.site-footer .particulars { padding-inline: 0; border: 0; border-top: 1px solid var(--ink); background: transparent; }
.footer__marks .marks { gap: var(--sp-3) var(--sp-4); }
.footer__marks .marks img { height: 2.5rem; }
.footer__marks .marks img[src*="ICAEW"] { height: 4rem; }
.footer__marks p { margin-top: var(--sp-3); font-size: var(--s-small); color: var(--muted); max-width: 26em; }
.footer__base { background: var(--navy); color: var(--on-navy-muted); padding-block: var(--sp-4); font-size: var(--s-xs); line-height: 1.55; }
.footer__base p { margin: 0 0 0.5rem; max-width: 62em; }
.footer__base p:last-child { margin: 0; }
.footer__base a { color: var(--on-navy); }
.footer__base :focus-visible { outline-color: var(--on-navy); }
.footer__legal { display: grid; gap: 0 var(--sp-4); }
@media (min-width: 48rem) {
  .footer__main { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer__legal { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 64rem) {
  .footer__main { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .footer__id { grid-column: 1 / span 5; }
  .footer__nav { grid-column: 7 / span 3; }
  .footer__marks { grid-column: 10 / span 3; }
}

/* Home page compositions (index only) */
.voices { display: grid; gap: var(--sp-5) var(--sp-4); }
.voices__more { display: grid; gap: var(--sp-4); align-content: start; }
.voices__more .quote { padding-top: var(--sp-3); border-top: 1px solid var(--stone); }
.voices__more .quote__text { font-size: clamp(1.125rem, 0.4vw + 1.05rem, 1.3125rem); }
.voices + .panel--navy { margin-top: clamp(3rem, 4vw + 1rem, 5rem); }
@media (max-width: 63.98rem) {
  /* Narrow screens: the lead client quote becomes a navy card; the crimson J stroke never sits on navy, so it goes */
  .voices > .quote--pull { padding: clamp(1.75rem, 3vw + 0.75rem, 3rem); background: var(--navy); }
  .voices > .quote--pull::before, .voices > .quote--pull::after { content: none; }
  .voices > .quote--pull .quote__text { font-size: clamp(1.375rem, 1.1vw + 1.1rem, 2rem); line-height: 1.32; color: var(--on-navy); }
  .voices > .quote--pull .quote__cite { margin-top: var(--sp-3); color: var(--on-navy-muted); }
  .voices > .quote--pull .quote__cite a { color: var(--on-navy); text-decoration-color: rgba(255, 255, 255, 0.5); }
  .voices > .quote--pull :focus-visible { outline-color: var(--on-navy); }
}
.guidance { display: grid; gap: var(--sp-4); }
.guidance__note { margin: 0; }
.people__close { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem var(--sp-3); margin-top: var(--sp-5); padding-top: var(--sp-3); border-top: 1px solid var(--stone); }
.people__close p { margin: 0; color: var(--muted); }
.services-note { margin: var(--sp-4) 0 0; font-size: var(--s-small); color: var(--muted); }
@media (min-width: 64rem) {
  .voices { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--sp-4); }
  .voices > .quote--pull { grid-column: 1 / span 7; }
  .voices > .voices__more { grid-column: 9 / -1; }
  .guidance { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--sp-4); }
  .guidance > .guidance__lead { grid-column: 1 / span 5; }
  .guidance > .guidance__table { grid-column: 7 / -1; }
}

@media (forced-colors: active) { .logo img, .footer__logo img { forced-color-adjust: none; background: #fff; padding: 2px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }
@media print { .site-header, .sheet, .footer__base { display: none; } body { background: #fff; } }

/* real headshots (private preview): keep faces in frame */
.portrait__img { object-position: 50% 22%; }

/* ==========================================================================
   WordPress layer: core content classes, blocks, block styles, patterns, menus, lists, forms.
   Everything above this line is the approved design system (design-challenge-575/src/css/site.css).
   ========================================================================== */

/* Neve-era inline styles in a few posts name these variables; map them to the brand faces */
:root { --headingsfontfamily: var(--f-display); --bodyfontfamily: var(--f-text); }

/* Core helpers */
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.alignleft { float: left; margin: 0.3em 1.5em 1em 0; }
.alignright { float: right; margin: 0.3em 0 1em 1.5em; }
.aligncenter { display: block; margin-inline: auto; text-align: center; }
img.aligncenter, .wp-caption.aligncenter { margin-inline: auto; }
@media (max-width: 39.98rem) { .alignleft, .alignright, .prose figure.alignleft, .prose figure.alignright { float: none; margin: 0 auto 1em; } }
.entry-content figure, .entry-content .wp-caption { max-width: 100%; }
/* Older image blocks (div.wp-block-image > figure.alignleft) are display: table in core CSS, which ignores max-width */
@media (max-width: 39.98rem) {
  .entry-content .wp-block-image > figure, .entry-content :is(figure, img, .wp-caption):is(.alignleft, .alignright) { display: block; float: none; margin: 0 0 1em; }
  .entry-content img { max-width: 100%; height: auto; }
  .entry-content .wp-block-image a { max-width: 100%; }
}
.wp-caption { max-width: 100%; }
.wp-caption img { margin-bottom: 0.5rem; }
.wp-caption-text, .wp-element-caption, .gallery-caption { font: 400 var(--s-small)/1.5 var(--f-text); color: var(--muted); }
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); gap: var(--sp-2); }
.gallery-item { margin: 0; }
iframe, embed, video { max-width: 100%; }
.entry-content { display: flow-root; overflow-wrap: break-word; }

/* Page bodies */
.page-body { padding-block: clamp(2.5rem, 4vw + 1rem, 5rem); }
/* Pages have no sidebar: running text uses the full content width instead of half of it */
.page-body { --measure: 100%; }
.list-body { padding-block: clamp(2rem, 3vw + 1rem, 4rem); }
.page-head__lede > :last-child { margin-bottom: 0; }

/* Reading width: running text keeps the measure; tables, forms, media and wide blocks use the full column */
.entry-content.prose { max-width: none; }
.entry-content.prose > * { max-width: var(--measure); }
.entry-content.prose > :is(table, .wp-block-table, .alignwide, .alignfull, .wp-block-columns, .wp-block-gallery, .gallery, .wp-block-embed, .wp-block-video, .fluentform, .ff_conv_app, .wp-block-group, .faq, div:has(> table)) { max-width: 100%; }
.prose h1 { font-size: clamp(2rem, 1.8vw + 1.4rem, 2.75rem); line-height: 1.1; margin-top: 1.6em; }
.prose > h1:first-child, .prose > h2:first-child { margin-top: 0; }
.prose h4 { margin-top: 1.6em; }
.prose h5, .prose h6 { font: 650 var(--s-body)/1.35 var(--f-text); color: var(--ink); margin: 1.4em 0 0; }
.prose figure { margin-inline: 0; }
.prose figure.alignleft { margin-right: 1.5em; }
.prose figure.alignright { margin-left: 1.5em; }
.prose figure.aligncenter { margin-inline: auto; }
.prose .wp-block-table { overflow-x: auto; }
.prose .wp-block-table table { border-collapse: collapse; width: 100%; }
.prose .wp-block-table :is(th, td) { border: 0; border-bottom: 1px solid var(--stone); }
.prose hr, .wp-block-separator { border: 0; border-top: 1px solid var(--stone); margin-block: 2em; }
.prose code { font-size: 0.9em; }
.prose pre { overflow-x: auto; font-size: var(--s-small); }

/* Article */
.article__image img { width: auto; max-width: 100%; height: auto; } /* never upscale a small featured image */
.article__body > .prose:first-child, .article__body > .entry-content--builder:first-child { margin-top: 0; }
.article__tags { margin-top: var(--sp-4); font-size: var(--s-small); color: var(--muted); }
.article__aside--widgets { position: static; }
.article__aside .widget + .widget { margin-top: var(--sp-4); }
.widget__title { font-size: var(--s-h3); margin-bottom: var(--sp-2); }

/* Post lists and pagination */
.post-list { max-width: 52rem; }
.post-card .post-card__title { margin: 0; font: 500 var(--s-h3)/1.25 var(--f-display); }
.post-card .post-card__title a { font: inherit; }
.post-card .post-card__meta { margin: 0.25rem 0 0; font-size: var(--s-small); color: var(--muted); }
.post-card .post-card__meta a, .post-card .post-card__more { font: 650 var(--s-small)/1.5 var(--f-text); color: var(--ink); }
.post-card .post-card__excerpt { margin: 0.5rem 0 0; }
.post-card .post-card__meta time { font: inherit; letter-spacing: 0; text-transform: none; color: inherit; }
.pagination { margin-top: var(--sp-5); }
.pagination .nav-links { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 2.75rem; min-height: 2.75rem; padding: 0 0.75rem; border: 1px solid var(--stone); background: var(--white); color: var(--ink); font-weight: 650; text-decoration: none; }
.pagination a.page-numbers:hover { border-color: var(--ink); }
.pagination .page-numbers.current { background: var(--ink); border-color: var(--ink); color: var(--white); }
.pagination .page-numbers.dots { border: 0; background: none; min-width: 0; }
.empty-state { max-width: 46rem; }

/* Search form */
.search-form { max-width: 40rem; margin-top: var(--sp-4); }
.search-form__row { display: flex; gap: 0.5rem; }
.search-form__row input { flex: 1; min-width: 0; }
.search-form__row .btn { flex: none; }

/* Menus from wp_nav_menu */
.nav__list .sub-menu { display: none; }
.sheet__list .sub-menu { list-style: none; margin: 0 0 var(--sp-1); padding: 0 0 0 var(--sp-2); }
.sheet__list .sub-menu a { min-height: 2.75rem; border-bottom-color: var(--stone-soft); font: 500 1.0625rem/1.3 var(--f-text); }
.sheet__list .sub-menu a::after { content: none; }
.footer__nav nav { margin-bottom: var(--sp-4); }
.footer__nav .footer__list { margin-bottom: 0; }
.legal__list { list-style: none; display: flex; flex-wrap: wrap; gap: 0.25rem 1.5rem; margin: 0.75rem 0 0; padding: 0; }
.legal__list a { display: inline-flex; align-items: center; min-height: 2.75rem; }
@media (min-width: 48rem) {
  .footer__legal { display: block; columns: 2; column-gap: var(--sp-4); }
  .footer__legal p { break-inside: avoid; }
  .footer__legal-nav { column-span: all; }
}
/* A long primary menu does not fit beside the telephone and enquiry button: keep the Menu button at every width */
@media (min-width: 72rem) {
  .site-header:has(.nav__list > li:nth-child(7)) .nav { display: none; }
  .js .site-header:has(.nav__list > li:nth-child(7)) .menu-btn { display: inline-flex; }
  .site-header:has(.nav__list > li:nth-child(7)) .header__actions { margin-left: auto; }
}

/* Core buttons: fill is the crimson primary, outline the navy secondary */
.wp-block-buttons { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem var(--sp-2); }
.wp-block-button__link, .wp-element-button { display: inline-flex; align-items: center; justify-content: center; min-height: 3.25rem; padding: 0.8rem 1.5rem; border: 1px solid transparent; border-radius: 1px; background: var(--crimson); color: var(--white); font: 650 1rem/1.25 var(--f-text); text-align: center; text-decoration: none; transition: background-color var(--t-hover), color var(--t-hover); }
.wp-block-button__link:hover { background: var(--crimson-press); color: var(--white); }
.is-style-outline > .wp-block-button__link, .wp-block-button__link.is-style-outline { background: transparent; color: var(--ink); border-color: var(--ink); }
.is-style-outline > .wp-block-button__link:hover { background: var(--ink); color: var(--white); }

/* Block styles: Callout, Key points, Notice, Navy panel (core/group) */
.is-style-jr-callout { background: var(--white); border: 1px solid var(--stone); border-left: 3px solid var(--ink); padding: var(--sp-3) clamp(1.25rem, 2.5vw, 2rem); font: 400 var(--s-body)/1.55 var(--f-text); }
.is-style-jr-callout > :first-child { margin-top: 0; }
.is-style-jr-callout > :last-child { margin-bottom: 0; }
.is-style-jr-callout :is(h2, h3) { font: 500 var(--s-h3)/1.25 var(--f-display); color: var(--ink); margin: 0 0 0.5rem; }
.prose .is-style-jr-callout { margin-block: 1.75em; max-width: var(--measure); }
.is-style-jr-keypoints { background: var(--white); border: 1px solid var(--stone); border-top: 2px solid var(--ink); padding: var(--sp-3) clamp(1.25rem, 2.5vw, 2rem); font-family: var(--f-text); font-size: var(--s-body); }
.is-style-jr-keypoints > :first-child { margin-top: 0; }
.is-style-jr-keypoints > :last-child { margin-bottom: 0; }
.is-style-jr-keypoints :is(h2, h3) { margin: 0 0 var(--sp-2); font: 650 var(--s-xs)/1.3 var(--f-text); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.is-style-jr-keypoints ul { margin: 0; padding: 0; list-style: none; }
.is-style-jr-keypoints li { position: relative; padding-left: 1.25rem; line-height: 1.5; }
.is-style-jr-keypoints li + li { margin-top: 0.625rem; }
.is-style-jr-keypoints li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 0.375rem; height: 0.375rem; background: var(--ink); }
.prose .is-style-jr-keypoints { max-width: var(--measure); }
.is-style-jr-notice { background: var(--ivory-deep); border: 1px solid var(--stone); border-left: 3px solid var(--ink); padding: var(--sp-2) var(--sp-3); color: var(--ink); font: 400 var(--s-small)/1.55 var(--f-text); }
.is-style-jr-notice > :last-child { margin-bottom: 0; }
.prose .is-style-jr-notice { max-width: var(--measure); }
.is-style-jr-panel { background: var(--navy); color: var(--on-navy); padding: clamp(1.75rem, 3vw + 0.75rem, 3.5rem); }
.is-style-jr-panel :is(h2, h3, h4, p, li, strong, dt, dd) { color: var(--on-navy); }
.is-style-jr-panel a { color: var(--on-navy); text-decoration-color: rgba(255, 255, 255, 0.5); }
.is-style-jr-panel :focus-visible { outline-color: var(--on-navy); }
.is-style-jr-panel > :last-child { margin-bottom: 0; }

/* Block styles: Navy card and Pull quote (core/quote) */
.wp-block-quote.is-style-jr-card, .wp-block-quote.is-style-jr-pull { margin: 0; border: 0; font-style: normal; }
.wp-block-quote.is-style-jr-card { background: var(--navy); color: var(--on-navy); padding: clamp(1.75rem, 3vw + 0.75rem, 3.5rem); }
.wp-block-quote.is-style-jr-card p { margin: 0; font: 400 clamp(1.375rem, 1.1vw + 1.1rem, 2rem)/1.32 var(--f-display); letter-spacing: -0.005em; color: var(--on-navy); }
.wp-block-quote.is-style-jr-card p + p { margin-top: 0.75em; }
.wp-block-quote.is-style-jr-card cite { display: block; margin-top: var(--sp-3); font: 400 var(--s-small)/1.5 var(--f-text); font-style: normal; color: var(--on-navy-muted); }
.wp-block-quote.is-style-jr-card a { color: var(--on-navy); text-decoration-color: rgba(255, 255, 255, 0.5); }
.wp-block-quote.is-style-jr-card :focus-visible { outline-color: var(--on-navy); }
.wp-block-quote.is-style-jr-pull { position: relative; padding: 0 0 0.25rem 2.25rem; }
.wp-block-quote.is-style-jr-pull p { margin: 0; font: 400 clamp(1.5rem, 1.6vw + 1.1rem, 2.375rem)/1.25 var(--f-display); letter-spacing: -0.01em; color: var(--ink); }
.wp-block-quote.is-style-jr-pull cite { display: block; margin-top: var(--sp-2); font: 400 var(--s-small)/1.5 var(--f-text); font-style: normal; color: var(--muted); }
.wp-block-quote.is-style-jr-pull::before { content: ""; position: absolute; width: 2px; background: var(--crimson); left: 1rem; top: 0.45rem; bottom: 1rem; }
.wp-block-quote.is-style-jr-pull::after { content: ""; position: absolute; border-right: 2px solid var(--crimson); border-bottom: 2px solid var(--crimson); left: 0.25rem; bottom: 0.25rem; width: calc(0.75rem + 2px); height: 0.875rem; border-bottom-right-radius: 0.75rem 0.875rem; }

/* Block style: Numbered steps (core/list, ordered) */
ol.is-style-jr-steps { list-style: none; counter-reset: step; margin: 0; padding: 0; display: grid; gap: var(--sp-3) var(--sp-4); font-family: var(--f-text); font-size: var(--s-body); }
@media (min-width: 40rem) { ol.is-style-jr-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { ol.is-style-jr-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } ol.is-style-jr-steps:has(> li:nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
ol.is-style-jr-steps > li { counter-increment: step; position: relative; margin: 0; padding-top: var(--sp-2); border-top: 1px solid var(--stone); color: var(--text); }
ol.is-style-jr-steps > li::before { content: counter(step) / ""; display: block; margin-bottom: 0.5rem; font: 500 1.125rem/1 var(--f-display); color: var(--muted); font-variant-numeric: lining-nums; }
ol.is-style-jr-steps strong { display: block; margin-bottom: 0.5rem; font: 500 var(--s-h3)/1.2 var(--f-display); color: var(--ink); }
@media (min-width: 64rem) { .cta-band:has(> .cta-band__contact) > ol.is-style-jr-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Block style: Figures (core/table) */
.is-style-jr-figures { overflow: visible; }
.is-style-jr-figures table { width: 100%; border-collapse: collapse; background: var(--white); font: 400 var(--s-small)/1.45 var(--f-text); font-variant-numeric: lining-nums tabular-nums; }
.is-style-jr-figures :is(th, td) { text-align: left; vertical-align: top; padding: 0.875rem 1rem; border: 0; border-bottom: 1px solid var(--stone); }
.is-style-jr-figures thead { border: 0; }
.is-style-jr-figures thead th { padding-block: 0.75rem; border-bottom: 1px solid var(--ink); font: 650 var(--s-xs)/1.3 var(--f-text); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); }
.is-style-jr-figures tbody th, .is-style-jr-figures tbody td:first-child { font-weight: 500; color: var(--ink); }
.is-style-jr-figures td { color: var(--text); }
.is-style-jr-figures figcaption { margin-top: 0.75rem; font-size: var(--s-xs); line-height: 1.5; color: var(--muted); text-align: left; }
.is-style-jr-figures strong { color: var(--crimson); font-weight: 700; }
@media (max-width: 39.98rem) {
  .is-style-jr-figures thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .is-style-jr-figures table, .is-style-jr-figures tbody { display: block; }
  .is-style-jr-figures tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 0.75rem; padding: 0.875rem 1rem 1rem; border-bottom: 1px solid var(--stone); }
  .is-style-jr-figures tbody td:first-child, .is-style-jr-figures tbody th { grid-column: 1 / -1; margin-bottom: 0.5rem; }
  .is-style-jr-figures :is(th, td) { display: block; padding: 0; border: 0; }
  .is-style-jr-figures td[data-label]:not(:first-child)::before { content: attr(data-label); display: block; margin-bottom: 0.125rem; font: 600 0.75rem/1.3 var(--f-text); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
}

/* Patterns: full-width sections. Children line up with the site wrap; each may be narrower. */
.entry-content--canvas > :not(.alignfull) { width: calc(100% - 2 * var(--margin)); max-width: calc(81rem - 2 * var(--margin)); margin-inline: auto; }
.entry-content--canvas > * + * { margin-top: var(--sp-5); }
.entry-content--canvas > .alignfull + * { margin-top: clamp(2.5rem, 4vw + 1rem, 5rem); }
.entry-content--canvas > :not(.alignfull):last-child { margin-bottom: clamp(2.5rem, 4vw + 1rem, 5rem); }
.entry-content--canvas > .alignfull, .entry-content--canvas > * + .alignfull { margin-block: 0; }
.entry-content--canvas > :not(.alignfull) + .alignfull { margin-top: clamp(2.5rem, 4vw + 1rem, 5rem); }
.jr-section, .jr-hero { padding-inline: var(--margin); }
.jr-section { padding-block: var(--section); }
.jr-section > *, .jr-hero > * { margin-left: max(0px, calc((100% - 81rem + 2 * var(--margin)) / 2)); margin-right: auto; }
:where(.jr-section, .jr-hero) > * { max-width: calc(81rem - 2 * var(--margin)); }
/* Media figures carry their own max-width: 100%, which beat the zero-specificity rule above and pushed them into the right margin */
.jr-section > :is(figure, .wp-block-video, .wp-block-embed, .wp-block-image) { max-width: calc(81rem - 2 * var(--margin)); }
/* Section headings had no space beneath them, so text and the video sat directly against the heading */
.jr-section > :is(h2, h3) + * { margin-top: var(--sp-3); }
.jr-section.has-white-background-color + .jr-section.has-white-background-color { border-top: 1px solid var(--stone); }
.jr-hero { padding-block: clamp(2rem, 3vw + 1rem, 5.5rem) clamp(3rem, 4vw + 1.5rem, 6.5rem); }
.jr-hero > .hero__lede { margin-top: var(--sp-3); }
.jr-hero > .hero__actions { margin-top: var(--sp-4); }
.jr-hero > .hero__note { margin-top: 0.75rem; font-size: var(--s-small); color: var(--muted); }
@media (max-width: 39.98rem) {
  .jr-hero { padding-block: 1.25rem 1.75rem; }
  .jr-hero > .hero__lede { margin-top: 1rem; }
  .jr-hero > .hero__actions { margin-top: 1.25rem; }
}
.section__head > :last-child { margin-bottom: 0; }

/* Pattern: people grid (core/group "people" > groups "person" > image, name, role, biography) */
.people > .person { margin: 0; }
.people .person > * { margin-block: 0; }
.people .person > .person__role { margin-top: 0.375rem; }
.people .person > .person__bio { margin-top: var(--sp-3); }
.person > .person__photo { grid-column: 1; grid-row: 1 / span 2; align-self: start; width: 100%; max-width: 7.5rem; margin: 0; }
.person__photo img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; object-position: 50% 22%; }
.person:not(:has(> .person__photo, > .portrait)) > * { grid-column: 1 / -1; grid-row: auto; }

/* Pattern: FAQ (core/details inside a group "faq") */
.faq > details { margin: 0; }
.faq details > :not(summary) { max-width: 40em; margin: 0 0 var(--sp-2); color: var(--text); }
.faq details > :last-child { padding-bottom: var(--sp-1); }

/* Particulars inside content (the [jr_particulars] shortcode) */
.entry-content .particulars { max-width: 46rem; font-family: var(--f-text); font-size: var(--s-body); }

/* Fluent Forms (shortcode, block and Elementor widget): brand the fields without touching layout.
   !important only where Fluent Forms writes the submit colours as inline styles. */
:is(.fluentform, .frm-fluent-form) { font-family: var(--f-text); font-size: 1rem; line-height: 1.5; color: var(--text); }
:is(.fluentform, .frm-fluent-form) .ff-el-input--label label { font-weight: 650; color: var(--ink); }
:is(.fluentform, .frm-fluent-form) .ff-el-form-control { min-height: 3.25rem; padding: 0.75rem 0.875rem; border: 1px solid var(--line-strong); border-radius: 1px; background-color: var(--white); color: var(--ink); font: 400 1.0625rem/1.4 var(--f-text); }
:is(.fluentform, .frm-fluent-form) textarea.ff-el-form-control { min-height: 9rem; }
:is(.fluentform, .frm-fluent-form) .ff-el-form-control:hover { border-color: var(--ink); }
:is(.fluentform, .frm-fluent-form) .ff-el-form-control:focus { border-color: var(--ink); box-shadow: none; }
:is(.fluentform, .frm-fluent-form) .ff-el-form-control:focus-visible { outline: 3px solid var(--crimson); outline-offset: 1px; }
:is(.fluentform, .frm-fluent-form) .ff-btn-submit { min-height: 3.25rem; padding: 0.8rem 1.5rem; border: 1px solid transparent !important; border-radius: 1px !important; background-color: var(--crimson) !important; color: var(--white) !important; font: 650 1rem/1.25 var(--f-text); }
:is(.fluentform, .frm-fluent-form) .ff-btn-submit:hover { background-color: var(--crimson-press) !important; }
:is(.fluentform, .frm-fluent-form) .ff-el-help-message, :is(.fluentform, .frm-fluent-form) .ff-el-tc { font-size: var(--s-small); color: var(--muted); }
:is(.fluentform, .frm-fluent-form) .error, :is(.fluentform, .frm-fluent-form) .text-danger { color: var(--crimson); }

/* Patterns inside reading-width pages: cards and bands keep the interface face, not the reading face */
.prose :is(.people, .cta-band, ol.is-style-jr-steps) { font: 400 var(--s-body)/1.6 var(--f-text); }
.prose .people { margin-top: 2em; }

/* The skip link moves focus to <main tabindex="-1">; it needs no ring of its own */
.site-main:focus { outline: none; }

/* ==========================================================================
   Core blocks in native content (0.3.0). Elementor is being retired, so converted pages arrive as core blocks:
   give the common ones the approved look wherever they appear (reading-width pages and Full width pages alike).
   ========================================================================== */

/* Full width pages: content that does not start with a full-width band needs air under the header, and blocks
   narrower than the site wrap line up with its left edge rather than centring */
.entry-content--canvas > :not(.alignfull):first-child { margin-top: clamp(2.5rem, 4vw + 1rem, 5rem); }
.entry-content--canvas > :not(.alignfull) { margin-left: max(var(--margin), calc((100% - 81rem) / 2 + var(--margin))); margin-right: auto; }

/* Separator: a stone rule the width of its column */
.entry-content .wp-block-separator { height: 0; border: 0; border-top: 1px solid var(--stone); opacity: 1; }
.prose > .wp-block-separator { width: 100%; max-width: var(--measure); margin-inline: 0; }

/* Quote (default style) and pullquote: the design's pull quote, with the crimson J stroke */
.entry-content .wp-block-quote:not([class*="is-style-jr"]) { padding: 0 0 0 var(--sp-3); border: 0; border-left: 1px solid var(--stone); font-style: normal; }
.entry-content .wp-block-quote:not([class*="is-style-jr"]) p { font: 400 var(--s-lead)/1.45 var(--f-display); color: var(--ink); }
.entry-content .wp-block-quote:not([class*="is-style-jr"]) cite, .entry-content .wp-block-pullquote cite { display: block; margin-top: var(--sp-2); font: 400 var(--s-small)/1.5 var(--f-text); font-style: normal; color: var(--muted); }
.entry-content .wp-block-pullquote { position: relative; margin-block: 1.75em; padding: 0 0 0.25rem 2.25rem; border: 0; text-align: left; }
.entry-content .wp-block-pullquote blockquote { margin: 0; padding: 0; border: 0; font-style: normal; }
.entry-content .wp-block-pullquote p { margin: 0; font: 400 clamp(1.5rem, 1.6vw + 1.1rem, 2.375rem)/1.25 var(--f-display); letter-spacing: -0.01em; color: var(--ink); }
.entry-content .wp-block-pullquote::before { content: ""; position: absolute; width: 2px; background: var(--crimson); left: 1rem; top: 0.45rem; bottom: 1rem; }
.entry-content .wp-block-pullquote::after { content: ""; position: absolute; border-right: 2px solid var(--crimson); border-bottom: 2px solid var(--crimson); left: 0.25rem; bottom: 0.25rem; width: calc(0.75rem + 2px); height: 0.875rem; border-bottom-right-radius: 0.75rem 0.875rem; }

/* Details on their own (converted Elementor toggles) look like the FAQ rows */
.entry-content .wp-block-details { border-top: 1px solid var(--stone); border-bottom: 1px solid var(--stone); }
.entry-content .wp-block-details + .wp-block-details { border-top: 0; margin-top: 0; }
.entry-content .wp-block-details > summary { position: relative; display: flex; align-items: center; min-height: 3.5rem; padding: 1.125rem 3rem 1.125rem 0; list-style: none; cursor: pointer; font: 500 var(--s-h3)/1.25 var(--f-display); color: var(--ink); }
.entry-content .wp-block-details > summary::-webkit-details-marker { display: none; }
.entry-content .wp-block-details > summary::before, .entry-content .wp-block-details > summary::after { content: ""; position: absolute; right: 0.5rem; top: 50%; width: 1rem; height: 1.5px; background: var(--ink); transition: transform var(--t-hover) var(--ease); }
.entry-content .wp-block-details > summary::after { transform: rotate(90deg); }
.entry-content .wp-block-details[open] > summary::after { transform: rotate(0deg); }
.entry-content .wp-block-details > :not(summary) { max-width: 40em; margin: 0 0 var(--sp-2); }
.faq > .wp-block-details { border-bottom: 0; }

/* Tables in any content: stone rules, ink header; wide tables scroll inside their figure */
.entry-content .wp-block-table { overflow-x: auto; }
.entry-content .wp-block-table table { display: table; width: 100%; border-collapse: collapse; font: 400 var(--s-small)/1.45 var(--f-text); font-variant-numeric: tabular-nums; }
.entry-content .wp-block-table :is(th, td) { padding: 0.625rem 0.875rem 0.625rem 0; border: 0; border-bottom: 1px solid var(--stone); text-align: left; vertical-align: top; }
.entry-content .wp-block-table thead { border-bottom: 0; }
.entry-content .wp-block-table thead th { border-bottom: 1px solid var(--ink); font-weight: 650; color: var(--ink); }
.entry-content .wp-block-table.is-style-stripes { border-bottom: 0; }
.entry-content .wp-block-table.is-style-stripes tbody tr:nth-child(odd) { background: var(--ivory-deep); }
.entry-content .wp-block-table.is-style-stripes :is(th, td) { padding-left: 0.875rem; }
.entry-content .wp-block-table figcaption { margin-top: 0.75rem; font: 400 var(--s-xs)/1.5 var(--f-text); color: var(--muted); text-align: left; }

/* A group given a background colour gets padding (bands and block styles keep their own) */
.entry-content .wp-block-group.has-background:not(.jr-section):not(.jr-hero):not([class*="is-style-jr"]) { padding: var(--sp-3) clamp(1.25rem, 2.5vw, 2rem); }

/* Columns: the design's gaps, and stacked columns spaced on phones */
.entry-content .wp-block-columns { gap: var(--sp-4) var(--sp-5); margin-block: 1.75em; }
.entry-content .wp-block-column > :first-child { margin-top: 0; }
.prose > .wp-block-columns { font: 400 var(--s-body)/1.6 var(--f-text); }

/* Media and text: stack on phones with a gap; image fills its half */
.entry-content .wp-block-media-text { gap: var(--sp-4); margin-block: 1.75em; }
.entry-content .wp-block-media-text__media img { width: 100%; height: auto; }

/* Images and embeds in content */
.entry-content .wp-block-image { margin-block: 1.75em; }
.entry-content .wp-block-embed { margin-block: 1.75em; }
.entry-content .wp-block-embed__wrapper iframe { width: 100%; }

/* Latest posts (the likely replacement for the home page's Elementor Pro "posts" widget): the guidance list */
.entry-content .wp-block-latest-posts { margin: 1.75em 0; padding: 0; list-style: none; }
.entry-content .wp-block-latest-posts:not(.is-grid) { border-bottom: 1px solid var(--stone); }
.entry-content .wp-block-latest-posts li { margin: 0; padding-block: var(--sp-3); border-top: 1px solid var(--stone); }
.entry-content .wp-block-latest-posts__post-title { font: 500 var(--s-h3)/1.25 var(--f-display); color: var(--ink); text-decoration-color: rgba(20, 43, 63, 0.3); }
.entry-content .wp-block-latest-posts__post-date, .entry-content .wp-block-latest-posts__post-author { display: block; margin-top: 0.375rem; font: 650 var(--s-xs)/1.4 var(--f-text); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.entry-content .wp-block-latest-posts__post-excerpt { margin: 0.375rem 0 0; font: 400 var(--s-small)/1.55 var(--f-text); color: var(--muted); }

/* Archive cards with the post's featured image (Neve showed them) */
.post-card .post-card__image { display: block; }
.post-card .post-card__image img { width: 100%; height: auto; } /* the whole image: some thumbnails carry text */
@media (min-width: 40rem) {
  .post-card:has(> .post-card__image) { grid-template-columns: 12rem minmax(0, 1fr); column-gap: var(--sp-3); align-items: start; }
}

/* Older content with fixed widths (inline table widths, Word tables, [video], custom calculators) must not widen
   the page on phones: cap at the column and let tables scroll inside themselves */
.entry-content table, .entry-content .wp-video, .entry-content video, .entry-content :is(input, select, textarea, button) { max-width: 100%; }
.entry-content :is(input, select, textarea) { min-width: 0; }
.entry-content .wp-video { width: auto !important; } /* [video] writes its width inline */

/* Paragraphs nested in legacy markup (table cells, divs, list items) keep their spacing; .prose > * + * reaches top level only */
.prose p + p { margin-top: 1.1em; }

/* 0.3.3: legacy content and plugin output found by the visual review */

/* Legacy tables: full column width on wide screens (as under Neve); on phones cells wrap to fit as under Neve, and only a table
   too wide even when wrapped scrolls inside itself; padded cells; paragraphs inside cells keep their rhythm without outer gaps */
@media (max-width: 39.98rem) {
  :where(.prose table:not(.figures, .is-style-jr-figures table)) { display: block; max-width: 100%; overflow-x: auto; }
}
.prose :is(td, th) > p:first-child { margin-top: 0; }
.prose :is(td, th) > p:last-child { margin-bottom: 0; }

/* Groups in reading-width content keep the paragraph rhythm between their children */
.entry-content .wp-block-group:not(.people):not(.person):not(.cta-band):not(.cta-band__intro):not(.cta-band__contact):not(.faq):not(.jr-hero):not(.jr-section) > * + * { margin-top: 1em; }

/* Floated images: at most half the column, so text beside them never runs in a two-word strip; headings and rules
   start below any float; no floats on phones (see the 40rem rule above) */
.entry-content :is(img, figure, .wp-caption, .wp-block-image):is(.alignleft, .alignright), .entry-content .wp-block-image > figure:is(.alignleft, .alignright) { max-width: 50%; }
.entry-content .wp-block-image > figure:is(.alignleft, .alignright) img { height: auto; }
.prose > :is(h2, h3, h4, hr, .wp-block-separator, table, .wp-block-table) { clear: both; }
@media (max-width: 39.98rem) {
  .entry-content :is(img, figure, .wp-caption, .wp-block-image):is(.alignleft, .alignright), .entry-content .wp-block-image > figure:is(.alignleft, .alignright) { max-width: 100%; }
}

/* Fluent Forms step buttons (Next, Previous) reach the 44px touch target like the submit button */
:is(.fluentform, .frm-fluent-form) :is(.ff-btn-next, .ff-btn-prev, .ff-btn) { min-height: 2.75rem; padding-inline: 1.25rem; }

/* Mailchimp embedded sign-up forms in older posts: fields and button in the site's form style */
#mc_embed_signup { max-width: 40rem; font: 400 1rem/1.5 var(--f-text); background: transparent; }
#mc_embed_signup :is(h2, h3) { font: 500 var(--s-h3)/1.25 var(--f-display); color: var(--ink); margin: 0 0 var(--sp-2); }
#mc_embed_signup label { display: block; margin-bottom: 0.375rem; font-weight: 650; color: var(--ink); }
#mc_embed_signup .mc-field-group { margin-bottom: var(--sp-2); }
#mc_embed_signup :is(input[type="email"], input[type="text"]) { width: 100%; min-height: 3.25rem; padding: 0.75rem 0.875rem; border: 1px solid var(--line-strong); border-radius: 1px; background: var(--white); color: var(--ink); font: 400 1.0625rem/1.4 var(--f-text); }
#mc_embed_signup :is(input[type="email"], input[type="text"]):focus-visible { outline: 3px solid var(--crimson); outline-offset: 1px; border-color: var(--ink); }
#mc_embed_signup :is(input[type="submit"], .button) { min-height: 3.25rem; padding: 0.8rem 1.5rem; border: 0; border-radius: 1px; background: var(--crimson); color: var(--white); font: 650 1rem/1.25 var(--f-text); cursor: pointer; }
#mc_embed_signup :is(input[type="submit"], .button):hover { background: var(--crimson-press); }
#mc_embed_signup .indicates-required, #mc_embed_signup .asterisk { font-size: var(--s-small); color: var(--muted); }

/* Footer: social profiles and linked accreditation marks (the live footer's external links) */
.social { list-style: none; display: flex; flex-wrap: wrap; gap: 0.25rem 1.5rem; margin: 0; padding: 0; }
.social a { display: inline-flex; align-items: center; min-height: 2.75rem; font-weight: 650; color: var(--ink); }
.footer__nav .footer__label + .social { margin-top: 0; }
.footer__nav nav + .footer__label, .footer__group + .footer__label { margin-top: var(--sp-4); }
.footer__marks .marks a { display: block; padding: 0.25rem; }
.footer__marks .marks img, .footer__marks .marks img[src*="ICAEW"] { height: 3.75rem; width: auto; }
@media (max-width: 39.98rem) { .footer__marks .marks img, .footer__marks .marks img[src*="ICAEW"] { height: 2.875rem; } }

/* Archives and search with no posts */
.empty-state .lede { margin-bottom: var(--sp-3); }

/* 0.3.5: final-round visual review */

/* Legacy headings whose text sits in an inline-sized span (Neve rendered them as a bold lead): a bold lead here too */
.prose :is(h1, h2, h3, h4, h5, h6):has(> span[style*="font-size"]) { font: 600 var(--s-lead)/1.45 var(--f-display); letter-spacing: 0; max-width: var(--measure); text-wrap: pretty; }
.prose :is(h1, h2, h3, h4, h5, h6) > span[style*="font-size"] { font-size: inherit !important; }

/* h4 in reading content: a small heading, not body-size text (prototype h4 is an interface label) */
/* Zero specificity, like the plain-table rules: a page's own embedded h4 styles (mtd-income-tax) still win */
:where(.prose) h4 { font: 600 clamp(1.1875rem, 0.4vw + 1.1rem, 1.375rem)/1.3 var(--f-display); color: var(--ink); text-wrap: pretty; }

/* Core gallery items carry an orientation class "portrait" that collides with the people-card .portrait slot */
.gallery-icon.portrait, .gallery .portrait { display: block; width: auto; max-width: none; container-type: normal; }
.gallery-icon.portrait::before, .gallery-icon.portrait::after, .gallery .portrait::before, .gallery .portrait::after { content: none; }

/* WP Social Reviews slider: its pagination dots sit below the slider box; give them room */
.entry-content .wpsr-reviews-slider-wrapper-inner, .elementor .wpsr-reviews-slider-wrapper-inner { padding-bottom: 2.5rem; }

@media (max-width: 39.98rem) {
  /* Image captions under formerly floated images use the full width, not the image's width */
  .entry-content .wp-block-image:is(.alignleft, .alignright), .entry-content .wp-block-image > :is(.alignleft, .alignright) { display: block; }
  .entry-content .wp-block-image figcaption { display: block; caption-side: initial; }
  .entry-content .wp-caption { width: auto !important; }
  /* Fixed-layout core tables (converted rate tables): natural column widths that wrap between words to fit; figures are never split mid-number, and only a table still too wide scrolls inside its figure */
  .entry-content .wp-block-table table.has-fixed-layout { table-layout: auto; }
  .entry-content .wp-block-table table { width: 100%; }
  .entry-content .wp-block-table :is(th, td) { overflow-wrap: normal; word-break: normal; }
}