/* =========================================================
   Shaksham Law Associates — Stylesheet
   Design tokens: three-layer (primitive -> semantic -> component)
   ========================================================= */

/* ---------- Primitive tokens ---------- */
:root {
  --navy-900: #171d33;
  --navy-800: #1f2847;
  --navy-700: #2f3b69;   /* exact brand navy sampled from logo */
  --navy-600: #3c4a80;
  --navy-100: #e7e9f2;

  --gold-600: #a3823f;
  --gold-500: #b08d57;   /* accent, complementary to brand navy */
  --gold-300: #d9c69a;
  --gold-100: #f3ead9;

  --paper-000: #ffffff;
  --paper-050: #f8f6f2;
  --paper-100: #f1ede5;

  --ink-900: #1a1f2e;
  --ink-600: #4a4f61;
  --ink-400: #767b8c;

  --line-200: #e3e1da;
  --line-300: #cfccc2;

  --font-serif: "EB Garamond", "Iowan Old Style", Georgia, serif;
  --font-sans: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;

  --radius-sm: 4px;
  --radius-md: 10px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(23, 29, 51, 0.06), 0 1px 1px rgba(23, 29, 51, 0.04);
  --shadow-md: 0 8px 24px rgba(23, 29, 51, 0.10), 0 2px 6px rgba(23, 29, 51, 0.06);
  --shadow-lg: 0 24px 60px rgba(23, 29, 51, 0.18);

  --duration-fast: 150ms;
  --duration-base: 250ms;
  --duration-slow: 450ms;
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  --container-max: 1180px;
}

/* ---------- Semantic tokens ---------- */
:root {
  --color-bg: var(--paper-050);
  --color-surface: var(--paper-000);
  --color-surface-alt: var(--paper-100);
  --color-text: var(--ink-900);
  --color-text-muted: var(--ink-600);
  --color-text-faint: var(--ink-400);
  --color-border: var(--line-200);

  --color-primary: var(--navy-700);
  --color-primary-strong: var(--navy-800);
  --color-on-primary: #ffffff;

  --color-accent: var(--gold-500);
  --color-accent-strong: var(--gold-600);
  --color-on-accent: #241a08;

  --color-focus-ring: var(--gold-600);
}

/* ---------- Reset ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

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

body {
  margin: 0;
  /* the fixed sequence sits behind everything; navy keeps the page dark
     before the first frame paints */
  background: var(--navy-900);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* ---------- Scroll-scrubbed background sequence ---------- */
.scroll-video {
  position: fixed;
  inset: 0;
  /* dvh avoids the mobile URL-bar resize jitter that vh causes */
  height: 100dvh;
  z-index: 0;
  overflow: hidden;
  background-color: var(--navy-900);
  background-image: url("../assets/scroll/poster.jpg");
  background-size: cover;
  background-position: center 42%;
  pointer-events: none;
}
.scroll-video canvas {
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 600ms var(--ease-out);
}
.scroll-video.is-ready canvas { opacity: 1; }
/* phones / reduced-motion / save-data: poster only, no sequence downloaded */
.scroll-video--static canvas { display: none; }

/* scrim so hero type stays legible over the brightest frames */
.scroll-video::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 90% at 70% 10%, rgba(47, 59, 105, 0.30), transparent 60%),
    linear-gradient(180deg, rgba(23, 29, 51, 0.72) 0%, rgba(23, 29, 51, 0.55) 45%, rgba(23, 29, 51, 0.78) 100%);
}

/* everything else rides above the sequence */
.site-header, main, .site-footer, .skip-link { position: relative; z-index: 1; }

/* ---------- Nepali "under construction" notice ---------- */
.np-notice {
  position: fixed;
  inset: 0;
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-5);
  background: rgba(23, 29, 51, 0.72);
}
.np-notice[hidden] { display: none; }
.np-notice__panel {
  position: relative;
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: var(--space-8) var(--space-7) var(--space-7);
  max-width: 34rem;
  width: 100%;
  box-shadow: var(--shadow-lg);
  font-family: "Noto Sans Devanagari", var(--font-sans);
}
.np-notice__panel h2 {
  font-family: "Noto Serif Devanagari", var(--font-serif);
  font-size: 1.6rem;
  margin-bottom: var(--space-4);
}
.np-notice__en {
  font-family: var(--font-sans);
  font-size: 0.92rem;
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}
.np-notice__actions {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-top: var(--space-6);
}
.np-notice__close {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.np-notice__close:hover { background: var(--color-surface-alt); color: var(--color-text); }

img { max-width: 100%; display: block; }
a { color: inherit; }
button { font: inherit; }

h1, h2, h3, h4 {
  font-family: var(--font-serif);
  font-weight: 600;
  line-height: 1.2;
  margin: 0 0 var(--space-4);
  color: var(--color-primary-strong);
}

h1 { font-size: clamp(2.25rem, 4.5vw, 3.75rem); font-weight: 600; }
h2 { font-size: clamp(1.75rem, 3vw, 2.5rem); }
h3 { font-size: 1.375rem; }

p { margin: 0 0 var(--space-4); color: var(--color-text-muted); max-width: 65ch; }

ul { margin: 0; padding: 0; list-style: none; }

/* ---------- Focus & a11y ---------- */
:focus-visible {
  outline: 3px solid var(--color-focus-ring);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

.skip-link {
  position: absolute;
  left: var(--space-4);
  top: -60px;
  background: var(--color-primary);
  color: #fff;
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-sm);
  z-index: 1000;
  transition: top var(--duration-base) var(--ease-standard);
  text-decoration: none;
  font-weight: 600;
}
.skip-link:focus { top: var(--space-4); }

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

/* ---------- Language toggling ---------- */
[data-lang-el="np"] { display: none; }
html[data-lang="np"] [data-lang-el="en"] { display: none; }
html[data-lang="np"] [data-lang-el="np"] { display: initial; }
html[data-lang="np"] [data-lang-el-block="np"] { display: block; }
html[data-lang="np"] [data-lang-el-inline="np"] { display: inline-block; }

html[data-lang="np"] body,
html[data-lang="np"] h1,
html[data-lang="np"] h2,
html[data-lang="np"] h3,
html[data-lang="np"] .eyebrow,
html[data-lang="np"] .btn,
html[data-lang="np"] .nav-link {
  font-family: "Noto Sans Devanagari", var(--font-sans);
}
html[data-lang="np"] h1, html[data-lang="np"] h2, html[data-lang="np"] h3 {
  font-family: "Noto Serif Devanagari", var(--font-serif);
}

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

/* Content panels are near-opaque rather than blurred: backdrop-filter over
   a full-page scrolling area is the classic mobile-Safari frame killer, and
   a high-alpha solid reads the same while costing nothing. */
/* Light sections are fully opaque. Two reasons: footage behind cream/white
   panels read as muddy, and an opaque layer lets the compositor skip the
   fixed canvas entirely while it is covered — which is most of the page.
   The sequence shows in the hero and the navy bands only.

   The two light tones are deliberately far enough apart to read as a
   change. #f8f6f2 against #ffffff was invisible, so consecutive sections
   ran together into one undifferentiated scroll. */
.section {
  padding-block: var(--space-8);
  background: var(--paper-100);
}
.section--tight { padding-block: var(--space-7); }
/* The two short blocks on the home page — a one-line placeholder quote and a
   row of small link tiles — didn't need a full band of air around them. */
.section.testimonials,
.section.useful { padding-block: var(--space-6); }
.section--alt { background: var(--color-surface); }
.section--dark {
  background: linear-gradient(160deg, rgba(31, 40, 71, 0.78), rgba(23, 29, 51, 0.86));
  color: #fff;
}

/* ---------- Credentials strip ---------- */
.strip {
  position: relative;
  padding-block: var(--space-7);
  background: linear-gradient(160deg, rgba(31, 40, 71, 0.80), rgba(23, 29, 51, 0.88));
  color: #fff;
  border-block: 1px solid rgba(255, 255, 255, 0.10);
}
.strip-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-6);
}
.strip-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-left: var(--space-5);
  border-left: 1px solid rgba(255, 255, 255, 0.16);
}
.strip-item__figure {
  font-family: var(--font-serif);
  font-size: clamp(1.9rem, 3vw, 2.6rem);
  line-height: 1;
  color: var(--gold-300);
  font-variant-numeric: tabular-nums;
}
.strip-item__label {
  font-size: 0.82rem;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.74);
  max-width: 22ch;
}

@media (max-width: 900px) {
  .strip-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); }
}
@media (max-width: 480px) {
  .strip { padding-block: var(--space-6); }
  .strip-item { padding-left: var(--space-4); }
  .strip-item__figure { font-size: 1.6rem; }
  .strip-item__label { font-size: 0.76rem; }
}
/* h1 included: promoting these section headings to h1 for the standalone
   pages left them falling back to the dark global heading colour, i.e. navy
   text on a navy panel. */
.section--dark h1,
.section--dark h2,
.section--dark h3 { color: #fff; }
.section--dark p { color: rgba(255,255,255,0.78); }

.section-head {
  max-width: 46rem;
  margin-bottom: var(--space-7);
}
.section-head--center { margin-inline: auto; text-align: center; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent-strong);
  margin-bottom: var(--space-3);
}
.eyebrow::before {
  content: "";
  width: 24px;
  height: 2px;
  background: var(--color-accent);
  display: inline-block;
}
.section--dark .eyebrow { color: var(--gold-300); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0.85rem 1.6rem;
  border-radius: var(--radius-pill);
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform var(--duration-fast) var(--ease-standard),
              background var(--duration-base) var(--ease-standard),
              box-shadow var(--duration-base) var(--ease-standard),
              border-color var(--duration-base) var(--ease-standard);
  min-height: 44px;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--primary {
  background: var(--color-accent);
  color: var(--color-on-accent);
  box-shadow: var(--shadow-sm);
}
.btn--primary:hover { background: var(--color-accent-strong); box-shadow: var(--shadow-md); }

.btn--outline {
  background: transparent;
  color: var(--color-on-primary);
  border-color: rgba(255,255,255,0.5);
}
.btn--outline:hover { background: rgba(255,255,255,0.1); border-color: #fff; }

.btn--ghost {
  background: transparent;
  color: var(--color-primary);
  border-color: var(--color-primary);
}
.btn--ghost:hover { background: var(--color-primary); color: #fff; }

.btn .icon { width: 18px; height: 18px; }

/* ---------- Icons ---------- */
.icon {
  width: 24px;
  height: 24px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 500;
  /* Solid background (not backdrop-filter): backdrop-filter creates a new
     containing block, which would trap the mobile drawer's position:fixed
     inside the header's own box instead of the full viewport. */
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: var(--space-3);
  gap: var(--space-5);
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
  color: var(--color-primary-strong);
  min-width: 0;
}
.brand img { width: 42px; height: 42px; flex-shrink: 0; }
.brand-name {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  line-height: 1.15;
  white-space: nowrap;
}
.brand-name small {
  display: block;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.625rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent-strong);
}

.primary-nav {
  display: flex;
  align-items: center;
  gap: var(--space-6);
}
.nav-list {
  display: flex;
  gap: var(--space-5);
}
.nav-link {
  text-decoration: none;
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--color-text-muted);
  padding: var(--space-2) 0;
  position: relative;
  transition: color var(--duration-fast) var(--ease-standard);
}
.nav-link:hover, .nav-link:focus-visible { color: var(--color-primary); }
/* client utility — nudged forward so it reads as an action, not a page */
.nav-link--accent { color: var(--color-accent-strong); }
.nav-link--accent:hover, .nav-link--accent:focus-visible { color: var(--gold-600); }
.nav-link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 2px;
  background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--duration-base) var(--ease-standard);
}
.nav-link:hover::after, .nav-link:focus-visible::after { transform: scaleX(1); }

.header-actions { display: flex; align-items: center; gap: var(--space-3); }

/* the mobile drawer carries its own copy of the lang toggle; hide it until the drawer is open */
.primary-nav > .header-actions { display: none; }
.primary-nav.is-open > .header-actions { display: flex; }

.lang-toggle {
  display: flex;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  overflow: hidden;
}
.lang-toggle button {
  background: transparent;
  border: none;
  padding: 0.4rem 0.85rem;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  color: var(--color-text-muted);
  min-height: 36px;
}
/* the header toggle falls back to "ने" on small screens; the drawer keeps the
   full word, where there is room for it */
.lang-short { display: none; }
.lang-toggle button[aria-pressed="true"] {
  background: var(--color-primary);
  color: #fff;
}

.nav-close { display: none; }

.menu-toggle {
  display: none;
  position: relative;
  z-index: 700;
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition:
    background var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out);
}
.menu-toggle .icon {
  transition: transform var(--duration-base) var(--ease-out);
}
/* the three bars rotate a quarter turn as the drawer opens, so the button
   itself acknowledges the tap rather than sitting still behind the panel */
.menu-toggle.is-active {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.3);
  color: #fff;
}
/* the bars fade out and two strokes cross in their place, so one control
   both opens and closes the drawer */
.menu-toggle.is-active .icon { opacity: 0; transform: rotate(90deg) scale(0.7); }
.menu-toggle::before,
.menu-toggle::after {
  content: "";
  position: absolute;
  width: 19px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  opacity: 0;
  transition:
    opacity var(--duration-base) var(--ease-out),
    transform var(--duration-base) var(--ease-out);
}
.menu-toggle.is-active::before { opacity: 1; transform: rotate(45deg); }
.menu-toggle.is-active::after { opacity: 1; transform: rotate(-45deg); }
@media (prefers-reduced-motion: reduce) {
  .menu-toggle .icon,
  .menu-toggle::before,
  .menu-toggle::after { transition: none; }
  .menu-toggle.is-active .icon { transform: none; }
}

/* ---------- Scroll progress ---------- */
/* Sits above the sticky header. scaleX rather than width, so the browser only
   ever composites it and never re-lays-out the page while you scroll. */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 1200;
  background: rgba(23, 29, 51, 0.10);
  pointer-events: none;
}
.scroll-progress__fill {
  display: block;
  height: 100%;
  transform-origin: left center;
  transform: scaleX(0);
  background: linear-gradient(90deg, var(--color-primary), var(--color-accent) 65%, var(--gold-300));
}
@media (prefers-reduced-motion: reduce) {
  .scroll-progress { height: 2px; }
}

/* ---------- Hero ---------- */
/* fully transparent: the scrubbed sequence behind the page is the hero
   backdrop, so nothing here may cover it */
.hero {
  position: relative;
  background: transparent;
  color: #fff;
  /* was 128/96 with an 88dvh floor, which left ~300px of dead air around
     ~490px of content on a 900px screen */
  padding-block: var(--space-8) var(--space-7);
  min-height: 66dvh;
  display: flex;
  align-items: center;
}
.hero-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
  gap: var(--space-8);
  align-items: center;
}
.hero-tagline {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.25);
  padding: 0.4rem 1rem;
  border-radius: var(--radius-pill);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: var(--space-5);
  color: var(--gold-300);
}
.hero h1 {
  color: #fff;
  margin-bottom: var(--space-5);
  /* the welcome line is long, so it wants a slightly smaller ceiling than the
     global h1; balance splits it evenly instead of leaving a stray last word.
     No max-width — capping it forced a third line at tablet widths. */
  font-size: clamp(2rem, 3.9vw, 3.1rem);
  text-wrap: balance;
}
.hero-lede {
  font-size: 1.15rem;
  color: rgba(255,255,255,0.85);
  max-width: 42ch;
  margin-bottom: var(--space-6);
}
.hero-actions { display: flex; gap: var(--space-4); flex-wrap: wrap; }


.hero-mark {
  position: relative;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-mark::before {
  content: "";
  position: absolute;
  inset: 8%;
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 50%;
}
.hero-mark img { width: 46%; opacity: 0.95; }

/* ---------- Photo slots (placeholders until real photos are supplied) ---------- */
.photo-slot {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background-color: var(--navy-700);
  background-image:
    var(--photo, none),
    radial-gradient(120% 120% at 20% 15%, rgba(176,141,87,0.35), transparent 55%),
    linear-gradient(155deg, var(--navy-600), var(--navy-900));
  background-size: cover;
  background-position: center;
  box-shadow: var(--shadow-lg);
}
.photo-slot::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("../assets/logo/icon-blue-v2.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 34%;
  opacity: 0.14;
}
.photo-slot--portrait { aspect-ratio: 4 / 5; }
/* real photos live in every photo-slot now — no decorative watermark on top of them */
.photo-slot--portrait::after,
.photo-slot--wide::after { content: none; }
.photo-slot--wide { aspect-ratio: 16 / 10; }

.photo-slot--illustrated::after { content: none; }
.photo-slot--illustrated { display: flex; align-items: center; justify-content: center; }
.photo-slot--illustrated svg { width: 100%; height: 100%; }

/* ---------- About ---------- */
.about-body { max-width: 62rem; }

.credential-list {
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.credential-list li {
  padding-left: var(--space-4);
  border-left: 2px solid var(--gold-300);
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--color-text-muted);
}

/* ---------- Practice Areas (numbered index, not a card grid) ---------- */
/* A tinted photograph sits behind this section as texture, not as an image:
   held right down so the numerals and rules stay the subject. */
#practice-areas {
  position: relative;
  isolation: isolate;
}
#practice-areas::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: url("../assets/images/research-collaboration.jpg");
  background-size: cover;
  background-position: center 30%;
  opacity: 0.10;
  filter: grayscale(0.3);
}
/* fade it out toward the text column so nothing competes with the reading */
#practice-areas::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(100deg, var(--color-surface) 30%, rgba(255, 255, 255, 0.72) 100%);
}

/* One column now. The sticky two-column arrangement suited a text list, but
   it squeezed seven photo cards into 1.3fr, so the intro runs across the top
   and the grid gets the full width underneath, as on Other Services. */
.practice-layout { display: block; }
.practice-intro { max-width: 44rem; margin-bottom: var(--space-7); }
.practice-intro p { margin-bottom: var(--space-6); }

/* ---------- Practice area cards ----------
   Same construction as the Other Services cards: photo in a clipped frame, a
   badge straddling the seam, then the text. The badge carries the index
   numeral rather than an icon, which keeps the editorial numbering that gave
   this page its character.

   Every photo is navy-duotoned at build time to the same ramp as the Find us
   and Our Team grounds, so the whole site's photography sits in one palette. */
.pa-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-5);
}
@media (min-width: 900px) {
  .pa-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.pa-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition:
    box-shadow var(--duration-base) var(--ease-out),
    border-color var(--duration-base) var(--ease-out),
    transform var(--duration-base) var(--ease-out);
}

.pa-card__media {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--color-primary-strong);
}
.pa-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* The navy used to be burned into the JPEG, which meant it could never be
     taken off. The files are plain colour photographs now and the tint lives
     here instead, so hover can simply lift it and show the original. */
  filter: grayscale(1) contrast(1.04) brightness(0.96);
  transition:
    transform 620ms var(--ease-out),
    filter 480ms var(--ease-out);
}
/* the navy itself, lifted on hover so the photograph comes through */
.pa-card__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(31, 40, 71, 0.62) 0%, rgba(31, 40, 71, 0.44) 55%, rgba(23, 29, 51, 0.7) 100%);
  transition: opacity var(--duration-base) var(--ease-out);
}

.pa-card__body {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: calc(var(--space-5) + 24px) var(--space-5) var(--space-5);
}
.pa-card__num {
  position: absolute;
  top: 0;
  left: var(--space-5);
  transform: translateY(-50%);
  z-index: 2;
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  box-shadow: 0 6px 18px rgba(23, 29, 51, 0.18);
  font-family: var(--font-serif);
  font-size: 1.05rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  color: var(--color-accent-strong);
  transition:
    transform var(--duration-base) var(--ease-out),
    background var(--duration-base) var(--ease-out),
    color var(--duration-base) var(--ease-out),
    border-color var(--duration-base) var(--ease-out);
}
.pa-card h3 {
  font-size: 1.14rem;
  margin-bottom: var(--space-2);
  color: var(--color-primary-strong);
}
.pa-card p {
  font-size: 0.94rem;
  color: var(--color-text-muted);
  margin-bottom: 0;
  max-width: none;
}

.pa-card:hover,
.pa-card:focus-within,
.pa-card.is-spotlit {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
  border-color: var(--gold-300);
}
.pa-card:hover .pa-card__media img,
.pa-card:focus-within .pa-card__media img,
.pa-card.is-spotlit .pa-card__media img {
  transform: scale(1.07);
  filter: none;
}

.pa-card:hover .pa-card__scrim,
.pa-card:focus-within .pa-card__scrim,
.pa-card.is-spotlit .pa-card__scrim { opacity: 0.1; }

.pa-card:hover .pa-card__num,
.pa-card:focus-within .pa-card__num,
.pa-card.is-spotlit .pa-card__num {
  transform: translateY(calc(-50% - 4px)) scale(1.06);
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #fff;
}

/* Seven cards across three columns leaves the last one alone on its own row.
   It runs the full width instead, photo beside the text, which also suits the
   longest description of the seven. */
@media (min-width: 900px) {
  .pa-card:last-child {
    grid-column: 1 / -1;
    flex-direction: row;
    align-items: stretch;
  }
  .pa-card:last-child .pa-card__media {
    flex: 0 0 38%;
    aspect-ratio: auto;
  }
  .pa-card:last-child .pa-card__body {
    justify-content: center;
    padding: var(--space-6) var(--space-6) var(--space-6) calc(var(--space-6) + 34px);
  }
  .pa-card:last-child .pa-card__num {
    top: 50%;
    left: 0;
    transform: translate(-50%, -50%);
  }
  .pa-card:last-child:hover .pa-card__num,
  .pa-card:last-child:focus-within .pa-card__num,
  .pa-card:last-child.is-spotlit .pa-card__num {
    transform: translate(-50%, -50%) scale(1.06);
  }
  .pa-card:last-child p { max-width: 62ch; }
}

@media (hover: none) {
  .pa-card.is-spotlit { transform: translateY(-3px); }
}
@media (prefers-reduced-motion: reduce) {
  .pa-card,
  .pa-card__media img,
  .pa-card__num,
  .pa-card__scrim { transition: none; }
  .pa-card:hover,
  .pa-card.is-spotlit { transform: none; }
  .pa-card:hover .pa-card__media img,
  .pa-card.is-spotlit .pa-card__media img { transform: none; }
}

/* ---------- Research / Get Involved (feature band) ---------- */
.feature-band {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-8);
  align-items: center;
}
.feature-band.reverse .feature-media { order: 2; }
.feature-list { margin-top: var(--space-5); display: flex; flex-direction: column; gap: var(--space-4); }
.feature-list li { display: flex; gap: var(--space-3); align-items: flex-start; }
.feature-list .icon { color: var(--color-accent); margin-top: 3px; }
.feature-list span { color: rgba(255,255,255,0.85); font-size: 0.96rem; }
.section:not(.section--dark) .feature-list span { color: var(--color-text-muted); }
.section:not(.section--dark) .feature-list .icon { color: var(--color-accent-strong); }

/* ---------- Publications (coming soon) ---------- */
.coming-soon-card {
  background: var(--color-surface);
  border: 1px dashed var(--line-300);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  text-align: center;
  max-width: 40rem;
  margin-inline: auto;
}
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--gold-100);
  color: var(--color-accent-strong);
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.35rem 0.9rem;
  border-radius: var(--radius-pill);
  margin-bottom: var(--space-4);
}
.badge .icon { width: 14px; height: 14px; }

.publication-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  max-width: 52rem;
  margin-inline: auto;
}
.publication-card {
  display: flex;
  gap: var(--space-5);
  align-items: flex-start;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  transition: box-shadow var(--duration-base) var(--ease-out), border-color var(--duration-base) var(--ease-out);
}
.publication-card:hover { box-shadow: var(--shadow-md); border-color: var(--gold-300); }
.publication-card .practice-icon { margin-bottom: 0; flex-shrink: 0; }
.publication-card h3 { font-size: 1.05rem; margin-bottom: var(--space-2); }
.publication-card p { font-size: 0.92rem; margin-bottom: var(--space-2); }
.publication-meta {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-accent-strong);
}
.publication-note {
  text-align: center;
  margin: var(--space-6) auto 0;
  font-size: 0.9rem;
  max-width: 40rem;
}

/* ---------- Testimonials ---------- */
.testimonial-placeholder {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-5);
}
.testimonial-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  background: var(--color-surface);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  min-height: 180px;
  justify-content: center;
}
.testimonial-card .icon { color: var(--gold-300); width: 30px; height: 30px; }
.testimonial-card p { font-size: 0.9rem; font-style: italic; margin-bottom: 0; }

/* ---------- Contact ---------- */
.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: var(--space-8);
}
.contact-list { display: flex; flex-direction: column; gap: var(--space-5); margin-top: var(--space-6); }

.map-embed {
  margin-top: var(--space-6);
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
  /* the frame needs its own height, otherwise the iframe falls back to the
     HTML default 300x150 and sits smaller than the rounded cut-out */
  aspect-ratio: 16 / 10;
}
.map-embed iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}
.contact-item {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
  text-decoration: none;
  color: inherit;
}
.contact-item .icon-wrap {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--navy-100);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.contact-item strong { display: block; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-faint); margin-bottom: 2px; }
.contact-item p { margin: 0; color: var(--color-text); font-weight: 600; }
a.contact-item:hover p { color: var(--color-primary); text-decoration: underline; }

.contact-card {
  background: var(--color-primary);
  color: #fff;
  border-radius: var(--radius-lg);
  padding: var(--space-7);
  position: relative;
  overflow: hidden;
}
.contact-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("../assets/logo/icon-blue-v2.png");
  background-repeat: no-repeat;
  background-position: 105% 105%;
  background-size: 32%;
  opacity: 0.1;
  pointer-events: none;
}
/* h2 included: the Get Involved card heads with an h2, which otherwise falls
   back to the dark global heading colour — navy text on the navy card. */
.contact-card h2,
.contact-card h3,
.contact-card h4 { color: #fff; position: relative; }
.contact-card p { color: rgba(255,255,255,0.82); position: relative; }
.contact-card .btn { position: relative; margin-top: var(--space-4); }

/* ---------- About pills ---------- */
.about-pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
}
.about-pills li {
  border: 1px solid var(--gold-300);
  background: var(--gold-100);
  color: var(--color-accent-strong);
  border-radius: var(--radius-pill);
  padding: 0.35rem 0.95rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

/* ---------- Emblem band (between hero and About) ---------- */
/* Sits flush under the hero and runs close to the full width of the screen.
   background.svg is a real cut-out (its two white backing rects were removed),
   so it needs no card and works on any ground. */
/* two classes, so it also beats the narrow-viewport .section override
   further down the file */
.section.section--flush-top { padding-top: 0; }
.emblem {
  /* 1024px is the width of the raster inside background.svg, so this is also
     about as large as it can go before it starts to soften */
  width: min(100%, 980px);
  margin-inline: auto;
  padding-inline: var(--space-4);
}
.emblem img {
  display: block;
  width: 100%;
  height: auto;
}
@media (max-width: 768px) {
  .emblem { padding-inline: var(--space-3); }
}

/* ---------- Reversible reveal ---------- */
/* Comes in on the way down and goes back out on the way up, so a list you
   scroll through twice animates twice instead of sitting frozen. */
[data-scroll-in] {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 520ms var(--ease-out),
    transform 520ms var(--ease-out);
  transition-delay: var(--in-delay, 0ms);
}
[data-scroll-in].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  [data-scroll-in] { opacity: 1; transform: none; transition: none; }
}

/* ---------- Scroll-linked reveal ---------- */
/* Tied to scroll position rather than fired once, so the element comes in
   as you move rather than snapping when it crosses a line. JS writes the
   three custom properties; CSS just consumes them. */
[data-scroll-reveal] {
  opacity: var(--sr-opacity, 0);
  transform: translateY(var(--sr-shift, 34px)) scale(var(--sr-scale, 0.975));
  transform-origin: center bottom;
  will-change: opacity, transform;
}
/* the emblem grows downward instead, so its top edge never leaves the hero.
   Needs the extra specificity to beat the rule above, which comes later. */
.emblem[data-scroll-reveal] { transform-origin: center top; }
@media (prefers-reduced-motion: reduce) {
  [data-scroll-reveal] {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ---------- Testimonial carousel ---------- */
/* The placeholder quote is one short line, so the default section rhythm
   leaves a cavern between the heading and the opening quote mark. */
.testimonials .section-head { margin-bottom: var(--space-2); }
.testimonials .quote { padding: var(--space-4) var(--space-5) 0; }
.testimonials .quote__mark { margin-bottom: var(--space-3); }
.testimonials .quotes__controls { margin-top: var(--space-5); }

.quotes { max-width: 46rem; margin-inline: auto; }
.quotes__viewport { overflow: hidden; }
.quotes__track {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  transition: transform 620ms var(--ease-out);
}
@media (prefers-reduced-motion: reduce) {
  .quotes__track { transition: none; }
}
.quote {
  flex: 0 0 100%;
  min-width: 100%;
  text-align: center;
  padding: var(--space-6) var(--space-5);
}
.quote__mark { width: 34px; height: 34px; color: var(--gold-300); margin-bottom: var(--space-4); }
.quote__text {
  font-family: var(--font-serif);
  font-size: clamp(1.15rem, 2.2vw, 1.5rem);
  font-style: italic;
  color: var(--color-primary-strong);
  margin-inline: auto;
  margin-bottom: var(--space-4);
  max-width: 34ch;
}
.quotes__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  margin-top: var(--space-4);
}
.quotes__btn {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background: transparent;
  color: var(--color-primary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.quotes__btn:hover { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
.quotes__btn .icon { width: 17px; height: 17px; }
.quotes__dots { display: flex; gap: var(--space-2); }
.quotes__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: none;
  padding: 0;
  cursor: pointer;
  background: var(--line-300);
  transition: background var(--duration-fast), transform var(--duration-fast);
}
.quotes__dot[aria-current="true"] { background: var(--color-accent); transform: scale(1.3); }

/* ---------- Useful links ---------- */
.useful { background: var(--paper-100); }
.useful__head { margin-bottom: var(--space-5); }
.useful__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  gap: var(--space-2);
  list-style: none;
  margin: 0;
  padding: 0;
}
.useful__list li { display: flex; }
.useful__list a {
  /* fill the grid row so tiles in a row match, whatever the name wraps to */
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  text-decoration: none;
  font-size: 0.83rem;
  line-height: 1.35;
  font-weight: 600;
  color: var(--color-primary-strong);
  transition: border-color var(--duration-fast), transform var(--duration-fast), box-shadow var(--duration-fast);
}
.useful__list a:hover {
  border-color: var(--gold-300);
  transform: translateX(3px);
  box-shadow: var(--shadow-sm);
}
.useful__list .icon { width: 14px; height: 14px; color: var(--color-accent-strong); flex-shrink: 0; }

/* ---------- Find us (home map card) ---------- */
.find-us { background: var(--color-surface); }

/* Photo ground: your "picture 2" statue shot, desaturated to a navy duotone
   at build time, then laid under a navy wash that is heaviest on the left so
   the text column stays legible while the image still reads on the right. */
.find-us--photo {
  position: relative;
  isolation: isolate;
  color: #fff;
  background:
    linear-gradient(100deg,
      rgba(23, 29, 51, 0.95) 0%,
      rgba(23, 29, 51, 0.88) 42%,
      rgba(31, 40, 71, 0.74) 100%),
    url("../assets/images/find-us-bg.jpg") center / cover no-repeat;
  border-block: 1px solid rgba(255, 255, 255, 0.10);
}
.find-us--photo h2,
.find-us--photo .find-us__hours strong { color: #fff; }
.find-us--photo .eyebrow { color: var(--gold-300); }
.find-us--photo .find-us__hours { color: rgba(255, 255, 255, 0.86); }
.find-us--photo .find-us__hours .icon,
.find-us--photo .find-us__place .icon { color: var(--gold-300); }
.find-us--photo .btn--ghost {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.42);
}
.find-us--photo .btn--ghost:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.7);
}

/* place name reads as one unit with the pin */
.find-us__place {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.find-us__place .icon {
  width: 0.78em;
  height: 0.78em;
  flex-shrink: 0;
  color: var(--color-accent-strong);
}
.find-us__hours strong { display: block; color: var(--color-primary-strong); }
.find-us__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: var(--space-7);
  align-items: center;
}
.find-us__hours {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 0.92rem;
  margin-bottom: var(--space-5);
}
.find-us__hours .icon { width: 17px; height: 17px; color: var(--color-accent-strong); }
.find-us__actions { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.map-embed--compact { aspect-ratio: 16 / 9; }

/* ---------- Attorney profile pages ---------- */
.profile-layout {
  display: grid;
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  gap: var(--space-8);
  align-items: start;
}
.profile-aside { position: sticky; top: 110px; }
.profile-photo {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--navy-100);
  box-shadow: var(--shadow-md);
}
.profile-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.profile-contact { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-5); }
.profile-contact .btn { width: 100%; }
.profile-callnum {
  text-align: center;
  font-size: 0.85rem;
  color: var(--color-text-faint);
  margin-top: var(--space-3);
}
.profile-main h1 { font-size: clamp(2rem, 3.6vw, 2.9rem); margin-bottom: var(--space-4); }
.profile-intro {
  font-size: 1.1rem;
  color: var(--color-text);
  padding-bottom: var(--space-5);
  margin-bottom: var(--space-5);
  border-bottom: 1px solid var(--color-border);
}
.profile-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--space-7);
  margin-top: var(--space-7);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border);
}
.profile-subhead {
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-faint);
  font-family: var(--font-sans);
  margin-bottom: var(--space-4);
}
.profile-subhead--spaced { margin-top: var(--space-6); }
.profile-cols .credential-list { margin-top: 0; padding-top: 0; border-top: none; }
.profile-tags { margin-bottom: 0; }
.profile-langs { font-size: 0.92rem; margin-bottom: 0; }

.roster-card__langs {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 0.85rem;
  color: var(--color-text-muted);
  margin-bottom: var(--space-4);
}
.roster-card__langs .icon { width: 15px; height: 15px; color: var(--color-accent-strong); }
.roster-card__body h2 a { text-decoration: none; }
.roster-card__body h2 a:hover { color: var(--color-accent-strong); }
.roster-card__media { display: block; }

@media (max-width: 900px) {
  .profile-layout { grid-template-columns: 1fr; gap: var(--space-6); }
  .profile-aside { position: static; max-width: 320px; }
  .find-us__grid { grid-template-columns: 1fr; gap: var(--space-6); }
}

/* ---------- Sub-page headers ---------- */
.page-head { max-width: 46rem; margin: 0 auto var(--space-8); text-align: center; }
.page-head h1 { font-size: clamp(2.1rem, 4.4vw, 3.25rem); margin-bottom: var(--space-4); }
.page-head p { margin-inline: auto; }
.eyebrow--center { justify-content: center; }

.narrow-page { max-width: 44rem; }
.page-lede { font-size: 1.08rem; margin-bottom: var(--space-6); }

.back-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--color-text-muted);
  text-decoration: none;
  margin-bottom: var(--space-6);
}
.back-link:hover { color: var(--color-primary); }
.back-link .icon { width: 16px; height: 16px; }

/* ---------- Attorney roster (attorneys page) ---------- */
.roster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: var(--space-6);
  max-width: 62rem;
  margin-inline: auto;
}
.roster-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow var(--duration-base) var(--ease-out),
              border-color var(--duration-base) var(--ease-out),
              transform var(--duration-base) var(--ease-out);
}
.roster-card:hover {
  box-shadow: var(--shadow-lg);
  border-color: var(--gold-300);
  transform: translateY(-3px);
}
.roster-card__media { position: relative; aspect-ratio: 4 / 5; background: var(--navy-100); }
.roster-card__media img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.roster-card__badge {
  position: absolute;
  right: var(--space-4);
  bottom: var(--space-4);
  background: var(--color-accent);
  color: var(--color-on-accent);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 0.3rem 0.8rem;
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-sm);
}
.roster-card__badge--senior { background: var(--color-primary); color: #fff; }

.roster-card__body { padding: var(--space-6); display: flex; flex-direction: column; flex: 1; }
.roster-card__body h2 {
  font-size: 1.3rem;
  margin-bottom: var(--space-2);
  color: var(--color-primary-strong);
}
.roster-card__role {
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: var(--space-2);
}
.roster-card__years { font-size: 0.88rem; margin-bottom: var(--space-4); }
.roster-card__tags { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-5); }
.roster-card__tags li {
  background: var(--navy-100);
  color: var(--color-primary);
  border-radius: var(--radius-pill);
  padding: 0.25rem 0.7rem;
  font-size: 0.75rem;
  font-weight: 600;
}
.roster-card__link {
  margin-top: auto;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--color-accent-strong);
}
.roster-card__link .icon { width: 16px; height: 16px; transition: transform var(--duration-fast) var(--ease-standard); }
.roster-card__link:hover .icon { transform: translateX(3px); }

.roster-foot {
  max-width: 44rem;
  margin: var(--space-8) auto 0;
  text-align: center;
  font-size: 0.92rem;
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border);
}

/* ---------- Service grid (other services hub) ---------- */
.service-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-5);
  max-width: 60rem;
  margin-inline: auto;
}
/* two columns rather than auto-fit: four cards across three columns left an
   orphan on the second row */
@media (min-width: 860px) {
  .service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.service-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  text-decoration: none;
  overflow: hidden;
  transition:
    box-shadow var(--duration-base) var(--ease-out),
    border-color var(--duration-base) var(--ease-out),
    transform var(--duration-base) var(--ease-out);
}

/* photo sits in its own clipped frame so the image can scale on hover without
   the card itself changing size */
.service-card__media {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--color-primary-strong);
}
.service-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* The navy used to be burned into the JPEG, which meant it could never be
     taken off. The files are plain colour photographs now and the tint lives
     here instead, so hover can simply lift it and show the original. */
  filter: grayscale(1) contrast(1.04) brightness(0.96);
  transition:
    transform 620ms var(--ease-out),
    filter 480ms var(--ease-out);
}
/* the navy itself, lifted on hover so the photograph comes through */
.service-card__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(31, 40, 71, 0.62) 0%, rgba(31, 40, 71, 0.44) 55%, rgba(23, 29, 51, 0.7) 100%);
  transition: opacity var(--duration-base) var(--ease-out);
}

/* The mark straddles the photo and the body, the way the reference does it.
   It is positioned against the body's top edge rather than a percentage of the
   card: a percentage resolves against the card, not the photo, so it drifted
   down into the text as soon as the card grew. */
.service-card__icon {
  position: absolute;
  top: 0;
  left: var(--space-5);
  transform: translateY(-50%);
  z-index: 2;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-surface);
  color: var(--color-primary);
  border: 1px solid var(--color-border);
  box-shadow: 0 6px 18px rgba(23, 29, 51, 0.18);
  transition:
    transform var(--duration-base) var(--ease-out),
    background var(--duration-base) var(--ease-out),
    color var(--duration-base) var(--ease-out),
    border-color var(--duration-base) var(--ease-out);
}
.service-card__icon .icon { width: 24px; height: 24px; }

.service-card__body {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1;
  /* top padding clears the half of the badge that hangs into this box */
  padding: calc(var(--space-5) + 26px) var(--space-5) var(--space-5);
}
.service-card__body h2 {
  font-size: 1.2rem;
  margin-bottom: var(--space-2);
  color: var(--color-primary-strong);
}
.service-card__body p {
  font-size: 0.94rem;
  color: var(--color-text-muted);
  margin-bottom: var(--space-4);
  max-width: none;
}
.service-card__go {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-accent-strong);
}
.service-card__go .icon {
  width: 16px;
  height: 16px;
  transition: transform var(--duration-base) var(--ease-out);
}

/* ---- hover / focus / spotlight all share one state ---- */
.service-card:hover,
.service-card:focus-visible,
.service-card.is-spotlit {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
  border-color: var(--gold-300);
}
.service-card:hover .service-card__media img,
.service-card:focus-visible .service-card__media img,
.service-card.is-spotlit .service-card__media img {
  transform: scale(1.07);
  filter: none;
}

.service-card:hover .service-card__scrim,
.service-card:focus-visible .service-card__scrim,
.service-card.is-spotlit .service-card__scrim { opacity: 0.1; }

.service-card:hover .service-card__icon,
.service-card:focus-visible .service-card__icon,
.service-card.is-spotlit .service-card__icon {
  transform: translateY(calc(-50% - 4px)) scale(1.06);
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #fff;
}
.service-card:hover .service-card__go .icon,
.service-card:focus-visible .service-card__go .icon,
.service-card.is-spotlit .service-card__go .icon,
.service-card:active .service-card__go .icon { transform: translateX(5px); }

.service-card:active { transform: translateY(-3px) scale(0.995); }

@media (prefers-reduced-motion: reduce) {
  .service-card,
  .service-card__media img,
  .service-card__icon,
  .service-card__scrim,
  .service-card__go .icon { transition: none; }
  .service-card:hover,
  .service-card.is-spotlit { transform: none; }
  .service-card:hover .service-card__media img,
  .service-card.is-spotlit .service-card__media img { transform: none; }
}

/* ---------- Choice dialog (pro bono: email or phone) ---------- */
.np-notice__panel--plain { font-family: var(--font-sans); }
.choice-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-6);
}
.choice-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  text-decoration: none;
  transition: border-color var(--duration-fast), background var(--duration-fast);
}
.choice-card:hover { border-color: var(--color-accent); background: var(--gold-100); }
.choice-card__icon {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--navy-100);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-2);
}
.choice-card strong { font-size: 1.02rem; color: var(--color-primary-strong); }
.choice-card__sub { font-size: 0.85rem; color: var(--color-text-muted); }

/* ---------- File attachments ---------- */
.filedrop {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  border: 1px dashed var(--line-300);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  cursor: pointer;
  font-size: 0.9rem;
  color: var(--color-text-muted);
  transition: border-color var(--duration-fast), background var(--duration-fast);
  min-height: 56px;
}
.filedrop:hover { border-color: var(--color-accent); background: var(--gold-100); }
.filedrop .icon { width: 20px; height: 20px; color: var(--color-accent-strong); flex-shrink: 0; }
/* inside the navy card the dashed border and text need lifting */
.filedrop--light {
  border-color: rgba(255, 255, 255, 0.35);
  color: rgba(255, 255, 255, 0.8);
}
.filedrop--light:hover { border-color: #fff; background: rgba(255, 255, 255, 0.08); }
.filedrop--light .icon { color: var(--gold-300); }

.filelist { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-3); }
.filelist__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  font-size: 0.85rem;
  background: var(--color-surface-alt);
  border-radius: var(--radius-sm);
  padding: 0.45rem 0.75rem;
}
.booking-form .filelist__item { background: rgba(255, 255, 255, 0.12); color: #fff; }
.filelist__remove {
  border: none;
  background: transparent;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  color: inherit;
  opacity: 0.65;
  padding: 0 0.25rem;
}
.filelist__remove:hover { opacity: 1; }

.stack-form { display: flex; flex-direction: column; gap: var(--space-5); }
.stack-form label, .stack-form .form-label {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--color-text);
}
.stack-form input, .stack-form textarea {
  width: 100%;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 0.7rem 0.9rem;
  font: inherit;
  font-size: 0.95rem;
  background: var(--color-surface);
  color: var(--color-text);
  min-height: 46px;
}
.stack-form textarea { resize: vertical; }
.stack-form .form-status { color: var(--color-accent-strong); }
.stack-form .form-status[data-state="error"] { color: #a4342a; }

.language-note {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  background: var(--gold-100);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-6);
  font-size: 0.92rem;
  color: var(--color-text);
}
.language-note .icon { width: 18px; height: 18px; color: var(--color-accent-strong); margin-top: 3px; flex-shrink: 0; }

/* ---------- Attorneys (home-page cards, legacy) ---------- */
.attorney-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-5);
}
.attorney-card {
  display: flex;
  gap: var(--space-5);
  align-items: center;
  text-align: left;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  cursor: pointer;
  font: inherit;
  transition: border-color var(--duration-base) var(--ease-out),
              box-shadow var(--duration-base) var(--ease-out),
              transform var(--duration-base) var(--ease-out);
}
.attorney-card:hover {
  border-color: var(--gold-300);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.attorney-card__photo {
  width: 104px;
  height: 130px;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  background-size: cover;
  background-position: center top;
  background-color: var(--navy-100);
}
.attorney-card__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.attorney-card__name {
  font-family: var(--font-serif);
  font-size: 1.2rem;
  color: var(--color-primary-strong);
}
.attorney-card__role {
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-accent-strong);
}
.attorney-card__meta {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  margin-top: var(--space-2);
}
.attorney-card__more {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-3);
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--color-primary);
}
.attorney-card__more .icon { width: 16px; height: 16px; }

.attorney-modal {
  position: fixed;
  inset: 0;
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-5);
  background: rgba(23, 29, 51, 0.72);
  overflow-y: auto;
}
.attorney-modal[hidden] { display: none; }
.attorney-modal__panel {
  position: relative;
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: var(--space-7);
  max-width: 40rem;
  width: 100%;
  box-shadow: var(--shadow-lg);
  margin-block: auto;
}
.attorney-modal__head {
  display: flex;
  gap: var(--space-5);
  align-items: center;
  margin-bottom: var(--space-5);
  padding-right: var(--space-7);
}
.attorney-modal__photo {
  width: 92px;
  height: 115px;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  background-size: cover;
  background-position: center top;
  background-color: var(--navy-100);
}
.attorney-modal__head h2 { font-size: 1.5rem; margin-bottom: var(--space-2); }
.attorney-modal__actions {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-top: var(--space-6);
}

@media (max-width: 520px) {
  .attorney-card { flex-direction: column; align-items: flex-start; }
  .attorney-card__photo { width: 100%; height: 190px; }
  .attorney-modal__head { flex-direction: column; align-items: flex-start; }
}

.careers-note {
  margin-top: var(--space-5);
  padding: var(--space-4) var(--space-5);
  border-left: 3px solid var(--color-accent);
  background: var(--color-surface-alt);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: 0.9rem;
}
.careers-note a { color: var(--color-accent-strong); font-weight: 700; }

.subpage-lede--muted { color: var(--color-text-muted); font-size: 1rem; }

/* ---------- Standalone sub-pages ---------- */
/* no scrubbed sequence on these, so they get a plain page background */
body.subpage { background: var(--color-bg); }
/* 68dvh forced 612px of height onto pages whose head is 222px of text, which
   is where most of the empty space on the sub-pages was coming from. Sized to
   its content now, with a modest floor so a short page still has a head. */
.subpage-hero { min-height: 34dvh; display: flex; align-items: center; }
/* the legal pages' head is a title, one line and a date, and it sits directly
   above a long body, so it needs no floor at all */
.subpage-hero--legal { min-height: 0; }
.subpage-hero h1 { font-size: clamp(2rem, 4vw, 3rem); margin-bottom: var(--space-5); }
.subpage-lede { font-size: 1.1rem; max-width: 48ch; }
.subpage-actions { display: flex; gap: var(--space-4); flex-wrap: wrap; margin-top: var(--space-6); }
.subpage-note {
  margin-top: var(--space-7);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border);
  font-size: 0.85rem;
  color: var(--color-text-faint);
}
body.subpage .site-header .btn { padding: 0.6rem 1.1rem; }

/* ---------- Case status ---------- */
.case-form { max-width: 46rem; margin-inline: auto; }
.case-form__fields {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) auto;
  gap: var(--space-4);
  align-items: end;
}
.case-form label {
  font-size: 0.8rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.85);
}
.case-form input {
  width: 100%;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: var(--radius-sm);
  padding: 0.7rem 0.9rem;
  font: inherit;
  font-size: 0.95rem;
  color: var(--color-text);
  min-height: 46px;
}
.case-form input:focus-visible { outline: 3px solid var(--gold-300); outline-offset: 2px; }
.case-form__submit { min-height: 46px; white-space: nowrap; }
.case-form__note {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: var(--space-4) 0 0;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.6);
}
.case-form__note .icon { width: 15px; height: 15px; color: var(--gold-300); flex-shrink: 0; }

.case-result {
  max-width: 46rem;
  margin: var(--space-6) auto 0;
  background: rgba(255, 255, 255, 0.97);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-lg);
  color: var(--color-text);
}
.case-result[hidden] { display: none; }
.case-result__head {
  display: flex;
  justify-content: space-between;
  gap: var(--space-5);
  flex-wrap: wrap;
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--color-border);
}
.case-result__ref {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-accent-strong);
}
.case-result__head h3 { margin: var(--space-2) 0 0; font-size: 1.25rem; }
.case-result__registered { text-align: right; }
.case-result__registered strong {
  display: block;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-faint);
}
.case-result__registered span { font-weight: 600; color: var(--color-primary-strong); }

.case-result__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-6);
  padding-top: var(--space-5);
}
.case-block__label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-faint);
  margin-bottom: var(--space-3);
}
.case-block__label .icon { width: 15px; height: 15px; color: var(--color-accent-strong); }
.case-block__value {
  font-family: var(--font-serif);
  font-size: 1.1rem;
  color: var(--color-primary-strong);
  margin-bottom: var(--space-1);
}
.case-block__sub { font-size: 0.88rem; margin-bottom: 0; }

.case-docs { display: flex; flex-direction: column; gap: var(--space-2); }
.case-doc {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  font-size: 0.9rem;
}
.case-doc__name { color: var(--color-text-muted); }
.case-chip {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.2rem 0.55rem;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}
.case-chip--filed { background: #e4efe6; color: #2f6b40; }
.case-chip--in-progress { background: var(--gold-100); color: var(--gold-600); }
.case-chip--pending { background: var(--color-surface-alt); color: var(--color-text-faint); }
.case-book { margin-top: var(--space-3); }

@media (max-width: 860px) {
  .case-form__fields { grid-template-columns: 1fr; }
  .case-form__submit { width: 100%; }
  .case-result__grid { grid-template-columns: 1fr; gap: var(--space-5); }
  .case-result__registered { text-align: left; }
}

/* ---------- Booking form ---------- */
.booking-form { position: relative; margin-top: var(--space-6); display: flex; flex-direction: column; gap: var(--space-5); }

.form-row { display: flex; flex-direction: column; gap: var(--space-2); }
.form-row--split { flex-direction: row; gap: var(--space-4); }
.form-row--split > div { flex: 1; display: flex; flex-direction: column; gap: var(--space-2); }

.booking-form label,
.booking-form .form-label {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: rgba(255, 255, 255, 0.85);
}

.booking-form input,
.booking-form select,
.booking-form textarea {
  width: 100%;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: var(--radius-sm);
  padding: 0.7rem 0.9rem;
  font: inherit;
  font-size: 0.95rem;
  color: var(--color-text);
  min-height: 44px;
}
/* native select, restyled to sit with the text inputs; the arrow is an inline
   SVG data URI so it needs no extra request and no CDN */
.booking-form select {
  appearance: none;
  cursor: pointer;
  padding-right: 2.4rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%231f2847' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
  background-size: 12px 8px;
}
.booking-form select:invalid { color: rgba(31, 40, 71, 0.55); }

/* An author `display` value beats the browser's own [hidden] rule, so any
   element we give a display to must opt back out of it, or setting .hidden in
   JS silently does nothing. This caught both conditional boxes below. */
[hidden] { display: none !important; }

/* conditional "write your own" boxes, revealed by a chip or a select option */
.chip-other,
.select-other {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-3);
  animation: otherIn var(--duration-fast) var(--ease-out);
}
@keyframes otherIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .chip-other, .select-other { animation: none; }
}
.booking-form textarea { min-height: 88px; resize: vertical; }
.booking-form input:focus-visible,
.booking-form textarea:focus-visible { outline: 3px solid var(--gold-300); outline-offset: 2px; }

.chip-group { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.chip {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #fff;
  border-radius: var(--radius-pill);
  padding: 0.5rem 1rem;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  min-height: 40px;
  transition: background var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard);
}
.chip:hover { border-color: #fff; background: rgba(255, 255, 255, 0.14); }
.chip:active { transform: scale(0.97); }
.chip:focus-visible { outline: 2px solid var(--gold-300); outline-offset: 2px; }

/* Single-select groups (day, time) mark the choice with aria-checked;
   multi-select groups (areas of interest) use aria-pressed. Only the first was
   styled, so the interest chips toggled correctly but looked completely inert,
   which read as "the buttons don't work". Both are styled now. */
.chip[aria-checked="true"],
.chip[aria-pressed="true"] {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-on-accent);
}

/* a tick on the multi-select chips, so it is obvious more than one can be on */
.chip-group--multi .chip::before {
  content: "";
  display: inline-block;
  width: 0;
  margin-right: 0;
  overflow: hidden;
  vertical-align: -1px;
  transition: width var(--duration-fast) var(--ease-out), margin-right var(--duration-fast) var(--ease-out);
}
.chip-group--multi .chip[aria-pressed="true"]::before {
  content: "\2713";
  width: 1em;
  margin-right: 0.35rem;
}
.chip-group--multi { row-gap: var(--space-2); }

.form-status { font-size: 0.85rem; color: var(--gold-300); min-height: 1.2em; margin: 0; }
.form-status[data-state="error"] { color: #ffb4a8; }
/* success reads as a confirmation, not as another gold hint */
.form-status[data-state="ok"] {
  color: #bff0d0;
  font-weight: 700;
  line-height: 1.5;
}
.stack-form .form-status[data-state="ok"] { color: #1d7a45; font-weight: 700; }
/* a disabled submit while the request is in flight, so it cannot be sent twice */
.booking-form button[type="submit"]:disabled,
.stack-form button[type="submit"]:disabled { opacity: 0.6; cursor: progress; }

/* ---------- Footer ---------- */
.site-footer {
  background: rgba(23, 29, 51, 0.90);
  color: rgba(255,255,255,0.75);
  padding-block: var(--space-8) var(--space-6);
}
.footer-grid {
  /* two columns since the Contact block moved out — it duplicated Find us */
  display: grid;
  grid-template-columns: minmax(0,1.4fr) minmax(0,1fr);
  gap: var(--space-7);
  padding-bottom: var(--space-7);
  border-bottom: 1px solid rgba(255,255,255,0.12);
}
.footer-brand { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); }
.footer-brand img { width: 38px; height: 38px; }
.footer-brand span { font-family: var(--font-serif); font-size: 1.1rem; color: #fff; }
.footer-desc { max-width: 32ch; font-size: 0.9rem; color: rgba(255, 255, 255, 0.68); }

.social-links { display: flex; gap: var(--space-3); margin-top: var(--space-5); }
.social-links a {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: rgba(255, 255, 255, 0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color var(--duration-fast) var(--ease-standard),
              border-color var(--duration-fast) var(--ease-standard),
              background var(--duration-fast) var(--ease-standard);
}
.social-links a:hover {
  color: var(--navy-900);
  background: var(--gold-300);
  border-color: var(--gold-300);
}
.social-links .icon { width: 20px; height: 20px; }
.footer-heading {
  color: #fff;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: var(--space-4);
}
.footer-links { display: flex; flex-direction: column; gap: var(--space-3); }
.footer-links a { text-decoration: none; color: rgba(255,255,255,0.75); font-size: 0.92rem; transition: color var(--duration-fast); }
.footer-links a:hover { color: var(--gold-300); }
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
  padding-top: var(--space-6);
  font-size: 0.82rem;
  color: rgba(255,255,255,0.55);
}
/* the phone number sits on this line now that the Contact column is gone */
.footer-bottom a {
  color: rgba(255,255,255,0.78);
  text-decoration: none;
  transition: color var(--duration-fast);
}
.footer-bottom a:hover { color: var(--gold-300); }

/* ---------- Entrance motion ---------- */
/* Sections assemble rather than snapping in. Distances are small on purpose:
   enough to register as movement, not enough to feel like a slideshow. */
[data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity 620ms var(--ease-out) var(--reveal-delay, 0ms),
    transform 620ms var(--ease-out) var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
[data-reveal="left"]  { transform: translateX(-26px); }
[data-reveal="right"] { transform: translateX(26px); }
[data-reveal="scale"] { transform: scale(0.965); }
[data-reveal].is-in {
  opacity: 1;
  transform: none;
  will-change: auto;
}
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
}

.strip-item__figure { display: inline-block; }

/* ---------- Reveal animation (legacy .reveal) ---------- */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--duration-slow) var(--ease-out), transform var(--duration-slow) var(--ease-out);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1150px) and (min-width: 769px) {
  .nav-list { gap: var(--space-4); }
  .nav-link { font-size: 0.85rem; white-space: nowrap; }
  .header-inner { gap: var(--space-3); }
  .primary-nav { gap: var(--space-4); }
  .brand-name { font-size: 0.92rem; }
}

@media (max-width: 1024px) {
  .feature-band, .contact-grid { grid-template-columns: 1fr; }
  .practice-intro { position: static; }
  .feature-band.reverse .feature-media { order: 0; }
  .hero-inner { grid-template-columns: 1fr; }
  .hero-mark { max-width: 240px; margin-inline: auto; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
  /* the mark is already in the sticky header — repeating it full-width here
     just burns a whole screen of scroll on phones */
  .hero-mark { display: none; }

  /* Purely decorative panels exist to balance the two-column desktop layout.
     Once that stacks into one column they are a screen of scroll carrying no
     information, so they step aside. Real photographs stay — they have a
     subject. */
  .feature-media--decorative { display: none; }

  /* Photographs that sit beside text on desktop become a full-width block
     once stacked. Letterboxing them keeps the image present without giving
     it a third of the screen. */
  .photo-slot--wide { aspect-ratio: 21 / 9; }

  .primary-nav { display: none; }
  .menu-toggle { display: flex; }

  /* The drawer itself fades up over a navy ground; each item then slides in
     from the left on its own beat, driven by --nav-delay from main.js. */
  .primary-nav.is-open {
    display: flex;
    position: fixed;
    inset: 0;
    top: 0;
    z-index: 600;
    flex-direction: column;
    padding: var(--space-6);
    overflow-y: auto;
    background:
      radial-gradient(120% 80% at 12% 0%, rgba(47, 59, 105, 0.55), transparent 60%),
      linear-gradient(165deg, rgb(23, 29, 51), rgb(16, 21, 38));
    opacity: 0;
    transition: opacity 260ms var(--ease-out);
  }
  .primary-nav.is-open.is-shown { opacity: 1; }

  .primary-nav.is-open .nav-list {
    flex-direction: column;
    gap: var(--space-3);
    width: 100%;
    margin-top: var(--space-7);
  }
  .primary-nav.is-open .nav-list > li {
    opacity: 0;
    transform: translateX(-28px);
    transition:
      opacity 420ms var(--ease-out),
      transform 420ms var(--ease-out);
  }
  .primary-nav.is-open.is-shown .nav-list > li {
    opacity: 1;
    transform: none;
    transition-delay: var(--nav-delay, 0ms);
  }

  /* frosted panel per item: navy tint, curved edges, light type */
  .primary-nav.is-open .nav-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 1.12rem;
    color: rgba(255, 255, 255, 0.92);
    padding: var(--space-4) var(--space-5);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.06);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    overflow: hidden;
    transition:
      background var(--duration-fast) var(--ease-out),
      border-color var(--duration-fast) var(--ease-out),
      transform var(--duration-fast) var(--ease-out),
      color var(--duration-fast) var(--ease-out);
  }
  /* the underline from the desktop nav has no room here, so the panel itself
     lights and steps forward instead */
  .primary-nav.is-open .nav-link::after {
    content: "\2192";
    position: static;
    height: auto;
    width: auto;
    background: none;
    transform: translateX(-6px);
    opacity: 0;
    color: var(--gold-300);
    font-size: 1rem;
    transition:
      opacity var(--duration-fast) var(--ease-out),
      transform var(--duration-fast) var(--ease-out);
  }
  .primary-nav.is-open .nav-link:hover,
  .primary-nav.is-open .nav-link:focus-visible,
  .primary-nav.is-open .nav-link:active {
    background: rgba(198, 165, 111, 0.16);
    border-color: var(--color-accent);
    color: #fff;
    transform: translateX(6px);
  }
  .primary-nav.is-open .nav-link:hover::after,
  .primary-nav.is-open .nav-link:focus-visible::after,
  .primary-nav.is-open .nav-link:active::after {
    opacity: 1;
    transform: none;
  }
  .primary-nav.is-open .nav-link--accent { color: var(--gold-300); }
  .primary-nav.is-open [aria-current="page"] {
    border-color: rgba(198, 165, 111, 0.5);
    background: rgba(198, 165, 111, 0.12);
  }

  .primary-nav.is-open .header-actions {
    margin-top: var(--space-6);
    opacity: 0;
    transform: translateX(-28px);
    transition: opacity 420ms var(--ease-out), transform 420ms var(--ease-out);
  }
  .primary-nav.is-open.is-shown .header-actions {
    opacity: 1;
    transform: none;
    transition-delay: 430ms;
  }
  .primary-nav.is-open .lang-toggle {
    border-color: rgba(255, 255, 255, 0.28);
  }
  .primary-nav.is-open .lang-toggle button { color: rgba(255, 255, 255, 0.85); }
  .primary-nav.is-open .lang-toggle button[aria-pressed="true"] { color: #fff; }

  @media (prefers-reduced-motion: reduce) {
    .primary-nav.is-open,
    .primary-nav.is-open .nav-list > li,
    .primary-nav.is-open .header-actions {
      opacity: 1;
      transform: none;
      transition: none;
    }
  }
  .nav-close {
    display: none;
    align-self: flex-end;
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: var(--radius-sm);
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }
  /* superseded by the hamburger, which now morphs into the close mark */
  .primary-nav.is-open .nav-close { display: none; }

  .brand-name { font-size: 0.92rem; }

  .footer-grid { grid-template-columns: 1fr; gap: var(--space-6); }
  .hero-meta { gap: var(--space-4); }
  .section { padding-block: var(--space-7); }
}

@media (max-width: 560px) {
  /* logo + wordmark + lang toggle + burger don't fit on a 375px header,
     so the wordmark is allowed to wrap and the tagline steps aside */
  .header-inner { gap: var(--space-2); }
  .brand { gap: var(--space-2); }
  .brand img { width: 34px; height: 34px; }
  .brand-name {
    font-size: 0.76rem;
    white-space: normal;
    line-height: 1.2;
  }
  /* The second line was hidden here because the header ran out of width.
     Shrinking it and cutting the language button down to "EN / ने" buys back
     about 40px, which is enough to show it again. */
  .brand-name small {
    display: block;
    font-size: 0.5rem;
    letter-spacing: 0.07em;
    white-space: nowrap;
  }
  .lang-toggle button { padding: 0.35rem 0.5rem; font-size: 0.72rem; }
  .lang-toggle--desktop .lang-full { display: none; }
  .lang-toggle--desktop .lang-short { display: inline; }
  .header-actions { gap: var(--space-2); }
}

@media (max-width: 768px) {
  /* Hero: with the mark hidden the column has one child, so min-height was
     padding the content out with dead space above and below. Let it size to
     its content instead. */
  .hero {
    min-height: 0;
    padding-block: var(--space-8) var(--space-7);
  }
  .hero-meta {
    margin-top: var(--space-6);
    padding-top: var(--space-5);
    gap: var(--space-3);
  }
  .hero-meta-item { width: 100%; }

  /* the portrait was running to ~2/3 of a phone screen on its own */
  #about .photo-slot--portrait {
    aspect-ratio: 3 / 3.2;
    max-height: 46vh;
    margin-inline: auto;
    max-width: 320px;
  }

  /* team cards: photo beside the text rather than a full-width block */
  .roster-card { flex-direction: row; align-items: stretch; }
  .roster-card__media { width: 40%; max-width: 150px; aspect-ratio: auto; flex-shrink: 0; }
  .roster-card__body { padding: var(--space-5); }
  .roster-card__body h2 { font-size: 1.08rem; }
  .roster-card__tags { gap: 6px; }
  .roster-card__tags li { font-size: 0.68rem; padding: 0.18rem 0.5rem; }
}

@media (max-width: 480px) {
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .btn { width: 100%; }
  .hero h1 { font-size: clamp(1.75rem, 7.6vw, 2.4rem); }
  .hero-lede { font-size: 1.02rem; margin-bottom: var(--space-5); }
  .hero-tagline { font-size: 0.68rem; margin-bottom: var(--space-4); }

  /* stack the team card again on the narrowest phones */
  .roster-card { flex-direction: column; }
  .roster-card__media { width: 100%; max-width: none; aspect-ratio: 16 / 10; }
}


/* ---------- Touch affordances ----------
   A phone never fires :hover, so every hover-only flourish on this site is
   invisible on the device most people will use. These give a tap the same
   feedback: a short press state, and the same accent the pointer gets.
   Deliberately small movements: the ask was interactive, not flashy. */
@media (hover: none) {
  /* the spotlight state is defined with :hover further up; touch just takes a
     shorter lift, since the card is often the whole width of the screen */
  .service-card.is-spotlit { transform: translateY(-3px); }
  .roster-card:active { box-shadow: var(--shadow-sm); }
  .useful__list a:active { border-color: var(--gold-300); transform: translateX(3px); }
  .btn:active { transform: scale(0.97); }
  .contact-item:active { border-color: var(--gold-300); }
}
@media (hover: none) and (prefers-reduced-motion: reduce) {
  .service-card:active, .btn:active { transform: none; }
}

/* =========================================================
   Accessibility Tools
   ---------------------------------------------------------
   The panel builds itself from js/a11y.js. Every setting is a
   data-* attribute on <html>, restored from localStorage on
   each page, so nothing has to be set twice.
   ========================================================= */

/* ---------- launcher + panel chrome ---------- */
.a11y__launch {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 900;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: var(--color-primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 10px 26px rgba(23, 29, 51, 0.28);
  transition: transform var(--duration-fast) var(--ease-out),
              background var(--duration-fast) var(--ease-out);
}
.a11y__launch .icon { width: 26px; height: 26px; }
.a11y__launch:hover { transform: scale(1.06); background: var(--color-primary-strong); }
.a11y__launch:active { transform: scale(0.96); }
/* a gold ring says at a glance that something is switched on */
.a11y__launch[data-active="true"] { box-shadow: 0 0 0 3px var(--color-accent), 0 10px 26px rgba(23, 29, 51, 0.28); }

.a11y__scrim {
  position: fixed;
  inset: 0;
  z-index: 940;
  background: rgba(15, 19, 34, 0.42);
}
.a11y__panel {
  position: fixed;
  z-index: 950;
  right: 18px;
  bottom: 82px;
  width: min(380px, calc(100vw - 36px));
  max-height: min(78vh, 660px);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 60px rgba(23, 29, 51, 0.3);
}
.a11y__head {
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  background: var(--color-primary);
  color: #fff;
}
.a11y__head h2 {
  margin: 0;
  color: #fff;
  font-size: 1.06rem;
  letter-spacing: 0.01em;
}
.a11y__head-actions { display: flex; gap: var(--space-2); }
.a11y__icon-btn {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: var(--radius-sm);
  background: transparent;
  color: #fff;
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-out);
}
.a11y__icon-btn:hover { background: rgba(255, 255, 255, 0.16); }
.a11y__icon-btn .icon { width: 18px; height: 18px; }

.a11y__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
  padding: var(--space-4);
}
.a11y__tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-2);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-primary-strong);
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease-out),
              background var(--duration-fast) var(--ease-out),
              transform var(--duration-fast) var(--ease-out);
}
.a11y__tile:hover { border-color: var(--gold-300); }
.a11y__tile:active { transform: scale(0.97); }
.a11y__tile[aria-pressed="true"] {
  border-color: var(--color-accent);
  background: var(--navy-100);
}
.a11y__tile-icon .icon { width: 28px; height: 28px; }
.a11y__steps { display: flex; gap: 4px; }
.a11y__steps i {
  width: 16px;
  height: 4px;
  border-radius: 2px;
  background: var(--color-border);
  transition: background var(--duration-fast) var(--ease-out);
}
.a11y__steps i.is-on { background: var(--color-accent); }
.a11y__note {
  margin: 0;
  padding: 0 var(--space-5) var(--space-4);
  font-size: 0.74rem;
  color: var(--color-text-faint);
}

@media (max-width: 480px) {
  .a11y__panel { right: 10px; left: 10px; width: auto; bottom: 76px; }
  .a11y__launch { right: 12px; bottom: 12px; }
}

/* ---------- what the settings actually do ---------- */
/* Text size / spacing / line height scale from the root, so everything sized
   in rem or em follows without each rule needing an override. */
html[data-a11y-textsize="1"] { font-size: 112.5%; }
html[data-a11y-textsize="2"] { font-size: 125%; }
html[data-a11y-textsize="3"] { font-size: 140%; }

html[data-a11y-textspacing="1"] body { letter-spacing: 0.035em; word-spacing: 0.06em; }
html[data-a11y-textspacing="2"] body { letter-spacing: 0.075em; word-spacing: 0.14em; }
html[data-a11y-textspacing="3"] body { letter-spacing: 0.12em;  word-spacing: 0.24em; }

html[data-a11y-lineheight="1"] body,
html[data-a11y-lineheight="1"] p,
html[data-a11y-lineheight="1"] li { line-height: 1.8; }
html[data-a11y-lineheight="2"] body,
html[data-a11y-lineheight="2"] p,
html[data-a11y-lineheight="2"] li { line-height: 2.1; }
html[data-a11y-lineheight="3"] body,
html[data-a11y-lineheight="3"] p,
html[data-a11y-lineheight="3"] li { line-height: 2.5; }

/* Alignment deliberately skips the panel itself and the nav, so the controls
   don't slide around while you're using them. */
html[data-a11y-textalign="left"]   :is(p, li, h1, h2, h3, h4, .subpage-lede, .hero-lede):not(.a11y *) { text-align: left; }
html[data-a11y-textalign="center"] :is(p, li, h1, h2, h3, h4, .subpage-lede, .hero-lede):not(.a11y *) { text-align: center; }
html[data-a11y-textalign="right"]  :is(p, li, h1, h2, h3, h4, .subpage-lede, .hero-lede):not(.a11y *) { text-align: right; }

html[data-a11y-font="sans"]  body, html[data-a11y-font="sans"]  :is(h1,h2,h3,h4,.brand-name) { font-family: var(--font-sans); }
html[data-a11y-font="serif"] body, html[data-a11y-font="serif"] :is(h1,h2,h3,h4)             { font-family: var(--font-serif); }
html[data-a11y-font="mono"]  body, html[data-a11y-font="mono"]  :is(h1,h2,h3,h4,.brand-name) {
  font-family: ui-monospace, "SFMono-Regular", "Menlo", "Consolas", monospace;
}

/* No dyslexia-specific webfont is loaded — shipping one would mean a
   third-party font request on every page. This uses a wider, more open
   system stack plus the spacing that actually helps most readers. */
html[data-a11y-dyslexia="on"] body,
html[data-a11y-dyslexia="on"] :is(h1, h2, h3, h4, .brand-name, .btn) {
  font-family: "Verdana", "Tahoma", "Trebuchet MS", sans-serif;
}
html[data-a11y-dyslexia="on"] body {
  letter-spacing: 0.05em;
  word-spacing: 0.16em;
  line-height: 1.9;
}
html[data-a11y-dyslexia="on"] p { max-width: 62ch; }

/* Colour work is applied to the whole document but lifted off the panel, so
   the controls stay readable while a filter is on. */
html[data-a11y-colorfilter] body > *:not(.a11y),
html[data-a11y-saturation] body > *:not(.a11y) { transition: filter var(--duration-base) var(--ease-out); }

html[data-a11y-colorfilter="grayscale"]   body > *:not(.a11y) { filter: grayscale(1); }
html[data-a11y-colorfilter="protanopia"]  body > *:not(.a11y) { filter: url("#a11y-protanopia"); }
html[data-a11y-colorfilter="deuteranopia"] body > *:not(.a11y) { filter: url("#a11y-deuteranopia"); }
html[data-a11y-colorfilter="tritanopia"]  body > *:not(.a11y) { filter: url("#a11y-tritanopia"); }

html[data-a11y-saturation="low"]  body > *:not(.a11y) { filter: saturate(0.5); }
html[data-a11y-saturation="high"] body > *:not(.a11y) { filter: saturate(1.7); }
html[data-a11y-saturation="none"] body > *:not(.a11y) { filter: saturate(0); }

/* High contrast: darken text, strengthen borders, underline every link. */
html[data-a11y-contrast="more"] {
  --color-text: #101010;
  --color-text-muted: #1c1c1c;
  --color-text-faint: #333;
  --color-border: #5a5a5a;
}
html[data-a11y-contrast="more"] a:not(.btn):not(.brand):not(.a11y *) { text-decoration: underline; }
html[data-a11y-contrast="more"] :is(.section--dark, .strip, .site-footer, .hero, .find-us--photo) :is(p, li, span) { color: #fff; }

html[data-a11y-contrast="dark"] body > *:not(.a11y) { filter: invert(1) hue-rotate(180deg); }
html[data-a11y-contrast="dark"] :is(img, video, canvas, iframe, .emblem) { filter: invert(1) hue-rotate(180deg); }

html[data-a11y-contrast="light"] {
  --color-bg: #ffffff;
  --color-surface: #ffffff;
  --color-surface-alt: #ffffff;
  --paper-100: #ffffff;
  --color-text: #111;
}
html[data-a11y-contrast="light"] :is(.section--dark, .strip, .find-us--photo) { background-image: none; }

html[data-a11y-cursor="big"]    { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='38' height='38' viewBox='0 0 24 24'%3E%3Cpath d='M5 2l13 8-5.6 1.5L9.4 18 5 2z' fill='%23fff' stroke='%23171d33' stroke-width='1.4' stroke-linejoin='round'/%3E%3C/svg%3E") 4 2, auto; }
html[data-a11y-cursor="bigger"] { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 24 24'%3E%3Cpath d='M5 2l13 8-5.6 1.5L9.4 18 5 2z' fill='%23fff' stroke='%23171d33' stroke-width='1.4' stroke-linejoin='round'/%3E%3C/svg%3E") 6 3, auto; }
html[data-a11y-cursor] :is(a, button, .chip, summary) { cursor: inherit; }

/* Images out, but their space kept, so the layout doesn't collapse. */
html[data-a11y-hideimages="on"] :is(img, .emblem, .map-embed, #scroll-canvas, .find-us--photo)::after { content: none; }
html[data-a11y-hideimages="on"] :is(img, picture, .emblem img, .map-embed iframe) { visibility: hidden; }
html[data-a11y-hideimages="on"] .find-us--photo { background-image: none; background-color: var(--color-primary-strong); }
html[data-a11y-hideimages="on"] #scroll-canvas { display: none; }
html[data-a11y-hideimages="on"] .contact-card::after { display: none; }

/* Same effect as the OS "reduce motion" switch, but on demand. */
html[data-a11y-pausemotion="on"] *,
html[data-a11y-pausemotion="on"] *::before,
html[data-a11y-pausemotion="on"] *::after {
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important;
  scroll-behavior: auto !important;
}
html[data-a11y-pausemotion="on"] :is([data-reveal], [data-scroll-in], [data-scroll-reveal]) {
  opacity: 1 !important;
  transform: none !important;
}

/* visually hidden but still read out — used by the a11y panel's live region */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------- Advantage cards (About) ----------
   Separate boxes rather than a plain list, taking the CMS pattern: each card
   is its own frame, the artwork inside it moves on hover while the frame
   stays put, and a rule wipes across the heading. Everything that moves is a
   transform, so it composites on the GPU and none of it reflows the page. */
.advantages {
  list-style: none;
  margin: var(--space-6) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--space-4);
}
/* Four cards in an auto-fit grid landed as 3 + 1 on a wide screen, leaving two
   empty cells and a band of dead space under the third card. Two columns keeps
   them as a balanced 2x2. */
@media (min-width: 900px) {
  .advantages { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.advantage {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: var(--space-6) var(--space-5) var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition:
    transform var(--duration-base) var(--ease-out),
    box-shadow var(--duration-base) var(--ease-out),
    border-color var(--duration-base) var(--ease-out);
}
/* navy wash that rises from the bottom edge, kept behind the text */
.advantage::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(47, 59, 105, 0) 40%, rgba(47, 59, 105, 0.06) 100%);
  opacity: 0;
  transition: opacity var(--duration-base) var(--ease-out);
}
.advantage:hover,
.advantage:focus-within {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
  border-color: var(--gold-300);
}
.advantage:hover::before,
.advantage:focus-within::before { opacity: 1; }

/* the index numeral is the moving element, the way CMS moves a card image */
.advantage__num {
  position: absolute;
  top: -0.35em;
  right: 0.15em;
  z-index: -1;
  font-family: var(--font-serif);
  font-size: 5.2rem;
  font-weight: 600;
  line-height: 1;
  color: var(--color-primary);
  opacity: 0.06;
  transition:
    transform var(--duration-slow) var(--ease-out),
    opacity var(--duration-slow) var(--ease-out);
}
.advantage:hover .advantage__num,
.advantage:focus-within .advantage__num {
  transform: translate(-6px, 6px) scale(1.12);
  opacity: 0.11;
}

.advantage__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-bottom: var(--space-4);
  border-radius: var(--radius-sm);
  background: var(--navy-100);
  color: var(--color-primary);
  transition:
    transform var(--duration-base) var(--ease-out),
    background var(--duration-base) var(--ease-out),
    color var(--duration-base) var(--ease-out);
}
.advantage__icon .icon { width: 22px; height: 22px; }
.advantage:hover .advantage__icon,
.advantage:focus-within .advantage__icon {
  transform: translateY(-3px);
  background: var(--color-accent);
  color: #fff;
}

.advantage h3 {
  position: relative;
  display: inline-block;
  font-size: 1.04rem;
  margin-bottom: var(--space-3);
  padding-bottom: 0.28rem;
  color: var(--color-primary-strong);
}
/* gold rule that wipes in under the heading */
.advantage h3::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 0;
  background: var(--color-accent);
  transition: width var(--duration-slow) var(--ease-out);
}
.advantage:hover h3::after,
.advantage:focus-within h3::after { width: 100%; }

.advantage p {
  font-size: 0.9rem;
  margin-bottom: 0;
  max-width: none;
}

/* On touch there is no pointer, so js/motion.js lights whichever card is
   nearest the middle of the screen as you scroll. .is-spotlit carries exactly
   the hover styling, so the two never drift apart. */
@media (hover: none) {
  .advantage.is-spotlit {
    transform: translateY(-6px);
    box-shadow: var(--shadow-md);
    border-color: var(--gold-300);
  }
  .advantage.is-spotlit::before { opacity: 1; }
  .advantage.is-spotlit h3::after { width: 100%; }
  .advantage.is-spotlit .advantage__icon {
    transform: translateY(-3px);
    background: var(--color-accent);
    color: #fff;
  }
  .advantage.is-spotlit .advantage__num {
    transform: translate(-6px, 6px) scale(1.12);
    opacity: 0.11;
  }
  .advantage:active { transform: translateY(-3px) scale(0.99); }
}
@media (prefers-reduced-motion: reduce) {
  .advantage,
  .advantage__num,
  .advantage__icon,
  .advantage h3::after { transition: none; }
  .advantage:hover { transform: none; }
}

/* ---------- Find us phone ---------- */
.find-us__phone a { color: inherit; text-decoration: none; }
.find-us__phone a:hover { color: var(--gold-300); }

/* ---------- Footer legal links ---------- */
.footer-legal-links { display: flex; gap: var(--space-2); align-items: center; }

/* ---------- Legal pages (privacy, terms) ---------- */
.subpage-hero--legal { padding-bottom: var(--space-6); }
.legal-updated {
  font-size: 0.8rem;
  color: var(--color-text-faint);
  letter-spacing: 0.04em;
  margin-bottom: 0;
}
.legal-body { max-width: 46rem; }
.legal-body h2 {
  font-size: 1.28rem;
  margin-top: var(--space-7);
  margin-bottom: var(--space-3);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}
.legal-body h2:first-of-type { margin-top: var(--space-2); }
.legal-body p, .legal-body li { font-size: 0.97rem; }
.legal-body ul { padding-left: 1.1rem; margin-bottom: var(--space-4); }
.legal-body li { margin-bottom: var(--space-3); }
.legal-body a { color: var(--color-accent-strong); }
.legal-note {
  background: var(--paper-100);
  border-left: 3px solid var(--color-accent);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: var(--space-4) var(--space-5);
  font-size: 0.9rem;
  max-width: none;
}
.legal-crosslink {
  margin-top: var(--space-7);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
  font-size: 0.9rem;
}

/* ---------- WhatsApp mark ---------- */
/* the glyph is drawn filled, so it needs no stroke from the shared .icon rule */
.social-links a[href*="wa.me"] .icon { stroke-width: 1.4; }

/* ---------- Our Team: photo ground ----------
   "picture 1.jpg" (the Lady Justice close-up), navy-duotoned at build time and
   laid under a wash. The roster cards stay light, so they read as panels
   floating on the photograph rather than as boxes on a flat colour.

   The wash is lightest at the top, where the photograph should read, and
   resolves to exactly the footer's own navy (#171d33) by the bottom edge. So
   the section does not end, it hands over: the photo fades out and the footer
   begins on the same colour, with no seam and no hard rule between them. */
.attorneys-page--photo {
  position: relative;
  isolation: isolate;
  color: #fff;
  background:
    linear-gradient(180deg,
      rgba(16, 21, 38, 0.80) 0%,
      rgba(19, 24, 43, 0.88) 50%,
      rgba(23, 29, 51, 0.98) 88%,
      rgb(23, 29, 51) 100%),
    url("../assets/images/team-bg.jpg") center / cover no-repeat;
}
/* Scoped to the page head only. Written as a bare descendant selector this
   also caught the h2 inside each roster card, which sits on a white card, and
   turned both advocates' names white on white. */
.attorneys-page--photo .page-head :is(h1, h2) { color: #fff; }
.attorneys-page--photo .page-head p { color: rgba(255, 255, 255, 0.84); }
.attorneys-page--photo .eyebrow { color: var(--gold-300); }
.attorneys-page--photo .eyebrow::before,
.attorneys-page--photo .eyebrow::after { background: var(--gold-300); }
/* cards keep their own light ground and gain a little more lift over a photo */
.attorneys-page--photo .roster-card {
  box-shadow: 0 18px 40px rgba(10, 14, 28, 0.34);
  border-color: rgba(255, 255, 255, 0.16);
}

/* =========================================================
   Desktop type scale
   ---------------------------------------------------------
   Body copy was set for a phone and read small on a wide
   screen. Deliberately NOT done by raising the root font
   size: every --space-* token is in rem, so that would have
   inflated the section padding at the same time, which is
   the opposite of what was wanted. These are per-component
   bumps, so the spacing scale stays exactly where it is.
   ========================================================= */
@media (min-width: 1024px) {
  body { font-size: 1.06rem; }
  p, li { font-size: 1.06rem; }

  .hero-lede { font-size: 1.28rem; }
  .nav-link { font-size: 0.98rem; }

  .about-body p { font-size: 1.08rem; }
  .advantage h3 { font-size: 1.14rem; }
  .advantage p { font-size: 0.99rem; }

  .strip-item__label { font-size: 0.9rem; }

  .find-us__hours { font-size: 1rem; }
  .find-us__hours strong { font-size: 1rem; }

  .useful__list a { font-size: 0.92rem; }
  .useful__list .icon { width: 15px; height: 15px; }

  .service-card p { font-size: 1rem; }
  .roster-card__years,
  .roster-card__langs { font-size: 0.98rem; }

  .pa-card h3 { font-size: 1.22rem; }
  .pa-card p { font-size: 1rem; }

  .legal-body p, .legal-body li { font-size: 1.04rem; }
  .subpage-lede { font-size: 1.22rem; }

  .footer-desc, .footer-links a { font-size: 1rem; }
  .btn { font-size: 0.98rem; }
}

/* =========================================================
   Page transitions
   ---------------------------------------------------------
   The .pt class is added by a one-line script in each <head>,
   before first paint. Both animations use fill-mode `both` and
   need no JS to finish, so a page can never be left invisible.
   ========================================================= */
@keyframes ptEnter {
  from { opacity: 0; transform: translateY(18px) scale(0.994); }
  to   { opacity: 1; transform: none; }
}
/* ---------- Branded cover between pages ----------
   A navy cover carrying the firm's mark sits over the page and lifts away, so
   a navigation reads as a deliberate transition rather than a blank flash.

   Built entirely on html::before / html::after with animation-fill-mode
   forwards, driven by the `pt` class the <head> script sets before first
   paint. That matters for safety: no JS runs to remove it. The animation ends
   at opacity 0 / visibility hidden on its own, so a stalled script cannot
   leave a visitor staring at a navy screen. pointer-events: none means it
   cannot swallow a click even while it is fading. */
@keyframes splashOut {
  0%   { opacity: 1; }
  50%  { opacity: 1; }
  100% { opacity: 0; visibility: hidden; }
}
@keyframes splashMark {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.86); }
  30%  { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  55%  { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.04); visibility: hidden; }
}
@keyframes splashIn {
  from { opacity: 0; visibility: visible; }
  to   { opacity: 1; visibility: visible; }
}

html.pt::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: var(--navy-900);
  pointer-events: none;
  animation: splashOut 900ms var(--ease-out) forwards;
}
html.pt::after {
  content: "";
  position: fixed;
  top: 50%;
  left: 50%;
  width: 92px;
  height: 92px;
  z-index: 2001;
  background: url("../assets/logo/icon-blue-v2.png") center / contain no-repeat;
  border-radius: var(--radius-md);
  pointer-events: none;
  animation: splashMark 900ms var(--ease-out) forwards;
}

/* leaving: the cover comes back over the page before the browser navigates */
html.pt-leaving::before {
  animation: splashIn 200ms var(--ease-standard) forwards;
}
html.pt-leaving::after {
  animation: splashIn 200ms var(--ease-standard) forwards;
  transform: translate(-50%, -50%);
}

@media (prefers-reduced-motion: reduce) {
  html.pt::before,
  html.pt::after,
  html.pt-leaving::before,
  html.pt-leaving::after { display: none; }
}

@keyframes ptLeave {
  from { opacity: 1; transform: none; }
  to   { opacity: 0; transform: translateY(-10px) scale(0.995); }
}

html.pt main {
  animation: ptEnter 520ms var(--ease-out) both;
  transform-origin: center top;
}
html.pt .site-footer { animation: ptEnter 620ms var(--ease-out) both; animation-delay: 60ms; }

html.pt-leaving main,
html.pt-leaving .site-footer {
  animation: ptLeave 220ms var(--ease-standard) both;
}

/* ⚠️ NEVER put a transform, filter, backdrop-filter, perspective, contain or
   will-change on .site-header. The mobile nav drawer is a child of it and is
   position: fixed, and any of those turns the header into the drawer's
   containing block: `inset: 0` then resolves against the 69px header box
   instead of the viewport, and the menu opens as a sliver showing only its
   first item.

   This has now bitten twice. First with backdrop-filter, then with a page
   transition animating the header: a filled animation on `transform` leaves
   the computed value as matrix(1,0,0,1,0,0), which is NOT `none`, so it
   creates a containing block even though it moves nothing. The header is
   persistent chrome and reads better staying put across a navigation, so it
   is deliberately left out of the page transition. */

/* the accessibility panel and the progress bar are chrome, not page content,
   so they stay put through a navigation */
html.pt .a11y,
html.pt-leaving .a11y,
html.pt .scroll-progress,
html.pt-leaving .scroll-progress { animation: none !important; }

@media (prefers-reduced-motion: reduce) {
  html.pt main,
  html.pt .site-footer,
  html.pt-leaving main,
  html.pt-leaving .site-footer { animation: none; }
}