/* ============================================================
   CROWNMARK LAWYERS, DESIGN SYSTEM
   Hand-authored so the production site ships plain CSS rather than
   generating styles in the browser at runtime. Everything below is
   driven by the tokens in :root, so a change there moves the whole
   site rather than one page.
   ============================================================ */

/* IBM Plex Mono, served from this site (SIL Open Font License, see
   assets/fonts/OFL.txt). Latin first; the extended set loads only for a
   character outside it. */
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/ibm-plex-mono-400-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url(/assets/fonts/ibm-plex-mono-500-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/ibm-plex-mono-400-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url(/assets/fonts/ibm-plex-mono-500-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  /* Brand ---------------------------------------------------- */
  /* The one brand accent, sampled from the logo bar (#F36731). The
     WebGL sculpture reads --brand-orange too, so the 3D line, the lit
     stone and the interface share one orange. --brand-orange-dark is
     the firm's own darker orange, for small orange text on light
     grounds (AA); --brand-orange-soft is a pale wash of the same hue. */
  --brand-orange:      #F36731;
  --brand-orange-dark: #9C3519;
  --brand-orange-soft: #F9E1D5;

  --ink:        #0A0A0A;
  --ink-true:   #000000;
  --paper:      #FFFFFF;
  --paper-dim:  #F5F1EC;
  --paper-warm: #EDE7DF;
  --flame:      var(--brand-orange);
  --espresso:   #551D0E;
  --rust:       var(--brand-orange-dark);

  /* Text on light and dark grounds. Each step is contrast-checked. */
  --text:            #0A0A0A;
  --text-muted:      #4A4744;   /* 8.9:1 on paper */
  --text-soft:       #63605C;   /* 5.9:1 on paper */
  --text-on-dark:        #FFFFFF;
  --text-on-dark-muted:  #C8C4BE; /* 11.2:1 on ink */
  --text-on-dark-soft:   #9C9791; /* 6.4:1 on ink */

  --rule:       rgba(10, 10, 10, 0.14);
  --rule-soft:  rgba(10, 10, 10, 0.08);
  --rule-dark:  rgba(255, 255, 255, 0.18);

  /* Type ----------------------------------------------------- */
  --font-sans: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, monospace;

  --fs-display: clamp(3rem, 7.4vw, 6.75rem);
  --fs-h1:      clamp(2.5rem, 5.6vw, 4.75rem);
  --fs-h2:      clamp(1.9rem, 3.4vw, 3rem);
  --fs-h3:      clamp(1.25rem, 1.9vw, 1.65rem);
  --fs-lead:    clamp(1.0625rem, 1.35vw, 1.3125rem);
  --fs-body:    1.0625rem;
  --fs-small:   0.9375rem;
  --fs-label:   0.6875rem;   /* mono labels */
  --fs-caption: 0.75rem;

  --lh-tight:   1.04;
  --lh-snug:    1.18;
  --lh-body:    1.65;
  --tracking-label: 0.14em;
  --tracking-tight: -0.022em;

  /* Space (4px base) ----------------------------------------- */
  --s-1: 0.25rem;  --s-2: 0.5rem;   --s-3: 0.75rem;  --s-4: 1rem;
  --s-5: 1.5rem;   --s-6: 2rem;     --s-7: 2.5rem;   --s-8: 3rem;
  --s-9: 4rem;     --s-10: 5rem;    --s-11: 6.5rem;  --s-12: 8rem;
  --section-y:  clamp(4.5rem, 9vw, 9rem);
  --gutter:     clamp(1.25rem, 4vw, 2.5rem);

  /* Measure -------------------------------------------------- */
  --max-page:  88rem;
  --max-text:  38rem;   /* ~68 characters */
  --max-lead:  46rem;

  --radius:    2px;
  --radius-lg: 3px;

  --shadow-raise: 0 1px 2px rgba(10, 10, 10, 0.05), 0 12px 32px -18px rgba(10, 10, 10, 0.32);

  /* Motion --------------------------------------------------- */
  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --t-fast:   0.22s;
  --t-base:   0.35s;
  --t-slow:   0.6s;

  /* Motion tokens (inner pages). The homepage's timing language, read
     from assets/js/motion.js, so inner pages move the way it does
     without copying its effects. inner.js reads the same values (see
     its TOKENS block); nothing on an inner page uses another timing.
       --ease-crownmark          power3.out    EASE_RAIL, the hero beats
       --ease-crownmark-in-out   power2.inOut  ledger rules, reels
       --ease-crownmark-mask     power3.inOut  apertures, team photos */
  --ease-crownmark:        cubic-bezier(0.165, 0.84, 0.44, 1);
  --ease-crownmark-in-out: cubic-bezier(0.645, 0.045, 0.355, 1);
  --ease-crownmark-mask:   cubic-bezier(0.77, 0, 0.175, 1);
  --motion-fast:     0.45s;   /* labels, numbers, state changes */
  --motion-standard: 0.7s;    /* copy and headings (the beats: 0.78s) */
  --motion-slow:     0.9s;    /* masks and rules (apertures: 0.95s) */
  --motion-stagger:  70ms;    /* between items (the beats: 85ms) */
  --motion-rise:     16px;    /* copy travels this far */
  --motion-rise-sm:  8px;     /* rows, fields, small parts */
  --motion-settle:   1.04;    /* a photograph settles from this scale */

  --header-h: 76px;
}

@media (max-width: 1023.98px) { :root { --header-h: 64px; } }
/* Phones: shorter distances and quicker, tighter sequences. */
@media (max-width: 767.98px) {
  :root {
    --motion-fast: 0.4s; --motion-standard: 0.55s; --motion-slow: 0.7s;
    --motion-stagger: 45ms; --motion-rise: 10px; --motion-rise-sm: 6px; --motion-settle: 1.02;
  }
}

/* ============================================================
   RESET
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%; scroll-behavior: smooth;
  /* Focused elements and anchor targets never land under the fixed
     header, or under the call bar on smaller screens. */
  scroll-padding-top: calc(var(--header-h) + var(--s-4));
}
@media (max-width: 1023.98px) {
  html { scroll-padding-bottom: calc(52px + env(safe-area-inset-bottom) + var(--s-4)); }
}

body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, video, svg { display: block; max-width: 100%; }
img, video { height: auto; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }

::selection { background: var(--flame); color: var(--paper); }

:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--focus-ring, var(--rust));
  outline-offset: 3px;
  border-radius: var(--radius);
}

/* Rust passes 3:1 on every light ground; flame is kept for dark ones. */
.section--dark, .seven, .hero, .footer, .callbar,
.header.is-dark, .has-js .header:not(.is-solid) { --focus-ring: var(--flame); }

.skip-link {
  position: absolute; left: var(--s-4); top: -100vh; z-index: 300;
  background: var(--ink); color: var(--paper);
  padding: var(--s-3) var(--s-5); font-weight: 600;
}
.skip-link:focus { top: var(--s-4); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* ============================================================
   TYPOGRAPHY
   ============================================================ */
.display, .h1, .h2, .h3 {
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
}
.display { font-size: var(--fs-display); line-height: var(--lh-tight); }
.h1      { font-size: var(--fs-h1);      line-height: var(--lh-tight); }
.h2      { font-size: var(--fs-h2);      line-height: var(--lh-snug); }
.h3      { font-size: var(--fs-h3);      line-height: var(--lh-snug); letter-spacing: -0.012em; }

.lead {
  font-size: var(--fs-lead);
  line-height: 1.5;
  color: var(--text-muted);
  max-width: var(--max-lead);
  text-wrap: pretty;
}
.prose { max-width: var(--max-text); color: var(--text-muted); text-wrap: pretty; }
.prose + .prose { margin-top: var(--s-4); }

/* Mono is a labelling voice only: eyebrows, numbers, addresses. */
.label {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-soft);
}
.label--flame { color: var(--rust); }
.label--on-dark { color: var(--text-on-dark-soft); }

.caption { font-size: var(--fs-caption); color: var(--text-soft); }

.figure-num {
  font-family: var(--font-mono);
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

/* Section heading block ------------------------------------- */
.section-head { max-width: var(--max-lead); margin-bottom: var(--s-9); }
.section-head .label { display: block; margin-bottom: var(--s-4); }
.section-head .h2 + .lead { margin-top: var(--s-5); }

/* ============================================================
   LAYOUT
   ============================================================ */
.container {
  width: 100%;
  max-width: var(--max-page);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--narrow { max-width: 62rem; }

.section { padding-block: var(--section-y); }
.section--dark { background: var(--ink); color: var(--text-on-dark); }
.section--dim  { background: var(--paper-dim); }
.section--dark .lead,
.section--dark .prose { color: var(--text-on-dark-muted); }
.section--dark .label { color: var(--text-on-dark-soft); }

.rule { height: 1px; background: var(--rule); border: 0; }
.section--dark .rule { background: var(--rule-dark); }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; gap: var(--s-3);
  padding: 1.0625rem var(--s-6);
  font-size: var(--fs-small); font-weight: 600;
  letter-spacing: 0.01em;
  border: 1px solid transparent;
  border-radius: var(--radius);
  transition: background-color var(--t-base) var(--ease-out),
              color var(--t-base) var(--ease-out),
              border-color var(--t-base) var(--ease-out),
              transform var(--t-fast) var(--ease-out);
  min-height: 48px;
}
.btn:active { transform: translateY(1px); }

/* Ink on flame reaches 6.8:1; white on flame would not pass AA. */
.btn--primary { background: var(--flame); color: var(--ink-true); }
.btn--primary:hover { background: var(--ink); color: var(--paper); }

.btn--outline { border-color: var(--rule); color: var(--text); }
.btn--outline:hover { border-color: var(--ink); background: var(--ink); color: var(--paper); }

.btn--ghost-dark { border-color: var(--rule-dark); color: var(--paper); }
.btn--ghost-dark:hover { background: var(--paper); color: var(--ink); }

.btn--text { padding: 0; min-height: 0; gap: var(--s-2); }
.btn--text .btn-arrow { transition: transform var(--t-base) var(--ease-out); }
.btn--text:hover .btn-arrow { transform: translateX(5px); }

.btn-arrow { display: inline-block; font-family: var(--font-mono); }

/* Underline that draws on hover ----------------------------- */
.link-draw { position: relative; display: inline-block; }
.link-draw::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -3px; height: 1.5px;
  background: currentColor; transform: scaleX(0); transform-origin: left;
  transition: transform var(--t-base) var(--ease-out);
}
.link-draw:hover::after, .link-draw:focus-visible::after { transform: scaleX(1); }

/* ============================================================
   PLATE: the shared photographic treatment
   One grade recipe so separately sourced photographs read as a
   single commissioned shoot.
   ============================================================ */
.plate { position: relative; overflow: hidden; background: var(--ink); border-radius: var(--radius); }
.plate img { width: 100%; height: 100%; object-fit: cover; }
.plate::after {
  content: ''; position: absolute; inset: 0;
  background: var(--espresso); mix-blend-mode: multiply; opacity: 0.3;
  pointer-events: none;
}
.plate--deep::after { opacity: 0.52; }
.plate--light::after { opacity: 0.16; }
.plate-caption { margin-top: var(--s-3); }

/* ============================================================
   HEADER
   ============================================================ */
.header {
  position: fixed; inset: 0 0 auto; z-index: 100;
  height: var(--header-h);
  display: flex; align-items: center;
  background: transparent;
  transition: background-color var(--t-base) var(--ease-out),
              border-color var(--t-base) var(--ease-out);
  border-bottom: 1px solid transparent;
}
.header::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: var(--paper);
  opacity: 0;
  transition: opacity var(--t-base) var(--ease-out);
}
.header.is-solid::before { opacity: 1; }
.header.is-solid { border-bottom-color: var(--rule-soft); }
/* Without JavaScript nothing can flip the header, so it stays solid. */
html:not(.has-js) .header::before { opacity: 1; }
html:not(.has-js) .header { border-bottom-color: var(--rule-soft); }

.header__inner {
  width: 100%; max-width: var(--max-page); margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-6);
}

.brand { position: relative; display: inline-flex; align-items: center; flex-shrink: 1; min-width: 0; }
.brand img {
  height: 34px; width: auto; max-width: 100%; object-fit: contain; object-position: left center;
  transition: opacity var(--t-base) var(--ease-out);
}
.brand .brand--light { position: absolute; left: 0; top: 50%; transform: translateY(-50%); opacity: 0; }

@media (max-width: 639.98px) {
  .brand img { height: 26px; }
}

/* Over a dark section the solid header turns dark with it, so a white
   bar never cuts across a dark stage. */
.header.is-dark::before { background: rgba(11, 10, 9, 0.9); }
.header.is-solid.is-dark { border-bottom-color: var(--rule-dark); }
.header.is-dark .brand--dark { opacity: 0; }
.header.is-dark .brand--light { opacity: 1; }
.header.is-dark .nav__link,
.header.is-dark .header__phone,
.header.is-dark .nav-toggle { color: var(--paper); }

/* Over the dark hero the header starts transparent with the light
   wordmark; once solid it flips to the dark one. */
.has-js .header:not(.is-solid) .brand--dark { opacity: 0; }
.has-js .header:not(.is-solid) .brand--light { opacity: 1; }
.has-js .header:not(.is-solid) .nav__link,
.has-js .header:not(.is-solid) .header__phone,
.has-js .header:not(.is-solid) .nav-toggle { color: var(--paper); }

.nav { display: flex; align-items: center; gap: var(--s-7); }
.nav__link {
  font-size: var(--fs-small); font-weight: 500; white-space: nowrap;
  padding-block: var(--s-3);
  display: inline-flex; align-items: center; gap: var(--s-2);
  transition: color var(--t-fast) var(--ease-out);
}
.nav__caret {
  width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translate(-1px, -1px);
  transition: transform var(--t-base) var(--ease-out);
  opacity: 0.55;
}
.nav__item--open .nav__caret { transform: rotate(-135deg) translate(-2px, -2px); }

.header__actions { display: flex; align-items: center; gap: var(--s-5); flex-shrink: 0; }
.header__phone {
  font-family: var(--font-mono); font-size: var(--fs-small); font-weight: 500;
  white-space: nowrap;
  transition: color var(--t-fast) var(--ease-out);
}
.header .btn { padding: 0.8125rem var(--s-5); min-height: 44px; }

@media (max-width: 1279.98px) {
  .nav { gap: var(--s-5); }
  .header__inner, .header__actions { gap: var(--s-5); }
}
@media (max-width: 1099.98px) {
  .nav, .header__phone { display: none; }
  .header__actions { gap: var(--s-2); }
}

/* Below 640px the persistent call bar already carries both actions, so
   the header keeps only the wordmark and the menu control. */
@media (max-width: 639.98px) {
  .header__actions > .btn { display: none; }
}

/* ============================================================
   MEGA MENU
   ============================================================ */
.mega {
  position: fixed; inset: var(--header-h) 0 auto; z-index: 99;
  background: var(--paper);
  border-bottom: 1px solid var(--rule-soft);
  box-shadow: var(--shadow-raise);
  opacity: 0; visibility: hidden;
  transform: translateY(-8px);
  transition: opacity var(--t-base) var(--ease-out),
              transform var(--t-base) var(--ease-out),
              visibility var(--t-base);
  max-height: calc(100vh - var(--header-h));
  overflow-y: auto;
}
.mega.is-open { opacity: 1; visibility: visible; transform: translateY(0); }

.mega__inner {
  max-width: var(--max-page); margin-inline: auto;
  padding: var(--s-7) var(--gutter) var(--s-7);
  display: grid; grid-template-columns: minmax(0, 18.5rem) minmax(0, 1fr); gap: var(--s-8);
  align-items: start;
}

.mega__rail { display: flex; flex-direction: column; gap: 0; border-right: 1px solid var(--rule-soft); padding-right: var(--s-6); }
.mega__rail-item {
  display: flex; align-items: baseline; gap: var(--s-3);
  padding: var(--s-2) var(--s-3) var(--s-2) 0;
  font-size: var(--fs-small); font-weight: 600;
  text-align: left; width: 100%; color: inherit; white-space: nowrap;
  border-left: 2px solid transparent;
  padding-left: var(--s-4);
  transition: color var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out);
}
.mega__rail-item .figure-num { font-size: var(--fs-caption); color: var(--text-soft); }
.mega__rail-item:hover,
.mega__rail-item.is-active { border-left-color: var(--flame); color: var(--ink); }
.mega__rail-item.is-active .figure-num { color: var(--rust); }

.mega__panel { display: none; }
.mega__panel.is-active { display: block; }

.mega__panel-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s-4); margin-bottom: var(--s-5); }
.mega__panel-head .h3 { margin: 0; }

.mega__groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: var(--s-6) var(--s-7); }
.mega__group-title {
  font-family: var(--font-mono); font-size: var(--fs-caption);
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-soft);
  padding-bottom: var(--s-2); margin-bottom: var(--s-3);
  border-bottom: 1px solid var(--rule-soft);
}
.mega__links { display: flex; flex-direction: column; gap: var(--s-1); }
.mega__links a {
  font-size: var(--fs-small); color: var(--text-muted);
  padding-block: 0.3rem;
  transition: color var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out);
}
.mega__links a:hover { color: var(--ink); transform: translateX(3px); }

@media (max-width: 1099.98px) { .mega { display: none; } }

/* ============================================================
   MOBILE NAVIGATION
   ============================================================ */
.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  align-items: center; justify-content: center;
  flex-direction: column; gap: 5px;
}
.nav-toggle span {
  display: block; width: 22px; height: 1.5px; background: currentColor;
  transition: transform var(--t-base) var(--ease-out), opacity var(--t-fast) var(--ease-out);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

@media (max-width: 1099.98px) {
  .nav-toggle { display: flex; }
  .has-js .nav-toggle--link { display: none; }
  html:not(.has-js) button.nav-toggle { display: none; }
}
.nav-toggle--link { display: none; }
.mobile-nav:target { transform: translateY(0); visibility: visible; }
.mobile-nav__close {
  display: block; margin-bottom: var(--s-4);
  font-family: var(--font-mono); font-size: var(--fs-label);
  letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--rust);
}
.has-js .mobile-nav__close { display: none; }

.mobile-nav {
  position: fixed; inset: var(--header-h) 0 0; z-index: 98;
  background: var(--paper);
  overflow-y: auto;
  padding: var(--s-6) var(--gutter) var(--s-12);
  transform: translateY(-100%);
  visibility: hidden;
  transition: transform var(--t-slow) var(--ease-inout), visibility var(--t-slow);
}
.mobile-nav.is-open { transform: translateY(0); visibility: visible; }

.mobile-nav__link {
  display: block; font-size: 1.35rem; font-weight: 600;
  padding-block: var(--s-4);
  border-bottom: 1px solid var(--rule-soft);
}
.m-acc__trigger {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  font-size: 1.35rem; font-weight: 600; text-align: left;
  padding-block: var(--s-4);
  border-bottom: 1px solid var(--rule-soft);
}
.m-acc__sign { font-family: var(--font-mono); font-size: 1.25rem; color: var(--flame); transition: transform var(--t-base) var(--ease-out); }
.m-acc__trigger[aria-expanded="true"] .m-acc__sign { transform: rotate(45deg); }
.m-acc__panel { display: none; padding: var(--s-4) 0 var(--s-5); }
.m-acc__panel.is-open { display: block; }
.m-acc__panel a { display: block; font-size: var(--fs-small); color: var(--text-muted); padding-block: var(--s-3); }
.m-acc__group { font-family: var(--font-mono); font-size: var(--fs-caption); text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-soft); margin-top: var(--s-4); }

.mobile-nav__cta { display: grid; gap: var(--s-3); margin-top: var(--s-7); }
.mobile-nav__cta .btn { justify-content: center; }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  min-height: min(100svh, 60rem);
  display: flex; align-items: flex-end;
  background: var(--ink); color: var(--text-on-dark);
  overflow: hidden;
  padding-top: calc(var(--header-h) + var(--s-8));
  padding-bottom: var(--s-9);
}
.hero__media { position: absolute; inset: 0; z-index: 0; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; }
/* The B-roll sits exactly over the still and fades in only once it is
   playing, under the same scrim, so the composition never changes. */
.hero__video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity 1.4s var(--ease-out); pointer-events: none;
}
.hero__video.is-playing { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .hero__video { display: none; } }
.hero__scrim {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(to top, rgba(10,10,10,0.94) 0%, rgba(10,10,10,0.72) 38%, rgba(10,10,10,0.38) 72%, rgba(10,10,10,0.55) 100%),
    linear-gradient(to right, rgba(10,10,10,0.7) 0%, rgba(10,10,10,0.15) 62%);
}
.hero__inner { position: relative; z-index: 2; width: 100%; }
.hero__eyebrow { display: block; margin-bottom: var(--s-6); color: var(--flame); }
/* Phones: two clean lines, firm then cities, with no stray separator. */
.hero__eyebrow-br { display: none; }
@media (max-width: 429.98px) { .hero__eyebrow-sep { display: none; } .hero__eyebrow-br { display: inline; } }
.hero .display { max-width: 16ch; }
.hero__lead { margin-top: var(--s-6); color: var(--text-on-dark-muted); max-width: 44rem; }
.hero__actions { margin-top: var(--s-8); display: flex; flex-wrap: wrap; gap: var(--s-4); align-items: center; }
.hero__tel {
  font-family: var(--font-mono); font-size: var(--fs-small);
  color: var(--text-on-dark-muted); padding-block: var(--s-3);
}
.hero__tel:hover { color: var(--paper); }

/* Practice ticker along the hero base ----------------------- */
.hero__areas {
  margin-top: var(--s-9); padding-top: var(--s-5);
  border-top: 1px solid var(--rule-dark);
  display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-5);
}
.hero__areas a {
  font-family: var(--font-mono); font-size: var(--fs-label);
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-on-dark-soft);
  transition: color var(--t-fast) var(--ease-out);
}
.hero__areas a:hover { color: var(--flame); }

/* ============================================================
   CREDIBILITY STRIP
   ============================================================ */
.snapshot { display: grid; gap: var(--s-6); grid-template-columns: minmax(0, 1fr); }
/* Two by two on tablets, four across on desktop: never three and one. */
@media (min-width: 600px) { .snapshot { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .snapshot { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.snapshot__item { padding-top: var(--s-5); border-top: 1px solid var(--rule); }
.snapshot__value {
  font-size: clamp(2.5rem, 4.6vw, 4rem);
  font-weight: 200; line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: var(--espresso);
}
.snapshot__label { margin-top: var(--s-3); font-size: var(--fs-small); color: var(--text-muted); }

/* ============================================================
   THE FIRM: the C bore carries one statement
   ============================================================ */
.approach__head { max-width: 62rem; margin-bottom: 0; }
.approach__title {
  font-size: clamp(2.5rem, 5.6vw, 5.5rem);
  font-weight: 700; line-height: 1.02; letter-spacing: -0.035em;
  max-width: 15ch; text-wrap: balance;
}
.approach__head .lead { margin-top: var(--s-6); max-width: 36rem; }

/* ============================================================
   SEVEN AREAS. ONE FIRM. (WebGL signature section)
   Base layout first: phones, reduced motion, no JavaScript, no
   WebGL. The staged (pinned) layout is applied by motion.js with
   .is-staged, and only when the whole stage fits the window.
   ============================================================ */
.seven {
  --seven-ground: #0B0A09;
  --seven-text: #F2EDE6;
  --seven-quiet: #9A948C;     /* inactive practice names: soft warm grey */
  --seven-quieter: #6E6962;   /* numbers and arrows at rest */
  --row-h: 2.85rem;
  position: relative;
  background: var(--seven-ground);
  color: var(--seven-text);
}
.seven__inner { position: relative; }
.seven__grid {
  display: grid; row-gap: var(--s-7);
  /* Phones and tablets: the heading and the list first, then the mark as
     a compact still beneath them, rather than a squeezed desktop. */
  grid-template-areas: "head" "index" "media";
  padding-block: var(--section-y) var(--s-8);
}
.seven__head, .seven__index { position: relative; z-index: 1; }
.seven__head { grid-area: head; }
.seven__index { grid-area: index; }
.seven__media { grid-area: media; position: relative; }
.seven__label { color: var(--flame); }
.seven__title {
  margin-top: var(--s-4);
  font-size: clamp(2.6rem, 5.4vw, 5rem);
  font-weight: 700; line-height: 1.0; letter-spacing: -0.035em;
}
.seven__t1, .seven__mask { display: block; }
.seven__mask { overflow: hidden; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.seven__t2 { display: block; }

.seven__poster {
  display: block; width: 100%; max-width: 26rem; height: auto; margin-inline: auto;
  /* Feathered, so the still sits in the section rather than on it. */
  -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 62%, transparent 100%);
  mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 62%, transparent 100%);
}
.seven__canvas { display: none; }

.seven__list { border-top: 1px solid var(--rule-dark); }
.seven__row {
  display: grid; grid-template-columns: 2.25rem minmax(0, 1fr) auto; align-items: baseline;
  gap: var(--s-3); padding-block: var(--s-4);
  border-bottom: 1px solid var(--rule-dark);
}
.seven__num { font-family: var(--font-mono); font-size: var(--fs-caption); color: var(--text-on-dark-soft); transition: color var(--t-base) var(--ease-out); }
.seven__name {
  display: block; font-size: clamp(1.15rem, 1.6vw, 1.45rem); font-weight: 600;
  letter-spacing: -0.01em; line-height: 1.25; color: var(--seven-text);
  transition: color var(--t-base) var(--ease-out);
}
.seven__summary { display: block; margin-top: 0.3rem; max-width: 30rem; font-size: var(--fs-small); color: var(--text-on-dark-soft); }
.seven__arrow { font-family: var(--font-mono); color: var(--flame); transition: transform var(--t-base) var(--ease-out), opacity var(--t-base) var(--ease-out), color var(--t-base) var(--ease-out); }
.seven__row:hover .seven__arrow, .seven__row:focus-visible .seven__arrow { transform: translateX(5px); }
.seven__row:hover .seven__num, .seven__row:focus-visible .seven__num { color: var(--flame); }

.seven__needle { display: none; }
/* The way on to every service: quiet, and clear of the stage above it. */
.seven__after { padding-top: var(--s-7); padding-bottom: var(--section-y); position: relative; z-index: 1; }
.seven__after .btn { color: var(--text-on-dark-soft); font-size: var(--fs-small); font-weight: 500; }
.seven__after .btn:hover, .seven__after .btn:focus-visible { color: var(--seven-text); }

/* Desktop without the stage: list beside a sticky still of the sculpture. */
@media (min-width: 1024px) {
  .seven__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    grid-template-areas: "head media" "index media";
    grid-template-rows: auto 1fr;
    column-gap: var(--s-9); align-items: start;
  }
  .seven__media { position: sticky; top: calc(var(--header-h) + var(--s-6)); }
  .seven__poster { max-width: none; }
}

/* Staged: the pinned WebGL stage. */
.seven.is-staged .seven__inner { height: 100vh; box-sizing: border-box; padding-top: var(--header-h); overflow: clip; }
.seven.is-staged .seven__media { position: absolute; inset: 0; z-index: 0; }
.seven.is-staged .seven__media picture,
.seven.is-staged .seven__poster { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; -webkit-mask-image: none; mask-image: none; }
.seven.is-staged .seven__canvas {
  display: block; position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; transition: opacity 0.9s var(--ease-out);
}
.seven.is-live .seven__canvas { opacity: 1; }
/* The lit floor dissolves into the ground below the stage, so the pinned
   scene has no hard lower edge above the link that follows it. */
.seven.is-staged .seven__media::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 26%;
  background: linear-gradient(to bottom, rgba(11, 10, 9, 0), var(--seven-ground) 92%);
  pointer-events: none;
}
.seven.is-staged .seven__grid {
  height: 100%; box-sizing: border-box;
  /* About 40% for the list; the line stands in the space after it and
     the C sits in the right half (placed by the camera, see motion.js). */
  grid-template-columns: minmax(0, 4.8fr) minmax(0, 7.2fr);
  grid-template-areas: "head ." "index .";
  grid-template-rows: auto auto;
  align-content: center; row-gap: var(--s-7);
  padding-block: var(--s-5);
}
.seven.is-staged .seven__title { font-size: clamp(2.4rem, 4.4vw, 4.4rem); }
.seven.is-staged .seven__list { border-top: 0; border-left: 1px solid var(--rule-dark); }
.seven.is-staged .seven__row {
  border-bottom: 0; min-height: var(--row-h); box-sizing: border-box;
  padding: 0 0 0 var(--s-5); align-items: center;
}
.seven.is-staged .seven__name { font-size: clamp(1.02rem, 1.3vw, 1.25rem); font-weight: 500; color: var(--seven-quiet); }
/* Quiet until read: warm grey names and numbers, the arrow a trace until
   the row is active or pointed at, so nothing competes with the mark. */
.seven.is-staged .seven__num { color: var(--seven-quieter); }
.seven.is-staged .seven__arrow { color: var(--seven-quieter); opacity: 0.35; }
.seven.is-staged .seven__item.is-active .seven__arrow,
.seven.is-staged .seven__row:hover .seven__arrow,
.seven.is-staged .seven__row:focus-visible .seven__arrow { color: var(--flame); opacity: 1; }
.seven.is-staged .seven__summary {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.seven.is-staged .seven__item.is-active .seven__name,
.seven.is-staged.is-whole .seven__name,
.seven.is-staged .seven__row:hover .seven__name,
.seven.is-staged .seven__row:focus-visible .seven__name { color: var(--seven-text); }
.seven.is-staged .seven__item.is-active .seven__num,
.seven.is-staged.is-whole .seven__num { color: var(--flame); }
.seven.is-staged .seven__row:focus-visible { outline-offset: -3px; }
.seven.is-staged .seven__needle {
  display: block; position: absolute; left: -1px; top: 0;
  width: 2px; height: var(--row-h); background: var(--flame);
  transform-origin: 50% 0; opacity: 0;
}
.seven.is-staged + * { position: relative; }

@media (forced-colors: active) {
  .seven__media { display: none; }
}

/* ============================================================
   IN FOCUS: four practices as one sticky sequence
   ============================================================ */
.focus { padding-block: var(--section-y) var(--s-11); }
.focus__grid { display: grid; }
.focus__rail, .focus__track { display: none; }
.focus__chapter + .focus__chapter { margin-top: var(--s-10); }
.focus__inline { aspect-ratio: 5 / 4; margin: 0 0 var(--s-5); }
.focus__num { display: block; color: var(--rust); margin-bottom: var(--s-3); }
.focus__title {
  font-size: clamp(2rem, 4vw, 3.5rem); font-weight: 700; line-height: 1.04;
  letter-spacing: -0.03em; max-width: 14ch; text-wrap: balance;
}
.focus__lede { margin-top: var(--s-4); }
.focus__links { margin-top: var(--s-5); display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); }
.focus__links a { font-size: var(--fs-small); color: var(--text-muted); }
.focus__links a:hover { color: var(--ink); }
.focus__cta { margin-top: var(--s-6); }
@media (min-width: 900px) {
  .focus__chapter {
    display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    column-gap: var(--s-9); align-content: center;
  }
  .focus__chapter > * { grid-column: 2; }
  .focus__chapter > .focus__inline { grid-column: 1; grid-row: 1 / span 6; align-self: center; margin: 0; }
}

@media (min-width: 1024px) and (min-height: 620px) {
  .js-motion .focus__grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); column-gap: var(--s-10); }
  .js-motion .focus__rail { display: block; }
  .js-motion .focus__stage {
    position: sticky; top: calc(var(--header-h) + var(--s-6));
    height: calc(100vh - var(--header-h) - var(--s-6) * 2);
    display: flex; align-items: center;
  }
  .js-motion .focus__frame {
    position: relative; width: 100%; height: min(100%, 46rem);
    overflow: hidden; border-radius: var(--radius); background: var(--ink);
  }
  .js-motion .focus__plate, .js-motion .focus__plate-in { position: absolute; inset: 0; overflow: hidden; }
  .js-motion .focus__plate img { width: 100%; height: 100%; object-fit: cover; }
  .js-motion .focus__frame::after {
    content: ''; position: absolute; inset: 0; z-index: 10; pointer-events: none;
    background: linear-gradient(to top, rgba(10,10,10,0.55), rgba(10,10,10,0) 38%);
  }
  .js-motion .focus__count {
    position: absolute; left: var(--s-6); bottom: var(--s-5); z-index: 11;
    display: flex; align-items: baseline; gap: 0.5rem;
    color: var(--paper); font-size: clamp(2.75rem, 4.2vw, 4rem); font-weight: 300; line-height: 1;
  }
  .js-motion .focus__count-mask { display: inline-block; height: 1em; overflow: hidden; }
  .js-motion .focus__count-reel { display: flex; flex-direction: column; }
  .js-motion .focus__count-reel span { display: block; height: 1em; line-height: 1; }
  .js-motion .focus__count-total { font-size: 0.32em; color: rgba(255, 255, 255, 0.72); letter-spacing: 0.08em; }
  .js-motion .focus__inline { display: none; }
  .js-motion .focus__chapters { position: relative; padding-left: var(--s-8); }
  .js-motion .focus__track { display: block; position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: var(--rule); }
  .js-motion .focus__indicator {
    position: absolute; left: -1px; top: 0; width: 3px; height: 25%;
    background: var(--flame);
  }
  .js-motion .focus__chapter {
    min-height: 68vh; display: flex; flex-direction: column; justify-content: center;
    opacity: 0.45; transition: opacity 0.5s var(--ease-out);
  }
  .js-motion .focus__chapter.is-active,
  .js-motion .focus__chapter:focus-within { opacity: 1; }
  .js-motion .focus__chapter + .focus__chapter { margin-top: 0; }
}

/* ============================================================
   THE CROWNMARK APPROACH: statements, one at a time
   ============================================================ */
.principles { background: var(--paper-dim); }
.principles__inner { padding-block: var(--section-y); }
.principles__layout { display: grid; gap: var(--s-7); }
.principles__label { color: var(--rust); }
.principles__count, .principles__track { display: none; }
.principle { padding-block: var(--s-6); border-top: 1px solid var(--rule); }
.principle__title {
  font-size: clamp(2.25rem, 5.8vw, 5.75rem);
  font-weight: 700; line-height: 1; letter-spacing: -0.04em;
}
.principle__text { margin-top: var(--s-4); max-width: 32rem; font-size: var(--fs-lead); line-height: 1.5; color: var(--text-muted); }

@media (min-width: 1024px) and (min-height: 620px) {
  .js-motion .principles { height: 300vh; }
  .js-motion .principles__inner {
    position: sticky; top: 0; height: 100vh; box-sizing: border-box;
    padding-block: var(--header-h) 0; overflow: hidden;
  }
  .js-motion .principles__layout {
    height: 100%; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr);
    column-gap: var(--s-9); align-items: center;
  }
  .js-motion .principles__count {
    display: flex; align-items: baseline; gap: 0.5rem; margin-top: var(--s-6);
    font-size: clamp(3rem, 5vw, 4.75rem); font-weight: 200; line-height: 1; color: var(--espresso);
  }
  .js-motion .principles__count > span:last-child { font-size: 0.3em; color: var(--text-soft); letter-spacing: 0.08em; }
  .js-motion .principles__count-mask { display: inline-block; height: 1em; overflow: hidden; }
  .js-motion .principles__count-reel { display: flex; flex-direction: column; }
  .js-motion .principles__count-reel span { display: block; height: 1em; line-height: 1; }
  .js-motion .principles__track {
    display: block; position: relative; margin-top: var(--s-6);
    width: 100%; max-width: 12rem; height: 1px; background: var(--rule);
  }
  .js-motion .principles__bar {
    position: absolute; left: 0; top: -1px; width: 100%; height: 3px;
    background: var(--flame); transform-origin: 0 50%; transform: scaleX(0.25);
  }
  .js-motion .principles__list { align-self: stretch; position: relative; }
  .js-motion .principle {
    border-top: 0; padding-block: 4.5vh;
    opacity: 0.2; transition: opacity 0.55s var(--ease-out);
  }
  .js-motion .principle__text { opacity: 0; transition: opacity 0.55s var(--ease-out); }
  .js-motion .principle.is-active { opacity: 1; }
  .js-motion .principle.is-active .principle__text { opacity: 1; }
}

/* ============================================================
   CROWNMARK IN PRACTICE: the people
   ============================================================ */
.people { padding-block: clamp(5rem, 11vw, 10rem); }
.people__spread { display: grid; gap: var(--s-9); align-items: center; }
.people__portrait { position: relative; margin: 0 8% var(--s-8) 0; }
.people__aperture {
  aspect-ratio: 4 / 5; overflow: hidden;
  border-radius: var(--radius); background: var(--paper-warm);
}
.people__aperture img { width: 100%; height: 100%; object-fit: cover; }
.people__candid {
  position: absolute; right: -10%; bottom: -9%; width: 34%; aspect-ratio: 3 / 4;
  overflow: hidden; border-radius: var(--radius);
  outline: 6px solid var(--paper); box-shadow: var(--shadow-raise);
}
.people__candid img { width: 100%; height: 100%; object-fit: cover; }
.people__title {
  margin-top: var(--s-4);
  font-size: clamp(2.6rem, 5.4vw, 5.25rem);
  font-weight: 700; line-height: 0.98; letter-spacing: -0.04em;
}
.people__line { display: block; overflow: hidden; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.people__line > span { display: block; }
.people__lead { margin-top: var(--s-8); padding-top: var(--s-6); border-top: 1px solid var(--rule); max-width: 34rem; }
.people__name { margin-top: var(--s-2); font-size: var(--fs-h3); font-weight: 700; letter-spacing: -0.012em; }
.people__quals { margin-top: var(--s-2); font-family: var(--font-mono); font-size: var(--fs-caption); letter-spacing: 0.06em; color: var(--text-soft); }
.people__lead .prose { margin-top: var(--s-4); }
.people__note { margin-top: var(--s-3); }
.people__cta { margin-top: var(--s-7); }
@media (min-width: 900px) {
  .people__spread { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: var(--s-11); }
  .people__portrait { margin-bottom: 0; }
}

.team {
  margin-top: var(--s-11); padding-top: var(--s-7); border-top: 1px solid var(--rule);
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-8) var(--s-5);
}
@media (min-width: 900px) { .team { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-6); } }
.team__photo { position: relative; aspect-ratio: 3 / 4; overflow: hidden; border-radius: var(--radius); background: var(--paper-warm); }
.team__photo img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: opacity 0.5s var(--ease-out), transform 0.9s var(--ease-out);
}
.team__photo > picture { display: block; width: 100%; height: 100%; }
/* A person's film sits exactly over their photograph and fades in only
   once it is actually playing (mouse hover; never on touch screens). */
.people__aperture { position: relative; }
.hover-film {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.25s var(--ease-out), visibility 0s linear 0.25s;
}
.hover-film.is-playing { opacity: 1; visibility: visible; transition: opacity 0.25s var(--ease-out), visibility 0s; }
@media not ((hover: hover) and (pointer: fine)) { .hover-film { display: none; } }
.team__photo .team__candid { opacity: 0; }
@media (hover: hover) {
  .team__member:hover .team__candid { opacity: 1; }
  .team__member:not(.team__member--still):hover .team__photo img { transform: scale(1.03); }
}
.team__name { margin-top: var(--s-4); font-size: 1.125rem; font-weight: 600; letter-spacing: -0.01em; }
.team__role { display: block; margin-top: var(--s-1); color: var(--rust); }
.team__line { margin-top: var(--s-2); color: var(--text-muted); }
.team__quals { margin-top: var(--s-1); }

/* ============================================================
   CAP: the engagement letter
   ============================================================ */
.letter {
  background: var(--paper); border: 1px solid var(--rule);
  padding: clamp(var(--s-6), 4vw, var(--s-9));
  border-radius: var(--radius);
  box-shadow: var(--shadow-raise);
}
.letter__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-4); padding-bottom: var(--s-4); border-bottom: 1px solid var(--rule); }
.letter__head img { height: 26px; width: auto; }
.letter__row { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s-2) var(--s-5); padding-block: var(--s-4); border-bottom: 1px solid var(--rule-soft); }
.letter__row--muted { color: var(--text-soft); }
.letter__strike { position: relative; }
.letter__strike::after {
  content: ''; position: absolute; left: -2px; right: -2px; top: 52%; height: 1.5px;
  background: var(--rust); transform: scaleX(1); transform-origin: left;
}
.letter__clause { display: flex; gap: var(--s-5); padding-block: var(--s-4); }
.letter__clause .figure-num { color: var(--rust); flex-shrink: 0; font-size: var(--fs-caption); padding-top: 0.35rem; }
.letter__foot { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--s-5); margin-top: var(--s-7); }
.letter__sig { width: min(16rem, 100%); }
.letter__sig-rule { display: block; height: 1px; background: var(--text); transform-origin: left; }

.stamp {
  display: inline-block; position: relative;
  font-family: var(--font-mono); font-size: var(--fs-caption); font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase; text-align: center;
  color: var(--rust); border: 1.5px solid var(--rust);
  padding: var(--s-3) var(--s-4);
  transform: rotate(-4deg);
  line-height: 1.35;
}
.stamp::after { content: ''; position: absolute; inset: 3px; border: 1px solid var(--rust); }

/* ============================================================
   REVIEWS
   ============================================================ */
.reviews__summary { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-5); margin-bottom: var(--s-8); }
.reviews__score { font-size: clamp(2.5rem, 4vw, 3.5rem); font-weight: 200; letter-spacing: -0.03em; line-height: 1; }
.reviews__stars { display: inline-flex; gap: 3px; color: var(--flame); font-size: 1.05rem; }
.reviews__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: var(--s-5); }
.review-card { padding: var(--s-6); border: 1px solid var(--rule); border-radius: var(--radius); background: var(--paper); display: flex; flex-direction: column; gap: var(--s-4); }
.review-card__text { color: var(--text-muted); font-size: var(--fs-small); flex: 1; }
.review-card__text {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 9; overflow: hidden;
}
.review-card__meta { display: flex; align-items: center; gap: var(--s-3); }
.review-card__meta > span { display: flex; flex-direction: column; gap: 2px; }
.review-card__photo { width: 28px; height: 28px; object-fit: cover; flex-shrink: 0; background: var(--paper-dim); }
.review-card__author { font-style: normal; }
.review-card__author a { color: inherit; }
.review-card__author a:hover { color: var(--rust); }
.review-card__meta .caption a { color: var(--text-soft); }
.reviews__links { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-3) var(--s-7); margin-top: var(--s-7); }
.reviews__credit { color: var(--text-soft); margin-left: auto; }
@media (max-width: 639.98px) { .reviews__credit { margin-left: 0; flex-basis: 100%; } }

/* ============================================================
   OFFICES
   ============================================================ */
.offices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-8); }
.office { position: relative; }
.office__frame { aspect-ratio: 16 / 10; }
.office__level {
  position: absolute; top: calc(var(--s-8) * -1); right: var(--s-3); z-index: 2;
  font-size: clamp(4.5rem, 8vw, 8rem); font-weight: 200; line-height: 1;
  color: var(--rule-dark); font-variant-numeric: tabular-nums; pointer-events: none;
}
.office__meta { margin-top: var(--s-5); display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-4); }
@media (max-width: 899.98px) { .offices { grid-template-columns: 1fr; gap: var(--s-9); } }

/* ============================================================
   INSIGHTS
   ============================================================ */
.section-head--split {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: var(--s-5) var(--s-8); max-width: none;
}
.section-head--split > div { max-width: var(--max-lead); }
.section-head--top { align-items: flex-start; }
.section-head--top .section-head__meta { margin-top: 0.15em; }
.section-head--split .h2 { margin-top: 0; }

/* A lead article with its own photograph, then one line per practice. */
.insights { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: var(--s-9); align-items: start; }
.insight { display: flex; flex-direction: column; }
.insight--lead .insight__frame { aspect-ratio: 16 / 10; }
.insight--lead .insight__title { font-size: clamp(1.45rem, 2.3vw, 2rem); letter-spacing: var(--tracking-tight); line-height: 1.18; }
.insight--lead .insight__excerpt { font-size: var(--fs-body); max-width: var(--max-text); }

.insight-list { border-top: 1px solid var(--rule); }
.insight-row a {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-2) var(--s-5);
  padding-block: var(--s-5); border-bottom: 1px solid var(--rule);
}
.insight-row__meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-2) var(--s-4); }
.insight-row__title {
  grid-column: 1; font-size: 1.125rem; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em;
  text-wrap: pretty; transition: color var(--t-base) var(--ease-out);
}
.insight-row__arrow {
  grid-column: 2; grid-row: 1 / span 2; align-self: center;
  font-family: var(--font-mono); color: var(--flame);
  transition: transform var(--t-base) var(--ease-out);
}
.insight-row a:hover .insight-row__title { color: var(--rust); }
.insight-row a:hover .insight-row__arrow,
.insight-row a:focus-visible .insight-row__arrow { transform: translateX(5px); }
@media (max-width: 899.98px) { .insights { grid-template-columns: 1fr; gap: var(--s-7); } }
.insight__frame { aspect-ratio: 3 / 2; margin-bottom: var(--s-5); }
.insight__frame img { transition: transform var(--t-slow) var(--ease-out); }
.insight:hover .insight__frame img { transform: scale(1.04); }
.insight__meta { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: baseline; margin-bottom: var(--s-3); }
.insight__title { font-size: var(--fs-h3); font-weight: 600; letter-spacing: -0.012em; line-height: 1.25; }
.insight:hover .insight__title { color: var(--rust); }
.insight__excerpt { margin-top: var(--s-3); font-size: var(--fs-small); color: var(--text-soft); }
.insight__more { margin-top: var(--s-4); }

/* ============================================================
   FAQ
   ============================================================ */
.faq { max-width: 52rem; }
.faq__item { border-top: 1px solid var(--rule); }
.faq__item:last-child { border-bottom: 1px solid var(--rule); }
.faq__q {
  display: flex; align-items: baseline; gap: var(--s-4); width: 100%;
  padding-block: var(--s-5); text-align: left;
  font-size: var(--fs-h3); font-weight: 600; letter-spacing: -0.01em;
  list-style: none; cursor: pointer;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__num { font-family: var(--font-mono); font-size: var(--fs-caption); color: var(--rust); flex-shrink: 0; }
.faq__sign { margin-left: auto; font-family: var(--font-mono); color: var(--flame); font-size: 1.25rem; transition: transform var(--t-base) var(--ease-out); flex-shrink: 0; }
details[open] .faq__sign { transform: rotate(45deg); }
.faq__a { padding: 0 0 var(--s-5) calc(var(--s-4) + 2rem); color: var(--text-muted); max-width: var(--max-text); }

/* ============================================================
   ENQUIRY FORM
   ============================================================ */
.enquiry { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: var(--s-9); }
@media (max-width: 899.98px) { .enquiry { grid-template-columns: 1fr; gap: var(--s-7); } }

.field { margin-bottom: var(--s-6); }
.field__label { display: block; margin-bottom: var(--s-2); }
.field__input {
  width: 100%; background: transparent; border: 0;
  border-bottom: 1px solid var(--rule);
  padding: var(--s-3) 0;
  transition: border-color var(--t-fast) var(--ease-out);
  border-radius: 0;
}
.field__input:focus { outline: none; border-bottom-color: var(--flame); border-bottom-width: 2px; padding-bottom: calc(var(--s-3) - 1px); }
.field:focus-within .field__label { color: var(--rust); }
.field__error { margin-top: var(--s-2); font-size: var(--fs-caption); color: var(--rust); }
textarea.field__input { resize: vertical; min-height: 5.5rem; }

.honeypot { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.honeypot input { width: 1px; }

.form-note { margin-top: var(--s-5); }

/* The enquiry panel: a sheet of warm stone rather than a white web form,
   square, with the logo's orange line at its top-left edge. Fields are
   ruled, not boxed; the rule draws in orange from the left on focus.
   site.js sends the form in place and swaps in the success state; with
   no JavaScript the server does the same through a normal post. */
.enquiry-panel {
  --text: #0A0A0A; --text-muted: #4A4744; --text-soft: #5C5853;
  --rule: rgba(10, 10, 10, 0.18); --rule-soft: rgba(10, 10, 10, 0.08); --focus-ring: var(--rust);
  position: relative;
  background: var(--paper-warm);
  border: 1px solid rgba(10, 10, 10, 0.07);
  border-radius: 0;
  color: var(--text);
  padding: clamp(1.75rem, 3.2vw, 2.75rem) clamp(1.35rem, 3.2vw, 2.75rem) clamp(1.5rem, 2.6vw, 2.25rem);
}
.enquiry-panel::before {
  content: ''; position: absolute; left: -1px; top: -1px;
  width: 3px; height: clamp(2.5rem, 4.5vw, 3.25rem); background: var(--flame);
}
.enquiry-form .field { margin-bottom: var(--s-5); }
.enquiry-form .field__label {
  margin-bottom: 0; color: var(--text-soft);
  transition: color var(--t-fast) var(--ease-out);
}
.enquiry-form .field:focus-within .field__label { color: var(--rust); }
.enquiry-form .field__input { padding: 0.55rem 0 0.6rem; font-size: 1.0625rem; color: var(--text); }
.enquiry-form textarea.field__input { min-height: 6.25rem; line-height: 1.55; }
.enquiry-form .field__rule, .enquiry-form .field__input:focus + .field__rule { height: 1px; background: var(--rule); }
.enquiry-form .field__rule::after {
  content: ''; position: absolute; left: 0; right: 0; top: -0.5px; height: 2px;
  background: var(--flame); transform: scaleX(0); transform-origin: 0 50%;
  transition: transform 0.5s var(--ease-out);
}
.enquiry-form .field__input:focus + .field__rule::after { transform: scaleX(1); }
.enquiry-form .field.is-invalid .field__label { color: var(--rust); }
.enquiry-form .field.is-invalid .field__rule { background: var(--rust); }
.enquiry-form .field__error {
  display: flex; gap: 0.5rem; align-items: baseline;
  margin-top: var(--s-2); color: var(--rust); font-size: var(--fs-caption);
}
.enquiry-form .field__error::before { content: ''; flex: none; width: 8px; height: 1px; background: currentColor; transform: translateY(-0.3em); }
.enquiry-form__general {
  margin: 0 0 var(--s-5); padding: var(--s-3) var(--s-4);
  border-left: 2px solid var(--rust); background: rgba(156, 53, 25, 0.06);
  color: var(--text); font-size: var(--fs-small);
}
.enquiry-form .field-pair { gap: 0 var(--s-6); }
.enquiry-form__send {
  width: 100%; justify-content: space-between;
  margin-top: var(--s-3); padding-inline: var(--s-5);
}
.enquiry-form__send .btn-arrow { transition: transform 0.45s var(--ease-out); }
.enquiry-form__send:hover .btn-arrow, .enquiry-form__send:focus-visible .btn-arrow { transform: translateX(6px); }
.enquiry-form__send[aria-busy="true"] { pointer-events: none; opacity: 0.72; }
.enquiry-form__send[aria-busy="true"] .btn-arrow { animation: cm-send 1.1s var(--ease-out) infinite; }
@keyframes cm-send { 0% { transform: translateX(0); opacity: 1; } 60% { transform: translateX(8px); opacity: 0; } 61% { transform: translateX(-6px); opacity: 0; } 100% { transform: translateX(0); opacity: 1; } }
.enquiry-panel .form-note { margin-top: var(--s-4); color: var(--text-soft); }
/* The privacy link is the same colour as the sentence around it, so its
   line stays drawn at rest (lighter) and darkens on hover or focus. */
.form-note .link-draw::after { transform: scaleX(1); opacity: 0.6; transition: opacity var(--t-base) var(--ease-out); }
.form-note .link-draw:hover::after, .form-note .link-draw:focus-visible::after { opacity: 1; }

.enquiry-success { outline: none; }
.enquiry-success__label { color: var(--text-soft); }
.enquiry-success__title {
  margin: var(--s-3) 0 var(--s-4);
  font-size: clamp(1.5rem, 2.4vw, 2rem); font-weight: 700; line-height: 1.15; letter-spacing: -0.02em;
  max-width: 20ch;
}
.enquiry-success__text { max-width: 34rem; color: var(--text-muted); }
.enquiry-success__again { display: inline-block; margin-top: var(--s-6); font-size: var(--fs-small); }
.enquiry-panel.is-sent .enquiry-success { animation: cm-arrive 0.7s var(--ease-out) both; }
@keyframes cm-arrive { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .enquiry-form .field__rule::after, .enquiry-form__send .btn-arrow { transition: none; }
  .enquiry-form__send[aria-busy="true"] .btn-arrow, .enquiry-panel.is-sent .enquiry-success { animation: none; }
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer { background: var(--ink); color: var(--text-on-dark); padding-top: var(--s-11); }
.footer__top { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 2.4fr); gap: var(--s-9); padding-bottom: var(--s-9); }
.footer__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: var(--s-7); }
.footer__col-title { display: block; color: var(--flame); margin-bottom: var(--s-4); }
.footer__col a, .footer__col p { display: block; font-size: var(--fs-small); color: var(--text-on-dark-muted); padding-block: 0.28rem; }
.footer__col a:hover { color: var(--paper); }
.footer__legal {
  border-top: 1px solid var(--rule-dark); padding-block: var(--s-6);
  display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-7); justify-content: space-between;
}
.footer__legal p { font-size: var(--fs-caption); color: var(--text-on-dark-soft); }
@media (max-width: 899.98px) { .footer__top { grid-template-columns: 1fr; gap: var(--s-7); } }
/* On larger phones the columns fall into two and Contact drops to a row of
   its own: give it the whole row, so the email address stays on one line. */
@media (max-width: 599.98px) { .footer__col--contact { grid-column: 1 / -1; } }

.wordmark {
  font-weight: 700; font-size: 13.5vw; line-height: 0.76;
  letter-spacing: -0.03em; color: var(--paper); opacity: 0.09;
  text-align: center; white-space: nowrap; margin-bottom: -0.14em;
  user-select: none;
}

/* ============================================================
   MOBILE CALL BAR
   ============================================================ */
.callbar {
  position: fixed; inset: auto 0 0; z-index: 90;
  display: none; grid-template-columns: 1fr 1fr;
  font-size: var(--fs-small); font-weight: 600;
  padding-bottom: env(safe-area-inset-bottom);
}
.callbar a { display: flex; align-items: center; justify-content: center; gap: var(--s-2); padding-block: var(--s-4); min-height: 52px; }
.callbar__call { background: var(--ink); color: var(--paper); }
.callbar__book { background: var(--flame); color: var(--ink-true); }
@media (max-width: 1023.98px) { .callbar { display: grid; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* Keep page content clear of the fixed call bar on phones. */
@media (max-width: 1023.98px) {
  body { padding-bottom: 52px; }
}

/* A hero that fits the phone rather than a scaled-down desktop hero. */
@media (max-width: 639.98px) {
  .hero { min-height: auto; padding-top: calc(var(--header-h) + var(--s-7)); padding-bottom: var(--s-7); }
  .hero__areas { margin-top: var(--s-7); gap: var(--s-2) var(--s-4); }
  .hero__actions { gap: var(--s-3); }
  .hero__actions .btn { width: 100%; justify-content: center; }
  .hero .display { max-width: none; }
}

/* ============================================================
   MOTION SUPPORT
   Structure the mechanics in assets/js/motion.js depend on. Every
   start state is applied by JS at runtime, never here, so the page
   is complete with scripts disabled and for reduced-motion visitors.
   ============================================================ */

/* Hairlines that get ruled. Real 1px elements, never borders, so
   they can be transformed and cannot blur. */
.rule-line { display: block; height: 1px; background: var(--rule); width: 100%; }
.section--dark .rule-line { background: var(--rule-dark); }

/* 1. ESCAPEMENT SET: word masks clip descenders, hence the padding
   and matching negative margin. */
.display .w {
  display: inline-block;
  overflow: hidden;
  padding-bottom: 0.12em;
  margin-bottom: -0.12em;
  vertical-align: bottom;
}
.display .c { display: inline-block; }

/* 4. DETENT COUNTER: one column per digit, twelve 1em cells, a
   single pass. Tabular figures so column widths cannot jump. */
.roll {
  display: inline-block; height: 1em; overflow: hidden;
  vertical-align: top; font-variant-numeric: tabular-nums;
}
.roll__col { display: block; line-height: 1; }
.roll__cell { display: block; height: 1em; line-height: 1; font-variant-numeric: tabular-nums; }

/* The snapshot rule sits above the figure rather than being a border. */
.snapshot__item { border-top: 0; padding-top: 0; }
.snapshot__item .rule-line { margin-bottom: var(--s-5); }
/* Words rather than a figure. The paragraph keeps the figures' size, and
   so their line box, while the words inside are set smaller: they sit on
   the figures' baseline and every label in the row starts level. */
.snapshot__value--text { font-weight: 400; }
.snapshot__value--text > span {
  font-size: clamp(1.5rem, 2.4vw, 2.25rem);
  letter-spacing: -0.01em;
}

/* BORE DOLLY: the letterform sits behind the firm's statement as a
   machined recess rather than a graphic. */
.approach { position: relative; overflow: hidden; }
.approach__inner { position: relative; }
.approach__bore {
  position: absolute; inset: 0; margin: auto;
  width: min(46vw, 34rem); height: auto;
  pointer-events: none; z-index: 0;
  fill: #181818;
}
.approach__content { position: relative; z-index: 1; }

@media (min-width: 1024px) {
  .js-motion .approach__inner {
    min-height: 100vh;
    display: flex; flex-direction: column; justify-content: center;
    padding-block: var(--s-9);
  }
}

/* 10. PLATEN COMPOSE: the line-item rule and the strikethrough are
   real elements so both can be scrubbed. */
.letter__row { position: relative; border-bottom: 0; }
.letter__row-rule { position: absolute; left: 0; right: 0; bottom: 0; background: var(--rule-soft); }
.letter__strike { position: relative; display: inline-block; }
.letter__strike-rule {
  position: absolute; left: -2px; right: -2px; top: 52%;
  height: 1.5px; background: var(--rust); display: block;
}
.letter__strike::after { content: none; }
.letter__clause-num { display: inline-block; overflow: hidden; align-self: flex-start; }   /* one number line tall, so each stays hidden until its clause */
.letter__clause-num > span { display: inline-block; }

/* The CAP stage is pinned at its own centre, so it needs no forced
   height; forcing one made it taller than the viewport. */

/* 12. COLLATION: sheets must land on exact zero or the type inside
   stays subpixel-blurred. */
.insight { backface-visibility: hidden; }

/* 3. COUNTERWEIGHT: the wordmark is genuinely cropped at its baseline
   by its wrapper rather than by a negative margin alone. */
.wordmark-crop { overflow: hidden; }

/* 5. LEDGER RULE at CONTACT: inputs lose their border so a real rule
   element can be drawn underneath them. */
.field__input:has(+ .field__rule) { border-bottom: 0; padding-bottom: var(--s-3); }
.field__rule { position: relative; background: var(--rule); transition: background-color var(--t-fast) var(--ease-out); }
.field__input:focus + .field__rule { background: var(--flame); height: 2px; }

/* Hero start state, from first paint. The hero animates on load, so a
   runtime start state would show the headline, hide it, then bring it
   back: a visible flash. visibility (not opacity) on the h1, because
   the split characters carry their own opacity and an opacity:0
   parent would hide them however far they animate.
   Only ever applied under .js-motion, and the head script removes
   .js-motion if the motion script fails to arrive, so the headline can
   never be left hidden. */
.js-motion [data-hero-title] { visibility: hidden; }
/* Phones: the hero's entrance (the title's rise, then the beats) runs in
   CSS from first paint with motion.js's own timings, so the largest
   element on the page never waits for scripts to download. Desktop builds
   its letter reveal in motion.js as before. */
@media (max-width: 1023.98px) {
  .js-motion [data-hero-title] { visibility: visible; animation: cm-hero-rise 0.7s cubic-bezier(0.165, 0.84, 0.44, 1) 0.12s both; }
  /* The beats follow from 0.42s, 0.06s apart, 14px, 0.6s (as motion.js
     did on phones). */
  .js-motion [data-hero-beat] { animation: cm-hero-beat 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0.42s both; }
  .js-motion .hero__lead[data-hero-beat] { animation-delay: 0.48s; }
  .js-motion .hero__actions[data-hero-beat] { animation-delay: 0.54s; }
  .js-motion .hero__areas[data-hero-beat] { animation-delay: 0.6s; }
}
@keyframes cm-hero-rise { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
@keyframes cm-hero-beat { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.js-motion [data-hero-beat] { opacity: 0; }

/* Q, H, M. Where GSAP drives transform, the CSS transition on the same
   property must be off or each frame restarts a transition and smears
   the tween. Reduced-motion and no-JS visitors keep the CSS versions. */
.js-motion .faq__sign { transition: none; }
.js-motion details[open] .faq__sign { transform: none; }
.js-motion .insight__frame img { transition: none; }
/* The insight hover zoom goes through a wrapper-free rule that GSAP
   never writes to, so the entrance tween cannot disable it. */
.js-motion .insight:hover .insight__frame img { transform: scale(1.04); transition: transform var(--t-slow) var(--ease-out); }

/* K. Pinned areas clear the fixed header and hold their own height. */
@media (min-width: 1024px) {
  .js-motion .approach__inner {
    box-sizing: border-box;
    padding-block: calc(var(--header-h) + var(--s-5)) var(--s-7);
  }
}

/* LENIS. Its recommended base rules. Native smooth scrolling is turned
   off while Lenis runs, or the two smooth the same scroll twice. The
   html rule near the top keeps native smoothing for visitors without
   Lenis, and the reduced-motion block turns it off for them. */
html.lenis { scroll-behavior: auto; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-stopped { overflow: clip; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-smooth iframe { pointer-events: none; }

/* ============================================================
   FORCED COLOURS (Windows high contrast)
   Backgrounds are replaced by the system, so anything drawn with a
   background colour needs a real border or outline instead.
   ============================================================ */
@media (forced-colors: active) {
  .field__input { border-bottom: 1px solid CanvasText !important; }
  .field__input:focus { outline: 2px solid Highlight; outline-offset: 2px; }
  .field__rule { display: none; }
  .js-motion .focus__chapter,
  .js-motion .principle,
  .js-motion .principle__text { opacity: 1; }
  .brand--dark, .brand--light { forced-color-adjust: none; background: #FFFFFF; }
  .brand--light { display: none; }
  .header .brand--dark { opacity: 1 !important; }
}


/* ============================================================
   INNER PAGES
   Every component below is assembled from the tokens and the
   homepage components above: the same ink hero, mono labels,
   hairline rules, plate grade and flame accent. Motion on inner
   pages is described in assets/js/inner.js; the start states sit
   at the end of this file under html.mi.
   ============================================================ */

/* Header search control ------------------------------------- */
.header__search {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; margin-inline: calc(var(--s-2) * -1);
  transition: color var(--t-fast) var(--ease-out);
}
.header__search:hover { color: var(--rust); }
.has-js .header:not(.is-solid) .header__search,
.header.is-dark .header__search { color: var(--paper); }
.has-js .header:not(.is-solid) .header__search:hover,
.header.is-dark .header__search:hover { color: var(--flame); }

/* Active navigation ------------------------------------------ */
.nav__link[aria-current="page"]::after { transform: scaleX(1); }
.nav__item--current > .nav__link { position: relative; }
.nav__item--current > .nav__link::after {
  content: ''; position: absolute; left: 0; right: 1.1rem; bottom: 0.35rem; height: 1.5px; background: var(--flame);
}
.mega__rail-item--current .figure-num,
.mega__rail-item--current { color: var(--rust); }
.mobile-nav a[aria-current] { color: var(--rust); font-weight: 600; }

/* Mega menu: key services and the route to the full list ---- */
.mega__primary { max-width: none; }
.mega__links--cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-1) var(--s-7); }
.mega__all { margin-top: var(--s-5); }

/* Page hero -------------------------------------------------- */
.hero--page {
  min-height: 0; align-items: flex-end;
  padding-top: calc(var(--header-h) + clamp(3.5rem, 8vw, 7rem));
  padding-bottom: clamp(2rem, 4vw, 3.25rem);
}
.hero--page.hero--image { min-height: min(84svh, 48rem); }
.hero--page.hero--image.hero--low { min-height: 0; }
.hero--page.hero--compact { padding-top: calc(var(--header-h) + clamp(2.5rem, 5vw, 4.5rem)); }
.hero--deep .hero__scrim { background: linear-gradient(to top, rgba(10,10,10,0.96) 0%, rgba(10,10,10,0.8) 40%, rgba(10,10,10,0.55) 100%); }
.hero--page .hero__eyebrow { margin-bottom: var(--s-5); display: inline-block; }
.hero--page .page-title { max-width: 22ch; }
.hero--compact .page-title { font-size: var(--fs-h2); }
.hero--article .page-title { max-width: 26ch; font-size: clamp(2.1rem, 4.4vw, 3.9rem); line-height: 1.08; }
.hero--page .hero__lead { max-width: 46rem; }
.hero--page .hero__actions { margin-top: var(--s-7); }
.hero__meta { margin-top: var(--s-5); }
.hero__copy { max-width: 62rem; }
.hero__split { display: grid; gap: var(--s-8); align-items: end; }
.hero__aside { position: relative; }
.hero__rule { margin-top: clamp(2.5rem, 5vw, 4.5rem); background: var(--rule-dark); }
@media (min-width: 1024px) {
  .hero__split { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--s-10); }
}
/* Cover: an editorial photograph beside the heading. It keeps to the
   height of the copy so the legal content, not the picture, leads. */
.hero-cover { margin: 0; }
.hero-cover__frame { aspect-ratio: 16 / 10; }
.hero-cover__frame > picture { display: block; width: 100%; height: 100%; }
.hero-cover__caption { margin-top: var(--s-3); color: var(--text-on-dark-soft); max-width: 32rem; }
@media (min-width: 1024px) {
  .hero__split--cover { column-gap: clamp(3rem, 6vw, 6.5rem); }
  .hero-cover__frame { aspect-ratio: 5 / 6; max-height: min(30rem, 64vh); width: 100%; }
}
/* Service cover layouts (cm_cover_figure). The editor picks one per page:
   beside the heading (cm_hero), full width after the introduction, or a
   narrow strip aligned with the reading column. */
.cover-band { padding-top: clamp(2.5rem, 5vw, 4.5rem); }
.cover-figure { margin: 0; }
.cover-figure__frame { overflow: hidden; }
.cover-figure__frame > picture { display: block; width: 100%; height: 100%; }
.cover-figure__frame img { width: 100%; height: 100%; object-fit: cover; }
.cover-figure--wide .cover-figure__frame { aspect-ratio: 16 / 9; }
.cover-figure--narrow { margin-bottom: var(--s-8); max-width: 44rem; }
.cover-figure--narrow .cover-figure__frame { aspect-ratio: 21 / 9; }
.cover-figure__caption { margin-top: var(--s-3); color: var(--text-soft); max-width: 36rem; }
@media (min-width: 1024px) {
  .cover-figure--wide .cover-figure__frame { aspect-ratio: 21 / 8; }
}

/* ============================================================
   AMBIENT COMPOSITION: the logo's orange bar, alive in the hero
   One composition in every dark page hero, drawn from the
   Crownmark bar: a solid extruded slab and a fine line, two thin
   offset lines, two floating planes, or a corner frame round the
   photograph. cm_hero() picks one for the hero's layout and the
   page, so neighbouring pages differ and every placement is
   deliberate. It draws in after the hero's entrance, then drifts
   on its own, never with the scroll: each part moves a few pixels
   over half a minute, out of step with its partner, so the hero
   feels alive without anything that reads as an animation.
   Transform and opacity only. Still under reduced motion, hidden
   in forced colours and print.
   ============================================================ */
.ambient {
  position: absolute; z-index: 1; pointer-events: none;
  color: var(--brand-orange);
}
.ambient i { position: absolute; display: block; background: currentColor; will-change: transform; }
.ambient .amb__a { --dt: 27s; --dd: -6s; --dy: -14px; --ds: 1.02; transform-origin: 50% 100%; }
.ambient .amb__b { --dt: 21s; --dd: -13s; --dy: 12px; transform-origin: 50% 0; }

/* Rise: a slab standing up out of the hero's floor through the rule,
   inside the grid's right edge, with a fine line beside it. Anchored
   to the full-width hero, so it also stands over a full-bleed photo. */
.ambient--rise {
  right: calc(max(var(--gutter), (100% - var(--max-page)) / 2 + var(--gutter)) + clamp(1.5rem, 4vw, 4.5rem));
  bottom: calc(-1 * clamp(2rem, 4vw, 3.25rem) - 2px); width: 3rem; height: clamp(10rem, 3rem + 14vw, 17rem);
}
.ambient--rise .amb__a { right: 0; bottom: 0; width: 14px; height: 100%; --dy: 10px; }
.ambient--rise .amb__b { right: 34px; bottom: 0; width: 2px; height: 64%; --dy: 8px; transform-origin: 50% 100%; }
.ambient--rise-mid { right: calc(max(var(--gutter), (100% - var(--max-page)) / 2 + var(--gutter)) + 22%); }

/* Ledge: a horizontal slab entering from the screen's edge, a fine line
   running further in beneath it. */
.ambient--ledge { right: 0; top: 34%; width: clamp(11rem, 4rem + 14vw, 17rem); height: 3rem; }
.ambient--ledge .amb__a { right: 0; top: 0; width: 64%; height: 12px; --dy: 0px; --dx: 14px; --ds: 1; transform-origin: 100% 50%; }
.ambient--ledge .amb__b { right: 0; top: 30px; width: 100%; height: 2px; --dy: 0px; --dx: 12px; transform-origin: 100% 50%; }

/* Gap: a slab and a fine line standing between the copy and the
   photograph (anchored to the photograph). */
.ambient--gap { left: calc(clamp(3rem, 6vw, 6.5rem) / -2 - 0.75rem); top: 14%; width: 1.5rem; height: 72%; }
.ambient--gap .amb__a { left: 0; top: 14%; width: 10px; height: 52%; }
.ambient--gap .amb__b { left: 22px; top: 0; width: 2px; height: 78%; }

/* Frame: an L round a corner of the photograph, the upright carrying
   the bar's weight (top right, or bottom left beside the copy). */
.ambient--frame { right: -18px; top: -18px; width: 40%; height: 46%; }
.ambient--frame .amb__a { right: 0; top: 0; width: 8px; height: 100%; --dy: 12px; transform-origin: 50% 0; }
.ambient--frame .amb__b { right: 0; top: 0; width: 100%; height: 3px; --dy: 0px; --dx: -12px; transform-origin: 100% 50%; }
.ambient--frame-low { right: auto; top: auto; left: -18px; bottom: -18px; }
.ambient--frame-low .amb__a { right: auto; top: auto; left: 0; bottom: 0; --dy: -12px; transform-origin: 50% 100%; }
.ambient--frame-low .amb__b { right: auto; top: auto; left: 0; bottom: 0; --dx: 12px; transform-origin: 0 50%; }
/* A profile portrait is narrower than its column and sits to the right. */
.hero__aside .ambient--gap { left: auto; right: calc(min(22rem, 100%) + clamp(1.75rem, 3vw, 3rem)); }
.hero__aside .ambient--frame-low { left: calc(100% - min(22rem, 100%) - 18px); }

/* Text-led heroes keep a calm field to the right of the copy; these
   stand in it, anchored to the grid. */
.hero__inner > .container:first-of-type { position: relative; }
.ambient--monolith { right: 8%; top: 50%; width: 3rem; height: clamp(12rem, 2rem + 17vw, 19rem); transform: translateY(-50%); }
.ambient--monolith .amb__a { left: 0; top: 0; width: 14px; height: 70%; }
.ambient--monolith .amb__b { left: 36px; top: 20%; width: 2px; height: 80%; }
.ambient--lines { right: 12%; top: 50%; width: 2rem; height: clamp(12rem, 3rem + 16vw, 19rem); transform: translateY(-50%); }
.ambient--lines .amb__a { left: 0; top: 0; width: 3px; height: 100%; --dy: -12px; }
.ambient--lines .amb__b { left: 18px; top: 30%; width: 3px; height: 56%; }

/* Tablets and phones: the copy runs the full width, so the hero carries
   a small rise of its own instead (cm_hero adds it), standing at the
   right end of the floor, the one place every layout leaves empty. */
.ambient--phone { display: none; }
@media (max-width: 1023.98px) {
  .ambient:not(.ambient--phone) { display: none; }
  .ambient--phone {
    display: block; right: var(--gutter); bottom: calc(-1 * clamp(2rem, 4vw, 3.25rem) - 2px);
    width: 2rem; height: clamp(4.5rem, 2.5rem + 8vw, 6.5rem);
  }
  .ambient--phone .amb__a { right: 0; bottom: 0; width: 6px; height: 100%; --dy: 7px; }
  .ambient--phone .amb__b { right: 16px; bottom: 0; width: 2px; height: 60%; --dy: 6px; transform-origin: 50% 100%; }
}
@media (min-width: 640px) and (max-width: 1023.98px) { .ambient--phone .amb__a { width: 8px; } }
/* Below a stacked cover photograph the floor is shorter: stay clear of it. */
@media (max-width: 1023.98px) { .hero:has(.hero-cover) .ambient--phone { height: clamp(3rem, 2rem + 4vw, 4rem); } }

/* In after the hero's entrance, never before it: the parts draw out
   from their base, then settle into the drift. With no script or
   reduced motion they are simply there. */
.mi [data-hero] .ambient i { transition: scale 1.1s var(--ease-out) 0.55s; }
.mi [data-hero] .ambient .amb__b { transition-delay: 0.8s; }
.mi [data-hero]:not(.is-in) .ambient i { scale: 1 0; }
.mi [data-hero]:not(.is-in) .ambient--ledge i,
.mi [data-hero]:not(.is-in) .ambient--frame .amb__b { scale: 0 1; }

@media (prefers-reduced-motion: no-preference) {
  .ambient i { animation: amb-drift var(--dt) ease-in-out var(--dd) infinite alternate both; }
  .ambient .amb__b { animation: amb-drift var(--dt) ease-in-out var(--dd) infinite alternate both, amb-breathe 17s ease-in-out -4s infinite alternate both; }
  /* Contact: its photograph breathes too, by two per cent over half a minute. */
  .tpl-contact .hero-cover__frame > picture { animation: amb-cover 30s ease-in-out -8s infinite alternate both; }
}
@keyframes amb-drift {
  from { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
  to   { transform: translate3d(var(--dx, 0px), var(--dy, 0px), 0) rotate(var(--dr, 0deg)) scale(var(--ds, 1)); }
}
@keyframes amb-breathe { from { opacity: 1; } to { opacity: 0.72; } }
@keyframes amb-cover { from { scale: 1; } to { scale: 1.022; } }
@media (forced-colors: active) { .ambient { display: none; } }
@media print { .ambient { display: none; } }

.article-meta {
  display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5);
  font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-on-dark-soft);
}
.article-meta a { color: var(--text-on-dark-muted); }
.article-meta a:hover { color: var(--paper); }

/* Breadcrumbs (on the ink hero) ------------------------------ */
.crumbs { margin-bottom: var(--s-6); }
.crumbs ol { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.65rem var(--s-2); }
.crumbs li {
  display: inline-flex; align-items: baseline; gap: var(--s-2);
  font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-on-dark-soft);
}
/* The separator ends a crumb, so a wrapped trail never starts with one. */
.crumbs li:not(:last-child)::after { content: '/'; opacity: 0.5; }
.crumbs a { color: var(--text-on-dark-muted); transition: color var(--t-fast) var(--ease-out); display: inline-block; padding-block: 0.3rem; margin-block: -0.3rem; }
.crumbs a:hover { color: var(--flame); }
.crumbs [aria-current] { color: var(--text-on-dark-soft); display: inline-block; max-width: 38ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }

/* Layouts ---------------------------------------------------- */
.section--tight { padding-block: clamp(3rem, 6vw, 5.5rem); }
/* overflow: clip keeps the ghost inside without making the section a
   scroll container, so sticky children still stick. */
.section--ghost { position: relative; overflow: hidden; overflow: clip; }
.section--ghost > .container { position: relative; z-index: 1; }
.ghost {
  position: absolute; right: -0.04em; top: -0.1em; z-index: 0;
  font-size: clamp(11rem, 26vw, 28rem); font-weight: 700; line-height: 1; letter-spacing: -0.06em;
  color: var(--ghost, var(--paper-dim)); white-space: nowrap; pointer-events: none; user-select: none;
}
.section--dim { --ghost: var(--paper-warm); }
.section--dark, .tpl [data-ink] { --ghost: #161514; }

.split { display: grid; gap: var(--s-7); }
.split__rule { margin-bottom: var(--s-6); }
@media (min-width: 960px) {
  .split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--s-10); align-items: start; }
  .split__aside { position: sticky; top: calc(var(--header-h) + var(--s-6)); }
}
.split__aside .h2 { margin-top: var(--s-4); max-width: 16ch; }
.facts { margin-top: var(--s-7); display: grid; gap: var(--s-4); border-top: 1px solid var(--rule); padding-top: var(--s-5); max-width: 24rem; }
.facts > div { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-4); }
.facts dd { font-size: var(--fs-small); color: var(--text-muted); text-align: right; }
.facts dd.figure-num { font-size: 1.35rem; color: var(--espresso); }

.statement {
  font-size: clamp(1.3rem, 2.1vw, 1.75rem); line-height: 1.42; letter-spacing: -0.012em;
  color: var(--text); text-wrap: pretty; max-width: 40ch;
}
.statement--large {
  font-size: clamp(2.2rem, 4.8vw, 4.5rem); font-weight: 700; line-height: 1.04; letter-spacing: -0.035em;
  max-width: 15ch; color: var(--text);
}

/* Rich text (migrated and editor content) -------------------- */
.rich { max-width: var(--max-text); color: var(--text-muted); }
.rich > * + * { margin-top: var(--s-4); }
.rich h2, .rich h3, .rich h4 { color: var(--text); letter-spacing: -0.012em; line-height: 1.25; text-wrap: balance; }
.rich h2 { font-size: clamp(1.45rem, 2.2vw, 1.85rem); margin-top: var(--s-9); padding-top: var(--s-5); position: relative; }
.rich h2::before { content: ''; position: absolute; left: 0; top: 0; width: 2.5rem; height: 2px; background: var(--flame); }
.rich h3 { font-size: var(--fs-h3); margin-top: var(--s-7); }
.rich h4 { font-size: 1.125rem; margin-top: var(--s-6); }
.rich h2 + *, .rich h3 + *, .rich h4 + * { margin-top: var(--s-3); }
.rich > :first-child { margin-top: 0; }
.rich > h2:first-child { padding-top: 0; }
.rich > h2:first-child::before { content: none; }
.rich strong, .rich b { color: var(--text); font-weight: 600; }
.rich a { color: var(--rust); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color var(--t-fast) var(--ease-out), text-decoration-thickness var(--t-fast); }
.rich a:hover { color: var(--ink); text-decoration-thickness: 2px; }
.rich ul, .rich ol { padding-left: 0; }
.rich ul > li, .rich ol > li { position: relative; padding-left: var(--s-6); }
.rich ul > li + li, .rich ol > li + li { margin-top: var(--s-2); }
.rich ul > li::before { content: ''; position: absolute; left: 0.35rem; top: calc(0.75em - 1px); width: 0.5rem; height: 2px; background: var(--flame); }
.rich ol { counter-reset: rich; }
.rich ol > li { counter-increment: rich; }
.rich ol > li::before { content: counter(rich, decimal-leading-zero); position: absolute; left: 0; top: 0.2em; font-family: var(--font-mono); font-size: var(--fs-caption); color: var(--rust); }
.rich blockquote { border-left: 2px solid var(--flame); padding-left: var(--s-5); color: var(--text); font-size: var(--fs-lead); line-height: 1.5; }
.rich hr { border: 0; height: 1px; background: var(--rule); margin-block: var(--s-8); }
.rich img { border-radius: var(--radius); }
.rich figure { margin-block: var(--s-7); }
.rich figcaption { margin-top: var(--s-2); font-size: var(--fs-caption); color: var(--text-soft); }
.rich table { width: 100%; border-collapse: collapse; font-size: var(--fs-small); display: block; overflow-x: auto; }
.rich th, .rich td { text-align: left; padding: var(--s-3) var(--s-4) var(--s-3) 0; border-bottom: 1px solid var(--rule-soft); vertical-align: top; }
.rich th { font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-soft); font-weight: 500; }
.rich td strong { color: var(--text); }
.rich tr:first-child td { border-bottom-color: var(--rule); }
/* Reading pages: a larger rhythm and a pull first paragraph. */
.rich--read { font-size: 1.0625rem; line-height: 1.72; max-width: 42rem; }
.rich--read > * + * { margin-top: var(--s-5); }
.rich--read > p:first-child { font-size: clamp(1.15rem, 1.5vw, 1.3rem); line-height: 1.55; color: var(--text); }
.rich--article { font-size: 1.125rem; line-height: 1.72; }
.rich--legal h2 { font-size: var(--fs-h3); }
.rich--section { margin-top: var(--s-8); padding-top: var(--s-6); border-top: 1px solid var(--rule); }
.rich--section h3 { margin-top: 0; }

/* Ledger: "Our services include" ----------------------------- */
.ledger { margin-top: var(--s-9); max-width: 42rem; }
.ledger__title { display: block; padding-bottom: var(--s-3); border-bottom: 1px solid var(--rule); }
.ledger__list > li {
  position: relative;
  display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: var(--s-3);
  padding-block: var(--s-4); color: var(--text);
}
.ledger__list > li::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--rule-soft); transform-origin: left; }
.ledger__list .figure-num { color: var(--rust); font-size: var(--fs-caption); padding-top: 0.3rem; }

/* Service rows ----------------------------------------------- */
.svc-list { border-top: 1px solid var(--rule); }
.svc-row { position: relative; }
.svc-row::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--rule); transform-origin: left; }
.svc-row a {
  position: relative;
  display: grid; grid-template-columns: 2.75rem minmax(0, 1fr) auto; gap: var(--s-3) var(--s-4); align-items: start;
  padding: var(--s-5) var(--s-2) var(--s-5) 0;
}
.svc-row__num { padding-top: 0.45em; font-size: var(--fs-caption); color: var(--text-soft); transition: color var(--t-base) var(--ease-out); }
.svc-row__title { display: inline-block; font-size: 1.1875rem; font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; transition: transform var(--t-base) var(--ease-out), color var(--t-base) var(--ease-out); }
.svc-row__tag { margin-left: var(--s-2); color: var(--rust); vertical-align: 0.15em; }
.svc-row__text { display: block; margin-top: var(--s-1); max-width: 40rem; font-size: var(--fs-small); color: var(--text-soft); transition: color var(--t-base) var(--ease-out); }
.svc-row__arrow { font-family: var(--font-mono); color: var(--text-soft); align-self: center; padding-top: 0.1em; transition: transform var(--t-base) var(--ease-out), color var(--t-base) var(--ease-out); }
.svc-row__line { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--flame); transform: scaleX(0); transform-origin: left; transition: transform var(--t-slow) var(--ease-inout); z-index: 1; }
.svc-row a:hover .svc-row__line, .svc-row a:focus-visible .svc-row__line { transform: scaleX(1); }
.svc-row a:hover .svc-row__title, .svc-row a:focus-visible .svc-row__title { transform: translateX(6px); }
.svc-row a:hover .svc-row__text, .svc-row a:focus-visible .svc-row__text { color: var(--text-muted); }
.svc-row a:hover .svc-row__num, .svc-row a:focus-visible .svc-row__num { color: var(--rust); }
.svc-row a:hover .svc-row__arrow, .svc-row a:focus-visible .svc-row__arrow { transform: translateX(6px); color: var(--flame); }
.svc-row a:focus-visible { outline-offset: -3px; }
@media (max-width: 639.98px) {
  .svc-row a { grid-template-columns: 2rem minmax(0, 1fr) auto; }
  .svc-row__title { font-size: 1.0625rem; }
}

/* Service grid (related services) ---------------------------- */
.svc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); column-gap: var(--s-7); border-top: 1px solid var(--rule); }
.svc-cell {
  position: relative; height: 100%;
  display: grid; grid-template-columns: 2.25rem minmax(0, 1fr) auto; gap: var(--s-1) var(--s-3); align-items: baseline;
  padding: var(--s-5) 0; border-bottom: 1px solid var(--rule);
}
.svc-cell__num { font-size: var(--fs-caption); color: var(--text-soft); transition: color var(--t-base) var(--ease-out); }
.svc-cell__title { font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; transition: transform var(--t-base) var(--ease-out); }
.svc-cell__tag { grid-column: 2; color: var(--rust); }
.svc-cell__arrow { grid-column: 3; grid-row: 1; font-family: var(--font-mono); color: var(--text-soft); transition: transform var(--t-base) var(--ease-out), color var(--t-base) var(--ease-out); }
.svc-cell__line { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--flame); transform: scaleX(0); transform-origin: left; transition: transform var(--t-slow) var(--ease-inout); }
.svc-cell:hover .svc-cell__line, .svc-cell:focus-visible .svc-cell__line { transform: scaleX(1); }
.svc-cell:hover .svc-cell__title, .svc-cell:focus-visible .svc-cell__title { transform: translateX(4px); }
.svc-cell:hover .svc-cell__num, .svc-cell:focus-visible .svc-cell__num { color: var(--rust); }
.svc-cell:hover .svc-cell__arrow, .svc-cell:focus-visible .svc-cell__arrow { transform: translateX(5px); color: var(--flame); }

/* Sticky service directory (practice pages) ------------------ */
.dir { display: grid; gap: var(--s-8); }
.dir__panel { display: none; }
@media (min-width: 1024px) {
  .dir { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: var(--s-10); align-items: start; }
  .dir__panel { display: block; position: sticky; top: calc(var(--header-h) + var(--s-7)); }
  /* The note is shown in the panel; keep a copy for assistive technology. */
  .has-js .dir__note-inline { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
.dir__nums { display: grid; height: 1em; overflow: hidden; font-size: clamp(4rem, 7vw, 6.5rem); font-weight: 200; line-height: 1; letter-spacing: -0.04em; color: var(--espresso); }
/* The group number rolls like a counter: the outgoing number leaves in
   the direction of travel and the next one arrives from the other side. */
.dir__nums span { grid-area: 1 / 1; transition: opacity var(--motion-fast) var(--ease-crownmark), transform var(--motion-standard) var(--ease-crownmark); }
.has-js .dir__nums span:not(.is-active) { opacity: 0; transform: translateY(45%); }
.has-js .dir__nums span.is-before { transform: translateY(-45%); }
/* The outgoing number and note leave quickly and the incoming ones wait
   a beat, so the two never show at once (under motion only: reduced
   motion swaps them at once). */
.mi .dir__nums span:not(.is-active), .mi .dir__notes p:not(.is-active) { transition-duration: calc(var(--motion-fast) * 0.5); }
.mi .dir__nums span.is-active, .mi .dir__notes p.is-active { transition-delay: calc(var(--motion-fast) * 0.35); }
html:not(.has-js) .dir__nums span:not(:first-child) { display: none; }
.dir__index { position: relative; margin-top: var(--s-6); border-left: 1px solid var(--rule); }
/* The indicator is 100px tall and scaled to the active link (inner.js),
   so it moves and resizes on transform alone. */
.dir__bar { position: absolute; left: -1px; top: 0; width: 3px; height: 100px; background: var(--flame); transform-origin: 0 0; transform: scaleY(0.352); transition: transform var(--motion-standard) var(--ease-crownmark); }
.dir__index a {
  display: flex; align-items: baseline; gap: var(--s-3);
  padding: var(--s-2) 0 var(--s-2) var(--s-5);
  font-size: var(--fs-small); font-weight: 600; color: var(--text-soft);
  transition: color var(--t-base) var(--ease-out);
}
.dir__index a .figure-num { font-size: var(--fs-caption); }
.dir__count { margin-left: auto; font-family: var(--font-mono); font-size: var(--fs-caption); font-weight: 400; color: var(--text-soft); }
.dir__index a:hover, .dir__index a[aria-current] { color: var(--ink); }
.dir__notes { position: relative; margin-top: var(--s-6); display: grid; min-height: 4.5rem; }
.dir__notes p { grid-area: 1 / 1; max-width: 22rem; font-size: var(--fs-small); color: var(--text-muted); transition: opacity var(--motion-fast) var(--ease-crownmark), transform var(--motion-fast) var(--ease-crownmark); }
.has-js .dir__notes p:not(.is-active) { opacity: 0; transform: translateY(var(--motion-rise-sm)); }
.has-js .dir__notes p.is-before { transform: translateY(calc(-1 * var(--motion-rise-sm))); }
html:not(.has-js) .dir__notes { display: none; }
.dir__group + .dir__group { margin-top: var(--s-10); }
.dir__head { display: flex; align-items: baseline; gap: var(--s-4); }
.dir__group-num { font-size: var(--fs-caption); color: var(--rust); }
.dir__title { font-size: var(--fs-h3); font-weight: 700; letter-spacing: -0.012em; }
.dir__note-inline { margin-top: var(--s-2); max-width: 40rem; font-size: var(--fs-small); color: var(--text-soft); }
.dir__group .svc-list { margin-top: var(--s-5); }
@media (min-width: 1024px) {
  /* Inactive groups recede slightly; the rows stay fully readable. */
  .mi .dir__group { transition: opacity var(--motion-fast) var(--ease-crownmark); }
  .mi .dir__group .dir__title, .mi .dir__group .dir__group-num { transition: color var(--motion-fast) var(--ease-crownmark); }
  .mi .dir__group:not(.is-active) { opacity: 0.94; }
  .mi .dir__group:not(.is-active) .dir__title { color: var(--text-soft); }
  .mi .dir__group:not(.is-active) .dir__group-num { color: var(--text-soft); }
  .mi .dir__group:hover, .mi .dir__group:focus-within { opacity: 1; }
  .mi .dir__group:hover .dir__title, .mi .dir__group:focus-within .dir__title { color: var(--text); }
}

/* How we can help (practice categories) ---------------------- */
.cat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); gap: var(--s-8) var(--s-7); }
.cat { position: relative; padding-top: var(--s-5); }
.cat::before { content: ''; position: absolute; left: 0; top: 0; right: 0; height: 1px; background: var(--rule); transform-origin: left; }
.cat__num { font-size: var(--fs-caption); color: var(--rust); }
.cat__title { margin-top: var(--s-3); font-size: var(--fs-h3); font-weight: 700; letter-spacing: -0.012em; line-height: 1.2; }
.cat__text { margin-top: var(--s-3); font-size: var(--fs-small); color: var(--text-muted); }
.cat__items { margin-top: var(--s-4); }
.cat__items li { position: relative; padding-left: var(--s-5); font-size: var(--fs-small); color: var(--text-muted); }
.cat__items li + li { margin-top: var(--s-2); }
.cat__items li::before { content: ''; position: absolute; left: 0.2rem; top: 0.72em; width: 0.45rem; height: 1.5px; background: var(--flame); }

/* Service page document layout ------------------------------- */
.doc { display: grid; gap: var(--s-9); }
@media (min-width: 1024px) {
  /* The aside stretches to the row so its sticky block has room to travel. */
  .doc { grid-template-columns: minmax(0, 8fr) minmax(0, 3.6fr); column-gap: var(--s-10); align-items: stretch; }
  .doc__sticky { position: sticky; top: calc(var(--header-h) + var(--s-6)); }
}
/* A hairline over the reading column, in the section's top padding (so
   it takes no room), drawn as the introduction arrives. */
.doc__main { position: relative; }
.doc__rule { position: absolute; left: 0; top: calc(-1 * min(var(--s-8), var(--section-y) / 2)); }
.doc__children { margin-top: var(--s-9); }
.doc__children .h3 { margin-bottom: var(--s-5); }
.onpage { margin-bottom: var(--s-8); padding: var(--s-5) 0; border-block: 1px solid var(--rule); }
.onpage ul { margin-top: var(--s-3); display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-6); }
.onpage a { font-size: var(--fs-small); font-weight: 600; }
.merged { margin-top: var(--s-10); padding-top: var(--s-8); scroll-margin-top: calc(var(--header-h) + var(--s-5)); }
.merged .label { display: block; margin-bottom: var(--s-3); }
.merged .lead { max-width: 44rem; }
.merged__rule { margin-bottom: var(--s-7); }
.merged .rich--read > p:first-child { font-size: inherit; line-height: inherit; color: inherit; }

.sidenav { padding-bottom: var(--s-6); margin-bottom: var(--s-6); border-bottom: 1px solid var(--rule); }
.sidenav ul { margin: var(--s-3) 0 var(--s-4); border-left: 1px solid var(--rule); }
.sidenav li a {
  display: block; padding: 0.35rem 0 0.35rem var(--s-4); margin-left: -1px;
  border-left: 2px solid transparent; font-size: var(--fs-small); color: var(--text-muted);
  transition: color var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out), transform var(--t-base) var(--ease-out);
}
/* The hover nudge moves the link on transform; the current page's flame
   edge stays on the rule. */
.sidenav li a:hover { color: var(--ink); }
.sidenav li a:not([aria-current]):hover { transform: translateX(3px); }
/* The hover rule stays on the column line while the link nudges. */
.sidenav li { position: relative; }
.sidenav li::before {
  content: ""; position: absolute; left: -1px; top: 0; bottom: 0; width: 2px;
  background: var(--rule); opacity: 0; pointer-events: none;
  transition: opacity var(--t-fast) var(--ease-out);
}
.sidenav li:has(> a:not([aria-current]):hover)::before { opacity: 1; }
.sidenav li a[aria-current] { color: var(--ink); font-weight: 600; border-left-color: var(--flame); }
.aside-cta { padding: var(--s-6); background: var(--paper-dim); border-radius: var(--radius); }
.aside-cta__tel { margin-top: var(--s-3); font-size: 1.5rem; }
.aside-cta .caption a { color: var(--rust); }
.aside-share { margin-top: var(--s-6); padding-top: var(--s-5); border-top: 1px solid var(--rule); }
.aside-share ul { margin-top: var(--s-3); display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-5); }
.aside-share a, .aside-share button { font-size: var(--fs-small); font-weight: 600; color: var(--text-muted); }
.aside-share a:hover, .aside-share button:hover { color: var(--rust); }
.aside-progress { margin-top: var(--s-5); height: 2px; background: var(--rule); }
.aside-progress span { display: block; height: 100%; background: var(--flame); transform: scaleX(0); transform-origin: left; }

/* Paper → ink sections ---------------------------------------- */
.tpl [data-ink] {
  --ground: var(--ink);
  background: var(--ground);
  color: var(--text-on-dark);
  --text: var(--text-on-dark);
  --text-muted: var(--text-on-dark-muted);
  --text-soft: var(--text-on-dark-soft);
  --rule: var(--rule-dark);
  --rule-soft: var(--rule-dark);
  --focus-ring: var(--flame);
}
.tpl [data-ink] .lead, .tpl [data-ink] .prose { color: var(--text-muted); }
.tpl [data-ink] .label { color: var(--text-soft); }
.tpl [data-ink] .label--flame { color: var(--flame); }
.btn--ghost { border: 1px solid var(--rule); color: var(--text); }
.btn--ghost:hover { background: var(--text); color: var(--ground, var(--ink)); border-color: var(--text); }
.cta-band__more { color: var(--text); }
/* Cards keep the paper tokens whatever the section behind them does. */
.letter, .aside-cta {
  --text: #0A0A0A; --text-muted: #4A4744; --text-soft: #63605C;
  --rule: rgba(10, 10, 10, 0.14); --rule-soft: rgba(10, 10, 10, 0.08); --focus-ring: var(--rust);
  color: var(--text);
}
.letter .label { color: var(--text-soft); }

/* Closing call to action ------------------------------------- */
.cta-band { padding-block: clamp(5rem, 10vw, 9rem); }
/* Ink meets ink at the footer on inner pages: a hairline marks the edge
   and the two paddings are trimmed to one. */
.tpl .cta-band, .tpl .enquiry-section { padding-bottom: clamp(3.5rem, 6vw, 5.5rem); }
.tpl .footer { border-top: 1px solid var(--rule-dark); padding-top: var(--s-10); }
.footer__top { color: var(--text-on-dark-soft); }
.footer__totop { color: var(--text-on-dark-soft); white-space: nowrap; }
.footer__totop:hover { color: var(--paper); }
/* Where the legal row wraps, "Back to top" keeps to the right. */
@media (min-width: 640px) and (max-width: 1279.98px) { .footer__legal > p:last-child { margin-left: auto; } }
.cta-band__grid { display: grid; gap: var(--s-7); align-items: end; }
@media (min-width: 960px) { .cta-band__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); column-gap: var(--s-10); } }
.cta-band .h2 { margin-top: var(--s-4); max-width: 18ch; }
.cta-band .lead { margin-top: var(--s-5); }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: var(--s-4); align-items: center; }

/* Enquiry section -------------------------------------------- */
.tpl .enquiry-section { padding-block: clamp(5rem, 9vw, 8rem); }
.enquiry__heading { margin: var(--s-4) 0 var(--s-5); }
.tpl .enquiry__heading { max-width: 14ch; }
.enquiry__tel { margin-top: var(--s-8); }
.enquiry__number { font-size: clamp(1.5rem, 2.6vw, 2rem); }
.enquiry__dl { margin-top: var(--s-7); display: grid; gap: var(--s-5); }
.enquiry__dl dd { margin-top: var(--s-2); }
.enquiry__dd--muted { color: var(--text-muted); }
.enquiry--contact { grid-template-columns: minmax(0, 1.15fr) 1px minmax(0, 0.85fr); }
/* Not a .rule-line: the homepage's ledger mechanic animates every rule inside #contact. */
.enquiry__divider { display: block; width: 1px; height: 100%; min-height: 20rem; background: var(--rule); transform-origin: top; }
@media (max-width: 899.98px) {
  .enquiry--contact { grid-template-columns: 1fr; }
  .enquiry__divider { display: none; }
}
.field-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 0 var(--s-6); }

/* Office cards ----------------------------------------------- */
.offices--cards .office__frame { aspect-ratio: 16 / 10; }
.office-card__link { display: block; }
.office-card__link picture { transition: transform var(--motion-slow) var(--ease-crownmark); }
.office-card__link:hover picture { transform: scale(1.03); }
.office-card__body { position: relative; }
.office-card__city { margin-top: var(--s-5); transition: transform var(--t-slow) var(--ease-out); }
.office-card:hover .office-card__city { transform: translateX(6px); }
.office-card__addr { margin-top: var(--s-2); font-style: normal; color: var(--text-muted); }
.office-card__dl { margin-top: var(--s-5); display: grid; gap: var(--s-3); border-top: 1px solid var(--rule); padding-top: var(--s-4); }
.office-card__dl > div { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: var(--s-3); align-items: baseline; }
.office-card__dl dd { font-size: var(--fs-small); color: var(--text-muted); }
.office-card__links { margin-top: var(--s-5); display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-6); }
.office-card__links .btn .btn-arrow { transition: transform var(--t-base) var(--ease-out); }
.office-card:hover .office-card__links .btn .btn-arrow, .office-card:focus-within .office-card__links .btn .btn-arrow { transform: translateX(5px); }

/* People: the spread, the grid, the profile ----------------- */
.spread .people__aperture picture { display: block; height: 100%; }
.spread__name { font-size: clamp(1.9rem, 3.4vw, 3rem); letter-spacing: var(--tracking-tight); line-height: 1.05; }
.spread .people__lead { margin-top: var(--s-6); padding-top: var(--s-6); }
.spread .people__intro > .label { display: block; }
.team--page { margin-top: 0; padding-top: 0; border-top: 0; }
@media (min-width: 900px) { .team--page { grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); } }
.team__link { display: block; }
.team__link:hover .team__name { color: var(--rust); }
.team__more { margin-top: var(--s-3); }

.profile-hero__portrait { max-width: 22rem; margin-left: auto; }
.profile-hero__portrait .people__aperture { aspect-ratio: 4 / 5; }
.profile-hero__portrait picture { display: block; height: 100%; }
@media (max-width: 1023.98px) { .profile-hero__portrait { max-width: 18rem; margin-left: 0; } }
.bio { display: grid; gap: var(--s-8); }
@media (min-width: 900px) {
  .bio { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); column-gap: var(--s-11); align-items: start; }
  .bio__figure { position: sticky; top: calc(var(--header-h) + var(--s-6)); }
}
.bio__figure { margin: 0; max-width: 24rem; }
.bio__frame { aspect-ratio: 3 / 4; border-radius: var(--radius); overflow: hidden; background: var(--paper-warm); }
.bio__frame picture { display: block; height: 100%; }
.bio__frame img { width: 100%; height: 100%; object-fit: cover; }
.bio__caption { margin-top: var(--s-3); }
/* Profile film: a silent loop over its own still. The still stays until
   the film is really playing; site.js decides whether it may play. */
.bio__frame--film { position: relative; }
.bio__film { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; opacity: 0; transition: opacity var(--motion-slow) var(--ease-crownmark); }
.bio__film.is-playing { opacity: 1; }
.mi .bio__frame--film:not(.is-in) > .bio__film { opacity: 0; transition: none; }
.film-toggle {
  position: absolute; right: var(--s-3); bottom: var(--s-3); z-index: 1;
  width: 2.75rem; height: 2.75rem; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(10, 10, 10, 0.42); color: var(--paper);
  border: 1px solid rgba(255, 255, 255, 0.35);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  cursor: pointer; transition: background-color var(--t-base) var(--ease-out), border-color var(--t-base) var(--ease-out);
}
.film-toggle:hover { background: rgba(10, 10, 10, 0.62); border-color: var(--brand-orange); }
.film-toggle:focus-visible { outline: 2px solid var(--brand-orange); outline-offset: 3px; }
.film-toggle__icon { width: 0.8rem; height: 0.8rem; position: relative; }
/* Pause: two bars. Play: a triangle (data-state="paused"). */
.film-toggle__icon::before, .film-toggle__icon::after { content: ''; position: absolute; top: 0; bottom: 0; width: 0.24rem; background: currentColor; }
.film-toggle__icon::before { left: 0.08rem; }
.film-toggle__icon::after { right: 0.08rem; }
.film-toggle[data-state="paused"] .film-toggle__icon::before { left: 0.12rem; width: 0; background: none; border-style: solid; border-color: transparent transparent transparent currentColor; border-width: 0.4rem 0 0.4rem 0.7rem; }
.film-toggle[data-state="paused"] .film-toggle__icon::after { display: none; }
@media (forced-colors: active) { .film-toggle { background: ButtonFace; color: ButtonText; border-color: ButtonText; } }
@media (min-width: 900px) { .bio--solo { grid-template-columns: minmax(0, 1fr); } }
.bio--solo .bio__body { max-width: 48rem; }
.bio__contact { margin-top: var(--s-8); }
.bio__facts { margin-top: var(--s-9); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: var(--s-7); }
.bio__fact { position: relative; padding-top: var(--s-5); }
.bio__fact::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--rule); transform-origin: left; }
.bio__fact ul { margin-top: var(--s-3); }
.bio__fact li { padding-block: 0.2rem; color: var(--text-muted); font-size: var(--fs-small); }
.bio__fact li a { color: var(--text); font-weight: 600; }
.bio__fact li a:hover { color: var(--rust); }

/* About: the statement and the philosophy index -------------- */
.about-statement { display: grid; gap: var(--s-7); align-items: end; }
@media (min-width: 960px) { .about-statement { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--s-10); } }
.about-statement .lead { max-width: 34rem; }
.philo { display: grid; gap: var(--s-8); }
.philo__index { display: none; }
@media (min-width: 1024px) {
  .philo { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--s-11); align-items: start; }
  .philo__index { display: block; position: sticky; top: calc(var(--header-h) + var(--s-8)); }
}
.philo__index li { display: flex; align-items: baseline; gap: var(--s-4); padding-block: 0.12em; font-size: clamp(2rem, 3.6vw, 3.4rem); font-weight: 700; letter-spacing: -0.035em; line-height: 1.08; color: rgba(10, 10, 10, 0.48); transition: color var(--motion-fast) var(--ease-crownmark); }
.philo__index li .figure-num { font-size: var(--fs-caption); letter-spacing: 0; color: var(--text-soft); transition: color var(--motion-fast) var(--ease-crownmark); }
.philo__index li.is-active { color: var(--ink); }
.philo__index li.is-active .figure-num { color: var(--rust); }
.philo__copy .rich { max-width: 42rem; }
.philo__copy .rich--read > p:first-child { color: var(--text); }

/* CAP: the flow and the document ---------------------------- */
.cap-flow { display: grid; gap: var(--s-8); }
@media (min-width: 1024px) {
  .cap-flow { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); column-gap: var(--s-11); align-items: start; }
  .cap-flow__doc { position: sticky; top: calc(var(--header-h) + var(--s-6)); }
  .cap-step { min-height: 56vh; }
}
.cap-flow__doc .letter { max-width: 40rem; }
.letter__row { position: relative; }
.letter__row[data-for] { padding-left: var(--s-5); }
.letter__row[data-for]::before { content: ''; position: absolute; left: 0; top: var(--s-4); bottom: var(--s-4); width: 2px; background: var(--flame); transform: scaleY(0); transform-origin: top; transition: transform var(--motion-fast) var(--ease-crownmark-in-out); }
.letter__row[data-for] .letter__ann { position: absolute; right: 100%; margin-right: var(--s-3); top: 50%; transform: translate(6px, -50%); font-size: var(--fs-caption); color: var(--flame); opacity: 0; transition: opacity var(--motion-fast) var(--ease-crownmark), transform var(--motion-fast) var(--ease-crownmark); }
.letter__row[data-for] > span:not(.letter__ann):not(.rule-line) { transition: color var(--motion-fast) var(--ease-crownmark); }
.letter__row.is-lit::before { transform: scaleY(1); }
.letter__row.is-lit .letter__ann { opacity: 1; transform: translate(0, -50%); }
.letter__row.is-lit .letter__key { color: var(--rust); }
.letter__row--muted .letter__strike::after { content: none; }
.cap-step { display: flex; flex-direction: column; justify-content: center; padding-block: var(--s-8); border-top: 1px solid var(--rule); transition: opacity var(--motion-fast) var(--ease-crownmark); }
.cap-step:last-child { border-bottom: 1px solid var(--rule); }
.cap-step__num { font-size: clamp(2.5rem, 4vw, 3.5rem); font-weight: 200; line-height: 1; letter-spacing: -0.04em; color: var(--espresso); transition: color var(--motion-fast) var(--ease-crownmark); }
.cap-step__title { margin-top: var(--s-4); font-size: clamp(1.6rem, 2.6vw, 2.25rem); font-weight: 700; letter-spacing: -0.025em; line-height: 1.1; }
.cap-step__text { margin-top: var(--s-4); max-width: 30rem; color: var(--text-muted); text-wrap: pretty; }
.cap-step__title { transition: color var(--motion-fast) var(--ease-crownmark); }
.mi .cap-step:not(.is-active) .cap-step__title { color: var(--text-soft); }
.mi .cap-step:not(.is-active) .cap-step__num { color: var(--text-soft); }
.cap-flow__note { margin-top: var(--s-6); }
@media (max-width: 1023.98px) { .mi .cap-step:not(.is-active) .cap-step__title { color: var(--text); } .mi .cap-step:not(.is-active) .cap-step__num { color: var(--espresso); } .cap-flow__doc { order: 2; } }

.pillars { display: grid; gap: var(--s-7); position: relative; z-index: 1; }
@media (min-width: 900px) { .pillars { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-8); } }
.pillar { position: relative; padding-top: var(--s-5); }
.pillar::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--rule); transform-origin: left; }
.pillar__num { font-size: var(--fs-caption); color: var(--rust); }
.pillar__title { margin-top: var(--s-3); font-size: clamp(2rem, 3.2vw, 3rem); font-weight: 700; line-height: 1; letter-spacing: -0.035em; }
.section-head--label { margin-bottom: var(--s-6); }
.pillar__text { margin-top: var(--s-4); color: var(--text-muted); }

/* Areas of practice: the accordion --------------------------- */
.areas { border-top: 1px solid var(--rule); }
.area { border-bottom: 1px solid var(--rule); scroll-margin-top: calc(var(--header-h) + var(--s-4)); }
.area__summary {
  list-style: none; cursor: pointer;
  display: grid; grid-template-columns: 3.5rem minmax(0, 1fr) auto; gap: var(--s-2) var(--s-4); align-items: baseline;
  padding-block: var(--s-6);
}
.area__summary::-webkit-details-marker { display: none; }
.area__num { font-size: var(--fs-small); color: var(--rust); transition: transform var(--t-base) var(--ease-out); }
.area__title { margin: 0; font-size: clamp(1.6rem, 2.8vw, 2.5rem); font-weight: 700; letter-spacing: -0.03em; line-height: 1.08; transition: color var(--t-base) var(--ease-out); }
.area__summary:hover .area__title { color: var(--rust); }
.area__text { margin-top: var(--s-3); max-width: 36rem; color: var(--text-muted); }
.area__meta { display: flex; align-items: center; gap: var(--s-5); align-self: start; }
.area__count { font-family: var(--font-mono); font-size: var(--fs-caption); color: var(--text-soft); white-space: nowrap; }
.area__sign { font-family: var(--font-mono); font-size: 1.35rem; color: var(--flame); transition: transform var(--t-base) var(--ease-out); }
.area[open] .area__sign { transform: rotate(45deg); }
.area__panel { padding: 0 0 var(--s-8) calc(3.5rem + var(--s-4)); }
.area__panel .label { display: block; margin-bottom: var(--s-2); }
.area__all { margin-top: var(--s-6); }
.area__rest { margin-top: var(--s-7); padding-top: var(--s-5); border-top: 1px solid var(--rule-soft); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: var(--s-5) var(--s-7); }
.area__rest .mega__links a { display: block; }
@media (max-width: 639.98px) {
  .area__summary { grid-template-columns: 2.5rem minmax(0, 1fr); }
  .area__meta { grid-column: 2; }
  .area__panel { padding-left: 0; }
}

/* Insights: filters, the publication grid, features ---------- */
.filters { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-bottom: var(--s-7); }
/* A list that starts straight under the page hero: the filters sit close to
   the heading they belong to, so the first article is on the opening screen. */
.section--list { padding-block: clamp(2.5rem, 4vw, 3.5rem) clamp(3.5rem, 6vw, 5.5rem); }
.chip {
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding: 0.55rem var(--s-4); min-height: 40px;
  border: 1px solid var(--rule); border-radius: var(--radius);
  font-size: var(--fs-small); font-weight: 500; color: var(--text-muted);
  transition: background-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out);
}
.chip:hover { border-color: var(--ink); color: var(--ink); }
.chip[aria-current] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.chip__n { font-family: var(--font-mono); font-size: var(--fs-caption); color: var(--text-soft); }
.chip[aria-current] .chip__n { color: var(--text-on-dark-muted); }
@media (max-width: 767.98px) {
  .filters { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(var(--gutter) * -1); padding: 0 var(--gutter) var(--s-3); scroll-padding-inline: var(--gutter); scroll-snap-type: x proximity; scrollbar-width: none; }
  .filters::-webkit-scrollbar { display: none; }
  .filters .chip { flex: 0 0 auto; scroll-snap-align: start; white-space: nowrap; }
}

.insight__body { display: block; }
.pub { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 0; transition: opacity var(--t-fast) var(--ease-out); }
.pub.is-settling { opacity: 0; }
.pub__item { grid-column: 1 / -1; }
@media (min-width: 900px) { .pub { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--s-7); } }
.pub__item[hidden] { display: none; }
.pub__item--lead { margin-bottom: var(--s-10); }
.pub__item--medium { margin-bottom: var(--s-9); }
.pub__item--lead .insight > a { display: grid; gap: var(--s-6); }
.pub__item--lead .insight__frame { aspect-ratio: 16 / 10; margin-bottom: 0; }
.pub__item--lead .insight__title { font-size: clamp(1.6rem, 2.8vw, 2.6rem); letter-spacing: var(--tracking-tight); line-height: 1.12; }
.pub__item--lead .insight__excerpt { font-size: var(--fs-body); max-width: var(--max-text); }
@media (min-width: 900px) {
  .pub__item--lead .insight > a { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--s-9); align-items: end; }
  .pub__item--medium { grid-column: span 6; }
}
.pub__item--medium .insight__title { font-size: 1.35rem; }
.pub__item--row { grid-column: span 12; }
.pub__item--row .insight > a { display: block; padding-block: var(--s-5); border-bottom: 1px solid var(--rule); }
.pub__item--row:not(.pub__item--row ~ .pub__item--row) .insight > a { border-top: 1px solid var(--rule); }
.pub__item--row .insight__frame, .pub__item--row .insight__excerpt { display: none; }
.pub__item--row .insight__body { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--s-6); align-items: center; }
.pub__item--row .insight__meta { grid-column: 1; margin-bottom: var(--s-2); }
.pub__item--row .insight__title { grid-column: 1; font-size: 1.125rem; line-height: 1.3; max-width: 60rem; transition: color var(--t-base) var(--ease-out); }
.pub__item--row .insight__more { grid-column: 2; grid-row: 1 / span 2; margin: 0; font-size: 0; }
.pub__item--row .insight__more .btn-arrow { font-size: 1.1rem; color: var(--flame); }
.pub__item--row .insight:hover .insight__title { color: var(--rust); }
.pub__item--row .insight { backface-visibility: visible; }

.feature > a { display: grid; gap: var(--s-6); }
.feature__frame { aspect-ratio: 16 / 10; }
.feature__frame img { transition: transform var(--motion-slow) var(--ease-crownmark); }
.feature__frame picture { display: block; height: 100%; }
.feature__meta { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: baseline; }
.feature__title { margin-top: var(--s-3); font-size: clamp(1.5rem, 2.4vw, 2.2rem); font-weight: 600; letter-spacing: var(--tracking-tight); line-height: 1.15; transition: color var(--t-base) var(--ease-out); }
.feature:hover .feature__title { color: var(--rust); }
.feature__excerpt { margin-top: var(--s-4); color: var(--text-muted); max-width: 36rem; }
.feature__body .btn { margin-top: var(--s-5); }
.rel-insights__grid { display: grid; gap: var(--s-9); align-items: start; }
@media (min-width: 1024px) { .rel-insights__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--s-10); } }
.rel-insights__rows .insight-list { border-top: 0; }
/* A practice with one article: the feature runs full width, image beside copy. */
.rel-insights__grid--solo { grid-template-columns: 1fr; }
@media (min-width: 1024px) { .rel-insights__grid--rows { grid-template-columns: minmax(0, 1fr); } }
@media (min-width: 1024px) {
  .rel-insights__grid--solo .feature > a { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--s-10); align-items: center; }
}
.section-head--split .btn--text.link-draw { font-size: var(--fs-small); font-weight: 600; color: var(--text); }
.rel-insights__rule { margin-bottom: 0; }

.insight-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); gap: var(--s-9) var(--s-7); }
.insight-grid .insight__title { font-size: 1.25rem; }

/* Article ---------------------------------------------------- */
.article { padding-bottom: var(--section-y); }
.article__figure { margin: calc(var(--s-9) * -1) 0 0; aspect-ratio: 16 / 8; position: relative; z-index: 3; box-shadow: var(--shadow-raise); }
.article__figure picture { display: block; height: 100%; }
@media (max-width: 639.98px) { .article__figure { margin-top: calc(var(--s-6) * -1); aspect-ratio: 3 / 2; } }
.tpl-article .hero--page { padding-bottom: calc(var(--s-9) + clamp(2.5rem, 5vw, 4rem)); }
.article__layout { display: grid; gap: var(--s-9); padding-top: var(--s-9); }
@media (min-width: 1024px) { .article__layout { grid-template-columns: minmax(0, 8fr) minmax(0, 3.4fr); column-gap: var(--s-10); align-items: stretch; } }
.article__standfirst { margin-bottom: var(--s-7); }
.article__body .rich { max-width: 42rem; }
.article__foot { margin-top: var(--s-9); padding-top: var(--s-6); border-top: 1px solid var(--rule); max-width: 42rem; }
.author-card { display: flex; gap: var(--s-5); align-items: center; }
.author-card img { width: 72px; height: 90px; object-fit: cover; border-radius: var(--radius); background: var(--paper-warm); }
.author-card__name { margin-top: var(--s-1); font-size: 1.125rem; font-weight: 600; }
.article__note { margin-top: var(--s-6); }
.preview-bar { position: sticky; top: var(--header-h); z-index: 50; background: var(--flame); color: var(--ink-true); text-align: center; padding: var(--s-3) var(--gutter); font-size: var(--fs-small); }

/* Search page and results ------------------------------------ */
.search-page__row { display: flex; gap: var(--s-4); align-items: end; margin-top: var(--s-2); }
.search-page__row .field__input { flex: 1; font-size: 1.25rem; }
.results { margin-top: var(--s-5); border-top: 1px solid var(--rule); }
.result a { display: block; padding-block: var(--s-5); border-bottom: 1px solid var(--rule); }
.result__title { display: block; margin-top: var(--s-2); font-size: 1.25rem; font-weight: 600; letter-spacing: -0.01em; }
.result__text { display: block; margin-top: var(--s-1); font-size: var(--fs-small); color: var(--text-soft); }
.result a:hover .result__title { color: var(--rust); }

/* Search overlay --------------------------------------------- */
.search {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(11, 10, 9, 0.97); color: var(--text-on-dark);
  --focus-ring: var(--flame);
  overflow-y: auto; overscroll-behavior: contain;
  opacity: 0; transition: opacity 0.25s var(--ease-out);
}
.search.is-open { opacity: 1; }
.search[hidden] { display: none; }
.link-draw[hidden] { display: none; }
.search__inner { max-width: 56rem; margin-inline: auto; padding: clamp(4rem, 12vh, 8rem) var(--gutter) var(--s-10); }
.search__form .label { color: var(--flame); }
.search__bar { display: flex; align-items: center; gap: var(--s-4); margin-top: var(--s-4); border-bottom: 1px solid var(--rule-dark); }
.search__input {
  flex: 1; min-width: 0; background: transparent; border: 0; color: var(--paper);
  font-size: clamp(1.6rem, 4vw, 2.75rem); font-weight: 600; letter-spacing: -0.02em;
  padding: var(--s-3) 0;
}
.search__input::placeholder { color: var(--text-on-dark-soft); opacity: 0.7; }
.search__input:focus { outline: none; }
.search__bar:focus-within { border-bottom-color: var(--flame); }
.search__input::-webkit-search-cancel-button { display: none; }
.search__close {
  font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-on-dark-soft); border: 1px solid var(--rule-dark); border-radius: var(--radius);
  padding: var(--s-2) var(--s-3); min-height: 36px;
}
.search__close:hover { color: var(--paper); border-color: var(--paper); }
.search__hint { margin-top: var(--s-3); color: var(--text-on-dark-soft); }
.search__results { margin-top: var(--s-6); }
.search__hit { display: block; padding: var(--s-4) var(--s-3); border-bottom: 1px solid var(--rule-dark); border-radius: var(--radius); }
.search__hit .label--flame { color: var(--flame); }
.search__hit-title { display: block; margin-top: var(--s-1); font-size: 1.1875rem; font-weight: 600; color: var(--paper); }
.search__hit-text { display: block; margin-top: var(--s-1); font-size: var(--fs-small); color: var(--text-on-dark-soft); }
.search__hit:hover, .search__hit[aria-selected="true"] { background: rgba(255, 255, 255, 0.06); }
.search__hit[aria-selected="true"] .search__hit-title { color: var(--flame); }
.search__empty { margin-top: var(--s-5); color: var(--text-on-dark-muted); }
.search__empty a { color: var(--paper); }
.search__start { margin-top: var(--s-8); }
.search__start .mega__group-title { color: var(--text-on-dark-soft); border-bottom-color: var(--rule-dark); }
.search__chips { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-4); }
.search__chips .chip { color: var(--text-on-dark-muted); border-color: var(--rule-dark); }
.search__chips .chip:hover { color: var(--paper); border-color: var(--paper); }

/* Page curtain, reading progress, back to top ---------------- */
.curtain { position: fixed; inset: 0; z-index: 400; background: var(--ink); opacity: 0; pointer-events: none; transition: opacity 0.28s var(--ease-inout); }
.curtain__line { position: absolute; left: 0; top: 50%; width: 100%; height: 2px; background: var(--flame); transform: scaleX(0); transform-origin: left; transition: transform 0.34s var(--ease-inout) 0.04s; }
.curtain.is-on { opacity: 1; pointer-events: auto; }
.curtain.is-on .curtain__line { transform: scaleX(1); }
.progress { position: fixed; left: 0; top: 0; z-index: 150; width: 100%; height: 3px; background: var(--flame); transform: scaleX(0); transform-origin: left; pointer-events: none; }
.callbar { transition: transform 0.3s var(--ease-out); }
.callbar.is-hidden { transform: translateY(100%); }

/* Parallaxed photographs (desktop, fine pointer: where inner.js runs the
   drift) are a touch larger than their frame, so the 3 to 4% drift never
   uncovers the frame's edge. */
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
  .mi [data-parallax] img { scale: 1.1; }
}

/* Responsive <picture> wrappers fill their frames like a bare <img>. */
.plate > picture, .hero__media > picture, .people__aperture > picture, .people__candid > picture { display: block; width: 100%; height: 100%; }

/* ============================================================
   MOTION START STATES (inner pages)
   Applied only under html.mi, which the head script sets before
   first paint when motion is allowed, and removes if inner.js has
   not started within four seconds. inner.js adds .is-in.

   Timing: every transition here runs on the motion tokens in :root.
   inner.js writes each element's start time as --d; the parts of an
   element add steps of --motion-stagger to it (--i, --ln, --ci), so a
   sequence is declared here and started there.
   ============================================================ */

/* Hero, on load: crumbs, label, masked title, lead, photograph, actions,
   rule. inner.js writes the start of each (HERO in its TOKENS block). */
.mi [data-hero] [data-seq]:not([data-reveal="lines"]):not(.hero__rule):not(.crumbs):not(.hero__aside) {
  transition: opacity var(--motion-standard) var(--ease-crownmark) var(--d, 0ms), transform var(--motion-standard) var(--ease-crownmark) var(--d, 0ms);
}
.mi [data-hero] [data-seq]:not([data-reveal="lines"]):not(.hero__rule):not(.crumbs):not(.hero__aside):not(.is-in) { opacity: 0; transform: translateY(var(--rise, var(--motion-rise))); }
.mi [data-hero] .hero__eyebrow, .mi [data-hero] .hero__actions, .mi [data-hero] .hero__meta { --rise: var(--motion-rise-sm); }
.mi [data-hero] .crumbs li {
  transition: opacity var(--motion-fast) var(--ease-crownmark) calc(var(--d, 0ms) + var(--ci, 0) * var(--motion-stagger) / 2),
              transform var(--motion-fast) var(--ease-crownmark) calc(var(--d, 0ms) + var(--ci, 0) * var(--motion-stagger) / 2);
}
.mi [data-hero] .crumbs:not(.is-in) li { opacity: 0; transform: translateY(var(--motion-rise-sm)); }
.mi .crumbs li:nth-child(2) { --ci: 1; }
.mi .crumbs li:nth-child(3) { --ci: 2; }
.mi .crumbs li:nth-child(4) { --ci: 3; }
.mi .crumbs li:nth-child(5) { --ci: 4; }
.mi .crumbs li:nth-child(n+6) { --ci: 5; }
/* The photograph beside the heading is unmasked (mask-img, below); its
   column only fades, so its caption arrives with it. */
.mi [data-hero] .hero__aside { transition: opacity var(--motion-fast) var(--ease-crownmark) var(--d, 0ms); }
.mi [data-hero] .hero__aside:not(.is-in) { opacity: 0; }
.mi .hero__rule { transform-origin: left; transition: transform var(--motion-slow) var(--ease-crownmark-in-out) var(--d, 0ms); }
.mi .hero__rule:not(.is-in) { transform: scaleX(0); }
/* A full-bleed photograph opens from the right behind the copy and
   settles from a very slightly larger scale. The open state is an
   explicit inset(0): a clip only animates between two insets (to
   'none' it would jump). The hero clips there anyway.
   The hero's photograph, full bleed or beside the heading, opens on
   the standard duration rather than the slow one, with the lead: the
   mask's slow start would otherwise leave it behind the actions, and
   the whole hero has settled by about 1.2s. */
.mi [data-hero] .hero__media > picture {
  clip-path: inset(0 0 0 0);
  transition: clip-path var(--motion-standard) var(--ease-crownmark-mask) var(--d, 0ms),
              transform var(--motion-slow) var(--ease-crownmark) var(--d, 0ms);
}
.mi [data-hero]:not(.is-in) .hero__media > picture { clip-path: inset(0 0 0 100%); transform: scale(var(--motion-settle)); }
.mi [data-hero] [data-reveal="mask-img"] > picture,
.mi [data-hero] [data-reveal="mask-img"]::after {
  transition: clip-path var(--motion-standard) var(--ease-crownmark-mask) var(--d, 0ms),
              transform var(--motion-slow) var(--ease-crownmark) var(--d, 0ms);
}
.mi .hero__media img { transition: none; }

/* Masked lines: hidden until split, then each line rises into place,
   one stagger step after the line above it (--ln). */
.mi [data-reveal="lines"]:not(.is-split) { visibility: hidden; }
.ln { display: block; overflow: hidden; padding-bottom: 0.14em; margin-bottom: -0.14em; }
.ln__i { display: block; }
.mi .ln__i { transform: translateY(112%); transition: transform var(--motion-standard) var(--ease-crownmark) calc(var(--d, 0ms) + var(--ln, 0) * var(--motion-stagger)); }
.mi .is-in .ln__i { transform: none; }

/* Copy, groups and staggered items rise into place. Rows, fields and
   lists travel the short distance (--rise). */
.mi [data-reveal="up"], .mi [data-stagger]:not([data-stagger="rows"]) > *, .mi [data-reveal-group] [data-seq] {
  transition: opacity var(--motion-standard) var(--ease-crownmark) var(--d, 0ms), transform var(--motion-standard) var(--ease-crownmark) var(--d, 0ms), color var(--motion-fast) var(--ease-crownmark);
}
.mi [data-reveal="up"]:not(.is-in), .mi [data-stagger]:not([data-stagger="rows"]) > :not(.is-in), .mi [data-reveal-group] [data-seq]:not(.is-in) { opacity: 0; transform: translateY(var(--rise, var(--motion-rise))); }
.mi .faq, .mi .insight-list, .mi .svc-grid, .mi .dir__panel, .mi .dir__head, .mi .office-card__body, .mi .enquiry__info { --rise: var(--motion-rise-sm); }
.mi [data-reveal="fade"] { transition: opacity var(--motion-standard) var(--ease-crownmark) var(--d, 0ms); }
.mi [data-reveal="fade"]:not(.is-in) { opacity: 0; }
.mi [data-reveal="num"] { transition: opacity var(--motion-fast) var(--ease-crownmark) var(--d, 0ms), transform var(--motion-standard) var(--ease-crownmark) var(--d, 0ms); }
.mi [data-reveal="num"]:not(.is-in) { opacity: 0; transform: translateY(0.45em); }
.mi [data-reveal="line-x"] { transform-origin: left; transition: transform var(--motion-slow) var(--ease-crownmark-in-out) var(--d, 0ms); }
.mi [data-reveal="line-x"]:not(.is-in) { transform: scaleX(0); }
.mi [data-reveal="line-y"] { transform-origin: top; transition: transform var(--motion-slow) var(--ease-crownmark-in-out) var(--d, 0ms); }
.mi [data-reveal="line-y"]:not(.is-in) { transform: scaleY(0); }
/* The mask sits on the image, not on the observed frame: a fully clipped
   element never "intersects" in Chrome, so the frame stays unclipped.
   Open is an explicit inset(0), which the frames clip to anyway, so the
   mask really travels (from or to 'none' a clip jumps). */
.mi [data-reveal="mask-img"] > picture, .mi [data-reveal="mask-img"] > img:first-child {
  clip-path: inset(0 0 0 0);
  transition: clip-path var(--motion-slow) var(--ease-crownmark-mask) var(--d, 0ms),
              transform calc(var(--motion-slow) * 1.25) var(--ease-crownmark) var(--d, 0ms);
}
.mi [data-reveal="mask-img"]:not(.is-in) > picture, .mi [data-reveal="mask-img"]:not(.is-in) > img:first-child { clip-path: var(--mask-from); transform: scale(var(--motion-settle)); }
.mi [data-reveal="mask-img"] { --mask-from: inset(0 0 100% 0); }
.mi [data-reveal="mask-img"][data-from="left"] { --mask-from: inset(0 100% 0 0); }
.mi [data-reveal="mask-img"][data-from="right"] { --mask-from: inset(0 0 0 100%); }
.mi [data-reveal="mask-img"][data-from="top"] { --mask-from: inset(100% 0 0 0); }
/* Only the photograph is revealed: the frame's backing is dropped and
   its grade (a plate's ::after) travels with the mask, so no empty box
   stands on the page before the picture arrives. */
.mi [data-reveal="mask-img"] { background-color: transparent; }
.mi [data-reveal="mask-img"]::after { clip-path: inset(0 0 0 0); transition: clip-path var(--motion-slow) var(--ease-crownmark-mask) var(--d, 0ms); }
.mi [data-reveal="mask-img"]:not(.is-in)::after { clip-path: var(--mask-from); }
/* Reading copy in groups (data-reveal="sections"): inner.js gathers a
   heading with the copy under it (without headings, a pair of
   paragraphs) and brings each group in together, a short step apart, so
   the page reads in sections rather than paragraph by paragraph. The
   flame mark above a section heading draws as its group arrives. */
.mi [data-reveal="sections"] > * { transition: opacity var(--motion-standard) var(--ease-crownmark) var(--d, 0ms), transform var(--motion-standard) var(--ease-crownmark) var(--d, 0ms); }
.mi [data-reveal="sections"] > :not(.is-in) { opacity: 0; transform: translateY(var(--motion-rise-sm)); }
.mi [data-reveal="sections"] > h2::before { transform-origin: left; transition: transform var(--motion-slow) var(--ease-crownmark-in-out) var(--d, 0ms); }
.mi [data-reveal="sections"] > h2:not(.is-in)::before { transform: scaleX(0); }

/* Rows (data-stagger="rows"): the row itself stays put. Its rule draws
   from the left, its number rises, and its words follow one step later,
   travelling a few pixels along the rule. */
.mi .svc-row::after, .mi .ledger__list > li::after { transition: transform var(--motion-slow) var(--ease-crownmark-in-out) var(--d, 0ms); }
.mi .svc-row:not(.is-in)::after, .mi .ledger__list > li:not(.is-in)::after { transform: scaleX(0); }
.mi .ledger__list > li > .figure-num { transition: opacity var(--motion-fast) var(--ease-crownmark) var(--d, 0ms), transform var(--motion-standard) var(--ease-crownmark) var(--d, 0ms); }
.mi .ledger__list > li > :last-child { transition: opacity var(--motion-standard) var(--ease-crownmark) calc(var(--d, 0ms) + var(--motion-stagger)), transform var(--motion-standard) var(--ease-crownmark) calc(var(--d, 0ms) + var(--motion-stagger)); }
.mi .ledger__list > li:not(.is-in) > .figure-num { opacity: 0; transform: translateY(0.6em); }
.mi .ledger__list > li:not(.is-in) > :last-child { opacity: 0; transform: translateX(calc(-1 * var(--motion-rise-sm))); }
.mi .svc-row__num { transition: color var(--t-base) var(--ease-out), opacity var(--motion-fast) var(--ease-crownmark) var(--d, 0ms), transform var(--motion-standard) var(--ease-crownmark) var(--d, 0ms); }
.mi .svc-row__body { transition: opacity var(--motion-standard) var(--ease-crownmark) calc(var(--d, 0ms) + var(--motion-stagger)), transform var(--motion-standard) var(--ease-crownmark) calc(var(--d, 0ms) + var(--motion-stagger)); }
.mi .svc-row__arrow { transition: transform var(--t-base) var(--ease-out), color var(--t-base) var(--ease-out), opacity var(--motion-fast) var(--ease-crownmark) calc(var(--d, 0ms) + 2 * var(--motion-stagger)); }
.mi .svc-row:not(.is-in) .svc-row__num { opacity: 0; transform: translateY(0.6em); }
.mi .svc-row:not(.is-in) .svc-row__body { opacity: 0; transform: translateX(calc(-1 * var(--motion-rise-sm))); }
.mi .svc-row:not(.is-in) .svc-row__arrow { opacity: 0; }

/* Rules drawn above numbered cells. */
.mi .cat::before, .mi .pillar::before, .mi .bio__fact::before { transition: transform var(--motion-slow) var(--ease-crownmark-in-out) var(--d, 0ms); }
.mi .cat:not(.is-in)::before, .mi .pillar:not(.is-in)::before, .mi .bio__fact:not(.is-in)::before { transform: scaleX(0); }
/* GSAP drives these transforms; a CSS transition on the same property would smear them. */
.mi [data-parallax] img { transition: none; }
/* Where the ghost number drifts, it waits to be put in place (inner.js,
   at once, where the drift has it), then fades in: it never jumps when
   GSAP takes over just after the first paint. Opacity only, so the
   drift itself stays untransitioned. */
.mi [data-ghost] { transition: opacity var(--motion-slow) var(--ease-crownmark); }
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
  .mi [data-ghost]:not(.is-placed) { opacity: 0; }
}
/* The insights grid re-enters after a filter change. */
.mi .pub__item { transition: opacity var(--motion-standard) var(--ease-crownmark) var(--d, 0ms), transform var(--motion-standard) var(--ease-crownmark) var(--d, 0ms); }
.mi .pub__item:not(.is-in) { opacity: 0; transform: translateY(var(--motion-rise)); }
/* Paper → ink sections. Under motion the section starts on paper, which
   dims a little as it approaches (--sec-tint, scrubbed), then ground and
   type switch to ink together, quickly, so every resting state passes
   contrast and no grey-on-grey middle state lingers. Without .mi the
   section simply rests on ink. */
.mi [data-ink] { transition: background-color var(--motion-fast) var(--ease-crownmark); }
.mi [data-ink]:not(.is-ink) {
  --ground: var(--sec-tint, #F5F1EC);
  --text: #0A0A0A; --text-muted: #4A4744; --text-soft: #63605C;
  --rule: rgba(10, 10, 10, 0.14); --rule-soft: rgba(10, 10, 10, 0.08); --focus-ring: var(--rust);
  color: var(--text);
}
.mi [data-ink] :is(h2, h3, p, dt, dd, a, span, .btn--ghost):not([data-seq]):not(.btn-arrow) { transition: color var(--motion-fast) var(--ease-crownmark), border-color var(--motion-fast) var(--ease-crownmark), background-color var(--motion-fast) var(--ease-crownmark); }

/* Enquiry form (data-reveal="form"): the stone sheet appears, its orange
   edge draws down, then the fields arrive as groups (a label with its
   field), then the button and the note, a step apart (--i). Once only:
   inner.js marks the form done when the sequence ends, which drops these
   transitions, and a field focused before then shows the form at once,
   so nothing here moves while someone is typing. */
.mi [data-reveal="form"]:not(.is-done) .enquiry-panel { transition: opacity var(--motion-fast) var(--ease-crownmark) var(--d, 0ms); }
.mi [data-reveal="form"]:not(.is-in) .enquiry-panel { opacity: 0; }
.mi [data-reveal="form"]:not(.is-done) .enquiry-panel::before { transform-origin: top; transition: transform var(--motion-slow) var(--ease-crownmark-in-out) calc(var(--d, 0ms) + var(--motion-stagger)); }
.mi [data-reveal="form"]:not(.is-in) .enquiry-panel::before { transform-origin: top; transform: scaleY(0); }
.mi [data-reveal="form"]:not(.is-done) :is(.enquiry-form > .field, .field-pair > .field, .enquiry-form__send, .form-note) {
  transition: opacity var(--motion-standard) var(--ease-crownmark) calc(var(--d, 0ms) + (var(--i, 0) + 2) * var(--motion-stagger)),
              transform var(--motion-standard) var(--ease-crownmark) calc(var(--d, 0ms) + (var(--i, 0) + 2) * var(--motion-stagger));
}
.mi [data-reveal="form"]:not(.is-in) :is(.enquiry-form > .field, .field-pair > .field, .enquiry-form__send, .form-note) { opacity: 0; transform: translateY(var(--motion-rise-sm)); }
/* Shown at once (a field focused early): nothing travels, for a frame. */
.mi [data-reveal="form"].is-instant :is(.enquiry-panel, .enquiry-form > .field, .field-pair > .field, .enquiry-form__send, .form-note),
.mi [data-reveal="form"].is-instant .enquiry-panel::before { transition: none !important; }

/* Nothing above may hide content in high-contrast mode. */
@media (forced-colors: active) {
  .mi [data-reveal], .mi [data-stagger] > *, .mi [data-reveal-group] [data-seq], .mi [data-hero] [data-seq], .mi .ln__i, .mi .crumbs li, .mi .pub__item, .mi .cap-step, .mi .dir__group,
  .mi [data-reveal] > *, .mi [data-reveal] picture, .mi .ledger__list > li > *, .mi .svc-row a > *, .mi .hero__media > picture,
  .mi [data-reveal="form"] :is(.enquiry-panel, .field, .enquiry-form__send, .form-note) {
    opacity: 1 !important; transform: none !important; clip-path: none !important; visibility: visible !important;
  }
  .svc-row a:hover, .svc-cell:hover { outline: 2px solid Highlight; }
  .chip[aria-current], .philo__index li.is-active { outline: 2px solid Highlight; }
  .ghost { display: none; }
}

/* Phones ---------------------------------------------------- */
@media (max-width: 639.98px) {
  .crumbs li:last-child { display: none; }
  .crumbs li:nth-last-child(2)::after { content: none; }
  .svc-row__tag { display: block; margin: var(--s-1) 0 0; }
  .tpl main .btn:not(.btn--text):not(.chip) { width: 100%; justify-content: center; }
  .tpl .footer .btn--primary { display: none; }
  .tpl .people__candid { right: 0; bottom: -6%; width: 36%; }
  .tpl .people__portrait { margin-right: 0; }
  .cta-band__actions { flex-direction: column; align-items: stretch; }
}

/* ============================================================
   BOOK A CONSULTATION
   A month calendar and a column of times on stone, then the same
   ruled sheet the enquiry form uses. Days and times are links and
   radio buttons, so the page works without JavaScript; booking.js
   swaps the picker in place. Squares, hairlines and the logo's
   orange edge: nothing rounded, nothing that glows.
   ============================================================ */
.booking-section { padding-top: clamp(3rem, 5vw, 4.5rem); }
.booking { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: var(--s-9); align-items: start; }
/* The calendar stays beside the details while they are filled in. */
/* (only on a window tall enough to show the whole picker under the header) */
@media (min-width: 1100px) and (min-height: 900px) { .booking__choose { position: sticky; top: 6.5rem; } }
#book, #details { scroll-margin-top: 5.5rem; }
.booking__heading { margin: var(--s-4) 0 var(--s-7); }
.booking__who { max-width: 30rem; margin: calc(var(--s-7) * -0.4) 0 var(--s-7); }
.booking__picker { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--s-7); align-items: start; }
.booking__picker.is-loading { opacity: 0.55; transition: opacity var(--t-fast) var(--ease-out); pointer-events: none; }
.booking__panel-title { margin: var(--s-3) 0 var(--s-6); }
.booking .enquiry-panel .field { margin-bottom: var(--s-5); }
.field__optional { margin-left: 0.5em; color: var(--text-soft); }
.field__select { appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 1.75rem !important;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%230A0A0A' stroke-width='1.4'/%3E%3C/svg%3E") no-repeat right 0.15rem center; }
.field__hint { margin-top: var(--s-2); color: var(--text-soft); }
.booking__summary { display: grid; gap: var(--s-2); margin: var(--s-6) 0 var(--s-4); padding-top: var(--s-5); border-top: 1px solid var(--rule); }
.booking__summary strong { font-weight: 500; font-size: 1.0625rem; line-height: 1.4; }
.booking__summary .label { color: var(--text-soft); }

/* Calendar */
.cal { background: var(--paper); border: 1px solid var(--rule-soft); padding: clamp(1rem, 2vw, 1.5rem); position: relative; }
.cal::before { content: ''; position: absolute; left: -1px; top: -1px; width: 3px; height: 2.75rem; background: var(--flame); }
.cal__head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); margin-bottom: var(--s-4); }
.cal__month { font-size: 1.25rem; line-height: 1.2; letter-spacing: -0.012em; font-weight: 500; }
.cal__nav { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border: 1px solid var(--rule); font-family: var(--font-mono); color: var(--text);
  transition: background var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out); }
a.cal__nav:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.cal__nav.is-off { color: var(--text-soft); opacity: 0.35; }
.cal__table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.cal__table th { padding: 0 0 var(--s-3); font-family: var(--font-mono); font-size: var(--fs-label); font-weight: 400; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-soft); text-align: center; }
.cal__table th abbr { text-decoration: none; }
.cal__table td { padding: 2px; text-align: center; }
.cal__day { position: relative; display: grid; place-items: center; width: 100%; aspect-ratio: 1; min-height: 2.5rem; font-variant-numeric: tabular-nums; font-size: 0.9375rem; color: var(--text-soft); opacity: 0.55; }
.cal__day.is-open { opacity: 1; color: var(--text); font-weight: 500; border: 1px solid var(--rule);
  transition: background var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out); }
.cal__day.is-open::after { content: ''; position: absolute; left: 50%; bottom: 0.3rem; width: 4px; height: 4px; margin-left: -2px; background: var(--flame); }
.cal__day.is-open:hover { border-color: var(--ink); }
.cal__day.is-selected { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.cal__day.is-today:not(.is-selected) { text-decoration: underline; text-underline-offset: 0.3em; text-decoration-thickness: 1px; }
.cal__key { display: flex; align-items: center; gap: 0.5rem; margin-top: var(--s-4); color: var(--text-soft); }
.cal__dot { width: 4px; height: 4px; background: var(--flame); flex: none; }

/* Times */
.slots .label { color: var(--text-soft); }
.slots__date { margin-top: var(--s-2); font-size: 1.25rem; line-height: 1.25; letter-spacing: -0.012em; font-weight: 500; }
.slots__zone { margin-top: var(--s-1); color: var(--text-soft); }
.slots__list { border: 0; padding: 0; margin: var(--s-5) 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(5.75rem, 1fr)); gap: var(--s-2); min-inline-size: 0; }
.slot { position: relative; display: block; cursor: pointer; }
.slot input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.slot span { display: block; padding: 0.7rem 0.4rem; border: 1px solid var(--rule); background: var(--paper); text-align: center; font-variant-numeric: tabular-nums; font-size: 0.9375rem; white-space: nowrap;
  transition: background var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out); }
.slot:hover span { border-color: var(--ink); }
.slot input:checked + span { background: var(--ink); border-color: var(--ink); color: var(--paper); box-shadow: inset 3px 0 0 var(--flame); }
.slot input:focus-visible + span { outline: 2px solid var(--rust); outline-offset: 2px; }
.slots.is-invalid .slots__list { outline: 1px solid var(--rust); outline-offset: 6px; }
.slots .field__error { display: flex; gap: 0.5rem; align-items: baseline; margin-top: var(--s-4); color: var(--rust); font-size: var(--fs-caption); }
.slots__none { margin-top: var(--s-4); }

/* A booking's facts, and the confirmation sheet */
.booking-facts { display: grid; gap: 0; margin: var(--s-6) 0; border-top: 1px solid var(--rule); }
.booking-facts > div { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: var(--s-4); padding: var(--s-4) 0; border-bottom: 1px solid var(--rule); align-items: baseline; }
.booking-facts dt { color: var(--text-soft); }
.booking-facts dd { margin: 0; line-height: 1.5; }
.booking-facts__zone { margin-left: 0.4em; font-size: var(--fs-caption); color: var(--text-soft); }
.booking-facts__ref { font-family: var(--font-mono); letter-spacing: 0.06em; }
.booking-facts--wide { margin-top: 0; }
.booking-note__title { margin: var(--s-3) 0 0; max-width: 30rem; }
.booking-note__actions { display: flex; flex-wrap: wrap; gap: var(--s-4); margin-top: var(--s-6); }
.booking-note__small { margin-top: var(--s-6); color: var(--text-soft); }
.booking-note .prose { color: var(--text-muted); }
.booking-note .prose, .booking-note__title, .booking-facts dd, .booking__summary strong { overflow-wrap: anywhere; }
.booking-about__grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: var(--s-9); align-items: start; }
.booking-about__grid .h2 { margin-top: var(--s-4); }
.booking-about__alt { margin-top: var(--s-6); color: var(--text-muted); }
.booking-privacy { margin-top: var(--s-6); border-bottom: 1px solid var(--rule); }
.booking-privacy summary { cursor: pointer; padding: var(--s-4) 0; font-weight: 500; list-style: none; display: flex; justify-content: space-between; gap: var(--s-4); }
.booking-privacy summary::-webkit-details-marker { display: none; }
.booking-privacy summary::after { content: '+'; font-family: var(--font-mono); color: var(--rust); }
.booking-privacy[open] summary::after { content: '\2212'; }
.booking-privacy .rich { padding-bottom: var(--s-5); font-size: var(--fs-small); color: var(--text-muted); }
.booking-privacy .rich p + p { margin-top: var(--s-3); }

@media (max-width: 1099.98px) {
  .booking { grid-template-columns: 1fr; gap: var(--s-8); }
}
@media (max-width: 899.98px) {
  .booking-about__grid { grid-template-columns: 1fr; gap: var(--s-6); }
}
@media (max-width: 719.98px) {
  .booking__picker { grid-template-columns: 1fr; gap: var(--s-6); }
  .cal { padding-inline: 0.5rem; }
  .cal__table td { padding: 1px; }
  .cal__day { min-height: 2.75rem; }   /* a full touch target */
  .slot span { padding-block: 0.85rem; }
  .booking-facts > div { grid-template-columns: 1fr; gap: var(--s-1); }
  .slots__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (forced-colors: active) {
  .cal__day.is-selected, .slot input:checked + span { outline: 2px solid Highlight; }
}

/* Website credit: quieter than the legal lines beside it. */
.footer__credit { opacity: 0.8; }  /* still clears 4.5:1 contrast on the footer */
.footer__credit a { color: inherit; text-decoration: none; }
.footer__credit a:hover, .footer__credit a:focus-visible { text-decoration: underline; text-underline-offset: 0.2em; }