/* =========================================================
   Le Shell Legal — Design System
   Palette sampled from the firm's own scales-of-justice mark
   (deep pine green + antique gold) rather than a generic
   navy/gold template.
   Fonts: Playfair Display (headings, editorial serif) + Raleway (body/UI)
   ========================================================= */

:root {
  --navy: #0f3324;        /* primary brand color (deep green) — var name kept as --navy so it doesn't touch every rule that references it */
  --navy-dark: #071f16;   /* darkest shade, header/footer/hero base */
  --navy-soft: #2c5a40;   /* lighter shade for gradients/hover */
  --gold: #b98a34;        /* decorative gold — borders, icons, large type */
  --gold-light: #e8c983;  /* gold for text on dark backgrounds (AA) */
  --gold-dark: #7a5a1e;   /* gold for text on light backgrounds (AA) */
  --cream: #faf7f0;
  --cream-dark: #f1e9d6;
  --text: #1c211d;
  --muted: #57625c;
  --white: #ffffff;
  --border: #e3dcc8;
  --shadow: 0 20px 45px -20px rgba(7,31,22, 0.28);
  --shadow-sm: 0 8px 24px -12px rgba(7,31,22, 0.2);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur: 0.6s;
}

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

html { scroll-behavior: smooth; }

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

/* ---------- Accessibility: focus & skip link ---------- */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 2px;
}
.skip-link {
  position: absolute;
  left: 16px;
  top: -60px;
  background: var(--navy-dark);
  color: var(--white);
  padding: 12px 20px;
  border-radius: 4px;
  font-size: 0.9rem;
  z-index: 999;
  transition: top 0.25s var(--ease);
}
.skip-link:focus { top: 16px; }

/* ---------- Legal / prose pages ---------- */
.legal-prose { max-width: 780px; }
.legal-prose h2 { font-size: 1.4rem; margin: 44px 0 14px; }
.legal-prose h2:first-child { margin-top: 0; }
.legal-prose p { color: var(--muted); margin-bottom: 14px; }
.legal-prose ul { margin: 0 0 14px 22px; color: var(--muted); }
.legal-prose li { margin-bottom: 8px; }
.legal-prose .updated-note { color: var(--muted); font-size: 0.85rem; margin-bottom: 40px; }
.legal-notice-banner {
  background: var(--cream-dark);
  border: 1px solid var(--border);
  border-left: 3px solid var(--gold);
  border-radius: 6px;
  padding: 20px 24px;
  margin-bottom: 44px;
  font-size: 0.92rem;
  color: var(--text);
}

/* ---------- 404 page ---------- */
.error-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  background: linear-gradient(120deg, var(--navy-dark) 0%, var(--navy) 60%, var(--navy-soft) 120%);
  color: var(--white);
  padding: 140px 0 80px;
  text-align: center;
}
.error-page .error-code {
  font-family: "Playfair Display", serif;
  font-style: italic;
  font-size: clamp(4rem, 12vw, 7.5rem);
  color: var(--gold-light);
  line-height: 1;
  margin-bottom: 10px;
}
.error-page h1 { color: var(--white); font-size: clamp(1.6rem, 3.2vw, 2.3rem); max-width: 620px; margin: 0 auto 16px; }
.error-page p { color: #cfe4d6; max-width: 480px; margin: 0 auto 36px; }
.error-page .eyebrow {
  display: inline-flex;
  text-transform: uppercase;
  letter-spacing: 3px;
  font-size: 0.78rem;
  color: var(--gold-light);
  margin-bottom: 28px;
}

body {
  font-family: "Raleway", "Helvetica Neue", Arial, sans-serif;
  color: var(--text);
  background: var(--white);
  line-height: 1.7;
  overflow-x: hidden;
}

em, .accent {
  font-style: italic;
  color: var(--gold-dark);
  font-family: "Playfair Display", "Georgia", serif;
}
section.dark em, .hero em, .page-hero em { color: var(--gold-light); }

h1, h2, h3, h4 {
  font-family: "Playfair Display", "Georgia", serif;
  font-weight: 600;
  color: var(--navy);
  line-height: 1.22;
  letter-spacing: -0.01em;
}

a { color: inherit; text-decoration: none; }

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

.container {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------- Reveal-on-scroll ---------- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal-scale {
  opacity: 0;
  transform: scale(0.94);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.reveal-scale.visible {
  opacity: 1;
  transform: scale(1);
}
.stagger > * {
  transition-delay: calc(var(--i, 0) * 90ms);
}

/* ---------- Header ---------- */
header.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 200;
  background: transparent;
  transition: background var(--dur) var(--ease), box-shadow var(--dur) var(--ease), padding var(--dur) var(--ease);
  padding: 26px 0;
}

header.site-header.scrolled {
  background: rgba(7,31,22, 0.96);
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 30px -18px rgba(0,0,0,0.5);
  padding: 14px 0;
}

body:not(.has-hero) header.site-header {
  background: rgba(7,31,22, 0.96);
  backdrop-filter: blur(10px);
  padding: 16px 0;
}

.nav-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo {
  font-family: "Playfair Display", serif;
  font-size: 1.18rem;
  font-weight: 600;
  letter-spacing: 0.2px;
  color: var(--white);
  display: flex;
  align-items: center;
  gap: 11px;
  white-space: nowrap;
}

.logo img.logo-mark {
  height: 34px;
  width: auto;
  display: block;
  flex-shrink: 0;
  transition: transform 0.4s var(--ease);
}
.logo:hover img.logo-mark { transform: rotate(-4deg); }

.logo .logo-text { display: flex; flex-direction: column; line-height: 1.25; }
.logo .logo-text .wordmark { white-space: nowrap; }
.logo .logo-text small {
  font-family: "Raleway", sans-serif;
  font-size: 0.56rem;
  font-weight: 500;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--gold-light);
  opacity: 0.8;
  white-space: nowrap;
}

.logo span { color: var(--gold-light); margin-left: 0.28em; }

.footer-top .logo img.logo-mark { height: 38px; }
.footer-top .logo { font-size: 1.15rem; }

nav ul {
  list-style: none;
  display: flex;
  gap: 40px;
}

nav a {
  position: relative;
  font-size: 0.92rem;
  letter-spacing: 0.4px;
  color: rgba(255,255,255,0.88);
  padding: 4px 0;
  transition: color 0.25s var(--ease);
}

nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 0;
  height: 1.5px;
  background: var(--gold);
  transition: width 0.3s var(--ease);
}

nav a:hover,
nav a.active {
  color: var(--white);
}

nav a:hover::after,
nav a.active::after {
  width: 100%;
}

.nav-toggle {
  display: none;
  background: none;
  border: none;
  color: var(--white);
  font-size: 1.6rem;
  cursor: pointer;
  position: relative;
  width: 34px;
  height: 34px;
}
.nav-toggle .icon-bars, .nav-toggle .icon-close { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); transition: opacity 0.25s var(--ease), transform 0.25s var(--ease); }
.nav-toggle .icon-close { opacity: 0; transform: translate(-50%,-50%) rotate(-90deg); }
body.nav-open .nav-toggle .icon-bars { opacity: 0; transform: translate(-50%,-50%) rotate(90deg); }
body.nav-open .nav-toggle .icon-close { opacity: 1; transform: translate(-50%,-50%) rotate(0deg); }

.nav-scrim {
  display: none;
  position: fixed;
  inset: 0;
  /* Explicit viewport units instead of relying on top:0/bottom:0 to resolve
     height: on interior pages the header gets backdrop-filter (see
     body:not(.has-hero) header.site-header above), and a filter on an
     ancestor makes that ancestor the containing block for this element's
     fixed position — collapsing the scrim down to the header's own height
     instead of the full screen. Pinning the size to the viewport directly
     sidesteps that. */
  width: 100vw;
  height: 100vh;
  background: rgba(4,15,10,0.55);
  backdrop-filter: blur(2px);
  z-index: 199;
  opacity: 0;
  transition: opacity 0.35s var(--ease);
}
body.nav-open .nav-scrim { display: block; opacity: 1; }
body.nav-open { overflow: hidden; }

/* ---------- Buttons ---------- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.4px;
  padding: 15px 34px;
  border-radius: 3px;
  border: 1px solid var(--gold);
  overflow: hidden;
  transition: color 0.35s var(--ease), border-color 0.35s var(--ease), transform 0.25s var(--ease), box-shadow .35s var(--ease);
  cursor: pointer;
  z-index: 1;
}

.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s var(--ease);
  z-index: -1;
}

.btn-primary {
  background: var(--gold);
  color: var(--navy-dark);
}
.btn-primary::before { background: var(--navy); transform-origin: right; }
.btn-primary:hover {
  color: var(--white);
  transform: translateY(-2px);
  box-shadow: 0 14px 30px -12px rgba(193, 154, 73, 0.55);
}
.btn-primary:hover::before { transform: scaleX(1); }

.btn-outline {
  background: transparent;
  color: var(--white);
  border-color: rgba(255,255,255,0.55);
}
.btn-outline::before { background: var(--white); }
.btn-outline:hover {
  color: var(--navy);
  border-color: var(--white);
  transform: translateY(-2px);
}
.btn-outline:hover::before { transform: scaleX(1); }

.btn-dark {
  background: transparent;
  color: var(--navy);
  border-color: var(--navy);
}
.btn-dark::before { background: var(--navy); }
.btn-dark:hover {
  color: var(--white);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}
.btn-dark:hover::before { transform: scaleX(1); }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  background:
    linear-gradient(120deg, rgba(7,31,22,0.94) 0%, rgba(15,51,36,0.88) 55%, rgba(15,51,36,0.75) 100%),
    radial-gradient(circle at 80% 20%, rgba(193,154,73,0.18), transparent 45%);
  color: var(--white);
  overflow: hidden;
}

.hero::after {
  content: "";
  position: absolute;
  right: -10%;
  top: 50%;
  width: 620px;
  height: 620px;
  border: 1px solid rgba(230,205,143,0.18);
  border-radius: 50%;
  transform: translateY(-50%);
  animation: spin 60s linear infinite;
}

.hero::before {
  content: "";
  position: absolute;
  right: 4%;
  top: 50%;
  width: 420px;
  height: 420px;
  border: 1px solid rgba(230,205,143,0.28);
  border-radius: 50%;
  transform: translateY(-50%);
  animation: spin 40s linear infinite reverse;
}

@keyframes spin {
  from { transform: translateY(-50%) rotate(0deg); }
  to   { transform: translateY(-50%) rotate(360deg); }
}

.hero-inner {
  position: relative;
  z-index: 2;
  padding-top: 90px;
}

.hero .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-transform: uppercase;
  letter-spacing: 3px;
  font-size: 0.78rem;
  color: var(--gold-light);
  margin-bottom: 22px;
}
.hero .eyebrow::before {
  content: "";
  width: 34px;
  height: 1px;
  background: var(--gold-light);
}

.hero h1 {
  font-size: clamp(2.6rem, 5.6vw, 4.1rem);
  font-weight: 700;
  letter-spacing: -0.5px;
  color: var(--white);
  max-width: 820px;
  margin-bottom: 24px;
}

.hero h1 em {
  font-style: italic;
  color: var(--gold-light);
}

.hero p.lead {
  font-size: 1.12rem;
  max-width: 560px;
  color: #cfe4d6;
  margin-bottom: 40px;
}

.hero-cta {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  margin-bottom: 70px;
}

.hero-stats {
  display: flex;
  gap: 56px;
  flex-wrap: wrap;
  border-top: 1px solid rgba(255,255,255,0.15);
  padding-top: 34px;
}

.hero-stats .stat-num {
  font-family: "Playfair Display", serif;
  font-size: 2.1rem;
  color: var(--gold-light);
  display: flex;
  align-items: baseline;
  gap: 2px;
  font-variant-numeric: lining-nums proportional-nums;
  font-feature-settings: "lnum" 1, "pnum" 1;
}

.hero-stats .stat-label {
  font-size: 0.82rem;
  color: #b7d1c0;
  letter-spacing: 0.4px;
  margin-top: 4px;
}

.scroll-cue {
  position: absolute;
  bottom: 36px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: rgba(255,255,255,0.65);
  font-size: 0.72rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  z-index: 2;
}
.scroll-cue .line {
  width: 1px;
  height: 34px;
  background: linear-gradient(to bottom, var(--gold-light), transparent);
  animation: cueMove 1.8s ease-in-out infinite;
}
@keyframes cueMove {
  0% { transform: scaleY(0.4); opacity: 0.4; }
  50% { transform: scaleY(1); opacity: 1; }
  100% { transform: scaleY(0.4); opacity: 0.4; }
}

/* ---------- Page header (non-home hero) ---------- */
.page-hero {
  background: linear-gradient(120deg, var(--navy-dark), var(--navy) 60%, var(--navy-soft));
  color: var(--white);
  padding: 190px 0 90px;
  position: relative;
  overflow: hidden;
}
.page-hero::after {
  content: "";
  position: absolute;
  right: -8%;
  top: -20%;
  width: 420px;
  height: 420px;
  border: 1px solid rgba(230,205,143,0.16);
  border-radius: 50%;
}
.page-hero .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-transform: uppercase;
  letter-spacing: 3px;
  font-size: 0.78rem;
  color: var(--gold-light);
  margin-bottom: 18px;
}
.page-hero .eyebrow::before {
  content: "";
  width: 34px;
  height: 1px;
  background: var(--gold-light);
}
.page-hero h1 { color: var(--white); font-size: clamp(2.1rem, 4vw, 2.9rem); max-width: 720px; }
.page-hero p { color: #cfe4d6; max-width: 620px; margin-top: 18px; font-size: 1.05rem; }
.breadcrumb {
  margin-top: 28px;
  font-size: 0.82rem;
  color: #9fc2ab;
  letter-spacing: 0.4px;
}
.breadcrumb a { color: var(--gold-light); }
.breadcrumb a:hover { text-decoration: underline; }

/* ---------- Sections ---------- */
section { padding: 110px 0; }
section.tight { padding: 80px 0; }
section.alt { background: var(--cream); }
section.dark {
  background: linear-gradient(120deg, var(--navy-dark), var(--navy));
  color: var(--white);
}
section.dark h2, section.dark h3 { color: var(--white); }

.section-heading {
  max-width: 640px;
  margin: 0 auto 56px;
  text-align: center;
}
.section-heading.left { margin-left: 0; text-align: left; }

.eyebrow-tag {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: var(--gold-dark);
  font-size: 0.78rem;
  font-weight: 700;
  margin-bottom: 14px;
}
.eyebrow-tag::before {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--gold-dark);
}
section.dark .eyebrow-tag { color: var(--gold-light); }
section.dark .eyebrow-tag::before { background: var(--gold-light); }

.section-heading h2 { font-size: clamp(1.9rem, 3.4vw, 2.5rem); }
.section-heading p { color: var(--muted); margin-top: 16px; font-size: 1.02rem; }

/* ---------- Grids & Cards ---------- */
.grid { display: grid; gap: 30px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

.card {
  background: var(--white);
  border: 1px solid var(--border);
  padding: 40px 32px;
  border-radius: 8px;
  display: block;
  text-decoration: none;
  color: inherit;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), border-color 0.4s var(--ease);
}
/* Interactive cards (practice-area teasers) — whole card is a link */
.card--link { cursor: pointer; }
.card:not(.card--static):hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow);
  border-color: transparent;
}
/* Static/informational cards (e.g. "Why Clients Choose Us") — no click target,
   so the hover reads as a gentle highlight rather than a false affordance */
.card--static { cursor: default; }
.card--static:hover {
  border-color: var(--gold-light);
}

.icon-badge {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--cream);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 22px;
  color: var(--navy);
  transition: background 0.4s var(--ease), transform 0.4s var(--ease);
}
.icon-badge svg { width: 26px; height: 26px; stroke: var(--navy); transition: stroke 0.4s var(--ease); }
.card:hover .icon-badge {
  background: var(--gold);
  transform: rotate(-8deg) scale(1.08);
}
.card:hover .icon-badge svg { stroke: var(--white); }

.card h3 { font-size: 1.2rem; margin-bottom: 12px; }
.card p { color: var(--muted); font-size: 0.96rem; }

.card-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 18px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--navy);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s var(--ease), color 0.3s var(--ease), gap 0.3s var(--ease);
}
.card-link svg { width: 14px; height: 14px; transition: transform 0.3s var(--ease); }
.card:hover .card-link { color: var(--gold-dark); border-color: var(--gold-dark); }
.card:hover .card-link svg { transform: translateX(4px); }

/* ---------- Featured / editorial highlight section ---------- */
.featured {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--navy-dark) 0%, var(--navy) 55%, var(--navy-soft) 120%);
  color: var(--white);
}
.featured::before {
  content: "";
  position: absolute;
  left: -12%;
  top: -30%;
  width: 560px;
  height: 560px;
  background: radial-gradient(circle, rgba(230,205,143,0.14), transparent 65%);
  pointer-events: none;
}
.featured-head {
  display: flex;
  align-items: flex-start;
  gap: 40px;
  flex-wrap: wrap;
  margin-bottom: 52px;
  position: relative;
  z-index: 1;
}
.featured-label {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
  margin-top: 10px;
}
.featured-label .rule { width: 1px; height: 44px; background: var(--gold-light); opacity: 0.5; }
.featured-label span {
  text-transform: uppercase;
  letter-spacing: 3px;
  font-size: 0.8rem;
  color: #b7d1c0;
}
.featured-head h2 {
  color: var(--white);
  font-size: clamp(1.9rem, 3.6vw, 2.9rem);
  font-weight: 700;
  max-width: 640px;
  line-height: 1.25;
}
.featured-head h2 em { color: var(--gold-light); }

.featured-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  position: relative;
  z-index: 1;
}
.feature-card {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 4px;
  padding: 30px 28px 90px;
  position: relative;
  min-height: 230px;
  transition: background 0.4s var(--ease), border-color 0.4s var(--ease), transform 0.4s var(--ease);
}
.feature-card:hover {
  background: rgba(255,255,255,0.09);
  border-color: rgba(230,205,143,0.45);
  transform: translateY(-6px);
}
.feature-card .tag {
  display: block;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 0.72rem;
  color: var(--gold-light);
  margin-bottom: 18px;
}
.feature-card h3 {
  color: var(--white);
  font-weight: 600;
  font-size: 1.22rem;
  line-height: 1.45;
  max-width: 92%;
}
.feature-arrow {
  position: absolute;
  right: 22px;
  bottom: 22px;
  width: 46px;
  height: 46px;
  background: var(--gold-light);
  color: var(--navy-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
  transition: transform 0.35s var(--ease), background 0.35s var(--ease);
}
.feature-arrow svg { width: 19px; height: 19px; }
.feature-card:hover .feature-arrow { background: var(--gold); transform: rotate(45deg); }

.featured-foot {
  display: flex;
  justify-content: flex-end;
  margin-top: 40px;
  position: relative;
  z-index: 1;
}
.featured-all-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--gold-light);
  color: var(--navy-dark);
  padding: 15px 24px;
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.3px;
  border-radius: 3px;
  transition: background 0.3s var(--ease), transform 0.3s var(--ease);
}
.featured-all-link svg { width: 15px; height: 15px; }
.featured-all-link:hover { background: var(--gold); transform: translateY(-3px); }

@media (max-width: 860px) {
  .featured-grid { grid-template-columns: 1fr; }
  .featured-head { align-items: flex-start; }
}

@media (max-width: 640px) {
  /* Right-aligned on desktop, but on phones that puts it directly under the
     fixed WhatsApp/back-to-top buttons, so its right edge (and arrow icon)
     ends up covered and untappable. Centering it keeps it clear of them. */
  .featured-foot { justify-content: center; }
  .featured-all-link { width: 100%; justify-content: center; }
}

/* ---------- Stats ---------- */
.stats-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  text-align: center;
}
.stat-block .num {
  font-family: "Playfair Display", serif;
  font-size: 2.6rem;
  color: var(--gold);
  font-variant-numeric: lining-nums proportional-nums;
  font-feature-settings: "lnum" 1, "pnum" 1;
}
.stat-block .label {
  margin-top: 10px;
  font-size: 0.88rem;
  letter-spacing: 0.4px;
  color: var(--muted);
}
section.dark .stat-block .label { color: #b7d1c0; }

/* ---------- About / split sections ---------- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 70px;
  align-items: center;
}
.split img,
.split .media-frame {
  border-radius: 8px;
}
.media-frame {
  position: relative;
  aspect-ratio: 4/5;
  background: linear-gradient(140deg, var(--navy), var(--navy-soft));
  border-radius: 8px;
  overflow: hidden;
}
.media-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(7,31,22,0.1) 0%, rgba(7,31,22,0.6) 100%);
  z-index: 1;
  pointer-events: none;
}
.media-frame .frame-label {
  position: absolute;
  bottom: 24px;
  left: 24px;
  right: 24px;
  color: var(--white);
  font-family: "Playfair Display", serif;
  font-size: 1.3rem;
  z-index: 2;
}
.media-frame--photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s var(--ease);
}
.media-frame--photo:hover img { transform: scale(1.05); }

.media-frame .frame-tag {
  position: absolute;
  top: 24px;
  left: 24px;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.25);
  padding: 6px 14px;
  border-radius: 30px;
  font-size: 0.75rem;
  letter-spacing: 0.5px;
  color: var(--white);
  z-index: 2;
  backdrop-filter: blur(4px);
}

.split-content .eyebrow-tag { margin-bottom: 16px; }
.split-content h2 { margin-bottom: 20px; font-size: clamp(1.8rem, 3vw, 2.3rem); }
.split-content p { color: var(--muted); margin-bottom: 18px; }

.check-list { list-style: none; margin-top: 26px; display: grid; gap: 14px; }
.check-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 0.96rem;
  color: var(--text);
}
.check-list svg {
  width: 20px; height: 20px; flex-shrink: 0; margin-top: 2px;
  stroke: var(--gold);
}

/* ---------- Team ---------- */
.team-card { text-align: center; }
.team-photo {
  aspect-ratio: 1;
  border-radius: 10px;
  background: linear-gradient(150deg, var(--navy), var(--navy-soft));
  position: relative;
  overflow: hidden;
  margin-bottom: 20px;
}
.team-photo::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 70% 20%, rgba(193,154,73,0.3), transparent 55%);
}
.team-photo .initials {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Playfair Display", serif;
  font-size: 2.4rem;
  color: rgba(255,255,255,0.85);
}
.team-social {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translate(-50%, 14px);
  display: flex;
  gap: 10px;
  opacity: 0;
  transition: opacity 0.35s var(--ease), transform 0.35s var(--ease);
}
.team-card:hover .team-social { opacity: 1; transform: translate(-50%, 0); }
.team-social a {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: rgba(255,255,255,0.15);
  backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  color: var(--white);
  border: 1px solid rgba(255,255,255,0.3);
  transition: background 0.3s var(--ease);
}
.team-social a:hover { background: var(--gold); }
.team-social svg { width: 15px; height: 15px; }
.team-card h3 { font-size: 1.1rem; margin-bottom: 4px; }
.team-card .role { color: var(--gold-dark); font-size: 0.85rem; letter-spacing: 0.4px; margin-bottom: 10px; }
.team-card p.bio { color: var(--muted); font-size: 0.9rem; }

/* ---------- Testimonial ---------- */
.testimonial {
  max-width: 780px;
  margin: 0 auto;
  text-align: center;
}
.testimonial .quote-mark {
  font-family: "Playfair Display", serif;
  font-size: 5rem;
  color: var(--gold-light);
  line-height: 1;
  margin-bottom: 10px;
}
.testimonial p.quote {
  font-family: "Playfair Display", serif;
  font-size: 1.5rem;
  color: var(--white);
  font-style: italic;
  margin-bottom: 28px;
}
.testimonial .author { color: var(--gold-light); font-size: 0.9rem; letter-spacing: 0.4px; }
.testimonial .author span { color: #b7d1c0; display: block; font-size: 0.8rem; margin-top: 4px; }

/* ---------- Logos / achievements strip ---------- */
.logo-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 30px;
  opacity: 0.75;
}
.logo-chip {
  font-family: "Playfair Display", serif;
  font-size: 1.1rem;
  color: var(--navy);
  letter-spacing: 0.5px;
  border: 1px solid var(--border);
  padding: 14px 26px;
  border-radius: 6px;
  transition: opacity 0.3s var(--ease), border-color .3s var(--ease);
}
.logo-chip:hover { opacity: 1; border-color: var(--gold); }

/* ---------- CTA banner ---------- */
.cta-banner {
  background: linear-gradient(120deg, var(--navy-dark), var(--navy) 60%, var(--navy-soft));
  color: var(--white);
  border-radius: 14px;
  padding: 70px 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
  position: relative;
  overflow: hidden;
}
.cta-banner::after {
  content: "";
  position: absolute;
  right: -6%;
  top: -30%;
  width: 320px;
  height: 320px;
  border: 1px solid rgba(230,205,143,0.2);
  border-radius: 50%;
}
.cta-banner h2 { color: var(--white); font-size: clamp(1.6rem, 3vw, 2.1rem); max-width: 480px; position: relative; z-index: 1; }
.cta-banner p { color: #cfe4d6; margin-top: 12px; position: relative; z-index: 1; }
.cta-banner .btn { position: relative; z-index: 1; }

/* ---------- Form ---------- */
form.contact-form { display: grid; gap: 20px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
form.contact-form label {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--navy);
  display: block;
  margin-bottom: 8px;
  font-weight: 600;
}
form.contact-form input,
form.contact-form select,
form.contact-form textarea {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 5px;
  font-family: "Raleway", sans-serif;
  font-size: 0.95rem;
  background: var(--white);
  transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
form.contact-form input:focus,
form.contact-form select:focus,
form.contact-form textarea:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 4px rgba(193,154,73,0.15);
}
form.contact-form textarea { min-height: 150px; resize: vertical; }

/* Preferred contact method — radio pills */
.radio-pill-group { display: flex; gap: 10px; flex-wrap: wrap; }
.radio-pill { position: relative; }
.radio-pill input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.radio-pill span {
  display: inline-flex;
  align-items: center;
  padding: 11px 20px;
  border: 1px solid var(--border);
  border-radius: 30px;
  font-size: 0.88rem;
  color: var(--muted);
  cursor: pointer;
  transition: background 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease);
}
.radio-pill input:checked + span { background: var(--navy); color: var(--white); border-color: var(--navy); }
.radio-pill input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 2px; }

/* Consent checkbox */
.consent-row { display: flex; align-items: flex-start; gap: 10px; font-size: 0.85rem; color: var(--muted); }
.consent-row input[type="checkbox"] { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--navy); flex-shrink: 0; }
.consent-row a { color: var(--navy); text-decoration: underline; }

/* Honeypot — hidden from real users, visible to bots */
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-note { font-size: 0.86rem; color: var(--muted); margin-top: 4px; }

.contact-info-card {
  background: var(--navy);
  color: var(--white);
  border-radius: 10px;
  padding: 44px 36px;
}
.contact-info-card .info-row {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 18px 0;
  border-bottom: 1px solid rgba(255,255,255,0.12);
}
.contact-info-card .info-row:last-child { border-bottom: none; }
.contact-info-card .info-row svg { width: 20px; height: 20px; stroke: var(--gold-light); flex-shrink: 0; margin-top: 3px; }
.contact-info-card .info-row h4 {
  font-family: "Raleway", sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--gold-light);
  font-size: 0.78rem;
  margin-bottom: 6px;
}
.contact-info-card .info-row p { color: #b7d1c0; font-size: 0.9rem; }

.map-frame {
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--border);
  aspect-ratio: 16/7;
  background: var(--cream);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-size: 0.85rem;
  letter-spacing: 0.4px;
}

/* ---------- FAQ accordion ---------- */
.accordion-item {
  border-bottom: 1px solid var(--border);
}
.accordion-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 24px 0;
  background: none;
  border: none;
  text-align: left;
  font-family: "Playfair Display", serif;
  font-size: 1.08rem;
  color: var(--navy);
  cursor: pointer;
}
.accordion-trigger .plus {
  width: 26px; height: 26px;
  border-radius: 50%;
  border: 1px solid var(--gold);
  color: var(--gold);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  position: relative;
  transition: transform 0.35s var(--ease), background 0.35s var(--ease);
}
.accordion-trigger .plus::before,
.accordion-trigger .plus::after {
  content: "";
  position: absolute;
  background: var(--gold);
  transition: transform 0.35s var(--ease), background 0.35s var(--ease);
}
.accordion-trigger .plus::before { width: 10px; height: 1.4px; }
.accordion-trigger .plus::after { width: 1.4px; height: 10px; }
.accordion-item.open .accordion-trigger .plus { background: var(--gold); transform: rotate(180deg); }
.accordion-item.open .accordion-trigger .plus::before,
.accordion-item.open .accordion-trigger .plus::after { background: var(--navy-dark); }
.accordion-item.open .accordion-trigger .plus::after { transform: scaleY(0); }

.accordion-panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s var(--ease);
}
.accordion-panel-inner { padding-bottom: 24px; color: var(--muted); font-size: 0.96rem; max-width: 760px; }

/* ---------- Footer ---------- */
footer.site-footer {
  background: var(--navy-dark);
  color: #b7d1c0;
  padding: 80px 0 0;
  font-size: 0.92rem;
}
.footer-top {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.1fr;
  gap: 40px;
  padding-bottom: 56px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.footer-top .logo { margin-bottom: 16px; }
.footer-top p.desc { color: #94b8a0; font-size: 0.9rem; max-width: 280px; }
.footer-top h4 {
  color: var(--white);
  font-size: 0.9rem;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  margin-bottom: 20px;
}
.footer-top ul { list-style: none; display: grid; gap: 12px; }
.footer-top ul a { color: #b7d1c0; transition: color 0.25s var(--ease), padding-left 0.25s var(--ease); }
.footer-top ul a:hover { color: var(--gold-light); padding-left: 4px; }
.footer-social { display: flex; gap: 12px; margin-top: 20px; }
.footer-social a {
  width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.2);
  display: flex; align-items: center; justify-content: center;
  transition: background 0.3s var(--ease), border-color 0.3s var(--ease), transform .3s var(--ease);
}
.footer-social a:hover { background: var(--gold); border-color: var(--gold); transform: translateY(-3px); }
.footer-social svg { width: 16px; height: 16px; }

.footer-bottom {
  padding: 24px 0;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 0.82rem;
  color: #7ca088;
  margin-top: 24px;
}
.footer-bottom a:hover { color: var(--gold-light); }

/* ---------- Placeholder note ---------- */
.placeholder-note {
  font-family: "Raleway", sans-serif;
  font-size: 0.78rem;
  color: #a35b2f;
  background: #fbeee3;
  border: 1px dashed #e3b98f;
  padding: 8px 12px;
  border-radius: 5px;
  margin-top: 10px;
  display: inline-block;
}

/* ---------- Back to top ---------- */
.back-to-top {
  position: fixed;
  right: 28px;
  bottom: 28px;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--navy);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), background 0.3s var(--ease), visibility 0.3s;
  z-index: 150;
  border: none;
  cursor: pointer;
}
.back-to-top.show { opacity: 1; visibility: visible; transform: translateY(0); }
.back-to-top:hover { background: var(--gold); }
.back-to-top svg { width: 18px; height: 18px; }

/* ---------- WhatsApp float button ---------- */
.whatsapp-float {
  position: fixed;
  right: 28px;
  bottom: 86px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #25d366;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 150;
  box-shadow: 0 6px 18px rgba(0,0,0,0.25);
  transition: transform 0.3s var(--ease), background 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.whatsapp-float:hover { background: #1fb955; transform: translateY(-3px); box-shadow: 0 10px 24px rgba(0,0,0,0.3); }
.whatsapp-float svg { width: 27px; height: 27px; }
@media (max-width: 640px) {
  .whatsapp-float { right: 18px; bottom: 74px; width: 48px; height: 48px; }
  .back-to-top { right: 18px; bottom: 18px; }
}

/* ---------- Client logo grid (placeholder — swap tiles for real client logos) ---------- */
.client-logo-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 18px;
  margin-top: 46px;
}
.client-logo-tile {
  aspect-ratio: 3 / 2;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--white);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--muted);
  transition: border-color 0.3s var(--ease), transform 0.3s var(--ease);
}
.client-logo-tile:hover { border-color: var(--gold); transform: translateY(-3px); }
.client-logo-tile svg { width: 26px; height: 26px; stroke: var(--muted); }
.client-logo-tile span { font-size: 0.72rem; letter-spacing: 0.3px; }
.client-logo-note {
  text-align: center;
  color: var(--muted);
  font-size: 0.85rem;
  margin-top: 18px;
}
@media (max-width: 860px) {
  .client-logo-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 520px) {
  .client-logo-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
}

/* ---------- Utility ---------- */
.text-center { text-align: center; }
.mt-lg { margin-top: 60px; }

/* ---------- Approach timeline (Think. Consult. Act.) ---------- */
.approach-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  position: relative;
}
.approach-steps::before {
  content: "";
  position: absolute;
  top: 34px;
  left: 8%;
  right: 8%;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(193,154,73,0.4), transparent);
}
.approach-step {
  text-align: center;
  padding: 0 24px;
  position: relative;
}
.approach-step .step-num {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: var(--white);
  border: 1px solid var(--gold);
  color: var(--gold);
  font-family: "Playfair Display", serif;
  font-style: italic;
  font-size: 1.5rem;
  font-variant-numeric: lining-nums proportional-nums;
  font-feature-settings: "lnum" 1, "pnum" 1;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 26px;
  position: relative;
  z-index: 1;
  transition: background 0.4s var(--ease), color 0.4s var(--ease), transform 0.4s var(--ease);
}
.approach-step:hover .step-num { background: var(--gold); color: var(--white); transform: scale(1.06); }
section.dark .approach-step .step-num { background: var(--navy-dark); }
.approach-step h3 { margin-bottom: 12px; }
.approach-step p { color: var(--muted); font-size: 0.95rem; max-width: 300px; margin: 0 auto; }
section.dark .approach-step p { color: #b7d1c0; }

/* ---------- Numbered editorial list (Why Le Shell) ---------- */
.editorial-list { border-top: 1px solid var(--border); max-width: 880px; margin: 0 auto; }
.editorial-row {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 32px;
  padding: 36px 0;
  border-bottom: 1px solid var(--border);
  align-items: baseline;
  transition: padding-left 0.4s var(--ease);
}
.editorial-row:hover { padding-left: 14px; }
.editorial-row .num {
  font-family: "Playfair Display", serif;
  font-size: 1.6rem;
  color: var(--gold);
  font-variant-numeric: lining-nums proportional-nums;
  font-feature-settings: "lnum" 1, "pnum" 1;
}
.editorial-row .row-body h3 {
  font-size: 1.28rem;
  margin-bottom: 8px;
  transition: color 0.3s var(--ease);
}
.editorial-row:hover .row-body h3 { color: var(--gold-dark); }
.editorial-row .row-body p { color: var(--muted); max-width: 560px; }
@media (max-width: 640px) {
  .editorial-row { grid-template-columns: 46px 1fr; gap: 18px; padding: 26px 0; }
  .editorial-row .num { font-size: 1.2rem; }
  .editorial-row:hover { padding-left: 0; }
}

/* ---------- Practice area banner (one per practice area) ---------- */
.practice-banner {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  aspect-ratio: 21 / 8;
  margin-bottom: 34px;
  display: flex;
  align-items: flex-end;
}
.practice-banner img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.practice-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(4,15,10,0.82) 0%, rgba(4,15,10,0.15) 55%, rgba(4,15,10,0.05) 100%);
}
.practice-banner .banner-copy { position: relative; z-index: 1; padding: 28px 34px; }
.practice-banner .banner-tag {
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: 2.5px;
  font-size: 0.74rem;
  color: var(--gold-light);
  margin-bottom: 8px;
}
.practice-banner .banner-statement {
  font-family: "Playfair Display", serif;
  font-weight: 700;
  font-size: clamp(1.4rem, 3vw, 2.1rem);
  color: var(--white);
  line-height: 1.2;
  max-width: 620px;
}
@media (max-width: 640px) {
  .practice-banner { aspect-ratio: 4 / 5; }
  .practice-banner .banner-copy { padding: 22px 22px; }
}

/* ---------- Practice area detail blocks ---------- */
.practice-block {
  padding: 70px 0;
  border-bottom: 1px solid var(--border);
  scroll-margin-top: 150px;
}
.practice-block:last-child { border-bottom: none; }
.practice-head {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 26px;
  align-items: flex-start;
  margin-bottom: 30px;
}
.practice-head .icon-badge { margin-bottom: 0; width: 72px; height: 72px; }
.practice-head .icon-badge svg { width: 32px; height: 32px; }
.practice-head h2 { font-size: clamp(1.5rem, 2.6vw, 1.9rem); margin-bottom: 10px; }
.practice-head p.lede { color: var(--muted); max-width: 720px; }

.sub-service-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 8px;
}
.sub-service {
  padding: 24px 22px;
  background: var(--cream);
  border-radius: 8px;
  border: 1px solid transparent;
  transition: border-color 0.35s var(--ease), transform 0.35s var(--ease), box-shadow .35s var(--ease);
}
.sub-service:hover { border-color: var(--gold); }
.sub-service h4 { font-family: "Raleway", sans-serif; font-weight: 700; font-size: 0.98rem; color: var(--navy); margin-bottom: 8px; }
.sub-service p { color: var(--muted); font-size: 0.88rem; }

.inline-list {
  list-style: none;
  display: grid;
  gap: 12px;
  margin-top: 20px;
}
.inline-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 0.95rem;
  color: var(--text);
}
.inline-list li::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--gold);
  margin-top: 9px;
  flex-shrink: 0;
}

/* ---------- Tag chips (sectors) ---------- */
.tag-row { display: flex; flex-wrap: wrap; gap: 12px; }
.tag-chip {
  font-size: 0.85rem;
  color: var(--navy);
  border: 1px solid var(--border);
  padding: 10px 20px;
  border-radius: 30px;
  transition: background 0.3s var(--ease), color 0.3s var(--ease), border-color .3s var(--ease);
}
.tag-chip:hover { background: var(--navy); color: var(--white); border-color: var(--navy); }

/* Auto-scrolling marquee variant of the tag row */
.marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
.marquee-track {
  display: flex;
  gap: 12px;
  width: max-content;
  animation: marqueeScroll 32s linear infinite;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marqueeScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
}

/* ---------- Founder / partner cards ---------- */
.founder-card {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 50px;
  align-items: center;
  background: var(--cream);
  border-radius: 12px;
  padding: 50px;
}
.founder-card .photo {
  aspect-ratio: 4/5;
  border-radius: 8px;
  background: linear-gradient(150deg, var(--navy), var(--navy-soft));
  position: relative;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.founder-card .photo::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(circle at 70% 20%, rgba(193,154,73,0.32), transparent 55%);
}
.founder-card .photo .initials {
  position: relative; z-index: 1;
  font-family: "Playfair Display", serif;
  font-size: 2.6rem;
  color: rgba(255,255,255,0.9);
}
.founder-card h3 { font-size: 1.5rem; margin-bottom: 4px; }
.founder-card .role { color: var(--gold-dark); font-size: 0.9rem; letter-spacing: 0.4px; margin-bottom: 18px; }
.founder-card p { color: var(--muted); margin-bottom: 14px; font-size: 0.96rem; }
.founder-quote {
  margin-top: 20px;
  padding-left: 20px;
  border-left: 2px solid var(--gold);
  font-family: "Playfair Display", serif;
  font-style: italic;
  font-size: 1.15rem;
  color: var(--navy);
}

.partner-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 36px 30px;
  transition: border-color 0.4s var(--ease);
}
.partner-card:hover { border-color: var(--gold-light); }
.partner-card .photo {
  width: 90px; height: 90px;
  border-radius: 50%;
  background: linear-gradient(150deg, var(--navy), var(--navy-soft));
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,0.9);
  font-family: "Playfair Display", serif;
  font-size: 1.5rem;
  margin-bottom: 20px;
}
.partner-card h3 { font-size: 1.1rem; margin-bottom: 2px; }
.partner-card .role { color: var(--gold-dark); font-size: 0.85rem; margin-bottom: 14px; }
.partner-card p { color: var(--muted); font-size: 0.92rem; }

/* ---------- Pull quote / pro bono banner ---------- */
.pullquote {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
  font-family: "Playfair Display", serif;
  font-style: italic;
  font-size: clamp(1.3rem, 2.6vw, 1.7rem);
  color: var(--navy);
  line-height: 1.5;
  position: relative;
  padding: 0 20px;
}
.pullquote::before {
  content: "\201C";
  display: block;
  font-size: 3.2rem;
  color: var(--gold-light);
  line-height: 1;
  margin-bottom: 6px;
}

/* ---------- Oversized statement headline (dark sections) ---------- */
.statement {
  max-width: 900px;
  font-family: "Playfair Display", serif;
  font-weight: 700;
  font-size: clamp(1.8rem, 4.4vw, 3.1rem);
  line-height: 1.28;
  color: var(--white);
}
.statement em { color: var(--gold-light); }

/* ---------- Sticky sub-nav (practice areas page) ---------- */
.subnav {
  position: sticky;
  top: 78px;
  z-index: 90;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.subnav::-webkit-scrollbar { display: none; }
.subnav .container { display: flex; gap: 8px; padding-top: 14px; padding-bottom: 14px; white-space: nowrap; position: relative; }
@media (max-width: 720px) {
  /* Hints that the tab strip scrolls horizontally, since it's cut off mid-label otherwise. */
  .subnav { position: sticky; -webkit-mask-image: linear-gradient(to right, transparent 0, #000 16px, #000 calc(100% - 28px), transparent 100%); mask-image: linear-gradient(to right, transparent 0, #000 16px, #000 calc(100% - 28px), transparent 100%); }
}
.subnav a {
  font-size: 0.85rem;
  color: var(--muted);
  padding: 8px 16px;
  border-radius: 20px;
  transition: background 0.3s var(--ease), color 0.3s var(--ease);
}
.subnav a:hover, .subnav a.active { background: var(--navy); color: var(--white); }

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .split { grid-template-columns: 1fr; gap: 40px; }
  .footer-top { grid-template-columns: 1fr 1fr; }
  .stats-strip { grid-template-columns: repeat(2, 1fr); gap: 40px; }
  .cta-banner { padding: 50px 34px; }
  .sub-service-grid { grid-template-columns: repeat(2, 1fr); }
  .founder-card { grid-template-columns: 200px 1fr; gap: 34px; padding: 38px; }
}

@media (max-width: 720px) {
  section { padding: 70px 0; }
  .grid-3, .grid-4, .grid-2 { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  nav ul {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: 78vw;
    max-width: 340px;
    background: var(--navy-dark);
    flex-direction: column;
    padding: 110px 32px 40px;
    gap: 26px;
    transform: translateX(100%);
    transition: transform 0.4s var(--ease);
    box-shadow: -20px 0 40px rgba(0,0,0,0.3);
  }
  nav ul { z-index: 205; }
  nav ul.open { transform: translateX(0); }
  .nav-toggle { display: block; z-index: 210; }
  /* The <nav> wrapper around the menu list has no visible box of its own on
     mobile (its ul is pulled out via position:fixed above), but it still
     sits in .nav-wrap's flex row as an empty, zero-width item. With
     justify-content:space-between that's enough to count as "the last
     item", so the free space gets split into two roughly-equal gaps and
     the toggle button lands nearer the middle than the right edge. Taking
     nav out of the flex flow leaves just the logo and the toggle button,
     so space-between pushes the toggle flush to the right where it belongs. */
  .nav-wrap nav { position: absolute; width: 0; height: 0; overflow: visible; }
  /* A hero taller than the screen (long headline + stats) pushes this cue,
     which is pinned near the bottom of the hero rather than the screen,
     down onto the stats row instead of past it — it reads as the "Scroll"
     label overlapping "Industry Sectors Served". Not needed on mobile
     anyway, since a page you must scroll to see makes that obvious. */
  .scroll-cue { display: none; }
  .hero-stats { gap: 34px; }
  .page-hero { padding: 150px 0 70px; }
  .cta-banner { flex-direction: column; text-align: center; }
  .approach-steps { grid-template-columns: 1fr; gap: 50px; }
  .approach-steps::before { display: none; }
  .sub-service-grid { grid-template-columns: 1fr; }
  .practice-head { grid-template-columns: 1fr; }
  .founder-card { grid-template-columns: 1fr; padding: 32px; gap: 28px; }
  .subnav { top: 68px; }
}

/* ============================================================
   Contact page — form tabs (Send a Message / Request a Booking)
   ============================================================ */
.form-tabs {
  display: flex;
  gap: 8px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 30px;
}
.form-tab {
  background: transparent;
  border: none;
  font-family: inherit;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--muted);
  padding: 10px 4px 14px;
  margin-right: 28px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 0.2s;
}
.form-tab:hover { color: var(--navy); }
.form-tab.active { color: var(--navy-dark); border-bottom-color: var(--gold); }
.form-panel { display: none; }
.form-panel.active { display: block; animation: formPanelIn 0.35s ease; }
@keyframes formPanelIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.date-time-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.form-status {
  margin-top: 16px;
  padding: 14px 18px;
  border-radius: 6px;
  font-size: 0.93rem;
  display: none;
}
.form-status.show { display: block; }
.form-status.success { background: rgba(185,138,52,0.12); border: 1px solid var(--gold); color: var(--navy-dark); }
.form-status.error { background: rgba(190,60,50,0.1); border: 1px solid #be3c32; color: #7a2a22; }
.btn[disabled] { opacity: 0.65; cursor: not-allowed; }

@media (max-width: 720px) {
  .date-time-row { grid-template-columns: 1fr; }
}

/* ============================================================
   Admin pages (login + dashboard) — not linked in public nav
   ============================================================ */
.admin-shell {
  min-height: 100vh;
  background: linear-gradient(160deg, var(--navy-dark), var(--navy) 65%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 20px;
}
.admin-login-card {
  width: 100%;
  max-width: 400px;
  background: var(--cream);
  border-radius: 10px;
  padding: 44px 36px;
  box-shadow: 0 30px 70px rgba(0,0,0,0.35);
}
.admin-login-card .logo { justify-content: center; margin-bottom: 28px; }
.admin-login-card h1 {
  font-size: 1.5rem;
  margin-bottom: 6px;
  text-align: center;
}
.admin-login-card .sub {
  text-align: center;
  color: var(--muted);
  font-size: 0.92rem;
  margin-bottom: 28px;
}
.admin-login-card label {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--navy-dark);
}
.admin-login-card input {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-family: inherit;
  font-size: 0.95rem;
  margin-bottom: 18px;
  background: var(--white);
}
.admin-login-card input:focus { outline: 2px solid var(--gold); outline-offset: 1px; }
.admin-login-card button { width: 100%; justify-content: center; }
.admin-error {
  background: rgba(190,60,50,0.1);
  border: 1px solid #be3c32;
  color: #7a2a22;
  padding: 12px 14px;
  border-radius: 6px;
  font-size: 0.88rem;
  margin-bottom: 18px;
  display: none;
}
.admin-error.show { display: block; }

.admin-dashboard { background: var(--cream); min-height: 100vh; }
.admin-topbar {
  background: var(--navy-dark);
  color: var(--white);
  padding: 16px 0;
}
.admin-topbar .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.admin-topbar .admin-brand {
  font-family: "Playfair Display", serif;
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: 0.3px;
}
.admin-topbar .admin-brand span { color: var(--gold-light); font-style: italic; }
.admin-signout {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.3);
  color: var(--white);
  padding: 8px 18px;
  border-radius: 20px;
  font-size: 0.85rem;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}
.admin-signout:hover { border-color: var(--gold-light); background: rgba(255,255,255,0.08); }

.admin-main { padding: 44px 0 80px; }
.admin-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 28px;
  border-bottom: 1px solid var(--border);
}
.admin-tab {
  background: transparent;
  border: none;
  padding: 12px 22px;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.admin-tab.active { color: var(--navy-dark); border-bottom-color: var(--gold); }
.admin-panel { display: none; }
.admin-panel.active { display: block; }

.admin-table-wrap {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}
.admin-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.admin-table th, .admin-table td {
  text-align: left;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.admin-table th {
  background: var(--cream-dark);
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}
.admin-table tr:last-child td { border-bottom: none; }
.admin-table .msg-cell { max-width: 320px; white-space: pre-wrap; }
.admin-empty, .admin-loading { padding: 40px; text-align: center; color: var(--muted); }

.status-badge {
  display: inline-block;
  padding: 4px 11px;
  border-radius: 20px;
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.status-badge.new, .status-badge.pending { background: rgba(185,138,52,0.16); color: var(--gold-dark); }
.status-badge.contacted, .status-badge.confirmed { background: rgba(35,120,80,0.14); color: #1f6b47; }
.status-badge.closed, .status-badge.declined { background: rgba(80,80,80,0.12); color: #555; }

.status-select {
  font-family: inherit;
  font-size: 0.82rem;
  padding: 6px 8px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--white);
}

.admin-delete-btn {
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 6px;
  border: 1px solid rgba(190,60,50,0.35);
  background: transparent;
  color: #a8392f;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s, color 0.2s;
}
.admin-delete-btn:hover { background: #be3c32; border-color: #be3c32; color: var(--white); }
.admin-delete-btn:disabled { opacity: 0.6; cursor: not-allowed; }

.admin-panel-note {
  color: var(--muted);
  font-size: 0.9rem;
  margin-bottom: 18px;
}

@media (max-width: 720px) {
  .admin-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    /* Hints that the table scrolls sideways, since columns are cut off otherwise. */
    -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 28px), transparent 100%);
    mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 28px), transparent 100%);
  }
  .admin-table { min-width: 640px; }
}