/* ==========================================================================
   AMBROZIE | Legal & Strategic Counsel — Concept A "Editorial broadsheet"
   Design system. Paper-first, navy ink, classical serif display, quiet sans UI.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Navy */
  --navy-900: #071a2d;
  --navy-800: #0a233b;
  --navy-700: #102d49;
  --navy-600: #193b59;
  /* Orange */
  --orange: #f2850d;
  --orange-text: #a34f00;
  /* Paper & neutrals */
  --paper: #ecede7;
  --surface: #f8f8f3;
  --ivory: #f4f2ec;
  --rule: #c4cbd0;
  --muted: #5f6b73;
  --error: #df4937;
  /* Tints (alpha of navy) */
  --navy-06: rgba(10, 35, 59, 0.06);
  --navy-12: rgba(10, 35, 59, 0.12);
  --navy-24: rgba(10, 35, 59, 0.24);
  --paper-16: rgba(236, 237, 231, 0.16);
  --paper-32: rgba(236, 237, 231, 0.32);

  /* Semantic */
  --ink: var(--navy-800);
  --bg: var(--paper);

  /* Type */
  --font-display: "Cormorant Garamond", "Cormorant", Garamond, "Times New Roman", serif;
  --font-prose: "Source Serif 4", "Source Serif Pro", Georgia, "Times New Roman", serif;
  --font-sans: "Source Sans 3", "Source Sans Pro", "Helvetica Neue", Arial, sans-serif;

  --text-xs: 0.8125rem;   /* 13px */
  --text-sm: 0.9375rem;   /* 15px */
  --text-md: 1.0625rem;   /* 17px */
  --text-prose: 1.125rem; /* 18px */
  --text-lg: 1.375rem;    /* 22px */
  --text-xl: 1.75rem;     /* 28px */
  --text-2xl: 2.375rem;   /* 38px */
  --text-3xl: clamp(2.5rem, 1.6rem + 2.6vw, 4rem);
  --text-hero: clamp(2.625rem, 1.4rem + 3.6vw, 4.75rem);

  /* Spacing (8px 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: 3rem;
  --s-8: 4rem;
  --s-9: 6rem;
  --s-10: 8rem;

  /* Layout */
  --container: 82rem;      /* 1312px */
  --container-narrow: 46rem;
  --measure: 45rem; /* ≈ 66ch of 18px Source Serif; rem so headings, rules and pagers share one right edge */
  --gutter: clamp(1.25rem, 4vw, 4rem);
  --header-h: 4.5rem;

  /* Misc */
  --slash-angle: 38deg; /* "/" like the logo: bottom-left → top-right, 52° from horizontal */
  --ease: cubic-bezier(0.2, 0.6, 0.2, 1);
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1.5rem);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--text-md);
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img,
picture,
svg { display: block; max-width: 100%; height: auto; }

/* Grid/flex children must be allowed to shrink below content width */
.grid > *, .hero__grid > *, .credentials > *, .people-band__grid > *, .insights-featured > *,
.archive__item > *, .contact > *, .profile-hero > *, .profile-body > *, .article-layout > * { min-width: 0; }

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.005em;
  color: var(--ink);
  text-wrap: balance;
  font-variant-numeric: lining-nums;
}
main:focus { outline: none; }

p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; }
html.nav-open { overflow: hidden; }

a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s var(--ease);
}

:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 3px;
}

::selection { background: var(--navy-800); color: var(--surface); }

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

/* --------------------------------------------------------------------------
   3. Layout helpers
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container--narrow { max-width: var(--container-narrow); }

.section { padding-block: clamp(3.5rem, 8vw, 7rem); }
.section--tight { padding-block: clamp(2.5rem, 5vw, 4rem); }

/* Full-bleed navy band */
.band {
  background: var(--navy-800);
  color: var(--surface);
}
.band h1, .band h2, .band h3 { color: var(--surface); }
.band--deep { background: var(--navy-900); }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* Skip link */
.skip-link {
  position: absolute;
  top: -100%;
  left: var(--s-4);
  z-index: 100;
  padding: var(--s-2) var(--s-4);
  background: var(--navy-800);
  color: var(--surface);
  font-size: var(--text-sm);
}
.skip-link:focus { top: var(--s-2); }

/* --------------------------------------------------------------------------
   4. Typography components
   -------------------------------------------------------------------------- */

/* Eyebrow: small caps sans with orange slash marker */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.75em;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}
.eyebrow::before {
  content: "";
  display: inline-block;
  width: 2px;
  height: 0.95em;
  background: var(--orange);
  transform: rotate(var(--slash-angle));
  transform-origin: center;
}
.band .eyebrow { color: rgba(236, 237, 231, 0.72); }

/* Numbered section marker */
.numeral {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--muted);
  font-variant-numeric: lining-nums;
}

/* Section heading pattern: eyebrow + title + hairline */
.section-head {
  display: grid;
  gap: var(--s-4);
  padding-bottom: var(--s-5);
  margin-bottom: clamp(2rem, 5vw, 3.5rem);
  border-bottom: 1px solid var(--rule);
}
.section-head__title {
  font-size: var(--text-3xl);
  font-weight: 500;
  line-height: 1.02;
}
.band .section-head { border-bottom-color: var(--paper-16); }
/* Avoid doubled hairlines when a ruled list follows a section head */
.section-head + .pillars,
.section-head + .experience__grid,
.section-head + .archive { border-top: 0; }
.section-head + .pillars .pillar:nth-child(-n+2) { border-top: 0; }

@media (min-width: 48em) {
  .section-head--row {
    grid-template-columns: 1fr auto;
    align-items: end;
  }
}

/* Lede paragraph */
.lede {
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 1rem + 1.2vw, 1.875rem);
  font-weight: 500;
  line-height: 1.35;
  color: var(--ink);
  max-width: 34ch;
  text-wrap: pretty;
}

/* Inline text links: orange hairline underline */
.link {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--orange);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.28em;
  transition: text-decoration-color 0.2s var(--ease), color 0.2s var(--ease);
}
.link:hover { color: var(--orange-text); }
.band .link { color: var(--surface); }
.band .link:hover { color: var(--orange); }

/* Arrow link (CTA-lite) */
.link-arrow {
  display: inline-flex;
  align-items: baseline;
  gap: 0.6em;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
}
.link-arrow::after {
  content: "\2192";
  font-weight: 400;
  color: var(--orange);
  transition: transform 0.25s var(--ease);
}
.link-arrow:hover::after { transform: translateX(4px); }
/* Variant for labels that already carry their own arrow glyph in the copy */
.link-arrow--bare::after { content: none; }
.link-arrow--bare:hover { color: var(--orange-text); }
.band .link-arrow--bare:hover { color: var(--orange); }
.band .link-arrow { color: var(--surface); }

/* Buttons: one outline CTA only */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75em;
  min-height: 3rem;
  padding: 0.75rem 1.75rem;
  border: 1px solid var(--orange);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: transparent;
  cursor: pointer;
  transition: background 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease);
}
/* Hover stays an outline: navy tint + ink border, never a filled orange block */
.btn:hover,
.btn:focus-visible { background: var(--ink); border-color: var(--ink); color: var(--surface); }
.band .btn { color: var(--surface); }
.band .btn:hover,
.band .btn:focus-visible { background: var(--surface); border-color: var(--surface); color: var(--navy-900); }

.btn--ink {
  border-color: var(--ink);
}
.btn--ink:hover { background: var(--ink); color: var(--surface); }

/* --------------------------------------------------------------------------
   5. Header
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--paper);
  border-bottom: 1px solid var(--navy-800);
  transition: box-shadow 0.3s var(--ease);
}
.site-header[data-scrolled="true"] {
  box-shadow: 0 1px 0 var(--navy-800), 0 14px 28px -24px rgba(7, 26, 45, 0.45);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-6);
  min-height: var(--header-h);
}
.site-header__brand { display: inline-flex; flex-shrink: 0; align-items: center; }
.site-header__brand img {
  width: auto;
  height: 2.25rem;
}
.site-header__actions {
  display: flex;
  align-items: center;
  gap: var(--s-6);
}
.site-nav {
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 2.5vw, 2.5rem);
}
.site-nav a {
  position: relative;
  padding-block: 0.35rem;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--ink);
}
.site-nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--orange);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s var(--ease);
}
.site-nav a:hover::after,
.site-nav a[aria-current="page"]::after { transform: scaleX(1); }
.site-nav a[aria-current="page"] { font-weight: 600; }
.site-nav a:hover { color: var(--navy-600); }

.site-header__lang {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 1.85rem;
  padding: 0.15rem 0.7rem 0.2rem 0.78rem;
  border: 1px solid var(--navy-24);
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.16em;
  color: rgba(10, 35, 59, 0.8);
  min-width: 3rem;
  position: relative;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
/* extend the hit area to ~44px without changing the visual pill */
.site-header__lang::before { content: ""; position: absolute; inset: -0.45rem -0.3rem; }
/* placeholder keeps the nav position identical on pages without a translation */
.site-header__lang--empty { visibility: hidden; pointer-events: none; }
.site-header__lang:hover { color: var(--orange-text); border-color: var(--orange); }

/* Hamburger */
.menu-toggle {
  display: none;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  margin-right: -0.5rem;
  border: 0;
  background: transparent;
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.menu-toggle__line {
  display: block;
  width: 22px;
  height: 1px;
  background: var(--ink);
  transition: transform 0.25s var(--ease), opacity 0.2s;
}
.menu-toggle[aria-expanded="true"] .menu-toggle__line:first-child { transform: translateY(3.5px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle__line:last-child { transform: translateY(-3.5px) rotate(-45deg); }

@media (max-width: 56em) {
  .site-header__actions { gap: var(--s-4); }
  .site-header__lang { min-height: 1.75rem; }
  /* No-JS fallback: nav rendered in-flow under the brand row, toggle hidden */
  .site-header__inner { flex-wrap: wrap; row-gap: 0; padding-top: var(--s-4); }
  .site-header__actions { display: contents; }
  .site-header__lang { order: 2; margin-left: auto; }
  .site-nav {
    flex: 1 1 100%;
    flex-wrap: wrap;
    gap: var(--s-2) var(--s-5);
    order: 3;
    margin-top: var(--s-4);
    padding-block: var(--s-3) var(--s-4);
    border-top: 1px solid var(--rule);
  }
  .site-nav[hidden] { display: none; }
  .site-nav a::after { display: none; }
  .site-nav a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--orange); text-underline-offset: 0.3em; }

  /* JS-enhanced: fixed navy overlay panel below the header */
  html.js .site-header__inner { flex-wrap: nowrap; padding-top: 0; }
  html.js .site-header__actions { display: flex; }
  html.js .site-header__lang { order: 0; margin-left: 0; }
  html.js .menu-toggle { display: flex; }
  html.js .site-nav {
    position: fixed;
    inset: var(--header-h) 0 0 0;
    z-index: 49;
    flex: none;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 0;
    order: 0;
    padding: var(--s-4) var(--gutter) var(--s-8);
    border-top: 0;
    background: var(--navy-800);
    color: var(--surface);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 0.25s var(--ease), transform 0.25s var(--ease), visibility 0s 0.25s;
  }
  html.js.nav-open .site-nav {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition-delay: 0s;
  }
  html.js .site-nav a {
    padding: var(--s-4) 0;
    border-bottom: 1px solid var(--paper-16);
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0;
    color: var(--surface);
    text-decoration: none;
  }
  html.js .site-nav a:hover { color: var(--orange); }
  html.js .site-nav a[aria-current="page"] {
    padding-left: 1.1rem;
    text-decoration: none;
  }
  html.js .site-nav a[aria-current="page"]::before {
    content: "";
    position: absolute;
    left: 0.2rem;
    top: 50%;
    width: 1px;
    height: 0.9em;
    margin-top: -0.45em;
    background: var(--orange);
    transform: rotate(var(--slash-angle));
  }
  html.js .site-nav a:focus-visible { outline-color: var(--orange); outline-offset: -3px; }
  /* signature slash, hairline, bottom-right of the open panel */
  html.js .site-nav::after {
    content: "";
    position: absolute;
    right: 18%;
    bottom: 12%;
    width: 1px;
    height: min(32vh, 15rem);
    background: var(--orange);
    opacity: 0.4;
    transform: rotate(var(--slash-angle));
    transform-origin: center;
    pointer-events: none;
  }
}

/* --------------------------------------------------------------------------
   6. Footer
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--navy-900);
  color: var(--surface);
  padding-block: clamp(3rem, 6vw, 5rem) var(--s-6);
}
.site-footer__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
  padding-bottom: var(--s-6);
  border-bottom: 1px solid var(--paper-16);
}
.site-footer__brand { display: inline-flex; }
.site-footer__brand img { height: 2.1rem; width: auto; }
.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-6);
}
.site-footer__links a {
  display: inline-block;
  padding-block: 0.55rem;
  font-size: var(--text-sm);
  letter-spacing: 0.04em;
  color: var(--surface);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s;
}
.site-footer__links a:hover { border-bottom-color: var(--orange); }
.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-6);
  padding-top: var(--s-5);
  font-size: var(--text-xs);
  letter-spacing: 0.02em;
  color: rgba(236, 237, 231, 0.7);
}
.site-footer__bottom a { color: inherit; border-bottom: 1px solid transparent; transition: border-color 0.2s; }
.site-footer__bottom a:hover { border-bottom-color: var(--orange); }
.site-footer__bottom p { line-height: 1.5; }
.site-footer__bottom p:first-child { flex: 1 1 100%; color: var(--surface); }
@media (max-width: 40em) {
  .site-footer__top { flex-direction: column; align-items: flex-start; gap: var(--s-6); }
  .site-footer__links { gap: var(--s-3) var(--s-5); }
  .site-footer__bottom { display: grid; gap: var(--s-2); }
}

/* --------------------------------------------------------------------------
   7. Breadcrumbs
   -------------------------------------------------------------------------- */
.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 var(--s-2);
  list-style: none;
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.breadcrumb li + li::before {
  content: "/";
  margin-right: var(--s-2);
  color: var(--orange);
}
.breadcrumb a { display: inline-block; padding-block: 0.4rem; }
.breadcrumb a:hover { color: var(--orange-text); }
.breadcrumb [aria-current="page"] {
  color: var(--ink);
  text-transform: none;
  letter-spacing: 0;
}
@media (max-width: 40em) {
  /* long current crumb (article titles) truncates instead of wrapping under a dangling separator */
  .breadcrumb [aria-current="page"] {
    display: inline-block;
    max-width: min(100%, 64vw);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: bottom;
  }
}

/* --------------------------------------------------------------------------
   8. Cards & grids
   -------------------------------------------------------------------------- */
.grid {
  display: grid;
  gap: var(--s-6);
}
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 56em) { .grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 40em) { .grid--2, .grid--3 { grid-template-columns: 1fr; } }

/* Hairline-separated card (no boxes, editorial columns) */
.card {
  position: relative;
  display: grid;
  align-content: start;
  gap: var(--s-3);
  padding-top: var(--s-5);
  border-top: 1px solid var(--navy-800);
}
/* hover/focus: an orange hairline grows from the left across the top rule (paint only) */
.card::after {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--orange);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--motion-base) var(--ease);
  pointer-events: none;
}
.card:hover::after,
.card:focus-within::after { transform: scaleX(1); }
.card__meta {
  display: flex;
  align-items: baseline;
  gap: 0.7em;
  font-size: var(--text-xs);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--muted);
  font-variant-numeric: lining-nums;
  transition: color var(--motion-base) var(--ease);
}
/* brand slash marker (decorative, CSS-only — not a text node) */
.card__meta::before {
  content: "";
  flex: none;
  width: 1px;
  height: 0.95em;
  background: var(--orange);
  transform: rotate(var(--slash-angle));
  transform-origin: center;
}
.card__title {
  /* fluid between the 2- and 3-column grids: 28px only once the column is wide enough to
     carry it, 24px in a 285px column at 1024 and in the single column on a phone */
  font-size: clamp(1.5rem, 0.7375rem + 1.19vw, 1.75rem);
  line-height: 1.12;
  letter-spacing: -0.006em;
  font-weight: 500;
  /* balance keeps 2-4 line card titles from ending on a one-word line, which is what makes
     the compound words (EU-funded, White-Collar, construction-sector) rag badly */
  text-wrap: balance;
  overflow-wrap: break-word;
}
.card__title a { transition: color 0.2s; }
.card__title a:hover { color: var(--orange-text); }
.card__summary {
  font-family: var(--font-prose);
  font-size: var(--text-sm);
  line-height: 1.62;
  color: var(--navy-700);
  max-width: 50ch;
  text-wrap: pretty;
}
.card__more { margin-top: auto; padding-top: var(--s-2); }
@media (max-width: 40em) {
  /* one narrow column: balancing leaves the measure half empty, so let the title fill it */
  .card__title, .archive__title { text-wrap: pretty; }
}

/* Surface card (paper on paper) */
.card--surface {
  /* no fills on paper (user: "alb pe off-white arată oribil") — ruled, transparent */
  background: transparent;
  border-top: 1px solid var(--navy-800);
  padding: var(--s-5) 0;
}

/* Card grids: titles start on the same line across a row because the meta reserves two
   lines; the summary then follows its own title (subgrid locked short titles to the
   tallest row and left a hole under them). */
.insights-featured > .card .card__meta,
.in-archive__grid > .card .card__meta { min-height: calc(2 * 1.45em); }
}

/* --------------------------------------------------------------------------
   9. Tables
   -------------------------------------------------------------------------- */
.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  max-width: 100%;
}
.table-wrap:focus-visible { outline-offset: 0; }
table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}
th, td {
  padding: var(--s-3) var(--s-4);
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--rule);
}
th {
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: var(--text-xs);
  color: var(--muted);
  border-bottom-color: var(--navy-800);
}
.table { border-top: 1px solid var(--navy-800); font-family: var(--font-sans); line-height: 1.5; }
.table caption {
  caption-side: bottom;
  padding-top: var(--s-3);
  text-align: left;
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  color: var(--muted);
}
.table th { background: var(--navy-06); color: var(--ink); white-space: nowrap; font-variant-caps: all-small-caps; letter-spacing: 0.1em; font-size: var(--text-sm); }
.table td { min-width: 8rem; }
.table td:first-child, .table th:first-child { min-width: 0; }
.table td:first-child { font-weight: 500; }
.table tbody tr:hover { background: transparent; }
.table a { text-decoration: underline; text-decoration-color: var(--orange); text-underline-offset: 0.2em; }
.table a:hover { color: var(--orange-text); }

/* --------------------------------------------------------------------------
   10. Blockquotes
   -------------------------------------------------------------------------- */
blockquote {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 500;
  line-height: 1.35;
  color: var(--ink);
  text-wrap: pretty;
}
.quote {
  position: relative;
  padding-left: var(--s-5);
  margin: 0;
}
.quote::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.35em;
  width: 1px;
  height: 1.6em;
  background: var(--orange);
  transform: rotate(var(--slash-angle));
  transform-origin: top;
}
.quote figcaption {
  margin-top: var(--s-3);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.quote figcaption a:hover { color: var(--orange-text); }

/* --------------------------------------------------------------------------
   11. Article prose (long-form)
   -------------------------------------------------------------------------- */
.prose {
  font-family: var(--font-prose);
  font-size: var(--text-prose);
  line-height: 1.68;
  max-width: min(var(--measure), 100%);
  min-width: 0;
  overflow-wrap: break-word;
  color: var(--ink);
}
.prose > * + * { margin-top: 1.35em; }
.prose > p:first-child::first-letter {
  float: left;
  font-family: var(--font-display);
  font-size: 4.6em;
  line-height: 0.8;
  padding: 0.14em 0.12em 0 0;
  font-weight: 500;
  color: var(--ink);
}
.prose h2 {
  margin-top: 2.4em;
  margin-bottom: 0.4em;
  padding-top: 0.6em;
  border-top: 1px solid var(--rule);
  font-size: var(--text-2xl);
  line-height: 1.1;
  font-weight: 500;
}
.prose h3 {
  margin-top: 2em;
  font-size: var(--text-xl);
}
.prose a {
  text-decoration: underline;
  text-decoration-color: var(--orange);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}
.prose a:hover { color: var(--orange-text); }
.prose ul, .prose ol { padding-left: 1.4em; }
.prose li + li { margin-top: 0.5em; }
.prose li::marker { color: var(--orange-text); }
.prose strong { font-weight: 600; }
.prose h4 { margin-top: 1.6em; font-size: var(--text-lg); font-weight: 600; }
.prose h2 + h3, .prose h3 + h4 { margin-top: 1em; }
.prose blockquote {
  position: relative;
  margin-block: 1.6em;
  padding-left: var(--s-5);
  font-size: clamp(1.3125rem, 1.1rem + 0.6vw, 1.5rem);
  line-height: 1.4;
}
.prose blockquote::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.35em;
  width: 1px;
  height: 1.6em;
  background: var(--orange);
  transform: rotate(var(--slash-angle));
  transform-origin: top;
}
.prose blockquote p + p { margin-top: 0.8em; }
.prose figure { margin: 2em 0; }
.prose figure img { width: 100%; }
.prose figcaption {
  margin-top: var(--s-3);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  line-height: 1.5;
  color: var(--muted);
}
.prose .table-wrap { margin-block: 2em; }
.prose table { font-family: var(--font-sans); font-size: var(--text-sm); line-height: 1.5; }
.prose sup, .prose sub { font-size: 0.75em; line-height: 0; position: relative; vertical-align: baseline; font-variant-numeric: lining-nums; }
.prose sup { top: -0.55em; }
.prose sub { bottom: -0.25em; }
.prose sup a { text-decoration: none; color: var(--orange-text); }
.prose hr { border: 0; border-top: 1px solid var(--rule); margin-block: 2.4em; }
.prose em, .prose i { font-style: italic; }
.prose cite { font-style: italic; }
.prose abbr[title] { text-decoration: underline dotted; text-underline-offset: 0.2em; }
.prose > .faq, .prose > .card-grid { margin-top: 2em; }

/* --------------------------------------------------------------------------
   12. Hero (home)
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(5rem, 11vw, 9.5rem) clamp(4rem, 9vw, 7.5rem);
}
.hero::after {
  /* the signature slash, faint, off to the right */
  content: "";
  position: absolute;
  top: -10%;
  right: 6%;
  width: 1px;
  height: 120%;
  background: linear-gradient(to bottom, transparent, var(--orange) 30%, var(--orange) 70%, transparent);
  transform: rotate(var(--slash-angle));
  transform-origin: center;
  opacity: 0.9;
  pointer-events: none;
}
.hero__grid {
  position: relative;
  display: grid;
  gap: var(--s-6);
}
.hero__title {
  font-size: var(--text-hero);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -0.012em;
  max-width: 19ch;
}
.hero__aside {
  display: grid;
  gap: var(--s-5);
  align-content: end;
}
.hero__text {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1rem + 0.8vw, 1.5rem);
  line-height: 1.4;
  max-width: 30ch;
  color: rgba(248, 248, 243, 0.86);
}
@media (min-width: 56em) {
  .hero__grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
    gap: var(--s-8);
    align-items: end;
  }
  .hero__aside {
    padding-left: var(--s-6);
    border-left: 1px solid var(--paper-16);
  }
}

/* --------------------------------------------------------------------------
   13. Credentials strip
   -------------------------------------------------------------------------- */
.credentials {
  display: grid;
  gap: var(--s-6);
  align-items: start;
}
.credentials__list {
  display: grid;
  gap: var(--s-5);
}
.credential {
  padding-top: var(--s-4);
  border-top: 1px solid var(--navy-800);
}
.credential h2 {
  font-size: var(--text-xl);
  white-space: nowrap;
  font-weight: 500;
  line-height: 1;
}
.credential p {
  margin-top: var(--s-2);
  font-size: var(--text-sm);
  color: var(--muted);
  max-width: 26ch;
}
@media (min-width: 56em) {
  .credentials { grid-template-columns: 5fr 7fr; gap: var(--s-9); }
  .credentials__list { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 40em) and (max-width: 56em) {
  .credentials__list { grid-template-columns: repeat(3, 1fr); }
}

/* --------------------------------------------------------------------------
   14. Practice pillars (numbered index)
   -------------------------------------------------------------------------- */
.pillars {
  display: grid;
  border-top: 1px solid var(--navy-800);
}
.pillar {
  display: grid;
  grid-template-columns: 3.5rem 1fr auto;
  align-items: center;
  gap: var(--s-4);
  padding-block: clamp(1.25rem, 2.5vw, 1.75rem);
  border-bottom: 1px solid var(--rule);
  transition: background 0.25s var(--ease);
}
.pillar:hover { background: transparent; } /* hover = orange text + arrow only (user request) */
.pillar__num {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  letter-spacing: 0.08em;
  color: var(--muted);
}
.pillar__title {
  font-size: clamp(1.375rem, 1rem + 1.2vw, 1.875rem);
  font-weight: 500;
  line-height: 1.15;
  transition: color 0.2s var(--ease);
}
.pillar:hover .pillar__title { color: var(--orange-text); }
.pillar__arrow {
  color: var(--orange);
  font-size: var(--text-lg);
  transition: transform 0.25s var(--ease);
}
.pillar:hover .pillar__arrow { transform: translateX(4px); }
@media (min-width: 56em) {
  .pillars { grid-template-columns: 1fr 1fr; column-gap: var(--s-8); }
  .pillar { grid-template-columns: 3rem 1fr auto; padding-inline: 0 var(--s-2); }
}

/* --------------------------------------------------------------------------
   15. People band (navy)
   -------------------------------------------------------------------------- */
.people-band {
  position: relative;
  overflow: hidden;
}
.people-band__grid {
  display: grid;
  gap: var(--s-6);
}
.people-band__title {
  font-size: var(--text-3xl);
  line-height: 1.02;
}
.people-band__copy {
  font-size: var(--text-md);
  line-height: 1.65;
  color: rgba(248, 248, 243, 0.82);
  max-width: 54ch;
}
.people-band__portraits {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-3);
}
.people-band__portraits img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  filter: grayscale(100%);
  opacity: 0.86;
  transition: filter 0.4s var(--ease), opacity 0.4s var(--ease);
}
.people-band__portraits a:hover img { filter: grayscale(0); opacity: 1; }
@media (min-width: 56em) {
  .people-band__grid {
    grid-template-columns: 6fr 6fr;
    gap: var(--s-9);
    align-items: center;
  }
}

/* --------------------------------------------------------------------------
   16. Insights (featured grid + compact archive list)
   -------------------------------------------------------------------------- */
.insights-featured {
  display: grid;
  gap: var(--s-7) var(--s-7);
}
@media (min-width: 40em) { .insights-featured { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64em) { .insights-featured { grid-template-columns: repeat(3, 1fr); } }

.archive {
  margin-top: clamp(3rem, 6vw, 5rem);
  border-top: 1px solid var(--navy-800);
}
.archive__item {
  position: relative;
  display: grid;
  gap: var(--s-2) var(--s-6);
  padding-block: var(--s-4);
  border-bottom: 1px solid var(--rule);
}
/* same growing hairline as .card, on the row rule */
.archive__item::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100%;
  height: 1px;
  background: var(--orange);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--motion-base) var(--ease);
  pointer-events: none;
}
.archive__item:hover::after,
.archive__item:focus-within::after { transform: scaleX(1); }
.archive__meta {
  display: flex;
  align-items: baseline;
  gap: 0.7em;
  font-size: var(--text-xs);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--muted);
  line-height: 1.5;
  font-variant-numeric: lining-nums;
  transition: color var(--motion-base) var(--ease);
}
.archive__meta::before {
  content: "";
  flex: none;
  width: 1px;
  height: 0.95em;
  background: var(--orange);
  transform: rotate(var(--slash-angle));
  transform-origin: center;
}
.archive__title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 500;
  line-height: 1.22;
  max-width: 33rem;
  /* "pretty" not "balance" here: a wide list title reads better filled than equalised */
  text-wrap: pretty;
  overflow-wrap: break-word;
}
.archive__title a:hover { color: var(--orange-text); }
.archive__summary {
  font-family: var(--font-prose);
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--navy-700);
  max-width: 33rem;
  text-wrap: pretty;
}
.archive__more { font-size: var(--text-xs); }
@media (min-width: 56em) {
  .archive__item {
    grid-template-columns: 13rem minmax(0, 1fr) auto;
    align-items: baseline;
    gap: var(--s-2) var(--s-6);
    padding-block: var(--s-5);
  }
  .archive__meta { grid-row: 1 / span 2; padding-top: 0.35rem; }
  .archive__summary { grid-column: 2; }
  .archive__more { grid-column: 3; grid-row: 1; }
  /* rows whose summary is empty keep the same optical block as the rest */
  .archive__item:not(:has(.archive__summary)) .archive__title { padding-bottom: 0.15rem; }
}

/* --------------------------------------------------------------------------
   17. Contact
   -------------------------------------------------------------------------- */
.contact {
  display: grid;
  gap: var(--s-6);
}
.contact__rows {
  display: grid;
  border-top: 1px solid var(--navy-800);
}
.contact__row {
  display: grid;
  grid-template-columns: 6rem 1fr;
  gap: var(--s-4);
  padding-block: var(--s-4);
  border-bottom: 1px solid var(--rule);
  align-items: baseline;
}
.contact__row span {
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.contact__row a,
.contact__row p {
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 1rem + 1.2vw, 1.75rem);
  font-weight: 500;
  line-height: 1.25;
}
.contact__row a:hover { color: var(--orange-text); }
@media (min-width: 56em) {
  .contact { grid-template-columns: 5fr 7fr; gap: var(--s-9); }
}

/* --------------------------------------------------------------------------
   18. Profile page
   -------------------------------------------------------------------------- */
.profile-hero {
  display: grid;
  gap: var(--s-6);
  padding-top: var(--s-6);
}
.profile-hero__portrait img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 62% 20%;
}
.profile-hero__intro {
  display: grid;
  align-content: end;
  gap: var(--s-5);
}
.profile-hero__name {
  font-size: var(--text-hero);
  line-height: 0.98;
  letter-spacing: -0.012em;
}
.profile-hero__role {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-style: italic;
  color: var(--muted);
}
.profile-hero__contacts {
  display: grid;
  gap: var(--s-2);
  padding-top: var(--s-5);
  border-top: 1px solid var(--navy-800);
  font-size: var(--text-md);
}
.profile-hero__contacts a { display: inline-block; width: max-content; }
.profile-hero__contacts-secondary {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-5);
  margin-top: var(--s-3);
}
@media (min-width: 56em) {
  .profile-hero {
    grid-template-columns: 5fr 7fr;
    gap: var(--s-9);
    align-items: end;
  }
}

.profile-body {
  display: grid;
  gap: var(--s-8);
}
.profile-body__main { min-width: 0; }
.profile-body__aside {
  display: grid;
  align-content: start;
  gap: var(--s-8);
}
@media (min-width: 56em) {
  .profile-body {
    grid-template-columns: 5fr 7fr;
    gap: var(--s-9);
  }
  .profile-body__aside { order: -1; }
}

/* aside blocks */
.aside-block__title {
  padding-bottom: var(--s-3);
  margin-bottom: var(--s-4);
  border-bottom: 1px solid var(--navy-800);
  font-size: var(--text-lg);
  font-weight: 500;
}
.list-plain { list-style: none; }
.list-plain li {
  padding-block: var(--s-2);
  border-bottom: 1px solid var(--rule);
  font-size: var(--text-sm);
}
.list-plain li:last-child { border-bottom: 0; }
.list-plain a:hover { color: var(--orange-text); }
.list-links { display: grid; }
.list-links a {
  padding-block: var(--s-2);
  border-bottom: 1px solid var(--rule);
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: 500;
  line-height: 1.3;
}
.list-links a:last-child { border-bottom: 0; }
.list-links a:hover { color: var(--orange-text); }

.recognition { display: grid; gap: var(--s-5); }

/* Bio prose (slightly smaller than article) */
.bio { max-width: var(--measure); }
.bio > p + p { margin-top: 1.2em; }
.bio > p:first-child {
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 1rem + 1.2vw, 1.75rem);
  line-height: 1.35;
  font-weight: 500;
}

/* Representative experience */
.experience { margin-top: clamp(3rem, 6vw, 5rem); }
.experience__grid {
  display: grid;
  border-top: 1px solid var(--navy-800);
}
.experience__item {
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  gap: var(--s-2) var(--s-4);
  padding-block: var(--s-5);
  border-bottom: 1px solid var(--rule);
}
.experience__item h3 {
  font-size: var(--text-xl);
  line-height: 1.15;
}
.experience__item p {
  grid-column: 2;
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--muted);
  max-width: 62ch;
}
.experience__note {
  margin-top: var(--s-5);
  font-size: var(--text-xs);
  line-height: 1.6;
  color: var(--muted);
  max-width: 70ch;
}

/* --------------------------------------------------------------------------
   19. Article page
   -------------------------------------------------------------------------- */
.article-head {
  display: grid;
  gap: var(--s-5);
  padding-top: var(--s-6);
  padding-bottom: clamp(2.5rem, 6vw, 4rem);
  margin-bottom: clamp(2.5rem, 6vw, 4rem);
  border-bottom: 1px solid var(--navy-800);
}
.article-head > * { max-width: 60rem; }
.article-head__title {
  font-size: var(--text-3xl);
  line-height: 1.02;
  letter-spacing: -0.01em;
}
.article-head__subtitle {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-style: italic;
  color: var(--muted);
}
.article-head__author {
  font-size: var(--text-sm);
  color: var(--muted);
}
.article-head__author strong { font-weight: 600; color: var(--ink); }

.article-layout {
  display: grid;
  gap: var(--s-8);
}
.article-aside {
  display: grid;
  align-content: start;
  gap: var(--s-6);
}
.article-aside__block h2 {
  padding-bottom: var(--s-3);
  margin-bottom: var(--s-3);
  border-bottom: 1px solid var(--navy-800);
  font-size: var(--text-lg);
}
.article-aside__block p { display: grid; gap: var(--s-2); font-size: var(--text-sm); }
.article-aside__block a { display: inline-block; padding-block: var(--s-2); }
.article-aside__block a:hover { color: var(--orange-text); }
.article-toc {
  list-style: none;
  display: grid;
  gap: var(--s-2);
  padding-top: var(--s-4);
  border-top: 1px solid var(--navy-800);
}
.article-toc a {
  display: block;
  padding-block: var(--s-1);
  font-size: var(--text-sm);
  line-height: 1.35;
  color: var(--muted);
}
.article-toc a:hover { color: var(--orange-text); }
.article-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--s-4);
  margin-top: clamp(3rem, 6vw, 5rem);
  padding-top: var(--s-5);
  border-top: 1px solid var(--navy-800);
}
.article-nav button {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  cursor: pointer;
}
@media (min-width: 64em) {
  .article-layout {
    grid-template-columns: minmax(0, 1fr) 14rem;
    gap: var(--s-7);
  }
  /* align-self so the sticky aside has room to travel inside the tall row */
  .article-aside { position: sticky; top: calc(var(--header-h) + 2rem); align-self: start; }
}
@media (min-width: 76em) {
  .article-layout {
    grid-template-columns: minmax(0, 1fr) 16rem;
    gap: var(--s-9);
  }
}

/* --------------------------------------------------------------------------
   20. Small-screen adjustments
   -------------------------------------------------------------------------- */
@media (max-width: 56em) {
  .hero::after { right: -14%; opacity: 0.55; }
  .pillar { grid-template-columns: 2.25rem 1fr auto; }
  .contact__row { grid-template-columns: 5rem 1fr; }
}

/* --------------------------------------------------------------------------
   21. Page head (generic inner-page opener: eyebrow + h1 + optional lede)
   -------------------------------------------------------------------------- */
.page-head { padding-block: clamp(3rem, 7vw, 5.5rem) clamp(2rem, 5vw, 3.5rem); }
.page-head .eyebrow + .page-head__title { margin-top: var(--s-4); }
.page-head__title {
  font-size: var(--text-3xl);
  font-weight: 500;
  line-height: 1.05;
  max-width: 24ch;
}
.page-head__lede {
  margin-top: var(--s-5);
  max-width: var(--measure);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  line-height: 1.45;
  color: var(--navy-700);
}
.page-head--band { color: var(--surface); }
.page-head--band .page-head__title { color: var(--surface); }
.page-head--band .page-head__lede { color: rgba(236, 237, 231, 0.82); }

/* --------------------------------------------------------------------------
   22. Display weight: Cormorant 600 on navy (under-inked at 500) and at small sizes
   -------------------------------------------------------------------------- */
.band h1, .band h2, .band h3, .band h4,
.band .section-head__title, .band .lede, .band blockquote,
.band .people-band__title, .band .page-head__title,
.page-head--band .page-head__title { font-weight: 600; }
/* display text below 22px: card titles in lists, aside titles, numerals, list-links */
.numeral, .pillar__num, .list-links a, .archive__title, .aside-block__title,
.article-aside__block h2, .contact__row span, .profile-hero__role, .article-head__subtitle { font-weight: 600; }
.band .lede, .band .hero__text { font-weight: 600; }
.hero__text { font-weight: 600; }
.band .eyebrow { font-weight: 600; }

/* --------------------------------------------------------------------------
   23. Surfaces & spacing utilities
   -------------------------------------------------------------------------- */
.band--ivory {
  background: transparent;
  border-top: 1px solid var(--navy-12);
  border-bottom: 1px solid var(--navy-12);
  color: var(--ink);
  border-top: 1px solid var(--navy-12);
  border-bottom: 1px solid var(--navy-12);
}
.band--ivory h1, .band--ivory h2, .band--ivory h3 { color: var(--ink); font-weight: 500; }
.band--ivory .eyebrow { color: var(--muted); }
.band--ivory .section-head { border-bottom-color: var(--rule); }
.band--ivory .link { color: var(--ink); }
.band--ivory .link:hover { color: var(--orange-text); }
.band--ivory .link-arrow { color: var(--ink); }
.band--ivory .btn { color: var(--ink); }
.band--ivory .lede, .band--ivory blockquote { font-weight: 500; }

.stack > * + * { margin-top: var(--stack, var(--s-5)); }
.stack--xs { --stack: var(--s-2); }
.stack--sm { --stack: var(--s-4); }
.stack--md { --stack: var(--s-6); }
.stack--lg { --stack: var(--s-8); }
.stack--xl { --stack: clamp(3.5rem, 8vw, 7rem); }

.btn--small {
  min-height: 2.5rem;
  padding: 0.5rem 1.25rem;
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
}

/* --------------------------------------------------------------------------
   24. FAQ + card-grid (emitted by lib.blocks())
   -------------------------------------------------------------------------- */
.faq {
  display: grid;
  border-top: 1px solid var(--navy-800);
  max-width: var(--measure);
}
.faq__item {
  display: grid;
  gap: var(--s-3);
  padding-block: var(--s-5);
  border-bottom: 1px solid var(--rule);
}
.faq__item h3 {
  margin: 0;
  padding: 0;
  border: 0;
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 1.1rem + 0.8vw, 1.75rem);
  font-weight: 500;
  line-height: 1.2;
}
.faq__item p {
  margin: 0;
  font-family: var(--font-prose);
  font-size: var(--text-md);
  line-height: 1.65;
  color: var(--ink);
}
.prose .faq__item p { font-size: var(--text-md); }
@media (min-width: 56em) {
  .faq__item { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-6); align-items: start; }
}
.band .faq { border-top-color: var(--paper-32); }
.band .faq__item { border-bottom-color: var(--paper-16); }
.band .faq__item p { color: rgba(248, 248, 243, 0.86); }

.card-grid {
  display: grid;
  gap: var(--s-6) var(--s-7);
  max-width: none;
}
.card-grid__item {
  display: grid;
  align-content: start;
  gap: var(--s-3);
  padding-top: var(--s-4);
  border-top: 1px solid var(--navy-800);
}
.card-grid__item h3 {
  margin: 0;
  padding: 0;
  border: 0;
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 500;
  line-height: 1.15;
}
.card-grid__item p {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--muted);
}
@media (min-width: 40em) { .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64em) { .card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.prose .card-grid { max-width: none; }
.band .card-grid__item { border-top-color: var(--paper-32); }
.band .card-grid__item p { color: rgba(248, 248, 243, 0.78); }

/* --------------------------------------------------------------------------
   25. Pager (previous / next)
   -------------------------------------------------------------------------- */
.pager {
  display: flex;
  justify-content: space-between;
  gap: var(--s-4);
  margin-top: clamp(3rem, 6vw, 5rem);
  padding-top: var(--s-5);
  border-top: 1px solid var(--navy-800);
}
.pager > * { min-width: 0; }
.pager__link {
  display: grid;
  gap: var(--s-1);
  flex: 1 1 0;
  max-width: 28rem;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  line-height: 1.35;
  color: var(--ink);
}
.pager__link--next { text-align: right; margin-left: auto; justify-items: end; }
.pager__link:hover { color: var(--orange-text); }
.pager__label {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.pager__title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  line-height: 1.2;
}
.pager__arrow { color: var(--orange); font-weight: 400; }
.pager__link:hover .pager__arrow { color: var(--orange-text); }
@media (max-width: 40em) {
  .pager { flex-direction: column; }
  .pager__link--next { text-align: left; margin-left: 0; justify-items: start; }
}

/* --------------------------------------------------------------------------
   26. Print
   -------------------------------------------------------------------------- */
@media print {
  :root { --bg: #fff; --ink: #000; --muted: #333; }
  html, body { background: #fff !important; color: #000 !important; }
  body { font-size: 11pt; overflow: visible; }
  .site-header { position: static; border-bottom: 1px solid #000; box-shadow: none; }
  .site-header__actions, .menu-toggle, .skip-link, .site-footer__links, .site-footer__top,
  .article-nav, .pager, .article-aside, .hero::after, .people-band__portraits { display: none !important; }
  .site-footer { background: #fff !important; color: #000 !important; padding-block: 1rem 0; border-top: 1px solid #000; }
  .site-footer__bottom { color: #000 !important; padding-top: 0.75rem; }
  .site-footer__bottom p:first-child { color: #000; }
  .band, .band--deep, .band--ivory, .page-head--band { background: #fff !important; color: #000 !important; border: 0; }
  .band h1, .band h2, .band h3, .band p, .band a, .page-head--band .page-head__title, .page-head--band .page-head__lede { color: #000 !important; }
  .hero__text, .people-band__copy { color: #000 !important; }
  .card, .credential, .pillar, .archive__item, .faq__item, .card-grid__item { break-inside: avoid; }
  h1, h2, h3, h4 { break-after: avoid; color: #000; }
  a { color: #000; text-decoration: underline; }
  .prose a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.85em; color: #333; }
  .section { padding-block: 1.5rem; }
  .article-layout { display: block; }
  .prose { max-width: none; }
  .prose > p:first-child::first-letter { float: none; font-size: inherit; padding: 0; }
  .table-wrap { overflow: visible; }
  img { max-width: 60%; }
  ::selection { background: none; }
}

/* --------------------------------------------------------------------------
   26. Navy header (brand lockup in white on navy; replaces the paper header)
   -------------------------------------------------------------------------- */
.site-header {
  background: var(--navy-900);
  border-bottom: 1px solid rgba(236, 237, 231, 0.16);
  color: var(--surface);
}
.site-header[data-scrolled="true"] {
  box-shadow: 0 1px 0 rgba(236, 237, 231, 0.16), 0 14px 28px -24px rgba(0, 0, 0, 0.6);
}
.site-header__brand img { height: 2.35rem; }
.site-nav a { color: rgba(236, 237, 231, 0.82); }
.site-nav a:hover { color: var(--surface); }
.site-nav a[aria-current="page"] { color: var(--surface); }
.site-nav a::after { background: var(--orange); }
.site-header__lang { color: rgba(236, 237, 231, 0.82); border-color: rgba(236, 237, 231, 0.4); }
.site-header__lang:hover { color: var(--orange); border-color: var(--orange); }
.menu-toggle__line { background: var(--surface); }
.menu-toggle:focus-visible { outline-color: var(--orange); }
/* Navy hero directly under a navy header: keep a hairline between them */
.site-header + main > .band:first-child,
.site-header + main > .hm-hero:first-child { border-top: 0; }
@media (max-width: 56em) {
  /* no-JS in-flow nav on navy */
  .site-nav a { color: var(--surface); }
  .site-nav a[aria-current="page"] { text-decoration-color: var(--orange); }
}

/* --------------------------------------------------------------------------
   27. Compact footer (user request: fewer rows, less height)
   -------------------------------------------------------------------------- */
.site-footer { padding-block: clamp(2rem, 3.5vw, 2.75rem) var(--s-5); }
.site-footer__top { padding-bottom: var(--s-4); gap: var(--s-4); }
.site-footer__brand img { height: 1.9rem; }
.site-footer__links { gap: var(--s-5); }
.site-footer__links a { padding-block: 0.35rem; }
.site-footer__bottom {
  padding-top: var(--s-4);
  gap: var(--s-2) var(--s-6);
  align-items: baseline;
}
.site-footer__bottom p:first-child { flex: 0 1 auto; }
.site-footer__bottom p:last-child { margin-left: auto; }
@media (max-width: 56em) {
  .site-footer__bottom p:first-child { flex: 1 1 100%; }
  .site-footer__bottom p:last-child { margin-left: 0; }
}

/* --------------------------------------------------------------------------
   28. Motion — quiet, shared easing (--ease), 120–420ms, transform/opacity/colour only.
   Additive: page transitions, scroll reveal, pressed/focus states, base hover refinements.
   -------------------------------------------------------------------------- */
:root { --motion-fast: 0.18s; --motion-base: 0.26s; --motion-slow: 0.42s; }

/* 28.1 Page transitions (View Transitions), cross-document (@view-transition, when the router bails out or JS is off)
   and same-document (the router swaps <main> inside document.startViewTransition). Header/footer keep their identity
   (they stay put); only <main> moves: the old one fades out in 160ms, the new one rises 8px in over 320ms. */
@view-transition { navigation: auto; }
.site-header { view-transition-name: site-header; }
.site-footer { view-transition-name: site-footer; }
main { view-transition-name: page-main; }
::view-transition-group(*) { animation-duration: 0s; }
::view-transition-old(root), ::view-transition-new(root),
::view-transition-old(site-header), ::view-transition-new(site-header),
::view-transition-old(site-footer), ::view-transition-new(site-footer) { animation: none; mix-blend-mode: normal; }
::view-transition-image-pair(page-main) { isolation: auto; }
::view-transition-old(page-main) { animation: vt-out 0.16s var(--ease) forwards; mix-blend-mode: normal; }
::view-transition-new(page-main) { animation: vt-in 0.32s var(--ease) both; mix-blend-mode: normal; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Fallback for browsers without View Transitions: one-shot rise on <main> at load and on every router swap
   (a freshly inserted <main> restarts the animation); the outgoing <main> fades up and out in 160ms. */
@supports not (view-transition-name: x) {
  html.js main { animation: vt-in 0.32s var(--ease) both; }
}
html.js main.is-leaving { opacity: 0; transform: translateY(-6px); transition: opacity 0.16s var(--ease), transform 0.16s var(--ease); animation: none; }

/* 28.2 Scroll reveal. Only elements below the fold at init receive [data-reveal-ready] (set by JS),
   so nothing above the fold is ever hidden and everything is visible without JS. */
html.js [data-reveal-ready] {
  transition: opacity var(--motion-slow) var(--ease) var(--reveal-d, 0s), transform var(--motion-slow) var(--ease) var(--reveal-d, 0s);
}
html.js [data-reveal-ready]:not(.is-in) { opacity: 0; transform: translateY(14px); }

/* 28.3 Navigation smoothness: header hairline, pressed states, focus ring settle. */
.site-header { transition: box-shadow 0.3s var(--ease), border-color 0.3s var(--ease); }
.btn { transition: background 0.22s var(--ease), color 0.22s var(--ease), border-color 0.22s var(--ease), transform 0.12s var(--ease); }
.site-nav a { transition: color 0.2s var(--ease), transform 0.12s var(--ease); }
.btn:active, .site-nav a:active, .pager__link:active, .link-arrow:active { transform: translateY(1px); }
@keyframes focus-in { from { outline-color: transparent; outline-offset: 0; } }
:focus-visible { animation: focus-in var(--motion-fast) var(--ease); }

/* 28.4 Base hovers (colour + hairline + nudge; layout untouched). */
.link:hover { text-decoration-color: var(--orange-text); }
.link-arrow { transition: color 0.2s var(--ease), transform 0.12s var(--ease); }
.link-arrow:hover { color: var(--orange-text); }
.band .link-arrow:hover { color: var(--orange); }
.breadcrumb a { transition: color 0.2s var(--ease); }
.site-footer__links a, .site-footer__bottom a { transition: border-color 0.22s var(--ease), color 0.22s var(--ease); }
.list-links a, .list-plain a {
  display: inline-block;
  padding-left: 0;
  transition: color 0.2s var(--ease), transform 0.22s var(--ease);
}
.list-links a { display: block; }
.list-links a:hover, .list-plain a:hover { transform: translateX(4px); }
/* Cards & archive rows: the rule warms from the left (.card::after / .archive__item::after),
   the title takes the accent colour, the meta warms with it and the "Read more" affordance slides 4px.
   Every hover has a :focus-visible / :focus-within counterpart. */
.archive__title a { transition: color var(--motion-base) var(--ease); }
.archive__item:hover .archive__title a,
.archive__item:focus-within .archive__title a,
.archive__title a:focus-visible { color: var(--orange-text); }
.archive__item:hover .archive__meta,
.archive__item:focus-within .archive__meta { color: var(--orange-text); }
.card__title a { transition: color var(--motion-base) var(--ease); }
.card:hover .card__title a,
.card:focus-within .card__title a,
.card__title a:focus-visible { color: var(--orange-text); }
.card:hover .card__meta,
.card:focus-within .card__meta { color: var(--orange-text); }
.card__more, .archive__more { transition: transform var(--motion-base) var(--ease), color var(--motion-base) var(--ease); }
.card:hover .card__more, .card:focus-within .card__more,
.archive__item:hover .archive__more, .archive__item:focus-within .archive__more { transform: translateX(4px); }
/* pillar hover: the top rule warms to orange (no pseudo-element — ::before/::after are the numeral and the arrow) */
.pillar { transition: border-color var(--motion-base) var(--ease); }
.pillar:hover { border-top-color: var(--orange); }
.pager__link { transition: color 0.2s var(--ease), transform 0.12s var(--ease); }
.pager__arrow { display: inline-block; transition: transform 0.25s var(--ease), color 0.2s var(--ease); }
.pager__link--next:hover .pager__arrow { transform: translateX(4px); }
.pager__link--prev:hover .pager__arrow, .pager__link:not(.pager__link--next):hover .pager__arrow { transform: translateX(-4px); }
.quote figcaption a, .table a, .article-aside__block a, .article-toc a, .contact__row a, .prose a { transition: color 0.2s var(--ease); }
.people-band__portraits a { display: block; overflow: hidden; }
.people-band__portraits img {
  transform: scale(1);
  transition: filter 0.5s var(--ease), opacity 0.5s var(--ease), transform 0.5s var(--ease);
}
.people-band__portraits a:hover img { transform: scale(1.02); }

/* 28.5 Reduced motion: no transitions/animations, no hidden content, no page transition. */
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  html.js main, html.js main.is-leaving { animation: none; transition: none; opacity: 1; transform: none; }
  html.js [data-reveal-ready], html.js [data-reveal-ready]:not(.is-in) { opacity: 1; transform: none; transition: none; }
  .btn:active, .site-nav a:active, .pager__link:active, .link-arrow:active, .list-links a:hover, .list-plain a:hover,
  .people-band__portraits a:hover img { transform: none; }
  /* cards: the growing hairline becomes an instant state change; nothing slides */
  .card::after, .archive__item::after, .card__more, .archive__more { transition: none; }
  .card:hover .card__more, .card:focus-within .card__more,
  .archive__item:hover .archive__more, .archive__item:focus-within .archive__more { transform: none; }
  :focus-visible { animation: none; }
}


/* ==== partial: 10-home.css ==== */
/* ==========================================================================
   Family "home": index.html, our-firm.html, approach.html  (prefix .hm-)
   ========================================================================== */

/* ---- Home: hero ---------------------------------------------------------- */
.hm-hero__title {
  /* widths tuned so "partner-led" never breaks at its hyphen */
  font-size: clamp(2rem, 0.9rem + 3.4vw, 4.375rem);
  max-width: 25ch;
  text-wrap: pretty;
}
.hm-hero .hero__text {
  /* slightly smaller than the generic hero__text so "Romanian-law" never splits at its hyphen */
  font-size: clamp(1.25rem, 1rem + 0.7vw, 1.375rem);
  max-width: 32ch;
}
.hm-hero__cta { margin-top: var(--s-2); }
@media (min-width: 56em) {
  .hm-hero .hero__grid { grid-template-columns: minmax(0, 7.5fr) minmax(0, 3.5fr); }
}
@media (max-width: 56em) {
  /* the band slash grazes the h1 on narrow screens — drop it */
  .hm-hero::after { display: none; }
}
@media (max-width: 40em) {
  .hm-hero__title { max-width: none; }
}

/* Eyebrow whose label is decorative (attribute-driven, not a text node) */
.hm-eyebrow-attr::after { content: attr(data-label); }

/* ---- Home: credentials — tighter band ----------------------------------- */
.hm-credentials { border-bottom: 1px solid var(--rule); }
.hm-credentials .lede {
  /* the lede repeats the h1 sentence: demote it so it does not compete with the hero */
  max-width: 34ch;
  font-size: clamp(1.25rem, 1rem + 0.7vw, 1.5rem);
  font-weight: 500;
  color: var(--muted);
}
@media (min-width: 56em) {
  .hm-credentials .credentials { align-items: center; }
}

/* ---- Home: pillars with CSS numerals / arrows ---------------------------- */
.hm-pillar::before {
  content: attr(data-num);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  letter-spacing: 0.08em;
  color: var(--muted);
  font-variant-numeric: lining-nums;
}
.hm-pillar::after {
  content: "\2192";
  color: var(--orange);
  font-size: var(--text-lg);
  line-height: 1;
  transition: transform 0.25s var(--ease);
}
.hm-pillar:hover::after { transform: translateX(4px); }

/* ---- Home: people band --------------------------------------------------- */
.hm-people__title { margin-top: var(--s-4); }
.hm-people__text { margin-top: var(--s-5); }
.hm-people__cta { margin-top: var(--s-6); }
/* two portraits on the home band; the full team is on people.html */
.hm-people .people-band__portraits { grid-template-columns: repeat(2, 1fr); }
.hm-portrait--a { object-position: 62% 20%; }
.hm-portrait--b { object-position: 50% 20%; }
@media (min-width: 56em) {
  .hm-people .people-band__grid { grid-template-columns: 5fr 6fr; }
}

/* ---- Home: news & contact ------------------------------------------------ */
.hm-news .section-head + .insights-featured { margin-top: 0; }
/* the featured cards carry their own navy top rules: no second hairline under the title */
.hm-news .section-head { border-bottom: 0; padding-bottom: 0; }
/* long compound words (EU-funded, White-Collar, construction-sector) rag badly when the
   line count is forced: let the browser balance the short display lines instead */
.hm-card .card__title { text-wrap: balance; }
.hm-archive .archive__title { text-wrap: pretty; }
@media (max-width: 40em) {
  /* single column: the cards need air between them, not the 3-column row gap */
  .hm-news .insights-featured { gap: var(--s-8); }
  .hm-archive .archive__item { padding-block: var(--s-4) var(--s-5); }
  /* and balancing a single narrow column leaves the measure half empty */
  .hm-card .card__title { text-wrap: pretty; }
}
/* Insights: six cards, the rest revealed by the button. The archive is
   collapsed by the script, never by the markup, so with JS off every insight
   stays in the page and the button never appears. */
.hm-news__more { display: none; margin-top: clamp(2rem, 4vw, 3rem); }
html.js .hm-news[data-collapsed] .hm-archive { display: none; }
html.js .hm-news[data-collapsed] .hm-news__more { display: flex; justify-content: center; }

.hm-contact {
  border-top: 1px solid var(--rule);
  padding-bottom: clamp(4rem, 9vw, 8rem);
}
.hm-contact__title {
  font-size: var(--text-3xl);
  line-height: 1.02;
}
.hm-contact .contact__row { grid-template-columns: 7rem 1fr; }
@media (max-width: 40em) {
  .hm-contact .contact__row { grid-template-columns: 1fr; gap: var(--s-1); }
}

/* ---- Our Firm: manifesto hero ------------------------------------------- */

/* h1 reuses the shared .eyebrow; only the on-navy colour is overridden */

/* ---- Our Firm: story ----------------------------------------------------- */
.hm-story { border-bottom: 1px solid var(--rule); }
.hm-story__grid { display: grid; gap: var(--s-5); }
.hm-story__title {
  font-size: var(--text-2xl);
  line-height: 1.05;
}
.hm-story__body {
  font-family: var(--font-prose);
  font-size: var(--text-prose);
  line-height: 1.65;
  max-width: var(--measure);
}
.hm-story__body > p + p { margin-top: 1.2em; }
.hm-story__body > p:first-child {
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 1rem + 1.2vw, 1.875rem);
  line-height: 1.35;
  font-weight: 500;
}
@media (min-width: 56em) {
  .hm-story__grid { grid-template-columns: 5fr 7fr; gap: var(--s-9); }
}

/* ---- Our Firm: approach tenets (2x2 ruled grid) ------------------------- */
.hm-approach .section-head { grid-template-columns: 1fr; }
.hm-approach__link {
  font-family: var(--font-display);
  font-size: inherit;
  font-weight: 500;
  letter-spacing: -0.005em;
  text-transform: none;
  gap: 0.5em;
  line-height: 1.02;
}
.hm-approach__link::after { font-size: 0.6em; transform: translateY(-0.15em); }
.hm-approach__link:hover { color: var(--orange-text); }
.hm-approach__link:hover::after { transform: translate(4px, -0.15em); }
.hm-tenets {
  display: grid;
  border-top: 1px solid var(--navy-800);
}
.hm-approach .section-head + .hm-tenets { border-top: 0; }
.hm-tenet {
  align-content: start;
  display: grid;
  grid-template-columns: 3rem 1fr;
  gap: var(--s-3) var(--s-4);
  padding-block: clamp(1.75rem, 4vw, 3rem);
  border-bottom: 1px solid var(--rule);
}
.hm-tenet::before {
  content: attr(data-num);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  letter-spacing: 0.08em;
  color: var(--muted);
  font-variant-numeric: lining-nums;
  padding-top: 0.55em;
}
.hm-tenet__title {
  font-size: var(--text-2xl);
  line-height: 1.05;
}
.hm-tenet__body {
  grid-column: 2;
  font-family: var(--font-prose);
  font-size: var(--text-md);
  line-height: 1.65;
  max-width: 52ch;
  color: var(--ink);
}
.hm-tenet__body > p + p { margin-top: 1em; }
@media (min-width: 56em) {
  .hm-tenets { grid-template-columns: 1fr 1fr; column-gap: var(--s-9); }
  .hm-approach .section-head + .hm-tenets .hm-tenet:nth-child(-n+2) { padding-top: var(--s-6); }
}

/* ---- Approach page: quiet head + three ruled columns -------------------- */

.hm-approach-cols {
  padding-top: clamp(3rem, 6vw, 4.5rem);
  padding-bottom: clamp(6rem, 12vw, 11rem);
}
.hm-columns {
  display: grid;
  gap: 0;
}
.hm-column {
  display: grid;
  align-content: start;
  gap: var(--s-4);
  padding-block: var(--s-6);
  border-top: 1px solid var(--navy-800);
}
.hm-column::before {
  content: attr(data-num);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  letter-spacing: 0.08em;
  color: var(--muted);
  font-variant-numeric: lining-nums;
}
.hm-column__title {
  font-size: var(--text-xl);
  line-height: 1.15;
}
.hm-column__text {
  font-family: var(--font-prose);
  font-size: var(--text-md);
  line-height: 1.65;
  color: var(--muted);
  max-width: 38ch;
}
@media (min-width: 48em) {
  .hm-columns { grid-template-columns: repeat(3, 1fr); gap: var(--s-7); }
  .hm-column { padding-right: var(--s-4); }
}
@media (max-width: 40em) {
  .hm-credentials .credential p { max-width: none; }
}

/* ==========================================================================
   Home — hover / focus micro-interactions (shared easing var(--ease); paint-only)
   ========================================================================== */
/* news cards + archive rows: the shared card behaviour (growing orange hairline, title +
   meta accent, 4px arrow nudge, focus parity) now lives in base.css §28.4; only the
   direct :hover / :focus-visible on the affordance itself is added here. */
.hm-card .card__more:hover,
.hm-card .card__more:focus-visible,
.hm-archive .archive__more:hover,
.hm-archive .archive__more:focus-visible { transform: translateX(4px); }
/* people band portraits: base.css handles grayscale→colour + scale 1.02; only keyboard parity is added here */
.hm-people .people-band__portraits a:focus-visible img { filter: grayscale(0); opacity: 1; transform: scale(1.02); }
/* approach link focus parity */
.hm-approach__link:focus-visible { color: var(--orange-text); }
.hm-approach__link:focus-visible::after { transform: translate(4px, -0.15em); }
/* Our Firm tenets: rule warms to orange */
.hm-tenet { transition: border-color 0.3s var(--ease); }
.hm-tenet:hover { border-bottom-color: var(--orange); }
.hm-column { transition: border-color 0.3s var(--ease); }
.hm-column:hover { border-top-color: var(--orange); }
.hm-pillar:focus-visible::after { transform: translateX(4px); }
@media (prefers-reduced-motion: reduce) {
  .hm-card .card__more, .hm-archive .archive__more { transition: none; }
  .hm-card .card__more:hover, .hm-card .card__more:focus-visible,
  .hm-archive .archive__more:hover, .hm-archive .archive__more:focus-visible { transform: none; }
}


/* ==== partial: 11-home-hero.css ==== */
/* Home hero — "Diagonal split" (chosen): navy/paper panels cut at the logo angle, signature slash on the seam. */
/* ==========================================================================
   Home hero — variant D "Diagonal split": the band is divided at the logo's
   52° angle. Upper-left navy carries the headline on a faint ruling; a paper
   folio slides in under the signature slash and carries the lede, the CTA and
   the three credentials as a ruled list. The seam IS the slash.
   Scoped entirely under .hm-hero--split. Loaded after site.css.
   Timeline: 0–1.0s rules + headline mask; 0.05–0.95s slash signed; 0.85–1.55s
   paper sheet slides in along the seam; 1.35–2.35s folio typesets; 2.3s glint.
   Only transform / opacity / clip-path / mask / stroke-dashoffset animate.
   ========================================================================== */
.hm-hero--split {
  --hd-fs: clamp(3rem, 1.4rem + 2.6vw, 4.4rem);
  --hd-lh: 1.06;
  --hd-pitch: calc(var(--hd-fs) * var(--hd-lh));
  --hd-first: calc(var(--hd-fs) * 1.17);
  --hd-ease: cubic-bezier(0.2, 0.6, 0.2, 1);
  --hd-pen: cubic-bezier(0.08, 0.82, 0.18, 1);
  --hd-rule: rgba(236, 237, 231, 0.045);
  --hd-margin: rgba(236, 237, 231, 0.08);
  --hd-tip: rgba(236, 237, 231, 0.34);
  --hd-indent: clamp(1rem, 2.5vw, 2.5rem);
  --hd-sx: 40%;            /* where the seam meets the bottom edge */
  --hd-seam-b: 0px;        /* seam anchor, from the bottom (JS on small screens) */
  --hd-rot: 38deg;         /* 90° − 52° */
  --hd-pad-b: clamp(3rem, 6vw, 4.5rem);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  min-height: 80vh;
  min-height: 80svh;
  padding-block: clamp(4.5rem, 9vw, 7rem) var(--hd-pad-b);
  background: linear-gradient(160deg, var(--navy-800), var(--navy-900) 85%);
  color: var(--surface);
}
.hm-hero--split::after { display: none; }

/* ---- Layout: headline top-left, folio bottom-right ----------------------- */
.hm-hero--split__inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  column-gap: var(--s-6);
}
.hm-hero--split__copy {
  position: relative;
  z-index: 4;
  padding-left: var(--hd-indent);
}
.hm-hero--split__folio {
  position: relative;
  z-index: 4;
  align-self: end;
  justify-self: end;
  width: clamp(17rem, 23vw, 22rem);
  margin-top: calc(var(--hd-pitch) * 2.6);
  color: var(--navy-800);
}

/* ---- Ledger (from B1, quieter): rules on the headline's baseline grid ---- */
.hm-hero--split__ledger {
  position: absolute;
  top: 0;
  bottom: calc(-1 * var(--hd-pad-b));
  left: var(--gutter);
  right: var(--gutter);
  z-index: 1;
  pointer-events: none;
}
.hm-hero--split__rule {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--hd-first) + var(--i) * var(--hd-pitch));
  height: 1px;
  background: var(--hd-rule);
  opacity: calc(1 - max(0, var(--i) - 4) * 0.22);
  clip-path: inset(0 100% 0 0);
  animation: hd-rule 1.05s linear forwards;
  animation-delay: calc(0.05s + var(--i) * 0.1s);
}
.hm-hero--split__rule::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, transparent calc(100% - 28px), var(--hd-tip));
  transform: translateX(-100%);
  animation: hd-tip 1.05s linear forwards;
  animation-delay: inherit;
}
@keyframes hd-rule {
  0%   { clip-path: inset(0 100% 0 0); animation-timing-function: var(--hd-pen); }
  81%  { clip-path: inset(0 0 0 0); }
  100% { clip-path: inset(0 0 0 0); }
}
@keyframes hd-tip {
  0%   { transform: translateX(-100%); opacity: 1; animation-timing-function: var(--hd-pen); }
  81%  { transform: translateX(0); opacity: 1; animation-timing-function: ease-out; }
  100% { transform: translateX(0); opacity: 0; }
}
.hm-hero--split__margin {
  position: absolute;
  top: calc(var(--hd-first) - var(--hd-pitch) * 1.5);
  bottom: 0;
  left: 0;
  width: 1px;
  background: var(--hd-margin);
  transform: scaleY(0);
  transform-origin: center top;
  animation: hd-margin 1.1s var(--hd-pen) 0s forwards;
}
@keyframes hd-margin { to { transform: scaleY(1); } }

/* ---- Paper sheet: a huge rectangle whose left edge is the seam ---------- */
.hm-hero--split__sheet {
  position: absolute;
  left: var(--hd-sx);
  bottom: var(--hd-seam-b);
  width: 500vmax;
  height: 500vmax;
  z-index: 2;
  background: var(--ivory);
  transform-origin: 0 100%;
  transform: translate(46vw, 36vw) rotate(var(--hd-rot));
  animation: hd-sheet 0.7s cubic-bezier(0.16, 0.7, 0.2, 1) 0.85s forwards;
  will-change: transform;
  pointer-events: none;
}
/* a folio hairline 14px inside the edge, and a whisper of shade under the seam */
.hm-hero--split__sheet::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 14px;
  width: 1px;
  background: var(--navy-12);
}
.hm-hero--split__sheet::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 1px;
  background: rgba(10, 35, 59, 0.35);
}
@keyframes hd-sheet { to { transform: translate(0, 0) rotate(var(--hd-rot)); } }

/* ---- Headline: mask reveal (from B1) ------------------------------------- */
.hm-hero--split__title {
  font-family: var(--font-display);
  font-size: var(--hd-fs);
  font-weight: 500;
  line-height: var(--hd-lh);
  letter-spacing: -0.012em;
  max-width: 21ch;
  color: var(--surface);
  text-wrap: pretty;
  -webkit-mask-image: linear-gradient(to bottom, #000 40%, transparent 46%);
          mask-image: linear-gradient(to bottom, #000 40%, transparent 46%);
  -webkit-mask-size: 100% 250%;
          mask-size: 100% 250%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: 0 100%;
          mask-position: 0 100%;
  animation: hd-title 1s cubic-bezier(0.3, 0.4, 0.3, 1) 0.06s forwards;
}
@keyframes hd-title { to { -webkit-mask-position: 0 0; mask-position: 0 0; } }

/* ---- Folio copy: navy ink on paper, fade + rise, staggered --------------- */
.hm-hero--split__text,
.hm-hero--split__cta,
.hm-hero--split__creds .credential {
  opacity: 0;
  transform: translateY(10px);
  animation: hd-in 0.6s var(--hd-ease) forwards;
}
.hm-hero--split__text { animation-delay: 1.35s; }
.hm-hero--split__cta  { animation-delay: 1.5s; }
.hm-hero--split__creds .credential:nth-child(1) { animation-delay: 1.62s; }
.hm-hero--split__creds .credential:nth-child(2) { animation-delay: 1.72s; }
.hm-hero--split__creds .credential:nth-child(3) { animation-delay: 1.82s; }
@keyframes hd-in { to { opacity: 1; transform: none; } }

.hm-hero--split__text {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.3rem, 1.05rem + 0.6vw, 1.55rem);
  line-height: 1.3;
  color: var(--navy-800);
  text-wrap: pretty;
}
.hm-hero--split__cta { margin-top: var(--s-5); }
.hm-hero--split .btn {
  border-color: var(--navy-800);
  color: var(--navy-800);
}
.hm-hero--split .btn:hover,
.hm-hero--split .btn:focus-visible {
  background: var(--navy-800);
  border-color: var(--navy-800);
  color: var(--surface);
}
.hm-hero--split__creds {
  margin-top: var(--s-6);
  display: grid;
}
.hm-hero--split__creds .credential {
  padding: 0.7rem 0 0.75rem;
  border-top: 1px solid var(--navy-12);
  display: grid;
  grid-template-columns: minmax(7.5rem, auto) 1fr;
  column-gap: var(--s-4);
  align-items: baseline;
}
.hm-hero--split__creds .credential:last-child { border-bottom: 1px solid var(--navy-12); }
.hm-hero--split__creds .credential h2 {
  font-family: var(--font-display);
  font-size: 1.45rem;
  font-weight: 500;
  line-height: 1;
  color: var(--navy-800);
  white-space: nowrap;
}
.hm-hero--split__creds .credential p {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  line-height: 1.35;
  color: var(--muted);
  max-width: none;
}

/* ---- Signature slash on the seam (B1's nib stroke, sized to 52°) --------- */
.hm-hero--split__slash {
  position: absolute;
  left: var(--hd-sx);
  bottom: calc(var(--hd-seam-b) - 4%);
  height: 92%;
  aspect-ratio: 1 / 1.236;
  z-index: 3;
  transform: translateX(-5.882%);
  pointer-events: none;
}
.hm-hero--split__svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  will-change: transform;
}
.hm-hero--split__sig { fill: var(--orange); }
.hm-hero--split__reveal {
  fill: none;
  stroke: #fff;
  stroke-width: 12;
  stroke-dasharray: 520;
  stroke-dashoffset: 520;
  animation: hd-sign 0.9s cubic-bezier(0.3, 0.75, 0.2, 1) 0.05s forwards;
}
@keyframes hd-sign { to { stroke-dashoffset: 0; } }
.hm-hero--split__hand {
  transform-box: fill-box;
  transform-origin: 0% 100%;
  animation: hd-settle 0.32s var(--hd-ease) 0.92s both;
}
@keyframes hd-settle {
  0% { transform: translate(0, 0); }
  40% { transform: translate(1.6px, -2.2px); }
  100% { transform: translate(0, 0); }
}
.hm-hero--split__flick {
  fill: var(--orange);
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(0);
  animation: hd-flick 0.26s cubic-bezier(0.2, 0.9, 0.3, 1.3) 0.98s forwards;
}
@keyframes hd-flick { to { transform: scale(1); } }
.hm-hero--split__glint { fill: var(--surface); opacity: 0; animation: hd-glint-o 0.9s ease-in-out 2.3s forwards; }
.hm-hero--split__band {
  fill: none;
  stroke: #fff;
  stroke-width: 12;
  stroke-dasharray: 60 600;
  stroke-dashoffset: 60;
  animation: hd-glint 0.9s cubic-bezier(0.4, 0, 0.3, 1) 2.3s forwards;
}
@keyframes hd-glint   { to { stroke-dashoffset: -540; } }
@keyframes hd-glint-o { 0% { opacity: 0; } 30% { opacity: 0.55; } 70% { opacity: 0.55; } 100% { opacity: 0; } }

/* ---- Breakpoints --------------------------------------------------------- */
@media (max-width: 70em) {
  .hm-hero--split { --hd-sx: 30%; min-height: 88vh; min-height: 88svh; }
  .hm-hero--split__folio { width: clamp(17rem, 30vw, 20rem); }
}
@media (max-width: 48em) {
  .hm-hero--split {
    --hd-fs: clamp(2rem, 1rem + 4.5vw, 2.9rem);   /* ≈2.1rem at 390px: "partner-led" never splits at the hyphen */
    --hd-sx: -3vw;
    --hd-rot: -6deg;               /* a gently sloped seam */
    --hd-seam-b: 52%;              /* refined by JS from the folio's position */
    min-height: 0;
    padding-block: clamp(3.5rem, 12vw, 5rem) 0;
  }
  .hm-hero--split__inner { grid-template-columns: 1fr; }
  .hm-hero--split__copy { padding-left: 0; }
  .hm-hero--split__title { max-width: none; }
  .hm-hero--split__folio {
    width: auto;
    justify-self: stretch;
    margin-top: clamp(4.5rem, 16vw, 6rem);
    padding-bottom: clamp(2.5rem, 8vw, 3.5rem);
  }
  .hm-hero--split__ledger { bottom: 0; }
  /* on small screens the seam is the sheet's TOP edge, tilted 6°, centred on the band */
  .hm-hero--split__sheet {
    left: -100vw;
    top: calc(100% - var(--hd-seam-b));
    bottom: auto;
    width: 300vw;
    height: 300vh;
    transform-origin: 50% 0;
    transform: translate(0, 60vh) rotate(var(--hd-rot));
  }
  .hm-hero--split__sheet::before { left: 0; right: 0; bottom: auto; top: 14px; width: auto; height: 1px; }
  .hm-hero--split__sheet::after  { left: 0; right: 0; bottom: auto; top: 0; width: auto; height: 1px; }
  .hm-hero--split__slash {
    left: var(--gutter);
    bottom: calc(var(--hd-seam-b) - 1.7rem);
    height: 4.25rem;
    transform: none;
  }
  .hm-hero--split__creds .credential { grid-template-columns: 1fr; row-gap: 0.25rem; }
}

/* ---- Reduced motion: final state, immediately ---------------------------- */
@media (prefers-reduced-motion: reduce) {
  .hm-hero--split * { animation: none !important; }
  .hm-hero--split__rule { clip-path: none; }
  .hm-hero--split__rule::after { opacity: 0; }
  .hm-hero--split__margin { transform: scaleY(1); }
  .hm-hero--split__sheet { transform: rotate(var(--hd-rot)); }
  .hm-hero--split__title { -webkit-mask-image: none; mask-image: none; }
  .hm-hero--split__text, .hm-hero--split__cta, .hm-hero--split__creds .credential { opacity: 1; transform: none; }
  .hm-hero--split__reveal { stroke-dashoffset: 0; }
  .hm-hero--split__flick { transform: scale(1); }
  .hm-hero--split__glint { display: none; }
}

/* ---- Credentials band below the hero: the cards moved into the folio ----- */
.hm-cred--split .credentials { display: block; }
.hm-cred--split .lede { font-style: italic; }

/* masked reveal clips glyphs that overflow the box: give descenders (g, p, y) room inside the masked box */
.hm-hero--split__title { padding-bottom: 0.18em; margin-bottom: -0.18em; padding-right: 0.08em; }


/* ==== partial: 12-masthead.css ==== */
/* ==========================================================================
   Inner-page masthead (.ph-c) — the photographic masthead shared by every
   inner page (profiles keep their portrait masthead; the home page its hero).
   A full-bleed photograph, desaturated and tinted navy by a directional
   overlay (solid navy on the copy side → --phc-floor at the far side, soft
   vignette at the foot so the band meets the paper page cleanly).
   Copy sits on the solid side: breadcrumb → eyebrow → h1 → lede / intro / author.
   The calligraphic orange slash is signed short on the seam — the only accent;
   below 48em the seam becomes a real sloped edge under the photograph and the
   signature is planted on it (see the mobile block).
   Entrance ≤ 1.2s: photo fade 0.9s · title mask reveal 1s · lede fade · slash 0.7s.
   Only opacity / mask / transform / stroke-dashoffset animate.
   Per-page photo, object-position (--phc-pos) and tint floor (--phc-floor)
   come from build/masthead-images.mjs as inline custom properties.
   Palette tokens only.
   ========================================================================== */
:root { --masthead-gap: clamp(2.5rem, 6vw, 4.5rem); }

.ph-c {
  --phc-fs: clamp(2.75rem, 1.5rem + 3.1vw, 4.6rem);
  --phc-ease: cubic-bezier(0.2, 0.6, 0.2, 1);
  --phc-pos: 50% 50%;              /* object-position, per page */
  --phc-solid: 38%;                /* where the solid navy ends */
  --phc-soft: 62%;                 /* where the tint reaches its floor */
  --phc-floor: 0.25;               /* tint at the far side */
  --phc-zoom: 1;                   /* optional enlargement around --phc-pos (crops a busy edge) */
  --phc-copy: 40rem;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  align-items: center;
  min-height: 48vh;
  min-height: 48svh;
  padding-block: clamp(3.5rem, 7vw, 5rem) clamp(3rem, 6vw, 4.5rem);
  background: var(--navy-800);
  color: var(--surface);
}
/* ---- Page-type modifiers ---------------------------------------------------- */
.ph-c--services, .ph-c--firm, .ph-c--people, .ph-c--insights, .ph-c--contact, .ph-c--approach, .ph-c--landing, .ph-c--article, .ph-c--hub { min-height: 50vh; min-height: 50svh; }
.ph-c--approach { --phc-copy: 46rem; }
.ph-c--article, .ph-c--hub { --phc-copy: 44rem; }
.ph-c--landing { --phc-copy: 44rem; }
.ph-c--policy { min-height: 42vh; min-height: 42svh; padding-block: clamp(3rem, 6vw, 4.5rem) clamp(2.5rem, 5vw, 3.5rem); }
.ph-c--policy .ph-c__title { max-width: none; }

/* ---- Photograph: grayscale + navy multiply, then the directional gradient - */
.ph-c__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;                /* a zoomed photo never spills past its box */
  opacity: 0;
  animation: phc-fade 0.9s ease-out 0s forwards;
}
.ph-c__media picture, .ph-c__media img {
  display: block;
  width: 100%;
  height: 100%;
}
.ph-c__media img {
  object-fit: cover;
  object-position: var(--phc-pos);
  transform: scale(var(--phc-zoom));
  transform-origin: var(--phc-pos);
  filter: grayscale(0.8) contrast(1.02);
}
.ph-c__media::before {           /* navy tint (multiply) */
  content: "";
  position: absolute;
  inset: 0;
  background: var(--navy-700);
  mix-blend-mode: multiply;
  opacity: 0.55;
}
.ph-c__media::after {            /* solid → floor sweep, plus the foot vignette */
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, var(--navy-800) 0, rgba(10, 35, 59, 0) 32%),
    linear-gradient(to right,
      var(--navy-800) 0, var(--navy-800) var(--phc-solid),
      rgba(10, 35, 59, 0.78) calc(var(--phc-solid) + 12%),
      rgba(10, 35, 59, var(--phc-floor)) var(--phc-soft), rgba(10, 35, 59, var(--phc-floor)) 100%);
}
@keyframes phc-fade { to { opacity: 1; } }

/* ---- Constellation masthead (contact) --------------------------------------
   The illustration already carries the navy field, its own falloff and the lit
   nodes, so the duotone stack is switched off; only a left pad for the copy and
   the foot vignette that meets the paper page below are kept. */
.ph-c--net .ph-c__media img { filter: none; }
.ph-c--net .ph-c__media::before { display: none; }
/* Toned to the illustration's own ground, not to --navy-800: the generated
   field is sunk deeper than the site's navy, and a pad in the lighter tone
   leaves a visible vertical seam down the middle of the band. */
.ph-c--net .ph-c__media::after {
  background:
    /* the band leaves the header at exactly the header's tone, then dissolves:
       without this the illustration butts into the menu with a hard line */
    linear-gradient(to bottom, rgb(7, 26, 45) 0, rgba(7, 26, 45, 0.65) 12%, rgba(7, 26, 45, 0) 34%),
    linear-gradient(to top, rgb(8, 24, 40) 0, rgba(8, 24, 40, 0) 22%),
    linear-gradient(to right, rgb(8, 24, 40) 0, rgba(8, 24, 40, 0.55) 18%, rgba(8, 24, 40, 0) 44%);
}

/* ---- Copy ------------------------------------------------------------------ */
.ph-c__inner { position: relative; z-index: 2; }
.ph-c__copy {
  position: relative;
  max-width: var(--phc-copy);
  display: grid;
  grid-template-columns: minmax(0, 1fr);   /* a nowrap breadcrumb must never widen the column */
  gap: var(--s-4);
}
.ph-c__copy > * { min-width: 0; }
.ph-c .breadcrumb ol { color: rgba(236, 237, 231, 0.62); }
.ph-c .breadcrumb a { color: rgba(236, 237, 231, 0.62); }
.ph-c .breadcrumb a:hover, .ph-c .breadcrumb a:focus-visible { color: var(--surface); }
.ph-c .breadcrumb [aria-current="page"] { color: rgba(236, 237, 231, 0.9); }
.ph-c .eyebrow { color: rgba(236, 237, 231, 0.72); align-items: flex-start; }
.ph-c .eyebrow::before { margin-top: 0.2em; }   /* a wrapping kicker keeps its slash on the first line */
.ph-c .breadcrumb + .eyebrow, .ph-c .breadcrumb + .ph-c__title { margin-top: var(--s-5); }

.ph-c__title {
  font-family: var(--font-display);
  font-size: var(--phc-fs);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -0.012em;
  color: var(--surface);
  max-width: 16ch;
  text-wrap: pretty;
  -webkit-mask-image: linear-gradient(to bottom, #000 40%, transparent 46%);
          mask-image: linear-gradient(to bottom, #000 40%, transparent 46%);
  -webkit-mask-size: 100% 250%;
          mask-size: 100% 250%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: 0 100%;
          mask-position: 0 100%;
  animation: phc-title 1s cubic-bezier(0.3, 0.4, 0.3, 1) 0.1s forwards;
}
/* Longer titles (articles, landing pages): smaller size, wider measure */
.ph-c__title--mid { --phc-fs: clamp(2.4rem, 1.3rem + 2.6vw, 3.9rem); max-width: 20ch; }
.ph-c__title--long { --phc-fs: clamp(2.05rem, 1.2rem + 2vw, 3.2rem); line-height: 1.08; max-width: 26ch; }
@keyframes phc-title { to { -webkit-mask-position: 0 0; mask-position: 0 0; } }

.ph-c__lede, .ph-c__meta {
  margin: 0;
  opacity: 0;
  transform: translateY(8px);
  animation: phc-in 0.6s var(--phc-ease) 0.55s forwards;
}
.ph-c__meta { animation-delay: 0.7s; }
.ph-c__lede {
  margin-top: var(--s-2);
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.25rem, 1rem + 0.6vw, 1.55rem);
  line-height: 1.38;
  color: rgba(236, 237, 231, 0.84);
  max-width: 34rem;
  text-wrap: pretty;
}
.ph-c__lede--long { font-size: clamp(1.15rem, 1rem + 0.4vw, 1.35rem); max-width: 38rem; }
.ph-c__lede--quote {                /* the firm statement */
  font-style: normal;
  font-weight: 600;
  font-size: clamp(1.75rem, 1.1rem + 1.8vw, 2.75rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--surface);
  max-width: 18ch;
  text-wrap: balance;
}
.ph-c__lede--prose {                /* landing intro: prose, not display */
  font-family: var(--font-prose);
  font-style: normal;
  font-weight: 400;
  font-size: var(--text-md);
  line-height: 1.6;
  max-width: 36rem;
}
.ph-c__lede--prose p { margin: 0; }
.ph-c__lede--prose p + p { margin-top: 1em; }
.ph-c__lede--prose a { color: inherit; text-decoration: underline; text-decoration-color: rgba(236, 237, 231, 0.4); text-underline-offset: 0.18em; }
.ph-c__lede--prose a:hover, .ph-c__lede--prose a:focus-visible { text-decoration-color: var(--orange); }
.ph-c__meta {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: rgba(236, 237, 231, 0.7);
}
.ph-c__meta strong { font-weight: 600; color: var(--surface); }
.ph-c__meta a { color: inherit; text-decoration: underline; text-decoration-color: rgba(236, 237, 231, 0.4); text-underline-offset: 0.18em; }
.ph-c__meta a:hover, .ph-c__meta a:focus-visible { text-decoration-color: var(--orange); }
@keyframes phc-in { to { opacity: 1; transform: none; } }

/* ---- Signature slash: short, signed at the copy's foot on the seam -------- */
.ph-c__slash {
  position: absolute;
  z-index: 3;
  right: calc(-1 * clamp(2rem, 3.5vw, 3.5rem));
  bottom: -0.6rem;
  height: 7rem;
  aspect-ratio: 1 / 1.236;
  pointer-events: none;
}
.ph-c__svg { display: block; width: 100%; height: 100%; overflow: visible; }
.ph-c__sig { fill: var(--orange); }
.ph-c__reveal {
  fill: none;
  stroke: #fff;
  stroke-width: 12;
  stroke-dasharray: 520;
  stroke-dashoffset: 520;
  animation: phc-sign 0.7s cubic-bezier(0.3, 0.75, 0.2, 1) 0.25s forwards;
}
@keyframes phc-sign { to { stroke-dashoffset: 0; } }
.ph-c__flick {
  fill: var(--orange);
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(0);
  animation: phc-flick 0.26s cubic-bezier(0.2, 0.9, 0.3, 1.3) 0.95s forwards;
}
@keyframes phc-flick { to { transform: scale(1); } }

/* ---- Page glue: what follows the masthead starts one --masthead-gap below -- */
.ph-c + .sv-note,
.ph-c + .ar-article,
.ph-c + .in-hub,
.ph-c + .pp-roster { padding-top: var(--masthead-gap); }
.ph-c + .ar-policy,
.ph-c + .ct-body,
.ph-c + .hm-approach-cols { padding-top: var(--masthead-gap); }
.ph-c + .sv-layout { padding-top: var(--masthead-gap); }
.ph-c + .in-series { border-top: 1px solid var(--paper-16); }   /* navy meets navy: a hairline, no paper strip */
.ph-c + .hm-story { padding-top: clamp(3.5rem, 7vw, 6rem); }
/* article: the old in-container head rule is gone; the body column starts clean */
.ph-c + .ar-article .ar-body,
.ph-c + .in-hub .in-hub__layout { padding-top: 0; }

/* ---- Mobile: photo band on top, a sloped seam, copy on navy below ---------
   The band's foot is cut by the brand slope (rising left → right, like "/"),
   the 2px orange hairline rides exactly on that cut and dissolves as it leaves
   the frame, and the calligraphic signature is planted at the gutter with its
   foot across the seam — the same figure the home hero draws at this width,
   so the mark reads as a signature on an edge instead of a tick on the halo.
   --------------------------------------------------------------------------- */
@media (max-width: 48em) {
  .ph-c {
    --phc-fs: clamp(2.1rem, 1.2rem + 4.6vw, 2.9rem);
    --phc-band: min(68vw, 21rem);          /* photograph height (its width is the viewport) */
    --phc-rot: -5deg;                      /* the seam's slope: up towards the right */
    --phc-lift: 1.35rem;                   /* the seam sits this far inside the photo at centre */
    --phc-pad-top: clamp(2rem, 7vw, 3.25rem);
    display: block;
    min-height: 0;
    padding-block: 0 clamp(2.5rem, 8vw, 3.5rem);
  }
  .ph-c__title--mid { --phc-fs: clamp(1.9rem, 1.1rem + 4vw, 2.6rem); }
  .ph-c__title--long { --phc-fs: clamp(1.7rem, 1rem + 3.6vw, 2.3rem); }
  .ph-c--policy { min-height: 0; }
  .ph-c--policy, .ph-c--article, .ph-c--hub { --phc-band: min(56vw, 17.5rem); }
  .ph-c__media {
    position: relative;
    inset: auto;
    height: var(--phc-band);
  }
  .ph-c__media img { transform: scale(min(var(--phc-zoom), 1.25)); }   /* the small frame needs far less crop */
  .ph-c__media::after {           /* no fade-out at the foot: the seam does that work now */
    background:
      linear-gradient(to top, rgba(10, 35, 59, 0.6) 0, rgba(10, 35, 59, 0.34) 24%, rgba(10, 35, 59, 0.2) 58%, rgba(10, 35, 59, 0.32) 100%);
  }
  /* the seam: a navy sheet whose top edge is the brand slope, carrying the hairline */
  .ph-c::before {
    content: "";
    position: absolute;
    z-index: 1;
    left: -5vw;
    width: 110vw;
    top: calc(var(--phc-band) - var(--phc-lift));
    height: 60vh;
    background:
      linear-gradient(to right, rgba(242, 133, 13, 0) 0, var(--orange) 4.5%, var(--orange) 66%, rgba(242, 133, 13, 0) 95%) top left / 100% 2px no-repeat,
      var(--navy-800);
    transform-origin: 50% 0;
    transform: rotate(var(--phc-rot));
    opacity: 0;
    animation: phc-fade 0.9s ease-out 0.15s forwards;
  }
  .ph-c__inner { padding-top: var(--phc-pad-top); }
  /* rhythm: kicker and title are one pair; the lede and the by-line each get air */
  .ph-c__copy { max-width: none; gap: var(--s-2); }
  .ph-c__title, .ph-c__title--mid, .ph-c__title--long { max-width: none; }
  .ph-c__lede--quote { max-width: none; }
  .ph-c__lede { margin-top: var(--s-4); }
  .ph-c__meta { margin-top: var(--s-4); }
  /* signature: at the left gutter, its foot planted across the seam (as the home hero signs) */
  .ph-c__slash {
    --phc-sig: clamp(4.25rem, 12vw, 5.25rem);
    --phc-seam-l: calc(var(--phc-lift) - (50vw - var(--gutter)) * 0.0875);   /* the seam's height above the band foot, at the gutter */
    left: 0;
    right: auto;
    bottom: auto;
    top: calc(1.6rem - var(--phc-pad-top) - var(--phc-seam-l) - var(--phc-sig));
    height: var(--phc-sig);
  }
  .ph-c .breadcrumb + .eyebrow, .ph-c .breadcrumb + .ph-c__title { margin-top: var(--s-4); }
  .ph-c .breadcrumb ol { flex-wrap: nowrap; overflow: hidden; }
  .ph-c .breadcrumb li { white-space: nowrap; }
  .ph-c .breadcrumb [aria-current="page"] { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
}

/* ---- Reduced motion: final state, immediately ------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .ph-c * { animation: none !important; }
  .ph-c__media { opacity: 1; }
  .ph-c__title { -webkit-mask-image: none; mask-image: none; }
  .ph-c__lede, .ph-c__meta { opacity: 1; transform: none; }
  .ph-c__reveal { stroke-dashoffset: 0; }
  .ph-c__flick { transform: scale(1); }
  .ph-c::before { animation: none; opacity: 1; }
}

/* ---- Print: plain heading on paper ---------------------------------------- */
@media print {
  .ph-c { background: #fff !important; color: #000 !important; min-height: 0; }
  .ph-c__media, .ph-c__slash { display: none; }
  .ph-c::before { display: none; }
  .ph-c__title, .ph-c__lede, .ph-c__meta, .ph-c .eyebrow, .ph-c .breadcrumb ol, .ph-c .breadcrumb a { color: #000 !important; opacity: 1; }
}

/* wider solid zone where the copy runs long into the photo (reviewer: approach / people / contact) */
.ph-c--approach, .ph-c--people, .ph-c--contact { --phc-solid: 44%; }

/* mobile: let the current crumb wrap instead of truncating (reviewer item 4) */
@media (max-width: 48em) {
  .ph-c .breadcrumb ol { flex-wrap: wrap; }
  .ph-c .breadcrumb [aria-current="page"] { max-width: none; white-space: normal; overflow: visible; text-overflow: clip; }
}

/* masked reveal clips glyphs that overflow the box: give descenders (g, p, y) room inside the masked box */
.ph-c__title { padding-bottom: 0.18em; margin-bottom: -0.18em; padding-right: 0.08em; }


/* ==== partial: 20-people.css ==== */
/* ==========================================================================
   People family (.pp-) — people.html + 4 profile pages
   ========================================================================== */

/* ---------- Profile masthead: navy band, copy left, portrait bleeding right ---------- */
.pp-mast {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  overflow: hidden;
}
.pp-mast__copy {
  display: grid;
  align-content: center;
  gap: 0;
  padding-block: clamp(2.5rem, 6vw, 5rem);
  padding-inline: var(--gutter);
}
.pp-mast__crumb ol { color: rgba(236, 237, 231, 0.7); }
.pp-mast__crumb a:hover { color: var(--orange); }
.pp-mast__crumb [aria-current="page"] { color: var(--surface); }
.pp-mast__name {
  margin-top: clamp(1.5rem, 4vw, 3rem);
  font-size: var(--text-hero);
  line-height: 0.98;
  letter-spacing: -0.012em;
  max-width: 12ch;
}
.pp-mast__role {
  margin-top: var(--s-4);
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1rem + 0.8vw, 1.5rem);
  font-style: italic;
  line-height: 1.3;
  color: rgba(236, 237, 231, 0.78);
}
.pp-mast__contacts {
  display: grid;
  gap: var(--s-2);
  margin-top: clamp(1.75rem, 4vw, 2.75rem);
  padding-top: var(--s-5);
  border-top: 1px solid var(--paper-16);
  font-size: var(--text-md);
}
.pp-mast__line { width: max-content; max-width: 100%; }
.pp-mast__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-top: var(--s-4);
}
.pp-mast__btn {
  min-height: 2.75rem;
  padding: 0.6rem 1.35rem;
  font-size: var(--text-xs);
  border-color: rgba(242, 133, 13, 0.75);
}
.pp-mast__portrait {
  position: relative;
  width: 100%;
  min-width: 0;
}
.pp-mast__portrait img {
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: 50% 22%;
}
/* per-person framing */
[data-portrait="alexandru-ambrozie"] img { object-position: 62% 18%; }
[data-portrait="ana-stoenescu"] img { object-position: 50% 18%; }
[data-portrait="razvan-ambrozie"] img { object-position: 50% 18%; }
[data-portrait="ana-maria-ionita"] img { object-position: 50% 12%; }

@media (max-width: 680px) {
  .pp-mast__portrait img { aspect-ratio: 4 / 5; }
}
@media (min-width: 56em) {
  .pp-mast {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    min-height: clamp(30rem, 44vw, 40rem);
  }
  .pp-mast__copy {
    padding-left: max(var(--gutter), calc((100% - var(--container) + 2 * var(--gutter)) / 2 + var(--gutter)));
    padding-right: clamp(2rem, 5vw, 5rem);
  }
  .pp-mast__portrait { height: 100%; }
  .pp-mast__portrait img { aspect-ratio: auto; height: 100%; position: absolute; inset: 0; }
  .pp-mast__portrait::after {
    /* soft navy fade on the seam so the photo sits in the band */
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, var(--navy-800), rgba(10, 35, 59, 0) 18%);
    pointer-events: none;
  }
}
/* Adjust copy padding-left maths: container is 82rem; (100% - 82rem)/2 gives the container edge */
@media (min-width: 56em) {
  .pp-mast__copy { padding-left: max(var(--gutter), calc((100vw - var(--container)) / 2 + var(--gutter))); }
}

/* ---------- Profile body ---------- */
.pp-body { padding-top: clamp(3rem, 7vw, 5.5rem); }
.pp-aside { gap: clamp(2.5rem, 5vw, 3.5rem); }
.pp-list li { font-size: var(--text-md); font-family: var(--font-prose); padding-block: var(--s-3); }
.pp-list a { color: var(--ink); text-decoration: none; }
.pp-list a { transition: color 0.22s var(--ease), transform 0.22s var(--ease), text-decoration-color 0.22s var(--ease); text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 0.25em; text-decoration-thickness: 1px; }
.pp-list a:hover, .pp-list a:focus-visible { transform: translateX(4px); text-decoration-color: var(--orange); text-underline-offset: 0.25em; text-decoration-thickness: 1px; }

.pp-recognition { display: grid; gap: var(--s-5); }
.pp-quote {
  position: relative;
  margin: 0;
  padding-left: var(--s-5);
}
.pp-quote::before {
  /* shared diagonal slash marker (same as .quote::before) */
  content: "";
  position: absolute;
  left: 0;
  top: 0.35em;
  width: 1px;
  height: 1.6em;
  background: var(--orange);
  transform: rotate(var(--slash-angle));
  transform-origin: top;
}
.pp-quote blockquote {
  font-size: var(--text-lg);
  font-style: italic;
  font-weight: 500;
  line-height: 1.35;
}
.pp-quote figcaption {
  margin-top: var(--s-2);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.pp-quote figcaption a { border-bottom: 1px solid transparent; }
.pp-quote figcaption a:hover { color: var(--orange-text); border-bottom-color: var(--orange); }

.pp-bio { font-family: var(--font-prose); font-size: var(--text-prose); line-height: 1.65; }
.pp-bio > p + p { margin-top: 1.25em; }
.pp-bio > p:first-child {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.1rem + 1.2vw, 1.875rem);
  line-height: 1.32;
  font-weight: 500;
  margin-bottom: 1.4em;
}

/* Representative experience — numbered via CSS counter */
.pp-experience { margin-top: clamp(3.5rem, 7vw, 5.5rem); }
.pp-experience .section-head { margin-bottom: 0; border-bottom-color: var(--navy-800); }
.pp-experience__list {
  list-style: none;
  counter-reset: pp-exp;
}
.pp-experience__item {
  counter-increment: pp-exp;
  display: grid;
  grid-template-columns: 3rem 1fr;
  gap: var(--s-2) var(--s-4);
  padding-block: var(--s-5);
  border-bottom: 1px solid var(--rule);
}
.pp-experience__item::before {
  content: counter(pp-exp, decimal-leading-zero);
  grid-row: 1 / span 2;
  padding-top: 0.35rem;
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--muted);
  font-variant-numeric: lining-nums;
}
.pp-experience__item h3 {
  font-size: var(--text-xl);
  line-height: 1.15;
  max-width: 36ch;
}
.pp-experience__item p {
  grid-column: 2;
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--muted);
  max-width: 62ch;
}
.pp-experience__note {
  margin-top: var(--s-5);
  font-family: var(--font-prose);
  font-style: italic;
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--muted);
  max-width: 70ch;
}

/* ---------- People page ---------- */

.pp-roster { padding-bottom: clamp(3.5rem, 8vw, 7rem); }
.pp-member {
  display: grid;
  gap: var(--s-6);
  padding-block: clamp(2.5rem, 6vw, 4.5rem);
  border-top: 1px solid var(--navy-800);
}
.pp-member > * { min-width: 0; }
.pp-member__portrait { display: block; overflow: hidden; }
.pp-member__portrait img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  transition: transform var(--motion-slow, 0.42s) var(--ease);
}
.pp-member__portrait:hover img,
.pp-member__portrait:focus-visible img { transform: scale(1.02); }
.pp-member__copy {
  display: grid;
  align-content: center;
  gap: 0;
}
.pp-member__name {
  font-size: clamp(2.125rem, 1.5rem + 2vw, 3.25rem);
  line-height: 1.02;
  letter-spacing: -0.01em;
}
.pp-member__name a { transition: color 0.2s var(--ease); }
.pp-member__name a:hover { color: var(--orange-text); }
.pp-member__role {
  margin-top: var(--s-3);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-style: italic;
  line-height: 1.3;
  color: var(--muted);
}
.pp-member__intro {
  margin-top: clamp(1.25rem, 3vw, 2rem);
  padding-top: var(--s-5);
  border-top: 1px solid var(--rule);
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1rem + 0.8vw, 1.5rem);
  font-weight: 500;
  line-height: 1.38;
  max-width: 34ch;
  text-wrap: pretty;
}
.pp-member__body {
  margin-top: var(--s-4);
  font-family: var(--font-prose);
  font-size: var(--text-md);
  line-height: 1.65;
  max-width: 58ch;
}
.pp-member__body > p + p { margin-top: 1em; }
.pp-member__contact {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-4);
  margin-top: clamp(1.25rem, 3vw, 2rem);
  font-size: var(--text-sm);
}
.pp-member__linkedin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--rule);
  color: var(--ink);
  transition: border-color 0.2s var(--ease), color 0.2s var(--ease);
}
.pp-member__linkedin:hover { border-color: var(--orange); color: var(--orange-text); }
.pp-member__cta { margin-top: var(--s-5); justify-self: start; }

@media (min-width: 56em) {
  .pp-member {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(3rem, 6vw, 6rem);
    align-items: center;
  }
  .pp-member--alt .pp-member__portrait,
  .pp-member--copy-first .pp-member__portrait { order: 2; }
}

/* Pull quote (Legal 500) */
.pp-pull { padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.pp-pull__figure {
  margin: 0;
  max-width: 44ch;
  margin-inline: auto;
  text-align: center;
}
.pp-pull__text {
  font-size: clamp(1.5rem, 1rem + 1.6vw, 2.25rem);
  font-style: italic;
  font-weight: 500;
  line-height: 1.3;
}
.pp-pull__source {
  display: inline-flex;
  align-items: center;
  gap: 0.75em;
  margin-top: var(--s-4);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}
.pp-pull__source::before {
  content: "";
  display: inline-block;
  width: 2px;
  height: 0.95em;
  background: var(--orange);
  transform: rotate(var(--slash-angle));
}

/* Network statement */
.pp-network {
  padding-block: clamp(3rem, 7vw, 5.5rem);
  margin-block: clamp(1.5rem, 4vw, 3rem);
  background: transparent;
  border-top: 1px solid var(--navy-12);
  border-bottom: 1px solid var(--navy-12);
  color: var(--ink);
}
.pp-network .container { display: grid; justify-items: start; }
.pp-network__text::before {
  content: "";
  display: block;
  width: 2.75rem;
  height: 2px;
  margin-bottom: var(--s-5);
  background: var(--orange);
}
.pp-network__text {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  line-height: 1.4;
  max-width: 60ch;
  color: var(--navy-800);
  text-wrap: pretty;
}

/* Long opening paragraphs (Ana-Maria) keep the lede treatment at a slightly smaller size */
.pp-bio--long > p:first-child { font-size: clamp(1.375rem, 1.05rem + 0.9vw, 1.625rem); line-height: 1.36; }

/* Mobile: bio before the aside; portrait first in the masthead */
@media (max-width: 55.99em) {
  .pp-aside { order: 2; }
  .pp-mast__portrait { order: -1; }
}
@media (min-width: 56em) {
  .pp-member--alt, .pp-member--copy-first { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
}

/* Mobile: stack the experience numeral above the heading so compound words are not split */
@media (max-width: 40em) {
  .pp-experience__item { grid-template-columns: minmax(0, 1fr); gap: var(--s-2); }
  .pp-experience__item::before { grid-row: auto; padding-top: 0; }
  .pp-experience__item h3 { font-size: clamp(1.35rem, 1.1rem + 1.2vw, 1.5rem); }
  .pp-experience__item p { grid-column: 1; }
}

/* Portrait headroom for Ana Stoenescu below wide desktop */
@media (max-width: 72em) {
  [data-portrait="ana-stoenescu"] img { object-position: 50% 10%; }
}

/* Band edge already separates the network statement from the next roster row */
.pp-network + .container > .pp-member { border-top: 0; }

/* ==========================================================================
   People — hover / focus micro-interactions (shared easing var(--ease); paint-only)
   ========================================================================== */
.pp-member__name a:focus-visible { color: var(--orange-text); }
/* email + LinkedIn: icon turns orange, frame warms */
.pp-member__linkedin svg { transition: color 0.22s var(--ease), transform 0.26s var(--ease); }
.pp-member__linkedin:hover,
.pp-member__linkedin:focus-visible { border-color: var(--orange); color: var(--orange); }
/* "View full profile →": the label carries its own arrow, so the whole link nudges */
.pp-member__cta { transition: transform 0.26s var(--ease), color 0.22s var(--ease); }
.pp-member__cta:hover,
.pp-member__cta:focus-visible { transform: translateX(4px); color: var(--orange-text); }
/* masthead: contact lines + buttons */
.pp-mast__line { transition: color 0.22s var(--ease), text-decoration-color 0.22s var(--ease); }
.pp-mast__crumb a { transition: color 0.22s var(--ease); }
.pp-mast__crumb a:focus-visible { color: var(--orange); }
/* aside news links: base .list-links slides 4px on hover — keyboard parity only */
.pp-aside .list-links a:focus-visible { transform: translateX(4px); color: var(--orange-text); }
.pp-quote figcaption a { transition: color 0.22s var(--ease), border-color 0.22s var(--ease); }
.pp-quote figcaption a:focus-visible { color: var(--orange-text); border-bottom-color: var(--orange); }
.pp-quote::before { transition: transform 0.3s var(--ease); }
/* experience rows: hairline warms */
.pp-experience__item { transition: border-color 0.3s var(--ease); }
.pp-experience__item:hover { border-bottom-color: var(--orange); }
@media (prefers-reduced-motion: reduce) {
  .pp-member__portrait img, .pp-list a, .pp-member__cta { transition: none; }
  .pp-member__portrait:hover img, .pp-list a:hover, .pp-member__cta:hover, .pp-aside .list-links a:focus-visible { transform: none; }
}


/* ==== partial: 30-services.css ==== */
/* ==========================================================================
   30 — Services family (.sv-): Core Expertise + the six Romania practice notes
   ========================================================================== */

/* ---------- Core Expertise hero (navy band) ---------- */

/* ---------- Two-column layout ---------- */
.sv-layout {
  display: grid;
  gap: var(--s-7);
  padding-top: clamp(2rem, 5vw, 4rem);
  padding-bottom: clamp(3.5rem, 8vw, 7rem);
}
.sv-layout > * { min-width: 0; }
@media (min-width: 64em) {
  .sv-layout {
    grid-template-columns: 19rem minmax(0, 1fr);
    gap: clamp(3rem, 7vw, 7rem);
  }
  .sv-index {
    position: sticky;
    top: calc(var(--header-h) + 1.5rem);
    align-self: start;
    /* no internal scroll: one group open at a time; if it still overflows, services.js slides the index so the active link stays visible */
    transition: transform 0.35s var(--ease);
    will-change: transform;
  }
}

/* ---------- Practice index ---------- */
.sv-index__nav { border-top: 1px solid var(--navy-800); }
.sv-group { border-bottom: 1px solid var(--rule); }
.sv-group__toggle {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr) auto;
  align-items: baseline;
  gap: var(--s-3);
  width: 100%;
  padding: var(--s-4) 0;
  border: 0;
  background: none;
  font: inherit;
  text-align: left;
  color: var(--ink);
  cursor: default;
}
.sv-group__toggle::before {
  content: attr(data-num);
  content: counter(sv-group, decimal-leading-zero);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  letter-spacing: 0.08em;
  color: var(--muted);
  font-variant-numeric: lining-nums;
}
.sv-index__nav { counter-reset: sv-group; }
.sv-group { counter-increment: sv-group; }
.sv-group__label {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 500;
  line-height: 1.2;
  text-wrap: pretty;
}
.sv-toggle {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  margin-block: -0.5rem;
  margin-right: -0.5rem;
  font-family: var(--font-display);
  font-size: var(--text-xl);
  line-height: 1;
  color: var(--orange);
  align-self: center;
  transition: transform 0.26s var(--ease), color 0.22s var(--ease);
}
.sv-index--js .sv-group__toggle:hover .sv-toggle,
.sv-index--js .sv-group__toggle:focus-visible .sv-toggle { color: var(--orange-text); }
.sv-group__toggle[aria-expanded="true"] .sv-toggle { transform: rotate(45deg); }
.sv-group__list {
  list-style: none;
  display: grid;
  padding: 0 0 var(--s-4) 2.25rem;
  margin-left: var(--s-3);
}
.sv-group__list a {
  position: relative;
  display: block;
  padding: 0.5rem 0 0.5rem 1.1em;
  font-size: var(--text-sm);
  line-height: 1.4;
  color: var(--muted);
  border-left: 1px solid transparent;
  transition: color 0.22s var(--ease), transform 0.26s var(--ease);
}
.sv-group__list a:hover,
.sv-group__list a:focus-visible { color: var(--orange-text); transform: translateX(4px); }
.sv-group__list a[aria-current="true"] { color: var(--ink); font-weight: 600; }
.sv-group__list a[aria-current="true"]::before {
  content: "";
  position: absolute;
  left: 0.2em;
  top: calc(0.5rem + 0.3em);
  width: 1px;
  height: 0.8em;
  background: var(--orange);
  transform: rotate(var(--slash-angle));
}

/* JS-enhanced state (only when the script has run) */
.sv-index--js .sv-group__toggle { cursor: pointer; }
.sv-index--js .sv-group__toggle:hover .sv-group__label { color: var(--orange-text); }
.sv-index--js .sv-group__toggle[aria-expanded="false"] + .sv-group__list { display: none; }

/* ---------- Content column ---------- */
.sv-opening {
  font-family: var(--font-prose);
  font-size: var(--text-prose);
  line-height: 1.68;
  padding-bottom: clamp(2.5rem, 6vw, 4rem);
  border-bottom: 1px solid var(--navy-800);
}
.sv-opening > p { max-width: var(--measure); }
.sv-opening > p + p { margin-top: 1.25em; }
.sv-opening > p:first-child {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.1rem + 1.3vw, 2rem);
  line-height: 1.32;
  font-weight: 500;
}
.sv-opening a, .sv-panel a { text-decoration: underline; text-decoration-color: var(--orange); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.sv-opening a:hover, .sv-panel a:hover { color: var(--orange-text); }

.sv-panel {
  padding-top: clamp(3rem, 7vw, 5.5rem);
}
.sv-panel + .sv-panel {
  margin-top: clamp(3rem, 7vw, 5.5rem);
  border-top: 1px solid var(--navy-800);
}
.sv-panel__head {
  display: grid;
  gap: var(--s-5);
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.sv-panel__title {
  position: relative;
  padding-top: var(--s-4);
  font-size: var(--text-3xl);
  line-height: 1.02;
  letter-spacing: -0.01em;
  max-width: 18ch;
}
@media (min-width: 56em) { .sv-panel__title { max-width: 26ch; } }
.sv-panel__title::before {
  content: attr(data-num);
  content: "";
}
.sv-panel[data-num]::before {
  content: attr(data-num);
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-sm);
  letter-spacing: 0.12em;
  color: var(--muted);
  font-variant-numeric: lining-nums;
}
.sv-panel__intro,
.sv-panel__outro > p,
.sv-sub__body {
  font-family: var(--font-prose);
  font-size: var(--text-prose);
  line-height: 1.66;
  max-width: var(--measure);
}
.sv-panel__intro > p + p, .sv-panel__outro > p + p, .sv-sub__body > p + p { margin-top: 1.1em; }
.sv-panel__intro > p:first-child {
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 1rem + 1.1vw, 1.75rem);
  line-height: 1.35;
  font-weight: 500;
}

/* sub-categories: hairline-separated, heading in a margin column on wide screens */
.sv-sub {
  display: grid;
  gap: var(--s-3) var(--s-7);
  padding-block: clamp(1.75rem, 3.5vw, 2.5rem);
  border-top: 1px solid var(--rule);
}
.sv-sub__title {
  font-size: var(--text-lg);
  line-height: 1.2;
  text-wrap: pretty;
}
@media (min-width: 48em) {
  .sv-sub { grid-template-columns: 15rem minmax(0, 1fr); gap: var(--s-3) var(--s-6); }
  .sv-sub__title { position: sticky; top: calc(var(--header-h) + 1.5rem); }
}
.sv-panel__outro {
  margin-top: var(--s-5);
  padding-top: var(--s-5);
  border-top: 1px solid var(--rule);
}
.sv-panel__outro > p { color: var(--navy-700); font-style: italic; }

/* Points: quiet list with an orange hairline slash marker (CSS, never text) */
.sv-points,
.sv-note__body ul {
  list-style: none;
  display: grid;
  gap: var(--s-2);
  margin-top: var(--s-4);
  font-family: var(--font-sans);
  font-size: var(--text-md);
  line-height: 1.55;
  color: var(--navy-700);
}
.sv-points li,
.sv-note__body ul li {
  position: relative;
  padding-left: 1.5rem;
}
.sv-points li::before,
.sv-note__body ul li::before {
  content: "";
  position: absolute;
  left: 0.35rem;
  top: 0.45em;
  width: 1px;
  height: 0.85em;
  background: var(--orange);
  transform: rotate(var(--slash-angle));
}

/* ---------- News & Insights (ruled list) ---------- */
.sv-insights {
  background: transparent;
  border-top: 1px solid var(--navy-800);
}
.sv-insights__grid { display: grid; gap: var(--s-6); }
.sv-insights__title { font-size: var(--text-3xl); line-height: 1.02; }
.sv-insights__intro {
  margin-top: var(--s-4);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-style: italic;
  color: var(--muted);
}
.sv-insights__list {
  list-style: none;
  border-top: 1px solid var(--navy-800);
}
.sv-insight {
  position: relative;
  display: grid;
  gap: var(--s-2) var(--s-6);
  padding-block: var(--s-4);
  border-bottom: 1px solid var(--rule);
}
/* same growing hairline as the card family */
.sv-insight::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100%;
  height: 1px;
  background: var(--orange);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--motion-base) var(--ease);
  pointer-events: none;
}
.sv-insight:hover::after, .sv-insight:focus-within::after { transform: scaleX(1); }
.sv-insight__meta {
  display: flex;
  align-items: baseline;
  gap: 0.7em;
  font-size: var(--text-xs);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--muted);
  line-height: 1.5;
  padding-top: 0.3rem;
  font-variant-numeric: lining-nums;
  transition: color var(--motion-base) var(--ease);
}
/* brand slash marker, matching .card__meta / .archive__meta */
.sv-insight__meta::before {
  content: "";
  flex: none;
  width: 1px;
  height: 0.95em;
  background: var(--orange);
  transform: rotate(var(--slash-angle));
  transform-origin: center;
}
.sv-insight:hover .sv-insight__meta, .sv-insight:focus-within .sv-insight__meta { color: var(--orange-text); }
.sv-insight__title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 500;
  line-height: 1.25;
  max-width: 33rem;
  text-wrap: pretty;
  overflow-wrap: break-word;
  transition: color 0.2s var(--ease);
}
.sv-insight__title:hover, .sv-insight__title:focus-visible { color: var(--orange-text); }
@media (min-width: 56em) {
  .sv-insights__grid { grid-template-columns: 5fr 7fr; gap: var(--s-9); align-items: start; }
  .sv-insights__head { position: sticky; top: calc(var(--header-h) + 2rem); }
  /* the meta column only ever holds a date: give the reclaimed width to the title measure */
  .sv-insight { grid-template-columns: 14rem minmax(0, 1fr); column-gap: var(--s-5); align-items: baseline; padding-block: var(--s-5); }
}

/* ---------- Focused Romania pages ---------- */
.sv-focus__head { gap: var(--s-4); }
.sv-focus__text {
  font-size: var(--text-md);
  line-height: 1.6;
  color: var(--muted);
  max-width: 60ch;
}
.sv-focus__card {
  position: relative;
  padding-top: var(--s-5);
  gap: var(--s-3);
  align-content: stretch;
  grid-template-rows: auto auto 1fr auto;
}
/* numeral / title / summary / related share one row rhythm per band, so the hairline above
   "Related core expertise" sits at the same height across the whole row */
@supports (grid-template-rows: subgrid) {
  .sv-focus__grid > .card {
    grid-row: span 4;
    grid-template-rows: subgrid;
    row-gap: var(--s-3);
  }
  .sv-focus__grid > .card .sv-focus__related { margin-top: 0; }
}
.sv-focus__card .card__title { text-wrap: balance; }
.sv-focus__card::before {
  content: attr(data-num);
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-sm);
  letter-spacing: 0.12em;
  color: var(--muted);
  font-variant-numeric: lining-nums;
}
.sv-focus__card .card__title a::after {
  content: "";
  position: absolute;
  inset: 0;
}
.sv-focus__card {
  transition: border-color 0.3s var(--ease), transform 0.26s var(--ease);
  will-change: transform;
}
.sv-focus__card:hover,
.sv-focus__card:focus-within { transform: translateY(-2px); }
.sv-focus__card .card__title a { transition: color 0.22s var(--ease); }
.sv-focus__card:hover .card__title a,
.sv-focus__card .card__title a:focus-visible { color: var(--orange-text); }
/* the whole card is the click target (.card__title a::after covers it), so the keyboard
   focus ring belongs to the whole card, not to the title text */
.sv-focus__card:has(.card__title a:focus-visible) {
  outline: 2px solid var(--orange);
  outline-offset: 8px;
}
.sv-focus__card .card__title a:focus-visible { outline: none; }
.sv-focus__card .card__summary { flex: 1; }
.sv-focus__related {
  margin-top: auto;
  padding-top: var(--s-3);
  border-top: 1px solid var(--rule);
  font-size: var(--text-sm);
  letter-spacing: 0.02em;
  color: var(--muted);
  line-height: 1.5;
}
.sv-focus__related a {
  position: relative;
  z-index: 1;
  display: inline-block;
  padding-block: 0.35rem;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--orange);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}
.sv-focus__related a:hover { color: var(--orange-text); }
@media (min-width: 56em) {
  .sv-focus__head { grid-template-columns: 1fr 1fr; align-items: end; }
}

/* ---------- Practice notes (the six Romania landing pages) ---------- */
.sv-note { padding-bottom: clamp(4rem, 9vw, 8rem); }

.sv-note__intro {
  margin-top: var(--s-3);
  font-family: var(--font-prose);
  font-size: var(--text-prose);
  line-height: 1.66;
  max-width: var(--measure);
}
.sv-note__intro > p + p { margin-top: 1.1em; }
.sv-note__intro a, .sv-note__body a {
  text-decoration: underline;
  text-decoration-color: var(--orange);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}
.sv-note__intro a:hover, .sv-note__body a:hover { color: var(--orange-text); }

.sv-note__cards {
  margin-top: clamp(3rem, 7vw, 5.5rem);
  gap: var(--s-7) var(--s-7);
}
.sv-note__card-title { font-size: var(--text-xl); }
.sv-note__card-text {
  font-family: var(--font-prose);
  font-size: var(--text-md);
  line-height: 1.6;
  color: var(--navy-700);
}

.sv-note__sections {
  margin-top: clamp(3rem, 7vw, 5.5rem);
  border-top: 1px solid var(--navy-800);
}
.sv-note__section {
  display: grid;
  gap: var(--s-4) var(--s-8);
  padding-block: clamp(2rem, 4.5vw, 3.25rem);
  border-bottom: 1px solid var(--rule);
}
.sv-note__section:last-child { border-bottom: 0; }
.sv-note__section-title {
  font-size: var(--text-xl);
  line-height: 1.15;
  text-wrap: pretty;
}
.sv-note__body {
  font-family: var(--font-prose);
  font-size: var(--text-prose);
  line-height: 1.66;
  max-width: var(--measure);
}
.sv-note__body > * + * { margin-top: 1.1em; }
.sv-note__body ul { margin-top: 0; }
.sv-note__body > ul + * { margin-top: 1.5em; }
.sv-note__body .faq { display: grid; }
.sv-note__body .faq__item {
  display: grid;
  gap: var(--s-2);
  padding-block: var(--s-5);
  border-top: 1px solid var(--rule);
}
.sv-note__body .faq__item:first-child { border-top: 0; padding-top: 0; }
.sv-note__body .faq__item h3 {
  font-size: var(--text-lg);
  line-height: 1.25;
  font-weight: 500;
}
.sv-note__body .faq__item p {
  font-size: var(--text-md);
  line-height: 1.6;
  color: var(--navy-700);
}
@media (min-width: 56em) {
  .sv-note__section { grid-template-columns: 16rem minmax(0, 1fr); }
  .sv-note__section-title { position: sticky; top: calc(var(--header-h) + 1.5rem); }
}

/* Refinements after QA round 1 */
.sv-note__body .faq { border-top: 0; }
.sv-note__body .faq__item { grid-template-columns: 1fr; gap: var(--s-2); }
.sv-note__body .faq__item:first-child { border-top: 0; padding-top: 0; }
.sv-note__body .faq__item:last-child { border-bottom: 0; }
.sv-note__body .faq__item h3 { max-width: 48ch; }
.sv-note__body .faq__item p { max-width: 62ch; }
@media (min-width: 56em) {

}

/* Refinements after QA round 3 */
/* Short hyphenated link labels keep their compound words intact on wide screens */
@media (min-width: 56em) { .sv-nowrap { white-space: nowrap; } }
/* Hero lede: a slightly wider measure so the 1440 line break no longer lands on "on-point" */

/* ==========================================================================
   Services — hover / focus micro-interactions (shared easing var(--ease); paint-only)
   ========================================================================== */
/* practice index: active marker (absolutely positioned in the 1.1em gutter, see .sv-group__list a) fades in instead of snapping */
.sv-group__list a::before {
  content: "";
  position: absolute;
  left: 0.2em;
  top: calc(0.5rem + 0.3em);
  width: 1px;
  height: 0.8em;
  background: var(--orange);
  transform: rotate(var(--slash-angle));
  opacity: 0;
  transition: opacity 0.26s var(--ease);
}
.sv-group__list a[aria-current="true"]::before { opacity: 1; }
.sv-group__toggle .sv-group__label { transition: color 0.22s var(--ease); }
.sv-index--js .sv-group__toggle:focus-visible .sv-group__label { color: var(--orange-text); }
/* in-copy links: underline warms and thickens, 200ms */
.sv-opening a, .sv-panel a, .sv-note__intro a, .sv-note__body a, .sv-focus__related a {
  transition: color 0.2s var(--ease), text-decoration-color 0.2s var(--ease), text-decoration-thickness 0.2s var(--ease);
}
.sv-opening a:hover, .sv-panel a:hover, .sv-note__intro a:hover, .sv-note__body a:hover, .sv-focus__related a:hover,
.sv-opening a:focus-visible, .sv-panel a:focus-visible, .sv-note__intro a:focus-visible, .sv-note__body a:focus-visible, .sv-focus__related a:focus-visible {
  color: var(--orange-text);
  text-decoration-thickness: 2px;
}
/* ruled news list + sub-sections + landing cards: hairlines warm to orange */
.sv-insight { transition: border-color 0.3s var(--ease); }
.sv-insight:hover, .sv-insight:focus-within { border-bottom-color: var(--orange); }
.sv-insight__title:focus-visible { color: var(--orange-text); }
.sv-sub { transition: border-color 0.3s var(--ease); }
.sv-sub:hover { border-top-color: var(--orange); }
.sv-note__card { transition: border-color 0.3s var(--ease); }
.sv-note__card:hover { border-top-color: var(--orange); }
.sv-note__section { transition: border-color 0.3s var(--ease); }
.sv-note__section:hover { border-bottom-color: var(--orange); }
@media (prefers-reduced-motion: reduce) {
  .sv-group__list a, .sv-focus__card, .sv-toggle { transition: none; }
  .sv-insight::after { transition: none; }
  .sv-group__list a:hover, .sv-focus__card:hover, .sv-focus__card:focus-within { transform: none; }
}


/* ==== partial: 40-insights.css ==== */
/* ==========================================================================
   Insights family (.in-): insights.html index + resource hub
   ========================================================================== */

/* ---- Index: page head ---- */

/* ---- Index: featured series (navy band) ---- */
.in-series { position: relative; overflow: hidden; }
/* slash motif lives in the empty space under the intro column (desktop only) so it never crosses type */
.in-series__intro { position: relative; }
.in-series__intro::after {
  content: "";
  display: none;
  position: absolute;
  left: 1.25rem;
  top: calc(100% + 3.5rem);
  width: 1px;
  height: 7rem;
  background: linear-gradient(to bottom, transparent, var(--orange) 25%, var(--orange) 75%, transparent);
  transform: rotate(var(--slash-angle));
  transform-origin: center;
  opacity: 0.6;
  pointer-events: none;
}
.in-series__grid {
  position: relative;
  display: grid;
  gap: var(--s-8);
}
.in-series__grid > * { min-width: 0; }
.in-series__intro { display: grid; align-content: start; gap: var(--s-5); }
.in-series .link-arrow:focus-visible,
.in-series__title a:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }
.in-series__heading {
  font-size: clamp(2rem, 1.3rem + 1.8vw, 2.75rem);
  line-height: 1.08;
  max-width: 18ch;
}
.in-series__desc {
  font-size: var(--text-md);
  line-height: 1.65;
  color: rgba(248, 248, 243, 0.82);
  max-width: 44ch;
}
.in-series__cta { margin-top: var(--s-2); }
.in-series__list {
  display: grid;
  border-top: 1px solid var(--paper-32);
  counter-reset: in-series;
}
.in-series__item {
  display: grid;
  gap: var(--s-2);
  padding-block: var(--s-5);
  border-bottom: 1px solid var(--paper-16);
}
.in-series__item .card__meta { color: rgba(236, 237, 231, 0.62); }
.in-series__title {
  font-size: var(--text-xl);
  line-height: 1.15;
  font-weight: 500;
  color: var(--surface);
}
.in-series__title a { transition: color 0.2s var(--ease); }
.in-series__title a:hover,
.in-series__title a:focus-visible {
  color: var(--orange);
  text-decoration: underline;
  text-decoration-color: var(--orange);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
}
.in-series__excerpt {
  font-family: var(--font-prose);
  font-size: var(--text-sm);
  line-height: 1.62;
  color: rgba(248, 248, 243, 0.76);
  max-width: 48ch;
  text-wrap: pretty;
}
.in-series__title { text-wrap: balance; overflow-wrap: break-word; }
/* single column: both balance and pretty rebalance a 2-line title by breaking inside the
   hyphenated compound (AML-obliged-entity); plain wrapping keeps the compound whole */
@media (max-width: 40em) { .in-series__title { text-wrap: wrap; } }
@media (min-width: 40em) {
  .in-series__list { grid-template-columns: 1fr 1fr; column-gap: var(--s-7); }
  .in-series__item:nth-child(2) { border-top: 0; }
  /* meta / title / excerpt share one row rhythm across each pair */
}
@media (min-width: 70em) {
  .in-series__grid {
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    gap: var(--s-10);
    align-items: start;
  }
  .in-series__intro { position: sticky; top: calc(var(--header-h) + 2rem); }
  .in-series__intro::after { display: block; }
}

/* ---- Index: archive (3-column ruled cards) ---- */
.in-archive__grid {
  display: grid;
  gap: var(--s-6) var(--s-7);
}
.in-archive__grid > * { min-width: 0; }
.in-archive__card { padding-bottom: var(--s-3); align-content: start; }
/* meta / title / summary share one row rhythm per band, so the titles of a row start on the
   same baseline and the cards do not end ragged; cards whose summary is absent simply leave
   the (shared) summary track empty instead of riding up. */
.in-archive__card .card__title a:hover,
.in-archive__card .card__title a:focus-visible {
  text-decoration: underline;
  text-decoration-color: var(--orange);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
}
@media (max-width: 39.99em) { .in-archive__grid { gap: var(--s-8); } }
@media (min-width: 40em) { .in-archive__grid { grid-template-columns: repeat(2, 1fr); row-gap: var(--s-7); } }
@media (min-width: 64em) { .in-archive__grid { grid-template-columns: repeat(3, 1fr); row-gap: var(--s-7); } }

/* ---- Index: featured interview teaser + pager ---- */
.in-feature { padding-bottom: 0; }
.in-feature__title a:hover,
.in-feature__title a:focus-visible {
  text-decoration: underline;
  text-decoration-color: var(--orange);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
}
.in-feature__inner {
  display: grid;
  gap: var(--s-6);
  padding: clamp(1.75rem, 4vw, 3rem) 0;
  background: transparent;
  border-top: 1px solid var(--navy-800);
  border-bottom: 1px solid var(--rule);
}
.in-feature__inner > * { min-width: 0; }
.in-feature__copy { display: grid; gap: var(--s-4); max-width: 62ch; }
.in-feature__title {
  font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.375rem);
  line-height: 1.1;
}
.in-feature__title a:hover { color: var(--orange-text); }
.in-feature__subtitle {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-style: italic;
  line-height: 1.35;
  color: var(--muted);
}
.in-feature__p {
  font-family: var(--font-prose);
  font-size: var(--text-md);
  line-height: 1.65;
  color: var(--navy-700);
}
.in-pager {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--s-4);
  padding-top: var(--s-5);
  border-top: 1px solid var(--rule);
}
.in-pager__link {
  display: inline-flex;
  align-items: baseline;
  min-height: 2.5rem;
  gap: 0.6em;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
}
.in-pager__arrow {
  color: var(--orange);
  font-weight: 400;
  transition: transform 0.25s var(--ease);
}
.in-pager__link:hover { color: var(--orange-text); }
.in-pager__link--prev:hover .in-pager__arrow { transform: translateX(-4px); }
.in-pager__link--next:hover .in-pager__arrow { transform: translateX(4px); }
.in-pager--rule {
  margin-top: clamp(3rem, 6vw, 5rem);
  border-top-color: var(--navy-800);
}

/* ---- Hub ---- */

.in-hub { padding-top: 0; }

.in-hub__prose { --measure: 44rem; max-width: none; }
.in-hub__prose > :not(.table-wrap):not(.card-grid):not(.faq) { max-width: min(var(--measure), 100%); }
.in-hub__prose > .table-wrap,
.in-hub__prose > .card-grid,
.in-hub__prose > .faq { max-width: 100%; }
.in-hub__prose > p { font-family: var(--font-prose); font-size: var(--text-md); }
.in-hub__prose > p:first-child::first-letter {
  float: none;
  font: inherit;
  padding: 0;
}
.in-hub__prose > p:first-child {
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 1rem + 1.2vw, 1.75rem);
  line-height: 1.35;
  font-weight: 500;
}
.in-hub__prose h2 {
  margin-top: 3em;
  margin-bottom: 0.7em;
  padding-top: 1.4em;
}
.in-hub__prose > h2 + * { margin-top: 0; }
.in-hub__prose ul { list-style: none; padding-left: 0; display: grid; gap: 0.6em; }
.in-hub__prose ul li {
  position: relative;
  padding-left: 1.4em;
}
.in-hub__prose ul li::before {
  content: "";
  position: absolute;
  left: 0.2em;
  top: 0.45em;
  width: 1px;
  height: 0.9em;
  background: var(--orange);
  transform: rotate(var(--slash-angle));
  transform-origin: center;
}
.in-hub__prose ul li + li { margin-top: 0; }

/* tables: hairlines, small-caps th, quiet numeric alignment */
.in-hub__prose .table-wrap {
  margin-top: 1.6em;
  border-bottom: 1px solid var(--navy-800);
  -webkit-overflow-scrolling: touch;
}
.in-hub__prose .table {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  line-height: 1.5;
}
.in-hub__prose .table--wide { min-width: 40rem; }
.in-hub__prose .table th {
  padding: var(--s-2) var(--s-3) var(--s-3);
  border-bottom: 1px solid var(--navy-800);
  white-space: normal;
  font-variant-caps: normal;
  text-transform: uppercase;
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  vertical-align: bottom;
}
.in-hub__prose .table td {
  padding: var(--s-3) var(--s-3);
  border-bottom: 1px solid var(--rule);
  min-width: 0;
}
/* wide tables: right-edge scroll shadow so the cut-off reads as scrollable */
.in-hub__prose .table-wrap--wide {
  background:
    linear-gradient(to right, var(--paper) 30%, rgba(236, 237, 231, 0)) left / 2.5rem 100% no-repeat local,
    linear-gradient(to left, var(--paper) 30%, rgba(236, 237, 231, 0)) right / 2.5rem 100% no-repeat local,
    linear-gradient(to right, rgba(10, 35, 59, 0.14), rgba(10, 35, 59, 0)) left / 0.75rem 100% no-repeat scroll,
    linear-gradient(to left, rgba(10, 35, 59, 0.14), rgba(10, 35, 59, 0)) right / 0.75rem 100% no-repeat scroll;
}
.in-hub__prose .table th:first-child,
.in-hub__prose .table td:first-child { padding-left: 0; }
.in-hub__prose .table th:last-child,
.in-hub__prose .table td:last-child { padding-right: 0; }
.in-hub__prose .table tr:last-child td { border-bottom: 0; }
.in-hub__prose .table td:first-child { font-weight: 600; color: var(--ink); }
.in-hub__prose .table a {
  text-decoration: underline;
  text-decoration-color: var(--orange);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}
.in-hub__prose .table a:hover { color: var(--orange-text); }

/* card grid: ruled editorial columns */
.in-hub__prose .card-grid {
  display: grid;
  gap: var(--s-6) var(--s-6);
  margin-top: 1.8em;
}
.in-hub__prose .card-grid__item {
  display: grid;
  gap: var(--s-3);
  align-content: start;
  padding-top: var(--s-4);
  border-top: 1px solid var(--navy-800);
}
.in-hub__prose .card-grid__item h3 {
  margin: 0;
  font-size: var(--text-xl);
  line-height: 1.15;
}
.in-hub__prose .card-grid__item p {
  font-family: var(--font-prose);
  font-size: var(--text-md);
  line-height: 1.6;
  color: var(--navy-700);
}
@media (min-width: 40em) { .in-hub__prose .card-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64em) { .in-hub__prose .card-grid { grid-template-columns: repeat(3, 1fr); column-gap: var(--s-7); } }

/* faq: ruled Q/A list */
.in-hub__prose .faq {
  display: grid;
  margin-top: 1.6em;
  border-top: 1px solid var(--navy-800);
}
.in-hub__prose .faq__item {
  display: grid;
  gap: var(--s-3);
  padding-block: var(--s-5);
  border-bottom: 1px solid var(--rule);
}
.in-hub__prose .faq__item h3 {
  margin: 0;
  font-size: var(--text-xl);
  line-height: 1.2;
}
.in-hub__prose .faq__item p {
  font-size: var(--text-md);
  line-height: 1.65;
  color: var(--navy-700);
}
@media (min-width: 48em) {
  .in-hub__prose .faq__item {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: var(--s-6);
    align-items: start;
  }
}

.in-hub__linkrow { margin-top: 2.4em; }
.in-hub__note {
  margin-top: 2em;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: var(--muted);
}

/* sticky aside (mobile: sits directly under the head, before the prose) */
.in-hub__related .list-links a { font-size: var(--text-md); }
@media (max-width: 63.99em) {
  .in-hub__aside { order: -1; }
  .in-hub__related { padding-bottom: var(--s-5); border-bottom: 1px solid var(--rule); }
}
@media (max-width: 40em) {
  .in-hub__prose h2 { margin-top: 2em; padding-top: 1em; }
}
@media (min-width: 64em) {
  .in-hub__layout {
    grid-template-columns: minmax(0, 1fr) 17rem;
    gap: var(--s-9);
  }
  .in-hub__aside { position: sticky; top: calc(var(--header-h) + 2rem); align-self: start; }
}

/* ==========================================================================
   Insights — hover / focus micro-interactions (shared easing var(--ease); paint-only)
   ========================================================================== */
/* series items (on navy): the row rule grows an orange hairline from the left, meta + title
   take the accent. The rule lives on the item so it needs its own ::after here. */
.in-series__item { position: relative; }
.in-series__item::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100%;
  height: 1px;
  background: var(--orange);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--motion-base) var(--ease);
  pointer-events: none;
}
.in-series__item:hover::after, .in-series__item:focus-within::after { transform: scaleX(1); }
.in-series__item .card__meta { transition: color 0.22s var(--ease); }
.in-series__item:hover .card__meta, .in-series__item:focus-within .card__meta { color: var(--orange); }
.in-series__item:hover .in-series__title a,
.in-series__item:focus-within .in-series__title a { color: var(--orange); }
.in-series__cta { transition: color 0.22s var(--ease); }
/* archive cards: base.css §28.4 already warms rule + title + meta on hover and focus-within */
/* feature teaser */
.in-feature__inner { transition: border-color 0.3s var(--ease); }
.in-feature__inner:hover, .in-feature__inner:focus-within { border-top-color: var(--orange); }
.in-feature__title a { transition: color 0.22s var(--ease), text-decoration-color 0.22s var(--ease); }
.in-feature__title a:focus-visible { color: var(--orange-text); }
/* pager: colour + arrow nudge, with focus parity */
.in-pager__link { transition: color 0.22s var(--ease); }
.in-pager__link:focus-visible { color: var(--orange-text); }
.in-pager__link--prev:focus-visible .in-pager__arrow { transform: translateX(-4px); }
.in-pager__link--next:focus-visible .in-pager__arrow { transform: translateX(4px); }
/* hub: table links, link row, related aside */
.in-hub__prose .table a {
  transition: color 0.2s var(--ease), text-decoration-color 0.2s var(--ease), text-decoration-thickness 0.2s var(--ease);
}
.in-hub__prose .table a:hover, .in-hub__prose .table a:focus-visible { color: var(--orange-text); text-decoration-thickness: 2px; }
.in-hub__prose .card-grid__item, .in-hub__prose .faq__item { transition: border-color 0.3s var(--ease); }
.in-hub__prose .card-grid__item:hover { border-top-color: var(--orange); }
.in-hub__prose .faq__item:hover { border-bottom-color: var(--orange); }
.in-hub__linkrow a { transition: color 0.22s var(--ease), transform 0.26s var(--ease); }
.in-hub__linkrow a:hover, .in-hub__linkrow a:focus-visible { transform: translateX(4px); color: var(--orange-text); }
.in-hub__related .list-links a:focus-visible { transform: translateX(4px); color: var(--orange-text); }
@media (prefers-reduced-motion: reduce) {
  .in-series__item::after { transition: none; }
  .in-pager__arrow, .in-hub__linkrow a { transition: none; }
  .in-pager__link:hover .in-pager__arrow, .in-pager__link:focus-visible .in-pager__arrow,
  .in-hub__linkrow a:hover, .in-hub__related .list-links a:focus-visible { transform: none; }
}

/* two-line meta keeps the series titles on one starting line without subgrid holes */
.in-series__item .card__meta { min-height: calc(2 * 1.45em); }


/* ==== partial: 50-articles.css ==== */
/* ==== articles family (.ar-) — insights-*.html articles + policy pages ==== */

/* Breadcrumb strip above the article head */

/* Head: tighter eyebrow→title rhythm { gap: var(--s-4); padding-top: var(--s-5); }

/* Body column: prose + CTA row + note + pager share the measure.
   The measure is fixed in rem (≈ 66ch of the 18px prose) so headings, rules, CTA and pager
   share one right edge instead of each resolving `ch` in its own font. */
.ar-article, .ar-policy { --measure: 40.5rem; }
.ar-body { min-width: 0; }
.ar-article { padding-bottom: clamp(3rem, 7vw, 6rem); }
/* Prose keeps the 66ch measure, but tables may use the whole body column */
.ar-prose { max-width: none; }
.ar-prose > :not(.table-wrap) { max-width: min(var(--measure), 100%); }
.ar-prose > .table-wrap { max-width: 100%; }
.ar-layout--single { grid-template-columns: minmax(0, 1fr); }
/* No aside: centre a slightly wider column, head included, so the page reads as a deliberate single column */
.ar-article--single { --measure: 44rem; }
.ar-article--single .ar-body { max-width: var(--measure); margin-inline: auto; }

/* Prose refinements */
.ar-prose { text-wrap: pretty; hyphens: manual; }
.ar-prose h2 {
  margin-top: 2.3em;
  padding-top: 0.65em;
  text-wrap: balance;
}
/* An article that opens with a heading: no orphaned section rule below the head rule */
.ar-prose > h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.ar-prose h2, .ar-prose h3, .ar-prose h4 { font-variant-numeric: lining-nums; }

/* Drop cap: only on a narrative opening (template adds --nodrop otherwise); narrow glyphs sit closer */
.ar-prose > p:first-child::first-letter { padding-right: 0.07em; padding-top: 0.1em; }
.ar-prose--nodrop > p:first-child::first-letter {
  float: none;
  font: inherit;
  padding: 0;
  margin: 0;
  color: inherit;
}
.ar-prose h3 {
  margin-top: 2em;
  margin-bottom: 0.25em;
  font-size: var(--text-xl);
  line-height: 1.2;
  text-wrap: balance;
}
.ar-prose h2 + h3 { margin-top: 1.2em; }
.ar-prose h2 + p, .ar-prose h3 + p { margin-top: 0.9em; }
.ar-prose > h3 + h3 { margin-top: 1em; }
.ar-prose ul { list-style: none; padding-left: 1.4em; }
.ar-prose ul > li { position: relative; }
.ar-prose ul > li::before {
  content: "/";
  position: absolute;
  left: -1.1em;
  top: 0;
  color: var(--orange);
  font-family: var(--font-sans);
  font-weight: 400;
}
.ar-prose ol { padding-left: 1.6em; }
.ar-prose ol li::marker { font-family: var(--font-display); font-weight: 600; color: var(--muted); }

/* Interview pull-quotes: large Cormorant italic with an orange hairline */
.ar-prose blockquote {
  position: relative;
  margin-block: 2.2em;
  padding-left: clamp(1.25rem, 3vw, 2rem);
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.1rem + 1.1vw, 1.9rem);
  font-style: italic;
  font-weight: 500;
  line-height: 1.32;
  letter-spacing: -0.005em;
  color: var(--navy-700);
}
.ar-prose blockquote::before {
  content: "";
  position: absolute;
  left: 0.15rem;
  top: 0.45em;
  width: 1px;
  height: 1.7em;
  background: var(--orange);
  transform: rotate(var(--slash-angle));
  transform-origin: top;
}
.ar-prose blockquote p + p { margin-top: 0.7em; }

/* Tables inside prose: sans, quiet, scroll on narrow screens */
.ar-prose .table-wrap {
  margin-block: 1.8em;
  border-top: 1px solid var(--navy-800);
}
.ar-prose table {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  line-height: 1.45;
  min-width: 36rem;
}
.ar-prose th, .ar-prose td { padding: var(--s-3) var(--s-4) var(--s-3) 0; }
.ar-prose th:last-child, .ar-prose td:last-child { padding-right: 0; }
.ar-prose th { white-space: normal; padding-right: var(--s-5); }
.ar-prose td:first-child { font-weight: 600; color: var(--navy-700); }
.ar-prose caption {
  caption-side: top;
  text-align: left;
  padding-block: var(--s-3);
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-style: italic;
  color: var(--muted);
}
.ar-prose figure { margin: 0; }
.ar-prose figcaption {
  margin-top: var(--s-3);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

/* External "read the original" CTA row: thin outline buttons only */
.ar-cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  max-width: min(var(--measure), 100%);
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-top: var(--s-5);
  border-top: 1px solid var(--rule);
}
.ar-note, .ar-pager { max-width: min(var(--measure), 100%); }
.ar-cta .btn { text-align: center; }
.ar-cta .btn::after {
  content: "\2197";
  font-weight: 400;
  color: var(--orange);
  transition: color 0.25s var(--ease), transform 0.25s var(--ease);
}
.ar-cta .btn:hover::after { color: var(--surface); transform: translate(2px, -2px); }

/* Small italic note under the body */
.ar-note {
  margin-top: var(--s-6);
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-style: italic;
  color: var(--muted);
}

/* Previous / next pager */
.ar-pager {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-4);
  margin-top: clamp(3rem, 6vw, 5rem);
  padding-top: var(--s-5);
  border-top: 1px solid var(--navy-800);
}
.ar-pager__link {
  display: inline-flex;
  align-items: baseline;
  gap: 0.6em;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
}
.ar-pager__link--next { justify-self: end; text-align: right; }
.ar-pager__arrow {
  font-weight: 400;
  color: var(--orange);
  transition: transform 0.25s var(--ease);
}
.ar-pager__link:hover { color: var(--orange-text); }
.ar-pager__link--prev:hover .ar-pager__arrow { transform: translateX(-4px); }
.ar-pager__link--next:hover .ar-pager__arrow { transform: translateX(4px); }

/* Aside: related services */
.ar-aside { gap: var(--s-6); }
.ar-aside__title {
  padding-bottom: var(--s-3);
  margin-bottom: var(--s-2);
  border-bottom: 1px solid var(--navy-800);
  font-size: var(--text-lg);
  font-weight: 500;
}
.ar-aside__links a { font-size: var(--text-md); line-height: 1.35; text-wrap: pretty; }
@media (min-width: 64em) {
  /* start-aligned so the sticky aside actually sticks; slightly wider track for long service labels */
  .ar-article .article-layout { grid-template-columns: minmax(0, 1fr) 17rem; gap: var(--s-8); }
  .ar-article .ar-layout--single { grid-template-columns: minmax(0, 1fr); }
  .ar-aside { padding-top: 0.45rem; align-self: start; }
}
@media (min-width: 76em) {
  .ar-article .article-layout { gap: var(--s-10); }
}
@media (max-width: 63.99em) {
  .ar-aside {
    max-width: min(var(--measure), 100%);
    padding-top: var(--s-6);
    border-top: 1px solid var(--rule);
  }
}

/* Policy pages: narrow legal-document column { padding-bottom: var(--s-5); }

.ar-policy { padding-top: var(--s-5); }
/* One column for text, section rules and the cookies table alike */
.ar-policy .ar-prose--policy { --measure: 44rem; max-width: min(var(--measure), 100%); font-size: var(--text-md); line-height: 1.7; }
.ar-prose--policy > * + * { margin-top: 1.2em; }
.ar-prose--policy > p:first-child {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.ar-prose--policy h2 {
  margin-top: 2.4em;
  padding-top: 1em;
  font-size: var(--text-xl);
}
.ar-prose--policy h3 {
  margin-top: 1.6em;
  font-size: var(--text-lg);
  font-weight: 600;
}
.ar-prose--policy .table-wrap { margin-block: 1.4em; }
.ar-prose--policy table { min-width: 40rem; }

/* Narrow screens: breadcrumb on one line, full-width CTA, stacked table rows */
@media (max-width: 40em) {
  .ar-cta .btn { width: 100%; justify-content: space-between; text-align: left; letter-spacing: 0.06em; padding-inline: 1.1rem; }
  .ar-prose table, .ar-prose--policy table { min-width: 0; }
  .ar-prose thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .ar-prose tr { display: block; padding-block: var(--s-3); border-bottom: 1px solid var(--rule); }
  .ar-prose td { display: block; min-width: 0; padding: 0.3em 0; border: 0; }
  .ar-prose td[data-label]::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 0.15em;
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
  }
  .ar-prose td:first-child { padding-top: 0; }
  .ar-prose td:last-child { padding-bottom: 0; }
  .ar-prose tbody tr:hover { background: transparent; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .ar-pager__arrow, .ar-cta .btn::after { transition: none; }
  .ar-pager__link:hover .ar-pager__arrow, .ar-cta .btn:hover::after { transform: none; }
}

/* ==========================================================================
   Articles — hover / focus micro-interactions (shared easing var(--ease); paint-only)
   ========================================================================== */
/* prose + author links: underline warms and thickens, 200ms (offset keeps the line clear of descenders) */
.ar-prose a {
  transition: color 0.2s var(--ease), text-decoration-color 0.2s var(--ease), text-decoration-thickness 0.2s var(--ease);
}
.ar-prose a:hover, .ar-prose a:focus-visible {
  color: var(--orange-text);
  text-decoration-thickness: 2px;
}
/* external CTA: focus parity for the ↗ glyph */
.ar-cta .btn:focus-visible::after { color: var(--surface); transform: translate(2px, -2px); }
/* pager: colour transition + focus parity */
.ar-pager__link { transition: color 0.22s var(--ease); }
.ar-pager__link:focus-visible { color: var(--orange-text); }
.ar-pager__link--prev:focus-visible .ar-pager__arrow { transform: translateX(-4px); }
.ar-pager__link--next:focus-visible .ar-pager__arrow { transform: translateX(4px); }
/* related services aside: base .list-links slides 4px on hover — keyboard parity only */
.ar-aside__links a:focus-visible { transform: translateX(4px); color: var(--orange-text); }
/* and the same growing orange hairline the card family uses, on the item rule */
.ar-aside__links a { position: relative; }
.ar-aside__links a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100%;
  height: 1px;
  background: var(--orange);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--motion-base) var(--ease);
  pointer-events: none;
}
.ar-aside__links a:last-child::after { content: none; }
.ar-aside__links a:hover::after, .ar-aside__links a:focus-visible::after { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) {
  .ar-aside__links a::after { transition: none; }
  .ar-aside__links a:focus-visible, .ar-pager__link:focus-visible .ar-pager__arrow, .ar-cta .btn:focus-visible::after { transform: none; }
}


/* ==== partial: 60-contact.css ==== */
/* ==== contact family (.ct-) : contact.html + ro/*.html landings ==== */

/* --- Contact page ------------------------------------------------------- */

.ct-body { padding-bottom: clamp(4rem, 9vw, 7rem); }
.ct-layout { align-items: start; }
.ct-details { display: grid; gap: var(--s-6); align-content: start; }
@media (min-width: 56em) {
  /* wider value column so the office address sets in two lines; note pinned to the column foot */
  .ct-layout { grid-template-columns: 1fr 1.1fr; gap: var(--s-8); align-items: stretch; }
  .ct-details { grid-template-rows: auto 1fr; }
  .ct-note { align-self: end; }
}
@media (min-width: 56em) and (max-width: 72em) {
  .ct-details .contact__row a, .ct-details .contact__row p { font-size: clamp(1.25rem, 0.9rem + 0.9vw, 1.5rem); }
}
.ct-note {
  max-width: 52ch;
  font-family: var(--font-prose);
  font-style: italic;
  font-size: var(--text-sm);
  line-height: 1.65;
  color: var(--muted);
}

.ct-form {
  display: grid;
  gap: var(--s-6);
  padding-top: var(--s-5);
  border-top: 1px solid var(--navy-800);
}
.ct-fields {
  display: grid;
  gap: var(--s-6) var(--s-6);
}
@media (min-width: 48em) {
  .ct-fields { grid-template-columns: 1fr 1fr; }
  .ct-field--wide { grid-column: 1 / -1; }
}
.ct-field { display: grid; gap: var(--s-2); position: relative; }
/* focus underline: a 2px navy rule grows from the left (scaleX) under the control instead of snapping */
.ct-field::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--navy-800);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.32s var(--ease), background-color 0.2s var(--ease);
  pointer-events: none;
}
.ct-field:focus-within::after { transform: scaleX(1); }
.ct-field:has(.ct-field__control:user-invalid)::after { background: var(--error); }
.ct-field__label {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.ct-field__control {
  width: 100%;
  padding: 0.55rem 0;
  border: 0;
  border-bottom: 1px solid var(--rule);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font-family: var(--font-prose);
  font-size: var(--text-md);
  line-height: 1.5;
  transition: border-color 0.2s var(--ease);
}
.ct-field__control:hover { border-bottom-color: var(--navy-24); }
.ct-field__control { transition: border-color 0.22s var(--ease), color 0.22s var(--ease); }
/* focus: global 2px orange ring (hugging the field) plus a 2px navy rule */
.ct-field__control:focus { border-bottom-color: var(--navy-800); }
.ct-field__control:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.ct-field__control:user-invalid { border-bottom-color: var(--error); }
textarea.ct-field__control { resize: vertical; min-height: 9rem; }

.ct-privacy,
.ct-fallback {
  max-width: 60ch;
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--muted);
}
.ct-privacy a, .ct-fallback a, .ct-consent__label a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--orange);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
}
.ct-privacy a:hover, .ct-fallback a:hover, .ct-consent__label a:hover { color: var(--orange-text); }

.ct-consent {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s-3);
  align-items: start;
}
.ct-consent__input {
  appearance: none;
  width: 1.05rem;
  height: 1.05rem;
  margin: 0.25rem 0 0;
  border: 1px solid var(--navy-800);
  background: transparent;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.ct-consent__input::before {
  content: "";
  width: 0.55rem;
  height: 0.55rem;
  background: var(--navy-800);
  transform: scale(0);
  transition: transform 0.15s var(--ease);
}
.ct-consent__input:checked::before { transform: scale(1); }
.ct-consent__input:user-invalid { border-color: var(--error); }
.ct-consent__label {
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--ink);
  cursor: pointer;
}

.ct-status {
  min-height: 1.5em;
  font-family: var(--font-prose);
  font-style: italic;
  font-size: var(--text-sm);
  color: var(--muted);
}
/* stays rendered (never display:none) so the live region is announced */
.ct-status.is-error { color: var(--ink); font-style: normal; padding-left: var(--s-3); border-left: 2px solid var(--error); }
.ct-status.is-success { color: var(--ink); }

.ct-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-4) var(--s-6);
}
.ct-form[aria-busy="true"] .btn { opacity: 0.6; cursor: progress; }
.btn:disabled { opacity: 0.6; cursor: not-allowed; }

/* --- RO landings ---------------------------------------------------------- */
.ct-ro-head {
  position: relative;
  overflow: hidden;
  padding-block: clamp(3rem, 7vw, 5.5rem);
}
.ct-ro-head::after {
  content: "";
  position: absolute;
  top: -10%;
  right: 8%;
  width: 1px;
  height: 120%;
  background: linear-gradient(to bottom, transparent, var(--orange) 40%, var(--orange) 60%, transparent);
  transform: rotate(var(--slash-angle));
  transform-origin: center;
  opacity: 0.8;
  pointer-events: none;
}
.ct-ro-head .container { position: relative; }
/* line-height 1.14: Romanian comma-below diacritics (ș, ț) need clearance over the next line's î/â */
.ct-ro-head .page-head__title { max-width: 18ch; font-size: var(--text-hero); line-height: 1.14; }
.ct-ro-head .page-head__lede { max-width: 52ch; }
@media (max-width: 56em) {
  /* the decorative slash would cross the h1 on narrow screens: keep it out of the text column */
  .ct-ro-head::after { display: none; }
  .ct-ro-head .page-head__title { padding-right: 1rem; }
}

.ct-ro-body { padding-block: clamp(3.5rem, 7vw, 5.5rem) clamp(4rem, 8vw, 6.5rem); }
.ct-ro-grid {
  display: grid;
  gap: var(--s-6) var(--s-7);
}
@media (min-width: 40em) { .ct-ro-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64em) {
  .ct-ro-grid--3 { grid-template-columns: repeat(3, 1fr); }
  .ct-ro-grid--4 { grid-template-columns: repeat(4, 1fr); }
}
.ct-ro-card {
  position: relative;
  display: grid;
  align-content: start;
  gap: var(--s-3);
  padding-top: var(--s-4);
  border-top: 1px solid var(--navy-800);
}
.ct-ro-card::before {
  content: attr(data-num);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--muted);
  font-variant-numeric: lining-nums;
}
.ct-ro-card__title {
  font-size: var(--text-xl);
  line-height: 1.15;
  font-weight: 500;
}
.ct-ro-card__text {
  font-size: var(--text-md);
  line-height: 1.6;
  color: var(--navy-700);
  max-width: 44ch;
  text-wrap: pretty;
}
.ct-ro-card__text a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--orange); text-decoration-thickness: 1px; text-underline-offset: 0.25em; }
.ct-ro-card__text a:hover { color: var(--orange-text); }

/* surface cards (index, expertiză, firma, perspective): same treatment as the EN services focus cards */
.ct-ro-grid--cards .ct-ro-card {
  background: var(--surface);
  padding: var(--s-5) var(--s-5) var(--s-6);
  transition: border-color 0.2s var(--ease);
}
.ct-ro-grid--cards .ct-ro-card:hover { border-top-color: var(--orange); }
.ct-ro-grid--cards.ct-ro-grid--2 .ct-ro-card__text { max-width: 52ch; }

/* people cards (echipa): portrait above name, name links to the EN profile */
.ct-ro-grid--people { gap: var(--s-7) var(--s-6); }
.ct-ro-card__portrait {
  display: block;
  overflow: hidden;
  background: var(--navy-06);
  order: -1;
  margin-top: calc(-1 * var(--s-4));
  margin-bottom: var(--s-2);
}
.ct-ro-card__portrait img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 18%;
  transition: transform var(--motion-slow, 0.42s) var(--ease);
}
.ct-ro-card--person:hover .ct-ro-card__portrait img { transform: scale(1.02); }
.ct-ro-card--person .ct-ro-card__title a { color: var(--ink); text-decoration: none; }
.ct-ro-card--person .ct-ro-card__title a::after { content: ""; position: absolute; inset: 0; }
.ct-ro-card--person:hover { border-top-color: var(--orange); }
.ct-ro-card--person:hover .ct-ro-card__title a { color: var(--orange-text); }
.ct-ro-card--person .ct-ro-card__text a { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) { .ct-ro-card__portrait img { transition: none; } }

/* contact rows (ro/contact): mirror the EN definition list (label | display value) */
.ct-ro-grid--rows { grid-template-columns: 1fr; gap: 0; max-width: 46rem; border-top: 1px solid var(--navy-800); }
.ct-ro-grid--rows .ct-ro-card {
  grid-template-columns: 6rem 1fr;
  gap: var(--s-4);
  align-items: baseline;
  padding-block: var(--s-4);
  border-top: 0;
  border-bottom: 1px solid var(--rule);
}
.ct-ro-grid--rows .ct-ro-card::before { display: none; }
.ct-ro-grid--rows .ct-ro-card__title {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  line-height: 1.5;
}
.ct-ro-grid--rows .ct-ro-card__text {
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 1rem + 1.2vw, 1.75rem);
  font-weight: 500;
  line-height: 1.25;
  color: var(--ink);
  max-width: 24ch;
}
.ct-ro-grid--rows .ct-ro-card__text a { text-decoration: none; }
.ct-ro-grid--rows .ct-ro-card__text a:hover { color: var(--orange-text); }
@media (max-width: 40em) { .ct-ro-grid--rows .ct-ro-card { grid-template-columns: 5rem 1fr; } }

.ct-ro-more {
  margin-top: clamp(2.5rem, 6vw, 4rem);
  padding-top: var(--s-5);
  border-top: 1px solid var(--rule);
}

/* ==========================================================================
   Contact — hover / focus micro-interactions (shared easing var(--ease); paint-only)
   ========================================================================== */
.ct-form .btn { transition: background 0.22s var(--ease), color 0.22s var(--ease), border-color 0.22s var(--ease), transform 0.12s var(--ease), opacity 0.2s var(--ease); }
.ct-privacy a, .ct-fallback a, .ct-consent__label a {
  transition: color 0.2s var(--ease), text-decoration-color 0.2s var(--ease), text-decoration-thickness 0.2s var(--ease);
}
.ct-privacy a:hover, .ct-fallback a:hover, .ct-consent__label a:hover,
.ct-privacy a:focus-visible, .ct-fallback a:focus-visible, .ct-consent__label a:focus-visible { color: var(--orange-text); text-decoration-thickness: 2px; }
.ct-consent__input { transition: border-color 0.22s var(--ease); }
.ct-consent__input:hover { border-color: var(--orange); }
.ct-details .contact__row a { transition: color 0.22s var(--ease); }
.ct-details .contact__row a:focus-visible { color: var(--orange-text); }
@media (prefers-reduced-motion: reduce) {
  .ct-field::after { transition: none; }
}

/* ---- Grouping pass (user: "puțin negrupat"): note right under the details; tighter form rhythm; compact consent + actions block ---- */
@media (min-width: 56em) {
  .ct-layout { align-items: start; gap: clamp(3rem, 6vw, 5rem); }
  .ct-details { grid-template-rows: auto auto; }
  .ct-note { align-self: start; margin-top: var(--s-4); }
}
.ct-details { gap: var(--s-5); }
.ct-form { gap: var(--s-5); padding-top: var(--s-4); }
.ct-fields { gap: var(--s-4) var(--s-6); }
.ct-field { gap: 0; }
.ct-field__label { margin-bottom: 0.1rem; }
.ct-field__control { padding: 0.45rem 0 0.5rem; }
textarea.ct-field__control { min-height: 8.5rem; resize: vertical; }
.ct-privacy { margin-top: var(--s-2); }
.ct-consent { margin-top: 0; padding: var(--s-4) 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.ct-status:empty { min-height: 0; }
.ct-actions { margin-top: 0; }