/* ==========================================================================
   SAMBA & TAMARA — Advokat & Konsultan Hukum
   Design system

   Palette   Deep Navy  #1D1D44   structure, headings, chrome
             Forest Grn #1E3D2E   brand accent, links, CTA  (from logo)
             Pearl      #E9E0C8   bands, accents on navy
             Slate      #5F6074   body copy
             Stone      #A7A9A2   muted, from logo wordmark
             Ivory      #F5F5DC   page ground
   ========================================================================== */

/* ------------------------------------------------------------------ tokens */
:root {
  /* Brand constants — identical in both themes */
  --brand-navy:  #1D1D44;
  --brand-green: #1E3D2E;
  --brand-pearl: #E9E0C8;
  --brand-slate: #5F6074;
  --brand-stone: #A7A9A2;
  --brand-ivory: #F5F5DC;

  /* Light theme */
  --bg:          #FAF8F1;
  --bg-alt:      #F3EEE1;
  --bg-deep:     #1D1D44;
  --surface:     #FFFFFF;
  --surface-2:   #FBF9F3;

  --ink:         #1D1D44;
  --body:        #4C4D63;
  --muted:       #82849A;
  --on-deep:     #F5F2E8;
  --on-deep-dim: #ADAEC6;

  --accent:      #1E3D2E;
  --accent-soft: #2C5A44;
  --accent-wash: rgba(30, 61, 46, .07);

  --line:        rgba(29, 29, 68, .12);
  --line-soft:   rgba(29, 29, 68, .07);
  --line-deep:   rgba(245, 242, 232, .16);

  /* Ink used on top of a filled accent button. A token, not a
     theme-scoped override, so button modifiers can still win. */
  --btn-on-accent: #FFFFFF;

  --shadow-sm: 0 1px 2px rgba(29,29,68,.05), 0 2px 8px rgba(29,29,68,.04);
  --shadow-md: 0 4px 12px rgba(29,29,68,.07), 0 12px 32px rgba(29,29,68,.06);
  --shadow-lg: 0 12px 28px rgba(29,29,68,.10), 0 28px 64px rgba(29,29,68,.10);

  --font-display: 'Cormorant Garamond', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --section-y: clamp(4.5rem, 9vw, 8rem);
  --radius: 3px;
  --radius-lg: 6px;
  --header-h: 104px;

  --ease: cubic-bezier(.16, 1, .3, 1);
  --ease-out: cubic-bezier(.22, .61, .36, 1);

  color-scheme: light;
}

html[data-theme="dark"] {
  --bg:          #121230;
  --bg-alt:      #171739;
  --bg-deep:     #0D0D22;
  --surface:     #1A1A3D;
  --surface-2:   #1E1E46;

  --ink:         #F3F0E6;
  --body:        #BDBDD0;
  --muted:       #8A8CA6;
  --on-deep:     #F3F0E6;
  --on-deep-dim: #A2A3BE;

  --accent:      #8CBBA1;
  --accent-soft: #A6CFB7;
  --accent-wash: rgba(140, 187, 161, .10);

  --line:        rgba(243, 240, 230, .14);
  --line-soft:   rgba(243, 240, 230, .08);
  --line-deep:   rgba(243, 240, 230, .14);

  --btn-on-accent: #10102A;

  --shadow-sm: 0 1px 2px rgba(0,0,0,.30), 0 2px 8px rgba(0,0,0,.22);
  --shadow-md: 0 4px 12px rgba(0,0,0,.34), 0 12px 32px rgba(0,0,0,.28);
  --shadow-lg: 0 12px 28px rgba(0,0,0,.40), 0 28px 64px rgba(0,0,0,.34);

  color-scheme: dark;
}

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

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

body {
  background: var(--bg);
  color: var(--body);
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  transition: background-color .4s var(--ease), color .4s var(--ease);
}

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

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

::selection { background: var(--accent); color: #fff; }
html[data-theme="dark"] ::selection { background: var(--accent); color: #10102A; }

.skip-link {
  position: absolute; left: 50%; top: 0; transform: translate(-50%, -120%);
  background: var(--accent); color: #fff; padding: .8rem 1.4rem;
  font-size: .8rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  z-index: 200; transition: transform .3s var(--ease);
}
.skip-link:focus { transform: translate(-50%, 0); }

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

/* -------------------------------------------------------------- typography */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--ink);
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: -.005em;
  text-wrap: balance;
}

.h-display { font-size: clamp(2.6rem, 6vw, 4.75rem); line-height: 1.04; letter-spacing: -.018em; }
.h1 { font-size: clamp(2.2rem, 4.6vw, 3.6rem); line-height: 1.07; letter-spacing: -.014em; }
.h2 { font-size: clamp(1.9rem, 3.4vw, 2.85rem); line-height: 1.12; letter-spacing: -.01em; }
.h3 { font-size: clamp(1.28rem, 1.8vw, 1.6rem); line-height: 1.26; }
.h4 { font-family: var(--font-sans); font-size: 1.06rem; font-weight: 600; line-height: 1.4; letter-spacing: -.004em; }

.eyebrow {
  font-family: var(--font-sans);
  font-size: .715rem; font-weight: 600;
  letter-spacing: .19em; text-transform: uppercase;
  color: var(--accent);
  display: inline-flex; align-items: center; gap: .7rem;
}
.eyebrow::before { content: ""; width: 26px; height: 1px; background: currentColor; opacity: .55; flex: none; }
.eyebrow--plain::before { display: none; }
.on-deep .eyebrow, .section--deep .eyebrow { color: var(--brand-pearl); }

.lead { font-size: clamp(1.05rem, 1.3vw, 1.19rem); line-height: 1.72; }
.prose p + p { margin-top: 1.15em; }
.text-muted { color: var(--muted); }
.text-center { text-align: center; }
.mx-auto { margin-inline: auto; }

/* ------------------------------------------------------------------ layout */
.container { width: min(1220px, 100% - (var(--gutter) * 2)); margin-inline: auto; }
.container--narrow { width: min(780px, 100% - (var(--gutter) * 2)); margin-inline: auto; }

.section { padding-block: var(--section-y); position: relative; }
.section--alt { background: var(--bg-alt); }
.section--tight { padding-block: clamp(3rem, 6vw, 5rem); }
.section--deep { background: var(--bg-deep); color: var(--on-deep-dim); }
.section--deep h1, .section--deep h2, .section--deep h3, .section--deep h4 { color: var(--on-deep); }
.on-deep { color: var(--on-deep-dim); }
.on-deep h1, .on-deep h2, .on-deep h3, .on-deep h4 { color: var(--on-deep); }

.grid { display: grid; gap: clamp(1.5rem, 3vw, 2.4rem); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 285px), 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); }

.section-head { max-width: 660px; margin-bottom: clamp(2.5rem, 5vw, 3.6rem); }
.section-head .h2, .section-head .h1 { margin-top: 1.05rem; }
.section-head p { margin-top: 1.15rem; }

.split-head {
  display: flex; flex-wrap: wrap; gap: 1.75rem;
  align-items: flex-end; justify-content: space-between;
  margin-bottom: clamp(2.5rem, 5vw, 3.6rem);
}
.split-head > div:first-child { max-width: 640px; }

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

/* ----------------------------------------------------------------- buttons */
.btn {
  --btn-bg: var(--accent);
  --btn-fg: var(--btn-on-accent);
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: .65rem;
  padding: .92rem 1.75rem;
  background: var(--btn-bg); color: var(--btn-fg);
  font-size: .8rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  border: 1px solid var(--btn-bg); border-radius: var(--radius);
  cursor: pointer; overflow: hidden; isolation: isolate;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease),
              background-color .35s var(--ease), border-color .35s var(--ease), color .35s var(--ease);
}

.btn::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(120deg, transparent 20%, rgba(255,255,255,.22) 50%, transparent 80%);
  transform: translateX(-120%);
  transition: transform .75s var(--ease);
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn:hover::after { transform: translateX(120%); }
.btn:active { transform: translateY(0); }
.btn .arw { transition: transform .35s var(--ease); flex: none; }
.btn:hover .arw { transform: translateX(4px); }

.btn--ghost { --btn-bg: transparent; --btn-fg: var(--ink); border-color: var(--line); }
.btn--ghost:hover { border-color: var(--accent); color: var(--accent); }

.btn--on-deep { --btn-bg: transparent; --btn-fg: var(--on-deep); border-color: rgba(245,242,232,.32); }
.btn--on-deep:hover { background: rgba(245,242,232,.08); border-color: var(--brand-pearl); }

.btn--pearl { --btn-bg: var(--brand-pearl); --btn-fg: #1D1D44; border-color: var(--brand-pearl); }

.btn-row { display: flex; flex-wrap: wrap; gap: .9rem; }

.link-arrow {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .8rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase;
  color: var(--accent); padding-bottom: 3px;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat; background-position: 0 100%; background-size: 0% 1px;
  transition: background-size .45s var(--ease);
}
.link-arrow:hover { background-size: 100% 1px; }
.link-arrow .arw { transition: transform .35s var(--ease); }
.link-arrow:hover .arw { transform: translateX(4px); }
.on-deep .link-arrow, .section--deep .link-arrow { color: var(--brand-pearl); }

/* ------------------------------------------------------------------ header */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  height: var(--header-h);
  display: flex; align-items: center;
  border-bottom: 1px solid transparent;
  transition: background-color .45s var(--ease), border-color .45s var(--ease),
              box-shadow .45s var(--ease), height .45s var(--ease);
}
.site-header.is-scrolled {
  height: 84px;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom-color: var(--line);
  box-shadow: var(--shadow-sm);
}
@supports not (background: color-mix(in srgb, red 50%, blue)) {
  .site-header.is-scrolled { background: var(--bg); }
}

/* NB: no width here — this element also carries .container, and a width
   declared later at equal specificity would override the container's
   max-width and make the header full-bleed. */
.header-inner { display: flex; align-items: center; gap: 1.5rem; }

/* Brand lockup */
.brand { display: flex; align-items: center; gap: .7rem; flex: none; margin-right: auto; }
/* Supplied name-only wordmark; preserve its wide aspect ratio. */
.brand-word { width: 220px; height: auto; transition: transform .5s var(--ease), height .45s var(--ease); }
.site-header.is-scrolled .brand-word { width: 210px; height: auto; }
.brand:hover .brand-word { transform: translateY(-2px); }
.brand-img { transition: opacity .35s var(--ease); }

/* Logo variant swap: ivory over the navy hero, ink once scrolled (light theme only) */
.brand-ink { display: none; }
.brand-ivory { display: block; }
.site-header.is-scrolled .brand-ink { display: block; }
.site-header.is-scrolled .brand-ivory { display: none; }
html[data-theme="dark"] .site-header.is-scrolled .brand-ink { display: none; }
html[data-theme="dark"] .site-header.is-scrolled .brand-ivory { display: block; }

/* Nav */
.nav { display: flex; align-items: center; gap: clamp(1.1rem, 2.2vw, 2rem); }
.nav a {
  position: relative;
  font-size: .84rem; font-weight: 500; letter-spacing: .01em;
  /* English labels are longer than the Indonesian ones; without this the nav
     wraps onto two lines between 1100px and roughly 1300px. */
  white-space: nowrap;
  color: var(--on-deep); padding: .4rem 0;
  transition: color .35s var(--ease);
}
.site-header.is-scrolled .nav a { color: var(--body); }
.nav a::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%;
  background: currentColor; transform: scaleX(0); transform-origin: right;
  transition: transform .45s var(--ease);
}
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
.nav a:hover { color: var(--brand-pearl); }
.site-header.is-scrolled .nav a:hover, .site-header.is-scrolled .nav a[aria-current="page"] { color: var(--accent); }
.nav a[aria-current="page"] { color: var(--brand-pearl); }

/* Header utilities */
.header-tools { display: flex; align-items: center; gap: .55rem; flex: none; }

.lang-switch {
  display: flex; align-items: center;
  border: 1px solid rgba(245,242,232,.3); border-radius: 999px;
  padding: 2px; transition: border-color .35s var(--ease);
}
.site-header.is-scrolled .lang-switch { border-color: var(--line); }
.lang-switch button {
  font-size: .68rem; font-weight: 700; letter-spacing: .09em;
  padding: .3rem .6rem; border-radius: 999px;
  color: var(--on-deep-dim);
  transition: background-color .35s var(--ease), color .35s var(--ease);
}
.site-header.is-scrolled .lang-switch button { color: var(--muted); }
.lang-switch button[aria-pressed="true"] { background: var(--brand-pearl); color: #1D1D44; }
html[data-theme="dark"] .lang-switch button[aria-pressed="true"] { background: var(--accent); color: #10102A; }
.lang-switch button:not([aria-pressed="true"]):hover { color: var(--on-deep); }
.site-header.is-scrolled .lang-switch button:not([aria-pressed="true"]):hover { color: var(--accent); }

.icon-btn {
  width: 36px; height: 36px; border-radius: 999px;
  display: grid; place-items: center;
  border: 1px solid rgba(245,242,232,.3); color: var(--on-deep);
  transition: background-color .35s var(--ease), border-color .35s var(--ease),
              color .35s var(--ease), transform .35s var(--ease);
}
.site-header.is-scrolled .icon-btn { border-color: var(--line); color: var(--body); }
.icon-btn:hover { transform: translateY(-2px); border-color: var(--accent); color: var(--accent); }
.icon-btn svg { width: 17px; height: 17px; }

/* theme icon swap */
.icon-sun { display: none; }
html[data-theme="dark"] .icon-sun { display: block; }
html[data-theme="dark"] .icon-moon { display: none; }

/* Header CTA — outlined over the navy hero, solid once the header is scrolled */
.header-cta { padding: .68rem 1.2rem; font-size: .73rem; }
.site-header.is-scrolled .header-cta {
  --btn-bg: var(--accent);
  --btn-fg: #FFFFFF;
  border-color: var(--accent);
}
html[data-theme="dark"] .site-header.is-scrolled .header-cta { --btn-fg: #10102A; }

.nav-toggle { display: none; }

/* Mobile drawer */
.drawer {
  position: fixed; inset: 0; z-index: 99;
  background: var(--bg-deep);
  display: flex; flex-direction: column; justify-content: center;
  padding: 6rem var(--gutter) 3rem;
  opacity: 0; visibility: hidden;
  clip-path: circle(0% at calc(100% - 46px) 40px);
  transition: clip-path .6s var(--ease), opacity .4s var(--ease), visibility .4s;
}
.drawer.is-open { opacity: 1; visibility: visible; clip-path: circle(150% at calc(100% - 46px) 40px); }
.drawer nav { display: flex; flex-direction: column; gap: .35rem; }
.drawer nav a {
  font-family: var(--font-display); font-size: clamp(1.9rem, 8vw, 2.9rem);
  font-weight: 600; color: var(--on-deep);
  padding: .35rem 0; border-bottom: 1px solid var(--line-deep);
  opacity: 0; transform: translateY(18px);
  transition: opacity .5s var(--ease), transform .5s var(--ease), color .3s var(--ease);
}
.drawer.is-open nav a { opacity: 1; transform: none; }
.drawer nav a:hover, .drawer nav a[aria-current="page"] { color: var(--brand-pearl); }
.drawer-foot { margin-top: 2.5rem; color: var(--on-deep-dim); font-size: .9rem; }
.drawer-foot a { color: var(--brand-pearl); display: inline-block; }
.drawer-foot .lang-switch { display: flex; width: max-content; margin-top: 1.4rem; }

/* --------------------------------------------------------------- hero/page */
.hero {
  position: relative;
  background: var(--bg-deep);
  color: var(--on-deep-dim);
  padding-block: calc(var(--header-h) + clamp(4.5rem, 11vw, 9rem)) clamp(4.5rem, 10vw, 8rem);
  overflow: hidden;
  isolation: isolate;
}
.hero h1, .hero h2 { color: var(--on-deep); }

.hero::before {
  content: ""; position: absolute; z-index: -2; inset: 0;
  background:
    radial-gradient(1100px 620px at 78% 12%, rgba(30, 61, 46, .55), transparent 62%),
    radial-gradient(760px 520px at 8% 92%, rgba(95, 96, 116, .42), transparent 68%);
}
/* fine linen hatching, keeps the navy from reading flat */
.hero::after {
  content: ""; position: absolute; z-index: -1; inset: 0;
  background-image: repeating-linear-gradient(135deg,
    rgba(245,242,232,.028) 0 1px, transparent 1px 7px);
  pointer-events: none;
}

.hero-inner { max-width: 830px; }
.hero .lead { color: var(--on-deep-dim); max-width: 620px; margin-top: 1.6rem; }
.hero .btn-row { margin-top: 2.4rem; }
.hero .eyebrow { color: var(--brand-pearl); }
.hero h1 { margin-top: 1.5rem; }

/* Page header for interior pages */
.page-hero { padding-block: calc(var(--header-h) + clamp(3.4rem, 7vw, 5.5rem)) clamp(3.4rem, 6vw, 5rem); }
.page-hero .lead { margin-top: 1.3rem; }

.breadcrumb {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
  font-size: .78rem; color: var(--on-deep-dim); margin-bottom: 1.5rem;
}
.breadcrumb a { transition: color .3s var(--ease); }
.breadcrumb a:hover { color: var(--brand-pearl); }
.breadcrumb span { opacity: .5; }


/* ------------------------------------------------------------------- stats */
/* Sits in the navy run below the hero. The darkening is applied as a
   background-IMAGE over the deep colour, so it composites onto the navy
   instead of replacing it (this element also carries .section--deep). */
.stat-band {
  border-block: 1px solid var(--line-deep);
  background-color: var(--bg-deep);
  background-image: linear-gradient(rgba(0, 0, 0, .16), rgba(0, 0, 0, .16));
}
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); }
.stat {
  padding: clamp(1.9rem, 4vw, 2.9rem) clamp(1rem, 2vw, 1.75rem);
  border-right: 1px solid var(--line-deep);
  text-align: center;
}
.stat:last-child { border-right: 0; }
.stat-num {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(2.2rem, 4.4vw, 3.2rem); line-height: 1;
  color: var(--on-deep); display: flex; align-items: baseline; justify-content: center; gap: .06em;
}
.stat-num .suf { color: var(--brand-pearl); font-size: .55em; }
.stat-label {
  margin-top: .7rem; font-size: .72rem; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; color: var(--on-deep-dim);
}

/* ------------------------------------------------------------------- cards */
.card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(1.6rem, 2.6vw, 2.1rem);
  overflow: hidden;
  transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease);
}
.card::before {
  content: ""; position: absolute; left: 0; top: 0; height: 2px; width: 100%;
  background: var(--accent);
  transform: scaleX(0); transform-origin: left;
  transition: transform .55s var(--ease);
}
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: transparent; }
.card:hover::before { transform: scaleX(1); }

.card .h3, .card .h4 { margin-bottom: .7rem; transition: color .4s var(--ease); }
.card:hover .h3, .card:hover .h4 { color: var(--accent); }
.card p { font-size: .945rem; }
.card .link-arrow { margin-top: 1.25rem; }

.card-icon {
  width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--accent-wash); color: var(--accent);
  margin-bottom: 1.25rem;
  transition: background-color .45s var(--ease), transform .45s var(--ease);
}
.card:hover .card-icon { transform: scale(1.06) rotate(-4deg); }
.card-icon svg { width: 21px; height: 21px; }

.card-index {
  font-family: var(--font-display); font-size: 1rem; font-weight: 600;
  color: var(--muted); letter-spacing: .06em;
}

/* Practice list — numbered rows */
.practice-row {
  display: grid; grid-template-columns: auto 1fr auto; gap: clamp(1rem, 3vw, 2.5rem);
  align-items: center;
  padding: clamp(1.4rem, 2.6vw, 1.9rem) 0;
  border-bottom: 1px solid var(--line);
  transition: padding-left .5s var(--ease), border-color .5s var(--ease);
}
.practice-row:first-child { border-top: 1px solid var(--line); }
.practice-row:hover { padding-left: clamp(.5rem, 1.5vw, 1.1rem); border-color: var(--accent); }
.practice-row .num { font-family: var(--font-display); font-size: 1.05rem; color: var(--muted); min-width: 2.1rem; }
.practice-row .h3 { transition: color .4s var(--ease); }
.practice-row:hover .h3 { color: var(--accent); }
.practice-row .desc { color: var(--muted); font-size: .93rem; margin-top: .3rem; max-width: 62ch; }
.practice-row .go {
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid var(--line); color: var(--accent);
  transition: background-color .45s var(--ease), color .45s var(--ease),
              border-color .45s var(--ease), transform .45s var(--ease);
}
.practice-row:hover .go { background: var(--accent); color: #fff; border-color: var(--accent); transform: translateX(4px); }
html[data-theme="dark"] .practice-row:hover .go { color: #10102A; }

/* Article cards */
.article-card {
  display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease);
}
.article-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: transparent; }

.article-thumb {
  position: relative; aspect-ratio: 16 / 9; overflow: hidden;
  background: var(--bg-deep);
  display: grid; place-items: center;
}
.article-thumb::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(520px 300px at 74% 18%, rgba(30,61,46,.62), transparent 64%),
    repeating-linear-gradient(135deg, rgba(245,242,232,.035) 0 1px, transparent 1px 8px);
  transition: transform .8s var(--ease);
}
.article-card:hover .article-thumb::before { transform: scale(1.08); }
.article-thumb img { width: 62%; opacity: .16; transition: transform .8s var(--ease), opacity .8s var(--ease); }
.article-card:hover .article-thumb img { transform: scale(1.07); opacity: .24; }

.article-tag {
  position: absolute; left: 1rem; top: 1rem; z-index: 2;
  background: var(--brand-pearl); color: #1D1D44;
  font-size: .63rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  padding: .35rem .7rem; border-radius: 2px;
}
.article-body { padding: clamp(1.35rem, 2.4vw, 1.8rem); display: flex; flex-direction: column; flex: 1; }
.article-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; font-size: .76rem; color: var(--muted); }
.article-meta .dot { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: .6; }
.article-body .h4 { margin: .8rem 0 .6rem; transition: color .4s var(--ease); }
.article-card:hover .h4 { color: var(--accent); }
.article-body p { font-size: .93rem; color: var(--muted); }
.article-body .link-arrow { margin-top: auto; padding-top: 1.3rem; align-self: flex-start; }

/* People */
.person { text-align: left; }
.person-photo {
  position: relative; aspect-ratio: 3 / 4; border-radius: var(--radius-lg);
  overflow: hidden; background: var(--bg-deep); display: grid; place-items: center;
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.person-photo::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(400px 320px at 70% 22%, rgba(30,61,46,.6), transparent 66%),
    repeating-linear-gradient(135deg, rgba(245,242,232,.03) 0 1px, transparent 1px 8px);
}
.person-photo .initials {
  position: relative; font-family: var(--font-display); font-size: clamp(2.6rem, 5vw, 3.6rem);
  font-weight: 600; color: var(--brand-pearl); opacity: .82; letter-spacing: .04em;
}
.person:hover .person-photo { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.person .h4 { margin-top: 1.15rem; }
.person .role { font-size: .82rem; color: var(--accent); letter-spacing: .06em; margin-top: .2rem; }
.person .bio { font-size: .9rem; color: var(--muted); margin-top: .7rem; }

/* --------------------------------------------------------------- specifics */
/* Two-column intro with navy panel */
.intro-grid { display: grid; gap: clamp(2rem, 5vw, 4.5rem); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 900px) { .intro-grid { grid-template-columns: 1fr 1fr; } }

.panel-deep {
  position: relative; background: var(--bg-deep); border-radius: var(--radius-lg);
  padding: clamp(2.2rem, 4vw, 3.4rem); overflow: hidden; isolation: isolate;
  min-height: 320px; display: flex; flex-direction: column; justify-content: flex-end;
  color: var(--on-deep-dim);
}
.panel-deep::before {
  content: ""; position: absolute; z-index: -1; inset: 0;
  background:
    radial-gradient(520px 380px at 76% 16%, rgba(30,61,46,.6), transparent 64%),
    repeating-linear-gradient(135deg, rgba(245,242,232,.03) 0 1px, transparent 1px 8px);
}
.panel-deep h3 { color: var(--on-deep); }
.panel-deep .quote { font-family: var(--font-display); font-size: clamp(1.35rem, 2.4vw, 1.9rem); line-height: 1.35; color: var(--on-deep); }
.panel-deep .attrib { margin-top: 1.4rem; font-size: .82rem; letter-spacing: .08em; text-transform: uppercase; color: var(--brand-pearl); }

/* Value / why-us numbered blocks */
.value { padding-top: 1.5rem; border-top: 1px solid var(--line); }
.value .num {
  font-family: var(--font-display); font-size: 1.5rem; font-weight: 600;
  color: var(--accent); display: block; margin-bottom: .7rem;
}
.value .h4 { margin-bottom: .55rem; }
.value p { font-size: .94rem; color: var(--muted); }

/* CTA band */
.cta-band { position: relative; overflow: hidden; isolation: isolate; }
.cta-band::before {
  content: ""; position: absolute; z-index: -1; inset: 0;
  background:
    radial-gradient(760px 460px at 82% 20%, rgba(30,61,46,.62), transparent 64%),
    repeating-linear-gradient(135deg, rgba(245,242,232,.028) 0 1px, transparent 1px 7px);
}
.cta-inner { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 920px) { .cta-inner { grid-template-columns: 1.4fr auto; } }

/* Logo strip / credentials */
.cred-strip { display: flex; flex-wrap: wrap; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; justify-content: center; }
.cred {
  font-family: var(--font-display); font-size: 1.02rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); opacity: .8;
  transition: color .4s var(--ease), opacity .4s var(--ease);
}
.cred:hover { color: var(--accent); opacity: 1; }

/* ------------------------------------------------------------------- forms */
.form-grid { display: grid; gap: 1.15rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.field { display: flex; flex-direction: column; gap: .45rem; }
.field--full { grid-column: 1 / -1; }
.field label { font-size: .76rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.field input, .field textarea, .field select {
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: .85rem 1rem; font-size: .95rem; width: 100%;
  transition: border-color .35s var(--ease), box-shadow .35s var(--ease), background-color .35s var(--ease);
}
.field textarea { resize: vertical; min-height: 148px; }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-wash);
}
.field input::placeholder, .field textarea::placeholder { color: var(--muted); opacity: .75; }
.field .err { font-size: .78rem; color: #C0392B; display: none; }
html[data-theme="dark"] .field .err { color: #F1948A; }
.field.is-invalid input, .field.is-invalid textarea, .field.is-invalid select { border-color: #C0392B; }
.field.is-invalid .err { display: block; }

.form-note { font-size: .82rem; color: var(--muted); margin-top: 1.1rem; }
.form-status {
  display: none; margin-top: 1.2rem; padding: .95rem 1.15rem;
  border-radius: var(--radius); font-size: .9rem;
  border: 1px solid var(--accent); background: var(--accent-wash); color: var(--accent);
}
.form-status.is-shown { display: block; animation: fadeUp .5s var(--ease) both; }

.contact-grid { display: grid; gap: clamp(2.5rem, 5vw, 4.5rem); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 940px) { .contact-grid { grid-template-columns: 1.25fr 1fr; } }

/* Contact detail list */
.contact-item { padding: 1.35rem 0; border-bottom: 1px solid var(--line); display: flex; gap: 1.1rem; align-items: flex-start; }
.contact-item:first-child { border-top: 1px solid var(--line); }
.contact-item .ci-icon { color: var(--accent); flex: none; margin-top: .25rem; }
.contact-item .ci-icon svg { width: 18px; height: 18px; }
.contact-item .ci-label { font-size: .72rem; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; color: var(--muted); }
.contact-item .ci-value { color: var(--ink); margin-top: .25rem; }
.contact-item a.ci-value:hover { color: var(--accent); }

.map-frame {
  border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden;
  aspect-ratio: 16 / 10; background: var(--bg-alt);
}
.map-frame iframe { width: 100%; height: 100%; border: 0; display: block; filter: saturate(.75); }
html[data-theme="dark"] .map-frame iframe { filter: invert(.9) hue-rotate(180deg) saturate(.55) brightness(.95); }

/* --------------------------------------------------------------- insights */
.filter-bar { display: flex; flex-wrap: wrap; gap: .55rem; margin-bottom: 2.5rem; }
.filter-chip {
  font-size: .78rem; font-weight: 500;
  padding: .5rem 1.05rem; border-radius: 999px;
  border: 1px solid var(--line); color: var(--muted);
  transition: background-color .35s var(--ease), color .35s var(--ease),
              border-color .35s var(--ease), transform .35s var(--ease);
}
.filter-chip:hover { color: var(--accent); border-color: var(--accent); transform: translateY(-1px); }
.filter-chip[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }
html[data-theme="dark"] .filter-chip[aria-pressed="true"] { color: #10102A; }

.empty-state { text-align: center; padding: 4rem 0; color: var(--muted); }

/* Article page */
.reading-progress {
  position: fixed; left: 0; top: 0; height: 2px; width: 100%; z-index: 101;
  transform-origin: left; transform: scaleX(0);
  background: var(--accent);
  transition: transform .1s linear;
}
.article-hero-meta { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; font-size: .82rem; color: var(--on-deep-dim); margin-top: 1.6rem; }

.article-content { font-size: 1.06rem; line-height: 1.82; }
.article-content > * + * { margin-top: 1.35em; }
.article-content h2 { font-size: clamp(1.6rem, 2.6vw, 2.05rem); margin-top: 2.4em; }
.article-content h3 { font-size: clamp(1.2rem, 1.8vw, 1.4rem); margin-top: 1.9em; }
.article-content ul { display: grid; gap: .7rem; padding-left: 0; }
.article-content ul li { position: relative; padding-left: 1.6rem; }
.article-content ul li::before {
  content: ""; position: absolute; left: .2rem; top: .78em;
  width: 6px; height: 1px; background: var(--accent);
}
.article-content strong { color: var(--ink); font-weight: 600; }
.article-content blockquote {
  border-left: 2px solid var(--accent);
  padding: .3rem 0 .3rem 1.6rem;
  font-family: var(--font-display); font-size: 1.32rem; line-height: 1.5; color: var(--ink);
}
.article-content a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

.share-row { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; }
.share-row .lbl { font-size: .72rem; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; color: var(--muted); }

.toast {
  position: fixed; left: 50%; bottom: 2rem; transform: translate(-50%, 140%);
  background: var(--bg-deep); color: var(--on-deep);
  padding: .8rem 1.4rem; border-radius: var(--radius); font-size: .88rem;
  box-shadow: var(--shadow-lg); z-index: 200;
  transition: transform .5s var(--ease);
}
.toast.is-shown { transform: translate(-50%, 0); }

/* ------------------------------------------------------ partner profiles */
.partner-card { display: grid; gap: clamp(1.6rem, 3.5vw, 3rem); align-items: start; }
@media (min-width: 760px) { .partner-card { grid-template-columns: minmax(190px, 260px) 1fr; } }
.partner-card + .partner-card {
  margin-top: clamp(3rem, 6vw, 4.5rem);
  padding-top: clamp(3rem, 6vw, 4.5rem);
  border-top: 1px solid var(--line);
}
.partner-card .person-photo { aspect-ratio: 4 / 5; }
.partner-card .h3 { margin-bottom: .3rem; }
.partner-card .role {
  font-size: .74rem; font-weight: 600; letter-spacing: .13em; text-transform: uppercase;
  color: var(--accent); display: block; margin-bottom: 1.1rem;
}
.partner-block { margin-top: 1.8rem; }
.partner-block h4 {
  font-family: var(--font-sans); font-size: .72rem; font-weight: 600;
  letter-spacing: .13em; text-transform: uppercase; color: var(--muted); margin-bottom: .8rem;
}

a.link-plain { color: var(--accent); }
a.link-plain:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Simple hairline-bulleted list, usable outside .article-content */
.check-list { display: grid; gap: .75rem; }
.check-list li { position: relative; padding-left: 1.6rem; color: var(--muted); font-size: .95rem; }
.check-list li::before {
  content: ""; position: absolute; left: .2rem; top: .82em;
  width: 7px; height: 1px; background: var(--accent);
}

/* Career openings */
.job { display: block; }
.job .job-meta {
  display: flex; flex-wrap: wrap; gap: .5rem; align-items: center;
  font-size: .72rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); margin-bottom: .9rem;
}
.job .job-meta .pill {
  background: var(--accent-wash); color: var(--accent);
  padding: .25rem .65rem; border-radius: 999px; letter-spacing: .08em;
}

/* ------------------------------------------------------------------ footer */
.site-footer { background: var(--bg-deep); color: var(--on-deep-dim); padding-block: clamp(3.5rem, 7vw, 5.5rem) 2rem; }
.footer-grid { display: grid; gap: clamp(2rem, 4vw, 3rem); grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); }
.footer-brand { max-width: 330px; }
.footer-brand .brand-lockup { width: 230px; max-width: 100%; height: auto; margin-bottom: 1.4rem; }
.footer-brand p { font-size: .92rem; }
.footer-col h4 { color: var(--on-deep); font-size: .74rem; font-weight: 600; letter-spacing: .15em; text-transform: uppercase; margin-bottom: 1.15rem; font-family: var(--font-sans); }
.footer-col li + li { margin-top: .6rem; }
.footer-col a { font-size: .92rem; transition: color .3s var(--ease), padding-left .3s var(--ease); }
.footer-col a:hover { color: var(--brand-pearl); padding-left: 4px; }

.socials { display: flex; gap: .6rem; margin-top: 1.6rem; }
.socials a {
  width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid var(--line-deep); color: var(--on-deep-dim);
  transition: background-color .4s var(--ease), color .4s var(--ease),
              border-color .4s var(--ease), transform .4s var(--ease);
}
.socials a:hover { background: var(--brand-pearl); color: #1D1D44; border-color: var(--brand-pearl); transform: translateY(-3px); }
.socials svg { width: 16px; height: 16px; }

.footer-bottom {
  margin-top: clamp(2.5rem, 5vw, 3.5rem); padding-top: 1.7rem;
  border-top: 1px solid var(--line-deep);
  display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: center;
  font-size: .82rem;
}
.footer-bottom nav { display: flex; flex-wrap: wrap; gap: 1.4rem; }
.footer-bottom a:hover { color: var(--brand-pearl); }
.disclaimer { font-size: .78rem; color: var(--on-deep-dim); opacity: .72; margin-top: 1.4rem; max-width: 70ch; line-height: 1.6; }

/* Back to top */
.to-top {
  position: fixed; right: 1.4rem; bottom: 1.4rem; z-index: 90;
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--accent); color: #fff;
  box-shadow: var(--shadow-md);
  opacity: 0; visibility: hidden; transform: translateY(14px);
  transition: opacity .4s var(--ease), transform .4s var(--ease), visibility .4s;
}
html[data-theme="dark"] .to-top { color: #10102A; }
.to-top.is-shown { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { transform: translateY(-3px); }
.to-top svg { width: 17px; height: 17px; }

/* -------------------------------------------------------------- animations */
[data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .85s var(--ease), transform .85s var(--ease);
  transition-delay: var(--rd, 0s);
  will-change: opacity, transform;
}
[data-reveal="fade"]  { transform: none; }
[data-reveal="left"]  { transform: translateX(-26px); }
[data-reveal="right"] { transform: translateX(26px); }
[data-reveal="scale"] { transform: scale(.965); }
[data-reveal].is-visible { opacity: 1; transform: none; }

/* Below the two-column breakpoint the sideways offset would push content
   past the viewport (it is only masked by overflow-x on the body) and it
   reads poorly on a phone. Reveal vertically instead. */
@media (max-width: 900px) {
  [data-reveal="left"], [data-reveal="right"] { transform: translateY(22px); }
}

@keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* Hero staged entrance on load */
.hero-inner > * { animation: fadeUp .95s var(--ease) both; }
.hero-inner > *:nth-child(1) { animation-delay: .10s; }
.hero-inner > *:nth-child(2) { animation-delay: .22s; }
.hero-inner > *:nth-child(3) { animation-delay: .34s; }
.hero-inner > *:nth-child(4) { animation-delay: .46s; }

/* -------------------------------------------------------------- responsive */
/* Seven nav items in English only just fit above the drawer breakpoint, so
   tighten the spacing across the band where it is tightest. */
@media (min-width: 1101px) and (max-width: 1320px) {
  .header-inner { gap: 1rem; }
  .nav { gap: 1.05rem; }
  .nav a { font-size: .8rem; }
}

@media (max-width: 1100px) {
  .nav { display: none; }
  .nav-toggle { display: grid; }
  .header-cta { display: none; }
  .stat { border-right: 0; border-bottom: 1px solid var(--line-deep); }
  .practice-row { grid-template-columns: auto 1fr; }
  .practice-row .go { display: none; }
}
@media (max-width: 620px) {
  :root { --header-h: 80px; }
  .brand-word { width: 175px; height: auto; }
  .site-header.is-scrolled .brand-word { width: 175px; height: auto; }
  .lang-switch { display: none; }
  .footer-bottom { justify-content: flex-start; }
  .hero .btn-row .btn { width: 100%; }
}

/* Drawer link stagger */
.drawer.is-open nav a:nth-child(1) { transition-delay: .16s; }
.drawer.is-open nav a:nth-child(2) { transition-delay: .22s; }
.drawer.is-open nav a:nth-child(3) { transition-delay: .28s; }
.drawer.is-open nav a:nth-child(4) { transition-delay: .34s; }
.drawer.is-open nav a:nth-child(5) { transition-delay: .40s; }
.drawer.is-open nav a:nth-child(6) { transition-delay: .46s; }
.drawer.is-open nav a:nth-child(7) { transition-delay: .52s; }

/* ------------------------------------------------------- reduced motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  .hero-inner > * { animation: none; }
  .drawer { transition: opacity .001ms; }
}

/* ------------------------------------------------------------------ print */
@media print {
  .site-header, .drawer, .to-top, .reading-progress, .socials, .filter-bar { display: none !important; }
  body { background: #fff; color: #000; }
  .hero, .section--deep, .site-footer, .panel-deep { background: #fff !important; color: #000 !important; }
  .hero h1, .section--deep h2, .site-footer h4 { color: #000 !important; }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .8em; }
}

/* === 15 practice areas === */
/* services.html — compact index cards and the fifteen detail sections.
   Overrides only; the base .card / .check-list / .grid rules above are
   untouched and still serve the other pages. */

/* Index: the whole card is the link */
.pa-index { gap: clamp(1.1rem, 2vw, 1.5rem); }
.pa-card {
  display: flex; flex-direction: column;
  padding: clamp(1.3rem, 2vw, 1.6rem);
  color: inherit;
}
.pa-card-top {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  margin-bottom: 1.05rem;
}
.pa-card .card-icon { width: 42px; height: 42px; margin-bottom: 0; flex: none; }
.pa-card .card-icon svg { width: 20px; height: 20px; }
.pa-card .h3 { font-size: clamp(1.18rem, 1.5vw, 1.36rem); margin-bottom: .45rem; }
.pa-card p { font-size: .88rem; color: var(--muted); }

/* Detail: numbered aside + body, one hairline between areas */
.pa-details-head { margin-bottom: clamp(1.25rem, 3vw, 2.2rem); }
.pa-detail {
  display: grid; gap: clamp(1rem, 2.5vw, 2.5rem); align-items: start;
  padding-block: clamp(2.6rem, 5vw, 4rem);
  border-top: 1px solid var(--line);
}
.pa-detail:last-child { padding-bottom: 0; }
.pa-num {
  font-family: var(--font-display); font-size: clamp(2rem, 3.4vw, 2.85rem); font-weight: 600;
  line-height: 1; color: var(--accent); display: block;
}
@media (min-width: 760px) {
  .pa-detail { grid-template-columns: 7rem 1fr; }
  .pa-detail-aside { position: sticky; top: calc(var(--header-h) + 24px); }
}
.pa-title { font-size: clamp(1.75rem, 2.8vw, 2.4rem); }
.pa-sub {
  margin-top: .6rem;
  font-size: .76rem; font-weight: 600; letter-spacing: .13em; text-transform: uppercase;
  color: var(--muted);
}
.pa-prose { margin-top: 1.35rem; max-width: 72ch; }
.pa-exp-label {
  font-family: var(--font-sans); font-size: .72rem; font-weight: 600;
  letter-spacing: .13em; text-transform: uppercase; color: var(--muted);
  margin-top: 1.9rem; margin-bottom: .9rem;
}
.pa-exp { gap: .6rem 2rem; }
.pa-exp li { color: var(--body); font-size: .92rem; }
@media (min-width: 620px) { .pa-exp { grid-template-columns: 1fr 1fr; } }

@media print { .pa-detail-aside { position: static; } }
/* === end === */


/* === people.css — People page (people.html) === */
/* Portraits are 900x900 squares: show them uncropped; any residual crop starts from the top. */
.person-photo img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: block; object-fit: cover; object-position: top;
}
.partner-card .person-photo,
.team-grid .person-photo { aspect-ratio: 1 / 1; }
@media (min-width: 760px) { .partner-card { grid-template-columns: minmax(220px, 300px) 1fr; } }

/* Team groups: hairline label above each group of cards */
.team-group + .team-group { margin-top: clamp(3rem, 6vw, 4.5rem); }
.team-group-title {
  display: flex; align-items: center; gap: 1rem;
  font-family: var(--font-sans); font-size: .74rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--accent);
  margin-bottom: clamp(1.6rem, 3vw, 2.2rem);
}
.team-group-title::after { content: ""; flex: 1; height: 1px; background: var(--line); }

/* Team cards (reuse .person / .person-photo / .partner-block / .check-list) */
.team-grid .person .role {
  display: block; font-size: .72rem; font-weight: 600; letter-spacing: .13em;
  text-transform: uppercase; color: var(--accent); margin-top: .4rem;
}
.team-grid .person .bio { margin-top: .8rem; }
.team-grid .partner-block { margin-top: 1.3rem; }
.partner-block h5 {
  font-family: var(--font-sans); font-size: .72rem; font-weight: 600; line-height: 1.4;
  letter-spacing: .13em; text-transform: uppercase; color: var(--muted); margin: 0 0 .8rem;
}
.team-grid .check-list { gap: .55rem; }
.team-grid .check-list li { font-size: .88rem; }
/* === end people.css === */


/* === index.css — home stat band: three stats === */
/* .stat-grid above uses repeat(auto-fit, minmax(min(100%, 180px), 1fr)), which is
   already balanced on desktop (three equal columns). With three items instead of
   four, however, viewports of roughly 400–585px fit exactly two tracks and leave
   the third stat alone on a second row (2 + 1). Below the existing 620px
   breakpoint stack the stats in a single column instead, so the band is always
   either three across or three stacked. */
@media (max-width: 620px) {
  .stat-band .stat-grid { grid-template-columns: 1fr; }
}
/* === end index.css === */

/* === team-banner — group photograph on the People page === */
.team-banner {
  margin: 0;
  border: 1px solid var(--rule, #E9E0C8);
  border-radius: 2px;
  overflow: hidden;
  background: var(--bg-deep, #1D1D44);
  line-height: 0;
}
.team-banner img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  object-position: center 30%;
}
@media (max-width: 620px) {
  .team-banner img { aspect-ratio: 4 / 3; }
}
/* === end team-banner === */