/* Nuwajuna Associated Advocates: shared styles for every page, the header and the footer.
   Look: rounded white and black panels set on a soft grey canvas, light oversized type.
   Every colour, font, size and space is a token in :root. Layout is flexbox only.
   Breakpoints are container queries on .site, so the layout responds to the page width:
   tablet at 1100px and below, mobile at 640px and below. */

:root {
  /* Colour */
  --color-canvas: #ECEEEE;
  --color-paper: #FFFFFF;
  --color-ink: #0F1214;
  --color-ink-raised: #1D2226;
  --color-graphite: #555C61;
  --color-mist: #E4E7E8;
  --color-line: #D6DADC;
  --color-line-dark: #343B40;
  --color-on-ink: #FFFFFF;
  --color-on-ink-muted: #A9B0B5;
  --color-scrim-top: rgba(15, 18, 20, 0.10);
  --color-scrim-bottom: rgba(15, 18, 20, 0.82);
  --color-clear: transparent;
  --color-line-photo: rgba(255, 255, 255, 0.45);
  --color-scrim-side: rgba(15, 18, 20, 0.55);
  --hero-fade: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.5) 35%, rgba(0, 0, 0, 0) 70%);

  /* Type: one family, used light at display sizes */
  --font-sans: "Urbanist", "Helvetica Neue", "Arial";
  --fs-display-xl: 56px;
  --fs-display-xl-md: 46px;
  --fs-display-xl-sm: 36px;
  --fs-display-lg: 40px;
  --fs-display-lg-md: 34px;
  --fs-display-lg-sm: 28px;
  --fs-display-md: 28px;
  --fs-display-md-md: 25px;
  --fs-display-md-sm: 22px;
  --fs-title: 22px;
  --fs-title-sm: 20px;
  --fs-who: 22px;
  --fs-who-sm: 19px;
  --who-max: 1040px;
  --fs-lede: 20px;
  --fs-lede-sm: 18px;
  --fs-body: 17px;
  --fs-small: 15px;
  --fs-micro: 13px;
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --lh-display: 1.08;
  --lh-heading: 1.12;
  --lh-body: 1.6;
  --ls-display: -0.02em;
  --ls-heading: -0.015em;

  /* Space */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 48px;
  --space-10: 56px;
  --space-11: 64px;
  --space-12: 72px;
  --space-13: 96px;

  /* Shape */
  --radius-panel: 0;
  --radius-panel-sm: 0;
  --radius-card: 0;
  --radius-small: 0;
  --radius-pill: 0;
  --radius-round: 50%;
  --border: 1px;
  --focus-ring: 2px;
  --focus-offset: 3px;

  /* Sizes */
  --page-max: 1600px;
  --inner-max: 1200px;
  --text-max: 640px;
  --head-max: 640px;
  --frame-gap: 16px;
  --frame-gap-sm: 10px;
  --panel-pad-y: 72px;
  --panel-pad-x: 64px;
  --panel-pad-y-md: 56px;
  --panel-pad-x-md: 40px;
  --panel-pad-y-sm: 40px;
  --panel-pad-x-sm: 20px;
  --header-pad: 10px;
  --logo-h: 68px;
  --logo-h-sm: 52px;
  --button-h: 52px;
  --button-arrow: 36px;
  --touch: 44px;
  --icon-size: 22px;
  --icon-size-sm: 16px;
  --icon-stroke: 1.6;
  --icon-tile: 44px;
  --dot-size: 6px;
  --bullet-size: 6px;
  --bullet-offset: 11px;
  --hero-h: 500px;
  --hero-h-md: 440px;
  --hero-h-sm: 380px;
  --hero-info-w: 380px;
  --page-hero-photo-h: 420px;
  --page-hero-photo-h-sm: 260px;
  --fs-stat: 80px;
  --fs-stat-md: 64px;
  --fs-stat-sm: 44px;
  --stat-label-max: 175px;
  --tile-min: 250px;
  --tile-h: 340px;
  --card-min: 300px;
  --portrait-h: 380px;
  --portrait-h-md: 260px;
  --portrait-h-sm: 210px;
  --wall-h: 300px;
  --wall-h-md: 240px;
  --wall-h-sm: 190px;
  --wall-feature-h: 520px;
  --wall-feature-h-md: 420px;
  --wall-feature-h-sm: 260px;
  --wall-slot-h: 200px;
  --wall-people-h-sm: 140px;
  --area-cols: 3.5;
  --person-card-min: 240px;
  --people-cols: 4.5;
  --profile-photo-h: 680px;
  --profile-photo-h-md: 520px;
  --fs-standing: 19px;
  --sticky-offset: 112px;
  --hero-portrait-h: 560px;
  --portrait-expand: 1.6;
  --menu-offset: 110px;
  --mega-feature-h: 280px;
  --mega-feature-w: 32%;
  --mega-shadow: 0 24px 48px rgba(15, 18, 20, 0.12);
  --logo-cols: 4;
  --logo-cell-h: 130px;
  --client-logo-h: 84px;
  --footer-brand-min: 430px;
  --why-photo-w: 42%;
  --media-overlay-h: 520px;
  --media-overlay-h-sm: 360px;
  --area-icon: 32px;
  --turn-quarter: 45deg;
  --turn-half: 180deg;
  --monogram: 112px;
  --monogram-sm: 72px;
  --textarea-h: 168px;
  --profile-side-w: 340px;

  /* Motion */
  --motion-fast: 200ms;
  --motion-base: 320ms;
  --motion-slow: 720ms;
  --motion-photo: 1400ms;
  --delay-1: 80ms;
  --delay-2: 180ms;
  --delay-3: 280ms;
  --delay-4: 380ms;
  --rise: 18px;
  --lift: -4px;
  --nudge: 3px;
  --zoom-from: 1.06;
  --zoom-hover: 1.03;
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);

  /* Imagery */
  --photo-filter: none;
  --photo-card-h: 480px;
  --photo-card-h-md: 380px;
  --photo-card-h-sm: 300px;
}

/* Base */
* { box-sizing: border-box; }
body { margin: 0; }
dc-import { display: block; }
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible { outline: var(--focus-ring) solid currentColor; outline-offset: var(--focus-offset); }

.site,
.part {
  container-type: inline-size;
  container-name: site;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--color-ink);
}
.site {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--frame-gap);
  padding: var(--frame-gap);
  background: var(--color-canvas);
  /* Trims the scrollbar-width overflow from full-bleed sections without breaking the sticky header */
  overflow-x: clip;
}
.site > * { width: 100%; max-width: var(--page-max); }
.main { display: flex; flex-direction: column; gap: var(--frame-gap); }

/* Panels */
.panel {
  border-radius: var(--radius-panel);
  padding: var(--panel-pad-y) var(--panel-pad-x);
  background: var(--color-paper);
}
.panel-ink { background: var(--color-ink); color: var(--color-on-ink); }
.panel-canvas { background: var(--color-canvas); }
/* Full window width background; content stays in line with the centred page column */
.panel-bleed { --bleed-pad: var(--panel-pad-x); --bleed-gap: var(--frame-gap); }
.panel.panel-bleed {
  width: 100vw;
  max-width: none;
  margin-inline: calc(50% - 50vw);
  padding-inline: max(calc(var(--bleed-gap) + var(--bleed-pad)), calc((100vw - var(--page-max)) / 2 + var(--bleed-pad)));
}
/* Also closes the gaps above and below, so the section touches its neighbours */
.panel-bleed.panel-flush { margin-block: calc(-1 * var(--bleed-gap)); }
/* ...but keep the normal gap below a section that is not full width, so a boxed panel and a full-width one do not touch */
.panel:not(.panel-bleed) + .panel-bleed.panel-flush { margin-top: 0; }
.inner { max-width: var(--inner-max); margin-inline: auto; }

.stack { display: flex; flex-direction: column; gap: var(--space-6); }
.stack-sm { display: flex; flex-direction: column; gap: var(--space-3); }
.stack-lg { display: flex; flex-direction: column; gap: var(--space-10); }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.split { display: flex; gap: var(--space-12); align-items: flex-start; }
.split-center { align-items: center; }
.col { flex: 1 1 0; min-width: 0; }
.col-wide { flex: 1.4 1 0; min-width: 0; }

/* Type */
.kicker {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  color: var(--color-graphite);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  text-transform: capitalize;
}
.kicker-dot { width: var(--dot-size); height: var(--dot-size); border-radius: var(--radius-round); background: currentColor; flex: none; }
.panel-ink .kicker,
.hero-photo .kicker { color: var(--color-on-ink-muted); }
.h1 {
  margin: 0;
  font-size: var(--fs-display-xl);
  font-weight: var(--fw-light);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
}
.h2 {
  margin: 0;
  font-size: var(--fs-display-lg);
  font-weight: var(--fw-light);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-display);
}
.h3 {
  margin: 0;
  font-size: var(--fs-display-md);
  font-weight: var(--fw-light);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
}
/* Home "Who we are": label, short heading, paragraphs and a link, stacked */
.who { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-5); max-width: var(--who-max); }
.who-title { margin: 0; font-size: var(--fs-title); font-weight: var(--fw-semibold); line-height: var(--lh-heading); }
.who .who-text { max-width: none; }
.who .btn { margin-top: var(--space-2); }
/* Home "Who we are" statement: a touch smaller and heavier than other h3 headings */
.h3.who-statement { max-width: var(--who-max); text-align: justify; hyphens: auto; font-size: var(--fs-who); font-weight: var(--fw-semibold); }
.title { margin: 0; font-size: var(--fs-title); font-weight: var(--fw-medium); line-height: var(--lh-heading); }
.lede { margin: 0; max-width: var(--text-max); font-size: var(--fs-lede); color: var(--color-graphite); }
.text { margin: 0; max-width: var(--text-max); color: var(--color-graphite); }
.text-justify { text-align: justify; hyphens: auto; }
/* All descriptive paragraphs on the public site are justified (headings, labels and buttons are not) */
.site .text,
.site .lede,
.site .index-summary,
.site .faq-answer,
.site .area-summary,
.site .mega-text,
.site .bullet span { text-align: justify; hyphens: auto; }
.story-cta { margin-top: var(--space-4); }
.small { margin: 0; color: var(--color-graphite); font-size: var(--fs-small); }
.panel-ink .lede,
.panel-ink .text,
.panel-ink .small { color: var(--color-on-ink-muted); }
.head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--space-8);
  margin-bottom: var(--space-11);
}
.head-text { display: flex; flex-direction: column; gap: var(--space-4); max-width: var(--head-max); }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: var(--button-h);
  padding: 0 var(--space-2) 0 var(--space-6);
  border: var(--border) solid var(--color-clear);
  border-radius: var(--radius-pill);
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.btn { align-self: flex-start; }
.btn-plain { padding: 0 var(--space-6); justify-content: center; }
.btn-dark { background: var(--color-ink); color: var(--color-paper); }
.btn-light { background: var(--color-paper); color: var(--color-ink); }
.btn-outline { background: var(--color-clear); color: var(--color-ink); border-color: var(--color-line); }
.btn-outline-light { background: var(--color-clear); color: var(--color-on-ink); border-color: var(--color-line-dark); }
.btn-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--button-arrow);
  height: var(--button-arrow);
  border-radius: var(--radius-round);
  flex: none;
}
.btn-dark .btn-arrow { background: var(--color-paper); color: var(--color-ink); }
.btn-light .btn-arrow,
.btn-outline .btn-arrow { background: var(--color-ink); color: var(--color-paper); }
.btn-outline-light .btn-arrow { background: var(--color-paper); color: var(--color-ink); }
.link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  align-self: flex-start;
  padding-bottom: var(--space-1);
  border-bottom: var(--border) solid currentColor;
  color: inherit;
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  text-decoration: none;
}
.icon {
  width: var(--icon-size);
  height: var(--icon-size);
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: var(--icon-stroke);
  stroke-linecap: round;
  stroke-linejoin: round;
}
.icon-sm { width: var(--icon-size-sm); height: var(--icon-size-sm); }

/* Chips */
.chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--touch);
  padding-inline: var(--space-4);
  border: var(--border) solid var(--color-clear);
  border-radius: var(--radius-pill);
  background: var(--color-mist);
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.chip-active { background: var(--color-ink); color: var(--color-paper); }
.chip-outline { background: var(--color-clear); border-color: var(--color-line); }
.panel-ink .chip { background: var(--color-ink-raised); color: var(--color-on-ink); }
.chip-count { color: var(--color-graphite); }

/* Header */
.header {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  gap: var(--frame-gap);
  /* Pulls the header out over the page padding so it runs edge to edge with no space around it */
  --header-bleed: var(--frame-gap);
  width: calc(100% + 2 * var(--header-bleed));
  max-width: none;
  margin: calc(-1 * var(--header-bleed));
  background: var(--color-canvas);
}
.header-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-6);
  padding: var(--header-pad) var(--space-6);
  border-radius: var(--radius-panel);
  background: var(--color-paper);
}
.logo-link { display: flex; align-items: center; }
.logo { display: block; height: var(--logo-h); width: auto; }
.nav { display: flex; align-items: center; gap: var(--space-1); }

/* "What we do" mega menu: opens on hover, keyboard focus or the arrow button, full width under the header */
.nav-mega { display: flex; align-items: center; }
/* The "What we do" button looks like the other menu items; only its label carries the active underline */
.nav-mega-toggle { gap: var(--space-2); border: 0; background: var(--color-clear); font-family: inherit; cursor: pointer; }
.nav-mega-toggle.nav-link-active { text-decoration: none; }
.nav-mega-toggle.nav-link-active .nav-mega-label { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 8px; }
.nav-mega-toggle .icon { transition: transform var(--motion-fast) var(--ease-out); }
.mega {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 40;
  padding-block: var(--space-9);
  padding-inline: max(calc(var(--frame-gap) + var(--panel-pad-x)), calc((100vw - var(--page-max)) / 2 + var(--panel-pad-x)));
  border-top: var(--border) solid var(--color-line);
  background: var(--color-paper);
  box-shadow: var(--mega-shadow);
  visibility: hidden;
  opacity: 0;
  transform: translateY(calc(-1 * var(--space-2)));
  transition: opacity var(--motion-fast) var(--ease-out), transform var(--motion-fast) var(--ease-out), visibility 0s linear var(--motion-fast);
}
/* Invisible bridge so the pointer can travel from the menu item down to the panel */
.mega::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: var(--space-6); }
.nav-mega:hover .mega,
.nav-mega:focus-within .mega,
.nav-mega.is-open .mega { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
.nav-mega:hover .nav-mega-toggle .icon,
.nav-mega.is-open .nav-mega-toggle .icon { transform: rotate(180deg); }
.mega-inner { display: flex; justify-content: space-between; align-items: stretch; gap: var(--space-9); }
/* Columns take their natural width; the spare room is shared equally between them */
.mega-col { flex: none; }
.mega-col { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); }
.mega-heading { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--color-ink); font-size: var(--fs-title); font-weight: var(--fw-medium); text-decoration: none; }
.mega-text { margin: 0 0 var(--space-2); color: var(--color-graphite); font-size: var(--fs-small); }
.mega-links { display: flex; flex-direction: column; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.mega-link { color: var(--color-graphite); font-size: var(--fs-small); text-decoration: none; transition: color var(--motion-fast) var(--ease-out); }
.mega-link:hover,
.mega-heading:hover { color: var(--color-ink); text-decoration: underline; text-underline-offset: 4px; }
.mega-more { margin-top: var(--space-3); }
/* Photo card in the third column of the mega menu */
.mega-feature { order: -1; flex: 0 0 var(--mega-feature-w); --media-overlay-h: 100%; min-height: var(--mega-feature-h); }
.mega-feature .media-overlay-caption { padding: var(--space-6); }
.mega-feature-title { margin: 0; font-size: var(--fs-display-md); font-weight: var(--fw-light); line-height: var(--lh-heading); letter-spacing: var(--ls-heading); }

/* Phone menu: the three "What we do" pages listed under it */
.menu-link-label { cursor: default; }
.menu-sub { display: flex; flex-direction: column; padding: var(--space-2) 0 var(--space-3) var(--space-5); border-bottom: var(--border) solid var(--color-line-dark); }
.menu-sub-link { padding-block: var(--space-2); color: var(--color-on-ink-muted); font-size: var(--fs-body); text-decoration: none; }
.menu-sub-link:hover { color: var(--color-on-ink); }

/* Tiles that link to a page (sector cards) */
.tile-link { color: inherit; text-decoration: none; }
.tile-link .link { align-self: flex-start; }
/* Sector featured image: fills the top of the card, edge to edge */
.tile-image { display: block; width: calc(100% + 2 * var(--space-7)); margin: calc(-1 * var(--space-7)) calc(-1 * var(--space-7)) 0; aspect-ratio: 16 / 9; object-fit: cover; filter: var(--photo-filter); }

/* People grid: name on the photo over a dark fade, role revealed on hover, a black button below */
.people-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--person-card-min), 1fr)); gap: var(--frame-gap); margin: 0; padding: 0; list-style: none; }
.person-card { display: flex; flex-direction: column; height: 100%; color: inherit; text-decoration: none; }
.person-photo-box { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--color-ink); }
.person-photo { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center top; filter: var(--photo-filter); transition: transform var(--motion-base) var(--ease-out); }
.person-initials { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; color: var(--color-paper); font-size: var(--fs-display-lg); font-weight: var(--fw-light); }
.person-caption {
  position: absolute;
  inset: auto 0 0 0;
  display: flex;
  flex-direction: column;
  padding: var(--space-11) var(--space-5) var(--space-5);
  background: var(--hero-fade);
  color: var(--color-on-ink);
}
.person-name { font-size: var(--fs-title); font-weight: var(--fw-medium); line-height: var(--lh-heading); }
/* The role takes no space until hover, then slides open under the name */
.person-role {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  color: var(--color-on-ink-muted);
  font-size: var(--fs-small);
  line-height: var(--lh-heading);
  transition: max-height var(--motion-base) var(--ease-out), opacity var(--motion-base) var(--ease-out), margin var(--motion-base) var(--ease-out);
}
.person-card:hover .person-role,
.person-card:focus-visible .person-role { max-height: var(--space-12); margin-top: var(--space-2); opacity: 1; }
.person-card:hover .person-photo { transform: scale(var(--zoom-hover)); }
/* Touch screens have no hover, so the role always shows there */
@media (hover: none) {
  .person-role { max-height: none; margin-top: var(--space-2); opacity: 1; }
}
.person-card-foot { display: flex; padding-top: var(--space-3); }
.person-btn { align-self: flex-start; }
.person-card:hover .person-btn { background: var(--color-ink-raised); }
.person-card:hover .person-btn .btn-arrow { transform: translateX(var(--nudge)) rotate(var(--turn-quarter)); }

/* Detail pages: plain lists with lines between items */
.detail-list { margin: 0; padding: 0; list-style: none; }
.detail-item { padding-block: var(--space-4); font-size: var(--fs-lede); line-height: var(--lh-body); }
.detail-item + .detail-item { border-top: var(--border) solid var(--color-line); }
.detail-link { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--color-ink); text-decoration: none; }
.detail-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.card-light { background: var(--color-paper); }

/* People row on profile pages: one sideways-scrolling row, about 4.5 cards in view, arrows instead of a scrollbar */
.people-scroll {
  grid-template-columns: none;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - (var(--people-cols) - 0.5) * var(--frame-gap)) / var(--people-cols));
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.people-scroll::-webkit-scrollbar { display: none; }
.people-scroll > li { scroll-snap-align: start; }
/* Arrow buttons on a light background */
.slider-nav-dark .slider-btn { border-color: var(--color-line); color: var(--color-ink); }
.slider-nav-dark .slider-btn:hover:not(:disabled) { background: var(--color-ink); color: var(--color-paper); }

/* Person page: biography on the left, labelled facts on the right (same layout for every profile) */
.profile-layout { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: var(--space-12); align-items: start; }
.profile-main { display: flex; flex-direction: column; gap: var(--space-10); }
.profile-main .h2 { margin-bottom: var(--space-2); }
.profile-main .lede { text-align: justify; hyphens: auto; }
/* Facts stay in view beside the biography while scrolling on desktop */
.profile-facts { position: sticky; top: var(--sticky-offset); padding: var(--space-7); background: var(--color-canvas); }
.profile-cta { display: flex; flex-direction: column; gap: var(--space-6); padding: var(--space-8); background: var(--color-ink); color: var(--color-on-ink); }
.profile-cta .text { color: var(--color-on-ink-muted); }
.facts { display: flex; flex-direction: column; margin: 0; }
.fact { display: flex; flex-direction: column; gap: var(--space-2); padding-block: var(--space-5); }
.fact:first-child { padding-top: 0; }
.fact:last-child { padding-bottom: 0; }
.fact + .fact { border-top: var(--border) solid var(--color-line); }
.fact-label { color: var(--color-graphite); font-size: var(--fs-micro); font-weight: var(--fw-semibold); letter-spacing: 0.06em; text-transform: uppercase; }
.fact-value { margin: 0; font-size: var(--fs-small); font-weight: var(--fw-medium); line-height: var(--lh-body); }
.fact-list { display: flex; flex-direction: column; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
/* Small round bullet, matching the dots used in the section labels */
.fact-list li { position: relative; padding-left: var(--space-5); }
.fact-list li::before { content: ""; position: absolute; left: 0; top: 0.65em; width: var(--dot-size); height: var(--dot-size); border-radius: var(--radius-round); background: currentColor; }
.fact-link { color: var(--color-ink); word-break: break-word; }

/* Recent projects */
.project-photo { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.empty-note { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-6); max-width: var(--text-max); padding: var(--space-8); background: var(--color-canvas); }
.nav-link {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch);
  padding-inline: var(--space-4);
  border-radius: var(--radius-pill);
  color: var(--color-graphite);
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  text-decoration: none;
  white-space: nowrap;
}
.nav-link-active { color: var(--color-ink); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 8px; }
.header-actions { display: flex; align-items: center; gap: var(--space-2); }
.menu-button {
  display: none;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--button-h);
  padding-inline: var(--space-5);
  border: var(--border) solid var(--color-line);
  border-radius: var(--radius-pill);
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  cursor: pointer;
}
.menu-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  padding: var(--space-6) var(--panel-pad-x-sm) var(--space-8);
  border-radius: var(--radius-panel);
  background: var(--color-ink);
  color: var(--color-on-ink);
  /* Scrolls on short screens; the space left below the header bar */
  max-height: calc(100vh - var(--menu-offset));
  overflow-y: auto;
}
.menu-list { display: flex; flex-direction: column; }
.menu-link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  min-height: var(--touch);
  padding-block: var(--space-3);
  border-bottom: var(--border) solid var(--color-line-dark);
  color: var(--color-on-ink);
  font-size: var(--fs-display-md-sm);
  font-weight: var(--fw-light);
  text-decoration: none;
}
.menu-link-active { font-weight: var(--fw-medium); }
.menu-contact { display: flex; flex-direction: column; gap: var(--space-1); color: var(--color-on-ink-muted); font-size: var(--fs-small); }
.menu-contact-link { color: var(--color-on-ink); text-decoration: none; }

/* Home hero */
.hero {
  display: flex;
  gap: var(--frame-gap);
  min-height: var(--hero-h);
  /* Full window width, past the page padding and the centred column */
  width: 100vw;
  margin-inline: calc(50% - 50vw);
}
.hero-info {
  flex: 0 0 var(--hero-info-w);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-9);
  padding: var(--space-9) var(--space-8);
  border-radius: var(--radius-panel);
  background: var(--color-paper);
}
.hero-intro { margin: 0; font-size: var(--fs-lede); line-height: var(--lh-body); }
.hero-photo {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: var(--space-7);
  /* Text and controls line up with the page column below, even though the photo spans the window */
  --hero-side: max(calc(var(--frame-gap) + var(--panel-pad-x)), calc((100vw - var(--page-max)) / 2 + var(--panel-pad-x)));
  padding: var(--space-12) var(--hero-side);
  border-radius: var(--radius-panel);
  background-color: var(--color-ink);
  background-image: linear-gradient(var(--color-scrim-top), var(--color-scrim-bottom)), var(--photo);
  background-size: cover;
  background-position: center;
  color: var(--color-on-ink);
}
.hero-meta { margin: 0; color: var(--color-on-ink-muted); font-size: var(--fs-small); }
.hero-bottom { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--space-7); flex-wrap: wrap; }
.hero-copy { display: flex; flex-direction: column; gap: var(--space-6); max-width: var(--head-max); }

/* Hero slider: photos stack and cross-fade behind the copy; arrows sit bottom left under the buttons */
.hero-slider { position: relative; isolation: isolate; overflow: hidden; background-image: none; }
.hero-slide {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: var(--hero-fade), var(--photo);
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity var(--motion-slow) var(--ease-out);
}
.hero-slide.is-active { opacity: 1; }
.hero-title { margin: 0; animation: fade var(--motion-base) var(--ease-out) both; }
.slider-nav { display: flex; align-items: center; gap: var(--space-2); }
.slider-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--button-h);
  height: var(--button-h);
  padding: 0;
  border: var(--border) solid var(--color-line-photo);
  background: var(--color-clear);
  color: var(--color-on-ink);
  cursor: pointer;
  transition: background-color var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-out);
}
.slider-btn:hover:not(:disabled) { background: var(--color-paper); color: var(--color-ink); }
.slider-btn:disabled { opacity: 0.35; cursor: default; }
.slider-count { margin-right: var(--space-3); color: var(--color-on-ink-muted); font-size: var(--fs-small); font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) {
  .hero-slide { transition: none; }
  .area-grid, .people-scroll { scroll-behavior: auto; }
  .hero-title { animation: none; }
}

/* Stats: bold number over a grey label that darkens on hover */
.stats { display: flex; justify-content: flex-start; gap: var(--space-6); }
.stat { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); text-align: left; }
.stat-value {
  font-size: var(--fs-stat);
  font-weight: var(--fw-bold);
  line-height: 1;
  letter-spacing: var(--ls-display);
}
/* Columns share the width evenly; balanced wrapping keeps each label to two even lines */
.stat-label { max-width: var(--stat-label-max); text-wrap: balance; color: var(--color-graphite); font-size: var(--fs-small); transition: color var(--motion-fast) var(--ease-out); }
.stat:hover .stat-label { color: var(--color-ink); }

/* Practice index (dark list) */
.index { display: flex; flex-direction: column; border-top: var(--border) solid var(--color-line-dark); }
.index-row { display: flex; flex-direction: column; gap: var(--space-4); padding-block: var(--space-5); border-bottom: var(--border) solid var(--color-line-dark); }
.index-toggle {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-6);
  width: 100%;
  padding: 0;
  border: 0;
  background: var(--color-clear);
  color: var(--color-on-ink-muted);
  font-family: var(--font-sans);
  text-align: left;
  cursor: pointer;
}
.index-row-open .index-toggle { color: var(--color-on-ink); }
.index-name { font-size: var(--fs-display-md); font-weight: var(--fw-light); line-height: var(--lh-heading); letter-spacing: var(--ls-heading); }
.index-number { flex: none; font-size: var(--fs-small); }
.index-body { display: none; flex-direction: column; gap: var(--space-5); }
.index-row-open .index-body { display: flex; }
.index-detail { display: flex; gap: var(--space-9); }
.index-summary { flex: 1 1 0; margin: 0; color: var(--color-on-ink-muted); }
.index-scope { flex: 1 1 0; display: flex; flex-direction: column; gap: var(--space-3); }
.scope-label { color: var(--color-on-ink); font-size: var(--fs-small); font-weight: var(--fw-semibold); }
.bullets { display: flex; flex-direction: column; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.bullet { display: flex; align-items: flex-start; gap: var(--space-3); color: var(--color-on-ink-muted); }
.bullet-mark { flex: none; width: var(--bullet-size); height: var(--bullet-size); margin-top: var(--bullet-offset); border-radius: var(--radius-round); background: var(--color-on-ink); }
/* Home practice areas: one row of wide columns that scrolls sideways */
.area-grid {
  display: grid;
  grid-auto-flow: column;
  /* 3.5 columns in view so the half column hints there is more to scroll */
  grid-auto-columns: calc(100% / var(--area-cols));
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  border-top: var(--border) solid var(--color-line-dark);
  border-bottom: var(--border) solid var(--color-line-dark);
}
.area-col {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding: var(--space-8) var(--space-8) var(--space-8) 0;
  scroll-snap-align: start;
}
.area-col + .area-col { padding-left: var(--space-8); border-left: var(--border) solid var(--color-line-dark); }
.area-grid::-webkit-scrollbar { display: none; }
.area-icon { display: flex; color: var(--color-on-ink); }
.area-icon .icon { width: var(--area-icon); height: var(--area-icon); }
.head-actions { align-self: center; display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; }
.area-name { margin: 0; font-size: var(--fs-title); font-weight: var(--fw-medium); line-height: var(--lh-heading); }
.area-summary { flex: 1 1 auto; margin: 0; text-align: justify; hyphens: auto; color: var(--color-on-ink-muted); font-size: var(--fs-small); }

/* Client logos: a row of equal cells, logos in grey until hovered */
.logo-grid { display: grid; grid-template-columns: repeat(var(--logo-cols), minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; border-top: var(--border) solid var(--color-line); border-left: var(--border) solid var(--color-line); }
.logo-cell { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: var(--logo-cell-h); text-align: center; padding: var(--space-6); border-right: var(--border) solid var(--color-line); border-bottom: var(--border) solid var(--color-line); }
.logo-cell-empty { color: var(--color-graphite); font-size: var(--fs-small); background: var(--color-paper); }
.logo-link-client { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; height: 100%; color: inherit; text-decoration: none; }
.client-logo-box { display: flex; align-items: center; justify-content: center; height: var(--client-logo-h); }
/* The name rises in on a dark gradient while the box is hovered or focused */
.client-name {
  position: absolute;
  inset: auto 0 0 0;
  padding: var(--space-8) var(--space-4) var(--space-4);
  background: linear-gradient(to top, rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0));
  color: var(--color-on-ink);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  line-height: var(--lh-heading);
  opacity: 0;
  transform: translateY(var(--space-2));
  transition: opacity var(--motion-base) var(--ease-out), transform var(--motion-base) var(--ease-out);
  pointer-events: none;
}
.logo-cell:hover .client-name,
.logo-cell:focus-within .client-name { opacity: 1; transform: none; }
/* Multiply lets white logo backgrounds take on the section colour */
.client-logo { max-width: 78%; max-height: var(--client-logo-h); object-fit: contain; mix-blend-mode: multiply; filter: grayscale(1); opacity: 0.7; transition: filter var(--motion-base) var(--ease-out), opacity var(--motion-base) var(--ease-out); }
.logo-cell:hover .client-logo,
.logo-cell:focus-within .client-logo { filter: none; opacity: 1; }

/* Bento tiles */
/* Why NAA: tall photo on the left, the points stacked as a list on the right */
.why { display: flex; gap: var(--space-12); align-items: stretch; }
/* Photo frame with a bottom-up dark fade and a heading on top (Why NAA, Our story) */
.media-overlay {
  position: relative;
  isolation: isolate;
  min-height: var(--media-overlay-h);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--color-ink);
  color: var(--color-on-ink);
}
.media-overlay::after { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--hero-fade); }
.media-overlay-caption { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-8); }
.media-overlay-caption .kicker { color: var(--color-on-ink-muted); }
.media-overlay-photo {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  filter: var(--photo-filter);
}
.why > .media-overlay { flex: 0 0 var(--why-photo-w); width: var(--why-photo-w); }
.split-stretch { align-items: stretch; }
/* Before you call: the wide team photo, cropped to show the people on its left; white text on the fade */
.faq-media .media-overlay-photo { object-position: 18% center; }
.media-overlay-caption .text { color: var(--color-on-ink-muted); }
.why-body { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.why-list { margin: 0; padding: 0; list-style: none; }
.why-item { display: flex; align-items: flex-start; gap: var(--space-6); padding-block: var(--space-6); }
/* Lines only between points, none above the first or below the last */
.why-item + .why-item { border-top: var(--border) solid var(--color-line); }
.tiles { display: flex; flex-wrap: wrap; gap: var(--frame-gap); }
/* About "Standing": four equal grey cards in a row, numbered headings */
.standing-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--frame-gap); margin: 0; padding: 0; list-style: none; }
.standing-card { display: flex; flex-direction: column; gap: var(--space-8); padding: var(--space-6); background: var(--color-canvas); }
.standing-icon { flex: none; display: flex; align-items: center; justify-content: center; width: var(--icon-tile); height: var(--icon-tile); background: var(--color-ink); color: var(--color-paper); }
.standing-body { display: flex; flex-direction: column; gap: var(--space-3); }
.standing-title { margin: 0; font-size: var(--fs-standing); font-weight: var(--fw-medium); line-height: var(--lh-heading); }
/* Always exactly two lines, so every description starts at the same height */
.standing-title-text { display: block; min-height: calc(2em * var(--lh-heading)); white-space: nowrap; }
.standing-num { display: block; margin-bottom: var(--space-2); color: var(--color-graphite); font-size: var(--fs-small); font-variant-numeric: tabular-nums; }
.standing-card .text { font-size: var(--fs-small); text-align: justify; hyphens: auto; }
.standing-link { display: inline-flex; align-items: center; gap: var(--space-1); color: var(--color-ink); white-space: nowrap; }
/* Hover: the card turns dark and lifts, like the cards on the About and Sectors pages */
.standing-card,
.standing-card .text,
.standing-card .standing-num,
.standing-card .standing-link,
.standing-icon { transition: transform var(--motion-base) var(--ease-out), background-color var(--motion-base) var(--ease-out), color var(--motion-base) var(--ease-out); }
.standing-card:hover { transform: translateY(var(--lift)); background: var(--color-ink); color: var(--color-on-ink); }
.standing-card:hover .text,
.standing-card:hover .standing-num { color: var(--color-on-ink-muted); }
.standing-card:hover .standing-link { color: var(--color-on-ink); }
.standing-card:hover .standing-icon { background: var(--color-paper); color: var(--color-ink); }
/* Three equal tiles per row (Sectors page) */
.tiles-3 .tile { flex: 0 1 calc((100% - 2 * var(--frame-gap)) / 3); }
.tile {
  flex: 1 1 var(--tile-min);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-9);
  min-height: var(--tile-h);
  padding: var(--space-7);
  border-radius: var(--radius-card);
  background: var(--color-canvas);
}
/* A tile turns dark while hovered; .tile-ink keeps one dark permanently */
.tile-ink,
.tile:hover { background: var(--color-ink); color: var(--color-on-ink); }
.tile-ink .text,
.tile:hover .text { color: var(--color-on-ink-muted); }
.icon-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--icon-tile);
  height: var(--icon-tile);
  border-radius: var(--radius-small);
  background: var(--color-ink);
  color: var(--color-paper);
}
.tile-ink .icon-tile,
.tile:hover .icon-tile { background: var(--color-paper); color: var(--color-ink); }

/* Portrait cards */
.portraits { display: flex; flex-wrap: wrap; gap: var(--frame-gap); }
.portrait-intro {
  flex: 1 1 var(--card-min);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-7);
  min-height: var(--portrait-h);
  padding: var(--space-7);
  border-radius: var(--radius-card);
  background: var(--color-ink);
  color: var(--color-on-ink);
}
.portrait-intro .text { color: var(--color-on-ink-muted); }
.portrait {
  flex: 1 1 0;
  min-width: 0;
  display: block;
  height: var(--portrait-h);
  border-radius: var(--radius-card);
  object-fit: cover;
  object-position: center top;
  filter: var(--photo-filter);
  background: var(--color-mist);
}
.portrait-row { flex: 2.6 1 0; min-width: 0; display: flex; gap: var(--frame-gap); }

/* Article cards */
.card-image-link { display: block; align-self: stretch; margin: calc(-1 * var(--space-7)) calc(-1 * var(--space-7)) 0; overflow: hidden; }
.card-image { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; transition: transform var(--motion-base) var(--ease-out); }
.card:hover .card-image { transform: scale(var(--zoom-hover)); }
.cards { display: flex; flex-wrap: wrap; gap: var(--frame-gap); }
.card {
  flex: 1 1 var(--card-min);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding: var(--space-7);
  border-radius: var(--radius-card);
  background: var(--color-canvas);
  color: inherit;
  text-decoration: none;
}
.card-ink { background: var(--color-ink); color: var(--color-on-ink); }
.card-ink .text,
.card-ink .small { color: var(--color-on-ink-muted); }
.card-ink .chip { background: var(--color-ink-raised); color: var(--color-on-ink); }
.card-feature { flex-basis: 100%; padding: var(--space-11) var(--space-10); }
.card-meta { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); }
.card-body { display: flex; flex-direction: column; gap: var(--space-3); flex-grow: 1; }
.card-foot { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); }

/* FAQ */
.faq { display: flex; flex-direction: column; gap: var(--space-2); }
.faq-item { border-radius: var(--radius-card); background: var(--color-canvas); }
.faq-toggle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  width: 100%;
  min-height: var(--touch);
  padding: var(--space-5) var(--space-6);
  border: 0;
  background: var(--color-clear);
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  text-align: left;
  cursor: pointer;
}
.faq-icon { transition: transform var(--motion-fast) var(--ease-out); }
.faq-item-open .faq-icon { transform: rotate(var(--turn-quarter)); }
.faq-answer { margin: 0; padding: 0 var(--space-6) var(--space-6); color: var(--color-graphite); }

/* Page hero (inner pages) */

/* Glance list (about) */
.glance { display: flex; flex-direction: column; }
.glance-row { display: flex; justify-content: space-between; gap: var(--space-6); padding-block: var(--space-4); border-top: var(--border) solid var(--color-line); }
.glance-label { color: var(--color-graphite); font-size: var(--fs-small); }
.glance-value { font-weight: var(--fw-medium); text-align: right; }

/* Gallery wall */
.wall { display: flex; flex-wrap: wrap; gap: var(--frame-gap); }
.wall-item { flex: 0 0 calc((100% - 3 * var(--frame-gap)) / 4); display: flex; flex-direction: column; gap: var(--space-3); margin: 0; min-width: 0; }
.wall-feature { flex-basis: calc((100% - var(--frame-gap)) / 2); }
.wall-fifth { flex-basis: calc((100% - 4 * var(--frame-gap)) / 5); }
.wall-img {
  display: block;
  width: 100%;
  height: var(--wall-h);
  border-radius: var(--radius-card);
  object-fit: cover;
  object-position: center top;
  filter: var(--photo-filter);
  background: var(--color-mist);
}
.wall-tall .wall-img { height: var(--wall-feature-h); }
.wall-feature .wall-img { object-position: center; }
.wall-slot {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--space-3);
  height: var(--wall-h);
  padding: var(--space-6);
  border: var(--border) dashed var(--color-graphite);
  border-radius: var(--radius-card);
  color: var(--color-graphite);
  font-size: var(--fs-small);
  text-align: center;
}
.wall-caption { color: var(--color-graphite); font-size: var(--fs-small); }

/* People profiles */
.profiles { display: flex; flex-direction: column; gap: var(--frame-gap); }
.profile { display: flex; gap: var(--space-11); padding: var(--space-9); border-radius: var(--radius-card); background: var(--color-canvas); }
.profile-side { flex: 0 0 var(--profile-side-w); display: flex; flex-direction: column; gap: var(--space-5); }
.monogram {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--monogram);
  height: var(--monogram);
  border-radius: var(--radius-card);
  background: var(--color-ink);
  color: var(--color-paper);
  font-size: var(--fs-display-md);
  font-weight: var(--fw-light);
}
.profile-body { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: var(--space-5); }
.profile-detail { display: flex; flex-direction: column; gap: var(--space-4); }
.profile-toggle { display: none; }

/* Contact */
.contact-list { display: flex; flex-direction: column; }
.contact-item { display: flex; flex-direction: column; gap: var(--space-1); padding-block: var(--space-5); border-top: var(--border) solid var(--color-line); }
.contact-value { margin: 0; color: var(--color-ink); font-size: var(--fs-lede-sm); font-weight: var(--fw-medium); text-decoration: none; }
.mockup-tag {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--touch);
  padding-inline: var(--space-4);
  border: var(--border) dashed var(--color-graphite);
  border-radius: var(--radius-pill);
  color: var(--color-ink);
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
}
.form { display: flex; flex-direction: column; gap: var(--space-5); }
.form-row { display: flex; gap: var(--space-4); }
.field { flex: 1 1 0; display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.field-label { font-size: var(--fs-small); font-weight: var(--fw-semibold); }
.field-input {
  min-height: var(--button-h);
  padding-inline: var(--space-5);
  border: var(--border) solid var(--color-clear);
  border-radius: var(--radius-small);
  background: var(--color-canvas);
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
}
.field-textarea { min-height: var(--textarea-h); padding: var(--space-4) var(--space-5); resize: vertical; }
.select-wrap { display: flex; align-items: center; gap: var(--space-2); padding-right: var(--space-4); border-radius: var(--radius-small); background: var(--color-canvas); }
/* On a grey section the fields turn white so they still stand out */
.panel-canvas .field-input,
.panel-canvas .select-wrap { background: var(--color-paper); }
.field-select { flex: 1 1 0; min-width: 0; appearance: none; background: var(--color-clear); }

/* Footer */
.footer { display: flex; flex-direction: column; gap: var(--space-11); }
/* Runs to the bottom of the window as well as both sides */
.footer.panel-bleed { margin-bottom: calc(-1 * var(--bleed-gap)); }
/* Brand block on the left; the three link columns share the rest with equal gaps between them */
.footer-top { display: grid; grid-template-columns: minmax(var(--footer-brand-min), 2fr) 3fr; align-items: start; gap: var(--space-9); }
.footer-cols { display: flex; justify-content: space-between; gap: var(--space-8); }
/* Not enough room side by side: the brand block moves above the link columns */
@container site (max-width: 1180px) {
  .footer-top { grid-template-columns: 1fr; }
  .footer-top .footer-title { max-width: none; }
}
.footer-title { display: flex; flex-direction: column; align-items: center; gap: var(--space-8); max-width: var(--head-max); text-align: center; }
.footer-title .logo { align-self: center; }
.footer-title .row { justify-content: center; }
.footer-col { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); white-space: nowrap; }
.footer-heading { margin: 0 0 var(--space-2); color: var(--color-on-ink); font-size: var(--fs-body); font-weight: var(--fw-semibold); }
.footer-contact { color: var(--color-on-ink-muted); font-size: var(--fs-small); text-align: left; }
.footer-link { color: var(--color-on-ink); font-size: var(--fs-small); text-decoration: none; }
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4) var(--space-8);
  padding-top: var(--space-7);
  border-top: var(--border) solid var(--color-line-dark);
}
.footer-legal { color: var(--color-on-ink-muted); font-size: var(--fs-micro); }


@media (prefers-reduced-motion: reduce) {
  .faq-icon { transition: none; }
}

/* Tablet: 1100px and below */
@container site (max-width: 1100px) {
  .area-grid { --area-cols: 2.5; }
  .people-scroll { --people-cols: 2.5; }
  .why { flex-direction: column; gap: var(--space-9); }
  .why > .media-overlay { flex: none; width: 100%; }
  .media-overlay { min-height: var(--media-overlay-h-sm); }
  .panel { padding: var(--panel-pad-y-md) var(--panel-pad-x-md); }
  .panel-bleed { --bleed-pad: var(--panel-pad-x-md); }
  .nav { display: none; }
  .menu-button { display: inline-flex; }
  .h1 { font-size: var(--fs-display-xl-md); }
  .h2 { font-size: var(--fs-display-lg-md); }
  .h3,
  .index-name { font-size: var(--fs-display-md-md); }
  .head { flex-direction: column; align-items: flex-start; gap: var(--space-6); margin-bottom: var(--space-9); }
  .split,
  .page-hero { flex-direction: column; align-items: stretch; }
  .split .col,
  .split .col-wide,
  .page-hero .col,
  .page-hero .col-wide { flex: none; }

  .hero { flex-direction: column; min-height: 0; }
  .hero-photo { order: -1; flex: none; min-height: var(--hero-h-md); padding: var(--space-9) calc(var(--frame-gap) + var(--panel-pad-x-md)); }
  .hero-info { flex: none; gap: var(--space-7); padding: var(--space-8); }

  .stat-value { font-size: var(--fs-stat-md); }

  .index-detail { flex-direction: column; gap: var(--space-5); }
  .index-summary,
  .index-scope { flex: none; }

  .tile { flex-basis: calc((100% - var(--frame-gap)) / 2); min-height: 0; }
  .tiles-3 .tile { flex-basis: calc((100% - var(--frame-gap)) / 2); }
  .standing-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .profile-layout { grid-template-columns: 1fr; gap: var(--space-9); }
  .profile-facts { position: static; }
  .portraits { flex-direction: column; }
  .portrait-intro { flex: none; min-height: 0; }
  .portrait-row { flex: none; flex-wrap: wrap; }
  .portrait { flex: 1 1 calc((100% - 3 * var(--frame-gap)) / 4); height: var(--portrait-h-md); }

  .profile { flex-direction: column; gap: var(--space-6); padding: var(--space-8); }
  .profile-side { flex: none; flex-direction: row; align-items: center; }
  .profile-body { flex: none; }
  .profile-toggle { display: inline-flex; }
  .profile-closed .profile-detail { display: none; }
  .monogram { width: var(--monogram-sm); height: var(--monogram-sm); font-size: var(--fs-display-md-sm); }

  .wall-item { flex-basis: calc((100% - 2 * var(--frame-gap)) / 3); }
  .wall-fifth { flex-basis: calc((100% - 2 * var(--frame-gap)) / 3); }
  .wall-feature,
  .wall-wide { flex-basis: 100%; }
  .wall-img,
  .wall-tall .wall-img { height: var(--wall-h-md); }
  .wall-feature .wall-img { height: var(--wall-feature-h-md); }
  .wall-wide .wall-slot { height: var(--wall-slot-h); }

}

/* Mobile: 640px and below */
@container site (max-width: 640px) {
  .area-grid { --area-cols: 1.2; }
  .logo-grid { --logo-cols: 2; }
  .people-scroll { --people-cols: 1.3; }
  .h3.who-statement { font-size: var(--fs-who-sm); }
  .site { gap: var(--frame-gap-sm); padding: var(--frame-gap-sm); }
  .header { --header-bleed: var(--frame-gap-sm); }
  .main { gap: var(--frame-gap-sm); }
  .header { gap: var(--frame-gap-sm); }
  .panel { padding: var(--panel-pad-y-sm) var(--panel-pad-x-sm); border-radius: var(--radius-panel-sm); }
  .panel-bleed { --bleed-pad: var(--panel-pad-x-sm); --bleed-gap: var(--frame-gap-sm); }
  .header-bar,
  .menu-panel,
  .hero-info,
  .hero-photo { border-radius: var(--radius-panel-sm); }
  .header-cta { display: none; }
  .logo { height: var(--logo-h-sm); }
  .h1 { font-size: var(--fs-display-xl-sm); }
  .h2 { font-size: var(--fs-display-lg-sm); }
  .h3,
  .index-name { font-size: var(--fs-display-md-sm); }
  .title { font-size: var(--fs-title-sm); }
  .lede,
  .hero-intro { font-size: var(--fs-lede-sm); }
  .stack-lg { gap: var(--space-8); }
  .head { margin-bottom: var(--space-8); }
  .btn { align-self: stretch; }
  .row .btn { flex: 1 1 100%; }

  .hero-photo { min-height: var(--hero-h-sm); padding: var(--space-8) calc(var(--frame-gap-sm) + var(--panel-pad-x-sm)); }
  .hero-info { padding: var(--space-7) var(--space-5); }

  .stats { flex-direction: column; gap: var(--space-6); }
  .stat-value { font-size: var(--fs-stat-sm); }

  .index-row { padding-block: var(--space-4); }

  .tile { flex-basis: 100%; gap: var(--space-3); padding: var(--space-6); }
  .tiles-3 .tile { flex-basis: 100%; }
  .standing-grid { grid-template-columns: 1fr; }
  .tile .icon-tile { display: none; }
  .tile .h3 { font-size: var(--fs-title-sm); font-weight: var(--fw-medium); }
  .card-excerpt,
  .portrait-extra { display: none; }
  .portrait-row { gap: var(--frame-gap-sm); }
  .portrait { flex-basis: calc((100% - var(--frame-gap-sm)) / 2); height: var(--portrait-h-sm); }
  .portrait-intro { padding: var(--space-6); }
  .card { padding: var(--space-6); }
  .card-feature { padding: var(--space-7) var(--space-6); }
  .card-foot { flex-direction: column; align-items: flex-start; }
  .faq-toggle { padding: var(--space-4) var(--space-5); }
  .faq-answer { padding: 0 var(--space-5) var(--space-5); }

  .glance-row { flex-direction: column; gap: var(--space-1); }
  .glance-value { text-align: left; }

  .profile { padding: var(--space-6); }
  .profile-side { flex-direction: column; align-items: flex-start; gap: var(--space-4); }
  .monogram { width: var(--monogram-sm); height: var(--monogram-sm); font-size: var(--fs-display-md-sm); }

  .chips-scroll { flex-wrap: nowrap; overflow-x: auto; padding-bottom: var(--space-2); }
  .wall { gap: var(--frame-gap-sm); }
  .wall-item { flex-basis: calc((100% - var(--frame-gap-sm)) / 2); }
  .wall-feature { flex-basis: 100%; }
  .wall-wide { flex-basis: calc((100% - var(--frame-gap-sm)) / 2); }
  .wall-img,
  .wall-tall .wall-img { height: var(--wall-h-sm); }
  .wall-feature .wall-img { height: var(--wall-feature-h-sm); }
  .wall-slot,
  .wall-wide .wall-slot { height: var(--wall-h-sm); padding: var(--space-3); }
  .wall-caption { font-size: var(--fs-micro); }
  .wall-people .wall-item { flex-basis: calc((100% - 2 * var(--frame-gap-sm)) / 3); }
  .wall-people .wall-img { height: var(--wall-people-h-sm); }

  .form-row { flex-direction: column; }
  .field { flex: none; }
  .footer { gap: var(--space-9); }
  .footer-cols { flex-direction: column; }
  .footer-col { white-space: normal; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
}

/* ===== Hero overlays ===== */

/* Frosted chip and card that sit on top of photos */

/* Inner page hero: text panel beside a photo card with overlay */
/* Inner page hero: full window width, text panel and photo meeting with no gap */
.page-hero {
  --hero-edge: var(--frame-gap);
  --hero-pad: var(--panel-pad-x);
  display: flex;
  align-items: stretch;
  width: 100vw;
  margin-inline: calc(50% - 50vw);
}
.page-hero-text {
  flex: 1.1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-9);
  padding: var(--panel-pad-y) var(--hero-pad);
  /* Text lines up with the page column even though the panel reaches the window edge */
  padding-left: max(calc(var(--hero-edge) + var(--hero-pad)), calc((100vw - var(--page-max)) / 2 + var(--hero-pad)));
  border-radius: var(--radius-panel);
  background: var(--color-paper);
}
.photo-card {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: var(--space-7);
  min-height: var(--photo-card-h);
  padding: var(--space-7);
  border-radius: var(--radius-panel);
  background-color: var(--color-ink);
  background-image: linear-gradient(var(--color-scrim-top), var(--color-scrim-bottom)), var(--photo);
  background-size: cover;
  background-position: center 20%;
  color: var(--color-on-ink);
}

/* ===== Motion: one load sequence, plus feedback on interaction ===== */
@keyframes rise { from { opacity: 0; transform: translateY(var(--rise)); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

.reveal { animation: rise var(--motion-slow) var(--ease-out) both; }
.reveal-1 { animation-delay: var(--delay-1); }
.reveal-2 { animation-delay: var(--delay-2); }
.reveal-3 { animation-delay: var(--delay-3); }
.reveal-4 { animation-delay: var(--delay-4); }
/* Our people hero: a row of tall portraits in place of the single photo */
.hero-portraits { flex: 1.6 1 0; min-width: 0; display: flex; gap: var(--frame-gap); padding: var(--frame-gap); background: var(--color-paper); }
.hero-portrait { flex: 1 1 0; min-width: 0; height: 100%; min-height: var(--hero-portrait-h); object-fit: cover; object-position: center top; filter: var(--photo-filter); background: var(--color-mist); animation: fade var(--motion-photo) var(--ease-out) both; }
/* Profile pages: a taller portrait so the whole person shows */
.page-hero-tall .photo-card { min-height: var(--profile-photo-h); background-position: center top; }
/* Name, role and buttons sit together in the middle of the tall panel instead of spreading to its edges */
.page-hero-tall .page-hero-text { justify-content: center; }
/* A person without a photo: their initials on a plain dark panel */
.photo-card-initials { align-items: center; justify-content: center; background-image: none; font-size: var(--fs-display-xl); font-weight: var(--fw-light); letter-spacing: var(--ls-display); }
.hero-photo,
.photo-card { animation: fade var(--motion-photo) var(--ease-out) both; }

.btn,
.chip,
.nav-link { transition: background-color var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-out), border-color var(--motion-fast) var(--ease-out); }
.btn-arrow { transition: transform var(--motion-fast) var(--ease-out); }
.btn:hover .btn-arrow { transform: translateX(var(--nudge)) rotate(var(--turn-quarter)); }
.btn-dark:hover { background: var(--color-ink-raised); }
.btn-outline:hover { border-color: var(--color-ink); }
.btn-outline-light:hover { border-color: var(--color-on-ink); }
.nav-link:hover { color: var(--color-ink); }
.nav-link-active:hover { color: var(--color-ink); }
.chip:hover { border-color: var(--color-ink); }

.card,
.tile,
.tile .text,
.tile .icon-tile { transition: transform var(--motion-base) var(--ease-out), background-color var(--motion-base) var(--ease-out), color var(--motion-base) var(--ease-out); }
.card:hover,
.tile:hover { transform: translateY(var(--lift)); }

.portrait,
.wall-img { transition: transform var(--motion-base) var(--ease-out); }
.portrait:hover,
.wall-img:hover { transform: scale(var(--zoom-hover)); }
/* Our people portraits: the hovered one widens, the others give up a little room */
.hero-portrait { transition: flex-grow var(--motion-slow) var(--ease-out); }
.hero-portrait:hover { flex-grow: var(--portrait-expand); }

.index-toggle { transition: color var(--motion-fast) var(--ease-out); }
.index-toggle:hover { color: var(--color-on-ink); }
.index-row-open .index-body,
.faq-answer,
.profile-open .profile-detail,
.menu-panel { animation: fade var(--motion-base) var(--ease-out) both; }

@media (prefers-reduced-motion: reduce) {
  .reveal,
  .hero-photo,
  .photo-card,
  .index-row-open .index-body,
  .faq-answer,
  .profile-open .profile-detail,
  .menu-panel { animation: none; }
  .btn, .chip, .nav-link, .btn-arrow, .card, .tile, .tile .text, .tile .icon-tile, .client-logo, .client-name, .standing-card, .standing-card .text, .standing-card .standing-num, .standing-card .standing-link, .standing-icon,
  .portrait, .hero-portrait, .wall-img, .index-toggle, .mega, .nav-mega-toggle .icon, .person-photo, .person-role { transition: none; }
  .btn:hover .btn-arrow,
  .card:hover,
  .tile:hover,
  .standing-card:hover,
  .portrait:hover,
  .wall-img:hover { transform: none; }
  .hero-portrait:hover { flex-grow: 1; }
}

/* Overlay and hero layout: tablet */
@container site (max-width: 1100px) {
  .page-hero { flex-direction: column; --hero-pad: var(--panel-pad-x-md); }
  .page-hero-text { flex: none; padding-block: var(--panel-pad-y-md); padding-right: calc(var(--hero-edge) + var(--hero-pad)); gap: var(--space-7); }
  .photo-card { flex: none; min-height: var(--photo-card-h-md); padding: var(--space-6); }
  .hero-portraits { flex: none; }
  .hero-portrait { min-height: var(--photo-card-h-md); }
  .page-hero-tall .photo-card { min-height: var(--profile-photo-h-md); }
  .hero-bottom { flex-direction: column; align-items: flex-start; }
}

/* Overlay and hero layout: mobile */
@container site (max-width: 640px) {
  .page-hero { --hero-edge: var(--frame-gap-sm); --hero-pad: var(--panel-pad-x-sm); }
  .page-hero-text { padding-block: var(--panel-pad-y-sm); border-radius: var(--radius-panel-sm); }
  .photo-card { min-height: var(--photo-card-h-sm); padding: var(--space-5); border-radius: var(--radius-panel-sm); }
}

/* ===== Live site additions ===== */

/* The page shell itself cannot read its own container width, so it uses a media query */
@media (max-width: 640px) {
  .site { gap: var(--frame-gap-sm); padding: var(--frame-gap-sm); }
  .header { --header-bleed: var(--frame-gap-sm); }
}

.skip-link {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 60;
  width: auto;
  align-self: flex-start;
  max-height: 0;
  overflow: hidden;
  border-radius: var(--radius-pill);
  background: var(--color-ink);
  color: var(--color-paper);
  font-weight: var(--fw-semibold);
  text-decoration: none;
}
.skip-link:focus { max-height: var(--space-13); padding: var(--space-3) var(--space-5); }

.notice {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-small);
  background: var(--color-canvas);
  color: var(--color-ink);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
}
.notice-success { background: var(--color-ink); color: var(--color-paper); }
.panel-ink .notice { background: var(--color-ink-raised); color: var(--color-on-ink); }
.field-error { color: var(--color-ink); font-size: var(--fs-micro); font-weight: var(--fw-semibold); }
.field-input[aria-invalid="true"] { border-color: var(--color-ink); }
.required-mark { color: var(--color-graphite); font-weight: var(--fw-regular); }
.honeypot { display: none; }

/* Article page */
.article-body { display: flex; flex-direction: column; gap: var(--space-5); max-width: var(--text-max); }
.article-body p { margin: 0; color: var(--color-ink); font-size: var(--fs-lede-sm); line-height: var(--lh-body); }
.is-hidden { display: none; }
img.monogram { object-fit: cover; object-position: center top; }
.card-title-link { color: inherit; text-decoration: none; }