/* Auxillium: "Portico".
   The home page is the mark built as architecture: the name carved across the
   top as an inscription, three peaked shafts (the mark's pillars) holding the
   three groups of work, standing on a Midnight plinth. Everything else stays
   quiet: white ground, blue accents, left-aligned text, space instead of rules.
   Light theme by design. Fonts self-hosted. */

@font-face { font-family: "Cinzel"; src: url("fonts/cinzel-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Cinzel"; src: url("fonts/cinzel-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "EB Garamond"; src: url("fonts/eb-garamond-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "EB Garamond"; src: url("fonts/eb-garamond-latin-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "EB Garamond"; src: url("fonts/eb-garamond-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Hanken Grotesk"; src: url("fonts/hanken-grotesk-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Hanken Grotesk"; src: url("fonts/hanken-grotesk-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }

:root {
  --white: #FFFFFF;
  --midnight: #13294B;   /* inscription, headlines, plinth */
  --blue: #2D5285;       /* accent: links, numerals, markers */
  --shaft-l: #EDF1F7;    /* pillar light face */
  --shaft-s: #E2E8F1;    /* pillar shadow face */
  --ink: #1C1D20;        /* running text */
  --grey: #63666A;       /* secondary text */
  --line: #D5DCE7;
  --gold: #B08D57;       /* only inside the mark */

  --wordmark: "Cinzel", "Trajan Pro", "Times New Roman", serif;
  --serif: "EB Garamond", Garamond, Georgia, serif;
  --sans: "Hanken Grotesk", Arial, sans-serif;

  --wrap: 74rem;
  --measure: 36rem;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--white); color: var(--ink); font-family: var(--serif); font-size: 1.22rem; line-height: 1.55; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; color: var(--midnight); margin: 0; line-height: 1.08; text-wrap: balance; }
p { margin: 0; }
a { color: var(--blue); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--midnight); }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.skip { position: absolute; left: -999px; top: 0; z-index: 30; background: var(--white); padding: 0.5rem 1rem; }
.skip:focus { left: 1rem; top: 1rem; }

.wrap {
  max-width: var(--wrap); margin-inline: auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
@media (min-width: 48rem) { .wrap { padding-left: max(2.5rem, env(safe-area-inset-left, 0px)); padding-right: max(2.5rem, env(safe-area-inset-right, 0px)); } }

/* Mark (colour mark on white, from the kit) */
.mark .l { fill: #7A7D82; } .mark .s { fill: #56595D; }
.mark .c { fill: #1B365D; stroke: var(--white); stroke-width: 3; }
.mark .g { fill: var(--gold); stroke: var(--white); stroke-width: 3; }
.mark .d { fill: none; stroke: var(--white); stroke-width: 2; }
.mark .o { fill: none; stroke: var(--white); stroke-width: 1; opacity: 0.55; }
.mark .gd { fill: var(--gold); } .mark .cd { fill: #1B365D; }

/* Lockup (kit horizontal lockup, scaled for screen) */
.lockup { display: inline-flex; align-items: center; gap: 0.9rem; text-decoration: none; color: inherit; }
.lockup .mark { width: 2.5rem; height: auto; display: block; flex-shrink: 0; }
.lockup .divider { width: 1px; align-self: stretch; background: var(--gold); }
.lockup .words { display: grid; gap: 0.3rem; }
.lockup .wm { font-family: var(--wordmark); font-weight: 500; font-size: 1.45rem; letter-spacing: 0.16em; line-height: 1; color: #56595D; }
.lockup .desc { font-family: var(--sans); font-weight: 500; font-size: 0.58rem; letter-spacing: 0.3em; text-transform: uppercase; color: #1B365D; }
@media (min-width: 40rem) { .lockup .mark { width: 2.9rem; } .lockup .wm { font-size: 1.7rem; } .lockup .desc { font-size: 0.62rem; } }

/* Header */
.masthead .bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2.5rem; padding-block: 1.4rem; }
.nav { display: flex; flex-wrap: wrap; gap: 0.2rem 1.75rem; list-style: none; margin: 0; padding: 0; }
.nav a { color: var(--midnight); text-decoration: none; font-size: 1.15rem; padding-block: 0.2rem; }
.nav a:hover { color: var(--blue); }
.nav a[aria-current="page"] { color: var(--blue); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }

/* The inscription: the name carved full width across the entablature */
.entablature { padding-top: clamp(1.5rem, 4vw, 3rem); }
.entablature .inscription { display: block; width: 100%; height: auto; }
.entablature .inscription text { font-family: var(--wordmark); font-weight: 400; fill: var(--midnight); }
.architrave { height: 9px; border-top: 3px solid var(--midnight); border-bottom: 1px solid var(--midnight); margin-top: clamp(0.6rem, 1.5vw, 1.1rem); }

/* Intro under the inscription */
.intro { display: grid; gap: 2rem 3rem; padding-block: clamp(2rem, 5vw, 3.5rem); align-items: center; }
@media (min-width: 56rem) { .intro { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.intro-text { display: grid; gap: 1.25rem; min-width: 0; }
.intro h1 { font-size: clamp(2.2rem, 1.5rem + 2.6vw, 3.6rem); max-width: 15ch; }
.intro p { color: var(--grey); font-size: 1.3rem; line-height: 1.45; max-width: 30rem; }
.hero-art { min-width: 0; display: flex; justify-content: center; }
.hero-art img { width: 100%; max-width: 30rem; height: auto; max-height: 21rem; object-fit: contain; }

/* Illustrations: unDraw scenes recoloured to the Auxillium palette */
img.art { display: block; height: auto; max-width: 100%; }

/* The portico: three peaked shafts on a plinth */
.portico { display: grid; gap: clamp(0.75rem, 2vw, 1.5rem); }
@media (min-width: 52rem) { .portico { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.shaft {
  background: linear-gradient(90deg, var(--shaft-l) 50%, var(--shaft-s) 50%);
  clip-path: polygon(0 2.4rem, 50% 0, 100% 2.4rem, 100% 100%, 0 100%);
  padding: 3.6rem clamp(1.25rem, 2.5vw, 2rem) 2.25rem;
  display: grid; gap: 1rem; align-content: start; min-width: 0;
}
.shaft-art { height: 9.5rem; display: flex; align-items: flex-end; justify-content: center; margin-bottom: 0.5rem; }
.shaft-art img { width: auto; height: 100%; max-width: 100%; object-fit: contain; transition: transform .35s ease; }
.shaft:hover .shaft-art img, .shaft:focus-within .shaft-art img { transform: translateY(-6px); }
.shaft h2 { font-family: var(--wordmark); font-weight: 500; font-size: 1.35rem; letter-spacing: 0.12em; color: var(--midnight); }
.shaft > p { color: var(--grey); font-size: 1.1rem; }
.shaft ul { list-style: none; margin: 0.25rem 0 0; padding: 0; display: grid; gap: 0.6rem; }
.shaft li a { color: var(--midnight); text-decoration-color: var(--blue); font-size: 1.2rem; line-height: 1.3; display: inline-block; }
.shaft li a:hover { color: var(--blue); }
.plinth { height: 0.6rem; background: var(--midnight); }

/* Quiet sections */
.block { display: grid; gap: 1.25rem 3rem; padding-block: clamp(3rem, 7vw, 5rem) 0; }
@media (min-width: 56rem) { .block { grid-template-columns: 16rem minmax(0, 1fr); } }
.block > h2 { font-size: clamp(1.8rem, 1.4rem + 1.2vw, 2.4rem); }
.block-body { display: grid; gap: 1rem; max-width: var(--measure); min-width: 0; }
.block-body .secondary { color: var(--grey); }

/* A real sequence, so it is numbered */
ol.stages { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem; counter-reset: s; }
ol.stages li { counter-increment: s; display: grid; grid-template-columns: 2.6rem minmax(0, 1fr); column-gap: 0.75rem; }
ol.stages li::before { content: counter(s, upper-roman); grid-row: span 2; font-family: var(--wordmark); color: var(--blue); font-size: 1.15rem; padding-top: 0.15rem; }
ol.stages strong { font-weight: 500; color: var(--midnight); }
ol.stages span { color: var(--grey); }

ul.plain { margin: 0; padding-left: 1.1rem; display: grid; gap: 0.3rem; color: var(--grey); }
ul.plain li::marker { color: var(--blue); }

/* Affiliate and contact */
.affiliate { display: grid; gap: 1rem; padding: clamp(1.5rem, 3vw, 2rem); border-left: 3px solid var(--blue); background: var(--shaft-l); }
.affiliate .lockup .wm { font-size: 1.25rem; }
.affiliate .lockup .mark .c, .affiliate .lockup .mark .g { stroke: var(--shaft-l); }
.affiliate .lockup .mark .d, .affiliate .lockup .mark .o { stroke: var(--shaft-l); }
.write { padding-block: clamp(3.5rem, 8vw, 6rem) 0; display: grid; gap: 2rem 3rem; align-items: center; }
@media (min-width: 52rem) { .write { grid-template-columns: minmax(0, 1fr) minmax(0, 18rem); } }
.write-text { display: grid; gap: 1rem; min-width: 0; }
.write-art img { width: 100%; max-width: 16rem; height: auto; }
.write h2 { font-size: clamp(2rem, 1.5rem + 2vw, 3rem); }
.write .address { font-size: clamp(1.5rem, 1rem + 2.6vw, 2.8rem); overflow-wrap: anywhere; line-height: 1.2; }
.write p { color: var(--grey); max-width: var(--measure); }

/* Inner pages */
.page-title { padding-block: clamp(2.5rem, 6vw, 4.5rem) 0; display: grid; gap: 1rem; }
.page-title h1 { font-size: clamp(2.4rem, 1.6rem + 3vw, 4rem); max-width: 18ch; }
.page-title p { color: var(--grey); font-size: 1.3rem; max-width: var(--measure); line-height: 1.45; }
.page-title.has-art { align-items: center; gap: 2rem 3rem; }
@media (min-width: 52rem) { .page-title.has-art { grid-template-columns: minmax(0, 1fr) minmax(0, 22rem); } }
.pt-text { display: grid; gap: 1rem; min-width: 0; }
.pt-art img { width: 100%; max-width: 22rem; height: auto; max-height: 16rem; object-fit: contain; }

.group { padding-top: clamp(3rem, 7vw, 4.5rem); }
.group-head { display: flex; align-items: flex-end; gap: 1rem; padding-bottom: 1rem; border-bottom: 3px solid var(--midnight); }
.group-head .mini { width: 1rem; height: 2.75rem; flex-shrink: 0; background: linear-gradient(90deg, var(--shaft-l) 50%, var(--shaft-s) 50%); clip-path: polygon(0 0.4rem, 50% 0, 100% 0.4rem, 100% 100%, 0 100%); }
.group-head h2 { font-family: var(--wordmark); font-weight: 500; font-size: clamp(1.4rem, 1.2rem + 0.8vw, 1.9rem); letter-spacing: 0.12em; }
.entry { display: grid; gap: 1.25rem 3.5rem; padding-block: 2.5rem; border-bottom: 1px solid var(--line); scroll-margin-top: 1rem; align-items: center; }
@media (min-width: 52rem) {
  .entry { grid-template-columns: minmax(0, 19rem) minmax(0, 1fr); }
  .entry:nth-of-type(even) { grid-template-columns: minmax(0, 1fr) minmax(0, 19rem); }
  .entry:nth-of-type(even) .entry-art { order: 2; }
}
.entry-art { background: var(--shaft-l); aspect-ratio: 4 / 3; max-width: 100%; display: flex; align-items: center; justify-content: center; padding: 1.5rem; }
@media (max-width: 51.99rem) { .entry-art { max-width: 22rem; aspect-ratio: 16 / 10; } }
.entry-art img { width: auto; height: 100%; max-width: 100%; object-fit: contain; }
.entry h3 { font-size: 1.7rem; }
.entry-body { display: grid; gap: 0.8rem; max-width: var(--measure); min-width: 0; }

.people { display: grid; gap: 1.25rem 2.5rem; }
@media (min-width: 40rem) { .people { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.person strong { display: block; font-weight: 400; font-size: 1.5rem; color: var(--midnight); }
.person span { color: var(--grey); }

dl.details { margin: 0; display: grid; gap: 1.1rem; }
dl.details dt { font-family: var(--sans); font-size: 0.85rem; color: var(--grey); }
dl.details dd { margin: 0.1rem 0 0; font-size: 1.3rem; overflow-wrap: anywhere; }

/* Footer: the stylobate */
.footer { margin-top: clamp(3.5rem, 8vw, 6rem); }
.footer .wrap { padding-block: 0 2.5rem; }
.footer .base { height: 9px; border-top: 1px solid var(--midnight); border-bottom: 3px solid var(--midnight); margin-bottom: 1.75rem; }
.footer .reg { font-family: var(--sans); font-size: 0.82rem; line-height: 1.65; letter-spacing: 0.02em; color: var(--grey); max-width: 58rem; }
.footer ul { list-style: none; margin: 1rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; font-family: var(--sans); font-size: 0.82rem; color: var(--grey); }

.fill { background: #FFF1C9; color: #5A4310; padding: 0 0.3em; font-family: var(--sans); font-size: 0.8em; }
.notice ul { margin: 0; padding-left: 1.1rem; display: grid; gap: 0.3rem; color: var(--grey); }

/* Page-load moment: the pillars rise onto the plinth, one after another */
@keyframes rise { from { transform: translateY(2.5rem); } to { transform: none; } }
@keyframes settle { from { transform: translateY(1rem) scale(.98); } to { transform: none; } }
.portico .shaft { animation: rise .7s cubic-bezier(.2,.7,.2,1) both; }
.portico .shaft:nth-child(2) { animation-delay: .12s; }
.portico .shaft:nth-child(3) { animation-delay: .24s; }
.hero-art img { animation: settle .9s cubic-bezier(.2,.7,.2,1) both; }
@media (prefers-reduced-motion: reduce) {
  .portico .shaft, .hero-art img { animation: none; }
  .shaft-art img { transition: none; }
  .shaft:hover .shaft-art img { transform: none; }
}

/* ---------- Blue banners and borders ---------- */
:root { --sky: #9DB4D6; --band-ink: #F4F6FA; }

/* Full-bleed band: background spills to the screen edges without widening the page */
.bleed { box-shadow: 0 0 0 100vmax var(--bleed-bg); clip-path: inset(0 -100vmax); background: var(--bleed-bg); }

/* Top banner */
.topbar { background: var(--midnight); color: var(--band-ink); font-family: var(--sans); font-size: 0.82rem; letter-spacing: 0.02em; }
.topbar .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.25rem 1.5rem; padding-block: 0.55rem; }
.topbar a { color: var(--band-ink); text-decoration-color: var(--sky); }
.topbar a:hover { color: #fff; }

/* Header sits on a blue rule */
.masthead { border-bottom: 4px solid var(--blue); }

/* Inner page titles: pale blue banner with a blue base rule */
.page-title { --bleed-bg: var(--shaft-l); position: relative; box-shadow: 0 0 0 100vmax var(--bleed-bg); clip-path: inset(0 -100vmax -4px); background: var(--bleed-bg);
  padding-block: clamp(2.25rem, 5vw, 3.5rem); margin-bottom: clamp(1rem, 3vw, 2rem); }

/* Banner blocks (How we work / Engagement): Midnight band, white type */
.block.banner { --bleed-bg: var(--midnight); position: relative; box-shadow: 0 0 0 100vmax var(--bleed-bg); clip-path: inset(-6px -100vmax 0); background: var(--bleed-bg);
  color: var(--band-ink); padding-block: clamp(2.75rem, 6vw, 4rem); margin-top: calc(clamp(3rem, 7vw, 5rem) + 6px); }
.block.banner h2, .block.banner strong { color: #fff; }
.block.banner p, .block.banner span { color: var(--band-ink); }
.block.banner ol.stages li::before { color: var(--sky); }
.block.banner ol.stages li { border-left: 2px solid var(--blue); padding-left: 1rem; grid-template-columns: 2.4rem minmax(0, 1fr); }

/* Sector tags */
ul.tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.6rem; }
ul.tags li { border: 1.5px solid var(--blue); color: var(--midnight); padding: 0.35rem 0.9rem; border-radius: 999px; font-size: 1.05rem; background: var(--white); }

/* Contact call-to-action: blue banner */
.write { --bleed-bg: var(--blue); box-shadow: 0 0 0 100vmax var(--bleed-bg); clip-path: inset(0 -100vmax); background: var(--bleed-bg);
  padding-block: clamp(2.75rem, 6vw, 4rem); margin-top: clamp(3rem, 7vw, 5rem); }
.write h2 { color: #fff; }
.write .address { color: #fff; text-decoration-color: var(--sky); }
.write .address:hover { color: var(--band-ink); }
.write p { color: var(--band-ink); }
.write-art img { background: var(--white); border: 3px solid var(--midnight); padding: 1rem; }

/* Pillars: blue capital bar under each peak */
.shaft { border-bottom: 4px solid var(--blue); }

/* Group headings on the services and practice pages: Midnight banner */
.group-head { background: var(--midnight); border-bottom: 4px solid var(--blue); padding: 1rem 1.25rem; align-items: center; }
.group-head h2 { color: #fff; }
.group-head .mini { background: linear-gradient(90deg, #B9BABC 50%, #8C8E92 50%); }

/* Illustration tiles: framed in Midnight with an offset blue block */
.entry-art { border: 2px solid var(--midnight); box-shadow: 10px 10px 0 var(--blue); margin: 0 10px 10px 0; }
.entry h3 { padding-bottom: 0.4rem; border-bottom: 2px solid var(--blue); justify-self: start; }

/* Contact details and affiliate panel */
dl.details { border-left: 4px solid var(--blue); padding-left: 1.25rem; }
.pt-art img { background: var(--white); border: 2px solid var(--midnight); box-shadow: 10px 10px 0 var(--blue); padding: 1rem; }

/* Footer: Midnight band */
.footer { background: var(--midnight); border-top: 6px solid var(--blue); margin-top: 0; }
.footer .wrap { padding-block: 2.25rem 2.5rem; }
.footer .reg, .footer ul { color: var(--band-ink); }
.footer a { color: var(--band-ink); text-decoration-color: var(--sky); }
.footer .fill { background: #FFF1C9; color: #5A4310; }
main > .wrap > :last-child:not(.write) { margin-bottom: clamp(3.5rem, 8vw, 6rem); }
.page-title + .group { padding-top: 1.5rem; }
.page-title + .block { padding-top: 1.5rem; }
.page-title::after { content: ""; position: absolute; left: -100vmax; right: -100vmax; bottom: -4px; height: 4px; background: var(--blue); }
.block.banner::before { content: ""; position: absolute; left: -100vmax; right: -100vmax; top: -6px; height: 6px; background: var(--blue); }
html, body { overflow-x: clip; }
main { overflow-x: clip; }

/* ---------- Chancery Gold accents ---------- */
.topbar { border-bottom: 3px solid var(--gold); }
.nav a[aria-current="page"] { text-decoration-color: var(--gold); }
.architrave { border-bottom: 2px solid var(--gold); }

/* Pillars: gold rule under each heading and a gold capital band on the plinth */
.shaft h2::after { content: ""; display: block; width: 3rem; height: 3px; background: var(--gold); margin-top: 0.6rem; }
.plinth { box-shadow: inset 0 3px 0 var(--gold); height: 0.8rem; }

/* Page title banners close on a gold rule */
.page-title::after { background: var(--gold); }
.pt-art img { box-shadow: 10px 10px 0 var(--gold); }

/* Midnight banners: gold top edge, gold numerals and markers */
.block.banner::before { background: var(--gold); }
.block.banner ol.stages li { border-left-color: var(--gold); }
.block.banner ol.stages li::before { color: var(--gold); }
.block.banner h2::after { content: ""; display: block; width: 3rem; height: 3px; background: var(--gold); margin-top: 0.75rem; }

/* Group heading bars on the services and practice pages */
.group-head { border-bottom-color: var(--gold); }
.group-head .mini { background: linear-gradient(90deg, #C9A974 50%, var(--gold) 50%); }

/* Illustration frames alternate blue and gold offset blocks */
.entry:nth-of-type(even) .entry-art { box-shadow: 10px 10px 0 var(--gold); }
.entry h3 { border-bottom-color: var(--gold); }
ul.plain li::marker { color: var(--gold); }
ul.tags li { border-color: var(--gold); }
dl.details { border-left-color: var(--gold); }

/* Contact banner and footer */
.write { box-shadow: 0 0 0 100vmax var(--bleed-bg); }
.write .address { text-decoration-color: var(--gold); text-decoration-thickness: 2px; }
.write-art img { border-color: var(--gold); }
.footer { border-top-color: var(--gold); }
.footer a { text-decoration-color: var(--gold); }
.topbar a { text-decoration-color: var(--gold); }

/* Partner profiles */
.bios { display: grid; gap: 2rem; }
.bio { display: grid; gap: 0.75rem; padding-left: 1.25rem; border-left: 4px solid var(--gold); }
.bio header { display: grid; gap: 0.1rem; }
.bio header strong { font-weight: 400; font-size: 1.6rem; color: var(--midnight); line-height: 1.15; }
.bio header span { font-family: var(--sans); font-size: 0.85rem; color: var(--blue); letter-spacing: 0.04em; }
.bio .cred { font-family: var(--sans); font-size: 0.9rem; line-height: 1.6; color: var(--grey); padding-top: 0.6rem; border-top: 1px solid var(--line); }