/* ============================================================
   Justice On Demand — site-specific components
   Extends the boilerplate-update design system (see global.css)
   ============================================================ */

/* ---------- base ---------- */
body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}

.skip-link {
  position: absolute;
  top: -48px;
  left: 8px;
  z-index: 2000;
  padding: 10px 18px;
  border-radius: var(--radius-md);
  background: var(--color-brand-navy-deep);
  color: #fff;
  text-decoration: none;
  transition: top 0.2s ease;
}
.skip-link:focus {
  top: 8px;
}

main {
  background: var(--color-surface);
}

/* header phone link (new element next to CTA) */
.site-header__phone {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 14px;
  border-radius: 999px;
  color: #fff;
  text-decoration: none;
  font-family: var(--font-secondary);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  white-space: nowrap;
  transition: color 0.2s ease;
}
.site-header__phone svg {
  width: 17px;
  height: 17px;
}
.site-header__phone:hover {
  color: var(--color-brand-gold);
}
@media (max-width: 1240px) {
  .site-header__phone span {
    display: none;
  }
}
@media (max-width: 767px) {
  .site-header__phone {
    padding: 0 8px;
  }
}

/* ---------- buttons: extra variants ---------- */
.button {
  font-family: var(--font-secondary);
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.button svg {
  width: 18px;
  height: 18px;
}
.button-primary {
  background-color: var(--color-brand-gold);
  color: var(--color-brand-navy-deep);
  transition: all var(--duration-normal) var(--ease-out);
}
.button-primary:hover {
  background-color: var(--color-brand-primary-hover);
  transform: translateY(-1px);
  box-shadow: 0 14px 26px rgba(255, 199, 86, 0.25);
}
.button-ghost {
  background: transparent;
  color: #fff;
  border: 1.5px solid rgba(255, 255, 255, 0.55);
  transition: all var(--duration-normal) var(--ease-out);
}
.button-ghost:hover {
  border-color: #fff;
  background: rgba(255, 255, 255, 0.08);
}
.button-light {
  background: #fff;
  color: var(--color-brand-navy-deep);
  transition: all var(--duration-normal) var(--ease-out);
}
.button-light:hover {
  background: var(--color-surface-alt);
}
.button-outline-dark {
  background: transparent;
  color: var(--color-brand-navy-deep);
  border: 1.5px solid var(--color-brand-navy-deep);
  transition: all var(--duration-normal) var(--ease-out);
}
.button-outline-dark:hover {
  background: var(--color-brand-navy-deep);
  color: #fff;
}

/* ---------- hero: internal pages ---------- */
.hero-internal {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 85% 0%, rgba(63, 95, 133, 0.55) 0%, rgba(15, 42, 68, 0) 55%),
    linear-gradient(160deg, #142c47 0%, var(--color-brand-navy-deep) 55%, #0a1e33 100%);
  color: #fff;
  padding: calc(96px + var(--space-2xl)) 0 0;
}
.hero-internal__inner {
  width: min(100%, 1140px);
  margin: 0 auto;
  padding: var(--space-2xl) var(--section-padding-x) clamp(7rem, 14vw, 11rem);
  text-align: center;
}
.hero-internal--compact .hero-internal__inner {
  padding-bottom: clamp(6rem, 10vw, 8rem);
}
.hero-internal__kicker {
  margin: 0 0 var(--space-sm);
  font-family: var(--font-secondary);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-brand-gold);
}
.hero-internal__title {
  margin: 0 auto;
  max-width: 20ch;
  font-family: var(--font-hero);
  font-size: var(--fs-h1);
  font-weight: var(--fw-semibold);
  line-height: 1.12;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-wrap: balance;
}
.hero-internal__subtitle {
  max-width: 62ch;
  margin: var(--space-md) auto 0;
  color: rgba(255, 255, 255, 0.85);
  font-size: var(--fs-body-large);
}
.hero-internal__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-md);
  margin-top: var(--space-xl);
}
.hero-internal__chevron {
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: clamp(3.5rem, 8vw, 6.5rem);
  pointer-events: none;
}
.hero-internal__chevron svg {
  display: block;
  width: 100%;
  height: 100%;
}
.hero-internal__chevron .hero-home__chevron-fill {
  fill: var(--color-surface);
}

/* breadcrumbs */
.breadcrumbs {
  margin-bottom: var(--space-lg);
}
.breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.72);
}
.breadcrumbs li + li::before {
  content: "/";
  margin-right: 6px;
  opacity: 0.5;
}
.breadcrumbs a {
  color: inherit;
  text-decoration: none;
}
.breadcrumbs a:hover {
  color: var(--color-brand-gold);
}
.breadcrumbs [aria-current="page"] {
  color: #fff;
}

/* ---------- trust bar ---------- */
.trust-bar {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border-light);
}
.trust-bar__list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-md);
  width: min(100%, 1140px);
  margin: 0 auto;
  padding: var(--space-lg) var(--section-padding-x);
  list-style: none;
  text-align: center;
  font-family: var(--font-secondary);
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--color-text-secondary);
}
.trust-bar__list strong {
  display: block;
  font-family: var(--font-hero);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--color-brand-navy-deep);
  text-transform: uppercase;
}
@media (max-width: 767px) {
  .trust-bar__list {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ---------- content / prose ---------- */
.content-page {
  padding: var(--section-padding-y) 0;
}
.content-page__inner {
  width: min(100%, 820px);
  margin: 0 auto;
  padding: 0 var(--section-padding-x);
}
.prose {
  color: var(--color-text-primary);
}
.prose h2,
.prose h3,
.prose h4,
.prose h5,
.prose h6 {
  font-family: var(--font-hero);
  font-weight: var(--fw-medium);
  line-height: 1.2;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--color-brand-navy-deep);
  margin: 2.2em 0 0.6em;
  text-wrap: balance;
}
.prose h2 {
  font-size: var(--fs-h3);
  padding-bottom: 0.35em;
  border-bottom: 3px solid var(--color-brand-gold);
  display: inline-block;
}
.prose h3 {
  font-size: var(--fs-h5);
}
.prose h4 {
  font-size: var(--fs-h6);
  color: var(--color-brand-navy);
}
.prose h5,
.prose h6 {
  font-size: var(--fs-body-large);
  color: var(--color-brand-navy-soft);
}
.prose p,
.prose li {
  font-size: var(--fs-body-large);
  line-height: 1.75;
}
.prose p {
  margin: 0 0 1.1em;
}
.prose ul,
.prose ol {
  margin: 0 0 1.2em;
  padding-left: 1.4em;
}
.prose li {
  margin-bottom: 0.4em;
}
.prose a {
  color: var(--color-link-default);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--color-link-default) 40%, transparent);
  text-underline-offset: 3px;
  transition: color 0.2s ease;
}
.prose a:hover {
  color: var(--color-link-hover);
}
.prose a[href^="tel:"] {
  font-weight: 700;
  white-space: nowrap;
}
.prose img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-lg);
  margin: 1.6em auto;
  display: block;
}
.prose blockquote {
  margin: 1.6em 0;
  padding: var(--space-md) var(--space-lg);
  border-left: 4px solid var(--color-brand-gold);
  background: #fff;
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
.prose table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.6em 0;
  font-size: var(--fs-body);
}
.prose th,
.prose td {
  padding: 10px 14px;
  border: 1px solid var(--color-border-light);
  text-align: left;
}
.prose th {
  background: var(--color-brand-navy-deep);
  color: #fff;
  font-family: var(--font-secondary);
}

/* ---------- CTA band ---------- */
.cta-band {
  margin: var(--space-2xl) 0;
  border-radius: var(--radius-card);
  background:
    radial-gradient(100% 140% at 100% 0%, rgba(63, 95, 133, 0.5) 0%, rgba(15, 42, 68, 0) 60%),
    var(--color-brand-navy-deep);
  color: #fff;
  box-shadow: var(--shadow-xl);
  overflow: hidden;
}
.cta-band__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
  padding: var(--space-xl);
  border-top: 4px solid var(--color-brand-gold);
}
.cta-band__title {
  margin: 0 0 6px;
  font-family: var(--font-hero);
  font-size: var(--fs-h4);
  font-weight: var(--fw-medium);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.cta-band__text {
  margin: 0;
  color: rgba(255, 255, 255, 0.82);
  max-width: 46ch;
}
.cta-band__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}
.cta-band .button-outline-dark {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.6);
}
.cta-band .button-outline-dark:hover {
  background: #fff;
  color: var(--color-brand-navy-deep);
}

/* ---------- related cards ---------- */
.related-cards {
  padding: var(--section-padding-y) 0;
  background: var(--color-surface-alt);
}
.related-cards__inner {
  width: min(100%, 1140px);
  margin: 0 auto;
  padding: 0 var(--section-padding-x);
}
.related-cards__title {
  margin: 0 0 var(--space-lg);
  font-family: var(--font-hero);
  font-size: var(--fs-h3);
  font-weight: var(--fw-medium);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-brand-navy-deep);
  text-align: center;
  text-wrap: balance;
}
.related-cards__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: var(--space-md);
}
.related-cards__card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: var(--space-md) var(--space-lg);
  background: #fff;
  border-radius: var(--radius-md);
  border-top: 3px solid var(--color-brand-gold);
  color: var(--color-brand-navy-deep);
  font-family: var(--font-secondary);
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  box-shadow: var(--shadow-sm);
  transition: transform 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out);
}
.related-cards__card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
}
.related-cards__arrow {
  color: var(--color-brand-gold);
  font-size: 18px;
}

/* ---------- home: extra sections ---------- */
.hero-home__title-main {
  display: block;
}
.hero-home__title-sub {
  display: block;
  font-size: clamp(1.15rem, 2.2vw, 1.9rem);
  letter-spacing: 0.18em;
  font-weight: var(--fw-regular);
  margin-top: 0.4em;
}
.hero-home__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-md);
  margin-top: var(--space-xl);
}
.hero-home__proof {
  margin-top: var(--space-lg);
  color: rgba(255, 255, 255, 0.85);
  font-family: var(--font-secondary);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.about-band {
  position: relative;
  background:
    radial-gradient(90% 130% at 10% 10%, rgba(63, 95, 133, 0.5) 0%, rgba(15, 42, 68, 0) 55%),
    var(--color-brand-navy-deep);
  color: #fff;
  padding: var(--section-padding-y) 0;
}
.about-band__inner {
  width: min(100%, 880px);
  margin: 0 auto;
  padding: 0 var(--section-padding-x);
  text-align: center;
}
.about-band__kicker {
  margin: 0 0 var(--space-sm);
  font-family: var(--font-secondary);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-brand-gold);
}
.about-band__title {
  margin: 0 0 var(--space-lg);
  font-family: var(--font-hero);
  font-size: var(--fs-h2);
  font-weight: var(--fw-medium);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-wrap: balance;
}
.about-band__text {
  margin: 0 auto 1em;
  max-width: 68ch;
  color: rgba(255, 255, 255, 0.85);
  font-size: var(--fs-body-large);
  line-height: 1.75;
}
.about-band__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-md);
  margin-top: var(--space-xl);
}

.guidance-cards {
  padding: var(--section-padding-y) 0;
  background: var(--color-surface);
}
.guidance-cards__inner {
  width: min(100%, 1140px);
  margin: 0 auto;
  padding: 0 var(--section-padding-x);
}
.guidance-cards__header {
  text-align: center;
  margin-bottom: var(--space-xl);
}
.guidance-cards__kicker {
  margin: 0 0 var(--space-sm);
  font-family: var(--font-secondary);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-brand-navy-soft);
}
.guidance-cards__title {
  margin: 0;
  font-family: var(--font-hero);
  font-size: var(--fs-h2);
  font-weight: var(--fw-medium);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-brand-navy-deep);
  text-wrap: balance;
}
.guidance-cards__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-md);
}
.guidance-cards__card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  min-height: 200px;
  padding: var(--space-lg);
  border-radius: var(--radius-card);
  border-top: 4px solid var(--color-brand-navy-deep);
  background: linear-gradient(180deg, #16324f 0%, #0d2136 100%);
  color: #fff;
  text-decoration: none;
  box-shadow: var(--shadow-md);
  transition: transform 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out);
}
.guidance-cards__card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-xl);
}
.guidance-cards__label {
  margin: 0;
  font-family: var(--font-hero);
  font-size: 21px;
  font-weight: var(--fw-medium);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.guidance-cards__text {
  margin: 0;
  color: rgba(255, 255, 255, 0.78);
  font-size: 15px;
  line-height: 1.6;
}
.guidance-cards__arrow {
  margin-top: auto;
  color: var(--color-brand-gold);
  font-size: 20px;
}

.steps-band {
  padding: var(--section-padding-y) 0;
  background: var(--color-surface);
}
.steps-band__inner {
  width: min(100%, 880px);
  margin: 0 auto;
  padding: 0 var(--section-padding-x);
}
.steps-band__title {
  margin: 0 0 var(--space-xl);
  text-align: center;
  font-family: var(--font-hero);
  font-size: var(--fs-h2);
  font-weight: var(--fw-medium);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-brand-navy-deep);
  text-wrap: balance;
}
.steps-band__list {
  counter-reset: step;
  display: grid;
  gap: var(--space-md);
  margin: 0;
  padding: 0;
  list-style: none;
}
.steps-band__list li {
  position: relative;
  counter-increment: step;
  padding: var(--space-lg) var(--space-lg) var(--space-lg) 84px;
  background: #fff;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-sm);
  font-size: var(--fs-body-large);
  line-height: 1.7;
}
.steps-band__list li::before {
  content: counter(step);
  position: absolute;
  top: 50%;
  left: var(--space-lg);
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-brand-gold);
  color: var(--color-brand-navy-deep);
  font-family: var(--font-hero);
  font-size: 22px;
  font-weight: 600;
}

/* ---------- FAQ (details/summary accordion) ---------- */
.faq-section {
  padding: var(--section-padding-y) 0;
  background: var(--color-surface);
}
.faq-section__inner {
  width: min(100%, 820px);
  margin: 0 auto;
  padding: 0 var(--section-padding-x);
}
.faq-section__title {
  margin: 0 0 var(--space-xl);
  text-align: center;
  font-family: var(--font-hero);
  font-size: var(--fs-h2);
  font-weight: var(--fw-medium);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-brand-navy-deep);
  text-wrap: balance;
}
.accordion__item {
  border-bottom: 1px solid var(--color-border-light);
  background: transparent;
}
.accordion__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-md) 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-secondary);
  font-size: 17px;
  font-weight: 700;
  color: var(--color-brand-navy-deep);
}
.accordion__summary::-webkit-details-marker {
  display: none;
}
.accordion__icon {
  position: relative;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
}
.accordion__icon::before,
.accordion__icon::after {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  background: var(--color-brand-navy-deep);
  transition: transform 0.25s ease;
}
.accordion__icon::before {
  width: 18px;
  height: 2.5px;
}
.accordion__icon::after {
  width: 2.5px;
  height: 18px;
}
details[open] .accordion__icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
}
.accordion__content {
  padding: 0 0 var(--space-lg);
  max-width: 92%;
}
.accordion__content p {
  margin: 0;
  font-size: var(--fs-body-large);
  line-height: 1.75;
}

/* ---------- reviews extras ---------- */
.reviews-home__link {
  color: var(--color-brand-gold);
  font-family: var(--font-secondary);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
}
.reviews-home__link:hover {
  text-decoration: underline;
}

/* ---------- office / locations ---------- */
.office-card {
  padding: var(--section-padding-y) 0 0;
}
.office-card__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xl);
  width: min(100%, 1140px);
  margin: 0 auto;
  padding: 0 var(--section-padding-x);
  align-items: stretch;
}
.office-card__details {
  padding: var(--space-xl);
  background: #fff;
  border-radius: var(--radius-card);
  border-top: 4px solid var(--color-brand-gold);
  box-shadow: var(--shadow-md);
}
.office-card__details h2 {
  margin-top: 0;
}
.office-card__address {
  font-size: var(--fs-body-large);
}
.office-card__map {
  min-height: 340px;
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
.office-card__map iframe {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 340px;
  border: 0;
}
@media (max-width: 900px) {
  .office-card__inner {
    grid-template-columns: 1fr;
  }
}

/* ---------- contact page ---------- */
.contact-layout {
  padding: var(--section-padding-y) 0 0;
}
.contact-layout__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: var(--space-xl);
  width: min(100%, 1140px);
  margin: 0 auto;
  padding: 0 var(--section-padding-x);
  align-items: start;
}
.contact-layout__info h2 {
  margin-top: 0;
}
.contact-office {
  margin-top: var(--space-lg);
  padding: var(--space-md) var(--space-lg);
  background: #fff;
  border-left: 4px solid var(--color-brand-gold);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  box-shadow: var(--shadow-sm);
}
.contact-office h3 {
  margin: 0 0 4px;
  font-family: var(--font-hero);
  font-size: 19px;
  font-weight: var(--fw-medium);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-brand-navy-deep);
}
.contact-office p {
  margin: 0 0 4px;
  font-size: 15px;
}
@media (max-width: 900px) {
  .contact-layout__inner {
    grid-template-columns: 1fr;
  }
}

/* ---------- consult form ---------- */
.consult-form {
  display: grid;
  gap: var(--space-md);
  padding: var(--space-xl);
  background: #fff;
  border-radius: var(--radius-card);
  border-top: 4px solid var(--color-brand-gold);
  box-shadow: var(--shadow-lg);
  color: var(--color-text-primary);
}
.consult-form__title {
  margin: 0;
  font-family: var(--font-hero);
  font-size: var(--fs-h5);
  font-weight: var(--fw-medium);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-brand-navy-deep);
}
.consult-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
}
.consult-form__field {
  display: grid;
  gap: 6px;
  font-family: var(--font-secondary);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--color-brand-navy-deep);
}
.consult-form__field em {
  color: #b32d2e;
  font-style: normal;
}
.consult-form__field input,
.consult-form__field textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid var(--color-border-light);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  font: inherit;
  font-weight: 400;
  color: var(--color-text-primary);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.consult-form__field input:focus,
.consult-form__field textarea:focus {
  outline: none;
  border-color: var(--color-brand-navy-soft);
  box-shadow: 0 0 0 3px rgba(63, 95, 133, 0.18);
}
.consult-form__hp {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}
.consult-form__submit {
  width: 100%;
  border: 0;
  font-size: 15px;
}
.consult-form__note {
  margin: 0;
  text-align: center;
  font-size: 12.5px;
  color: var(--color-text-secondary);
}
.consult-form__status {
  margin: 0;
  font-weight: 700;
  text-align: center;
}
.consult-form__status.is-error {
  color: #b32d2e;
}
.consult-form__status.is-success {
  color: #2e7d32;
}
@media (max-width: 560px) {
  .consult-form__row {
    grid-template-columns: 1fr;
  }
}

/* ---------- blog ---------- */
.blog-index {
  padding: var(--section-padding-y) 0;
}
.blog-index__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--space-lg);
  width: min(100%, 1140px);
  margin: 0 auto;
  padding: 0 var(--section-padding-x);
}
.blog-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-xl);
  background: #fff;
  border-radius: var(--radius-card);
  border-top: 4px solid var(--color-brand-navy-deep);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  color: var(--color-text-primary);
  transition: transform 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out);
}
.blog-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}
.blog-card__date {
  font-family: var(--font-secondary);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-brand-navy-soft);
}
.blog-card__title {
  margin: 0;
  font-family: var(--font-hero);
  font-size: 22px;
  font-weight: var(--fw-medium);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  line-height: 1.25;
  color: var(--color-brand-navy-deep);
}
.blog-card__excerpt {
  margin: 0;
  font-size: 15px;
  line-height: 1.65;
  color: var(--color-text-secondary);
}
.blog-card__more {
  margin-top: auto;
  font-family: var(--font-secondary);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-brand-gold);
}

/* post header */
.post-header {
  background:
    radial-gradient(120% 90% at 85% 0%, rgba(63, 95, 133, 0.55) 0%, rgba(15, 42, 68, 0) 55%),
    linear-gradient(160deg, #142c47 0%, var(--color-brand-navy-deep) 55%, #0a1e33 100%);
  color: #fff;
  padding: calc(96px + var(--space-2xl)) 0 var(--space-2xl);
  margin-bottom: var(--space-xl);
}
.post-header__inner {
  width: min(100%, 820px);
  margin: 0 auto;
  padding: 0 var(--section-padding-x);
  text-align: center;
}
.post-header__title {
  margin: 0;
  font-family: var(--font-hero);
  font-size: var(--fs-h2);
  font-weight: var(--fw-medium);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  line-height: 1.15;
  text-wrap: balance;
}
.post-header__meta {
  margin: var(--space-md) 0 0;
  color: rgba(255, 255, 255, 0.75);
  font-family: var(--font-secondary);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.content-page--post {
  padding-top: 0;
}

/* ---------- footer additions ---------- */
.footer__phone-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: var(--space-lg);
  color: var(--color-brand-gold);
  font-family: var(--font-hero);
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-decoration: none;
}
.footer__phone-link svg {
  width: 26px;
  height: 26px;
}
.footer__phone-link:hover {
  color: var(--color-brand-primary-hover);
}
.footer__hours {
  margin: var(--space-sm) 0 0;
  color: rgba(255, 255, 255, 0.7);
  font-family: var(--font-secondary);
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.footer__rating {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: var(--space-md);
  color: rgba(255, 255, 255, 0.85);
  font-size: 14px;
}
.footer__stars {
  display: inline-flex;
  gap: 2px;
  color: var(--color-brand-gold);
}
.footer__stars svg {
  width: 16px;
  height: 16px;
}
.footer__contact-link--strong {
  font-weight: 800;
  color: var(--color-brand-gold) !important;
}
.footer__legal {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding: var(--space-lg) var(--section-padding-x);
  text-align: center;
  color: rgba(255, 255, 255, 0.6);
  font-size: 13px;
}
.footer__disclaimer {
  max-width: 880px;
  margin: var(--space-sm) auto 0;
  font-size: 12px;
  line-height: 1.6;
}

/* ---------- sticky mobile call bar ---------- */
.sticky-call {
  position: fixed;
  z-index: 900;
  right: 0;
  bottom: 0;
  left: 0;
  display: none;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
  background: rgba(11, 20, 32, 0.92);
  backdrop-filter: blur(8px);
  border-top: 1px solid rgba(255, 199, 86, 0.35);
}
.sticky-call__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  border-radius: 999px;
  background: var(--color-brand-gold);
  color: var(--color-brand-navy-deep);
  font-family: var(--font-secondary);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
}
.sticky-call__btn svg {
  width: 20px;
  height: 20px;
}
@media (max-width: 767px) {
  .sticky-call {
    display: block;
  }
  body {
    padding-bottom: 84px;
  }
}

/* ---------- reveal animations (JS adds .is-visible) ---------- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ---------- mobile nav ---------- */
.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 1500;
  display: none;
  background: rgba(8, 16, 27, 0.55);
  backdrop-filter: blur(3px);
}
.mobile-nav.is-open {
  display: block;
}
html.menu-open {
  overflow: hidden;
}
.mobile-nav__panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(86vw, 380px);
  overflow-y: auto;
  padding: 96px var(--space-lg) var(--space-2xl);
  background: var(--color-brand-navy-deep);
  box-shadow: var(--shadow-xl);
}
.mobile-nav__list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.mobile-nav__list > li {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.mobile-nav__list a,
.mobile-nav__group > button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 14px 4px;
  background: none;
  border: 0;
  color: #fff;
  font-family: var(--font-secondary);
  font-size: 16px;
  font-weight: 600;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.mobile-nav__group > button span {
  color: var(--color-brand-gold);
  font-size: 20px;
}
.mobile-nav__group ul {
  margin: 0 0 10px;
  padding: 0 0 0 14px;
  list-style: none;
}
.mobile-nav__group ul a {
  padding: 10px 4px;
  font-weight: 400;
  font-size: 15px;
  color: rgba(255, 255, 255, 0.85);
}
.mobile-nav__cta {
  width: 100%;
  margin-top: var(--space-lg);
}

/* ---------- about band: split layout with portrait ---------- */
.about-band__inner--split {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: var(--space-2xl);
  align-items: center;
  width: min(100%, 1140px);
  text-align: left;
}
.about-band__inner--split .about-band__actions {
  justify-content: flex-start;
}
.about-band__portrait {
  margin: 0;
}
.about-band__portrait img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-card);
  border-top: 5px solid var(--color-brand-gold);
  box-shadow: var(--shadow-xl);
}
.about-band__signature {
  display: block;
  width: 220px;
  height: auto;
  margin: var(--space-md) 0 0;
  filter: invert(1) brightness(1.6);
  opacity: 0.9;
}
.about-band__badge {
  display: block;
  width: 280px;
  max-width: 100%;
  height: auto;
  margin-top: var(--space-xl);
  border-radius: var(--radius-sm);
}
@media (max-width: 900px) {
  .about-band__inner--split {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .about-band__inner--split .about-band__actions {
    justify-content: center;
  }
  .about-band__portrait {
    max-width: 340px;
    margin: 0 auto;
  }
  .about-band__signature,
  .about-band__badge {
    margin-left: auto;
    margin-right: auto;
  }
}

/* footer brand mark: real horizontal logo */
.site-footer .footer__brand-mark--wide {
  width: auto;
  height: auto;
  padding: 18px 22px;
  border-radius: var(--radius-card);
}
.site-footer .footer__brand-mark--wide img {
  width: 160px;
  height: auto;
}

/* ---------- hero framing ----------
   The source clip frames the attorney tight: the top of his head sits ~7% down
   a 16:9 frame, so on a wide hero `object-position` alone can only move him
   ~18px. Instead: anchor the zoom to the top of the frame (so enlarging pushes
   him DOWN rather than out from centre) and fade the video into the brand navy
   under the header, which seats his face below a deliberate dark band. */
.hero-home {
  background: linear-gradient(180deg, #0a1930 0%, #14324f 55%, #0f2a44 100%);
}
.hero-home__video,
.hero-home__image {
  object-position: 50% 0%;
  transform: scale(var(--hero-zoom, 1.26));
  transform-origin: top center;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, rgba(0, 0, 0, 0.55) 6%, #000 15%);
  mask-image: linear-gradient(to bottom, transparent 0, rgba(0, 0, 0, 0.55) 6%, #000 15%);
}
@media (max-width: 900px) {
  .hero-home__video,
  .hero-home__image {
    --hero-zoom: 1.15;
  }
}
/* Seat the headline in the lower third (per the Figma hero) so the text sits
   over the torso, not the face. */
.hero-home__inner {
  padding-top: clamp(17rem, 47svh, 28rem);
  padding-bottom: clamp(8rem, 16svh, 13rem);
}
@media (max-width: 768px) {
  .hero-home__inner {
    padding-top: clamp(13rem, 38svh, 18rem);
    padding-bottom: 7.5rem;
  }
}
.hero-home__proof-stars {
  color: var(--color-brand-gold);
  letter-spacing: 0.12em;
  margin-right: 2px;
}

/* ---------- about band: split layout with portrait ---------- */
.about-band__inner--split {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: var(--space-2xl);
  align-items: center;
  width: min(100%, 1140px);
  text-align: left;
}
.about-band__inner--split .about-band__actions {
  justify-content: flex-start;
}
.about-band__portrait {
  margin: 0;
}
.about-band__portrait img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-card);
  border-top: 5px solid var(--color-brand-gold);
  box-shadow: var(--shadow-xl);
}
.about-band__signature {
  display: block;
  width: 220px;
  height: auto;
  margin: var(--space-md) 0 0;
  filter: invert(1) brightness(1.6);
  opacity: 0.9;
}
.about-band__badge {
  display: block;
  width: 280px;
  max-width: 100%;
  height: auto;
  margin-top: var(--space-xl);
  border-radius: var(--radius-sm);
}
@media (max-width: 900px) {
  .about-band__inner--split {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .about-band__inner--split .about-band__actions {
    justify-content: center;
  }
  .about-band__portrait {
    max-width: 340px;
    margin: 0 auto;
  }
  .about-band__signature,
  .about-band__badge {
    margin-left: auto;
    margin-right: auto;
  }
}

/* footer brand mark: real horizontal logo */
.site-footer .footer__brand-mark--wide {
  width: auto;
  height: auto;
  padding: 18px 22px;
  border-radius: var(--radius-card);
}
.site-footer .footer__brand-mark--wide img {
  width: 160px;
  height: auto;
}

/* ---------- hero framing fixes ---------- */
/* Keep the attorney's head in frame: bias the crop toward the top of the
   source video instead of dead center. */
.hero-home__video,
.hero-home__image {
  object-position: 50% 14%;
}
/* Seat the headline in the lower third (per the Figma hero) so the text sits
   over the torso, not the face. */
.hero-home__inner {
  padding-top: clamp(17rem, 47svh, 28rem);
  padding-bottom: clamp(8rem, 16svh, 13rem);
}
@media (max-width: 768px) {
  .hero-home__inner {
    padding-top: clamp(13rem, 38svh, 18rem);
    padding-bottom: 7.5rem;
  }
}
.hero-home__proof-stars {
  color: var(--color-brand-gold);
  letter-spacing: 0.12em;
  margin-right: 2px;
}

/* ---------- review profile links ---------- */
.reviews-home__sources {
  margin: var(--space-xl) 0 0;
  text-align: center;
  color: rgba(255, 255, 255, 0.65);
  font-family: var(--font-secondary);
  font-size: 13px;
  letter-spacing: 0.04em;
}
.reviews-home__sources a {
  color: var(--color-brand-gold);
  text-decoration: none;
  margin: 0 6px;
  white-space: nowrap;
}
.reviews-home__sources a:hover {
  text-decoration: underline;
}
.reviews-home__author {
  font-style: normal;
  font-family: var(--font-secondary);
  font-weight: 700;
  font-size: 14px;
  color: #fff;
}
.site-footer .footer__profiles {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin-top: var(--space-md);
}
.site-footer .footer__profiles a {
  color: rgba(255, 255, 255, 0.72);
  font-family: var(--font-secondary);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-decoration: none;
}
.site-footer .footer__profiles a:hover {
  color: var(--color-brand-gold);
}

/* ---------- testimonial cards ---------- */
.reviews-home__card {
  min-height: 15rem;
}
.reviews-home__quote {
  font-size: 15.5px;
  line-height: 1.7;
}
.reviews-home__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
}
.reviews-home__meta .reviews-home__author {
  margin-right: auto;
}
@media (max-width: 900px) {
  .reviews-home__track {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
  }
}
@media (max-width: 600px) {
  .reviews-home__track {
    grid-template-columns: 1fr;
  }
}

/* ---------- header: symmetric balance ----------
   The theme's bar is a plain flex row: the nav sat wherever the logo left off,
   long labels wrapped onto two lines, and the text logotype was hidden below
   992px (the theme expects an image there), leaving mobile with no brand at
   all. Fixes: use the real white lockup as the mark, give the bar three
   columns so the nav is centred, and only show the nav where it genuinely
   fits — below 1200px the hamburger takes over instead of cramming. */
.site-header__logo-img {
  width: auto;
  height: 46px;
  object-fit: contain;
}
@media (max-width: 575px) {
  .site-header__logo-img {
    height: 38px;
  }
}

/* Nav is desktop-only from 1200px up; the theme's 992px breakpoint let six
   items collide with the logo and phone number between 992 and 1199. */
@media (max-width: 1199px) {
  .site-header__nav {
    display: none;
  }
  .site-header__menu-button {
    display: inline-flex;
  }
}
@media (min-width: 1200px) {
  .site-header__menu-button {
    display: none;
  }
  .site-header__inner {
    position: relative;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 18px;
  }
  .site-header__nav {
    display: block;
    justify-self: center;
  }
  .site-header__actions {
    justify-self: end;
  }
}
/* Single-line nav labels: no more "PRACTICE / AREAS" stacking. */
.site-header__nav-link,
.site-header__cta {
  white-space: nowrap;
}
.site-header__nav-link {
  padding: 11px 11px;
  letter-spacing: 0.04em;
}
.site-header__nav-list {
  gap: 2px;
}
@media (max-width: 1400px) and (min-width: 1200px) {
  .site-header__nav-link {
    padding: 11px 8px;
    font-size: 12px;
  }
}

/* ---------- hero framing ----------
   The source clip frames the attorney tight: the top of his head sits ~7% down
   a 16:9 frame, so on a wide hero `object-position` alone can only move him
   ~18px. Instead: anchor the zoom to the top of the frame (so enlarging pushes
   him DOWN rather than out from centre) and fade the video into the brand navy
   under the header, which seats his face below a deliberate dark band. */
.hero-home {
  background: linear-gradient(180deg, #0a1930 0%, #14324f 55%, #0f2a44 100%);
}
.hero-home__video,
.hero-home__image {
  object-position: 50% 0%;
  transform: scale(var(--hero-zoom, 1.26));
  transform-origin: top center;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, rgba(0, 0, 0, 0.55) 6%, #000 15%);
  mask-image: linear-gradient(to bottom, transparent 0, rgba(0, 0, 0, 0.55) 6%, #000 15%);
}
@media (max-width: 900px) {
  .hero-home__video,
  .hero-home__image {
    --hero-zoom: 1.15;
  }
}
/* Seat the headline in the lower third (per the Figma hero) so the text sits
   over the torso, not the face. */
.hero-home__inner {
  padding-top: clamp(17rem, 47svh, 28rem);
  padding-bottom: clamp(8rem, 16svh, 13rem);
}
@media (max-width: 768px) {
  .hero-home__inner {
    padding-top: clamp(13rem, 38svh, 18rem);
    padding-bottom: 7.5rem;
  }
}
.hero-home__proof-stars {
  color: var(--color-brand-gold);
  letter-spacing: 0.12em;
  margin-right: 2px;
}

/* ---------- about band: split layout with portrait ---------- */
.about-band__inner--split {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: var(--space-2xl);
  align-items: center;
  width: min(100%, 1140px);
  text-align: left;
}
.about-band__inner--split .about-band__actions {
  justify-content: flex-start;
}
.about-band__portrait {
  margin: 0;
}
.about-band__portrait img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-card);
  border-top: 5px solid var(--color-brand-gold);
  box-shadow: var(--shadow-xl);
}
.about-band__signature {
  display: block;
  width: 220px;
  height: auto;
  margin: var(--space-md) 0 0;
  filter: invert(1) brightness(1.6);
  opacity: 0.9;
}
.about-band__badge {
  display: block;
  width: 280px;
  max-width: 100%;
  height: auto;
  margin-top: var(--space-xl);
  border-radius: var(--radius-sm);
}
@media (max-width: 900px) {
  .about-band__inner--split {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .about-band__inner--split .about-band__actions {
    justify-content: center;
  }
  .about-band__portrait {
    max-width: 340px;
    margin: 0 auto;
  }
  .about-band__signature,
  .about-band__badge {
    margin-left: auto;
    margin-right: auto;
  }
}

/* footer brand mark: real horizontal logo */
.site-footer .footer__brand-mark--wide {
  width: auto;
  height: auto;
  padding: 18px 22px;
  border-radius: var(--radius-card);
}
.site-footer .footer__brand-mark--wide img {
  width: 160px;
  height: auto;
}

/* ---------- hero framing fixes ---------- */
/* Keep the attorney's head in frame: bias the crop toward the top of the
   source video instead of dead center. */
.hero-home__video,
.hero-home__image {
  object-position: 50% 14%;
}
/* Seat the headline in the lower third (per the Figma hero) so the text sits
   over the torso, not the face. */
.hero-home__inner {
  padding-top: clamp(17rem, 47svh, 28rem);
  padding-bottom: clamp(8rem, 16svh, 13rem);
}
@media (max-width: 768px) {
  .hero-home__inner {
    padding-top: clamp(13rem, 38svh, 18rem);
    padding-bottom: 7.5rem;
  }
}
.hero-home__proof-stars {
  color: var(--color-brand-gold);
  letter-spacing: 0.12em;
  margin-right: 2px;
}

/* ---------- review profile links ---------- */
.reviews-home__sources {
  margin: var(--space-xl) 0 0;
  text-align: center;
  color: rgba(255, 255, 255, 0.65);
  font-family: var(--font-secondary);
  font-size: 13px;
  letter-spacing: 0.04em;
}
.reviews-home__sources a {
  color: var(--color-brand-gold);
  text-decoration: none;
  margin: 0 6px;
  white-space: nowrap;
}
.reviews-home__sources a:hover {
  text-decoration: underline;
}
.reviews-home__author {
  font-style: normal;
  font-family: var(--font-secondary);
  font-weight: 700;
  font-size: 14px;
  color: #fff;
}
.site-footer .footer__profiles {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin-top: var(--space-md);
}
.site-footer .footer__profiles a {
  color: rgba(255, 255, 255, 0.72);
  font-family: var(--font-secondary);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-decoration: none;
}
.site-footer .footer__profiles a:hover {
  color: var(--color-brand-gold);
}

/* ---------- testimonial cards ---------- */
.reviews-home__card {
  min-height: 15rem;
}
.reviews-home__quote {
  font-size: 15.5px;
  line-height: 1.7;
}
.reviews-home__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
}
.reviews-home__meta .reviews-home__author {
  margin-right: auto;
}
@media (max-width: 900px) {
  .reviews-home__track {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
  }
}
@media (max-width: 600px) {
  .reviews-home__track {
    grid-template-columns: 1fr;
  }
}

/* ---------- header: symmetric three-column balance ----------
   The theme lays the bar out as a plain flex row, so the nav sits wherever
   the logo leaves off and long labels wrap onto two lines. Above the 992px
   nav breakpoint, switch to logo | nav | actions with equal outer columns so
   the nav is optically centred and both ends carry the same weight. The outer
   tracks use the default `1fr` (auto minimum) so they never shrink below
   their content and collide with the nav. */
@media (min-width: 992px) {
  .site-header__inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 18px;
  }
  .site-header__nav {
    justify-self: center;
  }
  .site-header__actions {
    justify-self: end;
  }
}
/* Single-line nav labels: no more "PRACTICE / AREAS" stacking, and never
   break the firm name across two lines. */
.site-header__nav-link,
.site-header__cta,
.site-header__logo-title {
  white-space: nowrap;
}
.site-header__nav-link {
  padding: 11px 12px;
  letter-spacing: 0.04em;
}
.site-header__nav-list {
  gap: 2px;
}
/* Keep the logo block compact so the three columns stay balanced: the kicker
   wraps to two tight lines instead of running 38 characters wide. */
.site-header__logo-copy {
  max-width: 15rem;
}
.site-header__logo-kicker {
  font-size: 9.5px;
  letter-spacing: 0.14em;
  line-height: 1.35;
}
/* Between the nav breakpoint and ~1200px the kicker is the widest thing in the
   logo block and wraps to three or four lines, throwing the bar off balance.
   Drop it there and let the firm name carry the mark — the tagline still
   appears in the hero and the footer. */
@media (max-width: 1200px) and (min-width: 992px) {
  .site-header__logo-kicker {
    display: none;
  }
}
/* Tighter tracking between 992–1280px so six single-line items still fit. */
@media (max-width: 1280px) and (min-width: 992px) {
  .site-header__nav-link {
    padding: 11px 8px;
    font-size: 12px;
  }
  .site-header__inner {
    gap: 10px;
  }
  .site-header__logo-copy {
    max-width: 13rem;
  }
  .site-header__logo-title {
    font-size: 18px;
  }
}

/* Chamber membership badge links to the member profile. */
.about-band__badge-link {
  display: inline-block;
  margin-top: var(--space-xl);
  border-radius: var(--radius-sm);
  transition: transform 0.2s var(--ease-out), opacity 0.2s var(--ease-out);
}
.about-band__badge-link:hover {
  transform: translateY(-2px);
  opacity: 0.92;
}
.about-band__badge-link .about-band__badge {
  margin-top: 0;
}

/* ============================================================
   Contact Form 7
   CF7 renders its own markup, so map its classes onto the
   consultation-form design rather than restyling per form.
   ============================================================ */
.consult-form-wrap {
  display: block;
}
.wpcf7 form.consult-form,
.consult-form--fallback {
  display: grid;
  gap: var(--space-md);
  padding: var(--space-xl);
  background: #fff;
  border-radius: var(--radius-card);
  border-top: 4px solid var(--color-brand-gold);
  box-shadow: var(--shadow-lg);
  color: var(--color-text-primary);
}
/* The title and note sit outside the CF7 form element. */
.consult-form-wrap > .consult-form__title {
  margin: 0 0 calc(var(--space-md) * -1);
  padding: var(--space-xl) var(--space-xl) 0;
  background: #fff;
  border-radius: var(--radius-card) var(--radius-card) 0 0;
  border-top: 4px solid var(--color-brand-gold);
  font-family: var(--font-hero);
  font-size: var(--fs-h5);
  font-weight: var(--fw-medium);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-brand-navy-deep);
}
.consult-form-wrap > .consult-form__title + .wpcf7 form.consult-form {
  border-top: 0;
  border-radius: 0 0 var(--radius-card) var(--radius-card);
  box-shadow: none;
}
.consult-form-wrap > .consult-form__note {
  margin: 0;
  padding: 0 var(--space-xl) var(--space-xl);
  background: #fff;
  border-radius: 0 0 var(--radius-card) var(--radius-card);
  box-shadow: var(--shadow-lg);
  text-align: center;
  font-size: 12.5px;
  color: var(--color-text-secondary);
}
/* Field rows: wrap two fields in <div class="consult-form__row"> in the CF7
   form template to get the side-by-side name/phone layout. */
.wpcf7 .consult-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
}
@media (max-width: 560px) {
  .wpcf7 .consult-form__row {
    grid-template-columns: 1fr;
  }
}
.wpcf7 .consult-form__field {
  display: grid;
  gap: 6px;
  font-family: var(--font-secondary);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--color-brand-navy-deep);
}
.wpcf7 .wpcf7-form-control-wrap {
  display: block;
}
.wpcf7 input[type="text"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="email"],
.wpcf7 textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid var(--color-border-light);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  font: inherit;
  font-weight: 400;
  color: var(--color-text-primary);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.wpcf7 input:focus,
.wpcf7 textarea:focus {
  outline: none;
  border-color: var(--color-brand-navy-soft);
  box-shadow: 0 0 0 3px rgba(63, 95, 133, 0.18);
}
.wpcf7 input[type="submit"] {
  width: 100%;
  border: 0;
  padding: 1rem 2rem;
  border-radius: var(--radius-md);
  background: var(--color-brand-gold);
  color: var(--color-brand-navy-deep);
  font-family: var(--font-secondary);
  font-size: 15px;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all var(--duration-normal) var(--ease-out);
}
.wpcf7 input[type="submit"]:hover {
  background: var(--color-brand-primary-hover);
  transform: translateY(-1px);
  box-shadow: 0 14px 26px rgba(255, 199, 86, 0.25);
}
/* Validation and response messages, restyled from CF7's defaults. */
.wpcf7 .wpcf7-not-valid-tip {
  margin-top: 4px;
  font-size: 12.5px;
  font-weight: 600;
  color: #b32d2e;
}
.wpcf7 input.wpcf7-not-valid,
.wpcf7 textarea.wpcf7-not-valid {
  border-color: #b32d2e;
}
.wpcf7 .wpcf7-response-output {
  margin: var(--space-sm) 0 0;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  border-width: 1.5px;
  font-size: 14px;
}
.wpcf7 form.sent .wpcf7-response-output {
  border-color: #2e7d32;
  color: #2e7d32;
}
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output {
  border-color: #b32d2e;
  color: #b32d2e;
}
.wpcf7-spinner {
  margin: 0 auto;
}
/* Honeypot / hidden fields must never take up layout space. */
.wpcf7 .consult-form__hp {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

/* WordPress core content classes that appear inside the_content(). */
.prose .alignleft { float: left; margin: 0 var(--space-lg) var(--space-md) 0; }
.prose .alignright { float: right; margin: 0 0 var(--space-md) var(--space-lg); }
.prose .aligncenter { display: block; margin-left: auto; margin-right: auto; }
.prose .wp-caption { max-width: 100%; }
.prose .wp-caption-text {
  margin-top: 8px;
  font-size: 14px;
  color: var(--color-text-secondary);
  text-align: center;
}
.prose .screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}
.page-links {
  margin-top: var(--space-lg);
  font-family: var(--font-secondary);
  font-weight: 700;
}
.pagination {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: var(--space-2xl);
}
.pagination .page-numbers {
  padding: 10px 16px;
  border-radius: var(--radius-md);
  background: #fff;
  color: var(--color-brand-navy-deep);
  text-decoration: none;
  font-family: var(--font-secondary);
  font-weight: 700;
  box-shadow: var(--shadow-sm);
}
.pagination .page-numbers.current {
  background: var(--color-brand-navy-deep);
  color: #fff;
}


/* Post lead image and blog card thumbnails.
   Both are optional: jod_post_lead_image() returns an empty string when a post
   has no image, and the markup is skipped entirely rather than left as an
   empty frame. */
.post-lead {
  max-width: 820px;
  margin: calc(var(--space-xl) * -1) auto var(--space-xl);
  padding: 0 var(--section-padding-x);
}
.post-lead img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 14px;
  box-shadow: 0 18px 40px rgb(15 42 68 / 18%);
}
.blog-card__image {
  display: block;
  width: 100%;
  height: 190px;
  object-fit: cover;
  border-radius: 10px;
  margin-bottom: var(--space-sm);
}


/* Brand banner at the top of an office page. Wide 16:9 source, so it is capped
   to the content width rather than run full-bleed — full-bleed would crop the
   attorney out of frame on a narrow viewport. */
.office-banner {
  max-width: 1100px;
  margin: 0 auto var(--space-lg);
  padding: 0 var(--section-padding-x);
}
.office-banner img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 14px;
  box-shadow: 0 18px 40px rgb(15 42 68 / 16%);
}
.office-banner__caption {
  margin-top: var(--space-sm);
  font-size: 0.9rem;
  color: var(--color-text-secondary);
  text-align: center;
}


/* FAQ accordions that come from page content rather than a template. They use
   the same .accordion markup, so they only need the surrounding spacing the
   template version gets from .faq-section. */
.prose .accordion.jod-faq-list {
  margin: var(--space-lg) 0 var(--space-xl);
}
.prose .accordion.jod-faq-list .accordion__content p:last-child {
  margin-bottom: 0;
}


/* ============================================================================
   Google Ads landing pages (page-templates/template-landing.php)

   Scoped under .jod-landing so none of it can reach the rest of the site.
   ========================================================================= */

.button-outline-light {
  background: transparent;
  color: #fff;
  border: 1.5px solid rgb(255 255 255 / 65%);
  transition: all var(--duration-normal) var(--ease-out);
}
.button-outline-light:hover {
  background: #fff;
  color: var(--color-brand-navy-deep);
  border-color: #fff;
}

/* ---------- header ---------- */
.lp-header {
  background: var(--color-brand-navy-deep);
  padding: var(--space-md) var(--section-padding-x);
}
.lp-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  max-width: 1180px;
  margin: 0 auto;
}
.lp-header__logo img {
  display: block;
  width: auto;
  height: 44px;
}
.lp-header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}
.lp-header__hours {
  color: rgb(255 255 255 / 78%);
  font-size: 0.9rem;
}

/* ---------- hero ---------- */
.lp-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(32px, 6vw, 72px) var(--section-padding-x) clamp(40px, 7vw, 88px);
  background:
    radial-gradient(120% 90% at 80% 0%, rgba(63, 95, 133, 0.5) 0%, rgba(15, 42, 68, 0) 55%),
    linear-gradient(160deg, #142c47 0%, var(--color-brand-navy-deep) 55%, #0a1e33 100%);
  color: #fff;
}
.lp-hero__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.16;
}
.lp-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  align-items: start;
  gap: clamp(24px, 4vw, 56px);
  max-width: 1180px;
  margin: 0 auto;
}
/* Two columns on desktop: copy stacked on the left, form on the right. The
   copy is split into lede and support so that mobile can slot the form between
   them — see the media query, where this wrapper becomes display: contents and
   its children join the outer grid directly. */
.lp-hero__copy {
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 3vw, 36px);
}
.lp-hero__kicker {
  margin: 0 0 var(--space-xs);
  color: var(--color-brand-primary);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.lp-hero__title {
  margin: 0 0 var(--space-sm);
  font-size: clamp(1.9rem, 4.4vw, 3.05rem);
  line-height: 1.1;
}
.lp-hero__subhead {
  margin: 0 0 var(--space-lg);
  max-width: 34em;
  color: rgb(255 255 255 / 86%);
  font-size: clamp(1rem, 1.7vw, 1.14rem);
  line-height: 1.55;
}
.lp-hero__points {
  margin: 0 0 var(--space-md);
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--space-xs);
}
.lp-hero__points li {
  position: relative;
  padding-left: 30px;
  color: rgb(255 255 255 / 92%);
  line-height: 1.45;
}
.lp-hero__points li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 0.45em;
  width: 11px;
  height: 6px;
  border-left: 2.5px solid var(--color-brand-primary);
  border-bottom: 2.5px solid var(--color-brand-primary);
  transform: rotate(-45deg);
}
.lp-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}
.lp-hero__proof {
  margin: 0;
  color: rgb(255 255 255 / 82%);
  font-size: 0.94rem;
}
.lp-hero__stars {
  color: var(--color-brand-primary);
  letter-spacing: 0.08em;
}

/* ---------- form card ---------- */
.lp-formcard {
  padding: clamp(20px, 2.5vw, 30px);
  border-radius: var(--radius-card);
  background: #fff;
  color: var(--color-text-primary);
  box-shadow: 0 24px 60px rgb(4 20 36 / 34%);
}
.lp-formcard__title {
  margin: 0 0 var(--space-2xs);
  font-size: 1.4rem;
}
.lp-formcard__sub {
  margin: 0 0 var(--space-md);
  color: var(--color-text-secondary);
  font-size: 0.94rem;
  line-height: 1.5;
}
.lp-formcard .wpcf7 form.consult-form,
.lp-formcard .consult-form--fallback {
  padding: 0;
  background: none;
  border-top: 0;
  border-radius: 0;
  box-shadow: none;
}
.lp-formcard__note {
  margin: var(--space-sm) 0 0;
  color: var(--color-text-secondary);
  font-size: 0.78rem;
  line-height: 1.45;
}

/* ---------- body copy ---------- */
.lp-content {
  padding: clamp(36px, 5vw, 64px) var(--section-padding-x);
}
.lp-content__inner {
  max-width: 780px;
  margin: 0 auto;
}

/* ---------- closing CTA ---------- */
.lp-close {
  padding: clamp(40px, 6vw, 72px) var(--section-padding-x);
  background: var(--color-brand-navy-deep);
  color: #fff;
  text-align: center;
}
.lp-close__inner {
  max-width: 720px;
  margin: 0 auto;
}
.lp-close__title {
  margin: 0 0 var(--space-sm);
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  line-height: 1.2;
}
.lp-close__text {
  margin: 0 0 var(--space-lg);
  color: rgb(255 255 255 / 86%);
  line-height: 1.6;
}
.lp-close__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-sm);
}

/* ---------- footer ---------- */
.lp-footer {
  padding: var(--space-xl) var(--section-padding-x);
  background: #0a1e33;
  color: rgb(255 255 255 / 72%);
  font-size: 0.86rem;
}
.lp-footer__inner {
  max-width: 860px;
  margin: 0 auto;
  text-align: center;
}
.lp-footer__brand {
  margin: 0 0 var(--space-2xs);
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
}
.lp-footer__nap,
.lp-footer__links {
  margin: 0 0 var(--space-sm);
}
.lp-footer__links a,
.lp-footer__phone {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 2px;
}
/* jod_phone_link() ships an icon that .button svg normally sizes. These links
   are not buttons, so without this the SVG renders at its intrinsic size and
   the line grows to several hundred pixels. */
.lp-footer__phone {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.lp-footer__phone svg {
  flex: none;
  width: 14px;
  height: 14px;
}
.lp-footer__links a + a {
  margin-left: var(--space-sm);
}
.lp-footer__disclaimer {
  margin: 0 0 var(--space-sm);
  color: rgb(255 255 255 / 55%);
  font-size: 0.76rem;
  line-height: 1.55;
}
.lp-footer__copyright {
  margin: 0;
  color: rgb(255 255 255 / 55%);
  font-size: 0.76rem;
}

/* ---------- sticky mobile call bar ---------- */
.lp-callbar {
  display: none;
}

@media (max-width: 900px) {
  /* Headline, then the form, then the supporting detail. The old page buried
     its first form three screens down; putting it above the headline instead
     would drop the message match the click was paid for. */
  .lp-hero__copy {
    display: contents;
  }
  .lp-hero__inner {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "lede"
      "form"
      "support";
    gap: var(--space-lg);
  }
  .lp-hero__lede    { grid-area: lede; }
  .lp-hero__form    { grid-area: form; align-self: stretch; }
  .lp-hero__support { grid-area: support; }
  .lp-header__hours {
    display: none;
  }
}

@media (max-width: 720px) {
  .lp-header__logo img {
    height: 34px;
  }
  /* The form is directly below the headline here, and the sticky bar carries
     the same jump link — the in-hero one is a third control for two actions. */
  .lp-hero__jump {
    display: none;
  }
  .lp-header__call {
    padding: 10px 14px;
    font-size: 0.9rem;
  }

  .lp-callbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 60;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: rgb(255 255 255 / 16%);
    box-shadow: 0 -6px 22px rgb(4 20 36 / 30%);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .lp-callbar a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 8px;
    font-weight: 700;
    font-size: 0.98rem;
    text-align: center;
    text-decoration: none;
  }
  .lp-callbar a svg {
    flex: none;
    width: 17px;
    height: 17px;
  }
  .lp-callbar__call {
    background: var(--color-brand-primary);
    color: var(--color-brand-primary-text);
  }
  .lp-callbar__form {
    background: var(--color-brand-navy-deep);
    color: #fff;
  }
  /* Keep the bar from covering the end of the page. */
  .jod-landing .lp-footer {
    padding-bottom: calc(var(--space-xl) + 64px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .button-outline-light {
    transition: none;
  }
}

/* Landing-page trust bar: five review-led items instead of four, so it is
   allowed to wrap into two centred rows on narrow desktops instead of
   squeezing. */
.trust-bar--lp .trust-bar__list {
  flex-wrap: wrap;
  justify-content: center;
  row-gap: var(--space-xs);
}