/* =============================================================
   MAIN.CSS — Law Office of Mary C. Neff — Variant A
   "Serene Authority" — All colors via CSS custom properties
   ============================================================= */

/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Inter:wght@300;400;500;600&display=swap');

/* =============================================================
   CSS RESET & BASE
   ============================================================= */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  font-family: var(--font-body);
  color: var(--color-text-body);
  background-color: var(--color-surface);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color 0.2s ease;
}

a:hover {
  color: var(--color-primary-dark);
}

ul {
  list-style: none;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  line-height: 1.2;
  color: var(--color-text-body);
}

h1 { font-size: clamp(2rem, 4vw, 3.25rem); font-weight: 700; }
h2 { font-size: clamp(1.6rem, 3vw, 2.5rem); font-weight: 600; }
h3 { font-size: clamp(1.2rem, 2vw, 1.6rem); font-weight: 600; }
h4 { font-size: 1.1rem; font-weight: 600; }

p { margin-bottom: 1rem; }
p:last-child { margin-bottom: 0; }

/* =============================================================
   CONTAINER
   ============================================================= */
.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* =============================================================
   BUTTONS
   ============================================================= */
.btn {
  display: inline-block;
  padding: 0.85rem 2rem;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  border-radius: var(--border-radius);
  border: 2px solid transparent;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  text-align: center;
  line-height: 1.4;
}

.btn-primary {
  background-color: var(--color-button-bg);
  color: var(--color-text-on-dark);
  border-color: var(--color-button-bg);
}

.btn-primary:hover {
  background-color: var(--color-button-hover);
  border-color: var(--color-button-hover);
  color: var(--color-text-on-dark);
}

.btn-outline {
  background-color: transparent;
  color: var(--color-mid);
  border-color: var(--color-mid);
}

.btn-outline:hover {
  background-color: var(--color-mid);
  color: var(--color-text-on-dark);
}

.btn-outline-white {
  background-color: transparent;
  color: var(--color-text-on-dark);
  border-color: var(--color-text-on-dark);
}

.btn-outline-white:hover {
  background-color: var(--color-text-on-dark);
  color: var(--color-dark);
}

/* =============================================================
   NAVIGATION
   ============================================================= */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 1000;
  background-color: var(--color-nav-bg);
  border-bottom: 1px solid var(--color-border);
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  height: 72px;
}

.nav-logo img {
  height: 42px;
  width: auto;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  flex-wrap: nowrap;
}

.nav-links > li > a,
.nav-links > li > button {
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--color-nav-text);
  background: none;
  border: none;
  padding: 0.5rem 0.75rem;
  cursor: pointer;
  border-radius: var(--border-radius);
  transition: color 0.2s ease, background-color 0.2s ease;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  white-space: nowrap;
}

.nav-links > li > a:hover,
.nav-links > li > button:hover {
  color: var(--color-primary);
  background-color: var(--color-surface-alt);
}

.nav-links > li > a.active {
  color: var(--color-primary);
}

.nav-cta {
  background-color: var(--color-button-bg) !important;
  color: var(--color-text-on-dark) !important;
  border-radius: var(--border-radius) !important;
  padding: 0.6rem 1.1rem !important;
  font-weight: 500 !important;
}

.nav-cta:hover {
  background-color: var(--color-button-hover) !important;
  color: var(--color-text-on-dark) !important;
}

/* Dropdown */
.nav-dropdown {
  position: relative;
}

.dropdown-menu {
  display: none;
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 0;
  min-width: 240px;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  box-shadow: 0 8px 24px rgba(0,0,0,0.1);
  padding: 0.5rem 0;
  z-index: 200;
}

.nav-dropdown.open .dropdown-menu {
  display: block;
}

.dropdown-menu li a {
  display: block;
  padding: 0.6rem 1.25rem;
  font-size: 0.875rem;
  color: var(--color-text-body);
  transition: background-color 0.15s ease, color 0.15s ease;
}

.dropdown-menu li a:hover {
  background-color: var(--color-surface-alt);
  color: var(--color-primary);
}

/* Hamburger */
.nav-hamburger {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 28px;
  height: 20px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

.nav-hamburger span {
  display: block;
  height: 2px;
  background-color: var(--color-nav-text);
  border-radius: 2px;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.nav-hamburger.open span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { opacity: 0; }
.nav-hamburger.open span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }

/* =============================================================
   HERO — Split layout
   ============================================================= */
.hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: calc(100vh - 72px);
  max-height: 780px;
}

.hero-left {
  background-color: var(--color-surface);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 4rem 4rem 4rem 3rem;
}

.hero-eyebrow {
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: 1.25rem;
}

.hero-left h1 {
  margin-bottom: 1.25rem;
  color: var(--color-darkest);
}

.hero-sub {
  font-size: 1.1rem;
  color: var(--color-text-muted);
  margin-bottom: 2.25rem;
  max-width: 480px;
}

.hero-ctas {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.hero-right {
  background-color: var(--color-navy);
  overflow: hidden;
  position: relative;
}

.hero-right img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  opacity: 0.92;
}

/* =============================================================
   TRUST BAR
   ============================================================= */
.trust-bar {
  background-color: var(--color-surface-alt);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  /* Centre the strip structurally rather than by matching top/bottom padding:
     the band owns its height via min-height and centres whatever it contains,
     so the credentials cannot drift off-centre if font metrics or line-height
     change. Padding is only a floor for when the content grows past min-height
     (2-up and stacked layouts). */
  display: flex;
  align-items: center;
  min-height: 5.25rem;
  padding: 1rem 0;
  /* .hero-right is position:relative, so it paints above any static sibling it
     touches. Give the band its own stacking position so the hero photo can
     never cover its top edge (which reads as the credentials sitting high and
     crushed against the image). */
  position: relative;
  z-index: 1;
}

.trust-bar-inner {
  /* Grid rather than a nowrap flex row: flex-wrap left the wrapped item
     carrying an orphaned left divider. Columns are sized to their content
     (`auto`) rather than equal `1fr` — the credentials differ in length by
     more than 2x, so equal columns force the long ones onto a second line
     while the short ones sit alone. */
  display: grid;
  grid-template-columns: repeat(4, auto);
  justify-content: center;
  align-items: stretch;
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 1.5rem;
}

.trust-item {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0.6rem;
  padding: 0.5rem 1.25rem;
  font-size: 0.85rem;
  font-weight: 500;
  line-height: 1.35;
  color: var(--color-text-body);
  text-wrap: balance;
}

.trust-item + .trust-item {
  border-left: 1px solid var(--color-border);
}

/* Two-up before the full mobile stack. Breakpoint is set by the natural width
   of the four credentials side by side (~1081px + container padding), not by a
   round device number — below this they can no longer share one line. */
@media (max-width: 1150px) {
  .trust-bar-inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .trust-item:nth-child(odd) {
    border-left: none;
  }

  .trust-item:nth-child(n+3) {
    border-top: 1px solid var(--color-border);
    padding-top: 1rem;
  }

  .trust-item:nth-child(-n+2) {
    padding-bottom: 1rem;
  }
}

.trust-item .trust-icon {
  font-size: 1.1rem;
  line-height: 1;
}

/* =============================================================
   GHL EMBEDS (calendar + form) — defensive un-hiding
   GHL's form_embed.js hides every LeadConnector iframe at
   `opacity:0; visibility:hidden; left:-9999px` and only reveals one
   once it completes a postMessage handshake. That handshake races and
   frequently loses, leaving the widget invisible — verified flaky
   across reloads on identical markup, on BOTH the calendar and the form, and already broken on the
   existing demo site. Those are inline styles set WITHOUT !important,
   so an !important author rule deterministically wins. min-height (not
   height) so the script can still grow the frame when it does connect.
   ============================================================= */
iframe[src*="leadconnectorhq.com/widget/"] {
  position: static !important;
  left: auto !important;
  top: auto !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  width: 100% !important;
  border: none;
}

/* Floors only — the script can still grow these when it does connect. */
iframe[src*="/widget/booking/"] { min-height: 700px !important; }
iframe[src*="/widget/form/"]    { min-height: 1060px !important; }

/* =============================================================
   SECTIONS — Base & Alternating
   ============================================================= */
.section {
  padding: var(--section-padding);
}

.section-alt {
  background-color: var(--color-surface-alt);
}

.section-header {
  text-align: center;
  margin-bottom: 3rem;
}

.section-header h2 {
  margin-bottom: 0.75rem;
}

.section-header p {
  color: var(--color-text-muted);
  max-width: 620px;
  margin: 0 auto;
}

.section-eyebrow {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-primary);
  display: block;
  margin-bottom: 0.75rem;
}

/* =============================================================
   INTRO / BIO SECTION
   ============================================================= */
.intro-section {
  padding: var(--section-padding);
}

.intro-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 4rem;
  align-items: center;
}

.intro-image {
  position: relative;
}

.intro-image img {
  width: 100%;
  border-radius: var(--border-radius);
  box-shadow: 0 16px 48px rgba(0,0,0,0.12);
}

.intro-content h2 {
  margin-bottom: 1.25rem;
}

.intro-content p {
  color: var(--color-text-muted);
  font-size: 1.05rem;
  line-height: 1.8;
}

.intro-content .btn {
  margin-top: 1.5rem;
}

/* =============================================================
   CARDS GRID
   ============================================================= */
.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.5rem;
}

.card {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  padding: 2rem;
  transition: box-shadow 0.25s ease, transform 0.25s ease;
  display: flex;
  flex-direction: column;
}

.card:hover {
  box-shadow: 0 8px 28px rgba(47,62,70,0.12);
  transform: translateY(-2px);
}

.card h3 {
  font-size: 1.2rem;
  margin-bottom: 0.75rem;
  color: var(--color-darkest);
}

.card p {
  color: var(--color-text-muted);
  font-size: 0.95rem;
  flex: 1;
  margin-bottom: 1.25rem;
}

.card-link {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-primary);
  letter-spacing: 0.03em;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: auto;
}

.card-link::after {
  content: '→';
  transition: transform 0.2s ease;
}

.card:hover .card-link::after {
  transform: translateX(3px);
}

/* =============================================================
   BLOG PREVIEW STRIP
   ============================================================= */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.blog-card {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  padding: 1.75rem;
  transition: box-shadow 0.25s ease;
  display: flex;
  flex-direction: column;
}

.blog-card:hover {
  box-shadow: 0 6px 20px rgba(47,62,70,0.1);
}

.blog-category {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-primary);
  background-color: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-radius: 2px;
  padding: 0.2rem 0.6rem;
  margin-bottom: 0.85rem;
}

.blog-card h3 {
  font-size: 1.1rem;
  margin-bottom: 0.6rem;
  line-height: 1.35;
}

.blog-card h3 a {
  color: var(--color-darkest);
}

.blog-card h3 a:hover {
  color: var(--color-primary);
}

.blog-date {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  margin-bottom: 0.75rem;
}

.blog-card p {
  color: var(--color-text-muted);
  font-size: 0.9rem;
  line-height: 1.6;
  flex: 1;
  margin-bottom: 1rem;
}

.blog-read-more {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-primary);
  margin-top: auto;
}

/* =============================================================
   CTA BAND
   ============================================================= */
.cta-band {
  background-color: var(--color-cta-bg);
  padding: var(--section-padding);
}

.cta-band-inner {
  text-align: center;
  max-width: 680px;
  margin: 0 auto;
}

.cta-band h2 {
  color: var(--color-text-on-dark);
  margin-bottom: 1rem;
}

.cta-band p {
  color: rgba(255,255,255,0.8);
  font-size: 1.05rem;
  margin-bottom: 2rem;
}

.cta-phone {
  margin-top: 1.25rem;
  font-size: 0.95rem;
  color: rgba(255,255,255,0.75);
  margin-bottom: 0;
}

.cta-phone a {
  color: var(--color-lightest);
  font-weight: 600;
}

.cta-phone a:hover {
  color: var(--color-text-on-dark);
}

/* =============================================================
   FOOTER
   ============================================================= */
.site-footer {
  background-color: var(--color-footer-bg);
  color: var(--color-text-on-dark);
}

.footer-inner {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1.2fr;
  gap: 3rem;
  padding: 4rem 1.5rem 3rem;
}

.footer-brand img {
  margin-bottom: 1rem;
  opacity: 0.95;
}

.footer-tagline {
  font-family: var(--font-heading);
  font-style: italic;
  font-size: 1rem;
  color: var(--color-lightest);
  margin-bottom: 0;
}

.footer-social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin-top: 1rem;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.75);
  transition: background 0.2s ease, color 0.2s ease;
}

.footer-social:hover {
  background: rgba(255,255,255,0.15);
  color: var(--color-text-on-dark);
}

.footer-social svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

.footer-links {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding-top: 0.25rem;
}

.footer-links a {
  color: rgba(255,255,255,0.75);
  font-size: 0.9rem;
  transition: color 0.2s ease;
}

.footer-links a:hover {
  color: var(--color-text-on-dark);
}

.footer-contact p,
.footer-contact a {
  font-size: 0.9rem;
  color: rgba(255,255,255,0.75);
  margin-bottom: 0.5rem;
  display: block;
}

.footer-contact a:hover {
  color: var(--color-text-on-dark);
}

.footer-legal {
  border-top: 1px solid rgba(255,255,255,0.1);
  padding: 1.5rem 1.5rem;
}

.footer-legal .container {
  max-width: var(--container-max);
  margin: 0 auto;
}

.footer-legal p {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.45);
  line-height: 1.6;
  margin-bottom: 0.4rem;
}

.footer-legal a {
  color: rgba(255,255,255,0.65);
  text-decoration: underline;
}

.footer-legal a:hover {
  color: #ffffff;
}

.footer-legal p:last-child {
  margin-bottom: 0;
  margin-top: 0.5rem;
  font-weight: 500;
  color: rgba(255,255,255,0.55);
}

/* =============================================================
   PAGE HERO (interior pages)
   ============================================================= */
.page-hero {
  background-color: var(--color-surface-alt);
  border-bottom: 1px solid var(--color-border);
  padding: 4rem 0 3rem;
}

.page-hero .container {
  max-width: 820px;
}

.page-hero h1 {
  margin-bottom: 0.75rem;
}

.page-hero .page-hero-sub {
  font-size: 1.1rem;
  color: var(--color-text-muted);
  margin-bottom: 0;
}

/* =============================================================
   PRACTICE AREA PAGE LAYOUT
   ============================================================= */
.practice-layout {
  padding: var(--section-padding);
}

.practice-grid {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 3.5rem;
  align-items: start;
}

.practice-main .intro-text {
  font-size: 1.1rem;
  color: var(--color-text-muted);
  line-height: 1.8;
  margin-bottom: 3rem;
}

/* Process Steps */
.steps-section {
  margin-bottom: 3rem;
}

.steps-section h2 {
  font-size: 1.5rem;
  margin-bottom: 1.75rem;
}

.steps-list {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.step-item {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 1.25rem;
  align-items: start;
}

.step-number {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: var(--color-surface-alt);
  border: 2px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--color-primary);
  flex-shrink: 0;
}

.step-content h3 {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 0.35rem;
  color: var(--color-darkest);
}

.step-content p {
  font-size: 0.95rem;
  color: var(--color-text-muted);
  margin-bottom: 0;
}

/* Why Mary Callout */
.why-mary-box {
  background-color: var(--color-surface-alt);
  border-left: 4px solid var(--color-primary);
  border-radius: 0 var(--border-radius) var(--border-radius) 0;
  padding: 1.75rem 2rem;
  margin-bottom: 0;
}

.why-mary-box h3 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-family: var(--font-body);
  margin-bottom: 0.75rem;
}

.why-mary-box p {
  font-size: 0.95rem;
  color: var(--color-text-muted);
  line-height: 1.7;
  margin-bottom: 0;
}

/* Sidebar */
.practice-sidebar {
  position: sticky;
  top: 96px;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.sidebar-cta-box {
  background-color: var(--color-darkest);
  border-radius: var(--border-radius);
  padding: 2rem;
  color: var(--color-text-on-dark);
  text-align: center;
}

.sidebar-cta-box h3 {
  color: var(--color-text-on-dark);
  font-size: 1.2rem;
  margin-bottom: 0.75rem;
}

.sidebar-cta-box p {
  font-size: 0.875rem;
  color: rgba(255,255,255,0.75);
  margin-bottom: 1.25rem;
}

.sidebar-cta-box .btn {
  width: 100%;
  margin-bottom: 0.75rem;
}

.sidebar-cta-phone {
  font-size: 0.875rem;
  color: var(--color-lightest);
}

.sidebar-cta-phone a {
  color: var(--color-lightest);
  font-weight: 600;
}

.sidebar-related {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  padding: 1.5rem;
}

.sidebar-related h4 {
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-text-muted);
  font-family: var(--font-body);
  margin-bottom: 1rem;
}

.sidebar-related ul {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.sidebar-related ul li a {
  font-size: 0.9rem;
  color: var(--color-text-body);
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.sidebar-related ul li a::before {
  content: '→';
  color: var(--color-primary);
  font-size: 0.85rem;
}

.sidebar-related ul li a:hover {
  color: var(--color-primary);
}

/* =============================================================
   ABOUT PAGE
   ============================================================= */
.about-grid {
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 4rem;
  align-items: start;
  padding: var(--section-padding);
}

.about-image-col img {
  width: 100%;
  border-radius: var(--border-radius);
  box-shadow: 0 16px 48px rgba(0,0,0,0.12);
  margin-bottom: 1.5rem;
}

.callout-box {
  background-color: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  padding: 1.5rem;
  margin-bottom: 1rem;
}

.callout-box h4 {
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-primary);
  font-family: var(--font-body);
  margin-bottom: 0.85rem;
}

.callout-box p {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  margin-bottom: 0;
  line-height: 1.6;
}

.about-content h2 {
  margin-bottom: 1.25rem;
}

.about-content .bio-text {
  font-size: 1.05rem;
  color: var(--color-text-muted);
  line-height: 1.85;
  margin-bottom: 2rem;
}

.credentials-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
  margin-bottom: 2.5rem;
}

.credential-item {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.9rem;
  color: var(--color-text-body);
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--color-border);
}

.credential-item::before {
  content: '✓';
  color: var(--color-primary);
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 0.05rem;
}

.dual-state-callout {
  background-color: var(--color-mid);
  color: var(--color-text-on-dark);
  border-radius: var(--border-radius);
  padding: 2rem;
  margin-bottom: 1.5rem;
}

.dual-state-callout h3 {
  color: var(--color-text-on-dark);
  font-size: 1.15rem;
  margin-bottom: 0.75rem;
}

.dual-state-callout p {
  color: rgba(255,255,255,0.85);
  font-size: 0.95rem;
  margin-bottom: 0;
}

/* =============================================================
   PRACTICE AREAS OVERVIEW
   ============================================================= */
.practice-overview-intro {
  max-width: 720px;
  margin: 0 auto 3rem;
  text-align: center;
  color: var(--color-text-muted);
  font-size: 1.05rem;
}

/* =============================================================
   SERVING YOUR AREA PAGE
   ============================================================= */
.area-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1.5rem;
}

.area-card {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  padding: 2rem;
  transition: box-shadow 0.25s ease;
}

.area-card:hover {
  box-shadow: 0 6px 20px rgba(47,62,70,0.1);
}

.area-card h3 {
  font-size: 1.15rem;
  color: var(--color-darkest);
  margin-bottom: 0.75rem;
}

.area-card p {
  color: var(--color-text-muted);
  font-size: 0.95rem;
  margin-bottom: 0;
}

/* =============================================================
   BLOG INDEX
   ============================================================= */
.blog-index-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 2rem;
}

.blog-index-card {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  padding: 2rem;
  transition: box-shadow 0.25s ease;
  display: flex;
  flex-direction: column;
}

.blog-index-card:hover {
  box-shadow: 0 6px 24px rgba(47,62,70,0.1);
}

.blog-index-card h2 {
  font-size: 1.25rem;
  margin-bottom: 0.6rem;
  line-height: 1.35;
}

.blog-index-card h2 a {
  color: var(--color-darkest);
}

.blog-index-card h2 a:hover {
  color: var(--color-primary);
}

.blog-meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.blog-index-card p {
  color: var(--color-text-muted);
  font-size: 0.95rem;
  flex: 1;
  margin-bottom: 1.25rem;
}

/* =============================================================
   BLOG POST TEMPLATE
   ============================================================= */
.post-layout {
  padding: var(--section-padding);
}

.post-grid {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 3.5rem;
  align-items: start;
  max-width: 1100px;
  margin: 0 auto;
}

.post-main article {
  max-width: 720px;
}

.post-byline {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--color-border);
}

.byline-info {
  font-size: 0.875rem;
  color: var(--color-text-muted);
}

.byline-info strong {
  display: block;
  color: var(--color-text-body);
  font-weight: 600;
}

.post-body {
  font-size: 1.05rem;
  line-height: 1.85;
  color: var(--color-text-body);
}

.post-body ul {
  list-style: disc;
  margin: 0 0 1.5rem 1.25rem;
}

.post-body ul li {
  color: var(--color-text-muted);
  margin-bottom: 0.5rem;
}

.faq-section h2 {
  font-size: 1.5rem;
  margin-bottom: 1.5rem;
}

.faq-item {
  padding: 1.25rem 0;
  border-top: 1px solid var(--color-border);
}

.faq-item h3 {
  font-size: 1.05rem;
  margin-bottom: 0.5rem;
  color: var(--color-text-body);
}

.faq-item p {
  color: var(--color-text-muted);
  margin-bottom: 0;
}

.post-body h2 {
  font-size: 1.5rem;
  margin-top: 2.5rem;
  margin-bottom: 1rem;
}

.post-body p {
  color: var(--color-text-muted);
  margin-bottom: 1.5rem;
}

.post-sidebar {
  position: sticky;
  top: 96px;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* =============================================================
   FREE CONSULTATION PAGE
   ============================================================= */
.consultation-layout {
  padding: var(--section-padding);
}

.consultation-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: start;
}

.consultation-col {
  display: flex;
  flex-direction: column;
  gap: 3rem;
}

.consultation-intro h2 {
  margin-bottom: 1rem;
}

.consultation-panel {
  background-color: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  padding: 1.5rem;
}

.consultation-panel h2 {
  margin-bottom: 0.5rem;
}

.consultation-panel-sub {
  color: var(--color-text-muted);
  font-size: 0.95rem;
  margin-bottom: 1.5rem;
}

.what-to-expect {
  margin: 2rem 0;
}

.what-to-expect h3 {
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-family: var(--font-body);
  color: var(--color-text-muted);
  margin-bottom: 1.25rem;
}

.expect-list {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.expect-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 0.95rem;
  color: var(--color-text-body);
}

.expect-check {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background-color: var(--color-primary);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  flex-shrink: 0;
  margin-top: 0.1rem;
}

/* GHL's own resize script under-reports the real form height slightly,
   leaving an internal scrollbar even after it "fits" — force a taller
   floor so there's headroom regardless of what height GHL's script sets. */
#ghl-contact-form iframe {
  min-height: 1250px !important;
}

/* GHL Placeholders */
.ghl-placeholder {
  background-color: var(--color-surface-alt);
  border: 2px dashed var(--color-border);
  border-radius: var(--border-radius);
  padding: 2.5rem 2rem;
  text-align: center;
  color: var(--color-text-muted);
  font-size: 0.9rem;
  line-height: 1.8;
}

.ghl-placeholder strong {
  display: block;
  font-size: 1rem;
  color: var(--color-text-body);
  margin-bottom: 0.5rem;
}

.ghl-placeholder code {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.75rem;
  background-color: rgba(0,0,0,0.05);
  padding: 0.25rem 0.5rem;
  border-radius: 3px;
  color: var(--color-primary);
}

/* =============================================================
   CONTACT PAGE
   ============================================================= */
.contact-layout {
  padding: var(--section-padding);
}

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 4rem;
  align-items: start;
}

.contact-info h2 {
  margin-bottom: 1.5rem;
}

.contact-detail {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  margin-bottom: 2rem;
}

.contact-detail-item h4 {
  font-family: var(--font-body);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-text-muted);
  margin-bottom: 0.35rem;
}

.contact-detail-item a,
.contact-detail-item p {
  font-size: 1rem;
  color: var(--color-text-body);
  font-weight: 500;
}

.contact-detail-item a:hover {
  color: var(--color-primary);
}

.map-embed {
  margin-top: 2rem;
  border-radius: var(--border-radius);
  overflow: hidden;
  border: 1px solid var(--color-border);
}

.map-embed iframe {
  width: 100%;
  height: 300px;
  display: block;
  border: none;
}

.legal-disclaimer {
  background-color: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  padding: 1.25rem 1.5rem;
  margin-top: 2.5rem;
}

.legal-disclaimer p {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  line-height: 1.7;
  margin-bottom: 0;
}

/* =============================================================
   RESPONSIVE — TABLET (≤1024px)
   ============================================================= */
@media (max-width: 1024px) {
  .hero {
    min-height: 600px;
  }

  .hero-left {
    padding: 3rem 2.5rem;
  }

  .intro-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .about-grid {
    grid-template-columns: 300px 1fr;
    gap: 2.5rem;
  }

  .practice-grid {
    grid-template-columns: 1fr 280px;
    gap: 2.5rem;
  }

  .post-grid {
    grid-template-columns: 1fr 260px;
    gap: 2.5rem;
  }

  .footer-inner {
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
  }

  .footer-brand {
    grid-column: 1 / -1;
  }
}

/* =============================================================
   RESPONSIVE — MOBILE (≤768px)
   ============================================================= */
@media (max-width: 768px) {
  :root {
    --section-padding: 3.5rem 0;
  }

  /* Nav mobile */
  .nav-hamburger {
    display: flex;
  }

  .nav-links {
    display: none;
    position: absolute;
    top: 72px;
    left: 0;
    right: 0;
    background-color: var(--color-nav-bg);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 1rem 0;
    border-bottom: 1px solid var(--color-border);
    box-shadow: 0 8px 20px rgba(0,0,0,0.08);
  }

  .nav-links.open {
    display: flex;
  }

  .nav-links > li > a,
  .nav-links > li > button {
    padding: 0.8rem 1.5rem;
    border-radius: 0;
    justify-content: space-between;
    font-size: 1rem;
  }

  .dropdown-menu {
    position: static;
    box-shadow: none;
    border: none;
    border-top: 1px solid var(--color-border);
    border-radius: 0;
    padding: 0;
    background-color: var(--color-surface-alt);
  }

  .nav-dropdown.open .dropdown-menu {
    display: block;
  }

  .dropdown-menu li a {
    padding: 0.7rem 2rem;
    font-size: 0.95rem;
  }

  .nav-cta {
    margin: 0.75rem 1.5rem !important;
    text-align: center;
    justify-content: center;
  }

  /* Hero mobile */
  .hero {
    grid-template-columns: 1fr;
    min-height: auto;
    max-height: none;
  }

  .hero-left {
    padding: 3rem 1.5rem;
    order: 2;
  }

  .hero-right {
    order: 1;
    height: 60vw;
    max-height: 380px;
  }

  /* Trust bar mobile */
  .trust-bar-inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .trust-item {
    padding: 0.6rem 0.5rem;
    border-left: none !important;
    border-top: none !important;
    border-bottom: 1px solid var(--color-border);
    width: 100%;
    justify-content: center;
  }

  .trust-item:last-child {
    border-bottom: none;
  }

  /* Cards */
  .cards-grid {
    grid-template-columns: 1fr;
  }

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

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

  /* Practice pages */
  .practice-grid {
    grid-template-columns: 1fr;
  }

  .practice-sidebar {
    position: static;
  }

  /* About page */
  .about-grid {
    grid-template-columns: 1fr;
  }

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

  /* Post layout */
  .post-grid {
    grid-template-columns: 1fr;
  }

  .post-sidebar {
    position: static;
  }

  /* Consultation */
  .consultation-columns {
    grid-template-columns: 1fr;
  }

  /* Contact */
  .contact-grid {
    grid-template-columns: 1fr;
  }

  /* Footer */
  .footer-inner {
    grid-template-columns: 1fr;
    gap: 2rem;
    padding: 3rem 1.5rem 2rem;
  }

  .footer-brand {
    grid-column: 1;
  }

  .hero-ctas {
    flex-direction: column;
    align-items: flex-start;
  }

  .hero-ctas .btn {
    width: 100%;
    text-align: center;
  }
}

/* =============================================================
   UTILITIES
   ============================================================= */
.text-center { text-align: center; }
.text-muted { color: var(--color-text-muted); }
.mb-0 { margin-bottom: 0; }
.mt-1 { margin-top: 1rem; }
.mt-2 { margin-top: 2rem; }
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* =============================================================
   SCROLL REVEAL
   Fade + slide-up on scroll, applied via [data-reveal] in HTML.
   IMPORTANT: content is visible by default. main.js adds
   .reveal-ready to <html> only once it has confirmed it can
   observe and un-hide elements — so if JS fails to load or run
   for any reason, nothing gets stuck invisible.
   Skipped entirely when the user prefers reduced motion.
   ============================================================= */
@media (prefers-reduced-motion: no-preference) {
  .reveal-ready [data-reveal] {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.7s ease, transform 0.7s ease;
  }

  /* The trust bar is a short band with only 1.5rem of padding, so ANY vertical
     slide reads as the credentials sitting off-centre — the default 28px lift
     pushes them clean past the bottom border. Fade the strip in place instead;
     opacity still animates, transform never moves. */
  .reveal-ready .trust-item[data-reveal],
  .reveal-ready .trust-item[data-reveal].is-visible {
    transform: none;
  }

  .reveal-ready [data-reveal].is-visible {
    opacity: 1;
    transform: translateY(0);
  }

  /* Staggered entrance for grid/row children */
  .trust-item[data-reveal]:nth-child(2) { transition-delay: 0.08s; }
  .trust-item[data-reveal]:nth-child(3) { transition-delay: 0.16s; }
  .trust-item[data-reveal]:nth-child(4) { transition-delay: 0.24s; }

  .cards-grid .card[data-reveal]:nth-child(2) { transition-delay: 0.08s; }
  .cards-grid .card[data-reveal]:nth-child(3) { transition-delay: 0.16s; }
  .cards-grid .card[data-reveal]:nth-child(4) { transition-delay: 0.24s; }
  .cards-grid .card[data-reveal]:nth-child(5) { transition-delay: 0.32s; }
  .cards-grid .card[data-reveal]:nth-child(6) { transition-delay: 0.4s; }

  .blog-grid .blog-card[data-reveal]:nth-child(2) { transition-delay: 0.1s; }
  .blog-grid .blog-card[data-reveal]:nth-child(3) { transition-delay: 0.2s; }

  .intro-content[data-reveal] { transition-delay: 0.12s; }
}