/* ==========================================================================
   TRIAGE LEGAL — Linen & Brass Design System
   ========================================================================== */

:root {
  /* Core palette */
  --linen: #F2EEE6;
  --charcoal: #282B29;
  --brass: #A9844A;
  --stone: #CFC8B8;

  /* Approved shade variants */
  --linen-light: #F7F4EE;
  --linen-deep: #E8E1D5;
  --charcoal-soft: #454744;
  --brass-light: #C1A979;
  --brass-deep: #80632F;
  --stone-light: #DDD7CB;
  --stone-deep: #B7AE9D;

  --white: #FFFFFF;

  /* Typography */
  --font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-body: 'Montserrat', 'Segoe UI', Arial, sans-serif;

  /* Type scale */
  --h1: clamp(2rem, 1.5rem + 2vw, 2.75rem);
  --h2: clamp(1.5rem, 1.25rem + 1.1vw, 2rem);
  --h3: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --h4: 1.15rem;

  /* Layout */
  --container: 1200px;
  --container-narrow: 760px;
  --radius: 3px;
  --nav-height: 84px;

  /* Motion */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: hidden; }
body {
  margin: 0;
  background: var(--linen);
  color: var(--charcoal);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
button { font-family: inherit; cursor: pointer; }
input, textarea, select { font-family: inherit; font-size: 1rem; }
h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  font-weight: 600;
  margin: 0 0 0.5em 0;
  line-height: 1.2;
  text-wrap: balance;
}
h1 { font-size: var(--h1); }
h2 { font-size: var(--h2); }
h3 { font-size: var(--h3); }
p { margin: 0 0 1.1em 0; }
p:last-child { margin-bottom: 0; }

/* Full-bleed to the true browser edge, 25px in on both sides -- client
   spec, matches the header. Images inside a section are the one exception:
   they bleed past this padding to the true right edge (see .hero-art:has(img)
   and .visual-panel--bleed-right below). */
.container {
  max-width: none;
  padding: 0 25px;
}
.container-narrow {
  max-width: var(--container-narrow);
  margin: 0 auto;
  padding: 0 22px;
}
@media (max-width: 640px) {
  .container-narrow { padding: 0 18px; }
}

section { padding: 64px 0; }
@media (max-width: 900px) { section { padding: 48px 0; } }
@media (max-width: 560px) { section { padding: 36px 0; } }

.section--tight { padding: 42px 0; }

/* ---- Utility ---- */
.eyebrow {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--brass);
  display: block;
  margin-bottom: 14px;
}
.rule {
  width: 56px;
  height: 2px;
  background: var(--brass);
  border: none;
  margin: 18px 0 24px 0;
}
.rule--center { margin-left: auto; margin-right: auto; }
.section-head {
  max-width: 640px;
  margin: 0 auto 38px auto;
  text-align: center;
}
.section-head .rule { margin-left: auto; margin-right: auto; }
.section-head--left { text-align: left; margin: 0 0 48px 0; }
.section-head--left .rule { margin-left: 0; }
.lede {
  font-size: 1.05rem;
  color: var(--charcoal-soft);
}
.text-brass { color: var(--brass); }
.italic { font-style: italic; }
.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;
}

/* ---- Buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 15px 28px;
  border-radius: var(--radius);
  border: 1px solid transparent;
  transition: background 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease), box-shadow 0.3s var(--ease), transform 0.3s var(--ease);
  white-space: nowrap;
}
.btn svg { width: 15px; height: 15px; flex-shrink: 0; transition: transform 0.25s var(--ease); }
.btn:hover svg { transform: translateX(3px); }
.btn:active { transform: translateY(0) !important; }
.btn-primary { background: var(--brass); color: var(--white); }
.btn-primary:hover { background: var(--brass-deep); box-shadow: 0 16px 32px -12px rgba(169,132,74,0.6); transform: translateY(-2px); }
.btn-outline { background: transparent; color: var(--charcoal); border-color: var(--charcoal-soft); }
.btn-outline:hover { background: var(--charcoal); color: var(--linen); border-color: var(--charcoal); box-shadow: 0 16px 32px -14px rgba(40,43,41,0.45); transform: translateY(-2px); }
.btn-outline--light { color: var(--linen); border-color: rgba(242,238,230,0.5); }
.btn-outline--light:hover { background: var(--linen); color: var(--charcoal); }
.text-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--brass);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s var(--ease), gap 0.2s var(--ease);
}
.text-link svg { width: 13px; height: 13px; transition: transform 0.2s var(--ease); }
.text-link:hover svg { transform: translateX(4px); }
.text-link:hover { border-color: var(--brass); }

/* ==========================================================================
   HEADER THEME
   Change the 5 variables below to try a different header color — every
   header/mobile-menu rule reads from these, nothing else to touch.

   PRESETS (copy a whole block over the "ACTIVE" one below to switch/revert):

   Charcoal, original, hex #282B29 bg — live until 2026-09-11:
     --header-bg: var(--charcoal);
     --header-text: var(--linen);
     --header-text-muted: var(--stone-light);
     --header-accent: var(--brass-light);
     --header-divider: rgba(242,238,230,0.1);

   Linen Deep, hex #E8E1D5 bg — ACTIVE since 2026-09-11, requested by client.
   ========================================================================== */
:root {
  --header-bg: #E8E1D5;
  --header-text: var(--charcoal);
  --header-text-muted: var(--charcoal-soft);
  --header-accent: var(--brass-deep);
  --header-divider: rgba(40,43,41,0.12);
}

/* ==========================================================================
   HEADER / NAVIGATION
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 200;
  background: var(--header-bg);
  border-bottom: 1px solid rgba(169,132,74,0.25);
  box-shadow: 0 0 0 rgba(0,0,0,0);
  transition: box-shadow 0.35s var(--ease);
}
.site-header.is-scrolled { box-shadow: 0 16px 32px -12px rgba(0,0,0,0.35); }
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--nav-height);
  gap: 24px;
  transition: height 0.3s var(--ease);
}
.site-header.is-scrolled .nav { height: 66px; }
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
.brand-mark { width: 28px; height: auto; flex-shrink: 0; }
.brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}
.brand-text strong {
  font-family: var(--font-display);
  font-size: 1.2rem;
  letter-spacing: 2px;
  color: var(--header-text);
  font-weight: 600;
}
.brand-text span {
  font-size: 0.55rem;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--header-accent);
}

.nav-primary {
  display: flex;
  align-items: center;
  gap: 22px;
  flex: 1;
  justify-content: flex-end;
}
.nav-item { position: relative; }
.nav-link {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 30px 16px;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--header-text);
  position: relative;
  transition: color 0.2s var(--ease), padding 0.3s var(--ease);
}
.nav-link svg { width: 9px; height: 9px; opacity: 0.7; transition: transform 0.2s var(--ease); }
.nav-item:hover .nav-link,
.nav-link.is-active { color: var(--header-accent); }
.nav-item:hover .nav-link svg { transform: rotate(180deg); }
.nav-link::after {
  content: "";
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 19px;
  height: 1.5px;
  background: var(--header-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s var(--ease);
}
.nav-item:hover .nav-link::after,
.nav-link.is-active::after { transform: scaleX(1); }
.site-header.is-scrolled .nav-link { padding-top: 22px; padding-bottom: 22px; }
.site-header.is-scrolled .nav-link::after { bottom: 11px; }

.dropdown {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translate(-50%, 8px);
  min-width: 240px;
  background: var(--linen-light);
  border: 1px solid var(--stone);
  border-radius: var(--radius);
  box-shadow: 0 18px 40px rgba(40,43,41,0.18);
  padding: 10px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s var(--ease), transform 0.2s var(--ease), visibility 0.2s;
}
.nav-item:hover .dropdown { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.dropdown a {
  display: block;
  padding: 11px 14px;
  font-size: 0.82rem;
  color: var(--charcoal);
  border-radius: var(--radius);
  transition: background 0.15s var(--ease), color 0.15s var(--ease);
}
.dropdown a:hover { background: var(--white); color: var(--brass-deep); }

/* Insights is the last (rightmost) nav item, so its wide dropdown can't be
   centered under it like the others -- that pushes it past the true right
   edge. Anchor it to the nav item's own right edge instead, growing left. */
.dropdown--insights { min-width: 560px; padding: 20px; left: auto; right: 0; transform: translateY(8px); }
.nav-item:hover .dropdown--insights { transform: translateY(0); }
.dropdown--insights .insights-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
}
.dropdown--insights a { padding: 12px 12px; }
.dropdown--insights .cat-name { display: block; font-weight: 600; font-size: 0.82rem; color: var(--charcoal); }
.dropdown--insights .cat-desc { display: block; font-size: 0.72rem; color: var(--charcoal-soft); margin-top: 4px; line-height: 1.4; }
.dropdown--insights a:hover .cat-name { color: var(--brass-deep); }

.nav-actions { display: flex; align-items: center; gap: 18px; flex-shrink: 0; }
.nav-contact {
  display: flex;
  align-items: center;
  gap: 16px;
}
.nav-icon-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(169,132,74,0.5);
  color: var(--header-accent);
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}
.nav-icon-link svg { width: 15px; height: 15px; }
.nav-icon-link:hover { background: var(--brass); color: var(--charcoal); }
.nav-phone {
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--header-text);
  letter-spacing: 0.3px;
  white-space: nowrap;
}
.nav-phone svg { width: 13px; height: 13px; margin-right: 6px; vertical-align: -2px; color: var(--header-accent); }

.hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  background: none;
  border: none;
  padding: 0;
}
.hamburger span {
  display: block;
  width: 24px;
  height: 1.5px;
  background: var(--header-text);
  transition: transform 0.25s var(--ease), opacity 0.25s var(--ease);
}
.hamburger.is-open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.hamburger.is-open span:nth-child(2) { opacity: 0; }
.hamburger.is-open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.mobile-menu {
  position: fixed;
  inset: 0;
  top: var(--nav-height);
  background: var(--header-bg);
  z-index: 190;
  padding: 20px 28px 40px;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform 0.35s var(--ease);
}
.mobile-menu.is-open { transform: translateX(0); }
.mobile-item { border-bottom: 1px solid var(--header-divider); }
.mobile-item > a, .mobile-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: none;
  border: none;
  padding: 20px 4px;
  font-family: var(--font-display);
  font-size: 1.3rem;
  color: var(--header-text);
  text-align: left;
}
.mobile-toggle svg { width: 13px; height: 13px; color: var(--header-accent); transition: transform 0.25s var(--ease); }
.mobile-item.is-open .mobile-toggle svg { transform: rotate(180deg); }
.mobile-submenu {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s var(--ease);
}
.mobile-item.is-open .mobile-submenu { max-height: 480px; }
.mobile-submenu a {
  display: block;
  padding: 12px 4px 12px 18px;
  font-size: 0.92rem;
  color: var(--header-text-muted);
  border-left: 1px solid rgba(169,132,74,0.4);
  margin-left: 4px;
}
.mobile-actions { margin-top: 32px; display: flex; flex-direction: column; gap: 12px; }
.mobile-actions .btn { justify-content: center; width: 100%; }
.mobile-contact-row { display: flex; gap: 12px; margin-top: 20px; }
.mobile-contact-row a {
  flex: 1;
  text-align: center;
  padding: 13px;
  border: 1px solid rgba(169,132,74,0.5);
  border-radius: var(--radius);
  color: var(--header-accent);
  font-size: 0.78rem;
  letter-spacing: 0.8px;
  text-transform: uppercase;
}

@media (max-width: 1080px) {
  .nav-primary, .nav-contact { display: none; }
  .hamburger { display: flex; }
}

/* ==========================================================================
   HERO — decorative column / arch treatments (no photography)
   ========================================================================== */
.hero {
  position: relative;
  background: var(--charcoal);
  color: var(--linen);
  overflow: hidden;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  min-height: 560px;
}
/* Homepage hero carousel only: a shorter box (closer to the photos' own
   ~1.5:1 landscape aspect ratio) lets object-fit:cover show nearly the
   whole photo -- the "zoomed out" look -- while still filling the box
   edge-to-edge with no letterbox margin. Scoped via :has(.hero-carousel)
   so interior pages' single hero-art image is untouched. */
.hero-grid:has(.hero-carousel) { min-height: 460px; }
.hero-grid:has(.hero-carousel) .hero-art { min-height: 460px; }
.hero-content { padding: 80px 0 80px 25px; position: relative; z-index: 2; }
.hero-content .eyebrow { color: var(--brass-light); }
.hero-content h1 { color: var(--linen); font-weight: 500; }
.hero-content h1 em { font-style: italic; color: var(--brass-light); }
.hero-content p { color: var(--stone-light); font-size: 1.05rem; max-width: 460px; }
.hero-actions { display: flex; gap: 14px; margin-top: 30px; flex-wrap: wrap; }

.hero-art {
  position: relative;
  height: 100%;
  min-height: 480px;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 30% 20%, rgba(169,132,74,0.16), transparent 55%),
    linear-gradient(160deg, #1c1e1c 0%, #282B29 60%, #33362f 100%);
}
.hero-art svg { width: 82%; height: auto; opacity: 0.92; }
.hero-art::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--charcoal) 0%, transparent 12%);
}
.hero-art img,
.hero-carousel__slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero--simple .hero-art::after { background: linear-gradient(90deg, var(--linen-light) 0%, transparent 12%); }

/* The hero section zeroes its own .container's padding (inline style) so
   hero-grid already spans the true edge on both sides -- no bleed trick
   needed here (unlike .visual-panel--bleed-right, whose .container keeps
   its normal 25px padding). */

/* ---- Homepage hero photo carousel ---- */
/* Zoomed-out look now comes from the shorter .hero-grid:has(.hero-carousel)
   box above (matches the photos' aspect ratio) rather than from
   object-fit:contain -- client wanted the zoomed-out framing WITHOUT the
   letterbox margin contain leaves, so this still uses the shared
   object-fit:cover from ".hero-art img" above, just against a box that
   barely needs to crop anymore. */
.hero-carousel__slide {
  opacity: 0;
  transition: opacity 1.4s ease;
}
.hero-carousel__slide.is-active { opacity: 1; }
.hero-carousel__dots {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
}
.hero-carousel__dots button {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1px solid rgba(242,238,230,0.7);
  background: transparent;
  padding: 0;
  cursor: pointer;
}
.hero-carousel__dots button.is-active { background: var(--brass-light); border-color: var(--brass-light); }
@media (max-width: 900px) {
  .hero-carousel__dots { bottom: 14px; }
}

.hero--simple {
  background: var(--linen-light);
  color: var(--charcoal);
}
.hero--simple .hero-art { background: linear-gradient(160deg, var(--linen-deep) 0%, var(--stone-light) 100%); }
.hero--simple .hero-content h1 { color: var(--charcoal); }
.hero--simple .hero-content h1 em { color: var(--brass-deep); }
.hero--simple .hero-content p { color: var(--charcoal-soft); }
.hero--simple .breadcrumb { color: var(--charcoal-soft); }
.hero--simple .breadcrumb a:hover { color: var(--brass-deep); }
.hero--simple .breadcrumb .current { color: var(--brass-deep); }

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; min-height: 0; }
  .hero-content { padding: 56px 28px 40px; }
  .hero-art { min-height: 300px; order: -1; }
  .hero-art svg { width: 60%; }
  /* Show the whole photo instead of a tight object-fit:cover crop; the
     hero-art gradient behind it fills any letterboxed edge. */
  .hero-art img,
  .hero-carousel__slide { object-fit: contain; }
}
@media (max-width: 640px) {
  .hero-content { padding: 48px 20px 32px; }
}

/* Breadcrumb */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.76rem;
  letter-spacing: 0.4px;
  color: var(--stone-light);
  margin-bottom: 22px;
  flex-wrap: wrap;
}
.breadcrumb a:hover { color: var(--brass-light); }
.breadcrumb .sep { opacity: 0.5; }
.breadcrumb .current { color: var(--brass-light); }

/* ==========================================================================
   PRACTICE / CARD COMPONENTS
   ========================================================================== */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
@media (max-width: 900px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .grid-3, .grid-4, .grid-2 { grid-template-columns: 1fr; } }

.practice-card {
  background: var(--linen-light);
  border: 1px solid var(--stone);
  border-radius: var(--radius);
  padding: 40px 32px;
  transition: border-color 0.3s var(--ease), transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.practice-card:hover { border-color: var(--brass); transform: translateY(-6px); box-shadow: 0 26px 48px -24px rgba(40,43,41,0.28); }
.practice-card .icon-badge { margin-bottom: 22px; transition: transform 0.35s var(--ease); }
.practice-card:hover .icon-badge { transform: scale(1.08); }
.practice-card h3 { margin-bottom: 10px; }
.practice-card .rule { margin: 12px 0 16px; }
.practice-card p { color: var(--charcoal-soft); font-size: 0.94rem; margin-bottom: 20px; }

.icon-badge {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--charcoal);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brass-light);
}
.icon-badge svg { width: 26px; height: 26px; }
.icon-badge--outline {
  background: transparent;
  border: 1.4px solid var(--brass);
  color: var(--brass);
}

.principle {
  text-align: center;
  padding: 34px 26px;
  background: var(--linen-light);
  border: 1px solid var(--stone);
  border-radius: var(--radius);
  box-shadow: 0 14px 30px -20px rgba(40,43,41,0.25);
  transform: perspective(900px);
  transform-style: preserve-3d;
  transition: transform 0.12s ease-out, box-shadow 0.35s var(--ease), border-color 0.3s var(--ease);
  will-change: transform;
}
.principle:hover { border-color: var(--brass); box-shadow: 0 30px 54px -26px rgba(40,43,41,0.32); }
.principle .icon-badge { margin: 0 auto 18px auto; width: 50px; height: 50px; transition: transform 0.3s var(--ease); transform: translateZ(24px); }
.principle .icon-badge svg { width: 22px; height: 22px; }
.principle:hover .icon-badge { transform: translateZ(24px) scale(1.08); }
.principle h4 { font-family: var(--font-body); font-size: 0.92rem; letter-spacing: 0.3px; text-transform: uppercase; font-weight: 600; margin-bottom: 8px; transform: translateZ(14px); }
.principle p { font-size: 0.85rem; color: var(--charcoal-soft); transform: translateZ(10px); }

/* dark-section variant: translucent card instead of solid linen */
.band-dark .principle {
  background: rgba(242,238,230,0.045);
  border-color: rgba(169,132,74,0.28);
  box-shadow: 0 14px 30px -20px rgba(0,0,0,0.45);
}
.band-dark .principle:hover { border-color: var(--brass-light); box-shadow: 0 30px 54px -22px rgba(0,0,0,0.55); }

/* ===== SECTOR TILE — PREVIOUS PRESET (dark photo-background card) =====
   No longer used on sectors.html (replaced below by .sector-card, a light
   photo-top card matching the client's supplied reference mockup). Kept
   here, inert, in case the client ever wants the dark full-bleed-photo
   treatment back — restore by un-commenting this block and swapping
   sectors.html's .sector-card/__thumb/__body markup back to
   .sector-tile/.sector-tile--photo (see git history / prior session for
   the exact markup, or ask Claude to regenerate it from this CSS).
.sector-tile {
  position: relative;
  background: var(--charcoal);
  color: var(--linen);
  border-radius: var(--radius);
  padding: 30px 26px;
  min-height: 190px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.sector-tile:hover { transform: translateY(-6px); box-shadow: 0 26px 48px -22px rgba(0,0,0,0.4); }
.sector-tile::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 85% 0%, rgba(169,132,74,0.35), transparent 60%);
}
.sector-tile .icon-badge {
  position: relative; z-index: 1;
  background: rgba(242,238,230,0.08);
  border: 1px solid rgba(169,132,74,0.5);
  color: var(--brass-light);
  margin-bottom: 16px;
}
.sector-tile h3 { position: relative; z-index: 1; font-size: 1.15rem; color: var(--linen); margin-bottom: 8px; }
.sector-tile p { position: relative; z-index: 1; font-size: 0.85rem; color: var(--stone-light); margin: 0; }

.sector-tile--photo { background-size: cover; background-position: center; }
.sector-tile--photo::before {
  background: linear-gradient(180deg, rgba(15,14,12,0.45) 0%, rgba(15,14,12,0.55) 30%, rgba(15,14,12,0.88) 65%, rgba(10,9,8,0.97) 100%);
}
.sector-tile--photo .icon-badge { background: rgba(15,14,12,0.7); backdrop-filter: blur(2px); }
.sector-tile--photo h3 { text-shadow: 0 2px 10px rgba(0,0,0,0.55); }
.sector-tile--photo p { color: var(--linen); opacity: 0.92; text-shadow: 0 1px 6px rgba(0,0,0,0.5); }
===== END PREVIOUS PRESET ===== */

/* Sector card — the site's original dark charcoal card color scheme
   (confirmed via the client's own "color-scheme.png" reference of the
   existing live cards), just with a real photo added on top; the photo
   itself is plain/uncropped, no dark overlay needed since the overlay
   problem this session started with was about text-over-photo legibility,
   which a separate solid-charcoal body below the photo sidesteps entirely.
   Structurally still the same shape as .insight-card/.insight-thumb
   (photo-thumb + body), just re-skinned dark instead of light. */
.sector-card {
  background: var(--charcoal);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.sector-card:hover { transform: translateY(-6px); box-shadow: 0 26px 48px -22px rgba(0,0,0,0.4); }
.sector-card__thumb { height: 220px; overflow: hidden; }
.sector-card__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Placeholder for a sector with no photo supplied yet — the same radial
   brass glow the body already sits on, so it doesn't look broken while
   waiting on real photography. */
.sector-card__thumb--placeholder {
  position: relative;
  background: var(--charcoal);
}
.sector-card__thumb--placeholder::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 85% 0%, rgba(169,132,74,0.35), transparent 60%);
}
.sector-card__body {
  position: relative;
  padding: 20px 22px 22px;
  flex: 1;
  display: flex;
  flex-direction: column;
  background: var(--charcoal);
  overflow: hidden;
}
/* Same radial brass glow the original .sector-tile card had — now scoped
   to just the body (the photo thumb above needs none, since it's already
   photographic). */
.sector-card__body::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 85% 0%, rgba(169,132,74,0.35), transparent 60%);
}
.sector-card__body .icon-badge {
  position: relative;
  z-index: 1;
  width: 44px;
  height: 44px;
  background: rgba(242,238,230,0.08);
  border: 1px solid rgba(169,132,74,0.5);
  color: var(--brass-light);
  margin-bottom: 12px;
}
.sector-card__body .icon-badge svg { width: 20px; height: 20px; }
.sector-card__body h3 { position: relative; z-index: 1; font-size: 1.05rem; margin-bottom: 8px; color: var(--linen); }
/* No longer clamped to 2 lines -- that existed only to keep each card's
   "Learn more" link aligned across a row despite differing description
   lengths (Manufacturing & Industry / Professional Services ran longer
   than the others). Now that the CTA is gone (Sectors page, on request),
   there's nothing left to keep aligned, so the full text shows. */
.sector-card__body p {
  position: relative;
  z-index: 1;
  font-size: 0.84rem;
  line-height: 1.5;
  color: var(--stone-light);
  flex: 1;
  margin: 0;
}
.sector-card__body .text-link { position: relative; z-index: 1; margin-top: auto; padding-top: 14px; color: var(--brass-light); }
.sector-card__body .text-link:hover { border-color: var(--brass-light); }

.insight-card {
  background: var(--linen-light);
  border: 1px solid var(--stone);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.35s var(--ease), border-color 0.3s var(--ease), box-shadow 0.35s var(--ease);
}
.insight-card:hover { transform: translateY(-6px); border-color: var(--brass); box-shadow: 0 26px 48px -24px rgba(40,43,41,0.24); }
.insight-thumb {
  height: 168px;
  background: linear-gradient(135deg, var(--charcoal) 0%, #3a3d38 100%);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.insight-thumb svg { width: 46px; height: 46px; color: var(--brass-light); opacity: 0.85; }
.insight-body { padding: 24px 26px 28px; flex: 1; display: flex; flex-direction: column; }
.insight-tag {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--brass-deep);
  margin-bottom: 10px;
}
.insight-body h3 { font-size: 1.12rem; margin-bottom: 10px; }
.insight-meta { font-size: 0.76rem; color: var(--charcoal-soft); margin-bottom: 14px; }
.insight-body p.desc { font-size: 0.86rem; color: var(--charcoal-soft); flex: 1; }
.insight-body .text-link { margin-top: 16px; }

.partner-card {
  background: var(--linen-light);
  border: 1px solid var(--stone);
  border-radius: var(--radius);
  overflow: hidden;
}
.partner-photo {
  height: 840px; /* desktop "zoom out" request -- see mobile override below */
  background: linear-gradient(160deg, var(--stone-light) 0%, var(--linen-deep) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.partner-photo svg { width: 84px; height: 84px; color: var(--stone-deep); }
.partner-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.partner-body { padding: 26px 28px 30px; }
.partner-body h3 { margin-bottom: 2px; }
.partner-role { color: var(--brass-deep); font-size: 0.82rem; font-weight: 600; letter-spacing: 0.5px; margin-bottom: 4px; }
.partner-qual { font-size: 0.78rem; color: var(--charcoal-soft); margin-bottom: 14px; }
.partner-body p.bio { font-size: 0.88rem; color: var(--charcoal-soft); margin-bottom: 16px; }
/* Keep the taller "zoomed out" 840px crop desktop-only -- .grid-2 stacks
   to a single narrow column below 620px, where a fixed 840px-tall photo on
   a ~340px-wide card would force excessive scrolling per partner. Revert
   to the previous 480px height there instead. */
@media (max-width: 620px) {
  .partner-photo { height: 480px; }
}

/* ==========================================================================
   TEXT / EDITORIAL SECTIONS
   ========================================================================== */
.editorial { max-width: 720px; }
.editorial h2 { margin-top: 1.6em; }
.editorial h2:first-child { margin-top: 0; }
.editorial p { color: var(--charcoal-soft); font-size: 1rem; }
.editorial ul.checklist { margin: 20px 0; }
.editorial ul.checklist li {
  display: flex;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--stone-light);
  font-size: 0.95rem;
  color: var(--charcoal-soft);
}
.editorial ul.checklist li svg { width: 16px; height: 16px; color: var(--brass); flex-shrink: 0; margin-top: 3px; }

.pull-quote {
  background: var(--charcoal);
  color: var(--linen);
  padding: 48px;
  border-radius: var(--radius);
  position: relative;
}
.pull-quote svg.quote-mark { width: 34px; height: 34px; color: var(--brass); margin-bottom: 18px; }
.pull-quote p { font-family: var(--font-display); font-size: 1.4rem; font-style: italic; line-height: 1.5; color: var(--linen); }
.pull-quote cite { display: block; margin-top: 20px; font-style: normal; font-size: 0.8rem; letter-spacing: 0.5px; text-transform: uppercase; color: var(--stone-light); }

.callout {
  background: var(--linen-deep);
  border-left: 3px solid var(--brass);
  border-radius: var(--radius);
  padding: 22px 26px;
  font-size: 0.92rem;
  color: var(--charcoal-soft);
}
.callout strong { color: var(--charcoal); }

.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
}
@media (max-width: 860px) { .two-col { grid-template-columns: 1fr; gap: 24px; } }

.visual-panel {
  border-radius: var(--radius);
  min-height: 340px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.visual-panel--dark { background: linear-gradient(155deg, #1c1e1c, var(--charcoal) 55%, #34362e); }
.visual-panel--light { background: linear-gradient(155deg, var(--linen-deep), var(--stone-light)); }
.visual-panel svg { width: 55%; opacity: 0.9; }
.visual-panel img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Breaks the panel out of .container's right padding only, so the image
   runs to the true browser edge while the text column alongside it stays
   normally inset. NOTE: the usual "margin: calc(-50vw + 50%)" half-bleed
   trick assumes percentages resolve against the containing block's width —
   but this panel is a CSS Grid item (.two-col), and the Grid spec resolves
   margin percentages against the grid AREA (roughly half of .two-col), not
   the grid container. That silently overshoots the bleed by ~2x. A flat
   -25px (exactly cancelling .container's own padding) sidesteps the grid
   quirk entirely. */
.visual-panel--bleed-right {
  margin-right: -25px;
  /* .two-col's 40px column gap (unlike .hero-grid above, which has none)
     was making this panel's image column 20px narrower than the hero
     image column directly above it -- same right edge, but the left edge
     landed 20px further right, so the two stacked photos read as
     different widths/misaligned at the seam between sections (client:
     "header slider and image under this are not even, needs to be same
     width"). Eating half the gap on this side lines the left edges up too,
     making both columns the same width. */
  margin-left: -20px;
  /* Cancel .section--tight's own 42px top/bottom padding (a fixed value,
     not responsive -- see the single unconditional rule on .section--tight
     above) so the image runs past the row it sits in and touches the
     section's true top/bottom edges, not just the height of the text next
     to it. .two-col's align-items:stretch below still matters as a floor
     for cases where the negative margin alone wouldn't quite reach (e.g.
     if section padding ever changes), but this margin is what actually
     achieves "no margin/padding top or bottom" against the section itself. */
  margin-top: -42px;
  margin-bottom: -42px;
  border-radius: var(--radius) 0 0 var(--radius);
  min-height: 420px;
}
/* Client asked for this panel to run full-height with no top/bottom gap.
   .two-col's own align-items:center (needed elsewhere for shorter panels)
   was centering this panel inside the row instead of stretching it to
   match the text column's height -- override just for this panel via
   :has() so other .two-col sections keep their default centering. */
.two-col:has(.visual-panel--bleed-right) { align-items: stretch; }
@media (max-width: 860px) {
  /* .two-col stacks to one column here, with the text block ABOVE this
     panel in DOM order -- bleeding the top edge here would pull the image
     up into the text above it, not to the section's own top edge like it
     does on desktop. Only the bottom (panel is the last child, so its
     bottom edge IS the section's bottom edge) and the existing horizontal
     bleed still apply. */
  .visual-panel--bleed-right {
    margin-left: -25px;
    margin-top: 0;
    border-radius: 0;
  }
}

.stat-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  text-align: center;
}
.stat-row .stat strong {
  display: block;
  font-family: var(--font-display);
  font-size: 2.1rem;
  color: var(--brass);
  font-weight: 600;
}
.stat-row .stat span { font-size: 0.76rem; letter-spacing: 0.5px; text-transform: uppercase; color: var(--charcoal-soft); }
@media (max-width: 700px) { .stat-row { grid-template-columns: repeat(2, 1fr); gap: 32px 20px; } }

/* dark band section */
.band-dark {
  background: var(--charcoal);
  color: var(--linen);
}
.band-dark .eyebrow { color: var(--brass-light); }
.band-dark h2 { color: var(--linen); }
.band-dark p { color: var(--stone-light); }
.band-dark .principle h4 { color: var(--linen); }
.band-dark .principle p { color: var(--stone-light); }
.band-dark .icon-badge { background: rgba(242,238,230,0.06); border: 1px solid rgba(169,132,74,0.5); color: var(--brass-light); }
.band-dark .editorial ul.checklist li,
.band-dark ul.checklist li { color: var(--stone-light); border-bottom-color: rgba(242,238,230,0.15); }
.band-dark .editorial h2,
.band-dark .editorial p { color: inherit; }
.band-dark .editorial p { color: var(--stone-light); }

/* Approach timeline */
.approach-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 8px;
  position: relative;
}
.approach-step { text-align: center; padding: 0 10px; position: relative; }
.approach-step .num {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--brass);
  color: var(--white);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 600; font-size: 0.95rem;
  margin: 0 auto 14px auto;
}
.approach-step h4 { font-size: 0.86rem; text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 6px; }
.approach-step p { font-size: 0.82rem; color: var(--charcoal-soft); }
/* --charcoal-soft is a dark gray made for light sections; on Litigation's
   "Our Approach" (.band-dark) it was almost invisible against the charcoal
   background. Same fix pattern already used for .chip/.mini-card p on dark
   sections elsewhere -- swap to --stone-light. */
.band-dark .approach-step p { color: var(--stone-light); }
@media (max-width: 620px) {
  /* auto-fit leaves an odd number of steps (e.g. 5) with a lone orphan in
     a 2-column row and breaks the 1-2-3-4-5 reading order; stack instead. */
  .approach-steps { grid-template-columns: 1fr; gap: 28px; }
}

/* ==========================================================================
   PROCESS / SCOPE PANELS — numbered panels used on Litigation, Advisory and
   Arbitration practice pages (icon-chip grids, timelines, stage trackers,
   flow diagrams). Reuses existing tokens/.icon-badge/.band-dark hooks.
   ========================================================================== */
.num-eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--brass-deep);
  margin-bottom: 14px;
}
.band-dark .num-eyebrow { color: var(--brass-light); }
.num-eyebrow .num { font-family: var(--font-display); font-weight: 600; font-size: 0.95rem; }
.num-eyebrow::after { content: ""; flex: 0 0 34px; height: 1px; background: var(--brass); }

.scope-panel {
  background: var(--linen-light);
  border: 1px solid var(--stone);
  border-radius: var(--radius);
  padding: 44px 40px;
}
.band-dark .scope-panel { background: rgba(242,238,230,0.045); border-color: rgba(169,132,74,0.28); }

.scope-panel__head {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1.4fr);
  gap: 40px;
  align-items: start;
}
@media (max-width: 860px) { .scope-panel__head { grid-template-columns: 1fr; gap: 28px; } }
.scope-panel__head h3 { font-size: 1.3rem; margin-bottom: 10px; }
.scope-panel__head > div:first-child p { color: var(--charcoal-soft); font-size: 0.94rem; margin: 0; }
.band-dark .scope-panel__head > div:first-child p { color: var(--stone-light); }

.chip-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.chip-grid--3 { grid-template-columns: repeat(3, 1fr); }
/* 1000px (not the old 700px): .chip-grid--3 is now most often nested inside
   .scope-panel__head's right column (~58% of the panel width, not the full
   container) -- at 700px that combo left real 861-999px overflow (3 chips
   squeezed into too little width while .scope-panel__head is still 2-col,
   which itself only stacks below 860px). Verified no overflow at 1000px
   with this nesting; still comfortably 3-across at the one full-width
   (non-nested) usage on Advisory. */
@media (max-width: 1000px) { .chip-grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .chip-grid, .chip-grid--3 { grid-template-columns: 1fr; } }
.chip {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 16px;
  background: var(--linen);
  border: 1px solid var(--stone-light);
  border-radius: var(--radius);
}
.band-dark .chip { background: rgba(242,238,230,0.03); border-color: rgba(169,132,74,0.2); }
.chip .icon-badge { width: 38px; height: 38px; flex-shrink: 0; }
.chip .icon-badge svg { width: 17px; height: 17px; }
.chip h5 { font-family: var(--font-body); font-size: 0.86rem; font-weight: 600; margin: 0 0 4px 0; }
.band-dark .chip h5 { color: var(--linen); }
.chip p { font-size: 0.78rem; color: var(--charcoal-soft); margin: 0; line-height: 1.5; }
.band-dark .chip p { color: var(--stone-light); }

/* Step list (Litigation: "From issue to resolution"). Each step is its own
   num-eyebrow label + .scope-panel__head (text left / square .chip boxes
   right) -- same left-text/right-boxes pattern already used elsewhere on
   Advisory/Arbitration, reused here instead of the old numbered-circle
   timeline so the whole site shares one step-list look. Each step is now
   also its own <section> with a distinct background (see the four
   alternating --linen-light/--linen-deep/--stone-light/plain values in
   litigation.html) so the four steps read as visually distinct, not one
   repeating block -- spacing between them comes from each section's own
   standard padding, same as every other alternating-band sequence on the
   site (Advisory/Arbitration), not a custom gap. No left padding/indent --
   text starts flush at the container's own 25px edge, same as the
   header/footer. */
.process-item .num-eyebrow { margin-bottom: 16px; }
.process-item h3 { margin-bottom: 8px; }
.process-item .process-desc { color: var(--charcoal-soft); font-size: 0.94rem; margin: 0; }



/* Compact icon row (Litigation "assessment to resolution" band, Arbitration
   "award to outcome") */
.mini-card { text-align: center; padding: 6px; }
.mini-card .icon-badge { margin: 0 auto 14px; width: 44px; height: 44px; }
.mini-card .icon-badge svg { width: 19px; height: 19px; }
.mini-card h5 { font-family: var(--font-body); font-size: 0.88rem; font-weight: 600; margin-bottom: 6px; }
.mini-card p { font-size: 0.8rem; color: var(--charcoal-soft); margin: 0; }
.band-dark .mini-card h5 { color: var(--linen); }
.band-dark .mini-card p { color: var(--stone-light); }

/* ==========================================================================
   SECTORS / ARTICLE / TABLES
   ========================================================================== */
table.legal-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
  margin: 20px 0;
}
table.legal-table th, table.legal-table td {
  text-align: left;
  padding: 12px 16px;
  border: 1px solid var(--stone);
}
table.legal-table th { background: var(--linen-deep); font-weight: 600; }
.table-scroll { overflow-x: auto; }

.filter-bar { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 40px; }
.filter-chip {
  padding: 9px 18px;
  border: 1px solid var(--stone-deep);
  border-radius: 30px;
  font-size: 0.78rem;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--charcoal-soft);
  background: var(--linen-light);
  transition: background 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.filter-chip.is-active, .filter-chip:hover { background: var(--charcoal); color: var(--linen); border-color: var(--charcoal); }

.search-box {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--stone-deep);
  border-radius: var(--radius);
  padding: 13px 16px;
  background: var(--linen-light);
}
.search-box svg { width: 16px; height: 16px; color: var(--charcoal-soft); flex-shrink: 0; }
.search-box input { border: none; background: none; outline: none; width: 100%; font-size: 0.9rem; }

.sidebar-block {
  background: var(--linen-light);
  border: 1px solid var(--stone);
  border-radius: var(--radius);
  padding: 26px;
  margin-bottom: 22px;
}
.sidebar-block h4 { font-size: 0.78rem; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 16px; color: var(--brass-deep); }
.sidebar-block .cat-list a { display: flex; justify-content: space-between; padding: 9px 0; font-size: 0.85rem; border-bottom: 1px solid var(--stone-light); }
.sidebar-block .cat-list a span.count { color: var(--charcoal-soft); }

/* Insights index: article list + sidebar. Below 900px the 68/30 split
   squeezes both columns too narrow to be usable, so stack the sidebar
   full-width beneath the articles instead. */
.insights-layout {
  display: grid;
  grid-template-columns: minmax(0,68%) minmax(0,30%);
  gap: 5%;
  align-items: start;
}
@media (max-width: 900px) {
  .insights-layout { grid-template-columns: 1fr; gap: 32px; }
}

.author-block { display: flex; gap: 14px; align-items: flex-start; }
.author-avatar {
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--charcoal); color: var(--brass-light);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 600; flex-shrink: 0;
}
.related-mini { display: flex; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--stone-light); }
.related-mini:last-child { border-bottom: none; }
.related-mini-thumb {
  width: 64px; height: 64px; flex-shrink: 0; border-radius: var(--radius);
  background: linear-gradient(135deg, var(--charcoal), #3a3d38);
  display: flex; align-items: center; justify-content: center;
}
.related-mini-thumb svg { width: 20px; height: 20px; color: var(--brass-light); }
.related-mini h5 { font-size: 0.85rem; margin: 0 0 4px 0; line-height: 1.35; }
.related-mini span { font-size: 0.72rem; color: var(--charcoal-soft); }

/* ==========================================================================
   ARTICLE / READING PAGE
   ========================================================================== */
.article-layout {
  display: grid;
  grid-template-columns: minmax(0, 68%) minmax(0, 30%);
  gap: 5%;
  align-items: start;
}
@media (max-width: 900px) { .article-layout { grid-template-columns: 1fr; } }
.article-hero-img {
  height: 340px;
  border-radius: var(--radius);
  background: linear-gradient(150deg, var(--charcoal), #3d403a 60%, var(--brass-deep));
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 32px;
}
.article-hero-img svg { width: 64px; height: 64px; color: var(--linen); opacity: 0.85; }
.article-body h2 { font-size: 1.4rem; margin-top: 1.5em; }
.article-body p { color: var(--charcoal-soft); }
.article-share { display: flex; gap: 10px; }
.article-share a {
  width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid var(--stone-deep);
  display: flex; align-items: center; justify-content: center;
  color: var(--charcoal-soft);
}
.article-share a svg { width: 14px; height: 14px; }
.article-nav {
  display: flex; justify-content: space-between; gap: 20px;
  border-top: 1px solid var(--stone); padding-top: 28px; margin-top: 40px;
}
.article-nav a { max-width: 45%; }
.article-nav .label { display: block; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.6px; color: var(--brass-deep); margin-bottom: 6px; }
.article-nav .title { font-family: var(--font-display); font-size: 1.02rem; }
.article-nav .next { text-align: right; margin-left: auto; }

/* ==========================================================================
   CONTACT / FORM
   ========================================================================== */
.form-field { margin-bottom: 20px; }
.form-field label { display: block; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.4px; text-transform: uppercase; margin-bottom: 8px; color: var(--charcoal-soft); }
.form-field input, .form-field textarea, .form-field select {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--stone-deep);
  border-radius: var(--radius);
  background: var(--linen-light);
  color: var(--charcoal);
  outline: none;
  transition: border-color 0.2s var(--ease);
  font-family: var(--font-body);
  font-size: 0.92rem;
}
.form-field input:focus, .form-field textarea:focus, .form-field select:focus { border-color: var(--brass); }
.form-field select {
  appearance: none;
  -webkit-appearance: none;
  /* The chevron SVG has no explicit width/height, so without an explicit
     background-size it falls back to the CSS spec's 300x150px default
     "natural size" for a sizeless SVG used as a background-image -- a
     huge, badly-cropped arrow instead of the small one intended. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23454744' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 11px 8px;
  padding-right: 40px;
  cursor: pointer;
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 600px) { .form-row { grid-template-columns: 1fr; } }
.form-check { display: flex; align-items: flex-start; gap: 10px; font-size: 0.82rem; color: var(--charcoal-soft); margin-bottom: 24px; }
.form-check input { margin-top: 3px; }

.office-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
@media (max-width: 700px) { .office-grid { grid-template-columns: 1fr; } }
.office-card {
  background: var(--linen-light);
  border: 1px solid var(--stone);
  border-radius: var(--radius);
  padding: 32px 28px;
}
.office-card .icon-badge { margin-bottom: 16px; }
.office-card h3 { margin-bottom: 10px; }
.office-card p { color: var(--charcoal-soft); font-size: 0.94rem; line-height: 1.6; margin-bottom: 18px; }

.contact-item { display: flex; gap: 16px; align-items: flex-start; padding: 20px 0; border-bottom: 1px solid var(--stone-light); }
.contact-item:last-child { border-bottom: none; }
.contact-item .icon-badge { width: 44px; height: 44px; flex-shrink: 0; }
.contact-item .icon-badge svg { width: 18px; height: 18px; }
.contact-item h4 { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.5px; color: var(--charcoal-soft); margin-bottom: 4px; }
.contact-item p { font-size: 0.98rem; color: var(--charcoal); }

.map-panel {
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--stone);
  min-height: 280px;
  background-color: var(--linen-light);
  background-image:
    linear-gradient(128deg, transparent 44%, rgba(169,132,74,0.22) 44%, rgba(169,132,74,0.22) 47.5%, transparent 47.5%),
    linear-gradient(35deg, transparent 60%, rgba(169,132,74,0.16) 60%, rgba(169,132,74,0.16) 63%, transparent 63%),
    repeating-linear-gradient(0deg, var(--stone) 0, var(--stone) 1px, transparent 1px, transparent 40px),
    repeating-linear-gradient(90deg, var(--stone) 0, var(--stone) 1px, transparent 1px, transparent 40px);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.map-panel .pin { display: flex; flex-direction: column; align-items: center; gap: 8px; position: relative; z-index: 1; }
.map-panel .pin-dot {
  width: 54px; height: 54px; border-radius: 50%;
  background: rgba(169,132,74,0.14);
  display: flex; align-items: center; justify-content: center;
}
.map-panel .pin svg { width: 32px; height: 32px; color: var(--brass-deep); }
.map-panel .pin span { font-size: 0.78rem; font-weight: 600; color: var(--charcoal); background: var(--linen); padding: 6px 14px; border-radius: 20px; border: 1px solid var(--stone); box-shadow: 0 4px 10px rgba(40,43,41,0.08); }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer { background: var(--charcoal); color: var(--stone-light); padding-top: 76px; }
.footer-top {
  display: grid;
  /* max-content (not the old 1.3fr/1fr/1.1fr) sizes each column to its own
     content instead of an arbitrary fraction -- Brand and Get in Touch have
     noticeably more/less content width than Quick Links, so fr-based
     columns left uneven leftover space inside each cell and made Quick
     Links look off-center between its neighbours.
     justify-content:space-between is exactly right here and should stay:
     with 3 items it places Brand flush at the start, the last item flush
     at the end, and splits the leftover width into the two INTERNAL gaps
     equally -- which is precisely "Quick Links gets equal margin on both
     sides" for free, with zero extra CSS. Brand's position is untouched by
     any of this (still flush left). The only real problem was the END
     edge: Get in Touch was landing flush against .container's own 25px
     padding (client wants 85px of margin from the true right edge
     instead) -- fixed below with an extra 60px of padding-right on this
     grid itself (25 + 60 = 85), which also pulls Get in Touch's flush
     end-edge left, and since space-between keeps Quick Links equidistant
     from both neighbours, Quick Links' position adjusts to match
     automatically -- no separate rule needed for it. */
  grid-template-columns: max-content max-content max-content;
  justify-content: space-between;
  gap: 40px;
  padding-bottom: 56px;
  padding-right: 60px;
  border-bottom: 1px solid rgba(242,238,230,0.1);
}
@media (max-width: 980px) { .footer-top { grid-template-columns: 1fr 1fr; justify-content: normal; gap: 40px; padding-right: 0; } }
@media (max-width: 560px) { .footer-top { grid-template-columns: 1fr; justify-content: normal; gap: 36px; padding-right: 0; } }
.footer-brand .brand { margin-bottom: 16px; }
/* .brand-text strong/span read var(--header-text)/var(--header-accent),
   which is now the LIGHT header's dark-charcoal/brass-deep pair (see
   HEADER THEME above) — invisible (dark-on-dark) on the footer's own
   permanently-dark charcoal background, regardless of what the header
   theme is set to. Force the footer's own logo colors explicitly rather
   than inheriting the header theme variables. */
.footer-brand .brand-text strong { color: var(--linen); }
.footer-brand .brand-text span { color: var(--brass-light); }
.footer-brand p { font-size: 0.86rem; color: var(--stone); max-width: 260px; }
.footer-col h5 { font-size: 0.74rem; letter-spacing: 1.2px; text-transform: uppercase; color: var(--brass-light); margin-bottom: 18px; }
.footer-col a { display: block; padding: 7px 0; font-size: 0.86rem; color: var(--stone-light); transition: color 0.2s var(--ease); }
.footer-col a:hover { color: var(--brass-light); }
/* Quick Links is the only plain .footer-col (Get in Touch carries the
   extra .footer-contact class). It now sits first/leftmost in .footer-top
   (moved from the middle column on request) and carries the extra
   .footer-quicklinks class so it can be targeted independently of Get in
   Touch/Brand if it ever needs its own tweaks. */
/* Quick Links: three explicit columns of two links each (The Firm/Sectors,
   Partners/Practice, Insights/Contact) -- not a CSS Grid auto-flow, so
   each column reads top-to-bottom as its own list (2 rows x 3 columns). */
.footer-links-grid { display: flex; gap: 32px; }
.footer-links-col { display: flex; flex-direction: column; }
@media (max-width: 640px) {
  .footer-links-grid { flex-direction: column; gap: 0; }
}
.footer-contact div, .footer-contact a.footer-contact-link { display: flex; gap: 10px; margin-bottom: 14px; font-size: 0.84rem; color: var(--stone-light); transition: color 0.2s var(--ease); }
.footer-contact a.footer-contact-link:hover { color: var(--brass-light); }
.footer-contact svg { width: 15px; height: 15px; color: var(--brass-light); flex-shrink: 0; margin-top: 2px; }
.footer-bottom {
  display: flex; justify-content: space-between; align-items: center;
  padding: 24px 0; font-size: 0.78rem; color: var(--stone-deep); flex-wrap: wrap; gap: 12px;
}
.footer-bottom .legal-links { display: flex; gap: 20px; flex-wrap: wrap; }
.footer-bottom .legal-links a:hover { color: var(--brass-light); }

/* ==========================================================================
   LEGAL PAGES (Disclaimer / Privacy / Terms)
   ========================================================================== */
.legal-section { display: flex; gap: 22px; padding: 32px 0; border-bottom: 1px solid var(--stone-light); }
.legal-section:last-child { border-bottom: none; }
.legal-section .num-badge {
  width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
  background: var(--linen-deep); color: var(--brass-deep);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 600;
}
.legal-section h3 { font-size: 1.15rem; margin-bottom: 10px; }
.legal-section p, .legal-section li { color: var(--charcoal-soft); font-size: 0.92rem; }
.legal-section ul { margin: 10px 0 0 0; }
.legal-section li { padding: 5px 0 5px 18px; position: relative; }
.legal-section li::before { content: "—"; position: absolute; left: 0; color: var(--brass); }

/* ==========================================================================
   CTA BAND
   ========================================================================== */
.cta-band {
  background: var(--linen-deep);
  border-radius: var(--radius);
  padding: 40px 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.cta-band p { font-family: var(--font-display); font-size: 1.2rem; margin: 0; max-width: 560px; }

/* Careers */
.job-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 26px 30px;
  background: var(--linen-light);
  border: 1px solid var(--stone);
  border-radius: var(--radius);
  margin-bottom: 14px;
}
.job-row .meta { display: flex; gap: 14px; flex-wrap: wrap; font-size: 0.78rem; color: var(--charcoal-soft); margin: 8px 0; }
.job-row .meta span { display: flex; align-items: center; gap: 5px; }
.job-row .meta svg { width: 13px; height: 13px; color: var(--brass); }
.job-desc { max-width: 480px; font-size: 0.86rem; color: var(--charcoal-soft); }
@media (max-width: 760px) { .job-row { flex-direction: column; align-items: flex-start; } }

/* Firm profile download */
.download-panel {
  background: var(--charcoal);
  color: var(--linen);
  border-radius: var(--radius);
  padding: 56px;
  display: flex;
  align-items: center;
  gap: 48px;
  flex-wrap: wrap;
}
.book-mock {
  width: 150px; height: 200px;
  background: linear-gradient(160deg, #1c1e1c, #2f322c);
  border: 1px solid var(--brass-deep);
  border-radius: 2px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; flex-shrink: 0;
  box-shadow: 6px 6px 0 rgba(169,132,74,0.15);
}
.book-mock svg { width: 34px; height: 34px; color: var(--brass-light); }
.book-mock span { font-family: var(--font-display); font-size: 0.85rem; letter-spacing: 1px; color: var(--brass-light); text-transform: uppercase; }

/* ==========================================================================
   MOTION SYSTEM — scroll reveals, staggered grids, hero signature, texture
   ========================================================================== */

/* fade-in on scroll */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* grids reveal by staggering their children rather than fading as one flat block */
.reveal.grid-2, .reveal.grid-3, .reveal.grid-4 {
  opacity: 1;
  transform: none;
  transition: none;
}
.reveal.grid-2 > *, .reveal.grid-3 > *, .reveal.grid-4 > * {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}
.reveal.is-visible.grid-2 > *, .reveal.is-visible.grid-3 > *, .reveal.is-visible.grid-4 > * {
  opacity: 1;
  transform: translateY(0);
}

/* long-form text: headings/paragraphs fade up one by one as the reader scrolls to them */
.text-reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.65s var(--ease), transform 0.65s var(--ease); }
.text-reveal.is-visible { opacity: 1; transform: translateY(0); }

/* hero signature: fluted line-art and column bars draw / rise into place on load */
.hero-art svg .draw-in {
  stroke-dashoffset: var(--dash, 0);
  transition: stroke-dashoffset 1.1s var(--ease);
}
.hero-art svg .rise-in {
  transform: scaleY(0);
  transform-box: fill-box;
  transition: transform 0.7s var(--ease);
}
.hero-art svg .rise-in--x {
  transform: scaleX(0);
  transform-box: fill-box;
  transition: transform 0.7s var(--ease);
}
.hero-art svg.is-drawn .draw-in { stroke-dashoffset: 0; }
.hero-art svg.is-drawn .rise-in,
.hero-art svg.is-drawn .rise-in--x { transform: scale(1); }
.hero-content.reveal { transition-delay: 0.15s; }

/* subtle linen grain — an editorial, tactile texture; never a gradient or metallic sheen */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 999;
  pointer-events: none;
  opacity: 0.035;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* premium detail: brass text selection, visible focus ring */
::selection { background: var(--brass); color: var(--white); }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: 3px;
}

/* mobile menu items cascade in rather than snapping open together */
.mobile-item {
  opacity: 0;
  transform: translateX(16px);
  transition: opacity 0.35s var(--ease), transform 0.35s var(--ease);
}
.mobile-menu.is-open .mobile-item { opacity: 1; transform: translateX(0); }
.mobile-menu.is-open .mobile-item:nth-child(1) { transition-delay: 0.05s; }
.mobile-menu.is-open .mobile-item:nth-child(2) { transition-delay: 0.1s; }
.mobile-menu.is-open .mobile-item:nth-child(3) { transition-delay: 0.15s; }
.mobile-menu.is-open .mobile-item:nth-child(4) { transition-delay: 0.2s; }
.mobile-menu.is-open .mobile-item:nth-child(5) { transition-delay: 0.25s; }
.mobile-menu.is-open .mobile-item:nth-child(6) { transition-delay: 0.3s; }
.mobile-actions { opacity: 0; transition: opacity 0.35s var(--ease); }
.mobile-menu.is-open .mobile-actions { opacity: 1; transition-delay: 0.32s; }

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal.grid-2 > *, .reveal.grid-3 > *, .reveal.grid-4 > *, .text-reveal { opacity: 1; transform: none; transition: none; }
  .hero-art svg .draw-in, .hero-art svg .rise-in, .hero-art svg .rise-in--x { stroke-dashoffset: 0; transform: none; transition: none; }
  .mobile-item { opacity: 1; transform: none; }
  .principle, .practice-card, .sector-card, .insight-card, .partner-card { transform: none !important; }
  body::before { display: none; }
  html { scroll-behavior: auto; }
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}