/* Express Expert Psychology
   One light theme, on purpose: every colour is painted explicitly rather than inherited.
   No scroll effects anywhere. The client dislikes text that animates in as you scroll,
   and nothing on this site needs motion to make sense. Hover states only. */

:root {
  --paper: #FBFAF7;
  --white: #FFFFFF;
  --panel: #F4F1F7;
  --panel-olive: #F5F3EA;
  --line: #E4DFEA;
  --field: #CFC7D9;

  --ink: #1E1528;
  --body: #3B3346;
  --muted: #5E566B;

  --purple: #2B0651;        /* from the logo */
  --purple-2: #43197A;
  --deep: #1A0833;
  --olive: #574E0F;         /* from the logo strapline */
  --olive-2: #7A6F1C;
  --gold: #C8A951;          /* accent: warm gold against the purple */
  --gold-2: #A98B32;
  --gold-soft: #E8D9A8;
  --panel-gold: #F7F2E3;

  --on-dark: #F3EEF8;
  --on-dark-muted: #CFC5DC;

  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --sans: "Work Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --brand: "Cormorant SC", Georgia, serif;

  --radius: 8px;
  --wrap: 1120px;
  --gutter: 24px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--body);
  font-family: var(--sans);
  font-size: 17.5px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: var(--purple); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--purple-2); }
:focus-visible { outline: 3px solid var(--olive-2); outline-offset: 3px; border-radius: 4px; }

h1, h2, h3 {
  font-family: var(--serif);
  color: var(--ink);
  font-weight: 600;
  line-height: 1.18;
  margin: 0 0 .5em;
  text-wrap: balance;
}
h1 { font-size: clamp(34px, 4.6vw, 50px); letter-spacing: -.01em; }
h2 { font-size: clamp(26px, 3vw, 33px); }
h3 { font-size: 21px; }
p { margin: 0 0 1em; }
ul, ol { margin: 0 0 1em; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.skip { position: absolute; left: -9999px; top: 12px; }
.skip:focus { left: 16px; background: var(--white); padding: 8px 14px; z-index: 50; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* ---------- Top bar ---------- */
.topbar { background: var(--deep); color: var(--on-dark-muted); font-size: 13.5px; }
.topbar .wrap { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 36px; }
.topbar a { color: var(--on-dark); text-decoration: none; }
.topbar a:hover { color: var(--white); text-decoration: underline; }
.topbar .tb-links { display: flex; gap: 22px; }
.topbar .tb-links a + a { position: relative; }
@media (max-width: 700px) { .topbar { display: none; } }

/* ---------- Header ---------- */
.site-header { background: var(--white); border-bottom: 1px solid var(--line); }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 78px; }
.brand { min-width: 0; margin-right: auto; }
.nav-mobile { flex: none; }
.site-header { position: relative; z-index: 30; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--purple); }
.brand img { width: 30px; height: auto; flex: none; }
.brand span {
  font-family: var(--brand); font-weight: 600; font-size: 22px; white-space: nowrap;
  letter-spacing: .02em; line-height: 1.05; color: var(--purple);
}
.nav-desktop { display: flex; align-items: center; gap: 2px; white-space: nowrap; }
.nav-desktop .nav-item { position: relative; }
.nav-desktop .nav-item > a { display: inline-block; padding: 26px 9px; color: var(--ink); text-decoration: none; font-size: 15px; font-weight: 500; white-space: nowrap; }
.nav-desktop .has-menu > a { padding-right: 22px; }
.nav-desktop .has-menu > a::after {
  content: ""; position: absolute; right: 8px; top: 50%; width: 6px; height: 6px; margin-top: -5px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg);
}
.nav-desktop .nav-item > a:hover, .nav-desktop .nav-item > a[aria-current="page"] { color: var(--purple); }
.nav-desktop .nav-item > a[aria-current="page"] { box-shadow: inset 0 -3px 0 var(--gold); }
.nav-desktop .menu {
  position: absolute; left: 0; top: 100%; z-index: 40; min-width: 260px; padding: 8px;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); border-top: 3px solid var(--gold);
  box-shadow: 0 14px 34px rgba(30, 21, 40, .14);
  opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .15s, transform .15s var(--ease), visibility 0s .15s;
}
.nav-desktop .has-menu:hover > .menu, .nav-desktop .has-menu:focus-within > .menu { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.nav-desktop .menu a { display: block; padding: 9px 12px; border-radius: 6px; color: var(--ink); text-decoration: none; font-size: 15px; }
.nav-desktop .menu a:hover, .nav-desktop .menu a[aria-current="page"] { background: var(--panel); color: var(--purple); }
.nav-desktop a.btn, .nav-desktop a.btn:hover { color: var(--white); text-decoration: none; padding: 10px 16px; margin-left: 10px; white-space: nowrap; }

.nav-mobile { display: none; }
@media (max-width: 1080px) {
  .nav-desktop { display: none; }
  .nav-mobile { display: block; position: relative; }
  .nav-mobile summary {
    list-style: none; cursor: pointer; font-weight: 600; color: var(--purple);
    border: 2px solid var(--purple); border-radius: 999px; padding: 7px 16px; font-size: 15px;
  }
  .nav-mobile summary::-webkit-details-marker { display: none; }
  .nav-mobile nav {
    position: absolute; right: 0; top: calc(100% + 10px); z-index: 30;
    display: grid; min-width: 250px; padding: 10px;
    background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
    box-shadow: 0 14px 34px rgba(30, 21, 40, .14);
  }
  .nav-mobile nav { max-height: calc(100vh - 140px); overflow: auto; min-width: 280px; }
  .nav-mobile nav a { padding: 9px 12px; color: var(--ink); text-decoration: none; border-radius: 6px; }
  .nav-mobile nav a:hover, .nav-mobile nav a[aria-current="page"] { background: var(--panel); color: var(--purple); }
  .nav-mobile .m-head { display: block; padding: 12px 12px 4px; font-size: 11.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-2); border-top: 1px solid var(--line); margin-top: 6px; }
  .nav-mobile .m-head:first-child { border-top: 0; margin-top: 0; }
  .nav-mobile .m-contact { margin-top: 8px; border-top: 1px solid var(--line); padding-top: 12px; font-weight: 600; color: var(--purple); }
}
@media (max-width: 460px) {
  .brand span { font-size: 18px; white-space: normal; max-width: 9em; }
  .brand img { width: 26px; }
}

/* ---------- Search ---------- */
.search-btn {
  flex: none; display: inline-grid; place-items: center; width: 40px; height: 40px; padding: 0;
  border-radius: 50%; border: 1px solid var(--line); background: var(--white); color: var(--purple); cursor: pointer;
  transition: border-color .15s, background .15s;
}
.search-btn[hidden] { display: none; }
.search-btn:hover { border-color: var(--purple); background: var(--panel); }
.search-dialog {
  width: min(640px, calc(100% - 32px)); max-height: 80vh; margin: 10vh auto auto; padding: 0;
  border: 1px solid var(--line); border-top: 4px solid var(--gold); border-radius: var(--radius);
  background: var(--white); color: var(--body); box-shadow: 0 24px 60px rgba(30, 21, 40, .25);
}
.search-dialog::backdrop { background: rgba(26, 8, 51, .45); }
.search-inner { padding: 18px 20px 14px; }
.search-top { display: flex; gap: 10px; align-items: center; }
.search-top input {
  flex: 1; min-width: 0; font: inherit; font-size: 17px; padding: 12px 14px;
  border: 1px solid var(--field); border-radius: 8px; background: var(--white); color: var(--ink);
}
.search-top input:focus { outline: 3px solid rgba(87, 78, 15, .3); outline-offset: 0; border-color: var(--olive); }
.search-close { font: inherit; font-size: 14.5px; font-weight: 600; color: var(--purple); background: none; border: 0; cursor: pointer; padding: 8px 6px; }
.search-note { font-size: 13.5px; color: var(--muted); margin: 10px 2px 4px; min-height: 1.2em; }
.search-results { list-style: none; margin: 0; padding: 0; overflow: auto; max-height: calc(80vh - 130px); }
.search-results a { display: block; padding: 10px 12px; border-radius: 6px; text-decoration: none; color: var(--body); }
.search-results a:hover, .search-results a:focus { background: var(--panel); outline: none; }
.search-results strong { display: block; font-family: var(--serif); font-size: 17px; color: var(--purple); margin-bottom: 2px; }
.search-results span { display: block; font-size: 14px; line-height: 1.45; color: var(--muted); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-block; font-family: var(--sans); font-weight: 600; font-size: 15.5px; line-height: 1.2;
  text-decoration: none; padding: 12px 22px; border-radius: 6px; cursor: pointer;
  border: 2px solid var(--purple); background: var(--purple); color: var(--white);
  transition: background .2s, color .2s, border-color .2s, transform .2s var(--ease);
}
.btn:hover { background: var(--purple-2); border-color: var(--purple-2); color: var(--white); transform: translateY(-1px); }
.btn-ghost { background: transparent; color: var(--purple); }
.btn-ghost:hover { background: var(--purple); color: var(--white); }
.btn[disabled] { opacity: .6; cursor: progress; transform: none; }

/* ---------- Breadcrumbs ---------- */
.crumbs { font-size: 14px; color: var(--muted); padding-top: 22px; }
.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.crumbs li + li::before { content: "/"; margin-right: 6px; color: #B3AABD; }
.crumbs a { color: var(--muted); }

/* ---------- Heroes ---------- */
.hero { padding: 34px 0 48px; background: var(--white); border-bottom: 4px solid var(--gold); }
.hero .eyebrow { color: var(--gold-2); }
.crumbs + .hero, .crumbs ~ .hero { margin-top: 0; }
main > .crumbs { background: var(--white); max-width: none; padding-left: 0; padding-right: 0; }
main > .crumbs ol { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.eyebrow {
  font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--olive); margin: 0 0 14px;
}
.lead { font-size: 20px; line-height: 1.6; color: var(--body); max-width: 42em; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 26px; }

.hero-home { background: var(--purple); color: var(--on-dark); padding: 48px 0 52px; border-bottom: 4px solid var(--gold); }
.hero-home .wrap { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 56px; align-items: center; }
.hero-home .eyebrow { color: var(--gold-soft); }
.hero-home h1 { color: var(--white); max-width: 13em; font-size: clamp(32px, 3.6vw, 44px); }
.hero-home .lead { color: var(--on-dark); max-width: 36em; font-size: 18px; }
.hero-home .actions { margin-top: 22px; }
.hero-home .btn { background: var(--gold); color: var(--ink); border-color: var(--gold); }
.hero-home .btn:hover { background: var(--gold-soft); border-color: var(--gold-soft); color: var(--ink); }
.hero-home .btn-ghost { background: transparent; color: var(--white); border-color: rgba(255, 255, 255, .6); }
.hero-home .btn-ghost:hover { background: rgba(255, 255, 255, .12); border-color: var(--white); color: var(--white); }
.hero-portrait { margin: 0; }
.hero-portrait img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius); display: block; box-shadow: 0 18px 40px rgba(0, 0, 0, .28); border: 1px solid rgba(255, 255, 255, .18); }
.doors-band { background: var(--paper); padding: 28px 0 56px; }
@media (max-width: 820px) {
  .hero-home { padding: 36px 0 40px; }
  .hero-home .wrap { grid-template-columns: 1fr; gap: 28px; }
  .hero-portrait { max-width: 240px; }
}

/* ---------- Three doors ---------- */
.doors { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.door {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  text-decoration: none; color: var(--body); box-shadow: 0 6px 18px rgba(30, 21, 40, .06);
  transition: border-color .2s, transform .2s var(--ease), box-shadow .2s;
}
.door:hover { border-color: var(--purple); transform: translateY(-2px); box-shadow: 0 12px 28px rgba(43, 6, 81, .12); color: var(--body); }
.door-img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; flex: none; }
.door-body { display: flex; flex-direction: column; flex: 1; padding: 20px 22px 22px; }
.door h2 { font-size: 21px; color: var(--purple); margin-bottom: .4em; }
.door p { margin: 0 0 16px; flex: 1; font-size: 16px; }
.door .go { font-weight: 600; color: var(--purple); font-size: 15px; }
@media (max-width: 860px) { .doors { grid-template-columns: 1fr; } }

/* ---------- Sections ---------- */
.section { padding: 56px 0; }
.section.tint { background: var(--panel); }
.section.white { background: var(--white); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.section.tight { padding-top: 0; }
.section-head { max-width: 44em; margin-bottom: 28px; }
.section-head h2::before, .split h2:first-child::before, .prose > h2:first-child::before {
  content: ""; display: block; width: 40px; height: 4px; background: var(--gold); border-radius: 2px; margin-bottom: 14px;
}
.section.where { background: var(--panel-gold); border-top: 1px solid #E6DCBE; border-bottom: 1px solid #E6DCBE; }
.section.where .prose { max-width: 50em; }
.section-head p:last-child { margin-bottom: 0; }
.prose { max-width: 44em; }
.prose ul { padding-left: 1.2em; }
.prose li { margin-bottom: 6px; }
.stack > * + * { margin-top: 48px; }

/* ---------- Credentials strip ---------- */
.proof { background: var(--panel-gold); border-top: 1px solid #E6DCBE; border-bottom: 1px solid #E6DCBE; }
.creds { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.creds li { display: flex; align-items: center; gap: 18px; padding: 24px 32px; border-left: 1px solid #E6DCBE; min-width: 0; }
.creds li:first-child { border-left: 0; padding-left: 0; }
.creds li:last-child { padding-right: 0; }
.creds span { font-size: 14.5px; line-height: 1.5; color: var(--body); }
.creds .logo { height: 64px; width: auto; flex: none; }
.creds .stat strong { font-family: var(--serif); font-size: 44px; font-weight: 600; line-height: 1; color: var(--purple); letter-spacing: -.02em; flex: none; }
.creds .stat span { max-width: 11em; }
@media (max-width: 900px) {
  .creds { grid-template-columns: 1fr; }
  .creds li { border-left: 0; padding: 16px 0; border-top: 1px solid #E6DCBE; }
  .creds li:first-child { border-top: 0; }
  .creds .stat strong { font-size: 38px; }
  .creds .logo { height: 56px; }
}

/* ---------- Quote ---------- */
.quote { margin: 0; max-width: 50em; border-left: 4px solid var(--gold); padding: 4px 0 4px 26px; }
.quote.big { max-width: none; background: var(--panel-gold); border-left: 0; border-top: 4px solid var(--gold); border-radius: var(--radius); padding: 30px 34px; }
.quote.big blockquote { max-width: 30em; }
.quote blockquote {
  margin: 0 0 14px; font-family: var(--serif); font-style: italic;
  font-size: clamp(21px, 2.4vw, 27px); line-height: 1.42; color: var(--ink);
}
.quote blockquote p { margin: 0; }
.quote figcaption { font-size: 15px; color: var(--muted); }
.quote.small blockquote { font-size: 19px; }
.quotes { display: grid; gap: 36px; }

/* ---------- Cards ---------- */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; }
/* five cards: 3 + 2 in a full-width grid; 2 + 2 + 1 (last full width) inside a split column, so no orphan sits alone */
@media (min-width: 900px) {
  .cards:has(> .card:nth-child(5):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .split .cards:has(> .card:nth-child(5):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split .cards:has(> .card:nth-child(5):last-child) > .card:last-child { grid-column: 1 / -1; }
}
.cards.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 760px) { .cards.two { grid-template-columns: 1fr; } }
.card { position: relative; overflow: hidden; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; }
.card::before { content: ""; position: absolute; left: 0; top: 0; height: 4px; width: 100%; background: var(--gold); opacity: .55; transition: opacity .2s; }
a.card:hover::before { opacity: 1; }
a.card { display: block; text-decoration: none; color: var(--body); transition: border-color .2s, transform .2s var(--ease); }
a.card:hover { border-color: var(--purple); transform: translateY(-2px); color: var(--body); }
.card :is(h2, h3) { font-size: 21px; color: var(--purple); margin-bottom: .35em; }
.card p:last-child { margin-bottom: 0; }
.card .go { display: inline-block; margin-top: 10px; font-weight: 600; color: var(--purple); }

/* ---------- Checklist ----------
   The marker is absolutely positioned. Making the item a flex container would turn any
   inline child (a link, a strong) into its own column. */
.checklist { list-style: none; margin: 0 0 1em; padding: 0; }
.checklist li { position: relative; padding-left: 30px; margin-bottom: 10px; }
.checklist li::before {
  content: ""; position: absolute; left: 3px; top: .5em;
  width: 13px; height: 7px;
  border-left: 2.5px solid var(--olive); border-bottom: 2.5px solid var(--olive);
  transform: rotate(-45deg);
}
.checklist.cols { columns: 2; column-gap: 40px; }
.checklist.cols li { break-inside: avoid; }
@media (max-width: 760px) { .checklist.cols { columns: 1; } }

/* ---------- Key facts ---------- */
.facts-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 0 24px 8px; overflow: hidden; }
.facts-card h2 { font-size: 18px; margin: 0 -24px 6px; padding: 14px 24px; background: var(--purple); color: var(--white); border-bottom: 3px solid var(--gold); }
.facts-card h2::before { display: none; }
.facts-card .fee { margin-top: 14px; }
.facts { margin: 0; }
.facts div { padding: 13px 0; border-bottom: 1px solid var(--line); }
.facts div:last-child { border-bottom: 0; }
.facts dt { font-weight: 600; color: var(--ink); font-size: 15px; }
.facts dd { margin: 2px 0 0; font-size: 15.5px; }

/* Main column plus a sticky facts rail, so a wide screen has no dead space
   and the answers a solicitor needs stay in view. */
.split { display: block; }
.split aside { margin-top: 40px; }
@media (min-width: 1020px) {
  .split { display: grid; grid-template-columns: minmax(0, 1fr) 350px; gap: 56px; align-items: start; }
  .split aside { margin-top: 0; position: sticky; top: 24px; }
}

/* ---------- Steps ---------- */
.steps { list-style: none; counter-reset: step; margin: 0; padding: 0; display: grid; gap: 14px; }
.steps li {
  counter-increment: step; position: relative; padding: 18px 20px 18px 70px;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
}
.steps li::before {
  content: counter(step); position: absolute; left: 20px; top: 17px;
  width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  background: var(--purple); color: var(--white); font-weight: 600; font-size: 15px;
  box-shadow: 0 0 0 3px var(--gold-soft);
}
.steps strong { display: block; color: var(--ink); margin-bottom: 2px; }
.steps p { margin: 0; }

/* ---------- FAQ ---------- */
.faq { max-width: 50em; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  cursor: pointer; list-style: none; position: relative;
  padding: 16px 36px 16px 0; font-weight: 600; color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 6px; top: 11px; font-size: 24px; font-weight: 400; color: var(--purple); }
.faq details[open] summary::after { content: "\2212"; }
.faq details > div { padding: 0 0 18px; }
.faq details p:last-child { margin-bottom: 0; }

/* ---------- Call to action ---------- */
.cta { background: var(--purple); color: var(--on-dark); border-radius: 14px; padding: 44px; }
.cta h2 { color: var(--white); }
.cta p { color: var(--on-dark); max-width: 40em; }
.cta { border-top: 4px solid var(--gold); }
.cta .btn { background: var(--gold); color: var(--ink); border-color: var(--gold); }
.cta .btn:hover { background: var(--gold-soft); border-color: var(--gold-soft); color: var(--ink); }
.cta .mail { color: var(--white); font-weight: 500; }
@media (max-width: 600px) { .cta { padding: 30px 24px; } }

/* ---------- People ---------- */
.person { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 26px; align-items: start; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; }
.person h2::before, .person h3::before { display: none; }
.initials {
  width: 112px; height: 112px; border-radius: 50%; display: grid; place-items: center;
  background: var(--panel); border: 1px solid var(--line);
  color: var(--purple); font-family: var(--serif); font-size: 38px; font-weight: 600;
}
.person .role { color: var(--olive); font-weight: 600; margin: -4px 0 .8em; }
.person + .person { margin-top: 18px; }
.tags { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0 0 1em; }
.tags li { background: var(--panel-olive); color: var(--olive); font-size: 14px; font-weight: 500; padding: 4px 12px; border-radius: 999px; }
@media (max-width: 600px) {
  .person { grid-template-columns: 1fr; gap: 14px; }
  .initials { width: 80px; height: 80px; font-size: 28px; }
}

/* ---------- Contact ----------
   One form at a time. The forms are hidden until their anchor is the URL target, so
   /contact#instruct opens the right one from any page and the choice works without
   JavaScript. site.js only marks the chosen tile. */
.choose-head { font-size: 22px; margin: 44px 0 18px; }
.choose-head::before { display: none; }
.choices-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 28px; }
.choice {
  display: flex; flex-direction: column; gap: 6px; padding: 20px 22px; text-decoration: none; color: var(--body);
  background: var(--white); border: 2px solid var(--line); border-radius: var(--radius);
  transition: border-color .15s, transform .15s var(--ease);
}
.choice strong { font-family: var(--serif); font-size: 19px; color: var(--purple); }
.choice span { font-size: 14.5px; color: var(--muted); }
.choice:hover { border-color: var(--purple); transform: translateY(-1px); color: var(--body); }
.choice.is-active { border-color: var(--purple); background: var(--panel); box-shadow: inset 0 -4px 0 var(--gold); }
.form-block { display: none; }
.form-block:target { display: block; }
@media (max-width: 760px) { .choices-grid { grid-template-columns: 1fr; } }

.email-big { font-family: var(--serif); font-size: clamp(22px, 3vw, 30px); font-weight: 600; word-break: break-word; margin-bottom: 6px; }
.phone-big { font-family: var(--serif); font-size: clamp(20px, 2.6vw, 26px); font-weight: 600; }
.phone-big a { text-decoration: none; }
.form-block {
  background: var(--white); border: 1px solid var(--line); border-radius: 14px;
  padding: 32px; scroll-margin-top: 20px;
}
.form-block + .form-block { margin-top: 28px; }
.form-block:target { border-color: var(--purple); box-shadow: 0 0 0 3px rgba(43, 6, 81, .12); }
#enquiry { scroll-margin-top: 20px; }
.form-block > p { max-width: 44em; }
form .grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 20px; margin-top: 8px; }
form .full { grid-column: 1 / -1; }
@media (max-width: 700px) { form .grid { grid-template-columns: 1fr; } .form-block { padding: 24px 20px; } }
label, .legend { display: block; font-weight: 600; color: var(--ink); font-size: 15.5px; margin-bottom: 6px; }
.req { color: var(--olive); }
.hint { display: block; font-weight: 400; color: var(--muted); font-size: 14px; margin-top: 2px; }
input[type="text"], input[type="email"], input[type="tel"], select, textarea {
  width: 100%; font: inherit; font-size: 16px; padding: 11px 13px;
  border: 1px solid var(--field); border-radius: 8px; background: var(--white); color: var(--ink);
}
textarea { min-height: 130px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 3px solid rgba(87, 78, 15, .3); outline-offset: 0; border-color: var(--olive); }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.choices { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.choices label { display: flex; align-items: center; gap: 8px; margin: 0; font-weight: 400; }
.check { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; margin: 0; }
.check input { margin-top: 6px; }
.form-note { font-size: 14.5px; color: var(--muted); }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 22px; }

/* Honeypot. Off-screen, never display:none, so bots that skip hidden fields still see it
   and a real visitor never does. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-status { margin-top: 18px; }
.notice { border-radius: 10px; padding: 16px 18px; border: 1px solid; }
.notice p:last-child { margin-bottom: 0; }
.notice.ok { background: #EFF6EE; border-color: #B9D6B4; color: #1F3D1B; }
.notice.warn { background: #FBF6E6; border-color: #E2CF86; color: #463A05; }
.notice pre {
  white-space: pre-wrap; font-family: var(--sans); font-size: 14px; color: var(--ink);
  background: var(--white); border: 1px solid var(--line); padding: 12px; border-radius: 6px;
  max-height: 260px; overflow: auto; margin: 8px 0 0;
}

/* ---------- Footer ---------- */
.site-footer { background: var(--deep); color: var(--on-dark-muted); padding: 56px 0 24px; font-size: 15px; line-height: 1.6; border-top: 4px solid var(--gold); }
.site-footer a { color: var(--on-dark); text-decoration: none; }
.site-footer a:hover { text-decoration: underline; color: var(--white); }
.f-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: 40px 48px; }
.f-grid p { margin: 0 0 10px; max-width: 30em; }
.f-grid h2 {
  font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--gold-soft); margin: 0 0 16px; padding-bottom: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.f-grid h2::before { display: none; }
.f-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.f-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.f-brand img { width: 30px; height: auto; }
.f-brand span { font-family: var(--brand); font-size: 22px; font-weight: 600; color: var(--white); line-height: 1.1; }
.f-contact { margin-top: 14px; display: grid; gap: 6px; }
.f-news { margin-top: 24px; max-width: 340px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .12); }
.f-news label { color: var(--white); font-size: 14px; margin-bottom: 8px; }
.f-news .row { display: flex; gap: 8px; }
.f-news input[type="email"] { flex: 1 1 140px; min-width: 0; width: auto; border-color: transparent; padding: 9px 12px; font-size: 14.5px; border-radius: 6px; }
.f-news .btn { background: var(--gold); color: var(--ink); border-color: var(--gold); padding: 9px 16px; font-size: 14.5px; }
.f-news .btn:hover { background: var(--gold-soft); border-color: var(--gold-soft); color: var(--ink); }
.f-news .form-note { color: var(--on-dark-muted); margin: 8px 0 0; font-size: 13px; }
.f-addr { margin: 14px 0 0; font-size: 13px; line-height: 1.6; color: rgba(255, 255, 255, .72); max-width: 34em; }
.f-addr strong { color: var(--white); font-weight: 600; }
.locations { display: grid; gap: 20px; margin-top: 28px; }
.locations h2 { font-size: 18px; margin: 0 0 6px; }
.locations p { margin: 0; color: var(--muted); }
@media (min-width: 700px) { .locations { grid-template-columns: 1fr 1fr; gap: 36px; } }
.f-legal { border-top: 1px solid rgba(255, 255, 255, .14); margin-top: 40px; padding-top: 20px; font-size: 13px; line-height: 1.7; display: flex; flex-wrap: wrap; gap: 4px 28px; }
.f-legal p { margin: 0; }
@media (max-width: 900px) { .f-grid { grid-template-columns: 1fr 1fr; gap: 36px; } .f-grid > div:first-child { grid-column: 1 / -1; } }
@media (max-width: 560px) { .f-grid { grid-template-columns: 1fr; } }

/* ---------- Images ---------- */
.hero-split .wrap { display: grid; gap: 40px; align-items: center; }
.hero-split .hero-text .lead { max-width: 34em; }
.hero-media img { width: 100%; height: auto; border-radius: var(--radius); aspect-ratio: 16 / 10; object-fit: cover; box-shadow: 0 16px 36px rgba(30, 21, 40, .16); border: 1px solid var(--line); }
@media (min-width: 900px) {
  .hero-split .wrap { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 56px; }
  .hero-split { padding: 44px 0 60px; }
}
.hero-person .portrait img { box-shadow: 0 16px 36px rgba(30, 21, 40, .16); border: 1px solid var(--line); }
@media (min-width: 900px) { .hero-person .wrap { grid-template-columns: minmax(0, 1fr) 320px; } }
@media (max-width: 899px) { .hero-person .portrait { max-width: 240px; } }
.video { margin: 0; max-width: 880px; }
.video video { width: 100%; height: auto; display: block; background: #000; border-radius: var(--radius); box-shadow: 0 16px 36px rgba(30, 21, 40, .16); }
.video figcaption { margin-top: 12px; color: var(--muted); font-size: 15px; }
.partner-logos { margin: 22px 0 0; }
.partner-logos { display: flex; align-items: center; gap: 36px; flex-wrap: wrap; }
.partner-logos img { width: 150px; height: auto; display: inline-block; }
.partner-logos img[alt="Exit"] { width: 110px; }
.h-logo { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.h-logo img { width: 60px; height: auto; flex: 0 0 auto; margin-top: 2px; }
.after-note { margin: 22px 0 0; color: var(--muted); max-width: 60em; }
.gauges { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 22px; align-items: start; }
.gauge { margin: 0; text-align: center; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 12px 14px; }
.gauge svg { width: 100%; max-width: 200px; height: auto; display: block; margin: 0 auto; }
.gauge figcaption { margin-top: 8px; font-size: 14px; color: var(--muted); line-height: 1.4; }
.media-grid { display: grid; gap: 32px; align-items: center; }
@media (min-width: 900px) { .media-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; } }
.about-grid { display: grid; gap: 32px; align-items: start; }
@media (min-width: 900px) { .about-grid { grid-template-columns: minmax(0, 1fr) 340px; gap: 56px; align-items: center; } }
.portrait { margin: 0; max-width: 340px; }
.portrait img { width: 100%; height: auto; border-radius: var(--radius); aspect-ratio: 4 / 5; object-fit: cover; }
.person .photo { width: 112px; height: 112px; border-radius: 50%; object-fit: cover; border: 1px solid var(--line); }
@media (max-width: 600px) { .person .photo { width: 80px; height: 80px; } }

/* ---------- Reveal on enter ----------
   Applied to cards, images and badges only. Text is never hidden or animated. */
.js .reveal { opacity: 0; transform: translateY(14px); transition: opacity .45s var(--ease), transform .45s var(--ease); }
.js .reveal.is-in { opacity: 1; transform: none; }
.js .reveal:nth-child(2) { transition-delay: .08s; }
.js .reveal:nth-child(3) { transition-delay: .16s; }
.js .reveal:nth-child(4) { transition-delay: .24s; }
@media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1; transform: none; transition: none; } }

/* ---------- Misc ---------- */
.mt { margin-top: 40px; }
.mt-s { margin-top: 24px; }
.note-box { background: var(--panel-olive); border: 1px solid #E6E1C8; border-radius: var(--radius); padding: 22px 24px; }
.note-box h2, .note-box h3 { font-size: 20px; }
.note-box p:last-child { margin-bottom: 0; }
.fee { font-family: var(--serif); font-size: 30px; font-weight: 600; color: var(--purple); line-height: 1.1; margin: 0 0 4px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; }
}