/* RightsLawFirm - refined palette: midnight navy · aged mahogany · cool ivory */
:root {
  /* The 3 colors */
  --blue:  #0A1A30;          /* deeper midnight navy (primary) */
  --wood:  #3D1F12;          /* aged mahogany with red undertone (accent) */
  --ivory: #F4F4F2;          /* cool off-white surface */

  /* Surfaces */
  --bg: #FFFFFF;
  --paper: #FFFFFF;
  --paper-2: #F4F4F2;

  /* Type - dark brown ink instead of black, sepia-on-paper feel */
  --ink: #1F1108;
  --ink-2: #2E1B0F;
  --muted: #7A6856;

  /* Lines - subtle warm grey, sits next to the brown ink without going cream */
  --hairline: #E2DDD7;
  --hairline-strong: #BFB6AB;

  /* Aliases the codebase already uses */
  --accent: var(--blue);
  --accent-2: var(--wood);
  --accent-soft: #ECEBE7;

  --display: "Inter", -apple-system, system-ui, "Segoe UI", sans-serif;
  --sans: "Inter", -apple-system, system-ui, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", "SF Mono", ui-monospace, monospace;
}

/* legacy alias - many components still reference --serif via .serif class */
:root { --serif: var(--display); }

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }
html, body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "ss01", "kern";
}
/* Account for the fixed 80px nav when scrolling to anchors */
.practice-module { scroll-margin-top: 96px; }

/* --- Home backdrop ---
   When on the home page, overlay a soft architectural photograph with a
   cool white wash so the page stays bright and neutral rather than warm. */
body.home-active {
  background-color: var(--bg);
  background-image:
    linear-gradient(180deg, rgba(255,255,255,0.82) 0%, rgba(255,255,255,0.66) 40%, rgba(255,255,255,0.88) 100%),
    url("https://images.unsplash.com/photo-1486325212027-8081e485255e?w=2200&q=80&auto=format&fit=crop");
  background-size: cover, cover;
  background-position: center, center;
  background-attachment: fixed, fixed;
  background-repeat: no-repeat, no-repeat;
  background-blend-mode: normal, lighten;
}

body {
  min-height: 100vh;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: 0; }
input, textarea, select { font: inherit; color: inherit; }

/* --- Type --- */
.serif {
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: -0.022em;
}
.mono  { font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; }
.eyebrow {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-2);
  font-weight: 500;
}
.eyebrow::before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 1.5px;
  background: var(--accent-2);
  vertical-align: middle;
  margin-right: 10px;
  margin-bottom: 2px;
}

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: -0.028em;
  line-height: 1.04;
  color: var(--accent);
}
h1 { font-size: clamp(48px, 7.4vw, 112px); }
h2 { font-size: clamp(36px, 4.8vw, 72px); }
h3 { font-size: clamp(22px, 2.2vw, 32px); }

/* Accent words inside headlines */
h1 .accent-word, h2 .accent-word, h3 .accent-word {
  background-image: none;
  padding-bottom: 2px;
}

p { color: var(--ink-2); }

/* --- Shell --- */
.app {
  position: relative;
  min-height: 100vh;
}

.container {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 48px;
}
@media (max-width: 720px) { .container { padding: 0 24px; } }

.hairline { height: 1px; background: var(--hairline); width: 100%; }
.hairline-v { width: 1px; background: var(--hairline); }

/* --- Nav --- */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 110;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background .25s ease, border-color .25s ease, box-shadow .25s ease, backdrop-filter .25s ease;
}
.nav.scrolled {
  background: #FFFFFF;
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom-color: var(--hairline);
  box-shadow: 0 4px 18px rgba(44,30,20,0.06);
}
.nav-link.active { color: var(--accent-2); background: transparent; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 48px;
  max-width: 1440px;
  margin: 0 auto;
}
@media (max-width: 720px) { .nav-inner { padding: 14px 24px; } }

.logo {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
}
.logo-mark {
  font-family: var(--display);
  font-size: 19px;
  letter-spacing: -0.02em;
  font-weight: 600;
}
.logo-mark em { color: var(--accent-2); font-weight: 600; }

/* Footer - light beige version */
.footer { background: var(--paper); color: var(--ink-2); border-top: 1px solid var(--hairline); }
.footer h4 { color: var(--blue); }
.footer a { color: var(--ink-2); }
.footer a:hover { color: var(--blue); }
.footer .hairline, .footer-bottom { border-color: var(--hairline); }
.footer-bottom { color: var(--muted); }
.footer p { color: var(--muted); }
.logo-tag { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); }

.nav-links { display: flex; gap: 4px; align-items: center; }
.nav-link {
  position: relative;
  padding: 8px 14px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink-2);
  border-radius: 999px;
  transition: color .2s, background .2s;
}
.nav-link:hover { color: var(--ink); }
.nav-link.active {
  color: var(--accent-2);
  background: transparent;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}
.nav-cta {
  margin-left: 8px;
  padding: 9px 16px;
  font-size: 13px;
  background: var(--accent);
  color: #FFFFFF;
  border: 1px solid var(--accent);
  border-radius: 999px;
  transition: background .2s, color .2s, border-color .2s;
}
.nav-cta:hover { background: var(--ink); border-color: var(--ink); }

/* --- Page transitions --- */
.page {
  animation: pageIn .55s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes pageIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* --- Buttons --- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  border: 1px solid transparent;
  transition: transform .2s, background .2s, color .2s, border-color .2s;
}
.btn-primary { background: var(--accent); color: #FFFFFF; }
.btn-primary:hover { background: var(--ink); color: #FFFFFF; }
.btn-ghost { border-color: var(--accent); color: var(--accent); }
.btn-ghost:hover { border-color: var(--accent); background: var(--accent); color: #FFFFFF; }
.btn .arrow { transition: transform .25s; }
.btn:hover .arrow { transform: translateX(4px); }

/* LinkedIn pill */
.li-link:hover {
  background: #0A66C2 !important;
  color: #FFFFFF !important;
  border-color: #0A66C2 !important;
}

/* WhatsApp pill */
.wa-link:hover {
  background: #25D366 !important;
  color: #FFFFFF !important;
  border-color: #25D366 !important;
}

/* --- Form inputs (used on Contact page) --- */
.field-input,
.field-textarea {
  width: 100%;
  padding: 14px 16px;
  background: #FFFFFF;
  border: 1px solid var(--hairline-strong);
  border-radius: 6px;
  font-size: 15px;
  font-family: var(--sans);
  color: var(--ink);
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.field-textarea { resize: vertical; min-height: 140px; line-height: 1.55; }
.field-input::placeholder,
.field-textarea::placeholder { color: var(--muted); }
.field-input:hover,
.field-textarea:hover { border-color: var(--accent-2); }
.field-input:focus,
.field-textarea:focus {
  outline: none;
  border-color: var(--ink);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.field-input.error,
.field-textarea.error { border-color: #A0392B; }
.field-label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 8px;
  letter-spacing: -0.005em;
}
.field-error {
  font-size: 12px;
  color: #A0392B;
  margin-top: 6px;
}

/* --- Reveal on scroll --- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .8s ease, transform .8s ease; }
.reveal.in { opacity: 1; transform: none; }

/* --- Footer --- */
.footer {
  margin-top: 120px;
  padding: 0 0 40px;
  border-top: 1px solid var(--hairline);
}
.footer-map-wrap {
  position: relative;
  flex-shrink: 0;
  width: 360px;
  height: 360px;
  border: 1px solid var(--hairline-strong);
  overflow: hidden;
}
.footer-map {
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
  filter: grayscale(0.35) contrast(0.95);
}
.footer-map-cap {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: rgba(255,255,255,0.92);
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.footer-map-cap a:hover { color: var(--accent-2); }
.footer-flex {
  display: flex;
  gap: 64px;
  align-items: flex-start;
  flex-wrap: wrap;
}
.footer-flex > .footer-grid { flex: 1; min-width: 320px; }
.footer-inner { padding-top: 80px; }
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px;
}
@media (max-width: 1100px) { .footer-map-wrap { width: 100%; height: 280px; } }
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
.footer h4 { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent-2); margin-bottom: 16px; font-weight: 500; }
.footer ul { list-style: none; display: grid; gap: 8px; }
.footer a { font-size: 14px; cursor: pointer; }
.footer-bottom {
  display: flex;
  justify-content: space-between;
  margin-top: 56px;
  padding-top: 32px;
  border-top: 1px solid rgba(184,140,90,0.25);
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase;
}

/* Footer accordion sections - desktop renders title + content always, mobile collapses. */
.footer-section { display: block; }
.footer-section-toggle {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-2);
  font-weight: 500;
  margin-bottom: 16px;
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  padding: 0;
  cursor: default;
}
.footer-section-toggle > .footer-chev { display: none; }
.footer-section-body { display: block; }

@media (max-width: 768px) {
  .footer-section { border-bottom: 1px solid var(--hairline); }
  .footer-section:first-of-type { margin-top: 8px; border-top: 1px solid var(--hairline); }
  .footer-section-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 22px 0;
    margin-bottom: 0;
    cursor: pointer;
  }
  .footer-section-toggle > .footer-chev {
    display: inline-block;
    font-size: 14px;
    color: var(--accent-2);
    transition: transform .25s;
  }
  .footer-section.open .footer-section-toggle > .footer-chev { transform: rotate(180deg); }
  .footer-section-body {
    display: none;
    padding: 0 0 20px;
  }
  .footer-section.open .footer-section-body {
    display: block;
    animation: slideDown .25s ease both;
  }
  .footer-inner { padding-top: 96px; }
  .footer-tagline { margin-top: 32px; }
  .footer-bottom { margin-top: 56px; padding-top: 32px; }
}

/* --- Anonymous profile placeholder (used where lawyer portraits used to be) --- */
.anon-portrait {
  background-color: var(--paper-2);
  background-image:
    radial-gradient(circle at 50% 38%, var(--paper-2) 0 17%, transparent 17.5%),                /* head highlight (cutout) */
    url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 250' preserveAspectRatio='xMidYMax meet'%3E%3Cg fill='%23C8B89E'%3E%3Ccircle cx='100' cy='95' r='38'/%3E%3Cpath d='M30 250 C 30 180, 60 150, 100 150 C 140 150, 170 180, 170 250 Z'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat, no-repeat;
  background-position: center, center bottom;
  background-size: 100% 100%, 78% 100%;
}
.anon-portrait::after {
  /* subtle hairline frame so the placeholder reads as a deliberate component, not missing image */
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  box-shadow: inset 0 0 0 1px var(--hairline);
}

/* --- Placeholder image --- */
.ph {
  background:
    repeating-linear-gradient(135deg,
      transparent 0 11px,
      color-mix(in oklab, var(--hairline-strong) 50%, transparent) 11px 12px);
  background-color: var(--paper-2);
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  padding: 12px;
  position: relative;
  overflow: hidden;
}
.ph-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--paper);
  padding: 4px 8px;
  border: 1px solid var(--hairline);
}

/* --- Hero sizing --- */
/* Section uses marginTop: -80px to bleed under the fixed nav. We pad the
   inner container with the same 80px and size both to full viewport so the
   meta band sits exactly at the fold. Use 100svh (small viewport height)
   so the container does NOT grow when the iOS URL bar collapses - that
   growth was re-running background-size: cover and reading as a zoom-in
   animation on scroll. */
.hero-image {
  min-height: calc(100vh + 80px);
  min-height: calc(100svh + 80px);
}
.hero-inner {
  min-height: calc(100vh + 80px);
  min-height: calc(100svh + 80px);
  padding-top: 96px;
  padding-bottom: 40px;
}
@media (max-width: 720px) {
  .hero-inner { padding-top: 88px; padding-bottom: 32px; }
}

/* --- Hero - letterhead-style law firm layout --- */
.hero-letterhead {
  display: flex;
  align-items: center;
  gap: 18px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.hero-letterhead-mark {
  font-family: var(--display);
  font-size: 12.5px;
  letter-spacing: 0.06em;
  font-weight: 700;
  color: var(--accent);
  text-transform: none;
  padding: 4px 10px;
  border: 1px solid var(--accent);
  border-radius: 2px;
  line-height: 1;
}
.hero-letterhead-sep {
  flex: 0 0 56px;
  height: 1px;
  background: var(--accent-2);
}
.hero-letterhead-meta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink-2);
  font-weight: 500;
}
.hero-letterhead-dot {
  color: var(--hairline-strong);
  font-weight: 400;
  font-family: var(--display);
}

.hero-body {
  max-width: 820px;
  margin: 56px 0;
}
.hero-title {
  font-size: clamp(40px, 6.6vw, 96px);
  font-weight: 600;
  letter-spacing: -0.028em;
  line-height: 1.04;
  margin: 0;
}
.hero-lede {
  margin-top: 28px;
  font-size: clamp(15.5px, 1.25vw, 18.5px);
  line-height: 1.6;
  color: var(--ink-2);
  max-width: 620px;
  font-weight: 400;
}
.hero-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 36px;
}

.hero-footer {
  display: flex;
  align-items: center;
  gap: 20px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  padding-top: 24px;
  border-top: 1px solid var(--hairline);
}
.hero-footer-rule { display: none; }
.hero-footer-meta {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.hero-footer-dot { color: var(--hairline-strong); }

@media (max-width: 900px) {
  .hero-body { margin: 40px 0 32px; max-width: 100%; }
  .hero-lede { font-size: 15px; line-height: 1.6; margin-top: 22px; }
  .hero-actions { margin-top: 28px; }
}
@media (max-width: 720px) {
  .hero-letterhead {
    flex-wrap: wrap;
    gap: 12px;
    font-size: 9.5px;
    letter-spacing: 0.18em;
  }
  .hero-letterhead-sep { display: none; }
  .hero-letterhead-meta { flex-wrap: wrap; gap: 8px; }
  .hero-footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    font-size: 9.5px;
    padding-top: 20px;
  }
}

/* On mobile, fixed background-attachment is unreliable (iOS especially);
   swap home backdrop to scroll so the photo doesn't flicker or vanish. */
@media (max-width: 900px) {
  body.home-active { background-attachment: scroll, scroll; }
}

/* --- Responsive --- */
@media (max-width: 900px) {
  .nav-links { display: none; }
  .footer-flex { flex-direction: column; }
  .footer-map-wrap { width: 100%; height: 280px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  h1 { font-size: clamp(38px, 9vw, 64px); }
  h2 { font-size: clamp(30px, 6vw, 48px); }
  .container { padding: 0 24px; }
  .hero-bottom, .hero-split, .about-grid, .form-row, .contact-grid, .principles, .service-body, .dont-do, .map-meta, .meta-band {
    grid-template-columns: 1fr !important;
  }
  /* team-grid: 3 → 2 cols on tablet, then 1 col on phone (see 600px) */
  .team-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 24px !important; }
  .meta-band > div { border-left: none !important; border-top: 1px solid var(--hairline); }
  .meta-band > div:first-child { border-top: none; }
}
@media (max-width: 600px) {
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .footer-bottom { flex-direction: column; gap: 8px; }
  h1 { font-size: clamp(34px, 11vw, 56px); }
  .nav-inner { padding: 12px 20px; }
  .logo-tag { display: none; }
  .team-grid { grid-template-columns: 1fr !important; gap: 28px !important; }
}

/* --- Burger button (mobile) --- */
.burger {
  display: none;
  width: 44px;
  height: 44px;
  position: relative;
  border-radius: 8px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  z-index: 60;
  transition: background .2s;
}
.burger:hover { background: var(--paper-2); }
.burger span {
  display: block;
  width: 22px;
  height: 1.75px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform .3s cubic-bezier(.2,.7,.2,1), opacity .2s, background .2s;
  transform-origin: center;
}
.burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger.open span:nth-child(2) { opacity: 0; transform: scaleX(0.2); }
.burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@media (max-width: 900px) {
  .burger { display: inline-flex; }
}

/* --- Mobile menu overlay --- */
.mobile-menu {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  background: #FFFFFF;
  z-index: 100;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-8px);
  transition: opacity .3s ease, transform .3s cubic-bezier(.2,.7,.2,1);
  display: none;
  overscroll-behavior: contain;
  touch-action: none;
}
.mobile-menu-close {
  position: absolute;
  top: 18px;
  right: 20px;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--hairline-strong);
  z-index: 2;
  cursor: pointer;
  transition: background .2s, color .2s, border-color .2s, transform .2s;
}
.mobile-menu-close:hover {
  background: var(--ink);
  color: #FFFFFF;
  border-color: var(--ink);
  transform: rotate(90deg);
}
.mobile-menu.open { opacity: 1; pointer-events: auto; transform: none; }
@media (max-width: 900px) {
  .mobile-menu { display: block; }
}
.mobile-menu-inner {
  padding: 100px 32px 56px;
  max-width: 1440px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  gap: 4px;
  height: 100%;
  overflow: hidden;
}
.mobile-menu-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 16px 4px;
  font-family: var(--display);
  font-size: clamp(22px, 5.6vw, 30px);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--accent);
  text-align: left;
  border-bottom: 1px solid var(--hairline);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .4s ease, transform .4s ease, color .2s, padding-left .25s;
}
.mobile-menu.open .mobile-menu-link { opacity: 1; transform: none; }
.mobile-menu-link.active { color: var(--accent-2); }
.mobile-menu-link:hover { color: var(--accent-2); padding-left: 12px; }
.mobile-menu-num { display: none; }
.mobile-menu-arrow {
  font-size: 16px;
  color: var(--muted);
  transition: transform .25s, color .2s;
}
.mobile-menu-link:hover .mobile-menu-arrow { transform: translateX(6px); color: var(--accent-2); }
.mobile-menu-cta {
  margin-top: 32px;
  justify-content: center;
  padding: 18px 24px;
  font-size: 16px;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .4s ease, transform .4s ease, background .2s;
}
.mobile-menu.open .mobile-menu-cta { opacity: 1; transform: none; }

/* --- Horizontal-scroll defense (mobile) --- */
html { overflow-x: hidden; max-width: 100%; }
body { max-width: 100vw; }
img, iframe, video, svg { max-width: 100%; }
@media (max-width: 720px) {
  /* Anything that explicitly forces a wider min via large minHeight + fixed bg
     still respects container padding; ensure no child blows past viewport */
  .container > * { max-width: 100%; }
}
.density-compact .container { max-width: 1280px; }
.density-compact h1 { font-size: clamp(44px, 6.4vw, 92px); }
.density-compact .footer { margin-top: 80px; }
.density-spacious h1 { font-size: clamp(56px, 8.6vw, 132px); }
/* density variants (tweak) */

/* --- Consistent page title (matches Contact "Tell us about your file.") --- */
.page-title {
  font-size: clamp(40px, 5.6vw, 88px) !important;
  line-height: 1.06;
  letter-spacing: -0.024em;
  font-weight: 600;
  max-width: 14em;
}
@media (max-width: 720px) {
  .page-title { font-size: clamp(32px, 9vw, 56px) !important; }
}

/* --- About page big title - one line on desktop, wraps on small screens --- */
.about-headline {
  max-width: none;
  font-size: clamp(40px, 5.4vw, 88px);
  line-height: 1.05;
}
@media (max-width: 720px) {
  .about-headline { font-size: clamp(32px, 9vw, 56px); }
}

/* Timeline rows collapse on tablet/mobile (was only ≤720) */
@media (max-width: 900px) {
  .timeline-row {
    grid-template-columns: 120px 1fr !important;
    grid-template-areas: "year title" "year body" !important;
    gap: 12px 24px !important;
  }
  .timeline-row > :nth-child(1) { grid-area: year; }
  .timeline-row > :nth-child(2) { grid-area: title; }
  .timeline-row > :nth-child(3) { grid-area: body; }
}
@media (max-width: 720px) {
  .timeline-row {
    grid-template-columns: 1fr !important;
    grid-template-areas: none !important;
    gap: 8px !important;
  }
}

/* --- Services page accordion on mobile --- */
@media (max-width: 720px) {
  /* Pull the title to the left edge: drop the 100px number column,
     keep title + plus button only. */
  .service-trigger {
    grid-template-columns: 1fr 44px !important;
    gap: 16px !important;
    padding: 24px 0 !important;
  }
  .service-trigger > .mono { display: none; }
  .service-trigger > span:last-child {
    width: 32px !important;
    height: 32px !important;
  }
  /* Drop the empty 100px placeholder so the summary + list sit flush left. */
  .service-spacer { display: none; }
  .service-body {
    gap: 24px !important;
    padding: 0 0 40px !important;
  }
}

/* --- Services page: mobile read-more + sub-accordion --- */
/* Desktop defaults - mobile widgets hidden, what-we-do always shown */
.service-summary-mobile,
.service-what-trigger { display: none; }
.service-what-list { display: block; }
.service-what-list > ul { margin-top: 0 !important; }
.service-what::before {
  /* Desktop: render "What we do" eyebrow inline above the list */
  content: "What we do";
  display: block;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-2);
  font-weight: 500;
  margin-bottom: 16px;
}

@media (max-width: 768px) {
  .service-summary-full { display: none; }
  .service-summary-mobile { display: block; }
  .service-readmore {
    margin-top: 10px;
    padding: 0;
    background: none;
    border: 0;
    font-size: 13px;
    font-weight: 500;
    color: var(--accent-2);
    letter-spacing: 0.02em;
    cursor: pointer;
  }
  .service-readmore:hover { color: var(--ink); }
  .service-cta { width: 100%; justify-content: center; }
  /* Convert "What we do" into a collapsible sub-accordion */
  .service-what::before { content: none; }
  .service-what {
    border-top: 1px solid var(--hairline);
    padding-top: 4px;
  }
  .service-what-trigger {
    display: flex !important;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    padding: 14px 0;
    background: none;
    border: 0;
    text-align: left;
    cursor: pointer;
  }
  .service-what-chev {
    font-size: 14px;
    color: var(--accent-2);
    transition: transform .25s;
  }
  .service-what-chev.open { transform: rotate(180deg); }
  .service-what-list {
    display: none;
    overflow: hidden;
  }
  .service-what-list.open {
    display: block;
    animation: slideDown .25s ease both;
  }
  @keyframes slideDown {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
  }
}
/* Bio overlay open/close animations - fade-only scrim (no translate) so the
   modal stays anchored to the viewport center on every open. */
@keyframes bioScrimFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes bioPop {
  from { opacity: 0; transform: scale(0.96); }
  to   { opacity: 1; transform: scale(1); }
}

.bio-text-mobile,
.bio-meta-mobile { display: none; }

@media (max-width: 768px) {
  .bio-scrim {
    padding: 0 !important;
    align-items: stretch !important;
    background: #FFFFFF !important;
    backdrop-filter: none !important;
    z-index: 110 !important;
  }
  /* Hide the fixed nav while the bio overlay is open so the burger and the
     close (X) button don't overlap in the top-right corner. */
  body.bio-open .nav { display: none !important; }
  .bio-overlay {
    grid-template-columns: 1fr !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    max-height: none !important;
    border-radius: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
    animation: fadeUp .3s ease both;
  }
  @keyframes fadeUp {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
  }
  /* Hide portrait - vertical space is precious on phone. */
  .bio-portrait { display: none !important; }
  .bio-body {
    padding: 72px 20px 40px !important;
  }
  .bio-close {
    position: fixed !important;
    width: 44px !important;
    height: 44px !important;
    top: 16px !important;
    right: 16px !important;
    font-size: 0 !important;
    border-radius: 999px !important;
    border: 1px solid var(--hairline-strong) !important;
    background: #FFFFFF !important;
    color: var(--ink) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 2 !important;
    transition: background .2s, color .2s, border-color .2s, transform .2s !important;
  }
  .bio-close::before {
    content: "";
    width: 18px;
    height: 18px;
    background:
      linear-gradient(currentColor, currentColor) center / 18px 1.8px no-repeat,
      linear-gradient(currentColor, currentColor) center / 1.8px 18px no-repeat;
    transform: rotate(45deg);
  }
  .bio-close:hover {
    background: var(--ink) !important;
    color: #FFFFFF !important;
    border-color: var(--ink) !important;
    transform: rotate(90deg) !important;
  }
  .bio-name {
    font-size: clamp(28px, 8vw, 36px) !important;
    margin-top: 12px !important;
  }
  .bio-role {
    font-size: 16px !important;
    margin-bottom: 18px !important;
  }
  /* Show the full bio inline on mobile (no read-more truncation). */
  .bio-text-full {
    font-size: 15px !important;
    line-height: 1.65 !important;
    margin-bottom: 24px !important;
  }
  /* Stack the 3-col meta into compact key/value rows on mobile. */
  .bio-meta-desktop {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
    border-top: 1px solid var(--hairline);
  }
  .bio-meta-desktop > div {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--hairline);
    align-items: baseline;
  }
  .bio-meta-desktop > div > .eyebrow {
    margin: 0 !important;
  }
  .bio-meta-desktop > div > .eyebrow::before {
    display: none;
  }
  .bio-meta-desktop > div > div:not(.eyebrow) {
    font-size: 14px;
    color: var(--ink-2);
  }
}

/* --- Practice carousel (minimal, home) --- */
/* Home sections share the same vertical rhythm: 80px above and below
   content, so any two consecutive sections have an identical 160px gap. */
.practice-stage-section {
  padding: 80px 0;
  overflow: hidden;
}
.home-section {
  padding: 80px 0;
}
.practice-stage-section h2,
.home-section h2 {
  font-size: clamp(28px, 3.8vw, 56px);
}
@media (max-width: 900px) {
  .home-section { padding: 56px 0 !important; }
  .practice-stage-section { padding: 56px 0; }
}
/* Partner preview portrait: stop the 5:6 portrait from filling the viewport
   when it stacks below the bio copy on phones. */
@media (max-width: 900px) {
  .hero-bottom > .anon-portrait { max-width: 320px; width: 100%; margin: 0 auto; }
}
@media (max-width: 720px) {
  .hero-bottom > .anon-portrait { max-width: 240px; }
}
.practice-carousel {
  position: relative;
  width: 100%;
  margin: 8px 0 0;
  height: clamp(260px, 50vh, 560px);
  overflow: hidden;
  background: var(--paper-2);
  border: 1px solid var(--hairline);
}
.practice-carousel-image {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity .9s cubic-bezier(.2,.7,.2,1);
}
.practice-carousel-image.is-active { opacity: 1; }
.practice-carousel-scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(20,14,8,0.55) 100%),
    linear-gradient(90deg, rgba(20,14,8,0.25) 0%, rgba(0,0,0,0) 35%);
  pointer-events: none;
}
.practice-carousel-progress { display: none; }
.practice-carousel-label {
  position: absolute;
  left: 28px;
  bottom: 26px;
  z-index: 3;
  color: #fff;
  display: flex;
  align-items: baseline;
  gap: 18px;
  max-width: 70%;
}
.practice-carousel-label-num {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0.85;
}
.practice-carousel-label-title {
  font-family: var(--serif);
  font-size: clamp(28px, 3.6vw, 44px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1;
  animation: carousel-rise .55s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes carousel-rise {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
.practice-carousel-nav {
  position: absolute;
  right: 24px;
  bottom: 26px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 4px;
}
.practice-carousel-dot {
  background: transparent;
  border: none;
  color: rgba(255,255,255,0.72);
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  padding: 8px 12px;
  cursor: pointer;
  transition: color .2s;
  position: relative;
}
.practice-carousel-dot::after {
  content: "";
  display: block;
  margin: 6px auto 0;
  width: 18px;
  height: 1.5px;
  background: rgba(255,255,255,0.35);
  transition: background .2s, width .25s;
}
.practice-carousel-dot:hover { color: #fff; }
.practice-carousel-dot:hover::after { background: rgba(255,255,255,0.7); }
.practice-carousel-dot.is-active { color: #fff; }
.practice-carousel-dot.is-active::after { background: #fff; width: 28px; }

.practice-marquee {
  border-bottom: 1px solid var(--hairline);
  overflow-x: auto;
  overflow-y: hidden;
  background: var(--bg);
  padding: 16px 0;
  position: relative;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.practice-marquee::-webkit-scrollbar { display: none; }
/* Pause the auto-scroll while the user is actively dragging/scrolling it. */
.practice-marquee:active .practice-marquee-track,
.practice-marquee:focus-within .practice-marquee-track { animation-play-state: paused; }
.practice-marquee::before,
.practice-marquee::after {
  content: "";
  position: absolute; top: 0; bottom: 0;
  width: 80px;
  pointer-events: none;
  z-index: 2;
}
.practice-marquee::before {
  left: 0;
  background: linear-gradient(90deg, var(--bg) 0%, rgba(0,0,0,0) 100%);
}
.practice-marquee::after {
  right: 0;
  background: linear-gradient(270deg, var(--bg) 0%, rgba(0,0,0,0) 100%);
}
.practice-marquee-track {
  display: flex;
  gap: 0;
  white-space: nowrap;
  width: max-content;
  animation: marquee-scroll 70s linear infinite;
}
.practice-marquee:hover .practice-marquee-track { animation-play-state: paused; }
.practice-marquee-item {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 0 28px;
  font-size: 17px;
}
.practice-marquee-item .mono { color: var(--accent-2); }
.practice-marquee-item .serif {
  color: var(--ink-2);
  font-weight: 500;
  letter-spacing: -0.012em;
  font-family: var(--serif);
}
.practice-marquee-dot {
  display: inline-block;
  width: 5px; height: 5px;
  background: var(--hairline-strong);
  border-radius: 50%;
}
@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (max-width: 900px) {
  .practice-carousel { height: clamp(220px, 42vh, 420px); }
  .practice-carousel-label { left: 20px; bottom: 20px; gap: 10px; flex-direction: column; align-items: flex-start; }
  .practice-carousel-nav { right: 16px; bottom: 16px; }
  .practice-carousel-dot { padding: 6px 8px; font-size: 10px; }
  .practice-stage-section { padding: 56px 0; }
}

/* --- Featured perspective card (home) --- */
.perspective-card {
  display: block;
  background: var(--paper);
  border: 1px solid var(--hairline);
  overflow: hidden;
  transition: box-shadow .35s cubic-bezier(.2,.7,.2,1), border-color .25s, transform .35s;
}
.perspective-card:hover {
  border-color: var(--accent-2);
  box-shadow: 0 22px 56px rgba(31, 17, 8, 0.10);
  transform: translateY(-3px);
}
.perspective-card-link {
  display: grid;
  grid-template-columns: 5fr 7fr;
  align-items: stretch;
  color: inherit;
}
.perspective-card-image {
  background-size: cover;
  background-position: center;
  min-height: 380px;
  transition: transform .8s cubic-bezier(.2,.7,.2,1);
}
.perspective-card:hover .perspective-card-image {
  transform: scale(1.04);
}
.perspective-card-body {
  padding: 56px 56px 56px 64px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 18px;
}
.perspective-card-title {
  font-size: clamp(24px, 2.4vw, 36px);
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -0.024em;
  color: var(--accent);
  margin: 4px 0 4px;
  max-width: 18em;
}
.perspective-card-lede {
  font-size: 16.5px;
  line-height: 1.65;
  color: var(--ink-2);
  margin: 0;
  max-width: 36em;
}
.perspective-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--accent-2);
  margin-top: 6px;
}
.perspective-card-cta .arrow { transition: transform .25s; }
.perspective-card:hover .perspective-card-cta .arrow { transform: translateX(6px); }
@media (max-width: 900px) {
  .perspective-card-link { grid-template-columns: 1fr; }
  .perspective-card-image { min-height: 260px; }
  .perspective-card-body { padding: 32px 28px 36px; }
}

/* --- Practice modules - full-width image+text bands --- */
.practice-modules-section {
  padding: 80px 0 0;
}
.practice-modules-head { /* uses .container */ }
.practice-module {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  border-top: 1px solid var(--hairline);
  background: var(--paper);
}
.practice-module:last-child { border-bottom: 1px solid var(--hairline); }
.practice-module-image {
  position: relative;
  min-height: 520px;
  background-size: cover;
  background-position: center;
}
.practice-module-num {
  position: absolute;
  top: 28px;
  left: 28px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #FFFFFF;
  background: rgba(15, 37, 69, 0.88);
  padding: 6px 10px;
  border-radius: 2px;
  font-weight: 500;
}
.practice-module-body {
  display: flex;
  align-items: center;
  padding: 72px 56px 72px 64px;
}
.practice-module-reverse .practice-module-image { order: 2; }
.practice-module-reverse .practice-module-body  { order: 1; padding: 72px 64px 72px 56px; justify-content: flex-end; }
.practice-module-inner {
  max-width: 540px;
  width: 100%;
}
.practice-module-title {
  font-family: var(--display);
  font-size: clamp(40px, 4.4vw, 64px);
  font-weight: 600;
  letter-spacing: -0.028em;
  line-height: 1;
  color: var(--accent);
  margin: 16px 0 22px;
}
.practice-module-summary {
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-2);
  margin: 0 0 32px;
  max-width: 30em;
}
.practice-module-services {
  list-style: none;
  display: grid;
  gap: 0;
  margin: 0 0 36px;
  padding: 0;
  border-top: 1px solid var(--hairline);
}
.practice-module-services li {
  padding: 12px 0;
  border-bottom: 1px solid var(--hairline);
  font-size: 14.5px;
  color: var(--ink-2);
  display: flex;
  align-items: baseline;
  gap: 14px;
}
.practice-module-services li::before {
  content: "·";
  color: var(--accent-2);
  font-weight: 700;
  font-family: var(--display);
  font-size: 22px;
  line-height: 0.6;
}
.practice-module-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--accent);
  padding: 0 0 4px;
  border-bottom: 1px solid var(--accent);
  transition: color .2s, border-color .2s, padding .2s;
}
.practice-module-cta:hover { color: var(--accent-2); border-color: var(--accent-2); }
.practice-module-cta .arrow { transition: transform .25s; }
.practice-module-cta:hover .arrow { transform: translateX(6px); }
@media (max-width: 900px) {
  .practice-module { grid-template-columns: 1fr; }
  .practice-module-image { min-height: 320px; order: 1 !important; }
  .practice-module-body,
  .practice-module-reverse .practice-module-body { padding: 44px 28px 56px; order: 2 !important; justify-content: flex-start; }
}

/* --- How we work - inverted dark navy section --- */
.approach-section {
  background: var(--accent);
  color: #FFFFFF;
  padding: 120px 0;
  margin-top: 96px;
}
.approach-section .approach-headline,
.approach-section .approach-headline .accent-word { color: #FFFFFF; }
.approach-section .approach-headline .accent-word {
  background-image: none;
}
.approach-eyebrow { color: rgba(255,255,255,0.72) !important; }
.approach-eyebrow::before { background: rgba(255,255,255,0.72) !important; }
.approach-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
  border-top: 1px solid rgba(255,255,255,0.16);
  padding-top: 48px;
}
.approach-item {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.approach-num {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.22em;
  color: rgba(255,255,255,0.6);
  font-weight: 500;
}
.approach-title {
  font-family: var(--display);
  font-size: clamp(20px, 1.7vw, 26px);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.022em;
  color: #FFFFFF;
  margin: 0;
}
.approach-body {
  font-size: 15px;
  line-height: 1.65;
  color: rgba(255,255,255,0.8);
  margin: 0;
}
@media (max-width: 1100px) { .approach-grid { grid-template-columns: repeat(2, 1fr); gap: 40px 32px; } }
@media (max-width: 600px)  {
  .approach-section { padding: 72px 0; }
  .approach-grid { grid-template-columns: 1fr; gap: 32px; }
}

/* --- Closing CTA - inverted dark wood banner before footer --- */
.closing-cta {
  background: var(--accent-2);
  color: #FFFFFF;
  padding: 104px 0;
  margin-top: 0;
}
.app:has(.closing-cta) .footer { margin-top: 0; }
.closing-cta-inner {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: 64px;
  align-items: end;
}
.closing-cta-eyebrow { color: rgba(255, 240, 220, 0.7) !important; }
.closing-cta-eyebrow::before { background: rgba(255, 240, 220, 0.7) !important; }
.closing-cta-title {
  color: #FFFFFF;
  font-size: clamp(32px, 4.2vw, 60px) !important;
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -0.028em;
  margin: 16px 0 20px;
}
.closing-cta-title .accent-word {
  background-image: none;
}
.closing-cta-lede {
  font-size: 17px;
  line-height: 1.6;
  color: rgba(255, 240, 220, 0.82);
  max-width: 32em;
  margin: 0;
}
.closing-cta-action {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  padding-bottom: 6px;
}
.closing-cta-btn {
  background: #FFFFFF !important;
  color: var(--accent-2) !important;
  border: 1px solid #FFFFFF !important;
}
.closing-cta-btn:hover {
  background: #FFFFFF !important;
  border-color: #FFFFFF !important;
  color: var(--accent) !important;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.22);
  transform: translateY(-1px);
}
.closing-cta-meta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 240, 220, 0.68);
}
.closing-cta-dot { color: rgba(255, 240, 220, 0.36); }
@media (max-width: 900px) {
  .closing-cta { padding: 72px 0; }
  .closing-cta-inner { grid-template-columns: 1fr; gap: 32px; align-items: start; }
}

/* Closing CTA section-head pattern: eyebrow flush left, title centered,
   lede and button centered below (applies on every page). */
.closing-cta-inner {
  display: block !important;
}
.closing-cta-content { text-align: left; }
.closing-cta-title {
  text-align: center;
  margin-top: 18px;
}
.closing-cta-lede {
  margin: 20px auto 0 !important;
  text-align: center;
}
.closing-cta-action {
  margin-top: 32px;
  align-items: center;
}

/* --- Trinity panels - horizontal accordion (hovered card expands to full width) --- */
.trinity-section {
  width: 100%;
  margin: 64px 0 96px;
}
.trinity-grid {
  display: flex;
  width: 100%;
  height: clamp(440px, 64vh, 640px);
}
.trinity-card {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  color: #FFFFFF;
  background: var(--accent);
  cursor: pointer;
  border-right: 1px solid rgba(255,255,255,0.08);
  transition: flex-grow .55s cubic-bezier(.22,.8,.24,1),
              flex-basis .55s cubic-bezier(.22,.8,.24,1);
}
.trinity-card:last-child { border-right: none; }
.trinity-card-image {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform .7s cubic-bezier(.22,.8,.24,1);
}
.trinity-card-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(15, 37, 69, 0.32) 0%,
    rgba(15, 37, 69, 0.62) 55%,
    rgba(15, 37, 69, 0.90) 100%);
  transition: background .45s cubic-bezier(.22,.8,.24,1);
}
.trinity-card-content {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 48px 40px 44px;
  z-index: 2;
  min-width: 0;
  transition: opacity .4s cubic-bezier(.22,.8,.24,1),
              transform .5s cubic-bezier(.22,.8,.24,1);
}
.trinity-card-num {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.24em;
  color: rgba(255,255,255,0.72);
  margin-bottom: 14px;
  white-space: nowrap;
}
.trinity-card-word {
  font-family: var(--display);
  font-size: clamp(48px, 5.6vw, 92px);
  font-weight: 600;
  letter-spacing: -0.032em;
  line-height: 0.96;
  color: #FFFFFF;
  margin: 0;
  white-space: nowrap;
  transition: margin .45s cubic-bezier(.22,.8,.24,1);
}
.trinity-card-lede {
  font-size: 17px;
  line-height: 1.55;
  color: rgba(255,255,255,0.92);
  max-width: 34em;
  margin: 0;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transform: translateY(6px);
  transition: max-height .55s cubic-bezier(.22,.8,.24,1),
              opacity .35s cubic-bezier(.22,.8,.24,1),
              transform .45s cubic-bezier(.22,.8,.24,1);
}

/* When the grid is hovered, non-hovered cards collapse to zero width and fade out */
.trinity-grid:hover .trinity-card { flex-grow: 0; }
.trinity-grid:hover .trinity-card .trinity-card-content { opacity: 0; }

/* Opening (hover) uses slow, evenly-paced transitions so the expansion is
   visibly gradual from start to finish. Closing (un-hover) keeps the fast
   transitions defined on the base rules above so the cards snap back. */
.trinity-grid .trinity-card:hover {
  flex-grow: 100;
  transition: flex-grow 3s cubic-bezier(.45,.05,.55,.95),
              flex-basis 3s cubic-bezier(.45,.05,.55,.95);
}
.trinity-grid:hover .trinity-card {
  transition: flex-grow 3s cubic-bezier(.45,.05,.55,.95),
              flex-basis 3s cubic-bezier(.45,.05,.55,.95);
}
.trinity-grid .trinity-card:hover .trinity-card-image {
  transform: scale(1.03);
  transition: transform 3.2s cubic-bezier(.45,.05,.55,.95);
}
.trinity-grid .trinity-card:hover .trinity-card-overlay {
  background: linear-gradient(180deg,
    rgba(15, 37, 69, 0.18) 0%,
    rgba(15, 37, 69, 0.42) 55%,
    rgba(15, 37, 69, 0.84) 100%);
  transition: background 2s cubic-bezier(.45,.05,.55,.95);
}
.trinity-grid .trinity-card:hover .trinity-card-content {
  opacity: 1;
  transform: translateY(-6px);
  transition: opacity 1.6s cubic-bezier(.45,.05,.55,.95) .8s,
              transform 1.7s cubic-bezier(.45,.05,.55,.95) .8s;
}
.trinity-grid:hover .trinity-card .trinity-card-content {
  transition: opacity .8s cubic-bezier(.45,.05,.55,.95);
}
.trinity-grid .trinity-card:hover .trinity-card-word {
  margin-bottom: 20px;
  transition: margin 1.6s cubic-bezier(.45,.05,.55,.95) .8s;
}
.trinity-grid .trinity-card:hover .trinity-card-lede {
  max-height: 220px;
  opacity: 1;
  transform: none;
  transition: max-height .9s cubic-bezier(.45,.05,.55,.95) .4s,
              opacity .6s cubic-bezier(.45,.05,.55,.95) .55s,
              transform .7s cubic-bezier(.45,.05,.55,.95) .45s;
}

@media (max-width: 900px) {
  .trinity-grid {
    flex-direction: column;
    height: auto;
  }
  .trinity-card {
    flex: 1 1 auto !important;
    height: 58vw;
    min-height: 280px;
    border-right: none;
    border-bottom: 1px solid rgba(255,255,255,0.08);
  }
  .trinity-card:last-child { border-bottom: none; }
  .trinity-card-content {
    padding: 32px 24px 28px;
    opacity: 1 !important;
    transform: none !important;
  }
  .trinity-card-word {
    margin-bottom: 14px !important;
    white-space: normal;
  }
  .trinity-card-lede {
    max-height: 220px !important;
    opacity: 1 !important;
    transform: none !important;
    font-size: 14.5px;
  }
  /* Disable hover-accordion on touch */
  .trinity-grid:hover .trinity-card { flex-grow: 0 !important; }
  .trinity-grid .trinity-card:hover { flex-grow: 0 !important; }
}

/* --- Founder's Note (About) --- */
.founders-note {
  padding: 120px 0;
  background: var(--paper-2);
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}
.founders-note-grid {
  display: grid;
  grid-template-columns: 4fr 7fr;
  gap: 80px;
  align-items: start;
}
.founders-note-aside {
  position: sticky;
  top: 120px;
}
.founders-note-portrait { width: 100%; max-width: 320px; }
.founders-note-eyebrow {
  display: block;
  margin-top: 20px;
  line-height: 1.5;
}
.founders-note-title {
  font-size: clamp(36px, 4.4vw, 64px);
  font-weight: 600;
  letter-spacing: -0.028em;
  line-height: 1.04;
  color: var(--accent);
  margin: 0 0 36px;
}
.founders-note-text {
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 38em;
}
.founders-note-text p {
  font-size: 17px;
  line-height: 1.75;
  color: var(--ink-2);
  margin: 0;
}
.founders-note-text p:first-of-type {
  font-size: 19px;
  line-height: 1.65;
  color: var(--ink);
  font-weight: 500;
}
.founders-note-sig {
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--hairline-strong);
  max-width: 38em;
}
.founders-note-sig-name {
  font-size: 22px;
  font-weight: 600;
  color: var(--accent);
  letter-spacing: -0.012em;
}
.founders-note-sig-role {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 6px;
  font-weight: 500;
}
@media (max-width: 900px) {
  .founders-note { padding: 72px 0; }
  .founders-note-grid { grid-template-columns: 1fr; gap: 32px; }
  .founders-note-aside { position: relative; top: 0; }
  .founders-note-portrait { max-width: 220px; }
}

/* --- Sectors (Services) --- */
.sectors-section {
  padding: 120px 0 96px;
}
.sectors-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--hairline);
  border-left: 1px solid var(--hairline);
}
.sector-item {
  padding: 36px 32px 40px;
  border-bottom: 1px solid var(--hairline);
  border-right: 1px solid var(--hairline);
  background: var(--paper);
  transition: background .2s;
}
.sector-item:hover { background: var(--paper-2); }
.sector-num {
  display: block;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.22em;
  color: var(--accent-2);
  margin-bottom: 18px;
  font-weight: 500;
  text-transform: uppercase;
}
.sector-title {
  font-family: var(--display);
  font-size: clamp(20px, 1.7vw, 24px);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.022em;
  color: var(--accent);
  margin: 0 0 12px;
}
.sector-body {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink-2);
  margin: 0;
  max-width: 26em;
}
@media (max-width: 1100px) { .sectors-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) {
  .sectors-section { padding: 80px 0 64px; }
  .sectors-grid { grid-template-columns: 1fr; border-left: none; }
  .sector-item { border-right: none; }
}

/* --- Workflow / Engagement steps (Services) --- */
.workflow-section {
  padding: 0 0 56px;
}
.workflow-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--hairline);
}
.workflow-step {
  padding: 40px 32px 40px 0;
  border-right: 1px solid var(--hairline);
}
.workflow-step:first-child { padding-left: 0; }
.workflow-step:not(:first-child) { padding-left: 32px; }
.workflow-step:last-child { border-right: none; padding-right: 0; }
.workflow-num {
  display: block;
  font-family: var(--display);
  font-size: clamp(42px, 4.2vw, 60px);
  font-weight: 700;
  letter-spacing: -0.034em;
  color: var(--accent-2);
  margin-bottom: 18px;
  line-height: 1;
}
.workflow-title {
  font-family: var(--display);
  font-size: clamp(18px, 1.5vw, 22px);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.018em;
  color: var(--accent);
  margin: 0 0 10px;
}
.workflow-body {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink-2);
  margin: 0;
}
@media (max-width: 900px) {
  .workflow-steps { grid-template-columns: repeat(2, 1fr); }
  .workflow-step {
    padding: 32px 24px !important;
    border-right: 1px solid var(--hairline);
    border-bottom: 1px solid var(--hairline);
  }
  .workflow-step:nth-child(2n) { border-right: none; }
  .workflow-step:nth-last-child(-n+2) { border-bottom: none; }
}
@media (max-width: 600px) {
  .workflow-section { padding: 0 0 40px; }
  .workflow-steps { grid-template-columns: 1fr; }
  .workflow-step {
    border-right: none !important;
    border-bottom: 1px solid var(--hairline);
    padding: 28px 0 !important;
  }
  .workflow-step:last-child { border-bottom: none; }
}

/* --- Practice page: carousel band sitting under the header --- */
.practice-carousel-section {
  padding: 24px 0 80px;
  overflow: hidden;
}

/* --- Practice page hero with rotating carousel background, below the nav --- */
.practice-hero {
  position: relative;
  margin-top: 80px;
  height: clamp(520px, 72vh, 700px);
  overflow: hidden;
  background: var(--accent);
}
.practice-hero-image {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 1.4s ease;
}
.practice-hero-image.is-active { opacity: 1; }
.practice-hero-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(10, 26, 48, 0.50) 0%,
    rgba(10, 26, 48, 0.60) 50%,
    rgba(10, 26, 48, 0.86) 100%);
}
.practice-hero-content {
  position: relative;
  z-index: 2;
  color: #FFFFFF;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-bottom: 88px;
}
.practice-hero-eyebrow { color: rgba(255,255,255,0.78) !important; }
.practice-hero-eyebrow::before { background: rgba(255,255,255,0.78) !important; }
.practice-hero-title {
  color: #FFFFFF !important;
  margin-top: 22px !important;
}
.practice-hero-title .accent-word {
  background-image: none !important;
}
.practice-hero-lede {
  margin-top: 24px;
  font-size: clamp(16px, 1.25vw, 19px);
  line-height: 1.6;
  color: rgba(255,255,255,0.92);
  max-width: 640px;
}
.practice-hero-label {
  position: absolute;
  left: 48px; bottom: 32px;
  z-index: 2;
  color: #fff;
  display: flex;
  align-items: baseline;
  gap: 18px;
  max-width: 70%;
}
.practice-hero-label-num {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0.85;
}
.practice-hero-label-title {
  font-family: var(--display);
  font-size: clamp(24px, 3.2vw, 38px);
  font-weight: 600;
  letter-spacing: -0.022em;
  line-height: 1;
  animation: practice-hero-rise .55s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes practice-hero-rise {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
.practice-hero-nav {
  position: absolute;
  right: 48px; bottom: 32px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 4px;
}
.practice-hero-dot {
  background: transparent;
  border: none;
  color: rgba(255,255,255,0.72);
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.2em;
  padding: 8px 12px;
  cursor: pointer;
  transition: color .2s;
}
.practice-hero-dot::after {
  content: "";
  display: block;
  margin: 6px auto 0;
  width: 18px;
  height: 1.5px;
  background: rgba(255,255,255,0.4);
  transition: background .2s, width .25s;
}
.practice-hero-dot:hover { color: #fff; }
.practice-hero-dot:hover::after { background: rgba(255,255,255,0.7); }
.practice-hero-dot.is-active { color: #fff; }
.practice-hero-dot.is-active::after { background: #fff; width: 28px; }
@media (max-width: 900px) {
  .practice-hero { height: clamp(440px, 72vh, 600px); }
  .practice-hero-content { padding-top: 140px; padding-bottom: 96px; }
  .practice-hero-label { left: 24px; bottom: 24px; flex-direction: column; align-items: flex-start; gap: 6px; }
  .practice-hero-nav { right: 24px; bottom: 24px; }
  .practice-hero-dot { padding: 6px 8px; font-size: 10px; }
}

/* --- Practice cards grid --- */
.practice-cards-section {
  padding: 96px 0 112px;
}
.practice-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
.practice-card {
  background: var(--paper);
  border: 1px solid var(--hairline);
  overflow: hidden;
  scroll-margin-top: 100px;
  transition: transform .35s cubic-bezier(.2,.7,.2,1),
              box-shadow .35s,
              border-color .25s;
}
.practice-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 56px rgba(31, 17, 8, 0.10);
  border-color: var(--accent-2);
}
.practice-card-link { display: block; color: inherit; }
.practice-card-image {
  position: relative;
  aspect-ratio: 4/3;
  background-size: cover;
  background-position: center;
  overflow: hidden;
}
.practice-card-image::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,26,48,0.18) 0%, rgba(10,26,48,0.42) 100%);
  transition: background .35s;
}
.practice-card:hover .practice-card-image::after {
  background: linear-gradient(180deg, rgba(10,26,48,0.06) 0%, rgba(10,26,48,0.28) 100%);
}
.practice-card-num {
  position: absolute;
  top: 18px; left: 18px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #FFFFFF;
  background: rgba(10, 26, 48, 0.88);
  padding: 6px 10px;
  border-radius: 2px;
  z-index: 2;
}
.practice-card-body { padding: 32px 28px 32px; }
.practice-card-title {
  font-family: var(--display);
  font-size: clamp(28px, 2.4vw, 36px);
  font-weight: 600;
  letter-spacing: -0.024em;
  line-height: 1.05;
  color: var(--accent);
  margin: 0 0 14px;
}
.practice-card-summary {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-2);
  margin: 0 0 22px;
  max-width: 30em;
}
.practice-card-services {
  list-style: none;
  margin: 0 0 26px;
  padding: 0;
  border-top: 1px solid var(--hairline);
}
.practice-card-services li {
  padding: 9px 0;
  border-bottom: 1px solid var(--hairline);
  font-size: 13.5px;
  color: var(--ink-2);
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.practice-card-services li::before {
  content: "·";
  color: var(--accent-2);
  font-weight: 700;
  font-size: 18px;
  line-height: 0.6;
}
.practice-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--accent);
  border-bottom: 1px solid var(--accent);
  padding: 0 0 3px;
  transition: color .2s, border-color .2s;
}
.practice-card:hover .practice-card-cta {
  color: var(--accent-2);
  border-color: var(--accent-2);
}
.practice-card-cta .arrow { transition: transform .25s; }
.practice-card:hover .practice-card-cta .arrow { transform: translateX(6px); }
@media (max-width: 1100px) { .practice-cards-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px) {
  .practice-cards-section { padding: 72px 0 88px; }
  .practice-cards-grid { grid-template-columns: 1fr; gap: 24px; }
  .practice-card-body { padding: 26px 22px 28px; }
}

/* --- People page hero --- */
.people-hero {
  padding-top: 132px;
  padding-bottom: 56px;
}
.people-hero-lede {
  margin-top: 24px;
  font-size: clamp(16px, 1.25vw, 19px);
  line-height: 1.6;
  color: var(--ink-2);
  max-width: 640px;
}

/* --- Why us (home, legacy - kept in case it's still referenced) --- */
.why-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border-top: 1px solid var(--hairline);
  border-left: 1px solid var(--hairline);
}
.why-item {
  padding: 40px 40px 44px;
  border-right: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  background: transparent;
}
.why-num {
  color: var(--accent-2);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
  margin-bottom: 18px;
  display: block;
}
.why-title {
  font-family: var(--display);
  font-size: clamp(22px, 1.9vw, 28px);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.022em;
  color: var(--accent);
  margin: 0 0 14px;
}
.why-body {
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--ink-2);
  max-width: 32em;
  margin: 0;
}
@media (max-width: 900px) {
  .why-item { padding: 32px 28px 36px; }
}
@media (max-width: 720px) {
  .why-grid { grid-template-columns: 1fr; border-left: none; }
  .why-item {
    padding: 28px 0 32px;
    border-right: none;
  }
}

/* --- Services page - fixed 3-up grid (cards expand in place) --- */
.svc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  align-items: stretch;
}
@media (max-width: 1100px) { .svc-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px)  { .svc-grid { grid-template-columns: 1fr; } }

.svc-grid > * { display: block; }

.svc-card {
  position: relative;
  border: 1px solid var(--hairline);
  overflow: hidden;
  transition:
    transform .3s cubic-bezier(.2,.7,.2,1),
    box-shadow .3s,
    border-color .3s;
}
.svc-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 36px rgba(44,30,20,0.08);
  border-color: var(--accent-2);
}
.svc-card.is-open {
  border-color: var(--accent-2);
  box-shadow: 0 18px 44px rgba(44,30,20,0.10);
}

.svc-card-paper   { background: var(--paper); }
.svc-card-bg      { background: var(--bg); }
.svc-card-paper-2 { background: var(--paper-2); }

.svc-card-h-short  .svc-card-head,
.svc-card-h-medium .svc-card-head,
.svc-card-h-tall   .svc-card-head { padding: 40px 28px 32px; }

.svc-card-head {
  position: relative;
  display: block;
  width: 100%;
  background: transparent;
  border: none;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  color: inherit;
}

.svc-card-accent {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--accent-2);
}

.svc-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}
.svc-card-num { color: var(--accent-2); }
.svc-card-plus {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--hairline-strong);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  line-height: 1;
  color: var(--ink-2);
  background: transparent;
  transition:
    transform .4s cubic-bezier(.2,.7,.2,1),
    background .3s,
    color .3s,
    border-color .3s;
}
.svc-card.is-open .svc-card-plus {
  transform: rotate(135deg);
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

.svc-card-title {
  font-family: var(--display);
  font-size: clamp(34px, 3vw, 48px);
  line-height: 1;
  font-weight: 600;
  letter-spacing: -0.026em;
  color: var(--accent);
  margin: 0 0 14px;
}
.svc-card-summary {
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.5;
  color: var(--ink-2);
  margin: 0 0 22px;
}
.svc-card-cta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--hairline);
  padding-top: 16px;
  color: var(--ink-2);
}
.svc-card-cta-row .mono { color: var(--muted); transition: color .2s; }
.svc-card-cta-arr {
  display: inline-block;
  transition: transform .35s cubic-bezier(.2,.7,.2,1), color .2s;
  color: var(--accent-2);
  font-size: 16px;
}
.svc-card.is-open .svc-card-cta-arr { transform: rotate(180deg); }
.svc-card-head:hover .svc-card-cta-row .mono { color: var(--ink); }

.svc-card-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .55s cubic-bezier(.2,.7,.2,1);
}
.svc-card.is-open .svc-card-panel { grid-template-rows: 1fr; }
.svc-card-panel-inner {
  overflow: hidden;
  min-height: 0;
}
.svc-card-panel-content {
  padding: 8px 28px 32px;
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity .45s cubic-bezier(.2,.7,.2,1) .1s,
    transform .55s cubic-bezier(.2,.7,.2,1) .1s;
}
.svc-card.is-open .svc-card-panel-content {
  opacity: 1;
  transform: none;
}
.svc-card-services {
  list-style: none;
  display: grid;
  gap: 0;
  margin: 12px 0 24px;
  padding: 0;
  border-top: 1px solid var(--hairline);
}
.svc-card-services li {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 8px;
  font-size: 14.5px;
  color: var(--ink-2);
  padding: 10px 0;
  border-bottom: 1px solid var(--hairline);
  opacity: 0;
  transform: translateX(-6px);
  transition:
    opacity .45s cubic-bezier(.2,.7,.2,1),
    transform .5s cubic-bezier(.2,.7,.2,1);
}
.svc-card.is-open .svc-card-services li {
  opacity: 1;
  transform: none;
}
.svc-card-services li .mono { color: var(--muted); }
.svc-card-discuss { width: 100%; justify-content: center; }

.svc-bottom {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 32px;
  padding: 40px 36px;
  background: var(--paper);
  border: 1px solid var(--hairline);
  flex-wrap: wrap;
}
.svc-bottom-title {
  font-size: clamp(26px, 3.2vw, 40px);
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 10px 0 0;
  color: var(--accent);
  line-height: 1.15;
}

@media (max-width: 900px) {
  .svc-card-h-short  .svc-card-head,
  .svc-card-h-medium .svc-card-head,
  .svc-card-h-tall   .svc-card-head { padding: 28px 24px; }
  .svc-card-title { font-size: clamp(30px, 7vw, 40px); }
  .svc-card-panel-content { padding: 8px 24px 28px; }
  .svc-bottom {
    flex-direction: column;
    align-items: flex-start;
    padding: 28px 24px;
  }
}

/* --- Contact page --- */
.contact-layout { /* base set inline */ }
@media (max-width: 900px) {
  .contact-layout {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
}

.contact-aside {
  display: flex;
  flex-direction: column;
  height: 100%;
}
@media (max-width: 900px) {
  .contact-aside { height: auto; }
}

.contact-card {
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: 8px;
  padding: 40px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  flex: 1;
  justify-content: space-between;
}
.contact-card-title {
  font-family: var(--display);
  font-size: 28px;
  font-weight: 600;
  line-height: 1.15;
  color: var(--accent);
  letter-spacing: -0.02em;
}
.contact-card-rows {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--hairline);
}
.contact-row {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--hairline);
  align-items: baseline;
}
.contact-row .eyebrow { margin: 0; }
.contact-row-val {
  font-size: 14px;
  color: var(--ink-2);
  line-height: 1.5;
}
.contact-card-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-start;
}

/* ============================================================
   CONTACT PAGE - polished form + sidebar (redesign)
   ============================================================ */
.contact-section { padding: 16px 0 96px; }
.contact-layout-new {
  display: grid;
  grid-template-columns: 1.45fr 1fr;
  gap: 48px;
  align-items: start;
}
@media (max-width: 900px) {
  .contact-layout-new { grid-template-columns: 1fr; gap: 32px; }
}

/* --- Form card --- */
.contact-form-card {
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: 12px;
  padding: 44px 44px 40px;
  display: grid;
  gap: 28px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 1px 0 rgba(44,30,20,0.02), 0 28px 60px -32px rgba(44,30,20,0.18);
  transition: box-shadow .4s;
}
.contact-form-card:focus-within {
  box-shadow: 0 1px 0 rgba(44,30,20,0.02), 0 32px 70px -28px rgba(44,30,20,0.22);
}
.contact-form-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent) 0%, var(--accent-2) 100%);
}
.contact-form-head { display: flex; flex-direction: column; gap: 8px; }
.contact-form-title {
  font-size: clamp(24px, 2.6vw, 32px);
  font-weight: 600;
  color: var(--accent);
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 8px 0 0;
}

/* --- Progress meter --- */
.contact-progress {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 4px;
}
.contact-progress-bar {
  position: relative;
  width: 100%;
  height: 4px;
  background: var(--hairline);
  border-radius: 999px;
  overflow: hidden;
}
.contact-progress-bar::after {
  content: "";
  position: absolute;
  top: 0; left: 0;
  height: 100%;
  width: var(--progress, 0%);
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  border-radius: 999px;
  transition: width .45s cubic-bezier(.2,.7,.2,1);
}
.contact-progress-meta {
  display: flex;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

/* --- Floating labels --- */
.field-float {
  position: relative;
  display: block;
}
.field-input-float,
.field-textarea-float {
  width: 100%;
  padding: 22px 16px 10px;
  background: #FFFFFF;
  border: 1px solid var(--hairline-strong);
  border-radius: 8px;
  font-size: 15px;
  font-family: var(--sans);
  color: var(--ink);
  transition: border-color .2s, box-shadow .25s;
  appearance: none;
}
.field-textarea-float {
  resize: vertical;
  min-height: 160px;
  line-height: 1.55;
  padding-top: 26px;
  padding-bottom: 14px;
}
.field-input-float:hover,
.field-textarea-float:hover { border-color: var(--accent-2); }
.field-input-float:focus,
.field-textarea-float:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--accent) 14%, transparent);
}
.field-label-float {
  position: absolute;
  top: 16px;
  left: 16px;
  font-size: 14px;
  color: var(--muted);
  pointer-events: none;
  transform-origin: top left;
  transition: transform .2s ease, color .2s ease;
  background: transparent;
  padding: 0 2px;
}
/* Float up when input is focused OR has a value (via :placeholder-shown trick — input uses placeholder=" ") */
.field-input-float:focus + .field-label-float,
.field-input-float:not(:placeholder-shown) + .field-label-float,
.field-textarea-float:focus + .field-label-float,
.field-textarea-float:not(:placeholder-shown) + .field-label-float {
  transform: translateY(-10px) scale(.78);
  color: var(--accent);
}
.field-float.has-error .field-input-float,
.field-float.has-error .field-textarea-float { border-color: #A0392B; }
.field-float.has-error .field-label-float { color: #A0392B; }
.field-float .field-error { margin-top: 8px; }

/* --- Character counter --- */
.char-counter {
  position: absolute;
  right: 14px;
  bottom: 10px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  pointer-events: none;
  background: rgba(255,255,255,0.92);
  padding: 2px 6px;
  border-radius: 4px;
}

/* --- Form row (name + email) --- */
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
@media (max-width: 600px) {
  .form-row { grid-template-columns: 1fr !important; gap: 16px; }
}

/* --- Area pills --- */
.field-area-group { display: grid; gap: 12px; }
.area-pills { display: flex; gap: 8px; flex-wrap: wrap; }
.area-pill {
  padding: 10px 18px;
  border-radius: 999px;
  border: 1px solid var(--hairline-strong);
  background: #FFFFFF;
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: transform .2s cubic-bezier(.2,.7,.2,1),
              background .25s, border-color .25s, color .25s;
}
.area-pill:hover { transform: translateY(-1px); border-color: var(--accent-2); color: var(--accent-2); }
.area-pill.is-active {
  background: var(--accent);
  border-color: var(--accent);
  color: #FFFFFF;
}
.area-pill.is-active:hover { background: var(--accent-2); border-color: var(--accent-2); color: #FFFFFF; }

/* --- Submit foot --- */
.contact-form-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.contact-form-foot-meta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  font-size: 10.5px;
  letter-spacing: 0.16em;
}
.contact-form-foot-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #4CAF50;
  box-shadow: 0 0 0 0 rgba(76,175,80,0.55);
  animation: pulseDot 2s infinite;
}
@keyframes pulseDot {
  0%   { box-shadow: 0 0 0 0 rgba(76,175,80,0.55); }
  70%  { box-shadow: 0 0 0 10px rgba(76,175,80,0); }
  100% { box-shadow: 0 0 0 0 rgba(76,175,80,0); }
}
.contact-submit {
  position: relative;
  transition: transform .25s cubic-bezier(.2,.7,.2,1), background .2s, box-shadow .3s;
}
.contact-submit:hover { transform: translateY(-2px); box-shadow: 0 14px 32px -12px rgba(44,30,20,0.4); }
.contact-submit:active { transform: translateY(0); }
.contact-submit.is-loading { pointer-events: none; opacity: .85; }
.contact-submit.is-loading .arrow { animation: spinArrow 1s linear infinite; }
@keyframes spinArrow {
  0% { transform: rotate(0); }
  100% { transform: rotate(360deg); }
}

/* --- Sidebar --- */
.contact-side { display: flex; flex-direction: column; gap: 24px; }
.contact-side-head {
  background: var(--paper-2);
  border: 1px solid var(--hairline);
  border-radius: 12px;
  padding: 28px 28px 24px;
}
.contact-side-title {
  font-size: 26px;
  font-weight: 600;
  color: var(--accent);
  letter-spacing: -0.018em;
  line-height: 1.1;
  margin: 12px 0 8px;
}
.contact-side-lede {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-2);
  margin: 0;
}

/* --- Action tiles --- */
.contact-actions {
  display: grid;
  gap: 10px;
}
.contact-action {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 16px;
  align-items: center;
  padding: 16px 20px;
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: 10px;
  text-decoration: none;
  color: var(--ink);
  transition: transform .25s cubic-bezier(.2,.7,.2,1),
              background .2s, border-color .25s, box-shadow .3s;
}
.contact-action:hover {
  transform: translateY(-2px);
  border-color: var(--accent-2);
  box-shadow: 0 10px 28px -16px rgba(44,30,20,0.32);
}
.contact-action-icon {
  width: 40px; height: 40px;
  border-radius: 10px;
  background: var(--paper-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  transition: background .25s, color .25s, transform .3s;
}
.contact-action:hover .contact-action-icon {
  background: var(--accent-2);
  color: #FFFFFF;
  transform: rotate(-4deg);
}
.contact-action-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.contact-action-label {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
}
.contact-action-value {
  font-size: 15px;
  color: var(--ink);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.contact-action-arrow {
  font-size: 18px;
  color: var(--muted);
  transition: transform .3s, color .25s;
}
.contact-action:hover .contact-action-arrow {
  transform: translateX(4px);
  color: var(--accent-2);
}

.contact-side-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border: 1px solid var(--hairline);
  border-radius: 10px;
  overflow: hidden;
}
.contact-side-meta > div {
  padding: 18px 20px;
  background: var(--paper);
}
.contact-side-meta > div + div { border-left: 1px solid var(--hairline); }
.contact-side-meta-val { font-size: 14px; color: var(--ink-2); margin-top: 6px; }

/* --- Thank-you state --- */
.contact-thanks {
  border: 1px solid var(--hairline);
  border-radius: 12px;
  padding: 56px 40px;
  background: var(--paper);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.contact-thanks::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent) 0%, var(--accent-2) 100%);
}
.contact-thanks-mark {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  animation: thanksPop .55s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes thanksPop {
  0% { opacity: 0; transform: scale(.6); }
  60% { opacity: 1; transform: scale(1.05); }
  100% { opacity: 1; transform: scale(1); }
}
.contact-thanks-eyebrow { color: var(--accent-2); }
.contact-thanks-title { font-size: clamp(28px, 4vw, 42px); margin: 12px 0; line-height: 1.1; font-weight: 600; }
.contact-thanks-lede {
  color: var(--ink-2);
  font-size: 16px;
  line-height: 1.6;
  margin: 0 auto 28px;
  max-width: 460px;
}

@media (max-width: 600px) {
  .contact-form-card { padding: 28px 22px 28px; }
  .contact-side-meta { grid-template-columns: 1fr; }
  .contact-side-meta > div + div { border-left: 0; border-top: 1px solid var(--hairline); }
  .contact-thanks { padding: 44px 24px; }
}

/* --- Workflow polish --- */
.workflow-step {
  position: relative;
  transition: transform .35s cubic-bezier(.2,.7,.2,1);
}
.workflow-step:hover { transform: translateY(-4px); }
.workflow-step:hover .workflow-num { color: var(--accent-2); }
.workflow-num { transition: color .25s; }

/* ============================================================
   RESPONSIVE FINAL PASS - cross-device polish
   Goals: no horizontal overflow at any width; sensible
   single-column collapse on phones; reduced section paddings;
   fluid typography; tablet-friendly intermediate grids.
   ============================================================ */

/* Universal overflow protection */
html, body { overflow-x: hidden; }
img, picture, video, canvas, svg { max-width: 100%; height: auto; }
section, article, header, footer, main, div { min-width: 0; }

/* Tablet (701-1100px) - intermediate grids */
@media (max-width: 1100px) and (min-width: 901px) {
  /* About: 4-col meta-band becomes 2x2 instead of 4 cramped cols */
  .meta-band[style*="repeat(4"] { grid-template-columns: repeat(2, 1fr) !important; }
  .meta-band[style*="repeat(4"] > div:nth-child(3) { border-left: none !important; border-top: 1px solid var(--hairline); }
  .meta-band[style*="repeat(4"] > div:nth-child(4) { border-top: 1px solid var(--hairline); }
}

/* Tablet (701-900px) - tighten widely-spaced grids one notch */
@media (max-width: 900px) and (min-width: 701px) {
  /* Hero side-by-side (eyebrow + heading) gets narrower gap */
  .hero-bottom { gap: 32px !important; }
  /* Bio overlay: keep two columns but narrower */
  .bio-overlay { grid-template-columns: 4fr 8fr !important; }
  /* Contact form row: keep 2 cols on tablet */
  .form-row { grid-template-columns: 1fr 1fr !important; }
}

/* Mobile (≤900px) - reduce big section paddings, typography */
@media (max-width: 900px) {
  /* Generic big padded sections that were 120px+ */
  .sectors-section { padding: 72px 0 64px !important; }
  .practice-modules-section { padding: 56px 0 !important; }
  .home-section { padding: 56px 0 !important; }
  .practice-cards-section { padding: 64px 0 72px !important; }

  /* Hero verticals tighter on tablets/phones */
  .people-hero { padding-top: 112px !important; padding-bottom: 40px !important; }

  /* Closing CTA stack already covered; tighten further on small screens */
  .closing-cta { padding: 64px 0 !important; }

  /* Section with inline padding: 24px 0 120px on lawyers page */
  section[style*="padding: 24px 0 120px"] { padding: 16px 0 72px !important; }
  /* About page timeline section */
  section[style*="padding: 80px 0 120px"] { padding: 56px 0 72px !important; }

  /* Trinity section margin */
  .trinity-section { margin: 40px 0 56px !important; }

  /* Contact form action button row wraps */
  .contact-card { padding: 28px 24px !important; }
}

/* Phone (≤600px) - aggressive single-column + tighter type */
@media (max-width: 600px) {
  /* Containers slightly tighter */
  .container { padding: 0 20px !important; }
  /* Headings */
  h2 { font-size: clamp(28px, 8vw, 42px) !important; }
  h3 { font-size: clamp(20px, 5.5vw, 26px) !important; }
  /* Hero text wraps */
  .hero-title { font-size: clamp(36px, 10vw, 60px) !important; }
  .hero-lede { font-size: 14.5px !important; }
  /* Closing CTA title tighter */
  .closing-cta-title { font-size: clamp(28px, 8vw, 44px) !important; }
  /* Founders' note title */
  .founders-note-title { font-size: clamp(30px, 8vw, 48px) !important; }
  /* Trinity word size */
  .trinity-card-word { font-size: clamp(40px, 10vw, 64px) !important; }
  /* Big eyebrow padding inside meta-band */
  .meta-band > div { padding: 24px 16px !important; }
  /* Form row gap */
  .form-row { gap: 14px !important; }
  /* Contact card */
  .contact-card { padding: 24px 20px !important; }
  .contact-row { grid-template-columns: 90px 1fr !important; gap: 12px !important; }
  /* Bio overlay padding when in fullscreen */
  .bio-body { padding: 64px 16px 32px !important; }
  /* Buttons stack on very small screens */
  .hero-actions { flex-direction: column !important; align-items: stretch !important; gap: 12px !important; }
  .hero-actions .btn { width: 100% !important; justify-content: center !important; }
  /* Reduce excess section paddings further */
  .practice-modules-section { padding: 48px 0 !important; }
  .home-section { padding: 48px 0 !important; }
  .approach-section { padding: 56px 0 !important; }
  /* Lawyer card icon row */
  .lawyer-card-wrap { width: 100% !important; }
  /* Footer */
  .footer-inner { padding-top: 72px !important; }
}

/* Very small phones (≤400px) - last guardrails */
@media (max-width: 400px) {
  .container { padding: 0 16px !important; }
  .nav-inner { padding: 12px 16px !important; }
  .logo-mark { font-size: 14px !important; letter-spacing: 0.04em !important; }
  .hero-title { font-size: clamp(32px, 11vw, 48px) !important; }
  .page-title { font-size: clamp(28px, 10vw, 44px) !important; }
  h2 { font-size: clamp(26px, 9vw, 36px) !important; }
  .closing-cta-title { font-size: clamp(26px, 9vw, 38px) !important; }
  .trinity-card-word { font-size: clamp(34px, 11vw, 52px) !important; }
  .meta-band > div { padding: 20px 14px !important; }
  .meta-band .serif { font-size: 18px !important; }
}

/* Landscape phone heights - prevent hero from being too tall */
@media (max-height: 520px) and (orientation: landscape) {
  .hero-image, .hero-inner { min-height: 100vh !important; }
  .hero-inner { padding-top: 80px !important; padding-bottom: 24px !important; }
}

/* Large desktop (≥1600px) - cap line lengths so paragraphs stay readable */
@media (min-width: 1600px) {
  .hero-lede, .people-hero-lede, .practice-module-summary { max-width: 56ch; }
}