/* =========================================================================
   JP Sherman Law — design system
   Ported from the Lovable "Sherman Law Digital" template.
   Light editorial: cream background, forest-green primary, warm-gold accent,
   serif headings (Playfair Display) + sans body (Inter).
   ========================================================================= */

:root {
  --radius: 0.625rem;

  /* Core palette — navy + warm cream/gold (approved site-wide; matches the
     firm's Coral Gables landing page). */
  --background: oklch(1 0 0);
  --foreground: oklch(0.25 0.035 252);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.25 0.035 252);
  --primary: oklch(0.19 0.06 258);
  --primary-foreground: oklch(0.985 0.002 250);
  --secondary: oklch(0.955 0.003 255);
  --muted: oklch(0.962 0.003 255);
  --muted-foreground: oklch(0.47 0.03 252);
  --accent: oklch(0.80 0.09 82);
  --border: oklch(0.895 0.005 255);

  /* Brand tokens */
  --brand-deep: oklch(0.19 0.06 258);   /* deep, saturated navy — the "luxury" wash behind CTAs and the hero */
  --brand-navy-mid: oklch(0.26 0.06 256); /* one step lighter, for gradients over the navy */
  --brand-warm: oklch(0.78 0.095 84);
  --gold-ink: oklch(0.60 0.085 84);
  --brand-cream: oklch(0.966 0.003 255);

  /* Effects */
  --gradient-hero: linear-gradient(135deg, oklch(0.15 0.055 259) 0%, oklch(0.21 0.06 256) 55%, oklch(0.28 0.06 250) 100%);
  --gradient-warm: linear-gradient(180deg, oklch(0.97 0.003 255) 0%, oklch(0.93 0.006 252) 100%);
  --shadow-soft: 0 20px 60px -20px oklch(0.34 0.07 252 / 0.28);
  --shadow-card: 0 10px 30px -12px oklch(0.34 0.07 252 / 0.16);

  /* Type */
  --font-serif: "Cormorant Garamond", "Playfair Display", Georgia, "Times New Roman", serif;
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Layout */
  --container: 80rem;      /* max-w-7xl */
  --container-6: 72rem;
  --container-5: 64rem;
  --container-4: 56rem;
  --container-3: 48rem;
  --gutter: 1.125rem;
}

/* ------------------------------- Reset ---------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

/* The browser's default [hidden] rule loses to any author `display` rule of
   equal specificity (e.g. .form-field { display: flex }), which silently
   breaks the hidden attribute. Enforce it once, globally. */
[hidden] { display: none !important; }

body {
  margin: 0;
  background-color: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
img { border-style: none; }

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

button { font: inherit; color: inherit; cursor: pointer; }

h1, h2, h3, h4 {
  font-family: var(--font-serif);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin: 0;
}

p { margin: 0; }
ul { margin: 0; }

:focus-visible {
  outline: 2px solid var(--brand-deep);
  outline-offset: 2px;
}

.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--brand-deep);
  color: var(--primary-foreground);
  padding: 0.75rem 1.25rem;
  border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus { left: 0; }

/* ------------------------------ Layout ---------------------------------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.container--6 { max-width: var(--container-6); }
.container--5 { max-width: var(--container-5); }
.container--4 { max-width: var(--container-4); }
.container--3 { max-width: var(--container-3); }

.section { padding-block: clamp(4rem, 9vw, 7rem); }
.section--tight { padding-block: clamp(3rem, 6vw, 4.5rem); }
.section--cream { background: var(--brand-cream); border-block: 1px solid var(--border); }
.section--white { background: #fff; border-block: 1px solid var(--border); }
.section--deep { background: var(--brand-deep); color: var(--primary-foreground); border-top: 1px solid rgba(255,255,255,0.1); }

.center { text-align: center; }
.mx-auto { margin-inline: auto; }

/* ---------------------------- Typography -------------------------------- */
.eyebrow {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.2em;
}
.eyebrow--muted { color: var(--gold-ink); }
.eyebrow--warm { color: var(--brand-warm); }
.eyebrow--light { color: rgba(255,255,255,0.6); }
.eyebrow--deep { color: color-mix(in oklch, var(--brand-deep) 70%, transparent); }

.h-hero {
  font-family: var(--font-serif);
  font-size: clamp(3rem, 6.5vw, 5rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
}
.h-section {
  font-family: var(--font-serif);
  font-size: clamp(2.2rem, 4.8vw, 3.3rem);
  line-height: 1.1;
}
.h-card { font-family: var(--font-serif); font-size: clamp(1.5rem, 2.5vw, 1.875rem); line-height: 1.15; }

.two-tone__accent, .accent {
  font-style: italic;
}
.accent-deep { color: var(--brand-deep); }
.accent-warm { color: var(--brand-warm); }
.block { display: block; }

.lede {
  font-family: var(--font-sans);
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  line-height: 1.7;
  color: var(--muted-foreground);
}

.prose { font-family: var(--font-sans); line-height: 1.75; color: color-mix(in oklch, var(--foreground) 85%, transparent); }
.prose > * + * { margin-top: 1.15em; }
.prose h2, .prose h3 { font-family: var(--font-serif); color: var(--foreground); margin-top: 1.6em; }
.prose h2 { font-size: 1.75rem; }
.prose h3 { font-size: 1.375rem; }
.prose a { color: var(--brand-deep); text-decoration: underline; text-underline-offset: 3px; }
.prose ul, .prose ol { padding-left: 1.25rem; }
.prose li + li { margin-top: 0.4em; }
.prose img { border-radius: 0.25rem; }
.prose blockquote {
  border-left: 3px solid var(--brand-warm);
  padding-left: 1.25rem;
  font-style: italic;
  color: var(--foreground);
}

/* ------------------------------ Buttons --------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-sans);
  font-weight: 600;
  border-radius: 3px;
  border: 1px solid transparent;
  padding: 0.95rem 1.5rem;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  line-height: 1;
  transition: transform 0.2s ease, opacity 0.2s ease, background-color 0.2s ease;
  cursor: pointer;
}
.btn svg { width: 1.05em; height: 1.05em; }
.btn--warm { background: var(--brand-warm); color: var(--brand-deep); box-shadow: var(--shadow-soft); }
.btn--warm:hover { transform: translateY(-1px); }
.btn--deep { background: var(--brand-deep); color: var(--primary-foreground); }
.btn--deep:hover { opacity: 0.92; }
.btn--ghost {
  background: rgba(255,255,255,0.1);
  color: var(--primary-foreground);
  border-color: rgba(255,255,255,0.2);
  backdrop-filter: blur(6px);
}
.btn--ghost:hover { background: rgba(255,255,255,0.16); }
.btn--outline { background: transparent; border-color: var(--border); color: var(--brand-deep); }
.btn--outline:hover { background: var(--brand-cream); }
.btn--sm { padding: 0.7rem 1.05rem; font-size: 0.72rem; }
.btn--block { width: 100%; justify-content: center; }

/* ------------------------------ Header ---------------------------------- */
.site-header { width: 100%; z-index: 40; }
.site-header__bar {
  max-width: var(--container);
  margin-inline: auto;
  padding: 1.5rem var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}
.site-header--overlay {
  position: absolute;
  top: 0; left: 0; right: 0;
  background: var(--brand-deep);
}
.site-header--solid {
  position: sticky;
  top: 0;
  background: var(--brand-deep);
}

.site-logo { display: block; }
.site-logo__img { width: auto; }
.site-logo--header .site-logo__img { height: 2.5rem; }
.site-logo--footer .site-logo__img { height: 2rem; }
/* The firm's logo is already light-on-dark, so it shows as-is on the dark
   header/footer bars. If a Customizer logo is a solid dark mark that needs
   whitening, add the .site-logo--invert body/logo hook and this filter. */
.site-logo--invert .site-logo__img { filter: brightness(0) invert(1); }
.site-logo--text { font-family: var(--font-serif); font-size: 1.25rem; color: var(--primary-foreground); }

.primary-nav { display: none; }
@media (min-width: 900px) {
  .primary-nav { display: flex; align-items: center; gap: 2rem; }
}
.primary-nav__list { display: flex; align-items: center; gap: 2rem; list-style: none; margin: 0; padding: 0; }
.primary-nav a,
.primary-nav__toggle {
  font-family: var(--font-sans);
  font-size: 0.875rem;
  color: rgba(245,246,248,0.8);
  background: none;
  border: none;
  padding: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  transition: color 0.2s ease;
}
.primary-nav a:hover,
.primary-nav__toggle:hover { color: var(--primary-foreground); }
.primary-nav__item { position: relative; }
.primary-nav__toggle svg { width: 0.7rem; height: 0.7rem; }

/* Desktop dropdown (hover / focus-within) */
.primary-nav__dropdown {
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translateX(-50%);
  padding-top: 0.75rem;
  min-width: 260px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.18s ease;
  z-index: 50;
}
.primary-nav__item:hover .primary-nav__dropdown,
.primary-nav__item:focus-within .primary-nav__dropdown { opacity: 1; visibility: visible; }
.primary-nav__panel {
  background: var(--background);
  color: var(--foreground);
  border: 1px solid color-mix(in oklch, var(--foreground) 10%, transparent);
  border-radius: 0.25rem;
  box-shadow: var(--shadow-card);
  padding: 1.5rem;
}
.primary-nav__panel ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.primary-nav__panel a { color: var(--foreground); font-size: 0.9rem; }
.primary-nav__panel a:hover { color: var(--brand-deep); }
.primary-nav__panel .is-all { font-weight: 500; }
.primary-nav__panel .has-rule { margin-top: 0.5rem; padding-top: 0.5rem; border-top: 1px solid color-mix(in oklch, var(--foreground) 10%, transparent); }
.primary-nav__panel--areas ul { display: grid; grid-template-columns: 1fr 1fr; gap: 0.4rem 1rem; }
.primary-nav__panel-eyebrow { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.12em; color: color-mix(in oklch, var(--foreground) 50%, transparent); margin-bottom: 0.5rem; }

.header-cta { flex-shrink: 0; }

/* Mobile menu */
.menu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem; height: 2.75rem;
  border-radius: 3px;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.2);
  color: var(--primary-foreground);
}
@media (min-width: 900px) { .menu-toggle { display: none; } }
.menu-toggle__bars { position: relative; width: 18px; height: 12px; }
.menu-toggle__bars span { position: absolute; left: 0; height: 2px; width: 100%; background: currentColor; border-radius: 2px; transition: transform 0.25s ease, opacity 0.25s ease; }
.menu-toggle__bars span:nth-child(1) { top: 0; }
.menu-toggle__bars span:nth-child(2) { top: 5px; }
.menu-toggle__bars span:nth-child(3) { top: 10px; }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars span:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

.mobile-menu {
  position: fixed;
  inset: 0 0 0 0;
  top: 0;
  background: var(--brand-deep);
  color: var(--primary-foreground);
  z-index: 60;
  padding: 6rem var(--gutter) 2rem;
  overflow-y: auto;
  transform: translateY(-100%);
  transition: transform 0.3s ease;
  visibility: hidden;
}
.mobile-menu.is-open { transform: translateY(0); visibility: visible; }
.mobile-menu__close {
  position: absolute; top: 1.5rem; right: 1.5rem;
  width: 2.75rem; height: 2.75rem;
  border-radius: 3px; background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.2); color: var(--primary-foreground);
  font-size: 1.5rem; line-height: 1;
}
.mobile-menu__group { border-bottom: 1px solid rgba(255,255,255,0.12); padding-block: 1rem; }
.mobile-menu__group > a,
.mobile-menu__group > span { font-family: var(--font-serif); font-size: 1.5rem; display: block; }
.mobile-menu__sub { list-style: none; margin: 0.75rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.mobile-menu__sub a { color: rgba(245,246,248,0.75); font-size: 1rem; }
.mobile-menu__cta { margin-top: 1.5rem; }

/* ------------------------------ Footer ---------------------------------- */
.site-footer {
  background: var(--brand-deep);
  color: rgba(245,246,248,0.7);
  border-top: 1px solid rgba(255,255,255,0.1);
  font-family: var(--font-sans);
}
.site-footer__top {
  max-width: var(--container);
  margin-inline: auto;
  padding: 3.5rem var(--gutter);
  display: grid;
  gap: 2.5rem;
  grid-template-columns: 1fr;
}
@media (min-width: 800px) {
  .site-footer__top { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1080px) {
  /* 3 columns: Brand, Contact, Practice Areas (Areas We Serve was dropped
     from the footer — 24 neighborhoods made it too long; still reachable
     from the header nav). */
  .site-footer__top { grid-template-columns: 1.5fr 1fr 1fr; }
}
.site-footer__tagline { margin-top: 0.75rem; opacity: 0.75; font-size: 0.9rem; max-width: 22rem; }
.site-footer__social { list-style: none; margin: 1.5rem 0 0; padding: 0; display: flex; gap: 0.6rem; }
.site-footer__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 2.4rem;
  width: 2.4rem;
  border-radius: 3px;
  border: 1px solid rgba(255,255,255,0.2);
  color: rgba(255,255,255,0.75);
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.site-footer__social a:hover { background: var(--brand-warm); border-color: var(--brand-warm); color: var(--brand-deep); }
.site-footer__col h3 { font-family: var(--font-sans); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.14em; color: rgba(255,255,255,0.55); margin-bottom: 1rem; }
.site-footer__col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; }
.site-footer__col a:hover { color: var(--primary-foreground); }
.site-footer__contact a { display: inline-flex; align-items: center; gap: 0.5rem; }
.site-footer__bottom {
  border-top: 1px solid rgba(255,255,255,0.1);
  max-width: var(--container);
  margin-inline: auto;
  padding: 1.5rem var(--gutter);
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  font-size: 0.8rem;
  opacity: 0.7;
}
.site-footer__legal-links { display: flex; gap: 1.25rem; flex-wrap: wrap; }

/* ---------------------------- Trust strip ------------------------------- */
.trust-strip {
  background: var(--brand-deep);
  color: rgba(245,246,248,0.85);
  border-top: 1px solid rgba(255,255,255,0.1);
  overflow: hidden;
}
.trust-strip__track {
  display: flex;
  align-items: center;
  gap: 2.5rem;
  white-space: nowrap;
  padding-block: 1.25rem;
  width: max-content;
  animation: jpsl-marquee 32s linear infinite;
  will-change: transform;
}
.trust-strip:hover .trust-strip__track { animation-play-state: paused; }
.trust-strip__item { display: inline-flex; align-items: center; gap: 0.75rem; font-size: 0.875rem; font-family: var(--font-sans); flex-shrink: 0; }
.trust-strip__dot { width: 0.28rem; height: 0.28rem; border-radius: 9999px; background: color-mix(in oklch, var(--brand-warm) 60%, transparent); flex-shrink: 0; }
@keyframes jpsl-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .trust-strip__track { animation: none; flex-wrap: wrap; white-space: normal; justify-content: center; }
  html { scroll-behavior: auto; }
}

/* ------------------------------- Hero ----------------------------------- */
.hero {
  position: relative;
  min-height: 92vh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--gradient-hero);
}
.hero__slide {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.8s ease;
}
.hero__slide.is-active { opacity: 1; }
/* Left-weighted scrim: darkens only the text column, fading out by
   mid-frame so the photo's subject stays bright on the right; a lighter
   bottom layer anchors the CTA area. */
.hero__scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(95deg, color-mix(in oklch, var(--brand-deep) 85%, transparent) 0%, color-mix(in oklch, var(--brand-deep) 62%, transparent) 30%, color-mix(in oklch, var(--brand-deep) 20%, transparent) 56%, transparent 74%),
    linear-gradient(to top, color-mix(in oklch, var(--brand-deep) 65%, transparent) 0%, transparent 45%);
}
/* Soft text shadow as extra insurance over bright photo areas. */
.hero__content { text-shadow: 0 2px 18px color-mix(in oklch, var(--brand-deep) 45%, transparent); }
.hero__inner {
  position: relative;
  z-index: 10;
  max-width: var(--container);
  margin-inline: auto;
  width: 100%;
  padding: 10rem var(--gutter) 6rem;
}
.hero__content { max-width: 48rem; }
.hero__eyebrow { color: rgba(245,246,248,0.9); margin-bottom: 1.5rem; }
.hero h1 { color: var(--primary-foreground); margin-top: 0.5rem; }
.hero__lede { margin-top: 2rem; color: rgba(245,246,248,0.85); font-size: clamp(1.05rem, 1.5vw, 1.25rem); line-height: 1.7; max-width: 42rem; font-family: var(--font-sans); }
.hero__actions { margin-top: 2.5rem; display: flex; flex-wrap: wrap; gap: 0.75rem; }
/* Inverted two-tone hero title: gold lead line, white italic accent —
   reads better over bright photo areas. */
.hero h1.hero-title--invert { color: var(--brand-warm); }
.hero h1.hero-title--invert .accent-warm { color: var(--primary-foreground); }

/* ------------- Hero with an embedded quick-capture form ----------------- */
.hero__grid { display: grid; gap: 2.5rem; grid-template-columns: 1fr; align-items: center; width: 100%; }
@media (min-width: 1000px) {
  .hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 24rem); gap: 4rem; }
}
/* The form adds height, so pull the top padding in a little. */
.hero--with-form .hero__inner { padding-top: 8.5rem; padding-bottom: 4.5rem; }
.hero--with-form .hero__content { max-width: 40rem; }

.hero-form {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 0.4rem;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 25px 60px -20px rgba(0, 0, 0, 0.5);
  padding: clamp(1.5rem, 2.4vw, 1.9rem);
  color: var(--primary-foreground);
  text-shadow: none;
}
.hero-form__title { font-family: var(--font-serif); font-weight: 500; font-size: 1.5rem; line-height: 1.15; color: #fff; margin: 0; }
.hero-form__sub { margin-top: 0.5rem; font-family: var(--font-sans); font-size: 0.85rem; line-height: 1.5; color: rgba(245, 246, 248, 0.8); }
.hero-form form { margin-top: 1.35rem; }
.hero-form .form-field { margin-bottom: 0.8rem; gap: 0.3rem; }
.hero-form .form-field label { font-size: 0.76rem; color: rgba(245, 246, 248, 0.9); }
.hero-form .form-field input {
  padding: 0.7rem 0.85rem;
  font-size: 0.95rem;
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.25);
  color: #fff;
}
.hero-form .form-field input::placeholder { color: rgba(245, 246, 248, 0.5); }
.hero-form .form-field input:focus {
  background: rgba(255, 255, 255, 0.18);
  border-color: var(--brand-warm);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--brand-warm) 30%, transparent);
}
.hero-form .form-consent { font-size: 0.72rem; line-height: 1.45; color: rgba(245, 246, 248, 0.75); margin-bottom: 1rem; }
.hero-form .form-consent input[type="checkbox"] { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.3); }
.hero-form .form-consent input[type="checkbox"]:hover { border-color: var(--brand-warm); }
.hero-form .form-consent input[type="checkbox"]:checked { background: var(--brand-warm); border-color: var(--brand-warm); }
.hero-form .form-consent input[type="checkbox"]:checked::after { border-color: var(--brand-deep); }
.hero-form .form-note { margin-top: 0.7rem; text-align: center; font-size: 0.72rem; color: rgba(245, 246, 248, 0.65); }

/* Shorter inner-page hero band */
.page-hero {
  position: relative;
  background: var(--gradient-hero);
  color: var(--primary-foreground);
  overflow: hidden;
}
.page-hero__inner { position: relative; z-index: 10; max-width: var(--container-6); margin-inline: auto; padding: 9rem var(--gutter) 4.5rem; }
.page-hero h1 { color: var(--primary-foreground); }
.page-hero__lede { margin-top: 1.25rem; max-width: 40rem; color: rgba(245,246,248,0.85); font-family: var(--font-sans); }
.page-hero__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.55; }

/* -------------------------- Intro (2 practices) ------------------------- */
.intro { text-align: center; }
.intro .h-section { margin-top: 1.5rem; }
.intro p { margin-top: 2rem; }
.intro p.strong { margin-top: 1rem; color: var(--foreground); }

/* --------------------------- Practice cards ----------------------------- */
.practice-grid { display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
@media (min-width: 800px) { .practice-grid { grid-template-columns: 1fr 1fr; } }
.practice-card {
  position: relative;
  border-radius: 0.25rem;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.25s ease;
  color: var(--foreground);
}
.practice-card:hover { transform: translateY(-2px); }
.practice-card--warm { background: var(--gradient-warm); }
.practice-card--deep { background: var(--brand-deep); color: var(--primary-foreground); }
.practice-card__media { position: relative; height: clamp(16rem, 30vw, 22rem); overflow: hidden; }
.practice-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.practice-card:hover .practice-card__media img { transform: scale(1.03); }
.practice-card__scrim { position: absolute; inset: 0; }
.practice-card--warm .practice-card__scrim { background: linear-gradient(to top, color-mix(in oklch, var(--brand-warm) 60%, transparent), transparent); }
.practice-card--deep .practice-card__scrim { background: linear-gradient(to top, var(--brand-deep), transparent); }
.practice-card__body { padding: clamp(1.25rem, 2.5vw, 1.75rem) clamp(1.5rem, 3vw, 2.25rem); display: flex; flex-direction: column; justify-content: space-between; flex: 1; gap: 1.25rem; }
.practice-card__eyebrow--warm { color: color-mix(in oklch, var(--brand-deep) 70%, transparent); }
.practice-card__eyebrow--deep { color: var(--brand-warm); }
.practice-card h3 { margin-top: 0.85rem; }
.practice-card__text { margin-top: 1rem; font-family: var(--font-sans); line-height: 1.65; max-width: 28rem; }
.practice-card--warm .practice-card__text { color: color-mix(in oklch, var(--foreground) 75%, transparent); }
.practice-card--deep .practice-card__text { color: rgba(245,246,248,0.8); }
.practice-card__list { list-style: none; margin: 1.25rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; font-family: var(--font-sans); }
.practice-card__list a { display: inline-flex; align-items: center; gap: 0.75rem; }
.practice-card__list .bullet { width: 0.375rem; height: 0.375rem; border-radius: 9999px; flex-shrink: 0; }
.practice-card--warm .bullet { background: var(--brand-deep); }
.practice-card--deep .bullet { background: var(--brand-warm); }
.practice-card__list a span:last-child { border-bottom: 1px solid transparent; }
.practice-card__list a:hover span:last-child { border-bottom-color: currentColor; }
.practice-card__foot { display: flex; align-items: center; justify-content: space-between; font-family: var(--font-sans); }
.practice-card__more { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 500; }
.practice-card__foot .footnote { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.16em; opacity: 0.7; }

/* ------------------------------ Reviews --------------------------------- */
.rating-pill {
  margin-top: 1.5rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: 3px;
  background: color-mix(in oklch, var(--brand-warm) 15%, transparent);
  padding: 0.5rem 1.25rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--brand-deep);
}
.rating-pill .stars { color: var(--brand-warm); letter-spacing: 0.05em; }
.review-card {
  flex: 0 0 clamp(20rem, 32vw, 24rem);
  scroll-snap-align: start;
  border-radius: 0.25rem;
  background: var(--brand-cream);
  border: 1px solid var(--border);
  padding: 2rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: border-color 0.2s ease;
}
.review-card:hover { border-color: color-mix(in oklch, var(--brand-deep) 20%, transparent); }
.review-card__stars { color: var(--brand-warm); font-size: 1.1rem; letter-spacing: 0.05em; }
.review-card__quote { margin-top: 1.25rem; color: color-mix(in oklch, var(--foreground) 90%, transparent); line-height: 1.7; font-family: var(--font-sans); }
.review-card__foot { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--border); display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; }
.review-card__name { display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 500; font-family: var(--font-sans); }
.review-card__name svg { color: var(--brand-deep); width: 1rem; height: 1rem; }
.review-card__meta { font-size: 0.85rem; color: var(--muted-foreground); font-family: var(--font-sans); }
.review-card__source { display: inline-flex; align-items: center; gap: 0.4rem; flex-shrink: 0; border-radius: 3px; background: var(--background); border: 1px solid var(--border); padding: 0.25rem 0.6rem; }
.review-card__source span { font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 500; color: color-mix(in oklch, var(--foreground) 70%, transparent); font-family: var(--font-sans); }

/* --------------------------- Why choose us ------------------------------ */
.reasons-grid { display: grid; gap: 1.5rem; grid-template-columns: 1fr; margin-top: 4rem; }
@media (min-width: 640px) { .reasons-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 960px) { .reasons-grid { grid-template-columns: repeat(3, 1fr); } }
.reason-card {
  border-radius: 0.25rem;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.03);
  padding: clamp(1.75rem, 3vw, 2.5rem);
  transition: transform 0.3s ease, border-color 0.3s ease, background 0.3s ease;
}
.reason-card:hover { transform: translateY(-4px); border-color: rgba(255,255,255,0.2); background: rgba(255,255,255,0.05); }
.reason-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.reason-card__title { font-family: var(--font-serif); font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.14em; line-height: 1.4; color: var(--primary-foreground); }
.reason-card__head svg { width: 1.75rem; height: 1.75rem; color: rgba(245,246,248,0.8); flex-shrink: 0; }
.reason-card hr { border: none; border-top: 1px solid rgba(255,255,255,0.1); margin: 1.25rem 0; }
.reason-card p { color: rgba(245,246,248,0.7); font-size: 0.95rem; line-height: 1.7; font-family: var(--font-sans); }

/* ------------------------------ Why John -------------------------------- */
.bio-grid { display: grid; gap: 3rem; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 960px) { .bio-grid { grid-template-columns: 5fr 7fr; } }
.bio-portrait { border-radius: 0.25rem; overflow: hidden; box-shadow: var(--shadow-soft); }
.bio-portrait img { width: 100%; height: auto; object-fit: cover; }
.bio-body { font-family: var(--font-sans); display: flex; flex-direction: column; gap: 1.5rem; }
.bio-body h2 { font-family: var(--font-serif); }
.bio-body p { color: color-mix(in oklch, var(--foreground) 85%, transparent); font-size: 1.075rem; line-height: 1.7; }
.bio-stats { display: grid; gap: 2.5rem; grid-template-columns: 1fr; padding-top: 1.5rem; border-top: 1px solid var(--border); }
@media (min-width: 640px) { .bio-stats { grid-template-columns: repeat(3, 1fr); } }
.bio-stats dt { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.16em; color: var(--muted-foreground); }
.bio-stats dd { margin: 0.5rem 0 0; font-family: var(--font-serif); font-size: 1.5rem; letter-spacing: -0.01em; }

/* Attorney section (landing-page style) */
.bio-portrait--headshot { max-width: 30rem; }
/* Crop in on the face: the source photo has a lot of headroom above him and
   torso below, so a straight object-fit:cover on the full frame reads too
   distant. A shorter aspect ratio + a top-weighted focal point keeps his
   face the largest thing in the frame without cutting off his chin. */
.bio-portrait--headshot img { aspect-ratio: 4 / 5; object-fit: cover; object-position: center 22%; }
.bio-features { list-style: none; margin: 0.5rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 1.4rem; }
.bio-features li { display: flex; gap: 1rem; align-items: flex-start; }
.bio-features__check { flex-shrink: 0; margin-top: 0.3rem; display: inline-flex; align-items: center; justify-content: center; height: 1.4rem; width: 1.4rem; border-radius: 9999px; background: var(--brand-warm); color: #fff; }
.bio-features__title { font-family: var(--font-serif); font-size: 1.2rem; }
.bio-features li p { margin-top: 0.35rem; font-size: 0.95rem; line-height: 1.65; color: color-mix(in oklch, var(--foreground) 78%, transparent); }
.bio-body .btn { align-self: flex-start; margin-top: 0.75rem; }

/* Stats band — 3 items on Family Law, 5 on Personal Injury. */
.stats-band { background: var(--brand-deep); color: var(--primary-foreground); padding-block: clamp(2.5rem, 5vw, 3.5rem); }
/* Directly under the hero (Personal Injury): a touch less top padding and a
   hairline seam, so the navy photo scrim and the navy band read as one
   continuous surface rather than two stacked sections. */
.stats-band--hero-adjacent { padding-top: clamp(2rem, 4vw, 2.75rem); border-top: 1px solid rgba(255,255,255,0.08); }
/* auto-fit collapses empty tracks, so this fills evenly whether a page has
   3, 4, or 5 stats instead of assuming a fixed count per breakpoint. */
.stats-band__grid { max-width: var(--container-6); margin-inline: auto; padding-inline: var(--gutter); display: grid; gap: 2.5rem 1.5rem; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); text-align: center; }
.stats-band__value { font-family: var(--font-serif); font-weight: 500; font-size: clamp(2rem, 3.6vw, 2.85rem); color: var(--brand-warm); }
.stats-band__label { margin-top: 0.5rem; font-family: var(--font-sans); font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.14em; color: rgba(245,246,248,0.85); }

/* Focused practice cards (checklist columns) */
.focus-grid { display: grid; gap: 1.5rem; grid-template-columns: 1fr; margin-top: 3rem; }
@media (min-width: 900px) { .focus-grid { grid-template-columns: 1fr 1fr; } }
.focus-card { border-radius: 0.25rem; border: 1px solid var(--border); background: var(--card); padding: clamp(1.75rem, 3vw, 2.5rem); }
.focus-card__icon { display: inline-flex; align-items: center; justify-content: center; height: 2.75rem; width: 2.75rem; border-radius: 3px; background: transparent; border: 1px solid var(--border); color: var(--gold-ink); }
.focus-card h3 { font-family: var(--font-serif); font-size: clamp(1.5rem, 2.4vw, 1.9rem); margin-top: 1.1rem; }
.focus-card > p { margin-top: 0.85rem; font-family: var(--font-sans); color: color-mix(in oklch, var(--foreground) 75%, transparent); line-height: 1.65; }
.focus-card__list { list-style: none; margin: 1.4rem 0 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 0.7rem 1.25rem; font-family: var(--font-sans); }
@media (min-width: 560px) { .focus-card__list { grid-template-columns: 1fr 1fr; } }
.focus-card__list a { display: inline-flex; gap: 0.55rem; align-items: flex-start; color: var(--foreground); }
.focus-card__list a:hover { color: var(--brand-deep); }
.focus-card__list .jpsl-icon { color: var(--gold-ink); flex-shrink: 0; margin-top: 0.25rem; }


/* --------------------- Service image cards (practice landing) -----------
   A single full-bleed line of photo cards that drifts slowly so every service
   passes by on its own. Hover pauses the drift and opens the description;
   touch devices get a normal swipeable strip instead of the animation.
   ---------------------------------------------------------------------- */
.svc-carousel {
  /* Native horizontal scroller: drag, trackpad and shift+wheel all work.
     The visual edge gutter lives on .svc-carousel__track's padding below.
     scroll-padding-left/right here MUST match those two values exactly.
     Reason: .svc-card has scroll-snap-align: start, so the browser treats
     each card's left edge as the only valid resting position — 0 isn't one
     of them. Without scroll-padding, CSS Scroll Snap silently scrolls past
     the track's leading padding on load (and settles there again on every
     resize) to align the first card flush with the viewport edge, which
     visually erases the gutter no matter which element the padding is on.
     scroll-padding shifts what "start" means for snapping so the padded
     position becomes a valid snap point instead of being scrolled past. */
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: auto;
  scroll-snap-type: x proximity;
  scroll-padding-left: clamp(1.5rem, 4vw, 3rem);
  scroll-padding-right: var(--gutter);
  scrollbar-width: none;
  -ms-overflow-style: none;
  cursor: grab;
  margin-top: 3.5rem;
}
.svc-carousel::-webkit-scrollbar { display: none; }
.svc-carousel.is-dragging { cursor: grabbing; user-select: none; }
.svc-carousel__track {
  display: flex;
  flex-wrap: nowrap;
  gap: 1.25rem;
  width: max-content;
  padding-left: clamp(1.5rem, 4vw, 3rem);
  padding-right: var(--gutter);
}
.svc-carousel__nav { display: flex; gap: 0.5rem; justify-content: flex-end; margin-top: 1.75rem; }
.svc-carousel__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 2.9rem;
  width: 2.9rem;
  padding: 0;
  border-radius: 3px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--brand-deep);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.svc-carousel__btn:hover { background: var(--brand-deep); border-color: var(--brand-deep); color: #fff; }
.svc-carousel__btn:focus-visible { outline: 2px solid var(--brand-deep); outline-offset: 2px; }

.svc-card {
  position: relative;
  display: block;
  flex: 0 0 clamp(18rem, 25vw, 25rem);
  scroll-snap-align: start;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: 3px;
  border: 1px solid var(--border);
  background: var(--brand-deep);
  color: #fff;
  isolation: isolate;
}
.svc-card__img {
  -webkit-user-drag: none;
  user-select: none;
  position: absolute;
  inset: 0;
  height: 100%;
  width: 100%;
  object-fit: cover;
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.svc-card__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, oklch(0.22 0.05 255 / 0.92) 0%, oklch(0.24 0.05 255 / 0.55) 42%, oklch(0.3 0.05 255 / 0.12) 100%);
  transition: background 0.45s ease;
}
.svc-card__body {
  position: absolute;
  inset: auto 0 0 0;
  padding: clamp(1.4rem, 2.2vw, 2rem);
  display: block;
}
.svc-card__rule {
  display: block;
  height: 2px;
  width: 2.5rem;
  background: var(--brand-warm);
  margin-bottom: 0.9rem;
}
.svc-card__title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(1.6rem, 2.2vw, 2.05rem);
  line-height: 1.12;
  color: #fff;
  margin: 0;
}
.svc-card__reveal {
  display: block;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.5s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s ease;
}
.svc-card__text {
  display: block;
  margin-top: 0.9rem;
  font-family: var(--font-sans);
  font-size: 0.95rem;
  line-height: 1.6;
  color: rgba(245, 246, 248, 0.9);
}
.svc-card__more {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 1.1rem;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand-warm);
  border-bottom: 1px solid color-mix(in oklch, var(--brand-warm) 55%, transparent);
  padding-bottom: 0.2rem;
}
.svc-card:hover .svc-card__img,
.svc-card:focus-visible .svc-card__img { transform: scale(1.06); }
.svc-card:hover .svc-card__scrim,
.svc-card:focus-visible .svc-card__scrim {
  background:
    linear-gradient(to top, oklch(0.2 0.05 255 / 0.96) 0%, oklch(0.22 0.05 255 / 0.78) 55%, oklch(0.26 0.05 255 / 0.4) 100%);
}
.svc-card:hover .svc-card__reveal,
.svc-card:focus-visible .svc-card__reveal { max-height: 18rem; opacity: 1; }
.svc-card:focus-visible { outline: 2px solid var(--brand-warm); outline-offset: 3px; }

/* Touch devices: no hover, no drag cursor — swipe the strip, copy always on. */
@media (hover: none) {
  .svc-carousel { -webkit-overflow-scrolling: touch; cursor: auto; }
  .svc-carousel__nav { display: none; }
  .svc-card { scroll-snap-align: center; }
  .svc-card__reveal { max-height: none; opacity: 1; }
  .svc-card__scrim {
    background:
      linear-gradient(to top, oklch(0.2 0.05 255 / 0.95) 0%, oklch(0.23 0.05 255 / 0.72) 58%, oklch(0.28 0.05 255 / 0.3) 100%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .svc-card__img, .svc-card__scrim, .svc-card__reveal { transition: none; }
  .svc-card:hover .svc-card__img { transform: none; }
}

/* ------------------------------- Blog ----------------------------------- */
/* Full-width row: heading left, CTA hard right against the container edge.
   The 48rem cap belongs on the heading text, not the row — otherwise the
   button stops at 48rem and floats mid-page. */
.blog-head { display: flex; flex-direction: column; gap: 1.5rem; }
.blog-head > div:first-child { max-width: 48rem; }
.blog-head .btn { flex-shrink: 0; white-space: nowrap; }
@media (min-width: 800px) { .blog-head { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 2rem; } }
.post-grid { display: grid; gap: 1.5rem; grid-template-columns: 1fr; margin-top: 4rem; }
@media (min-width: 720px) { .post-grid { grid-template-columns: repeat(3, 1fr); } }
.post-card {
  display: flex;
  flex-direction: column;
  border-radius: 0.25rem;
  background: var(--background);
  border: 1px solid var(--border);
  overflow: hidden;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.post-card:hover { border-color: color-mix(in oklch, var(--brand-deep) 30%, transparent); box-shadow: var(--shadow-card); }
.post-card__media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--muted); }
.post-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.post-card:hover .post-card__media img { transform: scale(1.05); }
.post-card__body { padding: 1.5rem; display: flex; flex-direction: column; flex: 1; }
.post-meta { display: flex; align-items: center; gap: 0.75rem; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted-foreground); font-family: var(--font-sans); }
.post-meta__cat { color: var(--brand-deep); font-weight: 500; }
.post-meta__sep { color: var(--border); }
.post-card h3 { margin-top: 0.85rem; font-size: 1.25rem; line-height: 1.3; transition: color 0.2s ease; }
.post-card:hover h3 { color: var(--brand-deep); }
.post-card__excerpt { margin-top: 0.6rem; color: color-mix(in oklch, var(--foreground) 75%, transparent); line-height: 1.6; font-family: var(--font-sans); font-size: 0.9rem; flex: 1; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.post-card__foot { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; font-size: 0.85rem; font-family: var(--font-sans); }
.post-card__more { color: var(--brand-deep); font-weight: 500; }

/* ------------------------------- FAQ ------------------------------------ */
.faq-list { margin-top: 3.5rem; display: flex; flex-direction: column; gap: 0.75rem; }
.faq-item { border-radius: 0.25rem; border: 1px solid var(--border); background: var(--brand-cream); overflow: hidden; transition: border-color 0.2s ease; }
.faq-item[open] { border-color: color-mix(in oklch, var(--brand-deep) 30%, transparent); }
.faq-item > summary {
  list-style: none;
  cursor: pointer;
  padding: 1.25rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-family: var(--font-sans);
  font-weight: 500;
  color: var(--foreground);
}
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary .faq-chevron { color: var(--brand-deep); transition: transform 0.25s ease; flex-shrink: 0; }
.faq-item[open] > summary .faq-chevron { transform: rotate(180deg); }
.faq-item__answer { padding: 0 1.5rem 1.25rem; color: color-mix(in oklch, var(--foreground) 80%, transparent); line-height: 1.7; font-family: var(--font-sans); }

/* --------------------------- Closing CTA -------------------------------- */
.closing-cta {
  position: relative;
  padding-block: clamp(3.5rem, 7vw, 5.5rem);
  overflow: hidden;
  color: var(--primary-foreground);
  background:
    linear-gradient(180deg, oklch(0.14 0.05 259 / 0.58) 0%, oklch(0.19 0.06 258 / 0.4) 50%, oklch(0.14 0.05 259 / 0.6) 100%),
    url("../images/cta-bg-miami.jpg") center / cover no-repeat;
}
.closing-cta__inner {
  position: relative;
  max-width: var(--container-4);
  margin-inline: auto;
  text-align: center;
  padding: clamp(2.5rem, 5vw, 3.5rem) clamp(1.75rem, 4vw, 3rem);
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.24);
  border-radius: 0.5rem;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 25px 60px -20px rgba(0,0,0,0.45);
}
.closing-cta h2 { color: var(--primary-foreground); font-size: clamp(2.25rem, 5vw, 3.75rem); line-height: 1.05; }
.cta-cards { margin-top: 3.5rem; display: grid; gap: 1.5rem; grid-template-columns: 1fr; text-align: left; }
@media (min-width: 800px) { .cta-cards { grid-template-columns: 1fr 1fr; } }
.cta-card { border-radius: 0.25rem; border: 1px solid rgba(255,255,255,0.2); background: rgba(255,255,255,0.1); backdrop-filter: blur(16px); padding: clamp(2rem, 4vw, 2.5rem); display: flex; flex-direction: column; transition: background 0.2s ease; }
.cta-card:hover { background: rgba(255,255,255,0.15); }
.cta-card h3 { margin-top: 1rem; font-size: 1.5rem; color: var(--primary-foreground); line-height: 1.25; }
.cta-card p { margin-top: 1rem; color: rgba(245,246,248,0.8); line-height: 1.7; font-family: var(--font-sans); }
.cta-card__note { margin-top: 0.75rem; font-size: 0.875rem; color: var(--brand-warm); font-weight: 500; font-family: var(--font-sans); }
.cta-card .btn { margin-top: 2rem; width: fit-content; }
.closing-cta__phone { margin-top: 3rem; }
.closing-cta__fine { margin-top: 1.5rem; color: rgba(245,246,248,0.7); font-size: 0.875rem; font-family: var(--font-sans); }

/* ------------------------------ Forms ----------------------------------- */
.form-field { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 1.25rem; }
.form-field label { font-family: var(--font-sans); font-size: 0.85rem; font-weight: 500; }
.form-field input,
.form-field select,
.form-field textarea {
  font-family: var(--font-sans);
  font-size: 1rem;
  padding: 0.85rem 1rem;
  border-radius: 0.2rem;
  border: 1px solid var(--border);
  background: var(--background);
  color: var(--foreground);
  width: 100%;
}
.form-field textarea { min-height: 8rem; resize: vertical; }
/* Drop the native select chrome so it matches the text inputs exactly, and
   draw our own chevron (same shape as the icon set). */
.form-field select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 2.75rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 1.05rem 1.05rem;
  cursor: pointer;
}
.form-field select::-ms-expand { display: none; }
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus { outline: none; border-color: var(--brand-deep); box-shadow: 0 0 0 3px color-mix(in oklch, var(--brand-deep) 15%, transparent); }
.form-consent { display: flex; gap: 0.6rem; align-items: flex-start; font-size: 0.8rem; color: var(--muted-foreground); font-family: var(--font-sans); margin-bottom: 1rem; }
/* Branded checkbox: squared like the buttons and cards, navy when checked. */
.form-consent input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  flex-shrink: 0;
  display: grid;
  place-content: center;
  width: 1.1rem;
  height: 1.1rem;
  margin: 0.15rem 0 0;
  border: 1px solid var(--border);
  border-radius: 3px;
  background: var(--background);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.form-consent input[type="checkbox"]::after {
  content: "";
  width: 0.55rem;
  height: 0.3rem;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(-45deg) translate(1px, -1px);
  opacity: 0;
  transition: opacity 0.15s ease;
}
.form-consent input[type="checkbox"]:hover { border-color: color-mix(in oklch, var(--brand-deep) 45%, transparent); }
.form-consent input[type="checkbox"]:checked { background: var(--brand-deep); border-color: var(--brand-deep); }
.form-consent input[type="checkbox"]:checked::after { opacity: 1; }
.form-consent input[type="checkbox"]:focus-visible { outline: 2px solid var(--brand-deep); outline-offset: 2px; }
.form-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-note { font-size: 0.8rem; color: var(--muted-foreground); font-family: var(--font-sans); margin-top: 0.75rem; }
.form-message { margin-top: 1rem; padding: 0.85rem 1rem; border-radius: 0.2rem; font-family: var(--font-sans); font-size: 0.9rem; display: none; }
.form-message.is-success { display: block; background: color-mix(in oklch, var(--brand-deep) 12%, transparent); color: var(--brand-deep); }
.form-message.is-error { display: block; background: color-mix(in oklch, var(--destructive) 12%, transparent); color: var(--destructive); }

/* ------------------- Main consultation form (two-column) ---------------- */
.consultation-layout { display: grid; gap: 3rem; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 960px) { .consultation-layout { grid-template-columns: minmax(0, 23rem) minmax(0, 1fr); } }

.consultation-visual {
  position: relative;
  overflow: hidden;
  border-radius: 0.4rem;
  border: 1px solid var(--border);
  background: var(--brand-deep);
  color: var(--primary-foreground);
}
@media (min-width: 960px) { .consultation-visual { position: sticky; top: 1.75rem; } }
.consultation-visual__photo { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: top center; }
.consultation-visual__body { padding: clamp(1.5rem, 3vw, 2rem); }
.consultation-visual__body h3 { font-size: 1.4rem; margin-top: 0.85rem; color: var(--primary-foreground); }
.consultation-visual__body p { margin-top: 0.85rem; font-family: var(--font-sans); font-size: 0.92rem; line-height: 1.7; color: rgba(245,246,248,0.82); }
.consultation-visual__address {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255,255,255,0.14);
  display: flex;
  gap: 0.85rem;
  align-items: flex-start;
}
.consultation-visual__icon { flex-shrink: 0; color: var(--brand-warm); margin-top: 0.15rem; }
.consultation-visual__address address { font-style: normal; font-family: var(--font-sans); font-size: 0.9rem; line-height: 1.6; color: rgba(245,246,248,0.9); }
.consultation-visual__address a { display: flex; align-items: center; gap: 0.4rem; margin-top: 0.5rem; font-family: var(--font-sans); font-size: 0.85rem; font-weight: 600; color: var(--brand-warm); width: fit-content; }
.consultation-visual__address a:hover { text-decoration: underline; }
.consultation-visual__address a svg { flex-shrink: 0; }

/* Family Law / Personal Injury toggle that swaps which case-type select is
   active (see the small script in theme.js — no page reload, no framework). */
.form-toggle { display: flex; gap: 0.6rem; margin-bottom: 1.25rem; }
.form-toggle__option { flex: 1; position: relative; }
.form-toggle__option input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.form-toggle__option span {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0.75rem 0.5rem;
  border-radius: 0.2rem;
  border: 1px solid var(--border);
  font-family: var(--font-sans);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--muted-foreground);
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.form-toggle__option input:checked + span { background: var(--brand-deep); border-color: var(--brand-deep); color: var(--primary-foreground); }
.form-toggle__option input:focus-visible + span { outline: 2px solid var(--brand-deep); outline-offset: 2px; }

/* --------------------------- Pagination --------------------------------- */
.pagination { margin-top: 4rem; display: flex; justify-content: center; gap: 0.5rem; flex-wrap: wrap; }
.pagination .page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 2.75rem; height: 2.75rem; padding: 0 0.75rem;
  border-radius: 3px; border: 1px solid var(--border);
  font-family: var(--font-sans); font-size: 0.9rem; color: var(--foreground);
}
.pagination .page-numbers:hover { background: var(--brand-cream); }
.pagination .page-numbers.current { background: var(--brand-deep); color: var(--primary-foreground); border-color: var(--brand-deep); }

/* --------------------------- Cookie banner ------------------------------ */
/* Full-bleed consent bar. z-index sits ABOVE .mobile-cta-bar (80) so the
   consent choice is never buried under the sticky call bar on phones; the CTA
   bar reappears once a choice is made. */
.cookie-consent {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 90;
  background: var(--brand-deep);
  color: var(--primary-foreground);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.22);
  padding: 1.1rem var(--gutter) calc(1.1rem + env(safe-area-inset-bottom));
  font-family: var(--font-sans);
  font-size: 0.875rem;
}
.cookie-consent.hidden { display: none; }
.cookie-consent__inner { max-width: var(--container-6); margin-inline: auto; display: flex; flex-direction: column; gap: 0.85rem; }
.cookie-consent p { max-width: 68ch; line-height: 1.6; }
.cookie-consent__actions { display: flex; gap: 0.5rem; flex-wrap: wrap; flex-shrink: 0; }
@media (min-width: 760px) {
  .cookie-consent__inner { flex-direction: row; align-items: center; justify-content: space-between; gap: 2rem; }
}

/* --------------------------- Section headers ---------------------------- */
.section-head { max-width: 42rem; margin-inline: auto; text-align: center; }
/* Gold dash flourishes around centered section eyebrows (landing style). */
.section-head .eyebrow::before, .section-head .eyebrow::after { content: ""; display: inline-block; width: 1.4rem; height: 1px; background: var(--gold-ink); vertical-align: middle; margin: 0 0.65rem; opacity: 0.7; }
.section-head--left .eyebrow::after { display: none; }
.section-head .h-section { margin-top: 1.5rem; }
.section-head--left { margin-inline: 0; text-align: left; }

/* --------------------------- Service areas ------------------------------ */
.area-overview { display: grid; gap: 3rem; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 900px) { .area-overview { grid-template-columns: 7fr 5fr; } }
.area-facts { border-radius: 0.25rem; background: var(--brand-cream); border: 1px solid var(--border); padding: 2rem; position: sticky; top: 6rem; }
.area-facts__title { font-family: var(--font-serif); font-size: 1.25rem; margin-bottom: 1rem; }
.area-facts dl { margin: 0; }
.area-facts__row { display: flex; flex-direction: column; gap: 0.15rem; padding-block: 0.85rem; border-top: 1px solid var(--border); }
.area-facts__row:first-child { border-top: none; padding-top: 0; }
.area-facts dt { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted-foreground); font-family: var(--font-sans); }
.area-facts dd { margin: 0; font-family: var(--font-sans); font-weight: 500; color: var(--foreground); }

.practices-mini { display: grid; gap: 1.5rem; grid-template-columns: 1fr; margin-top: 3rem; }
@media (min-width: 720px) { .practices-mini { grid-template-columns: 1fr 1fr; } }
.practices-mini__card { display: flex; flex-direction: column; gap: 0.75rem; border-radius: 0.25rem; border: 1px solid var(--border); background: var(--background); padding: 2rem; transition: border-color 0.2s ease, box-shadow 0.2s ease; }
.practices-mini__card:hover { border-color: color-mix(in oklch, var(--brand-deep) 30%, transparent); box-shadow: var(--shadow-card); }
.practices-mini__list { font-family: var(--font-sans); color: var(--muted-foreground); font-size: 0.9rem; line-height: 1.6; }
.practices-mini__more { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--brand-deep); font-weight: 500; font-family: var(--font-sans); margin-top: auto; }


.area-archive-grid { display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
@media (min-width: 720px) { .area-archive-grid { grid-template-columns: 1fr 1fr; } }
.area-archive-card { display: flex; flex-direction: column; border-radius: 0.25rem; overflow: hidden; border: 1px solid var(--border); background: var(--background); transition: border-color 0.2s ease, box-shadow 0.2s ease; }
.area-archive-card:hover { border-color: color-mix(in oklch, var(--brand-deep) 30%, transparent); box-shadow: var(--shadow-card); }
.area-archive-card__media { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--muted); }
.area-archive-card__media img { width: 100%; height: 100%; object-fit: cover; }
.area-archive-card__body { display: flex; flex-direction: column; gap: 0.75rem; padding: 2rem; }
.area-archive-card__desc { font-family: var(--font-sans); color: color-mix(in oklch, var(--foreground) 75%, transparent); line-height: 1.65; font-size: 0.95rem; }

/* --------------------- Service detail + hub ----------------------------- */
.rule-warm { height: 1px; width: 2.5rem; background: var(--gold-ink); margin: 2rem 0; }

/* Full-bleed service hero: background image with a left-dark overlay so the
   image stays visible while the left-aligned text remains readable. */
.hero--service { min-height: 72vh; }
.hero--service .hero__scrim {
  background:
    linear-gradient(100deg, color-mix(in oklch, var(--brand-deep) 90%, transparent) 0%, color-mix(in oklch, var(--brand-deep) 62%, transparent) 46%, color-mix(in oklch, var(--brand-deep) 8%, transparent) 100%),
    linear-gradient(to top, color-mix(in oklch, var(--brand-deep) 45%, transparent), transparent 50%);
}
.service-hero__title-2 { color: rgba(245,246,248,0.55); }

/* Expanded Q&A (service pages show questions open, not in an accordion) */
.qa-list { display: flex; flex-direction: column; }
.qa-item { padding-block: 1.5rem; border-top: 1px solid var(--border); }
.qa-item:first-child { border-top: none; padding-top: 0; }
.qa-item__q { font-family: var(--font-sans); font-weight: 600; font-size: 1.05rem; color: var(--foreground); }
.qa-item__a { margin-top: 0.6rem; color: color-mix(in oklch, var(--foreground) 75%, transparent); font-family: var(--font-sans); line-height: 1.7; }
.qa-item__a p + p { margin-top: 0.75rem; }

/* Full-bleed closing CTA (matches .closing-cta; used on service/landing/FAQ pages) */
.cta-card-block {
  position: relative;
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  text-align: center;
  overflow: hidden;
  color: var(--primary-foreground);
  padding: clamp(3rem, 6vw, 5rem) var(--gutter);
  background:
    linear-gradient(180deg, oklch(0.14 0.05 259 / 0.58) 0%, oklch(0.19 0.06 258 / 0.4) 50%, oklch(0.14 0.05 259 / 0.6) 100%),
    url("../images/cta-bg-miami.jpg") center / cover no-repeat;
}
.cta-card-block__inner {
  position: relative;
  max-width: var(--container-3);
  margin-inline: auto;
  padding: clamp(2.25rem, 4.5vw, 3.25rem) clamp(1.5rem, 3.5vw, 2.75rem);
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.24);
  border-radius: 0.5rem;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 25px 60px -20px rgba(0,0,0,0.45);
}
.cta-card-block h2 { color: var(--primary-foreground); }
.cta-card-block p { margin-top: 1rem; margin-inline: auto; max-width: 40rem; color: rgba(245,246,248,0.8); font-family: var(--font-sans); line-height: 1.7; }
.cta-card-block .btn { margin-top: 2rem; }

.overview-2col { display: grid; gap: 3.5rem; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 960px) { .overview-2col { grid-template-columns: 1fr 1fr; } }
.overview-grid { display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: 0.25rem; overflow: hidden; }
@media (min-width: 560px) { .overview-grid { grid-template-columns: 1fr 1fr; } }
.overview-grid__cell { background: var(--brand-cream); padding: 2rem; }
.overview-grid__icon { display: inline-flex; align-items: center; justify-content: center; height: 2.5rem; width: 2.5rem; border-radius: 3px; background: transparent; border: 1px solid var(--border); color: var(--gold-ink); }
.overview-grid__title { font-family: var(--font-serif); font-size: 1.25rem; margin-top: 1.25rem; }
.overview-grid__cell p { margin-top: 0.75rem; color: color-mix(in oklch, var(--foreground) 75%, transparent); font-family: var(--font-sans); font-size: 0.9rem; line-height: 1.6; }

.approach-2col { display: grid; gap: 3.5rem; grid-template-columns: 1fr; }
@media (min-width: 960px) { .approach-2col { grid-template-columns: 1fr 1fr; } }
.approach-list { list-style: none; margin: 2.5rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 1.25rem; }
.approach-list li { display: flex; gap: 1rem; align-items: flex-start; font-family: var(--font-sans); line-height: 1.6; color: color-mix(in oklch, var(--foreground) 85%, transparent); }
.approach-check { flex-shrink: 0; margin-top: 0.15rem; display: inline-flex; align-items: center; justify-content: center; height: 1.5rem; width: 1.5rem; border-radius: 9999px; background: var(--brand-warm); color: var(--brand-deep); }
.callout { margin: 2.5rem 0 0; border-radius: 0.25rem; background: var(--background); border: 1px solid var(--border); padding: 2rem; font-family: var(--font-sans); line-height: 1.7; color: color-mix(in oklch, var(--foreground) 90%, transparent); font-style: italic; }

.related-grid { display: grid; gap: 1.25rem; grid-template-columns: 1fr; margin-top: 3.5rem; }
@media (min-width: 560px) { .related-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 960px) { .related-grid { grid-template-columns: repeat(4, 1fr); } }
.related-card { display: flex; flex-direction: column; justify-content: space-between; min-height: 11rem; border-radius: 0.25rem; border: 1px solid var(--border); background: var(--brand-cream); padding: 1.75rem; transition: border-color 0.2s ease; }
.related-card:hover { border-color: color-mix(in oklch, var(--brand-deep) 40%, transparent); }
.related-card__title { font-family: var(--font-serif); font-size: 1.25rem; line-height: 1.25; }
.related-card__more { display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 1.5rem; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.16em; color: var(--brand-deep); font-family: var(--font-sans); }

.fear-grid { display: grid; gap: 1.5rem; grid-template-columns: 1fr; margin-top: 3.5rem; }
@media (min-width: 720px) { .fear-grid { grid-template-columns: 1fr 1fr; } }
.fear-card { display: flex; flex-direction: column; border-radius: 0.25rem; border: 1px solid var(--border); background: var(--brand-cream); padding: 2.5rem; transition: border-color 0.2s ease, box-shadow 0.2s ease; }
.fear-card:hover { border-color: color-mix(in oklch, var(--brand-deep) 40%, transparent); box-shadow: var(--shadow-card); }
.fear-card h3 { margin-top: 1rem; }
.fear-card__text { margin-top: 1.25rem; color: color-mix(in oklch, var(--foreground) 80%, transparent); font-family: var(--font-sans); line-height: 1.7; }
.fear-card__more { margin-top: 2rem; display: inline-flex; align-items: center; gap: 0.4rem; font-family: var(--font-sans); font-weight: 500; color: var(--brand-deep); }

.feature-card { border-radius: 0.25rem; border: 1px solid var(--border); background: var(--background); padding: 2rem; }
.feature-card__icon { display: inline-flex; align-items: center; justify-content: center; height: 2.75rem; width: 2.75rem; border-radius: 3px; background: transparent; border: 1px solid var(--border); color: var(--gold-ink); }
.feature-card__title { font-family: var(--font-serif); font-size: 1.25rem; margin-top: 1.25rem; }
.feature-card p { margin-top: 0.75rem; color: color-mix(in oklch, var(--foreground) 75%, transparent); font-family: var(--font-sans); font-size: 0.95rem; line-height: 1.65; }

/* ------------------------- Scenario list (recognition) ------------------- */
/* "Does this sound like you?" — same gold motif and type as .edge-card, but
   borderless with the rule ABOVE each item. Reads as an editorial column
   rather than a box, so it does not duplicate "Why choose us" further down
   the same page. */
.scenario-grid { display: grid; grid-template-columns: 1fr; gap: clamp(2rem, 4vw, 2.6rem) clamp(2rem, 5vw, 3.5rem); margin-top: clamp(2.5rem, 5vw, 3.25rem); }
@media (min-width: 840px) { .scenario-grid { grid-template-columns: 1fr 1fr; } }
.scenario-item { padding-top: 1.15rem; border-top: 2px solid var(--brand-warm); }
.scenario-item__title { font-family: var(--font-serif); font-size: clamp(1.15rem, 2vw, 1.4rem); line-height: 1.3; }
.scenario-item__body { margin-top: 0.7rem; font-family: var(--font-sans); font-size: 0.95rem; line-height: 1.7; color: color-mix(in oklch, var(--foreground) 76%, transparent); }

/* ------------------------- Edge cards (accent-rule) ---------------------- */
/* Shared by "Does this sound like you?" (scenarios) and "Why choose us"
   (reasons). Deliberately unlike .case-tile: no icon, no link, a warm rule
   instead, and roomier text so each block reads as a statement. */
.edge-grid { display: grid; gap: 1.25rem; grid-template-columns: 1fr; margin-top: clamp(2.5rem, 5vw, 3.25rem); }
@media (min-width: 840px) { .edge-grid { grid-template-columns: 1fr 1fr; } }
.edge-card {
  position: relative;
  background: var(--background);
  border: 1px solid var(--border);
  border-radius: 0.25rem;
  padding: clamp(1.6rem, 3vw, 2.15rem);
  padding-left: clamp(1.9rem, 3.5vw, 2.5rem);
}
.edge-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: clamp(1.6rem, 3vw, 2.15rem);
  bottom: clamp(1.6rem, 3vw, 2.15rem);
  width: 2px;
  background: var(--brand-warm);
}
.edge-card__title { font-family: var(--font-serif); font-size: clamp(1.15rem, 2vw, 1.4rem); line-height: 1.3; }
.edge-card__body { margin-top: 0.8rem; font-family: var(--font-sans); font-size: 0.95rem; line-height: 1.7; color: color-mix(in oklch, var(--foreground) 76%, transparent); }
.recognition-cta { margin-top: clamp(2rem, 4vw, 2.75rem); text-align: center; }
.recognition-cta__note { margin-top: 0.9rem; font-family: var(--font-sans); font-size: 0.85rem; color: color-mix(in oklch, var(--foreground) 65%, transparent); }
/* Headline-only section head: the eyebrow normally supplies the top offset. */
.section-head--no-eyebrow .h-section { margin-top: 0; }

/* ----------------------- Grouped services (case groups) ------------------ */
/* Ordered service catalogue: an editorial group header (numeral + rule) over a
   grid of linked tiles. Each tile is an <a> to that service page, so the whole
   card is the hit target — the arrow is affordance, not a separate link. */
.case-groups { display: flex; flex-direction: column; gap: clamp(2.75rem, 5vw, 4rem); margin-top: clamp(2.5rem, 5vw, 3.5rem); }

.case-group__head { display: flex; align-items: baseline; gap: clamp(1rem, 2.5vw, 1.75rem); padding-bottom: 1.1rem; border-bottom: 1px solid var(--border); }
.case-group__index { flex-shrink: 0; font-family: var(--font-serif); font-size: clamp(1.6rem, 3vw, 2.25rem); line-height: 1; color: var(--gold-ink); font-variant-numeric: lining-nums; }
.case-group__title { font-family: var(--font-serif); font-size: clamp(1.35rem, 2.4vw, 1.8rem); line-height: 1.2; }
.case-group__desc { margin-top: 0.5rem; max-width: 46rem; font-family: var(--font-sans); font-size: 0.94rem; line-height: 1.6; color: color-mix(in oklch, var(--foreground) 70%, transparent); }

.case-tiles { margin-top: 1.5rem; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(16.5rem, 1fr)); }
.case-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  padding: 1.5rem;
  border-radius: 0.25rem;
  border: 1px solid var(--border);
  background: var(--brand-cream);
  color: var(--foreground);
  transition: background 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease, transform 0.22s ease;
}
a.case-tile:hover, a.case-tile:focus-visible {
  background: var(--background);
  border-color: color-mix(in oklch, var(--brand-deep) 45%, transparent);
  box-shadow: 0 12px 28px -18px rgba(10, 20, 40, 0.55);
  transform: translateY(-2px);
}
.case-tile__icon { display: inline-flex; align-items: center; justify-content: center; height: 2.4rem; width: 2.4rem; border-radius: 3px; border: 1px solid var(--border); background: var(--background); color: var(--gold-ink); transition: border-color 0.22s ease, color 0.22s ease; }
a.case-tile:hover .case-tile__icon { border-color: color-mix(in oklch, var(--gold-ink) 55%, transparent); }
.case-tile__title { font-family: var(--font-serif); font-size: 1.08rem; line-height: 1.3; }
.case-tile__desc { flex: 1; font-family: var(--font-sans); font-size: 0.88rem; line-height: 1.6; color: color-mix(in oklch, var(--foreground) 72%, transparent); }
.case-tile__more { display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 0.15rem; font-family: var(--font-sans); font-size: 0.7rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold-ink); transition: gap 0.22s ease, color 0.22s ease; }
/* Always visible — hover only nudges the arrow and deepens the colour. */
a.case-tile:hover .case-tile__more, a.case-tile:focus-visible .case-tile__more { gap: 0.7rem; color: var(--brand-deep); }
@media (prefers-reduced-motion: reduce) {
  .case-tile, .case-tile__icon, .case-tile__more { transition: none; }
  a.case-tile:hover, a.case-tile:focus-visible { transform: none; }
  a.case-tile:hover .case-tile__more, a.case-tile:focus-visible .case-tile__more { gap: 0.4rem; }
}

/* --------------------------- Blog filter pills -------------------------- */
.filter-pills { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-bottom: 3rem; }
.filter-pill { font-family: var(--font-sans); font-size: 0.875rem; padding: 0.5rem 1.1rem; border-radius: 3px; border: 1px solid var(--border); color: var(--foreground); transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease; }
.filter-pill:hover { border-color: color-mix(in oklch, var(--brand-deep) 40%, transparent); }
.filter-pill.is-active { background: var(--brand-deep); color: var(--primary-foreground); border-color: var(--brand-deep); }

/* ------------------------------ Article --------------------------------- */
.article-hero__title { max-width: 52rem; }
.article-hero__meta { margin-top: 1.25rem; font-family: var(--font-sans); color: rgba(245,246,248,0.8); }
.article-body { margin-top: 0; }
.article-body h2, .article-body h3 { letter-spacing: -0.01em; }
.article-tags { margin-top: 2.5rem; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.article-tags a { font-family: var(--font-sans); font-size: 0.8rem; padding: 0.3rem 0.8rem; border-radius: 3px; background: var(--brand-cream); border: 1px solid var(--border); color: var(--muted-foreground); }
.page-links { margin-top: 2rem; font-family: var(--font-sans); display: flex; gap: 0.5rem; }

.author-box { margin-top: 3.5rem; display: flex; gap: 1.5rem; align-items: flex-start; padding: 2rem; border-radius: 0.25rem; background: var(--brand-cream); border: 1px solid var(--border); }
.author-box__avatar { flex-shrink: 0; }
.author-box__img { border-radius: 9999px; width: 64px; height: 64px; object-fit: cover; }
.author-box__name { font-family: var(--font-serif); font-size: 1.5rem; margin-top: 0.35rem; }
.author-box__bio { margin-top: 0.75rem; font-family: var(--font-sans); line-height: 1.7; color: color-mix(in oklch, var(--foreground) 80%, transparent); }
.author-box__link { margin-top: 1rem; display: inline-flex; align-items: center; gap: 0.4rem; font-family: var(--font-sans); font-weight: 500; color: var(--brand-deep); }

/* ---------------------------- Pages / misc ------------------------------ */
.page-featured { border-radius: 0.25rem; overflow: hidden; margin-bottom: 2.5rem; }
.page-featured__img { width: 100%; height: auto; }
.page-hero--legal .page-hero__inner { padding-block: 8rem 3.5rem; }
.legal-prose { max-width: 46rem; }
.legal-updated { margin-top: 2.5rem; font-family: var(--font-sans); font-size: 0.85rem; color: var(--muted-foreground); }

.search-form { display: flex; gap: 0.5rem; }
.search-form__input { flex: 1; font-family: var(--font-sans); font-size: 1rem; padding: 0.85rem 1rem; border-radius: 3px; border: 1px solid var(--border); background: var(--background); color: var(--foreground); }
.search-form__input:focus { outline: none; border-color: var(--brand-deep); }
.search-form__submit { white-space: nowrap; }
.error-404__search { max-width: 30rem; margin: 2.5rem auto 0; }

/* ---------------- Service conversion layout (approved trial) ------------ */
.svc-2col { display: grid; gap: 3rem; grid-template-columns: 1fr; }
@media (min-width: 1020px) { .svc-2col { grid-template-columns: minmax(0, 1fr) 370px; align-items: start; } }
.svc-main > div + div { margin-top: 3.5rem; }

.svc-rail { display: flex; flex-direction: column; gap: 1.25rem; position: sticky; top: 1.5rem; }
.rail-card { border-radius: 0.25rem; border: 1px solid var(--border); background: var(--brand-cream); padding: 1.5rem; }
.rail-form { background: var(--background); box-shadow: var(--shadow-card); }
.rail-form__title { font-family: var(--font-serif); font-size: 1.35rem; }
.rail-form__sub { margin-top: 0.35rem; font-family: var(--font-sans); font-size: 0.85rem; color: var(--muted-foreground); }
.rail-form form { margin-top: 1.25rem; }
.rail-form .form-field { margin-bottom: 0.85rem; }
.rail-form .form-field label { font-size: 0.78rem; }
.rail-form .form-field input,
.rail-form .form-field select,
.rail-form .form-field textarea { padding: 0.65rem 0.85rem; font-size: 0.92rem; }
/* Keep room for the chevron in the narrower rail form. */
.rail-form .form-field select { padding-right: 2.4rem; background-position: right 0.8rem center; }
.rail-form .form-field textarea { min-height: 5.5rem; }
.rail-form .form-consent { font-size: 0.72rem; margin-bottom: 0.85rem; }
.rail-form .form-note { text-align: center; }
.rail-form .form-note a { font-weight: 600; color: var(--brand-deep); }

.rail-reviewed { display: flex; gap: 1rem; align-items: flex-start; }
.rail-reviewed__avatar { flex-shrink: 0; width: 56px; height: 56px; border-radius: 9999px; object-fit: cover; object-position: top center; border: 2px solid var(--brand-warm); }
.rail-reviewed__name { font-family: var(--font-serif); font-size: 1.1rem; margin-top: 0.15rem; }
.rail-reviewed__meta { margin-top: 0.25rem; font-family: var(--font-sans); font-size: 0.8rem; color: var(--muted-foreground); line-height: 1.5; }

.rail-links h3 { font-family: var(--font-sans); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--muted-foreground); }
.rail-links ul { list-style: none; margin: 0.75rem 0 0; padding: 0; display: flex; flex-direction: column; }
.rail-links li { border-top: 1px solid var(--border); }
.rail-links li:first-child { border-top: none; }
.rail-links a { display: block; padding: 0.6rem 0; font-family: var(--font-sans); font-size: 0.92rem; color: var(--foreground); }
.rail-links a:hover { color: var(--brand-deep); }

.cta-band { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; border: 1px solid var(--border); background: var(--brand-cream); border-radius: 0.25rem; padding: 1.4rem 1.75rem; margin-block: 3rem; }
.cta-band--deep { background: var(--brand-deep); border-color: transparent; color: var(--primary-foreground); }
.cta-band__text { font-family: var(--font-sans); font-weight: 500; max-width: 26rem; line-height: 1.5; }

.related-grid--narrow { grid-template-columns: 1fr 1fr; gap: 0.75rem; margin-top: 2rem; }
@media (max-width: 560px) { .related-grid--narrow { grid-template-columns: 1fr; } }
.related-grid--narrow .related-card { min-height: 0; flex-direction: row; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.25rem; }
.related-grid--narrow .related-card__title { font-size: 1.02rem; }
.related-grid--narrow .related-card__more { margin-top: 0; }

.faq-topic { margin-top: 2.5rem; }
.faq-topic__title { font-family: var(--font-serif); font-size: 1.35rem; margin-bottom: 1rem; padding-bottom: 0.75rem; border-bottom: 2px solid var(--brand-warm); display: inline-block; }
.faq-topic__link { display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 1rem; font-family: var(--font-sans); font-weight: 500; font-size: 0.9rem; color: var(--brand-deep); }

.mobile-cta-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 80; display: flex; gap: 0.5rem; padding: 0.6rem 0.75rem calc(0.6rem + env(safe-area-inset-bottom)); background: var(--brand-deep); box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.2); }
.mobile-cta-bar .btn { flex: 1; justify-content: center; }
@media (min-width: 900px) { .mobile-cta-bar { display: none; } }
@media (max-width: 899px) { body.is-service, body.single-service_area, body.is-practice-area { padding-bottom: 4.25rem; } }

/* ------------------------------ 404 ------------------------------------- */
.error-404 { text-align: center; padding-block: clamp(5rem, 12vw, 9rem); }
.error-404 .code { font-family: var(--font-serif); font-size: clamp(4rem, 12vw, 8rem); color: var(--brand-deep); line-height: 1; }