/* NHB Law — draft build */

:root {
  --purple-950: #3d1a52;
  --purple-900: #5b2c78;
  --purple-800: #7d3f9e;
  --purple-700: #8e44ad;
  --purple-600: #9b59b6;
  --purple-100: #f2e9f5;
  --silver: #cfcfd8;
  --silver-dark: #9d9da8;
  --silver-light: #eceaf0;
  --charcoal: #1c1a1f;
  --gray-600: #55525c;
  --off-white: #faf8f6;
  --white: #ffffff;
  --brass: #9a9fa8;
  --brass-dark: #5c6067;
  --brass-light: #e2e4e8;
  --hairline: #e6e1e6;
  --radius: 10px;
  --shadow: 0 10px 30px rgba(37, 11, 44, 0.12);
  --serif: 'Libre Baskerville', Georgia, serif;
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* NOTE on the ampersand issue from earlier in this project: Playfair
   Display (the font --serif originally pointed to) has a decorative
   swash "&" as its only ampersand glyph — not a bug, just an unwanted
   design choice here, and it affected the ~80 old blog posts' content
   too, which can't be safely bulk-edited. Two targeted workarounds were
   tried (a unicode-range font substitution, then a forced sans-serif
   override on old-post headings specifically), neither confirmed
   actually fixing it live. Switching the underlying font fixes this
   everywhere at once and made both workarounds unnecessary — first to
   Lora, then to Libre Baskerville after a side-by-side comparison. The
   manual `.amp` span wrapping used in a couple of this theme's own
   pages (a leftover from before the font switch) is harmless now but no
   longer does anything meaningful, since Libre Baskerville's ampersand
   needs no special handling. */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--sans);
  color: var(--charcoal);
  background: var(--white);
  line-height: 1.6;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 28px; }
.section { padding: 96px 0; }
h1, h2, h3 { font-family: var(--serif); margin: 0 0 16px; line-height: 1.15; color: #5a2a5c; }
.amp { font-family: var(--sans); }
h2 { font-size: 2.3rem; }
h3 { font-size: 1.3rem; }
p { margin: 0 0 16px; color: var(--gray-600); }
.eyebrow {
  font-family: var(--sans);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--brass-dark);
  margin: 0 0 10px;
}
.center { text-align: center; margin-left: auto; margin-right: auto; }
.eyebrow.center { text-align: center; }
.light { color: var(--white); }
.eyebrow.light { color: var(--brass-light); }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.95rem;
  transition: all 0.2s ease;
  border: 2px solid transparent;
}
.btn-primary { background: var(--charcoal); color: var(--white); }
.btn-primary:hover { background: #2a272e; }
.btn-invert { background: var(--white); color: #5a2a5c; }
.btn-invert:hover { background: var(--silver-light); }
.btn-ghost { border-color: rgba(255,255,255,0.5); color: var(--white); }
.btn-ghost:hover { border-color: var(--white); background: rgba(255,255,255,0.08); }
.btn-gold { background: var(--charcoal); color: var(--white); font-weight: 700; }
.btn-gold:hover { background: #2a272e; }
.btn.full { width: 100%; }

/* Scoped to the hero slider only — .btn-gold itself stays black/charcoal
   everywhere else it's used (the blog-post sidebar CTA in single.php,
   the generic page.php template), matching what was actually asked for
   rather than recoloring every "gold" button site-wide. Color matches
   the hero's "Houston, Texas · Since 1972" eyebrow text (#e8c77a) — note
   that's a hardcoded hex here, not the --brass variable a couple lines
   up, since --brass is actually a cool gray (#9a9fa8) despite its name;
   #e8c77a is the real gold accent already used elsewhere in the hero
   (the eyebrow text, the active slider dot). */
.hero-ctas .btn-gold { background: #e8c77a; color: #3d1a52; }
.hero-ctas .btn-gold:hover { background: #ddb75f; }
.btn-call {
  flex-direction: column;
  align-items: center;
  gap: 0;
  padding: 8px 22px;
  border-radius: 8px;
  background: #5a2a5c;
  color: var(--white);
  white-space: nowrap;
  flex-shrink: 0;
}
.btn-call-label { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--silver); line-height: 1.3; }
.btn-call-number { font-family: var(--serif); font-weight: 700; font-size: 1.05rem; line-height: 1.3; }

/* Header */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--white);
  border-bottom: 1px solid #eee;
}
.header-inner { display: flex; align-items: center; justify-content: space-between; padding-top: 12px; padding-bottom: 12px; }
.brand-logo { height: 52px; width: auto; border-radius: 4px; }
.main-nav { display: flex; gap: 34px; }
.main-nav a { font-weight: 600; font-size: 0.94rem; color: #5a2a5c; position: relative; }
.main-nav a::after {
  content: ""; position: absolute; left: 0; bottom: -6px; width: 0; height: 2px;
  background: var(--brass); transition: width 0.2s ease;
}
.main-nav a:hover::after { width: 100%; }
.nav-dropdown { position: relative; }
.nav-dropdown-menu {
  position: absolute; top: 100%; left: -14px; margin-top: 14px; min-width: 190px;
  background: var(--white); border: 1.5px solid #5a2a5c; border-radius: 10px; box-shadow: var(--shadow); padding: 8px;
  opacity: 0; visibility: hidden; transform: translateY(-6px); transition: all 0.18s ease;
}
.nav-dropdown:hover .nav-dropdown-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.nav-dropdown-menu a { display: block; padding: 9px 12px; border-radius: 6px; font-size: 0.88rem; color: #5a2a5c; transition: background 0.15s ease, color 0.15s ease; }
.nav-dropdown-menu a:hover { background: #5a2a5c; color: var(--white); }
.nav-dropdown-menu a::after { display: none; }

/* WP menu compatibility — wp_nav_menu() (see header.php) outputs
   <ul><li class="menu-item-has-children"><a>...<ul class="sub-menu">, not the
   hand-coded .nav-dropdown / .nav-dropdown-menu divs the static build used.
   This block re-styles WordPress's default menu markup to look identical,
   so nothing above needs to change and no custom Walker class is needed. */
.main-nav > ul { display: flex; gap: 34px; list-style: none; margin: 0; padding: 0; }
.main-nav > ul > li { position: relative; }
.main-nav > ul > li > a { font-weight: 600; font-size: 0.94rem; color: #5a2a5c; position: relative; }
.main-nav > ul > li > a::after {
  content: ""; position: absolute; left: 0; bottom: -6px; width: 0; height: 2px;
  background: var(--brass); transition: width 0.2s ease;
}
.main-nav > ul > li:hover > a::after { width: 100%; }
.main-nav .sub-menu {
  position: absolute; top: 100%; left: -14px; margin-top: 14px; min-width: 190px;
  background: var(--white); border: 1.5px solid #5a2a5c; border-radius: 10px; box-shadow: var(--shadow); padding: 8px;
  list-style: none;
  opacity: 0; visibility: hidden; transform: translateY(-6px); transition: all 0.18s ease;
}
.main-nav > ul > li:hover > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.main-nav .sub-menu a { display: block; padding: 9px 12px; border-radius: 6px; font-size: 0.88rem; color: #5a2a5c; transition: background 0.15s ease, color 0.15s ease; }
.main-nav .sub-menu a:hover { background: #5a2a5c; color: var(--white); }
.main-nav .sub-menu a::after { display: none; }

/* Mobile nav toggle (hamburger) — hidden on desktop, shown under the 900px
   breakpoint where .main-nav switches from a horizontal bar to a slide-in
   panel. See the @media (max-width: 900px) block below for the panel itself. */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 34px;
  height: 34px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  margin-left: 12px;
  flex-shrink: 0;
  z-index: 61;
}
.nav-toggle-bar {
  display: block;
  width: 100%;
  height: 2px;
  background: #5a2a5c;
  border-radius: 2px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.nav-toggle.is-active .nav-toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-active .nav-toggle-bar:nth-child(2) { opacity: 0; }
.nav-toggle.is-active .nav-toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

body.nav-open { overflow: hidden; }

.nav-scrim {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.4);
  /* Must stay BELOW .site-header's z-index (50, set by position:sticky
     further up this file) — .site-header establishes its own stacking
     context, which traps .main-nav's z-index:60 inside it; that value
     never actually competes against this scrim at the outer/body level.
     A scrim z-index higher than 50 sits on top of the ENTIRE header,
     nav panel included, once opened — every tap on a menu link then
     hits this overlay instead of the link, silently closing the menu
     instead of navigating. Keeping this below 50 lets it dim ordinary
     page content while leaving the header/nav panel above it, clickable. */
  z-index: 40;
  opacity: 0;
  transition: opacity 0.25s ease;
}
.nav-scrim.is-visible { display: block; opacity: 1; }

/* Hero — duotone full-bleed portrait, hides the fact the source photo is tiny */
.hero {
  position: relative;
  background: #5a2a5c;
  color: var(--white);
  padding: 128px 0 150px;
  min-height: 600px;
  overflow: hidden;
  clip-path: polygon(0 0, 100% 0, 100% 94%, 0 100%);
}
.hero .parallax-layer {
  content: "";
  position: absolute; left: 0; right: 0; top: -20%; height: 140%;
  background-image:
    repeating-linear-gradient(115deg, rgba(255,255,255,0.04) 0 2px, transparent 2px 90px);
  pointer-events: none;
  will-change: transform;
}
.hero-portrait-glow {
  position: absolute; right: 2%; bottom: -10%; width: 46%; height: 90%;
  background: radial-gradient(ellipse at center, rgba(154,159,168,0.35) 0%, transparent 65%);
  z-index: 0;
}
.hero-portrait-cutout {
  position: absolute; right: 6%; bottom: 30px; z-index: 1;
  height: calc(100% - 30px); width: auto; max-width: 44%;
  object-fit: contain; object-position: bottom;
  filter: drop-shadow(-24px 24px 34px rgba(0,0,0,0.4));
}
.hero-portrait-tag {
  position: absolute; z-index: 2; right: 6%; bottom: 54px;
  background: rgba(24,6,32,0.88); padding: 12px 18px; border-radius: 8px;
  border-left: 3px solid var(--brass);
}
.hero-portrait-tag strong { display: block; font-family: var(--serif); font-weight: 700; font-size: 1rem; color: var(--white); }
.hero-portrait-tag span { display: block; font-family: var(--sans); font-weight: 600; font-size: 0.68rem; color: var(--brass-light); text-transform: uppercase; letter-spacing: 0.07em; margin-top: 2px; }

.hero-inner { position: relative; z-index: 1; }
.hero .eyebrow { color: #e8c77a; }
.hero-slider { position: relative; min-height: 230px; }
.hero-slide { position: absolute; top: 0; left: 0; width: 100%; opacity: 0; visibility: hidden; transition: opacity 0.5s ease; }
.hero-slide.is-active { position: relative; opacity: 1; visibility: visible; }
.hero-slider-dots { display: flex; gap: 10px; margin-top: 28px; }
.hero-dot { width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,0.5); background: transparent; padding: 0; cursor: pointer; transition: background 0.2s ease, border-color 0.2s ease; }
.hero-dot.is-active { background: #e8c77a; border-color: #e8c77a; }
.hero-copy { max-width: 600px; }
.hero h1 { color: var(--white); font-size: 2.75rem; max-width: 620px; }
.hero-sub { color: var(--silver); font-size: 1.08rem; max-width: 500px; }
.hero-ctas { display: flex; gap: 16px; margin-top: 8px; flex-wrap: wrap; }

/* Stat band */
.trust-bar { background: var(--charcoal); position: relative; z-index: 2; border-top: 1px solid rgba(255,255,255,0.08); } /* was var(--purple-950) / #3d1a52 */
.trust-grid {
  display: grid; grid-template-columns: repeat(5, 1fr);
  max-width: 1180px; margin: 0 auto; padding: 0 28px;
}
.trust-item { text-align: center; padding: 34px 18px; border-left: 1px solid rgba(255,255,255,0.12); }
.trust-item:first-child { border-left: none; }
.trust-item strong { display: block; font-family: var(--serif); color: var(--brass-light); font-size: 1.3rem; }
.trust-item span { display: block; font-size: 0.76rem; color: var(--silver); margin-top: 6px; }

/* Brief section — the verbatim record, styled like a filed legal document */
.brief-section { background: var(--off-white); }
.brief-breakline { max-width: 70%; width: 70%; margin: 0 auto 48px; }
.brief-inline-img { width: 100%; border-radius: var(--radius); margin: 8px 0 28px; display: block; }
.brief-heading-row { border-bottom: 1px solid var(--silver); padding-bottom: 22px; margin-bottom: 44px; }
.brief-heading-row .eyebrow { color: var(--brass-dark); }
.brief-heading-row h2 { font-size: 2rem; max-width: 760px; }
.brief-wrap { display: grid; grid-template-columns: 1fr 300px; gap: 64px; align-items: start; }
.brief-texas-badge { float: left; width: 130px; margin: 0 22px 10px 0; }
.brief-video { width: 100%; border-radius: var(--radius); margin: 30px 0; box-shadow: var(--shadow); display: block; }
.brief-main h3 {
  font-family: var(--serif); color: #5a2a5c; font-size: 1.2rem;
  margin: 40px 0 14px; padding-top: 22px; border-top: 1px solid var(--hairline);
}
.brief-main h3:first-of-type { border-top: none; padding-top: 0; margin-top: 8px; }
.brief-main p { color: var(--gray-600); font-size: 0.98rem; }
.brief-list { list-style: none; margin: 0 0 20px; padding: 0; columns: 2; column-gap: 24px; }
.brief-list li { padding-left: 18px; position: relative; font-size: 0.92rem; color: #5a2a5c; font-weight: 600; break-inside: avoid; margin-bottom: 8px; }
.brief-list li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 8px; height: 2px; background: var(--brass); }
.brief-list li a { color: inherit; text-decoration: none; }
.brief-list li a:hover { text-decoration: underline; }
.brief-aside { position: sticky; top: 100px; display: flex; flex-direction: column; gap: 24px; max-width: 300px; }
.brief-quote {
  background: #5a2a5c; color: var(--white); border-radius: var(--radius);
  padding: 22px 20px; position: relative; border-left: 3px solid var(--brass);
}
.brief-quote blockquote { margin: 0; font-family: var(--serif); font-size: 0.95rem; line-height: 1.45; }
.brief-cta {
  background: var(--white); border: 1px solid var(--hairline); border-radius: var(--radius);
  padding: 20px; box-shadow: var(--shadow); text-align: center;
}
.brief-cta .brief-phone { display: block; font-family: var(--serif); font-size: 1.25rem; color: #5a2a5c; font-weight: 700; margin-bottom: 12px; }
.brief-cta .btn { width: 100%; margin-bottom: 14px; }
.brief-cta .brief-honors { font-size: 0.82rem; color: var(--gray-600); margin: 0; line-height: 1.6; border-top: 1px solid var(--hairline); padding-top: 14px; }
.brief-photo-placeholder {
  border: 2px dashed var(--brass); border-radius: var(--radius); background: rgba(154,159,168,0.06);
  padding: 40px 20px; text-align: center; color: var(--brass-dark); font-size: 0.85rem; font-weight: 600;
  margin-top: 32px;
}
.brief-photo-placeholder span { display: block; font-size: 0.72rem; font-weight: 500; color: var(--gray-600); margin-top: 6px; text-transform: uppercase; letter-spacing: 0.06em; }
.brief-team-photo { margin: 36px auto 0; text-align: center; }
#firm .brief-team-photo { position: relative; left: 90px; }
@media (max-width: 900px) {
  /* the 90px desktop offset above is a deliberate alignment against
     adjacent copy at wide widths — on narrower screens where that copy
     reflows above/below instead of beside it, the same offset just
     pushes the photo off-center. Reset it back to centered below 900px. */
  #firm .brief-team-photo { left: 0; }
}
.brief-team-photo img { max-width: 380px; width: 100%; filter: drop-shadow(0 22px 40px rgba(61,26,82,0.22)); }

/* Attorney bio pages */
.bio-hero {
  background: #5a2a5c;
  color: var(--white); padding: 70px 0 56px;
}
.bio-hero .eyebrow { color: var(--brass-light); }
.bio-hero h1 { color: var(--white); margin-bottom: 6px; }
.bio-hero-title { color: var(--silver); font-size: 1.05rem; margin-bottom: 18px; }
.bio-hero-contact { display: flex; gap: 24px; flex-wrap: wrap; font-size: 0.88rem; color: var(--silver); }
.bio-hero-contact a { color: var(--white); font-weight: 600; }
.bio-section-title { font-family: var(--serif); color: #5a2a5c; font-size: 1.1rem; margin: 34px 0 12px; padding-top: 20px; border-top: 1px solid var(--hairline); }
.bio-section-title:first-of-type { border-top: none; padding-top: 0; margin-top: 0; }
.bio-list { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 24px; }
.bio-list li { font-size: 0.92rem; color: var(--gray-600); margin-bottom: 8px; break-inside: avoid; }
.bio-list li a { color: #5a2a5c; font-weight: 600; }
.bio-list li a:hover { text-decoration: underline; }
.bio-back { display: inline-block; margin-bottom: 20px; font-size: 0.85rem; font-weight: 600; color: #5a2a5c; }
.bio-photo-card { background: transparent; }
.bio-photo-card img { width: 100%; height: auto; display: block; margin: 0 auto; filter: drop-shadow(0 16px 30px rgba(61,26,82,0.2)); }
.bio-photo-card .attorney-placeholder-img { width: 100%; aspect-ratio: 1/1; border-radius: var(--radius); margin: 0; box-shadow: var(--shadow); }
.bio-photo-cap { padding: 16px 4px 0; text-align: center; }
.bio-photo-cap strong { display: block; font-family: var(--serif); font-weight: 700; font-size: 1.05rem; color: #5a2a5c; }
.bio-photo-cap span { display: block; font-family: var(--sans); font-weight: 600; font-size: 0.72rem; color: var(--brass-dark); text-transform: uppercase; letter-spacing: 0.06em; margin-top: 3px; }

/* Testimony */
.testimony-section { background: var(--white); }
.testimony-intro { max-width: 720px; margin: 0 auto 32px; text-align: center; font-size: 1.02rem; }
.video-player { position: relative; max-width: 560px; margin: 0 auto 28px; border-radius: var(--radius); overflow: hidden; line-height: 0; }
.testimony-video { aspect-ratio: 560/315; object-fit: cover; }
.testimony-video { width: 100%; display: block; }
.video-controls {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; align-items: center; gap: 14px;
  background: linear-gradient(to top, rgba(24,6,32,0.82) 0%, rgba(24,6,32,0.5) 60%, transparent 100%);
  padding: 26px 16px 14px;
}
.video-toggle {
  flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,0.8);
  background: rgba(255,255,255,0.1); color: var(--white); display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.video-toggle svg { width: 15px; height: 15px; margin-left: 2px; }
.video-toggle .icon-pause { margin-left: 0; }
.video-seek { flex: 1; height: 4px; border-radius: 999px; background: rgba(255,255,255,0.3); cursor: pointer; overflow: hidden; }
.video-seek-fill { height: 100%; width: 0%; background: var(--white); }
.video-hero-play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 76px; height: 76px; border-radius: 50%; border: none; cursor: pointer;
  background: rgba(24,6,32,0.55); color: var(--white);
  display: flex; align-items: center; justify-content: center; transition: opacity 0.25s ease, transform 0.2s ease;
}
.video-hero-play svg { width: 28px; height: 28px; margin-left: 4px; position: relative; z-index: 1; }
.video-hero-play-glow {
  position: absolute; inset: -14px; border-radius: 50%;
  background: radial-gradient(circle, rgba(154,159,168,0.45) 0%, transparent 70%);
}
.video-hero-play:hover { transform: translate(-50%, -50%) scale(1.06); }
.video-hero-play.is-hidden { opacity: 0; pointer-events: none; }
.testimony-detail { max-width: 720px; margin: 0 auto; text-align: center; font-size: 0.9rem; }

/* Practice areas */
.practice-section { background: var(--white); }
.practice-layout { display: grid; grid-template-columns: 1.6fr 1fr; gap: 40px; align-items: end; margin-top: 44px; }
.practice-photo { max-width: 100%; width: 100%; margin: 0 auto; filter: drop-shadow(0 24px 40px rgba(61,26,82,0.2)); }
.practice-grid { display: grid; grid-template-columns: 1fr; gap: 12px; max-height: 520px; overflow-y: auto; padding-right: 10px; scrollbar-color: var(--silver-dark) var(--off-white); }
.practice-card { display: flex; align-items: center; gap: 20px; padding: 18px 24px; }
.practice-icon { margin-bottom: 0; flex-shrink: 0; }
.practice-text h3 { margin-bottom: 4px; font-size: 1.1rem; }
.practice-text p { margin-bottom: 0; }
.practice-card {
  background: var(--off-white); border-radius: var(--radius); padding: 30px;
  border-top: 3px solid var(--silver-dark);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.practice-card:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(37,11,44,0.14); background: var(--white); }
.practice-card p { margin-bottom: 0; font-size: 0.92rem; }
.practice-icon {
  width: 46px; height: 46px; border-radius: 10px;
  background: #5a2a5c; display: flex; align-items: center; justify-content: center;
  margin-bottom: 18px;
}
.practice-icon svg { width: 24px; height: 24px; stroke: var(--brass-light); }

/* Attorneys — desaturated-to-color, echoes the hero portrait treatment */
.attorneys-section { background: var(--off-white); }
.attorney-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-top: 44px; max-width: 940px; margin-left: auto; margin-right: auto; }
.attorney-card { text-align: center; }
.attorney-card img {
  width: 150px; height: 150px; object-fit: cover; border-radius: 50%; margin: 0 auto 18px;
  border: 4px solid var(--white); box-shadow: var(--shadow);
  filter: grayscale(0.85) contrast(1.05);
  transition: filter 0.3s ease, transform 0.3s ease;
}
.attorney-card:hover img { filter: grayscale(0); transform: scale(1.05); }
.attorney-placeholder-img {
  width: 150px; height: 150px; border-radius: 50%; margin: 0 auto 18px;
  background: var(--purple-100); color: var(--purple-800); border: 4px solid var(--white); box-shadow: var(--shadow);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-size: 2.2rem; font-weight: 700;
}
.attorney-title { color: var(--brass-dark); font-weight: 700; text-transform: uppercase; font-size: 0.78rem; letter-spacing: 0.08em; margin-bottom: 12px; }
.attorneys-more { text-align: center; margin-top: 40px; color: #5a2a5c; font-weight: 600; }

/* Results */
.results-section {
  position: relative;
  background: #5a2a5c;
  clip-path: polygon(0 4%, 100% 0, 100% 100%, 0 100%);
  margin-top: -40px;
  padding-top: 130px;
  overflow: hidden;
}
.results-section .parallax-layer {
  position: absolute; left: 0; right: 0; top: -20%; height: 140%;
  background-image: repeating-linear-gradient(115deg, rgba(255,255,255,0.05) 0 2px, transparent 2px 90px);
  pointer-events: none;
  will-change: transform;
}
.results-section .wrap { position: relative; z-index: 1; }
.results-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 44px; }
.result-card { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.15); border-top: 3px solid var(--brass); border-radius: var(--radius); padding: 32px; text-align: center; transition: transform 0.25s ease, background 0.25s ease; }
.result-card:hover { transform: translateY(-6px); background: rgba(255,255,255,0.1); }
.result-figure { display: block; font-family: var(--serif); font-size: 2.1rem; color: var(--brass-light); margin-bottom: 12px; }
.result-card p { color: var(--silver); margin: 0; font-size: 0.92rem; }
.results-note { max-width: 760px; margin: 32px auto 0; text-align: center; color: var(--silver); font-size: 0.88rem; }
.results-detail {
  max-width: 860px; margin: 48px auto 0; max-height: 480px; overflow-y: auto;
  padding: 8px 20px 8px 0; scrollbar-color: var(--brass-light) rgba(255,255,255,0.1);
}
.results-detail h3 { color: var(--white); font-size: 1.1rem; margin: 28px 0 14px; }
.results-detail h3:first-child { margin-top: 0; }
.results-detail p { color: var(--silver); font-size: 0.9rem; margin: 0 0 12px; }
.results-detail p strong { color: var(--brass-light); font-weight: 700; }

/* Contact */
.contact-section { background: var(--white); }
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; }
.contact-details p { margin-bottom: 14px; color: #5a2a5c; font-weight: 500; }
.contact-details a { color: #5a2a5c; font-weight: 700; }
.contact-map { width: 100%; height: 260px; border: 0; border-radius: var(--radius); margin-top: 20px; }
.contact-form { background: var(--off-white); border-radius: var(--radius); padding: 32px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 16px; border-top: 3px solid var(--brass); }
.contact-form label { font-weight: 600; font-size: 0.85rem; color: #5a2a5c; display: flex; flex-direction: column; gap: 6px; }
.contact-form input, .contact-form textarea {
  font-family: var(--sans); font-size: 0.95rem; padding: 12px 14px;
  border: 1px solid #ddd; border-radius: 6px; resize: vertical;
}
.contact-form input:focus, .contact-form textarea:focus { outline: 2px solid var(--brass); border-color: transparent; }

/* Affiliations */
.affiliations-section { background: var(--off-white); }
.affiliations-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-top: 44px; align-items: start; }
.affiliation-card { background: var(--white); border-radius: var(--radius); padding: 28px; box-shadow: var(--shadow); text-align: center; }
.affiliation-card img { max-height: 48px; width: auto; margin: 0 auto 20px; object-fit: contain; }
.affiliation-card p { font-size: 0.85rem; margin: 0; text-align: left; }

/* Footer */
.site-footer { background: var(--charcoal); color: var(--silver); padding: 48px 0 0; border-top: 1px solid rgba(255,255,255,0.08); }
.footer-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; padding-bottom: 36px; border-bottom: 1px solid rgba(255,255,255,0.1); }
.footer-logo { height: 40px; border-radius: 4px; margin-bottom: 14px; }
.footer-firm-name { font-family: var(--serif); font-weight: 700; color: var(--white); font-size: 1.05rem; margin: 0 0 4px; }
.footer-tagline { color: var(--silver-dark); font-size: 0.85rem; margin: 0; }
.footer-contact { text-align: right; }
.footer-contact p { color: var(--silver); font-size: 0.85rem; margin: 0 0 10px; line-height: 1.6; }
.footer-contact a { color: var(--white); font-weight: 600; }
.footer-contact a:hover { text-decoration: underline; }
.footer-bottom { padding: 20px 0; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
.footer-bottom p { color: var(--silver-dark); font-size: 0.78rem; margin: 0; }
.footer-credit a { color: var(--silver); font-weight: 600; }
.footer-credit a:hover { text-decoration: underline; }

/* Scroll reveal */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.7s cubic-bezier(.2,.7,.3,1), transform 0.7s cubic-bezier(.2,.7,.3,1); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }
.reveal-group .reveal:nth-child(1) { transition-delay: 0s; }
.reveal-group .reveal:nth-child(2) { transition-delay: 0.1s; }
.reveal-group .reveal:nth-child(3) { transition-delay: 0.2s; }
.reveal-group .reveal:nth-child(4) { transition-delay: 0.3s; }
.reveal-group .reveal:nth-child(5) { transition-delay: 0.4s; }
.reveal-group .reveal:nth-child(6) { transition-delay: 0.5s; }

/* Responsive */
@media (max-width: 900px) {
  /* First attempt at this shrank the photo itself to clear the CTA
     buttons, which overcorrected — the photo ended up cropped down to a
     barely-visible sliver. Better approach: give the hero extra bottom
     padding reserved specifically for the photo, so it can stay a
     reasonable, clearly-visible size instead of being shrunk to fit. */
  .hero { padding-bottom: 340px; }
  .hero-portrait-cutout {
    max-width: 72%;
    height: 320px;
    bottom: 20px;
    opacity: 0.75;
  }
  .hero-portrait-glow { display: none; } /* the glow was sized for the taller portrait; not worth repositioning for a decorative element */
  .hero-portrait-tag { display: none; } /* was anchored to the photo's old, taller position — would float in the wrong place now */
  .contact-grid { grid-template-columns: 1fr; }
  .brief-wrap { grid-template-columns: 1fr; }
  .brief-aside { position: static; }
  .practice-layout { grid-template-columns: 1fr; }
  .practice-photo { display: none; }
  .affiliations-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-contact { text-align: left; }
  .trust-grid { grid-template-columns: repeat(2, 1fr); }
  .nav-toggle { display: flex; order: 3; }

  /* .main-nav becomes a right-side slide-in panel instead of vanishing.
     It's always in the DOM/layout now — .is-open (toggled by main.js) is
     what actually brings it on screen. */
  .main-nav {
    display: block;
    position: fixed;
    top: 0; right: -100%;
    width: min(320px, 85%);
    height: 100vh;
    background: var(--white);
    box-shadow: -8px 0 24px rgba(0,0,0,0.18);
    padding: 90px 28px 32px;
    overflow-y: auto;
    transition: right 0.3s ease;
    z-index: 60;
  }
  .main-nav.is-open { right: 0; }

  .main-nav > ul,
  .main-nav ul { flex-direction: column; gap: 0; display: flex; }
  .main-nav > ul > li,
  .main-nav .nav-dropdown { width: 100%; border-bottom: 1px solid #eee; }
  .main-nav > ul > li > a,
  .main-nav .nav-dropdown > a { display: block; padding: 14px 0; }

  /* Sub-menus expand in place (tap to open) instead of hovering as a
     floating card — hover doesn't exist on touch. main.js toggles
     li.is-open / .nav-dropdown.is-open on tap. */
  .main-nav .sub-menu,
  .main-nav .nav-dropdown-menu {
    position: static; opacity: 1; visibility: visible; transform: none;
    max-height: 0; overflow: hidden; border: none; box-shadow: none; padding: 0;
    transition: max-height 0.25s ease;
  }
  .main-nav li.is-open > .sub-menu,
  .main-nav .nav-dropdown.is-open .nav-dropdown-menu {
    max-height: 600px; padding: 2px 0 14px 12px;
  }
}
@media (max-width: 600px) {
  .section { padding: 64px 0; }
  h1 { font-size: 2.1rem !important; }
  .practice-grid, .attorney-grid, .results-grid { grid-template-columns: 1fr; }
  .trust-grid { grid-template-columns: 1fr 1fr; }
  .trust-item { border-left: none; border-top: 1px solid rgba(255,255,255,0.12); }
  .trust-item:nth-child(1), .trust-item:nth-child(2) { border-top: none; }
  .brief-list { columns: 1; }
}

/* Ninja Forms — restyle the plugin's default look to match the site
   instead of leaving it unstyled. Targets Ninja Forms' standard/stable
   class names (nf-form-cont, nf-field-*, ninja-forms-field), which should
   hold regardless of which built-in NF template is active — but this
   was written without being able to render the actual live form, so
   check it visually after deploy and treat this as a first pass, not
   a guaranteed pixel-perfect match. */
.nf-form-cont { font-family: var(--sans); max-width: 100%; }
.nf-form-cont .nf-field-label label {
  font-weight: 600;
  color: #5a2a5c;
  font-family: var(--sans);
  font-size: 0.92rem;
  margin-bottom: 6px;
  display: block;
}
.nf-form-cont input[type="text"],
.nf-form-cont input[type="email"],
.nf-form-cont input[type="tel"],
.nf-form-cont input[type="number"],
.nf-form-cont textarea,
.nf-form-cont select {
  width: 100%;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 12px 14px;
  font-family: var(--sans);
  font-size: 0.95rem;
  background: var(--white);
  transition: border-color 0.2s ease;
}
.nf-form-cont input[type="text"]:focus,
.nf-form-cont input[type="email"]:focus,
.nf-form-cont input[type="tel"]:focus,
.nf-form-cont textarea:focus,
.nf-form-cont select:focus {
  border-color: #5a2a5c;
  outline: none;
}
.nf-form-cont .nf-field-container { margin-bottom: 18px; }
.nf-form-cont .nf-error-msg,
.nf-form-cont .field-error-msg { color: #b23b3b; font-size: 0.85rem; margin-top: 4px; }
.nf-form-cont .nf-error input,
.nf-form-cont .nf-error textarea { border-color: #b23b3b; }
.nf-form-cont input[type="submit"],
.nf-form-cont .submit-container button,
.nf-form-cont button[type="submit"] {
  width: 100%;
  background: #181820;
  color: var(--white);
  border: none;
  border-radius: 999px;
  padding: 14px 28px;
  font-weight: 600;
  font-size: 0.95rem;
  font-family: var(--sans);
  cursor: pointer;
  transition: opacity 0.2s ease;
}
.nf-form-cont input[type="submit"]:hover,
.nf-form-cont .submit-container button:hover,
.nf-form-cont button[type="submit"]:hover { opacity: 0.88; }
.nf-form-cont .nf-response-msg { color: var(--brass); font-weight: 600; }