:root {
  --midnight: #152638;
  --midnight-2: #1E3147;
  --brass: #AA9166;
  --brass-dark: #7A6442;
  --chalk: #F6F3ED;
  --chalk-2: #EDE8DE;
  --slate: #66717B;
  --ink: #20262B;
  --rule: rgba(21, 38, 56, 0.14);
  --rule-light: rgba(246, 243, 237, 0.18);

  --serif: "Libre Baskerville", Georgia, "Times New Roman", serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.1875rem;
  --text-xl: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  --text-2xl: clamp(2rem, 1.4rem + 2.4vw, 3.25rem);
  --text-hero: clamp(2.4rem, 1.6rem + 3.6vw, 4.5rem);

  --s1: 0.25rem; --s2: 0.5rem; --s3: 0.75rem; --s4: 1rem; --s6: 1.5rem; --s8: 2rem;
  --s12: 3rem; --s16: 4rem; --s24: 6rem; --s32: 8rem;
  --wrap: 1180px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--sans);
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--ink);
  background: var(--chalk);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 400; line-height: 1.15; margin: 0; color: var(--midnight); letter-spacing: -0.005em; }
p { margin: 0; }
.wrap { width: min(var(--wrap), 100% - 2 * clamp(1.25rem, 5vw, 3rem)); margin-inline: auto; }

/* Eyebrow label */
.eyebrow {
  font-family: var(--sans);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--brass-dark);
  display: inline-flex; align-items: center; gap: var(--s3);
}
.eyebrow::before { content: ""; width: 28px; height: 1px; background: var(--brass); }
.on-dark .eyebrow { color: var(--brass); }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; gap: var(--s2);
  font-size: var(--text-sm); font-weight: 500; letter-spacing: 0.02em;
  padding: 0.9rem 1.5rem; border: 1px solid var(--midnight);
  color: var(--chalk); background: var(--midnight);
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.btn:hover { background: var(--midnight-2); }
.btn.ghost { background: transparent; color: var(--midnight); }
.btn.ghost:hover { background: rgba(21,38,56,.06); }
.on-dark .btn { background: var(--chalk); color: var(--midnight); border-color: var(--chalk); }
.on-dark .btn.ghost { background: transparent; color: var(--chalk); border-color: rgba(246,243,237,.5); }
.on-dark .btn.ghost:hover { border-color: var(--chalk); }
.btn:focus-visible, a:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; }

/* Header */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--chalk) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--rule);
}
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; height: 76px; }
.brand { display: inline-flex; align-items: center; gap: 14px; color: var(--midnight); }
.brand svg { height: 34px; width: auto; }
.brand .name { font-family: var(--serif); font-size: 1.05rem; letter-spacing: 0.14em; text-transform: uppercase; line-height: 1; }
.brand .sub { display: block; font-family: var(--sans); font-size: 0.6rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--slate); margin-top: 5px; }
.nav { display: flex; gap: clamp(1rem, 2.5vw, 2.25rem); align-items: center; }
.nav a { font-size: var(--text-sm); color: var(--midnight); position: relative; padding: 4px 0; }
.nav a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 1px; background: var(--brass); transition: right .25s ease; }
.nav a:hover::after { right: 0; }
.nav .btn { padding: 0.65rem 1.1rem; color: var(--chalk); }
.nav .btn:hover { color: var(--chalk); }
.nav .btn::after { display: none; }
.nav-toggle { display: none; }
@media (max-width: 860px) {
  .nav { display: none; }
  .nav-toggle { display: inline-flex; background: none; border: 1px solid var(--rule); padding: 8px 12px; font: inherit; font-size: var(--text-xs); letter-spacing: .14em; text-transform: uppercase; color: var(--midnight); }
}

/* Hero */
.hero { padding: clamp(3rem, 7vw, 6rem) 0 clamp(3rem, 6vw, 5rem); position: relative; overflow: hidden; }
.hero .grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.hero h1 { font-size: var(--text-hero); max-width: 14ch; margin-top: var(--s6); }
.hero h1 em { font-style: italic; color: var(--brass-dark); }
.hero .lede { font-size: var(--text-lg); color: var(--slate); max-width: 46ch; margin-top: var(--s6); line-height: 1.55; }
.hero .actions { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s8); }
.hero .figure { position: relative; }
.hero .figure img { aspect-ratio: 4 / 5; width: 100%; max-height: 640px; object-fit: cover; }
.hero .figure::after {
  content: ""; position: absolute; left: -18px; top: 10%; bottom: 10%; width: 2px; background: var(--brass);
}
.hero .caption { position: absolute; left: 0; right: 0; bottom: 0; padding: var(--s4) var(--s6); background: linear-gradient(to top, rgba(21,38,56,.85), transparent); color: var(--chalk); font-size: var(--text-xs); letter-spacing: .1em; text-transform: uppercase; }
@media (max-width: 860px) {
  .hero .grid { grid-template-columns: 1fr; }
  .hero .figure { display: none; }
  .hero { padding-top: clamp(2rem, 6vw, 3rem); }
}

/* Credentials strip */
.strip { border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); background: var(--chalk-2); }
.strip .wrap { display: grid; grid-template-columns: repeat(4, 1fr); }
.strip .item { padding: var(--s6) var(--s4) var(--s6) 0; font-size: var(--text-sm); color: var(--midnight); border-left: 1px solid var(--rule); padding-left: var(--s4); }
.strip .item:first-child { border-left: 0; padding-left: 0; }
.strip .item strong { display: block; font-family: var(--serif); font-size: var(--text-lg); margin-bottom: var(--s1); font-weight: 400; }
.strip .item span { color: var(--slate); font-size: var(--text-xs); letter-spacing: .06em; text-transform: uppercase; }
@media (max-width: 860px) {
  .strip .wrap { grid-template-columns: 1fr 1fr; }
  .strip .item:nth-child(3) { border-left: 0; padding-left: 0; }
}

/* Sections */
section { padding: clamp(3.5rem, 8vw, 7rem) 0; }
.section-head { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s8); align-items: end; margin-bottom: clamp(2rem, 5vw, 4rem); }
.section-head h2 { font-size: var(--text-2xl); margin-top: var(--s4); max-width: 18ch; }
.section-head p { color: var(--slate); max-width: 48ch; }
@media (max-width: 860px) { .section-head { grid-template-columns: 1fr; } }

/* Services */
.services { background: var(--chalk); }
.service-grid { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--rule); border-left: 1px solid var(--rule); }
.service { padding: var(--s8) var(--s6); border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); display: flex; flex-direction: column; min-height: 340px; transition: background .25s ease; position: relative; }
.service:hover { background: #fff; }
.service .num { font-family: var(--serif); font-size: var(--text-xs); color: var(--brass-dark); letter-spacing: .1em; }
.service h3 { font-size: var(--text-xl); margin-top: var(--s4); }
.service p { color: var(--slate); font-size: var(--text-sm); margin-top: var(--s4); flex: 1; }
.service ul { margin: var(--s4) 0 0; padding: 0; list-style: none; font-size: var(--text-sm); color: var(--ink); }
.service li { padding: 6px 0; border-top: 1px solid var(--rule); }
.service .soon { position: absolute; top: var(--s6); right: var(--s6); font-size: 0.65rem; letter-spacing: .18em; text-transform: uppercase; color: var(--brass-dark); border: 1px solid var(--brass); padding: 3px 8px; }
@media (max-width: 1000px) { .service-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .service-grid { grid-template-columns: 1fr; } .service { min-height: 0; } }

/* Approach (dark) */
.approach { background: var(--midnight); color: var(--chalk); }
.approach h2, .approach h3 { color: var(--chalk); }
.approach .grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.approach h2 { font-size: var(--text-2xl); margin-top: var(--s4); }
.approach .lead { color: rgba(246,243,237,.72); margin-top: var(--s6); font-size: var(--text-lg); line-height: 1.55; }
.principles { display: grid; gap: 0; border-top: 1px solid var(--rule-light); }
.principle { display: grid; grid-template-columns: 56px 1fr; gap: var(--s6); padding: var(--s6) 0; border-bottom: 1px solid var(--rule-light); }
.principle .k { font-family: var(--serif); color: var(--brass); font-size: var(--text-lg); }
.principle h3 { font-size: var(--text-lg); font-family: var(--sans); font-weight: 500; }
.principle p { color: rgba(246,243,237,.7); font-size: var(--text-sm); margin-top: var(--s2); }
.symbol-large { margin-top: var(--s12); width: 160px; }
@media (max-width: 860px) { .approach .grid { grid-template-columns: 1fr; } }

/* Independence row */
.independence .grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.independence img { aspect-ratio: 3 / 4; object-fit: cover; width: 100%; max-height: 640px; }
.independence h2 { font-size: var(--text-2xl); margin-top: var(--s4); }
.independence p { color: var(--slate); margin-top: var(--s6); }
.steps { margin: var(--s8) 0 0; padding: 0; list-style: none; counter-reset: step; }
.steps li { counter-increment: step; display: grid; grid-template-columns: 48px 1fr; gap: var(--s4); padding: var(--s4) 0; border-top: 1px solid var(--rule); }
.steps li::before { content: counter(step, decimal-leading-zero); font-family: var(--serif); color: var(--brass-dark); font-size: var(--text-sm); padding-top: 3px; }
.steps strong { display: block; font-weight: 500; color: var(--midnight); }
.steps span { font-size: var(--text-sm); color: var(--slate); }
@media (max-width: 860px) { .independence .grid { grid-template-columns: 1fr; } .independence img { max-width: 420px; } }

/* About */
.about { background: var(--chalk-2); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.about .grid { display: grid; grid-template-columns: 1fr 2fr; gap: clamp(2rem, 5vw, 5rem); }
.about .portrait { aspect-ratio: 4 / 5; background: var(--midnight); display: grid; place-items: center; color: var(--chalk); position: relative; }
.portrait { aspect-ratio: 4 / 5; background: var(--midnight); overflow: hidden; }
.portrait picture, .portrait img { display: block; width: 100%; height: 100%; object-fit: cover; }
.about h2 { font-size: var(--text-2xl); margin-top: var(--s4); }
.about .bio { margin-top: var(--s6); color: var(--ink); max-width: 62ch; }
.about .bio + .bio { margin-top: var(--s4); }
.creds { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s6); margin-top: var(--s8); padding-top: var(--s6); border-top: 1px solid var(--rule); }
.creds div { font-size: var(--text-sm); color: var(--slate); }
.creds strong { display: block; color: var(--midnight); font-weight: 500; margin-bottom: 2px; }
@media (max-width: 860px) { .about .grid { grid-template-columns: 1fr; } .about .portrait { max-width: 320px; } .creds { grid-template-columns: 1fr; } }

/* Contact */
.contact { background: var(--midnight); color: var(--chalk); }
.contact .grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.contact h2 { color: var(--chalk); font-size: var(--text-2xl); margin-top: var(--s4); }
.contact p { color: rgba(246,243,237,.72); margin-top: var(--s6); max-width: 46ch; }
.contact .card { background: var(--midnight-2); border: 1px solid var(--rule-light); padding: var(--s8); }
.contact .card dl { margin: 0; display: grid; grid-template-columns: 120px 1fr; row-gap: var(--s4); font-size: var(--text-sm); }
.contact .card dt { color: var(--brass); letter-spacing: .08em; text-transform: uppercase; font-size: var(--text-xs); padding-top: 3px; }
.contact .card dd { margin: 0; color: var(--chalk); }
.contact .actions { margin-top: var(--s8); display: flex; gap: var(--s3); flex-wrap: wrap; }
@media (max-width: 860px) { .contact .grid { grid-template-columns: 1fr; } }

/* Footer */
.site-footer { background: #0F1C2A; color: rgba(246,243,237,.7); padding: var(--s12) 0 var(--s8); font-size: var(--text-xs); }
.site-footer .top { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--s8); padding-bottom: var(--s8); border-bottom: 1px solid var(--rule-light); }
.site-footer .brand { color: var(--chalk); }
.site-footer .brand .sub { color: rgba(246,243,237,.55); }
.site-footer .ft-h { font-family: var(--sans); font-size: var(--text-xs); letter-spacing: .18em; text-transform: uppercase; color: var(--brass); font-weight: 500; margin-bottom: var(--s4); }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); }
.site-footer a:hover { color: var(--chalk); }
.site-footer .legal { padding-top: var(--s6); line-height: 1.7; max-width: 90ch; }
.site-footer .legal p + p { margin-top: var(--s2); }
.site-footer .legal strong { color: var(--chalk); font-weight: 500; }
@media (max-width: 860px) { .site-footer .top { grid-template-columns: 1fr; } }

/* Mock-up annotation ribbon (brand review only) */
.ribbon { background: var(--brass); color: var(--midnight); font-size: var(--text-xs); letter-spacing: .12em; text-transform: uppercase; text-align: center; padding: 6px 12px; }
.ribbon a { text-decoration: underline; text-underline-offset: 3px; }

/* Reveal animation */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } html { scroll-behavior: auto; } }
@media (max-width: 520px) { .brand .sub { display: none; } }

/* ---------- Inner pages ---------- */
.page-hero { padding: clamp(3rem, 6vw, 5rem) 0 clamp(2.5rem, 5vw, 4rem); border-bottom: 1px solid var(--rule); }
.page-hero .grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(2rem, 5vw, 5rem); align-items: end; }
.page-hero h1 { font-size: var(--text-2xl); margin-top: var(--s4); max-width: 18ch; }
.page-hero .lede { font-size: var(--text-lg); color: var(--slate); margin-top: var(--s6); max-width: 52ch; line-height: 1.55; }
.page-hero .actions { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s8); }
.page-hero img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.page-hero.dark { background: var(--midnight); border-bottom: 0; }
.page-hero.dark h1 { color: var(--chalk); }
.page-hero.dark .lede { color: rgba(246,243,237,.72); }
@media (max-width: 860px) { .page-hero .grid { grid-template-columns: 1fr; } .page-hero img { aspect-ratio: 16 / 9; } }

.breadcrumb { font-size: var(--text-xs); letter-spacing: .08em; text-transform: uppercase; color: var(--slate); display: flex; gap: var(--s2); flex-wrap: wrap; }
.breadcrumb a:hover { color: var(--midnight); }
.breadcrumb span::before { content: "/"; margin-right: var(--s2); color: var(--brass); }

.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.two-col.narrow-left { grid-template-columns: 0.8fr 1.2fr; }
.two-col h2 { font-size: var(--text-xl); margin-top: var(--s3); }
.two-col .sticky { position: sticky; top: 100px; }
@media (max-width: 860px) { .two-col, .two-col.narrow-left { grid-template-columns: 1fr; } .two-col .sticky { position: static; } }

.prose { max-width: 66ch; color: var(--ink); }
.prose p { margin-top: var(--s4); }
.prose p:first-child { margin-top: 0; }
.prose h3 { font-family: var(--sans); font-weight: 500; font-size: var(--text-lg); color: var(--midnight); margin-top: var(--s8); }
.prose ul { margin: var(--s4) 0 0; padding-left: 1.2em; color: var(--ink); }
.prose li + li { margin-top: var(--s2); }
.prose .note { font-size: var(--text-sm); color: var(--slate); border-left: 2px solid var(--brass); padding-left: var(--s4); margin-top: var(--s6); }

.list-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); margin-top: var(--s8); }
.list-grid.three { grid-template-columns: repeat(3, 1fr); }
.tile { background: #fff; border: 1px solid var(--rule); padding: var(--s6); }
.tile h3 { font-family: var(--sans); font-weight: 500; font-size: var(--text-base); color: var(--midnight); }
.tile p { color: var(--slate); font-size: var(--text-sm); margin-top: var(--s2); }
.tile .num { font-family: var(--serif); font-size: var(--text-xs); color: var(--brass-dark); letter-spacing: .1em; display: block; margin-bottom: var(--s3); }
@media (max-width: 860px) { .list-grid, .list-grid.three { grid-template-columns: 1fr; } }

.rows { margin-top: var(--s8); border-top: 1px solid var(--rule); }
.row-item { display: grid; grid-template-columns: 220px 1fr; gap: var(--s6); padding: var(--s6) 0; border-bottom: 1px solid var(--rule); }
.row-item h3 { font-family: var(--serif); font-size: var(--text-lg); color: var(--midnight); }
.row-item p { color: var(--ink); }
.row-item p + p { margin-top: var(--s3); }
.row-item .meta { font-size: var(--text-xs); color: var(--slate); letter-spacing: .06em; text-transform: uppercase; margin-top: var(--s2); }
@media (max-width: 860px) { .row-item { grid-template-columns: 1fr; gap: var(--s2); } }

.faq { margin-top: var(--s8); border-top: 1px solid var(--rule); }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: var(--s4); padding: var(--s4) 0; font-weight: 500; color: var(--midnight); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--serif); color: var(--brass-dark); font-size: 1.4rem; line-height: 1; transition: transform .2s ease; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq .answer { padding: 0 0 var(--s6); color: var(--ink); max-width: 66ch; }
.faq .answer p + p { margin-top: var(--s3); }

.cta-band { background: var(--midnight); color: var(--chalk); padding: clamp(3rem, 6vw, 5rem) 0; }
.cta-band .wrap { display: grid; grid-template-columns: 1fr auto; gap: var(--s8); align-items: center; }
.cta-band h2 { color: var(--chalk); font-size: var(--text-xl); margin-top: var(--s3); max-width: 24ch; }
.cta-band p { color: rgba(246,243,237,.72); margin-top: var(--s3); max-width: 52ch; }
@media (max-width: 860px) { .cta-band .wrap { grid-template-columns: 1fr; } }

.band { background: var(--chalk-2); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }

.quote { font-family: var(--serif); font-size: var(--text-xl); color: var(--midnight); line-height: 1.35; max-width: 30ch; border-left: 2px solid var(--brass); padding-left: var(--s6); }
.quote small { display: block; font-family: var(--sans); font-size: var(--text-xs); color: var(--slate); letter-spacing: .1em; text-transform: uppercase; margin-top: var(--s4); }

.figure-img { width: 100%; object-fit: cover; }
.figure-img.tall { aspect-ratio: 3 / 4; max-height: 620px; }
.figure-img.wide { aspect-ratio: 16 / 9; }

/* Related services */
.related { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--rule); border-left: 1px solid var(--rule); margin-top: var(--s8); }
.related a { padding: var(--s6); border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); display: block; transition: background .2s ease; }
.related a:hover { background: #fff; }
.related .num { font-family: var(--serif); font-size: var(--text-xs); color: var(--brass-dark); letter-spacing: .1em; }
.related h3 { font-size: var(--text-lg); margin-top: var(--s2); }
.related p { font-size: var(--text-sm); color: var(--slate); margin-top: var(--s2); }
@media (max-width: 860px) { .related { grid-template-columns: 1fr; } }

/* Contact form */
.form { display: grid; gap: var(--s4); }
.form .two { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); }
.form label { display: grid; gap: 6px; font-size: var(--text-xs); letter-spacing: .08em; text-transform: uppercase; color: var(--slate); }
.form input, .form select, .form textarea { font: inherit; font-size: var(--text-base); letter-spacing: 0; text-transform: none; color: var(--ink); background: #fff; border: 1px solid var(--rule); padding: 0.8rem 0.9rem; width: 100%; }
.form input:focus, .form select:focus, .form textarea:focus { outline: 2px solid var(--brass); outline-offset: 0; border-color: var(--brass); }
.form textarea { min-height: 150px; resize: vertical; }
.form .consent { display: flex; gap: var(--s3); align-items: flex-start; font-size: var(--text-sm); color: var(--slate); letter-spacing: 0; text-transform: none; }
.form .consent input { width: auto; margin-top: 4px; }
.form .hp { position: absolute; left: -9999px; }
.form .btn { justify-self: start; }
.form .hint { font-size: var(--text-xs); color: var(--slate); }
@media (max-width: 600px) { .form .two { grid-template-columns: 1fr; } }

/* Mobile nav */
.nav-toggle[aria-expanded="true"] + .nav, .nav.open { display: grid; position: absolute; left: 0; right: 0; top: 76px; background: var(--chalk); border-bottom: 1px solid var(--rule); padding: var(--s4) clamp(1.25rem, 5vw, 3rem) var(--s6); gap: var(--s3); }
@media (max-width: 860px) { .site-header .wrap { position: relative; } .nav.open a { font-size: var(--text-base); padding: var(--s2) 0; } .nav.open .btn { justify-self: start; margin-top: var(--s2); } }
.nav a[aria-current="page"] { color: var(--brass-dark); }
.nav a[aria-current="page"]::after { right: 0; }
.nav .group { display: contents; }

/* Status pill */
.pill { display: inline-block; font-size: 0.65rem; letter-spacing: .18em; text-transform: uppercase; color: var(--brass-dark); border: 1px solid var(--brass); padding: 3px 8px; vertical-align: middle; margin-left: var(--s3); }
.on-dark .pill, .page-hero.dark .pill { color: var(--brass); }

/* Legal pages */
.legal-page .prose h2 { font-size: var(--text-xl); margin-top: var(--s12); }
.legal-page .prose h2:first-of-type { margin-top: 0; }
.legal-page .updated { font-size: var(--text-xs); color: var(--slate); letter-spacing: .08em; text-transform: uppercase; margin-top: var(--s4); }

/* Skip link */
.skip { position: absolute; left: -9999px; top: 8px; background: var(--midnight); color: var(--chalk); padding: 8px 12px; z-index: 100; }
.skip:focus { left: 8px; }
.service h3 a { position: static; }
.service h3 a::after { content: ""; position: absolute; inset: 0; }
.list-grid.four { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1000px) { .list-grid.four { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .list-grid.four { grid-template-columns: 1fr; } }
.page-hero.dark .breadcrumb { color: rgba(246,243,237,.6); }

/* ---------- v2 additions ---------- */
@font-face { font-family: "Libre Baskerville"; src: url("fonts/web/libre-baskerville-400.woff") format("woff"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Libre Baskerville"; src: url("fonts/web/libre-baskerville-700.woff") format("woff"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Libre Baskerville"; src: url("fonts/web/libre-baskerville-400i.woff") format("woff"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Inter"; src: url("fonts/web/inter-400.woff") format("woff"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("fonts/web/inter-500.woff") format("woff"); font-weight: 500; font-style: normal; font-display: swap; }

/* Header: RICS mark and compact CTA */
.site-header .rics { height: 30px; width: auto; margin-left: var(--s6); display: block; order: 3; }
.nav a { white-space: nowrap; }
.nav .btn .long { display: inline; } .nav .btn .short { display: none; }
@media (max-width: 1320px) { .site-header .rics { height: 26px; margin-left: var(--s4); } }
@media (max-width: 1120px) { .nav .btn .long { display: none; } .nav .btn .short { display: inline; } }
@media (max-width: 1024px) { .nav { display: none; } .nav-toggle { display: inline-flex; background: none; border: 1px solid var(--rule); padding: 8px 12px; font: inherit; font-size: var(--text-xs); letter-spacing: .14em; text-transform: uppercase; color: var(--midnight); } .site-header .wrap { position: relative; } .site-header .rics { display: block; height: 26px; margin-left: var(--s3); order: 0; } .nav .btn .long { display: inline; } .nav .btn .short { display: none; } .brand .sub { display: block; } .nav.open a { font-size: var(--text-base); padding: var(--s2) 0; white-space: normal; } .nav.open .btn { justify-self: start; margin-top: var(--s2); } }
@media (max-width: 520px) { .brand .sub { display: none; } }

/* Credentials row (home) */
.cred-row { border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); background: var(--chalk-2); }
.cred-row .wrap { display: flex; align-items: center; gap: clamp(1rem, 3vw, 2.5rem); flex-wrap: wrap; padding-top: var(--s4); padding-bottom: var(--s4); }
.cred-row img { height: 44px; width: auto; }
.cred-row ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s2) clamp(1rem, 2.5vw, 2rem); font-size: var(--text-sm); color: var(--midnight); }
.cred-row li::before { content: ""; display: inline-block; width: 6px; height: 6px; background: var(--brass); margin-right: 10px; vertical-align: middle; }

/* Key facts box */
.keyfacts { background: #fff; border: 1px solid var(--rule); border-top: 2px solid var(--brass); padding: var(--s6); font-size: var(--text-sm); }
.keyfacts h2, .keyfacts h3 { font-family: var(--sans); font-weight: 500; font-size: var(--text-xs); letter-spacing: .18em; text-transform: uppercase; color: var(--brass-dark); margin: 0 0 var(--s4); }
.keyfacts dl { margin: 0; display: grid; grid-template-columns: 110px 1fr; gap: var(--s3) var(--s4); }
.keyfacts dt { color: var(--slate); }
.keyfacts dd { margin: 0; color: var(--ink); }
.page-hero .keyfacts { align-self: end; }

/* Commissions table */
.commissions { width: 100%; border-collapse: collapse; margin-top: var(--s8); font-size: var(--text-sm); }
.commissions th { text-align: left; font-weight: 500; font-size: var(--text-xs); letter-spacing: .12em; text-transform: uppercase; color: var(--slate); padding: 0 var(--s3) var(--s3) 0; border-bottom: 1px solid var(--midnight); }
.commissions td { padding: var(--s4) var(--s3) var(--s4) 0; border-bottom: 1px solid var(--rule); vertical-align: top; color: var(--ink); }
.commissions td:first-child { font-family: var(--serif); color: var(--brass-dark); white-space: nowrap; }
.commissions .role { color: var(--midnight); font-weight: 500; }
.commissions .status { display: inline-block; font-size: .65rem; letter-spacing: .14em; text-transform: uppercase; color: var(--brass-dark); border: 1px solid var(--brass); padding: 1px 6px; margin-left: 6px; vertical-align: middle; }
.commissions-note { font-size: var(--text-xs); color: #58626B; margin-top: var(--s4); max-width: 70ch; }
@media (max-width: 760px) { .commissions thead { display: none; } .commissions tr { display: grid; gap: 4px; padding: var(--s4) 0; border-bottom: 1px solid var(--rule); } .commissions td { display: block; padding: 0; border: 0; } .commissions td::before { content: attr(data-l) ": "; color: var(--slate); font-size: var(--text-xs); letter-spacing: .08em; text-transform: uppercase; } .commissions td:first-child::before { content: ""; } }

/* Forums block */
.forums { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s4); margin-top: var(--s8); }
.forums div { border-top: 1px solid var(--midnight); padding-top: var(--s4); }
.forums h3 { font-family: var(--sans); font-weight: 500; font-size: var(--text-xs); letter-spacing: .16em; text-transform: uppercase; color: var(--brass-dark); }
.forums ul { list-style: none; margin: var(--s3) 0 0; padding: 0; font-size: var(--text-sm); color: var(--ink); display: grid; gap: 4px; }
@media (max-width: 900px) { .forums { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .forums { grid-template-columns: 1fr; } }

/* Rules list (what we will not do) */
.rules { list-style: none; margin: var(--s6) 0 0; padding: 0; display: grid; gap: var(--s3); }
.rules li { display: grid; grid-template-columns: 20px 1fr; gap: var(--s3); color: var(--ink); }
.rules li::before { content: "×"; font-family: var(--serif); color: var(--brass-dark); font-size: 1.2rem; line-height: 1; }

/* Insights */
.post-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s4); margin-top: var(--s8); }
.post-card { background: #fff; border: 1px solid var(--rule); padding: var(--s6); display: flex; flex-direction: column; transition: background .2s ease; }
.post-card:hover { background: var(--chalk-2); }
.post-card .meta { font-size: var(--text-xs); letter-spacing: .1em; text-transform: uppercase; color: var(--brass-dark); }
.post-card h3 { font-size: var(--text-lg); margin-top: var(--s3); }
.post-card p { color: var(--slate); font-size: var(--text-sm); margin-top: var(--s3); flex: 1; }
.post-card .more { margin-top: var(--s4); font-size: var(--text-sm); color: var(--midnight); border-bottom: 1px solid var(--brass); align-self: flex-start; }
@media (max-width: 760px) { .post-grid { grid-template-columns: 1fr; } }
.article { max-width: 70ch; }
.article .meta { font-size: var(--text-xs); letter-spacing: .1em; text-transform: uppercase; color: var(--slate); display: flex; gap: var(--s4); flex-wrap: wrap; }
.article .standfirst { font-size: var(--text-lg); color: var(--slate); line-height: 1.55; margin-top: var(--s6); }
.article h2 { font-size: var(--text-xl); margin-top: var(--s12); }
.article h3 { font-family: var(--sans); font-weight: 500; font-size: var(--text-lg); color: var(--midnight); margin-top: var(--s8); }
.article p { margin-top: var(--s4); color: var(--ink); }
.article ul, .article ol { margin: var(--s4) 0 0; padding-left: 1.3em; color: var(--ink); }
.article li + li { margin-top: var(--s2); }
.article .callout { background: var(--chalk-2); border-left: 2px solid var(--brass); padding: var(--s4) var(--s6); margin-top: var(--s8); font-size: var(--text-sm); color: var(--ink); }
.article .disclaimer { font-size: var(--text-xs); color: var(--slate); border-top: 1px solid var(--rule); padding-top: var(--s4); margin-top: var(--s12); }
.author-box { display: grid; grid-template-columns: 64px 1fr; gap: var(--s4); align-items: center; margin-top: var(--s8); padding: var(--s6); background: #fff; border: 1px solid var(--rule); }
.author-box .sym { width: 64px; height: 64px; background: var(--midnight); display: grid; place-items: center; }
.author-box .sym svg { width: 40px; height: 40px; }
.author-box strong { display: block; font-family: var(--serif); font-weight: 400; color: var(--midnight); }
.author-box span { font-size: var(--text-sm); color: var(--slate); }

/* Footer RICS mark */
.site-footer .rics { height: 40px; width: auto; margin-top: var(--s6); display: block; }
.site-footer .top { grid-template-columns: 2fr 1fr 1fr 1fr; }
@media (max-width: 860px) { .site-footer .top { grid-template-columns: 1fr; } }

/* Next steps on contact */
.next-steps { margin: var(--s8) 0 0; padding: 0; list-style: none; counter-reset: n; }
.next-steps li { counter-increment: n; display: grid; grid-template-columns: 36px 1fr; gap: var(--s3); padding: var(--s3) 0; border-top: 1px solid var(--rule); font-size: var(--text-sm); color: var(--ink); }
.next-steps li::before { content: counter(n, decimal-leading-zero); font-family: var(--serif); color: var(--brass-dark); }

/* Form status */
.form-status { margin-top: var(--s4); padding: var(--s6); border: 1px solid var(--rule); background: #fff; font-size: var(--text-sm); color: var(--ink); }
.form-status.ok { border-top: 2px solid var(--brass); }
.form-status.err { border-top: 2px solid #9B3B2E; }
.form-status strong { display: block; font-family: var(--serif); font-weight: 400; font-size: var(--text-lg); color: var(--midnight); margin-bottom: var(--s2); }
.form-status a { text-decoration: underline; }
[hidden] { display: none !important; }
.service-grid.five { grid-template-columns: repeat(5, 1fr); }
.service-grid.five .service { padding: var(--s6) var(--s4); min-height: 360px; }
.service-grid.five .service h3 { font-size: 1.35rem; }
@media (max-width: 1100px) { .service-grid.five { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px) { .service-grid.five { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .service-grid.five { grid-template-columns: 1fr; } .service-grid.five .service { min-height: 0; } }
.brand .sub { white-space: nowrap; }
.hero h1 { font-size: clamp(2.4rem, 1.6rem + 3.2vw, 4rem); max-width: 15ch; }

/* Header: services dropdown, RICS logo right */
.site-header .wrap { gap: var(--s4); }
.site-header .nav { margin-left: auto; }
.nav .menu { position: relative; }
.nav .menu-btn { background: none; border: 0; padding: 4px 0; font: inherit; font-size: var(--text-sm); color: var(--midnight); cursor: pointer; position: relative; display: inline-flex; align-items: center; gap: 6px; }
.nav .menu-btn::after { content: ""; width: 6px; height: 6px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .2s ease; }
.nav .menu.open .menu-btn::after { transform: translateY(1px) rotate(225deg); }
.nav .menu.current .menu-btn { color: var(--brass-dark); }
.nav .menu-panel { display: none; position: absolute; top: calc(100% + 14px); left: -20px; min-width: 240px; background: var(--chalk); border: 1px solid var(--rule); border-top: 2px solid var(--brass); padding: var(--s3) 0; box-shadow: 0 18px 40px rgba(21,38,56,.12); z-index: 60; }
.nav .menu-panel::before { content: ""; position: absolute; top: -16px; left: 0; right: 0; height: 16px; }
.nav .menu.open .menu-panel { display: grid; }
.nav .menu-panel a { padding: 10px 20px; white-space: nowrap; }
.nav .menu-panel a::after { display: none; }
.nav .menu-panel a:hover, .nav .menu-panel a[aria-current="page"] { background: rgba(170,145,102,.10); color: var(--brass-dark); }
@media (max-width: 1024px) {
  .site-header .nav { margin-left: 0; }
  .site-header .rics { margin-left: auto; margin-right: var(--s3); }
  .nav .menu-btn { display: inline-flex; font-size: var(--text-base); padding: var(--s2) 0; width: 100%; justify-content: space-between; }
  .nav .menu-btn::after { width: 8px; height: 8px; margin-right: 4px; }
  .nav .menu-panel { display: none; position: static; min-width: 0; border: 0; border-top: 0; box-shadow: none; padding: 0 0 var(--s2) var(--s4); background: none; border-left: 1px solid var(--rule); margin: 0 0 var(--s2) 4px; }
  .nav .menu.open .menu-panel { display: grid; }
  .nav .menu-panel::before { display: none; }
  .nav .menu-panel a { padding: 6px 0; font-size: var(--text-sm); white-space: normal; }
  .nav.open .menu-panel a:hover, .nav.open .menu-panel a[aria-current="page"] { background: none; }
  .nav .menu.current .menu-panel { display: grid; }
}
.brand .name { white-space: nowrap; }
@media (max-width: 520px) { .site-header .rics { height: 22px; margin-right: var(--s2); } .brand svg { height: 28px; } .brand .name { font-size: 0.95rem; } }
@media (max-width: 480px) { .site-header .rics { display: none; } }
.nav .phone { font-variant-numeric: tabular-nums; letter-spacing: 0.02em; color: var(--midnight); }
.nav .phone::before { content: ""; display: inline-block; width: 1px; height: 14px; background: var(--rule); margin-right: clamp(1rem, 2.5vw, 2.25rem); vertical-align: -2px; }
@media (max-width: 1240px) { .nav .phone { display: none; } }
@media (max-width: 1024px) { .nav .phone { display: block; } .nav.open .phone::before { display: none; } }
@media (max-width: 1024px) { .nav.open .btn { padding: 0.75rem 1.25rem; } }
/* Mobile overflow fix: contact card and long email */
html, body { overflow-x: clip; }
.contact .grid > div { min-width: 0; }
.contact .card dl { grid-template-columns: minmax(84px, auto) 1fr; }
.contact .card dd { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 480px) { .contact .card { padding: var(--s6); } .contact .card dl { grid-template-columns: 1fr; row-gap: var(--s2); } .contact .card dt { margin-top: var(--s3); } .contact .card dt:first-child { margin-top: 0; } }
.brand svg { height: 40px; }
@media (max-width: 520px) { .brand svg { height: 32px; } }

/* Box backgrounds (photo or video) and minimum heights, set per box in /admin. See decorate() in build_site.py. */
.has-bg { position: relative; isolation: isolate; overflow: hidden; }
.has-bg > .bg-media, .has-bg > .bg-overlay { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.has-bg > .bg-media picture { display: contents; }
.has-bg > .bg-media img, .has-bg > .bg-media video { width: 100%; height: 100%; max-width: none; object-fit: cover; display: block; }
.has-bg > .bg-overlay { background: var(--midnight); }
.has-bg.bg-pale > .bg-overlay { background: var(--chalk); }
.has-bg.on-dark { color: var(--chalk); border-color: transparent; }
.has-bg.on-dark :is(h1, h2, h3, h4) { color: var(--chalk); }
.has-bg.on-dark :is(p, li, dd, dt, .lede, .lead, .meta, .bio, .breadcrumb, .breadcrumb a, .row-item, .prose) { color: rgba(246,243,237,.86) !important; }
.has-bg.on-dark :is(.tile, .keyfacts, .post-card, .form, .form-status, .author-box, .card, .faq details) :is(h1, h2, h3, h4) { color: var(--midnight); }
.has-bg.on-dark :is(.tile, .keyfacts, .post-card, .form, .form-status, .author-box) :is(p, li, dd, dt, .meta) { color: var(--ink) !important; }
.has-bg.on-dark .contact .card :is(dd, dt), .has-bg.on-dark .card[style*="midnight"] :is(dd, dt) { color: rgba(246,243,237,.86) !important; }
.has-bg.on-dark .btn.ghost { color: var(--chalk); border-color: rgba(246,243,237,.6); }
.has-h { min-height: var(--ba-h); display: flex; flex-direction: column; justify-content: center; }
.has-h.align-top { justify-content: flex-start; }
.has-h.align-bottom { justify-content: flex-end; }
.has-h > .wrap { width: min(var(--wrap), 100% - 2 * clamp(1.25rem, 5vw, 3rem)); }
@media (max-width: 760px) { .has-h { min-height: min(var(--ba-h), 85vh); } }

/* In brief summary at the top of an article */
.in-brief { border-left: 3px solid var(--brass); background: var(--chalk-2); padding: var(--s5, 1.25rem) var(--s6); margin: 0 0 var(--s8); }
.in-brief .ib-h { font-family: var(--sans); font-size: var(--text-xs); letter-spacing: .18em; text-transform: uppercase; color: var(--brass-dark); font-weight: 500; margin: 0 0 var(--s2); }
.in-brief p:last-child { margin: 0; font-size: var(--text-base); line-height: 1.6; color: var(--ink); }