/* The site is set entirely in IBM Plex — Sans for everything readable, Mono for
   labels, numbers and metadata. Nothing falls through to a system UI face. */
@font-face {
  font-family: "IBM Plex Sans";
  src: url("/assets/fonts/ibm-plex-sans.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("/assets/fonts/ibm-plex-mono.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
}

:root {
  font-size: calc(16px * var(--custom-spacing, 1));
  color-scheme: dark;
  --bg: #061022;
  --bg-deep: #040b18;
  --surface: rgba(12, 27, 52, 0.76);
  --surface-solid: #0c1b34;
  --surface-soft: rgba(255, 255, 255, 0.045);
  --surface-strong: rgba(255, 255, 255, 0.075);
  --text: #f4f8ff;
  /* Muted and dim text keep 4.5:1 or better where they cross the brightest
     part of the aurora, not only against the flat background. */
  --muted: #c0ccdc;
  --dim: #a7b7cc;
  --accent: #4fc08d;
  --accent-bright: #6dcba0;
  --accent-fill: #4fc08d;
  --accent-fill-hover: #69c99e;
  --accent-ink: #0a1220;
  --teal: #36a9ac;
  --border: rgba(255, 255, 255, 0.13);
  --border-strong: rgba(255, 255, 255, 0.5);
  --shadow: 0 30px 90px -42px rgba(0, 0, 0, 0.9);
  --shadow-soft: 0 20px 50px -32px rgba(0, 0, 0, 0.75);
  --max: var(--custom-width, 118rem);
  --reading: 45rem;
  --radius-sm: 0.65rem;
  --radius: var(--custom-radius, 1rem);
  --radius-lg: 1.4rem;
  --font-sans: var(--custom-font, "IBM Plex Sans"), "Segoe UI", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;

  /* Glass. The tint stays transparent enough for the aurora to move behind it,
     the blur is what actually reads as glass, and the two inset highlights draw
     the lit top edge and the faint bottom bounce that sell the material. */
  --glass-tint: rgba(9, 22, 44, 0.46);
  --glass-tint-strong: rgba(9, 22, 44, 0.62);
  --glass-sheen: linear-gradient(
    148deg,
    rgba(255, 255, 255, 0.15),
    rgba(255, 255, 255, 0.035) 34%,
    rgba(255, 255, 255, 0) 62%
  );
  --glass-blur: blur(26px) saturate(185%);
  --glass-edge: rgba(255, 255, 255, 0.2);
  --glass-edge-hover: rgba(255, 255, 255, 0.32);
  --glass-shadow:
    0 28px 70px -34px rgba(0, 0, 0, 0.92),
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 -1px 0 rgba(255, 255, 255, 0.05);
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg: #eef4f7;
  --bg-deep: #dce8ed;
  --surface: rgba(255, 255, 255, 0.8);
  --surface-solid: #ffffff;
  --surface-soft: rgba(12, 27, 48, 0.045);
  --surface-strong: rgba(12, 27, 48, 0.075);
  --text: #0c1b30;
  --muted: #3b4f65;
  --dim: #465b71;
  --accent: #177f50;
  --accent-bright: #115c3a;
  --accent-fill: #52e0a0;
  --accent-fill-hover: #34db8f;
  --accent-fill-edge: #1da065;
  --accent-ink: #07101f;
  --teal: #14777c;
  --border: rgba(12, 31, 55, 0.15);
  --border-strong: rgba(12, 31, 55, 0.55);
  --shadow: 0 30px 80px -42px rgba(30, 61, 84, 0.38);
  --shadow-soft: 0 20px 48px -32px rgba(30, 61, 84, 0.3);
  --glass-tint: rgba(255, 255, 255, 0.52);
  --glass-tint-strong: rgba(255, 255, 255, 0.7);
  --glass-sheen: linear-gradient(
    148deg,
    rgba(255, 255, 255, 0.75),
    rgba(255, 255, 255, 0.24) 36%,
    rgba(255, 255, 255, 0) 66%
  );
  --glass-blur: blur(26px) saturate(165%);
  --glass-edge: rgba(12, 31, 55, 0.16);
  --glass-edge-hover: rgba(12, 31, 55, 0.3);
  --glass-shadow:
    0 26px 60px -34px rgba(30, 61, 84, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 -1px 0 rgba(12, 31, 55, 0.04);
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    color-scheme: light;
    --bg: #eef4f7;
    --bg-deep: #dce8ed;
    --surface: rgba(255, 255, 255, 0.8);
    --surface-solid: #ffffff;
    --surface-soft: rgba(12, 27, 48, 0.045);
    --surface-strong: rgba(12, 27, 48, 0.075);
    --text: #0c1b30;
    --muted: #3b4f65;
    --dim: #465b71;
    --accent: #177f50;
    --accent-bright: #115c3a;
    --accent-fill: #52e0a0;
    --accent-fill-hover: #34db8f;
    --accent-fill-edge: #1da065;
    --accent-ink: #07101f;
    --teal: #14777c;
    --border: rgba(12, 31, 55, 0.15);
    --border-strong: rgba(12, 31, 55, 0.55);
    --shadow: 0 30px 80px -42px rgba(30, 61, 84, 0.38);
    --shadow-soft: 0 20px 48px -32px rgba(30, 61, 84, 0.3);
    --glass-tint: rgba(255, 255, 255, 0.52);
    --glass-tint-strong: rgba(255, 255, 255, 0.7);
    --glass-sheen: linear-gradient(
      148deg,
      rgba(255, 255, 255, 0.75),
      rgba(255, 255, 255, 0.24) 36%,
      rgba(255, 255, 255, 0) 66%
    );
    --glass-blur: blur(26px) saturate(165%);
    --glass-edge: rgba(12, 31, 55, 0.16);
    --glass-edge-hover: rgba(12, 31, 55, 0.3);
    --glass-shadow:
      0 26px 60px -34px rgba(30, 61, 84, 0.45),
      inset 0 1px 0 rgba(255, 255, 255, 0.95),
      inset 0 -1px 0 rgba(12, 31, 55, 0.04);
  }}

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

html {
  min-width: 20rem;
  scroll-behavior: smooth;
}

/* site.js sets this while the mobile nav overlay is open. The nav itself scrolls
   internally (.primary-nav has overflow-y: auto), so locking the page behind it
   traps neither content nor keyboard focus. */
html[data-menu-open] {
  overflow: hidden;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.65;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

button,
input,
select,
textarea {
  font: inherit;
}

button,
select {
  cursor: pointer;
}

a {
  color: inherit;
  text-decoration-color: var(--accent);
  text-underline-offset: 0.2em;
}

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

address {
  font-style: normal;
}

::selection {
  background: rgba(79, 192, 141, 0.34);
  color: var(--text);
}

:focus-visible {
  outline: 3px solid var(--accent-bright);
  outline-offset: 4px;
}

:where(
  a,
  button,
  input,
  select,
  summary,
  textarea,
  [contenteditable="true"],
  [tabindex]
):focus-visible {
  scroll-margin-block: 7rem 2rem;
}

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

.skip-link {
  position: fixed;
  z-index: 1000;
  top: 0.75rem;
  left: 0.75rem;
  padding: 0.7rem 1rem;
  border-radius: var(--radius-sm);
  background: var(--accent-fill);
  color: var(--accent-ink);
  font-weight: 800;
  transform: translateY(-200%);
}

.skip-link:focus {
  transform: none;
}

.site-atmosphere {
  position: fixed;
  z-index: -2;
  inset: 0;
  overflow: hidden;
  background: linear-gradient(155deg, var(--bg) 0%, var(--bg-deep) 62%, var(--bg) 100%);
}

/* Glass only reads if something is moving behind it, so the aurora sits at a
   higher opacity than a flat background would want. It stays low enough that
   muted and dim text over its brightest patches still meets WCAG contrast. */
.site-atmosphere::before {
  position: absolute;
  inset: 0;
  background: var(--custom-bg-dark, url("/assets/images/fey-aurora-wide-v2.webp")) center top / cover no-repeat;
  content: "";
  filter: saturate(1.05) contrast(1.1);
  opacity: 0.3;
  transform: scale(1.03);
}

.site-atmosphere::after {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.015) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.015) 1px, transparent 1px);
  background-size: 4.5rem 4.5rem;
  content: "";
  mask-image: linear-gradient(to bottom, black, transparent 55%);
}

[data-theme="light"] .site-atmosphere {
  background: linear-gradient(155deg, var(--bg) 0%, var(--bg-deep) 62%, var(--bg) 100%);
}

[data-theme="light"] .site-atmosphere::before {
  background-image: var(--custom-bg-light, url("/assets/images/fey-aurora-light-v1.png"));
  opacity: 0.24;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme]) .site-atmosphere {
    background: linear-gradient(155deg, var(--bg) 0%, var(--bg-deep) 62%, var(--bg) 100%);
  }

  :root:not([data-theme]) .site-atmosphere::before {
    background-image: var(--custom-bg-light, url("/assets/images/fey-aurora-light-v1.png"));
    opacity: 0.24;
  }}

/* The portrait aurora is brighter where body text sits, so it is fainter. */
@media (orientation: portrait) and (prefers-color-scheme: dark) {
  :root:not([data-theme]) .site-atmosphere::before {
    background-image: var(--custom-bg-dark-mobile, url("/assets/images/fey-aurora-portrait-v1.png"));
    opacity: 0.26;
  }}

@media (orientation: portrait) {
  :root[data-theme="dark"] .site-atmosphere::before {
    background-image: var(--custom-bg-dark-mobile, url("/assets/images/fey-aurora-portrait-v1.png"));
    opacity: 0.26;
  }}

/* The bar and the footer run to the same measure as the page. On a wide screen
   that measure is now generous enough that they no longer stop short of the
   window edges. */
.site-shell {
  width: min(calc(100% - 2.5rem), var(--max));
  margin-inline: auto;
  padding-block: 1.25rem 2rem;
}

.site-header {
  position: relative;
  z-index: 30;
  display: grid;
  grid-template-columns: minmax(8rem, 1fr) auto minmax(8rem, 1fr);
  align-items: center;
  min-height: 4.5rem;
  padding: 0.65rem 0.8rem 0.65rem 1.1rem;
  border-radius: var(--radius);
}

.brand {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  text-decoration: none;
}

/* Header identity is the mark on its own. The full lockup is reserved for the
   home hero, so the same logo never appears twice on one screen. */
.brand-mark {
  position: relative;
  display: block;
  width: 1.85rem;
  aspect-ratio: 275 / 405;
  flex: 0 0 auto;
}

.wordmark {
  position: relative;
  display: block;
  width: 11rem;
  aspect-ratio: 1290 / 373;
  flex: 0 0 auto;
}

.wordmark-image,
.brand-mark img,
.hero-watermark img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: left center;
}

.brand-mark img {
  object-position: center;
}

.brand-ink-navy {
  display: none;
}

[data-theme="light"] .brand-ink-white {
  display: none;
}

[data-theme="light"] .brand-ink-navy {
  display: block;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme]) .brand-ink-white {
    display: none;
  }

  :root:not([data-theme]) .brand-ink-navy {
    display: block;
  }}

.primary-nav,
.header-actions,
.hero-actions,
.profile-actions {
  display: flex;
  align-items: center;
}

.primary-nav {
  gap: 0.1rem;
}

.primary-nav a {
  min-height: 2.75rem;
  padding: 0.62rem 0.9rem;
  border-radius: 0.55rem;
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
}

.primary-nav a:hover,
.primary-nav a[aria-current="page"] {
  background: var(--surface-soft);
  color: var(--accent-bright);
}

.header-actions {
  justify-self: end;
  gap: 0.65rem;
}

.icon {
  width: 1.15rem;
  height: 1.15rem;
  stroke-width: 1.8;
}

.icon-button {
  display: inline-grid;
  flex: 0 0 auto;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 0.65rem;
  background: var(--surface-soft);
  color: var(--text);
}

.icon-button:hover {
  border-color: var(--border-strong);
  background: var(--surface-strong);
}

.menu-toggle {
  display: none;
}

.menu-close {
  display: none;
}

.menu-toggle[aria-expanded="true"] .menu-open {
  display: none;
}

.menu-toggle[aria-expanded="true"] .menu-close {
  display: block;
}

.mobile-consultation-link {
  display: none !important;
}

.button {
  display: inline-flex;
  min-height: 2.75rem;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.68rem 1.1rem;
  border: 1px solid transparent;
  border-radius: 0.65rem;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  transition:
    background-color 150ms ease,
    border-color 150ms ease,
    transform 150ms ease;
}

.button:hover {
  transform: translateY(-1px);
}

.button-primary {
  border-color: var(--accent-fill-edge, var(--accent-fill));
  background: var(--accent-fill);
  color: var(--accent-ink);
  box-shadow: 0 1rem 2.5rem -1.4rem var(--accent-glow, rgba(79, 192, 141, 0.78));
}

.button-primary:hover {
  background: var(--accent-fill-hover);
}

.button-outline {
  border-color: var(--border-strong);
  background: var(--surface-soft);
  color: var(--text);
}

.button-outline:hover {
  border-color: var(--accent);
  background: var(--accent-wash, rgba(79, 192, 141, 0.08));
}

.button-full {
  width: 100%;
}

.status-square {
  display: inline-block;
  width: 0.42rem;
  height: 0.42rem;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0.7rem var(--accent-glow, rgba(79, 192, 141, 0.65));
}

.status-square {
  border-radius: 0.1rem;
}

.eyebrow,
.content-meta {
  color: var(--dim);
  font-family: var(--font-mono);
  font-size: 0.69rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  line-height: 1.5;
  text-transform: uppercase;
}

.eyebrow {
  margin: 0 0 1.1rem;
}

.eyebrow > span:first-child {
  display: inline-block;
  width: 1.6rem;
  height: 1px;
  margin: 0 0.7rem 0.22rem 0;
  background: var(--accent);
}

.home-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(25rem, 0.95fr);
  gap: clamp(2rem, 5vw, 5rem);
  min-height: 47rem;
  align-items: center;
  padding: clamp(4rem, 8vw, 7.5rem) clamp(1rem, 3vw, 3rem) 4rem;
}

.hero-copy {
  max-width: 46rem;
}

.home-hero-logo {
  width: min(100%, 28rem);
  margin-bottom: clamp(1.8rem, 4vh, 3rem);
}

.home-hero-logo .wordmark {
  width: 100%;
}

.hero-copy h1,
.page-hero h1,
.error-page h1 {
  max-width: 52rem;
  margin: 0;
  font-size: clamp(3.15rem, 6vw, 6.2rem);
  font-weight: 600;
  letter-spacing: -0.06em;
  line-height: 0.98;
  text-wrap: balance;
}

.hero-copy h1 em,
.page-hero h1 em,
.error-page h1 em {
  color: var(--accent);
  font-style: normal;
}

.hero-lede {
  max-width: 43rem;
  margin: 2.2rem 0 1rem;
  color: var(--text);
  font-size: clamp(1.22rem, 2.1vw, 1.7rem);
  line-height: 1.42;
  text-wrap: pretty;
}

.hero-support {
  max-width: 39rem;
  margin: 0;
  color: var(--muted);
  font-size: 1.02rem;
}

.hero-actions {
  flex-wrap: wrap;
  gap: 1.25rem;
  margin-top: 2.2rem;
}

.arrow-link {
  display: inline-flex;
  min-height: 2.75rem;
  align-items: center;
  gap: 0.55rem;
  color: var(--text);
  font-size: 0.9rem;
  font-weight: 700;
  text-decoration: none;
}

.arrow-link .icon {
  color: var(--accent);
  transition: transform 150ms ease;
}

.arrow-link:hover .icon {
  transform: translateX(0.25rem);
}

/* The practice areas replaced two bulleted lists of the same four ideas. Each
   panel is a link to the page that explains it, so there are no decorative
   bullet dots left to read as filler. */
/* One equal column per practice area, however many the CMS lists, so the row
   always spans the full width. */
.practice-areas {
  display: grid;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  gap: 0.75rem;
}

.practice-areas a {
  display: grid;
  align-content: start;
  gap: 0.55rem;
  padding: 1.15rem 1.25rem;
  border-radius: var(--radius);
  text-decoration: none;
  transition:
    border-color 150ms ease,
    transform 150ms ease;
}

.practice-areas a:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
}

.practice-index {
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
}

.practice-name {
  color: var(--text);
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
  text-wrap: balance;
}

.practice-eyebrow {
  color: var(--dim);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.hero-panel {
  overflow: hidden;
  border-radius: var(--radius-lg);
}

.consultation-card,
.latest-feature {
  padding: clamp(1.6rem, 4vw, 2.5rem);
}

.consultation-card h2,
.latest-feature h2 {
  margin: 0;
  font-size: clamp(1.6rem, 3vw, 2.35rem);
  font-weight: 650;
  letter-spacing: -0.035em;
  line-height: 1.13;
}

.consultation-card > p:not(.eyebrow) {
  margin: 1rem 0 1.5rem;
  color: var(--muted);
}

.email-link {
  display: inline-block;
  min-height: 2.75rem;
  margin-top: 1rem;
  padding-block: 0.55rem;
  color: var(--muted);
}

.latest-feature {
  border-top: 1px solid var(--border);
  background: var(--surface-soft);
}

.latest-category {
  margin: 0 0 0.7rem;
  color: var(--accent-bright);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.latest-feature h2 {
  font-size: 1.3rem;
}

.latest-feature h2 a {
  text-decoration: none;
}

.latest-feature .arrow-link {
  margin-top: 0.7rem;
}

/* A slim, factual band above a full-screen grid: eyebrow, plain heading, one
   sentence. It replaces the split "X. Y." hero headline and its second column. */
.page-intro {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  gap: 1rem clamp(1.5rem, 4vw, 3.5rem);
  align-items: end;
  padding: clamp(1.4rem, 3vw, 2.4rem) clamp(1rem, 3vw, 2rem) clamp(1.2rem, 2.5vw, 1.8rem);
  border-bottom: 1px solid var(--border);
}

.page-intro h1 {
  margin: 0;
  font-size: clamp(2.1rem, 4.4vw, 3.6rem);
  font-weight: 600;
  letter-spacing: -0.045em;
  line-height: 1;
}

.page-intro > p {
  max-width: 46rem;
  margin: 0 0 0.3rem;
  color: var(--muted);
  font-size: clamp(0.95rem, 1.5vw, 1.1rem);
  text-wrap: pretty;
}

.section {
  padding: clamp(5rem, 9vw, 9rem) clamp(1rem, 3vw, 3rem);
}

/* The hero's border already separates it from the article, so the article
   needs less top room than a free-standing section. */
.page-hero + .article-layout,
.page-hero + .legal-layout {
  padding-top: clamp(2.5rem, 5vw, 4rem);
}

.section-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(18rem, 0.55fr);
  gap: 3rem;
  align-items: end;
  margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
}

.section-heading h2,
.contact-band h2,
.profile-copy h2,
.profile-source > h2 {
  margin: 0;
  font-size: clamp(2.3rem, 4.5vw, 4.4rem);
  font-weight: 600;
  letter-spacing: -0.055em;
  line-height: 1.02;
  text-wrap: balance;
}

.section-heading > p {
  max-width: 34rem;
  margin: 0;
  color: var(--muted);
  font-size: 1.05rem;
}

/* The "Explore this service" link is absolutely positioned at the bottom edge,
   so the card reserves room for it with extra bottom padding and the feature
   list pins itself just above it. */

.service-number,
.service-detail-heading > span {
  margin: 0 0 1.5rem;
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 0.69rem;
  letter-spacing: 0.12em;
}

/* One slim legal strip on every page, single-screen layouts included. The old
   footer repeated the primary navigation; the links people open a footer to
   find are the legal ones, so those lead. */
.site-footer {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.4rem clamp(1.2rem, 3vw, 2.5rem);
  align-items: center;
  margin-top: 1rem;
  padding: 0.85rem clamp(1rem, 2.5vw, 1.8rem);
  border-radius: var(--radius);
  color: var(--dim);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.04em;
}

.footer-copyright {
  margin: 0;
  white-space: nowrap;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.2rem clamp(0.9rem, 2vw, 1.6rem);
}

.footer-links a {
  display: inline-flex;
  min-height: 2.25rem;
  align-items: center;
  color: var(--muted);
  text-decoration: none;
}

.footer-links a:hover,
.footer-links a[aria-current="page"] {
  color: var(--accent-bright);
  text-decoration: underline;
}

.footer-notice {
  grid-column: 1 / -1;
  margin: 0;
  padding-top: 0.55rem;
  border-top: 1px solid var(--border);
  font-size: 0.75rem;
  line-height: 1.5;
  text-wrap: pretty;
}

.page-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(21rem, 0.55fr);
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: start;
  overflow: hidden;
  padding: clamp(2.5rem, 6vh, 4.5rem) clamp(1rem, 3vw, 3rem) clamp(2.5rem, 6vh, 4.5rem);
  border-bottom: 1px solid var(--border);
}

.page-hero-copy {
  position: relative;
  z-index: 2;
}

.page-hero h1 {
  font-size: clamp(2.8rem, 5vw, 5rem);
}

.page-hero-copy > p:last-child {
  max-width: 47rem;
  margin: 2rem 0 0;
  color: var(--muted);
  font-size: clamp(1.08rem, 2vw, 1.35rem);
}

/* The mark fills the hero's height between equal insets and takes its width
   from its aspect ratio, so it stays fully inside a short hero. */
.hero-watermark {
  position: absolute;
  top: clamp(1rem, 3vh, 2rem);
  right: clamp(1rem, 4vw, 4rem);
  bottom: clamp(1rem, 3vh, 2rem);
  width: auto;
  max-width: 14rem;
  aspect-ratio: 285 / 420;
  opacity: 0.09;
  pointer-events: none;
}

.page-hero-aside {
  position: relative;
  z-index: 2;
  padding: 1.8rem;
  border-radius: var(--radius);
}

.page-hero-aside ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Hairline rules rather than round bullet dots. The dotted lists read as
   filler wherever they appeared. */
.page-hero-aside li {
  padding: 0.7rem 0 0.7rem 0.9rem;
  border-left: 2px solid color-mix(in srgb, var(--accent) 55%, transparent);
  color: var(--muted);
  font-size: 0.9rem;
}

.page-hero-aside li + li {
  margin-top: 0.35rem;
}

.service-detail-list {
  border-top: 1px solid var(--border);
}

.service-detail-list article {
  display: grid;
  grid-template-columns: minmax(20rem, 0.8fr) minmax(20rem, 1.2fr);
  gap: 5rem;
  padding: 3.5rem 0;
  border-bottom: 1px solid var(--border);
}

.service-detail-heading {
  display: grid;
  grid-template-columns: 3rem 1fr;
  gap: 1rem;
}

.service-detail-heading > span {
  margin: 0.3rem 0 0;
}

.service-detail-heading h2 {
  margin: 0;
  font-size: clamp(1.8rem, 3.3vw, 3rem);
  letter-spacing: -0.045em;
  line-height: 1.1;
}

.service-detail-heading h2 a {
  text-decoration: none;
}

.service-detail-copy > p {
  margin-top: 0;
  color: var(--muted);
  font-size: 1.08rem;
}

.service-detail-copy ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem 2rem;
  margin: 1.5rem 0;
  padding: 0;
  list-style: none;
}

.service-detail-copy li {
  padding: 0.55rem 0 0.55rem 0.85rem;
  border-left: 2px solid color-mix(in srgb, var(--accent) 55%, transparent);
  color: var(--muted);
  font-size: 0.9rem;
}

.contact-band {
  display: grid;
  grid-template-columns: 1fr 0.8fr auto;
  gap: 3rem;
  align-items: center;
  margin-bottom: 2rem;
  padding: clamp(2rem, 5vw, 4rem);
  border-radius: var(--radius-lg);
}

.contact-band h2 {
  font-size: clamp(2rem, 4vw, 3.5rem);
}

.contact-band > p {
  color: var(--muted);
}

.profile {
  display: grid;
  grid-template-columns: minmax(20rem, 0.85fr) minmax(22rem, 1.15fr);
  gap: clamp(3rem, 8vw, 8rem);
  align-items: center;
}

.profile-portrait {
  position: relative;
}

.profile-portrait img {
  width: 100%;
  height: auto;
  aspect-ratio: 900 / 721;
  object-fit: contain;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  filter: saturate(0.85) contrast(1.03);
}

.profile-portrait > div {
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--surface-solid) 92%, transparent);
  box-shadow: var(--shadow-soft);
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

/* Placeholder profiles have no photograph yet, so the portrait slot shows the
   person's monogram at the same aspect ratio the photo would occupy. */
.profile-portrait-monogram {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 900 / 721;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--glass-sheen), var(--glass-tint);
}

.profile-monogram {
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: clamp(4rem, 14vw, 9rem);
  font-weight: 600;
  letter-spacing: -0.05em;
  line-height: 1;
}

.profile-lede {
  color: var(--muted);
  font-size: 1.15rem;
}

.credential-list {
  margin: 2rem 0;
  padding: 0;
  list-style: none;
}

.credential-list li {
  padding: 0.55rem 0 0.55rem 0.9rem;
  border-left: 2px solid color-mix(in srgb, var(--accent) 55%, transparent);
  color: var(--muted);
}

.credential-list li + li {
  margin-top: 0.35rem;
}

.profile-contact {
  margin: 1.25rem 0 0;
  color: var(--muted);
  font-size: 0.92rem;
}

.profile-contact a {
  color: var(--accent-bright);
}

a[href^="tel:"] {
  white-space: nowrap;
}

.profile-actions {
  flex-wrap: wrap;
  gap: 1.5rem;
}

.team-roster {
  padding-top: 2rem;
}

.team-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.85rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.team-card {
  display: flex;
  min-height: 18rem;
  flex-direction: column;
  justify-content: space-between;
  padding: 1.6rem;
  border-radius: var(--radius);
}

/* The whole card is the link now; it fills the glass tile so the monogram, the
   name and the "view profile" cue all belong to one target. */

.team-card-monogram {
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: clamp(3rem, 6vw, 5rem);
  font-weight: 600;
  letter-spacing: -0.05em;
  line-height: 0.95;
}

.team-card-copy .eyebrow {
  margin-bottom: 0.55rem;
}

.team-card h3 {
  margin: 0;
  font-size: clamp(1.45rem, 2.8vw, 2rem);
  font-weight: 650;
  letter-spacing: -0.04em;
  line-height: 1.12;
  text-wrap: balance;
}

.team-card-alias {
  margin: 0.65rem 0 0;
  color: var(--muted);
}

.profile-source {
  padding-top: 0;
}

.profile-source > h2 {
  margin-bottom: 3rem;
}

.article-layout,
.legal-layout {
  display: grid;
  grid-template-columns: minmax(13rem, 0.32fr) minmax(0, var(--reading));
  gap: clamp(3rem, 8vw, 8rem);
  justify-content: center;
  align-items: start;
}

.article-rail {
  position: sticky;
  top: 2rem;
  padding: 1.4rem;
  border-top: 2px solid var(--accent);
  background: var(--surface-soft);
}

.article-rail ul {
  margin: 0 0 1.5rem;
  padding: 0;
  list-style: none;
}

.article-rail li {
  padding: 0.6rem 0;
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: 0.84rem;
}

.article-rail > p:not(.eyebrow),
.article-rail > a:not(.button) {
  display: block;
  color: var(--muted);
  font-size: 0.9rem;
}

.article-body {
  min-width: 0;
  color: var(--muted);
  font-size: 1.08rem;
  line-height: 1.78;
  /* Long unlinked URLs in imported footnotes wrap instead of widening the
     page at 320 px (WCAG 1.4.10 Reflow). */
  overflow-wrap: break-word;
}

.article-body > :first-child {
  margin-top: 0;
}

.article-body > :last-child {
  margin-bottom: 0;
}

.article-body h2,
.article-body h3,
.article-body h4 {
  color: var(--text);
  font-weight: 650;
  letter-spacing: -0.035em;
  line-height: 1.16;
  text-wrap: balance;
}

.article-body h2 {
  margin: 3.5rem 0 1rem;
  font-size: clamp(1.75rem, 3vw, 2.45rem);
}

.article-body h3 {
  margin: 2.7rem 0 0.8rem;
  font-size: clamp(1.35rem, 2.3vw, 1.75rem);
}

.article-body p {
  margin: 0 0 1.45rem;
}

.article-body a {
  color: var(--accent-bright);
  overflow-wrap: anywhere;
}

[data-theme="light"] .article-body a {
  color: #1f5c40;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme]) .article-body a {
    color: #1f5c40;
  }}

.article-body ul,
.article-body ol {
  margin: 0 0 1.7rem;
  padding-left: 1.4rem;
}

.article-body li {
  margin-bottom: 0.65rem;
  padding-left: 0.35rem;
}

.article-body li::marker {
  color: var(--accent);
  font-weight: 700;
}

.article-body blockquote {
  margin: 2.5rem 0;
  padding: 0.3rem 0 0.3rem 1.6rem;
  border-left: 3px solid var(--accent);
  color: var(--text);
  font-size: 1.25rem;
}

.article-body blockquote footer {
  color: var(--dim);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.05em;
}

.article-body figure {
  margin: 2.5rem 0;
}

.article-body figure img {
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  background: var(--surface);
}

.article-body figcaption {
  margin-top: 0.7rem;
  color: var(--dim);
  font-size: 0.82rem;
}

.article-body hr {
  height: 1px;
  margin: 3rem 0;
  border: 0;
  background: var(--border);
}

.article-body pre {
  overflow-x: auto;
  padding: 1.3rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-deep);
  color: var(--text);
  font: 0.88rem/1.6 var(--font-mono);
}

.article-table-scroll {
  max-width: 100%;
  margin: 2.5rem 0;
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.article-table-scroll:focus-visible {
  outline: 3px solid var(--accent-bright);
  outline-offset: 3px;
}

.article-table-scroll table {
  width: 100%;
  min-width: 36rem;
  border-collapse: collapse;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.55;
}

.article-table-scroll caption {
  padding: 0.9rem 1rem;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-weight: 700;
  text-align: left;
}

.article-table-scroll th,
.article-table-scroll td {
  padding: 0.85rem 1rem;
  border: 1px solid var(--border);
  overflow-wrap: anywhere;
  text-align: left;
  vertical-align: top;
}

.article-table-scroll th {
  background: color-mix(in srgb, var(--surface) 82%, var(--bg));
  color: var(--text);
  font-weight: 700;
}

.article-table-scroll tbody tr:nth-child(even) {
  background: color-mix(in srgb, var(--surface) 45%, transparent);
}

.article-callout {
  margin: 2.5rem 0;
  padding: 1.6rem;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--border));
  border-radius: var(--radius);
  background: var(--accent-wash, rgba(79, 192, 141, 0.07));
}

.article-callout h2 {
  margin: 0 0 0.7rem;
  font-size: 1.35rem;
}

.contact-grid,
.booking-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(22rem, 0.9fr);
  gap: clamp(2rem, 4vw, 4rem);
}

/* The scheduler is an external Microsoft Bookings page in an iframe. The frame
   fills its column; the shell around it supplies the glass so the embed does
   not look bolted on. */
.booking-primary {
  display: flex;
  min-height: 0;
  flex-direction: column;
}

.scheduler-shell {
  display: flex;
  min-height: 0;
  flex: 1;
  flex-direction: column;
  overflow: hidden;
  padding: 0.75rem;
  border-radius: var(--radius-lg);
}

.scheduler-frame {
  width: 100%;
  min-height: 34rem;
  flex: 1;
  border: 0;
  border-radius: var(--radius);
  background: var(--surface-solid);
  color-scheme: light;
}

.scheduler-fallback {
  margin: 0.65rem 0 0.2rem;
  text-align: center;
}

.scheduler-fallback a {
  display: inline-flex;
  min-height: 2.75rem;
  align-items: center;
  gap: 0.45rem;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.scheduler-fallback .icon {
  width: 0.95rem;
  height: 0.95rem;
  color: var(--accent);
}

.scheduler-unavailable {
  gap: 1rem;
  padding: clamp(1.5rem, 4vw, 2.5rem);
  place-content: center;
  text-align: center;
}

.scheduler-unavailable > p:not(.eyebrow) {
  max-width: 32rem;
  margin: 0 auto;
  color: var(--muted);
}

.scheduler-unavailable .button {
  align-self: center;
}

.booking-aside {
  padding: clamp(1.4rem, 3vw, 2rem);
  border-radius: var(--radius-lg);
}

.booking-aside > p:not(.contact-note) {
  margin: 0 0 1rem;
  color: var(--muted);
}

.contact-primary h2 {
  margin: 0 0 2rem;
  font-size: clamp(2.5rem, 5vw, 5rem);
  letter-spacing: -0.05em;
}

.contact-method {
  display: grid;
  grid-template-columns: 7rem 1fr auto;
  gap: 1rem;
  align-items: center;
  min-height: 5rem;
  border-top: 1px solid var(--border);
  text-decoration: none;
}

.contact-method > span:first-child {
  color: var(--dim);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.contact-method strong,
.contact-method address {
  font-size: 1.08rem;
}

.contact-method .icon {
  color: var(--accent);
}

.contact-address {
  align-items: start;
  padding-block: 1.3rem;
}

.contact-expect {
  padding: 2rem;
  border-radius: var(--radius-lg);
}

.contact-expect ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

.contact-expect li {
  display: grid;
  grid-template-columns: 2rem 1fr;
  gap: 1rem;
  padding: 1.4rem 0;
  border-top: 1px solid var(--border);
}

.contact-expect li > span {
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 0.68rem;
}

.contact-expect li strong {
  color: var(--text);
}

.contact-expect li p {
  margin: 0.35rem 0 0;
  color: var(--muted);
  font-size: 0.9rem;
}

.contact-note {
  padding-top: 1.3rem;
  border-top: 1px solid var(--border);
  color: var(--dim);
  font-size: 0.82rem;
}

.blog-section {
  padding-top: 4rem;
}

.blog-tools {
  display: grid;
  grid-template-columns: minmax(16rem, 1fr) minmax(13rem, 0.45fr) auto auto;
  gap: 1rem;
  align-items: end;
  margin-bottom: 3rem;
  padding: 1.2rem;
  border-radius: var(--radius);
}

.blog-tools label > span:first-child {
  display: block;
  margin-bottom: 0.4rem;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.blog-tools input,
.blog-tools select {
  width: 100%;
  min-height: 2.75rem;
  padding: 0.65rem 0.8rem;
  border: 1px solid var(--border-strong);
  border-radius: 0.55rem;
  background: var(--surface-solid);
  color: var(--text);
}

/* Safari draws its native arrow against the right border and ignores padding,
   so the chevron is drawn here and set in from the edge. */
.blog-tools select {
  padding-right: 2.6rem;
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position:
    right 1.3rem center,
    right 0.95rem center;
  background-repeat: no-repeat;
  background-size: 0.35rem 0.35rem;
}

.search-control {
  position: relative;
  display: block;
}

.search-control .icon {
  position: absolute;
  top: 0.83rem;
  left: 0.75rem;
  color: var(--dim);
  pointer-events: none;
}

.search-control input {
  padding-left: 2.35rem;
}

.clear-filter {
  min-height: 2.75rem;
  padding: 0.6rem 0.4rem;
  color: var(--muted);
}

.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.2rem;
}

.blog-card {
  overflow: hidden;
  border-radius: var(--radius);
}

.blog-card-featured {
  grid-column: span 2;
  display: grid;
  grid-template-columns: minmax(16rem, 0.85fr) minmax(20rem, 1.15fr);
}

.blog-card-media {
  display: grid;
  min-height: 15rem;
  place-items: center;
  overflow: hidden;
  background:
    radial-gradient(circle at 20% 20%, rgba(54, 169, 172, 0.45), transparent 50%),
    linear-gradient(145deg, #0a1830, #061022);
  color: rgba(255, 255, 255, 0.12);
  text-decoration: none;
}

.blog-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 300ms ease;
}

.blog-card:hover .blog-card-media img {
  transform: scale(1.025);
}

.card-brand-mark {
  width: clamp(5rem, 30%, 8rem) !important;
  height: auto !important;
  object-fit: contain !important;
  opacity: 0.32;
}

.blog-card-body {
  display: flex;
  min-height: 21rem;
  flex-direction: column;
  padding: 1.6rem;
}

.content-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.content-meta > span:first-child,
.content-meta a:first-child {
  color: var(--accent-bright);
}

.blog-card h2,
.blog-card h3 {
  margin: 1rem 0 0.8rem;
  font-size: 1.35rem;
  letter-spacing: -0.035em;
  line-height: 1.2;
}

.blog-card h2 a,
.blog-card h3 a {
  text-decoration: none;
}

.blog-card-body > p {
  display: -webkit-box;
  overflow: hidden;
  margin: 0 0 1rem;
  color: var(--muted);
  font-size: 0.9rem;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.blog-card .arrow-link {
  margin-top: auto;
  border-top: 1px solid var(--border);
}

.pagination {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 1rem;
  align-items: center;
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.72rem;
}

.pagination a:last-child {
  justify-self: end;
}

.empty-state {
  padding: clamp(3rem, 8vw, 7rem);
  border-radius: var(--radius);
  text-align: center;
}

.empty-state h2 {
  margin: 0;
  font-size: clamp(2rem, 4vw, 3.5rem);
  letter-spacing: -0.04em;
}

.empty-state > p:not(.eyebrow) {
  color: var(--muted);
}

.post {
  padding-top: clamp(4rem, 8vw, 8rem);
}

.post-header {
  width: min(calc(100% - 2rem), 62rem);
  margin-inline: auto;
  text-align: center;
}

.back-link {
  display: inline-block;
  min-height: 2.75rem;
  color: var(--muted);
  font-size: 0.9rem;
}

.post-header .content-meta {
  justify-content: center;
  margin: 1.2rem 0;
}

.post-header h1 {
  margin: 0;
  font-size: clamp(2.7rem, 6vw, 5.7rem);
  font-weight: 620;
  letter-spacing: -0.06em;
  line-height: 1;
  text-wrap: balance;
}

.post-deck {
  max-width: 49rem;
  margin: 1.7rem auto 0;
  color: var(--muted);
  font-size: clamp(1.05rem, 2vw, 1.3rem);
  text-wrap: pretty;
}

.post-byline {
  margin: 1rem 0 0;
  color: var(--dim);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
}

.post-feature {
  width: min(calc(100% - 2rem), 70rem);
  max-height: 40rem;
  margin: clamp(3rem, 6vw, 5rem) auto 0;
  overflow: hidden;
  border-radius: var(--radius-lg);
}

.post-feature img {
  width: 100%;
  max-height: 40rem;
  object-fit: cover;
}

.post-content-wrap {
  display: grid;
  width: min(calc(100% - 2rem), 68rem);
  grid-template-columns: 13rem minmax(0, var(--reading));
  gap: clamp(3rem, 8vw, 7rem);
  align-items: start;
  justify-content: center;
  margin: clamp(4rem, 8vw, 7rem) auto;
}

.post-aside {
  position: sticky;
  top: 2rem;
  padding-top: 1rem;
  border-top: 2px solid var(--accent);
  color: var(--dim);
  font-size: 0.82rem;
}

.post-aside a {
  color: var(--accent-bright);
}

.related {
  border-top: 1px solid var(--border);
}

.error-page {
  display: flex;
  min-height: 44rem;
  align-items: flex-start;
  flex-direction: column;
  justify-content: center;
  padding: clamp(4rem, 10vw, 10rem) clamp(1rem, 5vw, 5rem);
}

.error-page > p:not(.eyebrow) {
  max-width: 38rem;
  color: var(--muted);
  font-size: 1.1rem;
}

.error-page > div {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  align-items: center;
}

/* ---------------------------------------------------------------------------
   Glass
   Every raised surface is the same material, declared once. Three things do the
   work: a tint transparent enough to let the aurora through, a real backdrop
   blur, and the pair of inset highlights that draw a lit top edge and a faint
   bottom bounce. The sheen is a background layer rather than a pseudo-element,
   so it cannot end up painting over the panel's own text.
   Declared after the component rules so it owns the material, and before the
   breakpoints so responsive overrides still win where they mean to.
   --------------------------------------------------------------------------- */
.site-header,
.site-footer,
.hero-panel,
.page-hero-aside,
.contact-band,
.contact-expect,
.booking-aside,
.scheduler-shell,
.blog-card,
.blog-tools,
.empty-state,
.team-card,
.practice-areas a {
  border: 1px solid var(--glass-edge);
  background: var(--glass-sheen), var(--glass-tint);
  box-shadow: var(--glass-shadow);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}

.team-card:hover,
.blog-card:hover {
  border-color: var(--glass-edge-hover);
  background: var(--glass-sheen), var(--glass-tint-strong);
}

/* Panels that sit directly over the page rather than over other content read
   better slightly denser — they carry small text. */
.site-header,
.site-footer,
.hero-panel,
.booking-aside,
.contact-expect {
  background: var(--glass-sheen), var(--glass-tint-strong);
}

/* Without backdrop-filter support the tint alone would leave text on a nearly
   transparent panel, so those browsers get an opaque surface instead. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header,
  .site-footer,
  .hero-panel,
  .page-hero-aside,
  .contact-band,
  .contact-expect,
  .booking-aside,
  .scheduler-shell,
  .blog-card,
  .blog-tools,
  .empty-state,
  .team-card,
  .practice-areas a {
    background: color-mix(in srgb, var(--surface-solid) 92%, transparent);
  }}

@media (max-width: 72rem) {
  .site-header {
    grid-template-columns: 1fr auto auto;
  }

  .menu-toggle {
    display: grid;
    grid-column: 2;
  }

  .primary-nav {
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    left: 0;
    display: none;
    padding: 0.7rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-solid);
    box-shadow: var(--shadow);
  }

  .primary-nav[data-open] {
    display: grid;
  }

  .primary-nav a {
    padding: 0.8rem 1rem;
  }

  .header-actions {
    grid-column: 3;
    margin-left: 0.6rem;
  }

  .booking-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .blog-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .blog-card-featured {
    grid-column: span 2;
  }}

@media (max-width: 56rem) {
  .site-shell {
    width: min(calc(100% - 1rem), var(--max));
    padding-top: 0.5rem;
  }

  .site-header {
    padding-left: 0.8rem;
  }

  .consultation-button {
    display: none;
  }

  .home-hero,
  .page-hero,
  .profile,
  .contact-grid,
  .booking-grid {
    grid-template-columns: 1fr;
  }

  .page-intro {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .home-hero {
    gap: 3.5rem;
    min-height: auto;
    padding-block: 5rem 3rem;
  }

  .hero-panel {
    max-width: 42rem;
  }

  .page-hero {
    gap: 2.5rem;
    padding-block: 2.5rem 3rem;
  }

  .page-hero-aside {
    max-width: 38rem;
  }

  .section-heading,
  .service-detail-list article,
  .contact-band {
    grid-template-columns: 1fr;
  }

  .service-detail-list article {
    gap: 2rem;
  }

  .team-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .article-layout,
  .legal-layout,
  .post-content-wrap {
    grid-template-columns: minmax(0, var(--reading));
  }

  .article-rail,
  .post-aside {
    position: static;
  }

  .blog-tools {
    grid-template-columns: 1fr 1fr;
  }}

@media (max-width: 42rem) {
  .site-header {
    min-height: 4rem;
  }

  .brand-mark {
    width: 1.7rem;
  }

  .hero-copy h1,
  .page-hero h1,
  .error-page h1 {
    font-size: clamp(2.75rem, 14vw, 4.2rem);
  }

  .section {
    padding: 4.5rem 0.5rem;
  }

  .section-heading {
    gap: 1.5rem;
  }

  .team-grid,
  .practice-areas {
    grid-template-columns: 1fr;
  }

  .practice-areas {
    grid-auto-flow: row;
  }

  .site-footer {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }

  .footer-links {
    justify-content: flex-start;
  }

  .team-card {
    min-height: 15rem;
  }

  .service-detail-copy ul {
    grid-template-columns: 1fr;
  }

  .contact-band {
    margin-inline: 0.5rem;
    padding: 1.5rem;
  }

  .profile {
    gap: 3rem;
  }

  .contact-method {
    grid-template-columns: 5rem 1fr auto;
  }

  .blog-tools,
  .blog-grid {
    grid-template-columns: 1fr;
  }

  .blog-card-featured {
    grid-column: auto;
    display: block;
  }

  .blog-card-body {
    min-height: 19rem;
  }

  .post {
    padding-top: 4rem;
  }

  /* Imported article titles run past 200 characters, so the phone size stays
     modest enough that the title and the start of the article share a screen. */
  .post-header h1 {
    font-size: clamp(1.7rem, 7.5vw, 2.4rem);
  }}

/*
 * Mobile direction: a compact, precise "counsel console." The restrained
 * instrument-panel details below carry the desktop navy/lime/teal identity
 * into smaller viewports without reducing content or touch affordances.
 */
@media (max-width: 72rem) {
  .site-shell {
    padding-top: max(0.5rem, env(safe-area-inset-top));
  }

  .site-header {
    position: sticky;
    top: max(0.5rem, env(safe-area-inset-top));
    border-color: color-mix(in srgb, var(--border) 78%, var(--teal));
    box-shadow:
      0 1rem 3rem -1.8rem rgba(0, 0, 0, 0.9),
      inset 0 1px rgba(255, 255, 255, 0.06);
  }

  .site-header[data-menu-open] {
    border-color: color-mix(in srgb, var(--teal) 55%, var(--border));
    border-bottom-right-radius: 0.7rem;
    border-bottom-left-radius: 0.7rem;
  }

  .brand {
    min-height: 3rem;
    align-items: center;
  }

  .primary-nav {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.35rem;
    padding: 0.65rem;
    visibility: hidden;
    background:
      linear-gradient(135deg, rgba(54, 169, 172, 0.1), transparent 42%),
      var(--surface-solid);
    opacity: 0;
    transform: translateY(-0.5rem) scale(0.99);
    transform-origin: top center;
    transition:
      opacity 150ms ease,
      transform 150ms ease,
      visibility 150ms;
  }

  .primary-nav[data-open] {
    visibility: visible;
    opacity: 1;
    transform: none;
  }

  .primary-nav a {
    display: flex;
    min-height: 3.25rem;
    align-items: center;
    justify-content: center;
    padding: 0.75rem;
    border: 1px solid transparent;
    text-align: center;
  }

  .primary-nav a[aria-current="page"] {
    border-color: color-mix(in srgb, var(--accent) 32%, var(--border));
  }

  .mobile-consultation-link {
    display: none !important;
  }

  .button,
  .arrow-link,
  .email-link,
  .back-link {
    min-height: 3rem;
  }

  .icon-button {
    width: 3rem;
    height: 3rem;
  }}

@media (max-width: 56rem) {
  body {
    line-height: 1.58;
  }

  .site-atmosphere::after {
    background-size: 3.5rem 3.5rem;
    opacity: 0.7;
  }

  .site-header {
    min-height: 4.35rem;
    padding: 0.55rem;
    border-radius: 1rem;
  }

  .brand-mark {
    width: 1.75rem;
  }

  .primary-nav {
    grid-template-columns: 1fr 1fr;
    gap: 0.45rem;
    max-height: calc(100dvh - 6rem);
    padding: 0.75rem;
    overflow-y: auto;
    border-radius: 1rem;
  }

  .primary-nav a {
    position: relative;
    min-height: 4rem;
    justify-content: flex-start;
    padding: 0.9rem 1rem;
    border-color: var(--border);
    border-radius: 0.75rem;
    background: var(--surface-soft);
    color: var(--text);
    font-size: 0.95rem;
  }

  .primary-nav a::after {
    position: absolute;
    right: 0.9rem;
    width: 0.45rem;
    height: 0.45rem;
    border-top: 0.12rem solid currentColor;
    border-right: 0.12rem solid currentColor;
    color: var(--accent);
    content: "";
    transform: rotate(45deg);
  }

  .primary-nav a[aria-current="page"] {
    background:
      linear-gradient(135deg, var(--accent-wash, rgba(79, 192, 141, 0.12)), transparent),
      var(--surface-soft);
  }

  .primary-nav .mobile-consultation-link {
    display: flex !important;
    grid-column: 1 / -1;
    border-color: var(--accent-fill);
    background: var(--accent-fill);
    color: var(--accent-ink);
    font-weight: 750;
  }

  .primary-nav .mobile-consultation-link::after {
    color: var(--accent-ink);
  }

  .home-hero {
    position: relative;
    gap: 2.25rem;
    padding: clamp(4.25rem, 15vw, 6rem) 0.5rem 2.5rem;
  }

  .hero-copy h1,
  .page-hero h1,
  .error-page h1 {
    font-size: clamp(2.75rem, 12.5vw, 4.8rem);
    letter-spacing: -0.065em;
    line-height: 0.96;
  }

  .hero-lede {
    margin-top: 1.6rem;
    font-size: clamp(1.12rem, 4.5vw, 1.4rem);
  }

  .hero-actions,
  .profile-actions {
    align-items: stretch;
    gap: 0.75rem;
  }

  .hero-actions .button,
  .profile-actions .button {
    flex: 1 1 13rem;
  }

  .hero-panel {
    border-radius: 1.1rem;
    background:
      radial-gradient(circle at 100% 0, rgba(54, 169, 172, 0.14), transparent 36%),
      var(--surface);
    box-shadow: 0 2rem 5rem -3rem rgba(0, 0, 0, 0.95);
  }

  .consultation-card,
  .latest-feature {
    padding: 1.4rem;
  }

  .section {
    padding: clamp(4rem, 18vw, 6rem) 0.5rem;
  }

  .section-heading {
    gap: 1.25rem;
    margin-bottom: 2.2rem;
  }

  .section-heading h2,
  .contact-band h2,
  .profile-copy h2,
  .profile-source > h2 {
    font-size: clamp(2.1rem, 10vw, 3.4rem);
    line-height: 1;
  }

  .team-card,
  .practice-areas a {
    border-radius: 0.9rem;
  }

  .service-number {
    margin-bottom: 3rem;
  }

  .page-hero {
    gap: 2rem;
    padding: 2rem 0.5rem 2.5rem;
  }

  .page-hero-copy > p:last-child {
    margin-top: 1.5rem;
    font-size: 1.05rem;
  }

  .page-hero-aside {
    padding: 1.25rem;
    border-radius: 0.9rem;
  }

  .hero-watermark {
    right: 1rem;
  }

  .service-detail-list article {
    gap: 1.4rem;
    padding: 2.2rem 0.5rem;
  }

  .service-detail-heading {
    grid-template-columns: 2rem 1fr;
    gap: 0.5rem;
  }

  .service-detail-copy > p {
    font-size: 1rem;
  }

  .contact-band {
    gap: 1rem;
    margin-inline: 0;
    padding: 1.4rem;
    border-radius: 1rem;
  }

  .profile {
    gap: 2.5rem;
  }

  .profile-portrait img {
    border-radius: 1rem;
  }

  .profile-portrait > div {
    right: 0.65rem;
    bottom: 0.65rem;
    max-width: calc(100% - 1.3rem);
  }

  .team-card {
    min-height: 13.5rem;
    padding: 1.4rem;
  }

  .team-card-monogram {
    font-size: 4rem;
  }

  .article-layout,
  .legal-layout {
    gap: 2.5rem;
  }

  .article-rail,
  .post-aside {
    padding: 1.1rem;
    border: 1px solid var(--border);
    border-top: 2px solid var(--accent);
    border-radius: 0.75rem;
  }

  .article-body {
    font-size: 1rem;
    line-height: 1.72;
  }

  .article-body h2 {
    margin-top: 2.8rem;
  }

  .article-body pre {
    margin-inline: -0.25rem;
    padding: 1rem;
    font-size: 0.8rem;
  }

  .contact-expect {
    padding: 1.3rem;
    border-radius: 1rem;
  }

  .contact-method {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.25rem 1rem;
    min-height: 5.5rem;
    padding-block: 0.9rem;
  }

  .contact-method > span:first-child {
    grid-column: 1 / -1;
  }

  .contact-method strong,
  .contact-method address {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .contact-method .icon {
    grid-column: 2;
    grid-row: 2;
  }

  .blog-section {
    padding-top: 3rem;
  }

  .blog-tools {
    gap: 0.8rem;
    margin-bottom: 2rem;
    padding: 1rem;
    border-radius: 0.9rem;
  }

  .blog-tools input,
  .blog-tools select {
    min-height: 3rem;
    font-size: 1rem;
  }

  .blog-card {
    border-radius: 0.9rem;
  }

  .blog-card-media {
    min-height: 12rem;
  }

  .blog-card-body {
    min-height: 17rem;
    padding: 1.25rem;
  }

  .post {
    padding-top: 3.5rem;
  }

  .post-header {
    width: min(calc(100% - 1rem), 62rem);
  }

  .post-header h1 {
    font-size: clamp(1.7rem, 7.5vw, 2.4rem);
  }

  .post-feature,
  .post-content-wrap {
    width: min(calc(100% - 1rem), 68rem);
  }

  .post-feature {
    margin-top: 2.5rem;
    border-radius: 1rem;
  }

  .post-content-wrap {
    gap: 2.5rem;
    margin-block: 3rem 4.5rem;
  }}

/* On a single column the profile and roster sections each add a full section
   padding, which left a large blank band between them. */
@media (max-width: 56rem) {
  .team-page .profile {
    padding-bottom: 1.5rem;
  }

  .team-page .team-roster {
    padding-top: 1.5rem;
  }
}

@media (max-width: 36rem) {
  .site-shell {
    width: min(calc(100% - 0.75rem), var(--max));
    padding-bottom: 0.75rem;
  }

  .site-header {
    padding-inline: 0.5rem;
  }

  .brand-mark {
    width: 1.6rem;
  }

  .header-actions {
    gap: 0.35rem;
    margin-left: 0.35rem;
  }

  .primary-nav {
    top: calc(100% + 0.4rem);
  }

  .hero-actions,
  .profile-actions {
    flex-direction: column;
  }

  .hero-actions .button,
  .profile-actions .button {
    flex-basis: auto;
    width: 100%;
  }

  .hero-actions .arrow-link {
    justify-content: center;
  }

  .profile-actions .arrow-link {
    justify-content: flex-start;
  }

  /* Profile headings are full sentences, not short labels, so they use a
     smaller phone size than section headings. */
  .profile-copy h2 {
    font-size: clamp(1.6rem, 7vw, 2.1rem);
    line-height: 1.1;
  }

  .pagination {
    grid-template-columns: 1fr 1fr;
  }

  .pagination > span {
    grid-column: 1 / -1;
    grid-row: 1;
    text-align: center;
  }}

@media (max-width: 23rem) {
  .primary-nav {
    grid-template-columns: 1fr;
  }

  .primary-nav .mobile-consultation-link {
    grid-column: auto;
  }

  .hero-copy h1,
  .page-hero h1,
  .error-page h1 {
    font-size: 2.55rem;
  }}

@media (hover: none) {
  .button:hover,
  .blog-card:hover .blog-card-media img {
    transform: none;
  }}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }}

@media (prefers-contrast: more) {
  :root {
    --border: rgba(255, 255, 255, 0.38);
    --border-strong: rgba(255, 255, 255, 0.62);
    --muted: #d5dfed;
    --dim: #c3d0e2;
  }

  :root[data-theme="light"] {
    --border: rgba(5, 20, 40, 0.38);
    --border-strong: rgba(5, 20, 40, 0.62);
    --muted: #23384e;
    --dim: #2d4359;
  }}

@media (prefers-contrast: more) and (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    --border: rgba(5, 20, 40, 0.38);
    --border-strong: rgba(5, 20, 40, 0.62);
    --muted: #23384e;
    --dim: #2d4359;
  }}

@media (forced-colors: active) {
  :focus-visible {
    outline-color: Highlight;
  }

  .site-atmosphere {
    display: none;
  }

  .site-header,
  .primary-nav,
  .hero-panel,
  .page-hero-aside,
  .site-footer,
  .blog-card,
  .article-rail,
  .post-aside,
  .article-callout,
  .article-table-scroll {
    border-color: CanvasText;
    background: Canvas;
    box-shadow: none;
    forced-color-adjust: auto;
  }

  .button,
  .icon-button,
  .blog-tools input,
  .blog-tools select {
    border-color: ButtonText;
    background: ButtonFace;
    color: ButtonText;
    box-shadow: none;
  }

  .blog-tools select {
    appearance: auto;
  }

  .primary-nav a[aria-current="page"],
  .button-primary {
    border-color: Highlight;
    outline: 2px solid Highlight;
    outline-offset: -2px;
  }

  
  .status-square,
  .article-body li::marker {
    color: CanvasText;
    background: CanvasText;
    box-shadow: none;
  }

  a {
    text-decoration-color: LinkText;
  }}

/* Single-screen home page.
   Gated on a viewport with room for it. Below this width/height — and therefore at
   high zoom or large text, which shrink the CSS viewport — the page falls back to
   normal document flow and scrolls, so nothing is ever clipped out of reach
   (WCAG 2.2 1.4.4 Resize text, 1.4.10 Reflow). Nothing here sets overflow: hidden. */
@media (min-width: 75rem) and (min-height: 34rem) {
  /* At least one screen tall, never capped at it: when the content needs
     more room (a long bio, enlarged text spacing, a shorter window) the page
     grows and scrolls instead of clipping it or sliding it under the footer
     (WCAG 1.4.12 Text Spacing). */
  .home-page .site-shell {
    display: flex;
    flex-direction: column;
    min-height: 100svh;
    padding-block: clamp(0.7rem, 1.5vh, 1.25rem);
  }

  .home-page main {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-height: 0;
  }

  .home-page .home-hero {
    flex: 1;
    min-height: 0;
    align-content: center;
    gap: clamp(1.75rem, 3.4vw, 4.5rem);
    grid-template-columns: minmax(0, 1.05fr) minmax(22rem, 0.9fr);
    padding-block: clamp(0.9rem, 2.4vh, 3rem);
  }

  .home-page .hero-copy h1 {
    font-size: clamp(2.6rem, min(5.4vw, 7.6vh), 5.4rem);
  }

  .home-page .hero-lede {
    margin-block: clamp(0.9rem, 2.6vh, 2.2rem) clamp(0.5rem, 1.2vh, 1rem);
    font-size: clamp(1.05rem, min(1.7vw, 2.4vh), 1.7rem);
  }

  .home-page .eyebrow {
    margin-bottom: clamp(0.5rem, 1.3vh, 1.1rem);
  }

  .home-page .hero-actions {
    margin-top: clamp(0.9rem, 2.5vh, 2.2rem);
  }

  .home-page .practice-areas,
  .home-page .site-footer {
    flex-shrink: 0;
  }

  .home-page .practice-areas a {
    padding: clamp(0.7rem, 1.6vh, 1.15rem) clamp(0.9rem, 1.6vw, 1.25rem);
  }

  .home-page .practice-name {
    font-size: clamp(0.88rem, 1.85vh, 1.02rem);
  }

  /* The right-hand panel, not the copy, sets the hero's height on short screens. */
  .home-page .consultation-card,
  .home-page .latest-feature {
    padding: clamp(1.1rem, 2.7vh, 2.5rem) clamp(1.6rem, 3vw, 2.5rem);
  }

  .home-page .consultation-card h2 {
    font-size: clamp(1.3rem, min(2.4vw, 3.1vh), 2.35rem);
  }

  .home-page .consultation-card > p:not(.eyebrow) {
    margin-block: clamp(0.5rem, 1.3vh, 1rem) clamp(0.75rem, 2vh, 1.5rem);
  }

  .home-page .email-link {
    margin-top: clamp(0.25rem, 0.9vh, 1rem);
  }

  .home-page .latest-feature h2 {
    font-size: clamp(1.05rem, 2.4vh, 1.3rem);
  }

  .home-page .hero-support {
    font-size: clamp(0.94rem, 1.9vh, 1.02rem);
  }
}

/* Single-screen top-level destinations.
   The layout is enabled only when there is enough width and height for the
   complete interface at its intended text size. Narrow viewports, short windows,
   browser zoom and enlarged text retain the normal, scrollable document flow.
   The document itself is never overflow-locked, so content remains reachable if
   translated or user-authored text needs more room. */
@media (min-width: 75rem) and (min-height: 34rem) {
  /* At least one screen tall, never capped at it: when the content needs
     more room (a long bio, enlarged text spacing, a shorter window) the page
     grows and scrolls instead of clipping it or sliding it under the footer
     (WCAG 1.4.12 Text Spacing). */
  .viewport-page .site-shell {
    display: flex;
    flex-direction: column;
    min-height: 100svh;
    padding-block: clamp(0.65rem, 1.25vh, 1rem);
  }

  /* A narrow intro band on top, the page's real content filling everything
     below it. The old two-column split put a blurb beside the content; the
     blurb is now one line and the content gets the whole width. */
  .viewport-page main {
    display: grid;
    flex: 1;
    min-height: 0;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    gap: clamp(0.7rem, 1.5vh, 1.2rem);
    padding-block: clamp(0.5rem, 1vh, 0.9rem);
  }

  .viewport-page .page-intro {
    padding: clamp(0.5rem, 1.2vh, 1rem) clamp(0.75rem, 1.6vw, 1.4rem) clamp(0.7rem, 1.4vh, 1.1rem);
  }

  .viewport-page .page-intro h1 {
    font-size: clamp(1.9rem, min(3.2vw, 5vh), 3rem);
  }

  .viewport-page .page-intro > p {
    font-size: clamp(0.85rem, 1.7vh, 1rem);
    line-height: 1.5;
  }

  .viewport-page .page-intro .eyebrow {
    margin-bottom: clamp(0.3rem, 0.8vh, 0.6rem);
  }

  .viewport-page .section {
    min-height: 0;
    padding: 0;
  }

  .services-page .services-overview {
    height: 100%;
  }

  /* One row, one column per practice area, so three areas fill the width
     instead of leaving an empty fourth cell in a 2x2 grid. */

  .services-page .service-number {
    margin-bottom: clamp(0.35rem, 0.8vh, 0.7rem);
  }

  /* Three rows: intro, Laura, roster. Laura's block gets exactly the height its
     content needs (its own row is `auto`); the roster takes whatever remains.
     A fixed fractional row used to squeeze the profile shorter than its content
     at common laptop heights, and the overflow spilled onto the roster heading. */
  .team-page main {
    grid-template-rows: auto auto minmax(0, 1fr);
  }

  /* A single employee profile has just the intro and the profile block — no
     roster row — so it keeps the two-row shell. */
  .profile-page main {
    grid-template-rows: auto minmax(0, 1fr);
  }

  /* The portrait column is exactly as wide as the photo, so the copy starts
     right beside it instead of after a gap. */
  .team-page .profile {
    height: auto;
    grid-template-columns: auto minmax(19rem, 1fr);
    gap: clamp(1.25rem, 2.8vw, 2.8rem);
    align-items: center;
    padding: clamp(0.3rem, 0.8vh, 0.7rem);
  }

  /* A definite, viewport-scaled height — never a percentage of the auto row,
     which would resolve to the image's intrinsic size and balloon the block.
     The row is `auto`, so it grows to fit whichever column is taller and the
     portrait can no longer spill onto the roster below. */
  .team-page .profile-portrait {
    width: auto;
    max-width: 100%;
    height: clamp(13rem, 32vh, 24rem);
    aspect-ratio: 900 / 721;
    align-self: center;
    justify-self: start;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
  }

  .team-page .profile-portrait img {
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    border: 0;
    border-radius: 0;
    object-fit: contain;
    object-position: center;
  }

  /* Laura's copy is capped in how much it scales with viewport height. It used
     to grow on `vh`, so a taller window made her block taller and the roster
     never gained the room — the cards stayed clipped under the footer. Holding
     the copy roughly flat lets the roster's `1fr` row absorb the extra height. */
  .team-page .profile-copy h2 {
    font-size: clamp(1.7rem, min(2.9vw, 3.1vh), 2.5rem);
  }

  .team-page .profile-lede {
    max-width: 70ch;
    margin-block: clamp(0.5rem, 1vh, 0.8rem);
    font-size: clamp(0.85rem, 1.4vh, 0.98rem);
    line-height: 1.45;
  }

  .team-page .credential-list {
    margin: clamp(0.5rem, 1vh, 0.8rem) 0;
  }

  .team-page .credential-list li {
    padding: clamp(0.2rem, 0.45vh, 0.4rem) 0 clamp(0.2rem, 0.45vh, 0.4rem) 0.9rem;
    font-size: clamp(0.76rem, 1.4vh, 0.88rem);
  }

  .team-page .profile-contact {
    margin-top: clamp(0.35rem, 0.8vh, 0.7rem);
    font-size: clamp(0.76rem, 1.4vh, 0.9rem);
  }

  .team-page .profile-actions {
    gap: 0.25rem 1rem;
  }

  /* A hairline separates the roster from Laura's profile; without it the
     section heading reads as part of the block above. */
  .team-page .team-roster {
    display: flex;
    min-height: 0;
    flex-direction: column;
    grid-row: 3;
    gap: clamp(0.5rem, 1.1vh, 0.9rem);
    padding: clamp(0.5rem, 1.2vh, 1rem) 0 0;
    border-top: 1px solid var(--border);
  }

  .team-page .team-roster .section-heading {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.3rem 1rem;
    margin: 0;
  }

  .team-page .team-roster .section-heading h2 {
    font-size: clamp(1.15rem, 2.3vh, 1.5rem);
  }

  .team-page .team-roster .eyebrow {
    margin-bottom: 0;
  }

  /* Columns follow the roster size, so four people fill the row instead of
     leaving an empty fifth slot. */
  .team-page .team-grid {
    min-height: 0;
    flex: 1;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  }

  .team-page .team-card {
    min-height: 0;
    padding: clamp(0.85rem, 1.7vh, 1.4rem);
  }

  .team-page .team-card-monogram {
    font-size: clamp(2.1rem, 5vh, 4rem);
    line-height: 0.9;
  }

  .team-page .team-card-copy .eyebrow {
    font-size: 0.68rem;
  }

  .team-page .team-card h3 {
    font-size: clamp(1.02rem, 2.2vh, 1.35rem);
  }

  .team-page .team-card-alias {
    margin-top: 0.3rem;
    font-size: 0.78rem;
    line-height: 1.35;
  }

  /* The scheduler gets the height; the fallback details sit beside it. */
  .contact-page .booking-grid {
    height: 100%;
    min-height: 0;
    grid-template-columns: minmax(24rem, 1.35fr) minmax(19rem, 0.65fr);
    gap: clamp(1rem, 2.2vw, 2rem);
    align-items: stretch;
  }

  .contact-page .booking-aside {
    display: flex;
    min-height: 0;
    flex-direction: column;
    justify-content: flex-start;
    overflow-y: auto;
  }

  /* Children keep their natural height. Shrinking them let the office address
     run over the divider below it instead of letting the aside scroll. */
  .contact-page .booking-aside > * {
    flex-shrink: 0;
  }

  .contact-page .contact-method {
    grid-template-columns: 5rem 1fr auto;
    min-height: clamp(3.4rem, 6.6vh, 4.4rem);
  }

  .contact-page .contact-method strong,
  .contact-page .contact-method address {
    font-size: clamp(0.82rem, 1.6vh, 1rem);
  }

  .contact-page .contact-address {
    padding-block: clamp(0.5rem, 1vh, 0.9rem);
  }

  .contact-page .scheduler-frame {
    min-height: 0;
  }

  .contact-page .contact-note {
    margin-bottom: 0;
    padding-top: clamp(0.55rem, 1.1vh, 0.8rem);
    font-size: 0.72rem;
    line-height: 1.4;
  }

  .blog-index-page .blog-section {
    display: flex;
    height: 100%;
    flex-direction: column;
    padding: 0;
  }

  .blog-index-page .blog-tools {
    grid-template-columns: minmax(12rem, 1fr) minmax(10rem, 0.55fr) auto auto;
    gap: 0.65rem;
    margin-bottom: clamp(0.5rem, 1vh, 0.8rem);
    padding: clamp(0.55rem, 1.1vh, 0.8rem);
  }

  .blog-index-page .blog-tools label > span:first-child {
    margin-bottom: 0.2rem;
    font-size: 0.7rem;
  }

  .blog-index-page .blog-tools input,
  .blog-index-page .blog-tools select {
    min-height: 2.55rem;
    padding-block: 0.5rem;
  }

  .blog-index-page .blog-grid {
    flex: 1;
    min-height: 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
    gap: clamp(0.55rem, 1vh, 0.8rem);
  }

  .blog-index-page .blog-card-compact {
    display: grid;
    min-height: 0;
    grid-template-columns: minmax(6.5rem, 0.62fr) minmax(0, 1.38fr);
    grid-template-rows: minmax(0, 1fr);
  }

  .blog-index-page .blog-card-compact .blog-card-media {
    min-height: 0;
  }

  .blog-index-page .blog-card-compact .blog-card-body {
    min-height: 0;
    padding: clamp(0.65rem, 1.3vh, 0.9rem);
  }

  .blog-index-page .blog-card-compact .content-meta {
    font-size: 0.56rem;
    letter-spacing: 0.07em;
  }

  .blog-index-page .blog-card-compact h2 {
    margin: clamp(0.4rem, 0.8vh, 0.6rem) 0 0.35rem;
    font-size: clamp(0.85rem, 1.65vh, 1.05rem);
    line-height: 1.15;
  }

  .blog-index-page .blog-card-compact .blog-card-body > p {
    display: none;
  }

  .blog-index-page .blog-card-compact .arrow-link {
    min-height: 2.4rem;
    font-size: 0.78rem;
  }

  .blog-index-page .pagination {
    flex-shrink: 0;
    margin-top: clamp(0.45rem, 0.9vh, 0.7rem);
    padding-top: clamp(0.35rem, 0.7vh, 0.55rem);
  }

  .blog-index-page .empty-state {
    margin-block: auto;
    padding: clamp(2rem, 5vh, 4rem);
  }}

/* Mid-height desktop windows (roughly 700–830px). The team page carries the
   most content of any single-screen page — Laura's full profile plus a
   five-person roster — so it needs an extra compression pass in this band to
   keep every roster card fully visible above the footer. */
@media (min-width: 75rem) and (min-height: 34rem) and (max-height: 51.99rem) {
  .team-page .page-intro {
    padding-block: 0.35rem;
  }

  .team-page .page-intro h1 {
    font-size: clamp(1.5rem, 4.5vh, 2.1rem);
  }

  .team-page .profile-portrait {
    height: clamp(11rem, 26vh, 18rem);
  }

  .team-page .profile-copy h2 {
    font-size: clamp(1.4rem, 2.4vh, 1.95rem);
  }

  .team-page .profile-lede {
    margin-block: 0.4rem;
    font-size: 0.86rem;
    line-height: 1.4;
  }

  /* Two columns of credentials instead of four stacked rows halves the block's
     height so the roster clears the footer, without dropping any content. */
  .team-page .credential-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin: 0.4rem 0;
    gap: 0.15rem 1.4rem;
  }

  .team-page .credential-list li {
    padding: 0.15rem 0 0.15rem 0.9rem;
    font-size: 0.78rem;
  }

  .team-page .profile-contact {
    margin-top: 0.3rem;
    font-size: 0.78rem;
  }

  .team-page .profile-actions {
    margin-top: 0.5rem;
  }

  .team-page .team-card {
    padding: 0.7rem 0.9rem;
  }

  .team-page .team-card-monogram {
    font-size: clamp(1.7rem, 3.8vh, 2.6rem);
  }
}

/* Common laptop heights (up to 896px). A stacked roster card needs more height
   than the roster row has left, so the monogram moves beside the copy and the
   row is at least as tall as the tallest card, and grows to fill any space left
   above the footer. Every card stretches to that height and keeps its "view
   profile" cue on the bottom line. */
@media (min-width: 75rem) and (min-height: 34rem) and (max-height: 55.99rem) {
  .team-page .team-grid {
    flex: 1 0 auto;
  }

  .team-page .team-card {
    height: auto;
  }

  .team-page .team-card-copy .eyebrow {
    margin-bottom: 0.3rem;
  }

  .team-page .team-card-alias {
    margin-top: 0.15rem;
  }
}

/* The contact sidebar holds four rows and a note. Below 752px tall its normal
   spacing needs more height than the column has, so the spacing tightens. */
@media (min-width: 75rem) and (min-height: 34rem) and (max-height: 46.99rem) {
  .contact-page .booking-aside {
    padding: 1rem 1.3rem;
  }

  .contact-page .booking-aside > .eyebrow {
    margin-bottom: 0.5rem;
  }

  .contact-page .booking-aside > p:not(.contact-note) {
    margin-bottom: 0.5rem;
    font-size: 0.92rem;
    line-height: 1.45;
  }

  .contact-page .contact-method {
    min-height: 2.6rem;
  }

  .contact-page .contact-address {
    padding-block: 0.45rem;
  }
}

/* Below 736px tall the side-by-side roster cards tighten further. */
@media (min-width: 75rem) and (min-height: 34rem) and (max-height: 45.99rem) {
  .team-page .team-roster {
    gap: 0.35rem;
    padding-top: 0.4rem;
  }

  .team-page .team-roster .section-heading h2 {
    font-size: 1.1rem;
  }

  .team-page .team-card {
    padding: 0.5rem 0.8rem;
  }

  .team-page .team-card-monogram {
    font-size: 1.5rem;
  }

  .team-page .team-card h3 {
    font-size: 0.98rem;
  }

  .team-page .team-card-copy .eyebrow {
    margin-bottom: 0.15rem;
    font-size: 0.62rem;
  }
}

/* Under 640px tall, Team, Contact and Blog have more content than one screen
   holds. They return to normal page scrolling instead of clipping text or
   nesting a scroll area inside a card. */
@media (min-width: 75rem) and (min-height: 34rem) and (max-height: 39.99rem) {
  .team-page .site-shell,
  .contact-page .site-shell,
  .blog-index-page .site-shell {
    height: auto;
  }

  .team-page main,
  .contact-page main,
  .blog-index-page main {
    grid-template-rows: auto;
  }

  .blog-index-page .blog-section {
    height: auto;
  }

  .blog-index-page .blog-grid.blog-grid {
    grid-template-rows: none;
    grid-auto-rows: auto;
  }

  .blog-index-page .blog-card-compact .blog-card-media {
    height: 4.5rem;
  }

  .contact-page .booking-grid {
    height: auto;
  }

  .contact-page .booking-aside {
    overflow-y: visible;
  }
}

/* Short desktop windows still use the complete single-screen composition.
   These reductions only apply while the CSS viewport remains at least 75rem
   wide, so browser zoom and enlarged text continue to trigger normal reflow. */
@media (min-width: 75rem) and (min-height: 34rem) and (max-height: 43.99rem) {
  .viewport-page .page-intro {
    padding: 0.5rem 1rem 0.6rem;
  }

  .viewport-page .page-intro h1 {
    font-size: clamp(1.6rem, 5vh, 2.2rem);
  }

  .viewport-page .page-intro > p {
    font-size: 0.8rem;
    line-height: 1.4;
  }

  .viewport-page .page-intro .eyebrow {
    margin-bottom: 0.25rem;
    font-size: 0.6rem;
  }

  .home-page .home-hero {
    gap: clamp(1.25rem, 2.5vw, 2.5rem);
    padding-block: 0.35rem;
  }

  .home-page .home-hero-logo {
    width: min(100%, 22rem);
    margin-bottom: 0.65rem;
  }

  .home-page .hero-copy > .eyebrow {
    margin-bottom: 0.3rem;
    font-size: 0.6rem;
  }

  .home-page .hero-copy h1 {
    font-size: clamp(2.15rem, 7.2vh, 2.8rem);
  }

  .home-page .hero-lede {
    margin-block: 0.45rem 0.2rem;
    font-size: 0.95rem;
    line-height: 1.32;
  }

  .home-page .hero-support {
    font-size: 0.82rem;
    line-height: 1.38;
  }

  .home-page .hero-actions {
    gap: 0.65rem;
    margin-top: 0.45rem;
  }

  .home-page .hero-actions .button,
  .home-page .hero-actions .arrow-link {
    min-height: 2.4rem;
    padding-block: 0.45rem;
    font-size: 0.78rem;
  }

  .home-page .consultation-card,
  .home-page .latest-feature {
    padding: 0.55rem 1rem;
  }

  .home-page .consultation-card .eyebrow,
  .home-page .latest-feature .eyebrow {
    margin-bottom: 0.22rem;
    font-size: 0.58rem;
  }

  .home-page .consultation-card h2 {
    font-size: 1.05rem;
    line-height: 1.12;
  }

  .home-page .consultation-card > p:not(.eyebrow) {
    margin-block: 0.3rem 0.45rem;
    font-size: 0.76rem;
    line-height: 1.35;
  }

  .home-page .consultation-card .button {
    min-height: 2.35rem;
    padding-block: 0.42rem;
    font-size: 0.78rem;
  }

  .home-page .email-link {
    min-height: 1.8rem;
    margin-top: 0.08rem;
    padding-block: 0.2rem;
    font-size: 0.75rem;
  }

  .home-page .latest-category {
    margin-bottom: 0.15rem;
    font-size: 0.56rem;
  }

  .home-page .latest-feature h2 {
    font-size: 0.9rem;
    line-height: 1.15;
  }

  .home-page .latest-feature .arrow-link {
    min-height: 1.85rem;
    margin-top: 0.1rem;
    font-size: 0.73rem;
  }

  .home-page .practice-areas {
    gap: 0.5rem;
  }

  .home-page .practice-areas a {
    gap: 0.3rem;
    padding: 0.5rem 0.8rem;
  }

  .home-page .practice-name {
    font-size: 0.8rem;
  }

  .home-page .practice-index,
  .home-page .practice-eyebrow {
    font-size: 0.56rem;
  }

  .home-page .site-footer,
  .viewport-page .site-footer {
    padding: 0.45rem 0.9rem;
    font-size: 0.62rem;
  }

  .home-page .footer-notice,
  .viewport-page .footer-notice {
    padding-top: 0.35rem;
    font-size: 0.68rem;
  }

  .services-page .service-number {
    margin-bottom: 0.15rem;
    font-size: 0.56rem;
  }

  .team-page .profile {
    grid-template-columns: minmax(12rem, 0.72fr) minmax(19rem, 1.28fr);
    gap: 1rem;
    padding: 0;
  }

  .team-page .profile-portrait {
    width: min(100%, 18.5rem);
  }

  .team-page .profile-portrait > div {
    right: 0.55rem;
    bottom: 0.55rem;
    gap: 0.45rem;
    padding: 0.45rem 0.6rem;
    font-size: 0.55rem;
  }

  .team-page .profile-copy > .eyebrow {
    margin-bottom: 0.18rem;
    font-size: 0.58rem;
  }

  .team-page .profile-copy h2 {
    font-size: 1.35rem;
    line-height: 1.08;
  }

  .team-page .profile-lede {
    margin-block: 0.3rem;
    font-size: 0.74rem;
    line-height: 1.35;
  }

  .team-page .credential-list {
    margin: 0.3rem 0;
  }

  .team-page .credential-list li {
    padding: 0.15rem 0 0.15rem 0.8rem;
    font-size: 0.68rem;
    line-height: 1.35;
  }

  .team-page .profile-actions {
    gap: 0.2rem 0.8rem;
  }

  .team-page .profile-actions .arrow-link {
    min-height: 2rem;
    font-size: 0.72rem;
  }

  .blog-index-page .blog-tools {
    margin-bottom: 0.4rem;
    padding: 0.35rem 0.5rem;
  }

  .blog-index-page .blog-tools input,
  .blog-index-page .blog-tools select,
  .blog-index-page .blog-tools .button {
    min-height: 2.1rem;
    padding-block: 0.35rem;
  }

  .blog-index-page .blog-grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: repeat(4, minmax(0, 1fr));
    gap: 0.35rem;
  }

  .blog-index-page .blog-card-compact {
    grid-template-columns: minmax(5.5rem, 0.22fr) minmax(0, 1.78fr);
  }

  .blog-index-page .blog-card-compact .blog-card-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto minmax(0, 1fr);
    column-gap: 0.75rem;
    align-items: center;
    padding: 0.25rem 0.55rem;
  }

  .blog-index-page .blog-card-compact .content-meta {
    grid-column: 1;
    grid-row: 1;
    font-size: 0.5rem;
  }

  .blog-index-page .blog-card-compact h2 {
    grid-column: 1;
    grid-row: 2;
    align-self: start;
    margin: 0.08rem 0 0;
    font-size: 0.72rem;
    line-height: 1.12;
  }

  .blog-index-page .blog-card-compact .arrow-link {
    min-height: 1.8rem;
    grid-column: 2;
    grid-row: 1 / 3;
    font-size: 0.68rem;
  }

  .blog-index-page .pagination {
    margin-top: 0.3rem;
    padding-top: 0.2rem;
    font-size: 0.62rem;
  }}

@media (min-width: 75rem) {
  .site-header {
    min-height: 3.65rem;
    padding: 0.38rem 0.7rem 0.38rem 1rem;
  }

  .site-header .brand-mark {
    width: 1.7rem;
  }
}

/* The portrait label reads as a plain caption under the photo rather than a
   floating status badge. */
.profile-portrait > div {
  position: static;
  margin-top: 0.75rem;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  color: var(--muted);
  font-family: var(--font-sans);
  font-size: 0.9rem;
  letter-spacing: 0;
  text-transform: none;
}

.profile-portrait > div .status-square {
  display: none;
}

/* The services page lets its cards grow past one screen when their content
   needs it, and the page then scrolls. When the content is shorter, the cards
   stretch to fill the space above the footer. */
@media (min-width: 75rem) and (min-height: 34rem) {
  .services-page .site-shell {
    height: auto;
  }

  .services-page .services-overview {
    display: flex;
    height: auto;
    flex-direction: column;
  }

}

/* The team page sizes Laura's portrait to fit one screen and clips anything
   below the photo; the intro line already gives her title there. */
.team-page .profile-portrait > div {
  display: none;
}

/* Team headshots. Photos of different shapes are cropped to one frame so the
   roster and profiles stay even. */
.profile-portrait-photo img {
  aspect-ratio: 1;
  object-fit: cover;
  object-position: center top;
}

.team-card-photo {
  width: clamp(3rem, 6vw, 4.75rem);
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  object-position: center top;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

@media (min-width: 75rem) and (min-height: 34rem) {
  .team-page .team-card-photo {
    width: clamp(2.2rem, 5.5vh, 4rem);
  }

  .team-page .profile-portrait-photo {
    aspect-ratio: 1;
  }

  .team-page .profile-portrait-photo img {
    object-fit: cover;
    object-position: center top;
  }
}

/* Legal pages (privacy policy, terms of use, disclaimer). The full-height hero
   pushed the text below the first screen, so the title sits in a short band and
   the text starts right under it. */
.legal-page .page-hero {
  min-height: 0;
  grid-template-columns: minmax(0, 1fr);
  padding: clamp(2.5rem, 5vh, 4rem) clamp(1rem, 3vw, 3rem) clamp(1.5rem, 3vh, 2.25rem);
}

.legal-page .page-hero h1 {
  font-size: clamp(2.4rem, 4.2vw, 3.75rem);
}

.legal-page .page-hero-copy > p:last-child {
  margin-top: 0.9rem;
  font-size: clamp(1rem, 1.6vw, 1.15rem);
}

.legal-page .hero-watermark {
  display: none;
}

.legal-page .legal-layout {
  padding-block: clamp(2rem, 4vh, 3rem) clamp(2.5rem, 5vh, 4rem);
}

/* Laura's profile page. Her introduction fills the first screen beside her
   portrait, as on the team profiles, and the longer sections follow below. */
.source-profile-page .source-profile {
  grid-template-columns: minmax(14rem, 0.55fr) minmax(0, 1.45fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
  padding-block: clamp(1.75rem, 4vh, 3rem);
}

.source-profile-page .profile-copy > .eyebrow {
  margin-bottom: 0.9rem;
}

.source-profile-page .profile-lede {
  font-size: 1rem;
  line-height: 1.65;
}

.source-profile-page .profile-lede > p {
  margin: 0 0 0.9rem;
}

.source-profile-page .profile-lede > p:first-child {
  color: var(--text);
  font-weight: 600;
}

.source-profile-page .profile-actions {
  margin-top: 1.25rem;
}

.source-profile-page .source-profile-details {
  padding-top: clamp(2rem, 5vh, 4rem);
  border-top: 1px solid var(--border);
}

@media (max-width: 56rem) {
  .source-profile-page .source-profile {
    grid-template-columns: minmax(0, 1fr);
  }

  .source-profile-page .profile-portrait {
    max-width: 22rem;
  }
}

/* The header stays put from page to page. The single-screen pages and the
   scrolling pages used different top padding, so the bar moved a few pixels
   when switching between them; the scrollbar gutter is reserved for the same
   reason, so a page that scrolls is not narrower than one that does not. */
html {
  scrollbar-gutter: stable;
}

@media (min-width: 75rem) and (min-height: 34rem) {
  .site-shell,
  .home-page .site-shell,
  .viewport-page .site-shell {
    padding-top: clamp(0.65rem, 1.25vh, 1rem);
  }
}

/* Blog filters. The search box, category menu, apply button and clear link
   share one height so their edges and text line up in the row. */
.blog-tools {
  --filter-control: 2.75rem;
}

.blog-tools input,
.blog-tools select,
.blog-tools .button,
.blog-tools .clear-filter {
  height: var(--filter-control);
  min-height: var(--filter-control);
  padding-block: 0;
  line-height: 1.2;
}

.blog-tools .clear-filter {
  display: inline-flex;
  align-items: center;
  padding-inline: 0.4rem;
}

.search-control .icon {
  top: 50%;
  transform: translateY(-50%);
}

@media (max-width: 56rem) {
  .blog-tools {
    --filter-control: 3rem;
  }
}

@media (min-width: 75rem) and (min-height: 34rem) {
  .blog-index-page .blog-tools {
    --filter-control: 2.55rem;
  }
}

@media (min-width: 75rem) and (min-height: 34rem) and (max-height: 43.99rem) {
  .blog-index-page .blog-tools {
    --filter-control: 2.1rem;
  }
}

/* Home hero: a short bold lead line over a plain supporting paragraph, under a
   larger wordmark. */
.home-hero-logo {
  width: min(100%, 36rem);
}

.hero-lede {
  max-width: 40rem;
  margin: clamp(1.4rem, 3vh, 2.2rem) 0 0.85rem;
  color: var(--text);
  font-size: clamp(1.3rem, 2.2vw, 1.85rem);
  font-weight: 650;
  letter-spacing: -0.025em;
  line-height: 1.22;
}

.hero-support {
  max-width: 40rem;
  color: var(--muted);
  font-size: 1.04rem;
  line-height: 1.62;
}

/* Home blog carousel. Slides share one grid cell, so the panel is as tall as
   the tallest slide and does not change height between slides. */
.latest-carousel {
  border-top: 1px solid var(--border);
  background: var(--surface-soft);
}

.latest-carousel .latest-feature {
  border-top: 0;
  background: none;
}

.carousel-slides {
  display: grid;
}

.carousel-slide {
  grid-area: 1 / 1;
}

.carousel-slide[hidden],
.carousel-controls[hidden] {
  display: none;
}

[data-enhanced] .carousel-slide {
  transition:
    opacity 700ms ease,
    visibility 700ms;
}

@media (prefers-reduced-motion: reduce) {
  [data-enhanced] .carousel-slide {
    transition: none;
  }
}

[data-enhanced] .carousel-slide:not([data-active]) {
  visibility: hidden;
  opacity: 0;
}

/* The pause button shares the bottom line with "Read insight", on the right.
   It comes first in the markup, so it is lifted above the slides. */
.latest-carousel {
  display: grid;
}

.carousel-slides,
.carousel-controls {
  grid-area: 1 / 1;
}

.carousel-controls {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  align-self: end;
  justify-self: end;
  gap: 0.35rem;
  padding: 0 clamp(1rem, 2.5vw, 1.6rem) clamp(1.2rem, 3.2vw, 2.1rem);
}

[data-enhanced] .carousel-slide .arrow-link {
  margin-right: 3.5rem;
}

.carousel-toggle {
  width: 2.25rem;
  height: 2.25rem;
  color: var(--muted);
}

.carousel-toggle:hover {
  color: var(--text);
}

.carousel-toggle .icon {
  width: 1rem;
  height: 1rem;
}

.carousel-toggle .icon-play,
.carousel-toggle[data-stopped] .icon-pause {
  display: none;
}

.carousel-toggle[data-stopped] .icon-play {
  display: block;
}

@media (min-width: 75rem) and (min-height: 34rem) {
  .home-page .hero-lede {
    margin-block: clamp(0.9rem, 2.4vh, 2rem) clamp(0.45rem, 1.1vh, 0.85rem);
    font-size: clamp(1.2rem, min(1.9vw, 2.9vh), 1.85rem);
  }

  .home-page .hero-support {
    font-size: clamp(0.92rem, 1.9vh, 1.04rem);
    line-height: 1.55;
  }

  .home-page .carousel-slide h2 {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
  }

  .home-page .carousel-slide h2 a {
    padding-block: 0.1em;
  }

  .home-page .carousel-controls {
    padding: 0 clamp(1rem, 2vw, 1.6rem) clamp(0.85rem, 2.2vh, 2.1rem);
  }
}

@media (min-width: 75rem) and (min-height: 34rem) and (max-height: 43.99rem) {
  .home-page .home-hero-logo {
    width: min(100%, 28rem);
  }

  .home-page .hero-lede {
    font-size: 1.05rem;
    line-height: 1.25;
  }

  .home-page .carousel-controls {
    gap: 0.25rem;
    padding: 0 0.75rem 0.45rem;
  }

  .home-page [data-enhanced] .carousel-slide .arrow-link {
    margin-right: 3rem;
  }

  .home-page .carousel-toggle {
    width: 2rem;
    height: 2rem;
  }
}

/* Services: one tall card per practice area in a single row, each filled from
   the top. Cards in a row share the tallest card's height. */
.services-page .services-overview {
  padding: clamp(1.25rem, 3vw, 2rem) 0 clamp(1.5rem, 3vw, 2.5rem);
}

.service-areas {
  display: grid;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  gap: 0.85rem;
}

.service-area {
  display: flex;
  flex-direction: column;
  padding: clamp(1.3rem, 1.8vw, 1.8rem);
  border: 1px solid var(--glass-edge);
  border-radius: var(--radius);
  background: var(--glass-sheen), var(--glass-tint);
  box-shadow: var(--glass-shadow);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  scroll-margin-top: 1rem;
}

.service-area:target {
  border-color: var(--accent);
}

.service-area .service-number {
  margin: 0 0 1rem;
}

.service-area .eyebrow {
  margin: 0 0 0.6rem;
}

.service-area h3 {
  margin: 0;
  font-size: clamp(1.3rem, 1.6vw, 1.5rem);
  font-weight: 650;
  letter-spacing: -0.035em;
  line-height: 1.18;
  text-wrap: balance;
}

.service-area-summary {
  margin: 0.85rem 0 1.1rem;
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.55;
}

.service-area-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.service-area-list li {
  padding: 0.45rem 0 0.45rem 0.85rem;
  border-left: 2px solid color-mix(in srgb, var(--accent) 55%, transparent);
  color: var(--text);
  font-size: 0.88rem;
  line-height: 1.4;
}

.service-area-list li + li {
  margin-top: 0.2rem;
}

.service-area-more {
  margin: 1.1rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.55;
}

.service-area .service-area-cta {
  align-self: flex-start;
  margin-top: 1rem;
}

/* Cards in a row share seven rows (number, eyebrow, title, summary, list,
   offerings paragraph, link), so each part starts at the same height in every
   card. The list, paragraph and link have fixed rows so that a card without a
   list or paragraph keeps the rest in line. */
@supports (grid-template-rows: subgrid) {
  .service-area {
    display: grid;
    grid-row: span 7;
    grid-template-rows: subgrid;
    row-gap: 0;
  }

  .service-area-list {
    grid-row: 5;
  }

  .service-area-more {
    grid-row: 6;
  }

  .service-area .service-area-cta {
    grid-row: 7;
    justify-self: start;
  }
}

@media (max-width: 74.99rem) {
  .service-areas {
    grid-auto-flow: row;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 42rem) {
  .service-areas {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Team: the page scrolls, so the roster cards are sized to their details. */
.team-page .profile,
.team-page .team-roster {
  padding: clamp(1.5rem, 3vw, 2.5rem) 0;
}

.team-page .team-roster {
  display: block;
  border-top: 1px solid var(--border);
}

.team-page .team-roster .section-heading {
  margin-bottom: clamp(1rem, 2vw, 1.5rem);
}

.team-page .team-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr));
  gap: clamp(0.85rem, 1.6vw, 1.25rem);
  align-items: start;
}

.team-page .team-card {
  display: grid;
  height: auto;
  min-height: 0;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1.25rem;
  align-items: start;
  padding: clamp(1.25rem, 2.2vw, 1.75rem);
}

.team-page .team-card-photo {
  width: clamp(4rem, 6vw, 5.5rem);
}

.team-page .team-card-monogram {
  min-width: 4rem;
  font-size: clamp(2.4rem, 4vw, 3.2rem);
}

.team-page .team-card-copy .eyebrow {
  margin-bottom: 0.4rem;
  font-size: 0.68rem;
}

.team-page .team-card h3 {
  font-size: clamp(1.35rem, 2vw, 1.7rem);
}

.team-card h3 a {
  color: inherit;
  text-decoration: none;
}

.team-card h3 a:hover {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.team-card-label {
  margin: 1.1rem 0 0.4rem;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.team-card-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.team-card-list li {
  padding: 0.25rem 0 0.25rem 0.85rem;
  border-left: 2px solid color-mix(in srgb, var(--accent) 55%, transparent);
  color: var(--text);
  font-size: 0.92rem;
  line-height: 1.4;
}

.team-card-email {
  margin: 1.1rem 0 0;
  font-size: 0.92rem;
}

.team-card-email a,
.team-card-linkedin a {
  display: inline-block;
  padding-block: 0.2rem;
  color: var(--accent-bright);
  overflow-wrap: anywhere;
}

.team-card-linkedin {
  margin: 1.1rem 0 0;
  font-size: 0.92rem;
}

.team-card-email + .team-card-linkedin {
  margin-top: 0;
}

@media (max-width: 42rem) {
  .team-page .team-card {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Articles: less room above the back link, a wider title and body. */
.post {
  padding-top: clamp(2rem, 4vw, 4rem);
}

@media (min-width: 56.01rem) {
  .post-header {
    width: min(calc(100% - 2rem), 72rem);
  }

  .post-header h1 {
    font-size: clamp(2.5rem, 5vw, 4.75rem);
    line-height: 1.04;
  }

  .post-header h1.post-title-long {
    font-size: clamp(1.9rem, 2.9vw, 2.9rem);
    letter-spacing: -0.045em;
    line-height: 1.1;
  }

  .post-deck {
    max-width: 60rem;
  }

  .post-feature {
    width: min(calc(100% - 2rem), 80rem);
  }

  .post-content-wrap {
    width: min(calc(100% - 2rem), 76rem);
    grid-template-columns: 13rem minmax(0, 52rem);
    gap: clamp(2.5rem, 5vw, 5rem);
  }

  .article-page .article-body {
    font-size: 1.15rem;
  }
}

@media (max-width: 56rem) {
  .post {
    padding-top: 1.75rem;
  }
}

/* Legal and About pages: a wider column and a fuller contact panel. */
@media (min-width: 56.01rem) {
  .legal-layout {
    grid-template-columns: minmax(14rem, 18rem) minmax(0, 52rem);
    gap: clamp(2rem, 4vw, 4rem);
  }

  .legal-layout .article-body {
    font-size: 1.1rem;
  }
}

.legal-layout .article-rail {
  padding: 1.5rem;
  border: 1px solid var(--border);
  border-top: 2px solid var(--accent);
  border-radius: var(--radius);
}

.legal-layout .article-rail > p:not(.eyebrow) {
  margin: 0 0 0.75rem;
  color: var(--text);
  font-size: 1.05rem;
  font-weight: 600;
}

.legal-layout .article-rail > a {
  display: block;
  padding-block: 0.45rem;
  overflow-wrap: anywhere;
}