:root {
  --navy-950: #0d1d2b;
  --navy-900: #162433;
  --navy-800: #20384d;
  --blue-700: #3f688b;
  --blue-200: #cbd9e6;
  --blue-100: #e9f0f6;
  --ivory: #f7f4ed;
  --paper: #fffdfa;
  --white: #ffffff;
  --ink: #25313b;
  --muted: #61707c;
  --line: #d7dee4;
  --max: 1240px;
  --radius: 24px;
  --shadow: 0 24px 80px rgba(13, 29, 43, 0.1);

  /* Header/dropdown brand tokens — exact palette for the header button system */
  --navy: #162433;
  --charcoal: #2d2d2b;
  --stone: #d9d3c8;
  --ivory-warm: #f5f1e8;
  --muted-blue: #3f688b;
  --font-serif-header: "Cormorant Garamond", Georgia, "Times New Roman", serif;
}

* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  /* Keeps anchor-link jumps (#paslaugos, #kontaktai, etc.) from landing
     under the fixed floating header — reduced at smaller breakpoints
     alongside the header's own shrinking height. */
  scroll-padding-top: 150px;
}
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: var(--font-serif-header);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
body.menu-open {
  overflow: hidden;
}
img {
  max-width: 100%;
  display: block;
}
a {
  color: inherit;
}
button,
a {
  -webkit-tap-highlight-color: transparent;
}
::selection {
  background: var(--blue-200);
  color: var(--navy-950);
}

.container {
  width: min(calc(100% - 40px), var(--max));
  margin-inline: auto;
}
.section {
  padding: 104px 0;
}
.section--soft {
  background: var(--blue-100);
}
.section--ivory {
  background: var(--ivory);
}
.section--navy {
  background: var(--navy-900);
  color: var(--white);
}
.section-kicker {
  margin: 0 0 16px;
  color: var(--blue-700);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.section--navy .section-kicker,
.section--navy .label {
  color: #bcd0e1;
}
.display,
h1,
h2,
h3 {
  margin-top: 0;
  color: var(--navy-900);
  font-family: var(--font-serif-header);
  font-weight: 500;
  line-height: 1.08;
  text-wrap: balance;
}
.section--navy h2,
.section--navy h3 {
  color: var(--white);
}
h1 {
  font-size: clamp(3rem, 7vw, 6.7rem);
  letter-spacing: -0.045em;
}
h2 {
  font-size: clamp(2.25rem, 4.4vw, 4.5rem);
  letter-spacing: -0.035em;
}
h3 {
  font-size: clamp(1.45rem, 2vw, 2rem);
  letter-spacing: -0.025em;
}
.lead {
  font-size: clamp(1.08rem, 1.7vw, 1.34rem);
  color: var(--muted);
  max-width: 740px;
}
.section--navy .lead {
  color: #d9e3eb;
}
.label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.77rem;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--blue-700);
}
.label::before {
  content: "";
  width: 28px;
  height: 1px;
  background: currentColor;
}

.skip-link {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 9999;
  transform: translateY(-150%);
  padding: 10px 14px;
  background: var(--navy-900);
  color: white;
  border-radius: 10px;
}
.skip-link:focus {
  transform: none;
}

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  border-bottom: 1px solid rgba(215, 222, 228, 0.8);
  background: rgba(255, 253, 250, 0.92);
  backdrop-filter: blur(18px);
}
.header-row {
  min-height: 86px;
  display: grid;
  grid-template-columns: minmax(180px, 300px) 1fr auto;
  align-items: center;
  gap: 24px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 13px;
  text-decoration: none;
  min-width: 0;
}
.brand img {
  width: 66px;
  height: 66px;
  object-fit: contain;
  flex: 0 0 auto;
}
.brand-text {
  color: var(--navy-900);
  font-size: 0.73rem;
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.main-nav {
  justify-self: center;
}
.main-nav ul {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2.4vw, 34px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.main-nav a {
  position: relative;
  color: var(--navy-900);
  font-size: 0.83rem;
  font-weight: 800;
  letter-spacing: 0.055em;
  text-decoration: none;
  text-transform: uppercase;
}
.main-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: -8px;
  height: 1px;
  background: var(--navy-900);
  transition: right 0.22s ease;
}
.main-nav a:hover::after,
.main-nav a:focus-visible::after {
  right: 0;
}

.header-actions {
  display: flex;
  gap: 9px;
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 48px;
  padding: 12px 20px;
  border: 1px solid var(--navy-900);
  border-radius: 999px;
  color: var(--navy-900);
  background: transparent;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.035em;
  text-decoration: none;
  transition:
    transform 0.18s ease,
    background 0.18s ease,
    color 0.18s ease,
    border-color 0.18s ease;
}
.btn:hover {
  transform: translateY(-2px);
}
.btn--primary {
  background: var(--navy-900);
  color: white;
}
.btn--primary:hover {
  background: var(--blue-700);
  border-color: var(--blue-700);
}
.btn--light {
  color: white;
  border-color: rgba(255, 255, 255, 0.65);
}
.btn--light:hover {
  background: white;
  color: var(--navy-900);
}
.btn--text {
  border-color: transparent;
  padding-inline: 0;
  border-radius: 0;
  min-height: auto;
}
.btn--text:hover {
  transform: none;
  color: var(--blue-700);
}
.btn-arrow {
  font-size: 1.2em;
}

.menu-toggle {
  display: none;
  width: 48px;
  height: 48px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: white;
  color: var(--navy-900);
  cursor: pointer;
}
.menu-toggle span,
.menu-toggle::before,
.menu-toggle::after {
  content: "";
  display: block;
  width: 20px;
  height: 2px;
  margin: 4px auto;
  background: currentColor;
  transition:
    transform 0.2s ease,
    opacity 0.2s ease;
}
.menu-toggle[aria-expanded="true"] span {
  opacity: 0;
}
.menu-toggle[aria-expanded="true"]::before {
  transform: translateY(6px) rotate(45deg);
}
.menu-toggle[aria-expanded="true"]::after {
  transform: translateY(-6px) rotate(-45deg);
}

/* Hero */
.hero {
  position: relative;
  overflow: clip;
  min-height: 100svh;
  display: grid;
  align-items: center;
  padding: 74px 0 80px;
  background-image:
    linear-gradient(
      90deg,
      var(--paper) 0,
      var(--paper) 560px,
      rgba(255, 253, 250, 0.82) 720px,
      rgba(255, 253, 250, 0.3) 900px,
      transparent 1100px
    ),
    url("assets/hero-background-2.jpg");
  background-size: cover;
  background-position: center;
}
.hero::after {
  content: "";
  position: absolute;
  right: -3vw;
  bottom: -40px;
  width: min(48vw, 720px);
  height: 260px;
  opacity: 0;
  background: repeating-linear-gradient(
    90deg,
    transparent 0 17px,
    var(--blue-700) 17px 18px
  );
  clip-path: polygon(
    0 58%,
    7% 41%,
    15% 61%,
    24% 30%,
    35% 56%,
    45% 19%,
    54% 49%,
    65% 26%,
    76% 62%,
    87% 37%,
    100% 55%,
    100% 100%,
    0 100%
  );
}
.hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  align-items: center;
}
.hero-copy {
  max-width: 620px;
}
.hero-copy h1 {
  font-size: clamp(2.6rem, 5.6vw, 5.6rem);
}
.hero-copy p {
  max-width: 680px;
  font-size: clamp(1.05rem, 1.6vw, 1.27rem);
  color: var(--muted);
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 34px;
}
.hero-art {
  position: relative;
  min-height: 520px;
  display: grid;
  place-items: center;
}
.hero-emblem {
  position: relative;
  width: min(100%, 510px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: 1px solid rgba(63, 104, 139, 0.24);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.42);
}
.hero-emblem::before,
.hero-emblem::after {
  content: "";
  position: absolute;
  border: 1px solid rgba(63, 104, 139, 0.2);
  border-radius: 50%;
}
.hero-emblem::before {
  inset: 9%;
}
.hero-emblem::after {
  inset: 19%;
}
.hero-emblem img {
  position: relative;
  z-index: 1;
  width: 64%;
}
.hero-word {
  position: absolute;
  z-index: 2;
  padding: 8px 12px;
  background: var(--paper);
  color: var(--navy-900);
  font-family: var(--font-serif-header);
  font-size: clamp(1rem, 1.5vw, 1.35rem);
  box-shadow: 0 10px 30px rgba(13, 29, 43, 0.08);
}
.hero-word--one {
  top: 8%;
  left: -4%;
}
.hero-word--two {
  right: -4%;
  top: 44%;
}
.hero-word--three {
  left: 4%;
  bottom: 8%;
}

/* Content layouts */
.intro-grid {
  display: grid;
  grid-template-columns: 0.75fr 1.25fr;
  gap: clamp(44px, 9vw, 130px);
  align-items: start;
}
.intro-grid h2 {
  position: sticky;
  top: 126px;
}
.large-copy {
  margin: 0;
  color: var(--navy-800);
  font-family: var(--font-serif-header);
  font-size: clamp(1.3rem, 1.9vw, 1.85rem);
  line-height: 1.55;
}

.practice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin-top: 48px;
}
.practice-card {
  position: relative;
  overflow: hidden;
  min-height: 420px;
  padding: clamp(30px, 5vw, 58px);
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: white;
  box-shadow: var(--shadow);
  text-decoration: none;
  transition:
    transform 0.25s ease,
    border-color 0.25s ease;
}
.practice-card:hover {
  transform: translateY(-6px);
  border-color: var(--blue-700);
}
.practice-card:first-child {
  color: white;
  border-color: var(--navy-900);
  background: var(--navy-900);
}
.practice-card:first-child h3 {
  color: white;
}
.practice-card p {
  max-width: 520px;
  color: var(--muted);
}
.practice-card:first-child p {
  color: #d8e2eb;
}
.practice-card .number {
  display: block;
  margin-bottom: 86px;
  font-family: var(--font-serif-header);
  font-size: 1.2rem;
  color: var(--blue-700);
}
.practice-card:first-child .number {
  color: #bcd0e1;
}
.practice-card::after {
  content: "↗";
  position: absolute;
  right: 34px;
  bottom: 28px;
  font-size: 2.4rem;
  color: var(--blue-700);
}

.team-list {
  display: grid;
  gap: 1px;
  margin-top: 54px;
  background: var(--line);
  border: 1px solid var(--line);
}
.lawyer-row {
  display: grid;
  grid-template-columns: 330px 1fr;
  min-height: 470px;
  background: var(--paper);
}
.lawyer-row:nth-child(even) .lawyer-photo {
  order: 2;
}
.lawyer-photo {
  overflow: hidden;
  min-height: 470px;
  background: var(--blue-100);
}
.lawyer-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  transition: transform 0.7s ease;
}
.lawyer-row:hover .lawyer-photo img {
  transform: scale(1.025);
}
.lawyer-copy {
  padding: clamp(32px, 5vw, 68px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.lawyer-copy p {
  max-width: 690px;
}
.specialties {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}
/* Keyword chips on the team cards: serif label with a leading dot, matching
   the service-pill treatment (#23364a, Cormorant with a Georgia fallback). */
.specialties li {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  padding: 11px 18px;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: #23364a;
  background: white;
  font-family: var(--font-serif-header);
  font-size: 1.02rem;
  font-weight: 600;
  line-height: 1.3;
}
.specialties li::before {
  content: "";
  flex-shrink: 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--blue-700);
  align-self: center;
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin-top: 52px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.18);
}
.service-card {
  display: block;
  text-decoration: none;
  border-radius: 20px;
  overflow: hidden;
  background: var(--navy-900);
}
.service-card:nth-child(2),
.service-card:nth-child(3) {
  background: #1b3043;
}

.service-card-image {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--blue-100);
}
.service-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  transition: transform 0.5s ease;
}
.services-track .service-card:hover .service-card-image img {
  transform: scale(1.08);
}

.service-card-badge {
  position: absolute;
  top: 14px;
  right: 14px;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 50%;
  background: rgba(13, 29, 43, 0.55);
  color: var(--white);
  font-family: var(--font-serif-header);
  font-size: 0.9rem;
  backdrop-filter: blur(2px);
}

.service-card p {
  color: #cdd9e2;
}

.memorial-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(320px, 0.92fr);
  gap: clamp(44px, 8vw, 110px);
  align-items: center;
}
.memorial-image {
  position: relative;
  padding: 16px;
  border: 1px solid var(--blue-700);
}
.memorial-image::before {
  content: "";
  position: absolute;
  inset: -16px 16px 16px -16px;
  border: 1px solid var(--blue-200);
  z-index: -1;
}
.memorial-image img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.quote {
  margin: 30px 0 0;
  padding-left: 24px;
  border-left: 1px solid var(--blue-700);
  color: var(--navy-800);
  font-family: var(--font-serif-header);
  font-size: clamp(1.3rem, 2vw, 1.8rem);
}

/* Full-width header so the name gets a whole line instead of wrapping three
   times inside a half-width column. Dates sit on their own line below it. */
.memorial-header {
  max-width: 900px;
  margin-bottom: clamp(44px, 5vw, 72px);
}
.memorial-header h2 {
  margin: 0;
}
.memorial-dates {
  margin: 18px 0 0;
  color: var(--blue-700);
  font-family: var(--font-serif-header);
  font-size: clamp(1.15rem, 1.6vw, 1.4rem);
  letter-spacing: 0.18em;
}

/* Opening tribute sits beside the portrait, vertically centred against it. */
.memorial-lead .lead {
  margin: 0;
}

/* The source photo is 16:9. The global `min-height: 420px` forced a taller box
   and `object-fit: cover` then cropped ~28% off each side — so the portrait is
   pinned to its own ratio here and shown whole. */
.memorial-lead .memorial-image img {
  aspect-ratio: 16 / 9;
  min-height: 0;
}

/* The three dates the tribute text turns on, lifted out of the prose so the
   milestones are scannable without reading all five paragraphs. */
.memorial-milestones {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 48px);
  margin: clamp(48px, 6vw, 80px) 0 0;
  padding: clamp(32px, 4vw, 44px) 0 0;
  border-top: 1px solid var(--line);
  list-style: none;
}
.memorial-milestones li {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.memorial-milestone-year {
  color: var(--navy-900);
  font-family: var(--font-serif-header);
  font-size: clamp(1.9rem, 3vw, 2.6rem);
  line-height: 1;
  letter-spacing: -0.02em;
}
.memorial-milestone-text {
  color: var(--muted);
  font-size: 0.98rem;
  line-height: 1.6;
}

/* Runs the full container width so its right edge lines up with the third
   milestone column above it. */
.memorial-body {
  margin-top: clamp(48px, 6vw, 80px);
}
.memorial-body p {
  margin: 0;
  color: var(--ink);
  font-size: 1.05rem;
  line-height: 1.75;
  text-align: justify;
  /* Left here as progressive enhancement only — verified in Chrome that no
     Lithuanian hyphenation dictionary ships today, so this is currently a
     no-op and justification relies on the measure staying wide. That is why
     the 560px breakpoint drops back to ragged-right rather than justifying
     a ~46-character line with no hyphens to tighten it. */
  -webkit-hyphens: auto;
  hyphens: auto;
}
.memorial-body p + p {
  margin-top: 1.35em;
}

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  /* Top-aligned: the card stack is far taller than the heading, and bottom
     alignment dropped the heading to the foot of the section. */
  align-items: start;
}
/* Firm address in the contact section's left column. */
.contact-address {
  margin-top: 28px;
  font-style: normal;
}
.contact-address-label {
  display: block;
  margin-bottom: 8px;
  color: #9db2c7;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.contact-address p {
  margin: 0;
  color: var(--white);
  font-size: 1.05rem;
  line-height: 1.6;
}

/* One card per advokatas, each holding its own email and phone tiles. The
   panels are white overlays rather than fixed colours so they sit correctly
   on the navy section without hardcoding a second palette. */
.contact-cards {
  display: grid;
  gap: 14px;
}
.contact-card {
  padding: 22px 24px 24px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.06);
}
.contact-card h3 {
  margin: 10px 0 16px;
  font-size: clamp(1.35rem, 1.8vw, 1.7rem);
}
.contact-card-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.contact-field {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 7px;
  padding: 13px 16px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 14px;
  color: var(--white);
  text-decoration: none;
  transition:
    background 0.2s ease,
    border-color 0.2s ease;
}
.contact-field:hover,
.contact-field:focus-visible {
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(255, 255, 255, 0.36);
  outline: none;
}
.contact-field-label {
  color: #9db2c7;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.contact-field strong {
  font-size: 1.15rem;
  font-weight: 600;
  /* Emails are long enough to overflow a half-width tile at small sizes. */
  overflow-wrap: anywhere;
}

/* Matches the leading rule that .label already draws on the card kickers. */
.contact-grid .section-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.contact-grid .section-kicker::before {
  content: "";
  width: 28px;
  height: 1px;
  background: currentColor;
}
/* Subpages */
.page-hero {
  padding: 94px 0 84px;
  background: var(--ivory);
  border-bottom: 1px solid var(--line);
}
.page-hero-grid {
  display: grid;
  grid-template-columns: 1fr 320px;
  align-items: end;
  gap: 60px;
}
.page-hero-logo {
  justify-self: end;
  width: 270px;
  opacity: 0.95;
}
.breadcrumb {
  margin-bottom: 18px;
  font-size: 0.83rem;
  color: var(--muted);
}
.page-hero h1 {
  font-size: clamp(2.9rem, 5.4vw, 4.8rem);
}
.breadcrumb a {
  text-decoration: none;
}
.profile {
  display: grid;
  grid-template-columns: minmax(300px, 0.72fr) minmax(0, 1.28fr);
  gap: clamp(42px, 8vw, 110px);
  align-items: start;
}
.profile + .profile {
  margin-top: 110px;
  padding-top: 110px;
  border-top: 1px solid var(--line);
}
.profile-photo {
  position: sticky;
  top: 120px;
}
.profile-photo img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: top center;
}
.bio {
  font-size: 1.1rem;
  color: var(--muted);
}
.service-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 32px;
}

/* Sub-heading inside a profile, for bios long enough to need sections. The
   bare h3 zeroes its top margin for card use, so restore spacing here. */
.profile-subhead {
  margin-top: 40px;
  font-size: clamp(1.25rem, 1.5vw, 1.5rem);
}
.profile-copy {
  margin: 16px 0;
  font-size: 1.1rem;
  color: var(--muted);
  line-height: 1.7;
}

/* Practice areas that carry a description, so they can't use .service-pill.
   Hairline-separated rows: bold area, muted explanation under it. */
.practice-list {
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}
.practice-list li {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 20px 0;
  border-top: 1px solid var(--line);
}
.practice-list li:last-child {
  border-bottom: 1px solid var(--line);
}
.practice-list strong {
  color: var(--navy-900);
  font-weight: 600;
}
.practice-list span {
  color: var(--muted);
  font-size: 0.98rem;
  line-height: 1.6;
}
.service-pill {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 24px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: white;
  /* Spec'd from design: elegant serif with a transitional-serif fallback,
     card text in #23364a (slightly lighter than --navy-900). */
  color: #23364a;
  font-family: var(--font-serif-header);
  font-size: 1.12rem;
  font-weight: 600;
  line-height: 1.35;
}
.service-pill-arrow {
  flex-shrink: 0;
  font-family: var(--font-serif-header);
  font-size: 1.05rem;
  line-height: 1;
  transition: transform 0.15s ease;
}

/* Cards that open the description dialog are real <button>s — restore the
   card look the UA button styles would otherwise override, and add a hover
   affordance the static pills don't need. */
button.service-pill {
  width: 100%;
  text-align: left;
  appearance: none;
  cursor: pointer;
  transition:
    border-color 0.15s ease,
    background 0.15s ease;
}
button.service-pill:hover,
button.service-pill:focus-visible {
  border-color: var(--navy);
}
button.service-pill:focus-visible {
  outline: 2px solid var(--muted-blue);
  outline-offset: 2px;
}
button.service-pill:hover .service-pill-arrow {
  transform: translateX(3px);
}

/* Specialization description dialog */
.spec-dialog {
  width: min(560px, calc(100vw - 40px));
  padding: 0;
  border: 0;
  border-radius: 20px;
  box-shadow: 0 24px 80px rgba(13, 29, 43, 0.3);
}
.spec-dialog::backdrop {
  background: rgba(13, 29, 43, 0.55);
}
.spec-dialog-inner {
  padding: 30px 34px 34px;
  background: var(--paper);
}
.spec-dialog-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 16px;
}
.spec-dialog-head h3 {
  margin: 0;
  color: #23364a;
  font-size: clamp(1.35rem, 2vw, 1.7rem);
}
.spec-dialog-close {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--white);
  color: var(--navy);
  font-size: 0.95rem;
  cursor: pointer;
  transition:
    background 0.15s ease,
    color 0.15s ease;
}
.spec-dialog-close:hover,
.spec-dialog-close:focus-visible {
  background: var(--navy);
  color: var(--white);
  outline: none;
}
.spec-dialog-body {
  margin: 0;
  color: var(--ink);
  line-height: 1.7;
}
.placeholder {
  padding: clamp(34px, 6vw, 78px);
  border: 1px dashed var(--blue-700);
  background: var(--blue-100);
}
.placeholder-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 36px;
}
.placeholder-item {
  min-height: 160px;
  padding: 24px;
  background: white;
  border: 1px solid var(--line);
}

/* Footer */
.site-footer {
  padding: 34px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  background: var(--navy-950);
  color: white;
}
.footer-row {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: center;
}
.footer-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}
.footer-brand img {
  width: 48px;
  height: 48px;
  object-fit: contain;
  filter: brightness(0) invert(1);
}
.footer-small {
  color: #b9c6d0;
  font-size: 0.78rem;
}

/* Responsive */
@media (max-width: 1080px) {
  .header-row {
    grid-template-columns: 1fr auto;
  }
  .main-nav,
  .header-actions {
    display: none;
  }
  .menu-toggle {
    display: block;
  }
  .main-nav.is-open {
    display: block;
    position: fixed;
    inset: 87px 0 auto 0;
    height: calc(100svh - 87px);
    padding: 36px 20px;
    background: var(--paper);
    overflow-y: auto;
  }
  .main-nav.is-open ul {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .main-nav.is-open a {
    display: block;
    padding: 18px 0;
    border-bottom: 1px solid var(--line);
    font-family: var(--font-serif-header);
    font-size: 1.7rem;
    font-weight: 500;
    text-transform: none;
  }
  .main-nav.is-open .mobile-actions {
    display: grid;
    gap: 10px;
    margin-top: 28px;
  }
  .hero-grid {
    grid-template-columns: 1fr 0.75fr;
    gap: 40px;
  }
  .hero-emblem {
    width: 100%;
  }
  .lawyer-row {
    grid-template-columns: 285px 1fr;
  }
}
@media (min-width: 1081px) {
  .mobile-actions {
    display: none !important;
  }
}

@media (max-width: 820px) {
  .section {
    padding: 78px 0;
  }
  .hero {
    min-height: auto;
    padding-top: 60px;
    background-image:
      linear-gradient(
        180deg,
        var(--paper) 0%,
        var(--paper) 42%,
        rgba(255, 253, 250, 0.82) 58%,
        rgba(255, 253, 250, 0.3) 74%,
        transparent 90%
      ),
      url("assets/hero-background-2.jpg");
    background-size: cover;
    background-position: center;
  }
  .hero-grid,
  .intro-grid,
  .memorial-grid,
  .contact-grid,
  .page-hero-grid,
  .profile {
    grid-template-columns: 1fr;
  }
  .hero-art {
    min-height: 390px;
    margin-top: 22px;
  }
  .hero-emblem {
    width: min(88vw, 430px);
  }
  .intro-grid h2 {
    position: static;
  }
  .practice-grid,
  .services-grid {
    grid-template-columns: 1fr;
  }
  .lawyer-row {
    grid-template-columns: 1fr;
  }
  .lawyer-row:nth-child(even) .lawyer-photo {
    order: initial;
  }
  .lawyer-photo {
    min-height: 520px;
  }
  .profile-photo {
    position: static;
    max-width: 560px;
  }
  .page-hero-logo {
    justify-self: start;
    width: 190px;
  }
  .placeholder-list {
    grid-template-columns: 1fr;
  }
  .footer-row {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 560px) {
  .container {
    width: min(calc(100% - 28px), var(--max));
  }
  .header-row {
    min-height: 74px;
  }
  .brand img {
    width: 52px;
    height: 52px;
  }
  .brand-text {
    font-size: 0.63rem;
  }
  .main-nav.is-open {
    inset-top: 75px;
    height: calc(100svh - 75px);
  }
  h1 {
    font-size: clamp(2.7rem, 14vw, 4.4rem);
  }
  h2 {
    font-size: clamp(2.05rem, 11vw, 3.2rem);
  }
  .hero-actions,
  .btn {
    width: 100%;
  }
  .hero-word {
    font-size: 0.92rem;
  }
  .hero-word--one {
    left: 0;
  }
  .hero-word--two {
    right: 0;
  }
  .practice-card {
    min-height: 370px;
  }
  .lawyer-photo {
    min-height: 430px;
  }
  .lawyer-copy {
    padding: 30px 22px;
  }
  .service-columns {
    grid-template-columns: 1fr;
  }
  /* Two tiles side by side leave too little room for an email at phone width. */
  .contact-card-fields {
    grid-template-columns: 1fr;
  }
  .contact-card {
    padding: 24px 22px 26px;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition: none !important;
  }
}

/* =========================================================
   CENTERED EMBLEM HEADER — UPDATED LAYOUT
   Left: Brother's practice | Center: logo | Right: Sisters
   ========================================================= */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  border-bottom: 1px solid rgba(215, 222, 228, 0.92);
  background: rgba(255, 253, 250, 0.96);
  backdrop-filter: blur(18px);
}

.header-primary {
  border-bottom: 1px solid rgba(215, 222, 228, 0.72);
}

.header-primary-row {
  min-height: 104px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 24px;
}

.practice-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--navy-900);
  font-family: var(--font-serif-header);
  font-size: clamp(1rem, 1.45vw, 1.32rem);
  line-height: 1.1;
  text-decoration: none;
  transition:
    color 0.2s ease,
    transform 0.2s ease;
}

.practice-link:hover,
.practice-link:focus-visible {
  color: var(--blue-700);
}

.practice-link--left {
  justify-self: start;
}

.practice-link--right {
  justify-self: end;
  text-align: right;
}

.practice-link--left::before,
.practice-link--right::after {
  font-family: var(--font-serif-header);
  font-size: 1rem;
  line-height: 1;
}

.practice-link--left::before {
  content: "←";
}
.practice-link--right::after {
  content: "→";
}

.center-brand {
  position: relative;
  z-index: 2;
  display: inline-grid;
  place-items: center;
  justify-self: center;
  width: 88px;
  height: 88px;
  text-decoration: none;
}

.center-brand img {
  width: 82px;
  height: 82px;
  object-fit: contain;
}

.header-secondary {
  min-height: 52px;
}

.secondary-nav {
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.secondary-nav ul {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(20px, 4vw, 54px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.secondary-nav a {
  position: relative;
  color: var(--navy-900);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-decoration: none;
  text-transform: uppercase;
}

.secondary-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: -7px;
  height: 1px;
  background: currentColor;
  transition: right 0.2s ease;
}

.secondary-nav a:hover::after,
.secondary-nav a:focus-visible::after,
.secondary-nav a[aria-current="page"]::after {
  right: 0;
}

.menu-toggle {
  display: none !important;
}

.main-nav,
.header-actions,
.header-row {
  display: none !important;
}

@media (max-width: 820px) {
  .header-primary-row {
    min-height: 86px;
    gap: 8px;
  }

  .center-brand {
    width: 68px;
    height: 68px;
  }

  .center-brand img {
    width: 64px;
    height: 64px;
  }

  .practice-link {
    gap: 5px;
    font-family: var(--font-serif-header);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    line-height: 1.25;
    text-transform: uppercase;
  }

  .practice-link--left::before,
  .practice-link--right::after {
    display: none;
  }

  .secondary-nav {
    overflow-x: auto;
    justify-content: flex-start;
    scrollbar-width: none;
  }

  .secondary-nav::-webkit-scrollbar {
    display: none;
  }

  .secondary-nav ul {
    width: max-content;
    min-width: 100%;
    justify-content: center;
    gap: 24px;
    padding-inline: 18px;
  }

  .secondary-nav a {
    white-space: nowrap;
    font-size: 0.7rem;
  }

  .hero {
    min-height: auto;
  }
}

@media (max-width: 520px) {
  .header-primary-row {
    grid-template-columns: minmax(0, 1fr) 62px minmax(0, 1fr);
    min-height: 78px;
  }

  .center-brand {
    width: 60px;
    height: 60px;
  }

  .center-brand img {
    width: 56px;
    height: 56px;
  }

  .practice-link {
    font-size: 0.63rem;
    letter-spacing: 0.02em;
  }

  .practice-link--left {
    text-align: left;
  }

  .practice-link--right {
    text-align: right;
  }

  .header-secondary,
  .secondary-nav {
    min-height: 46px;
  }

  .secondary-nav ul {
    justify-content: flex-start;
    gap: 20px;
    padding-inline: 14px;
  }
}

/* =========================================================
   FLOATING PILL HEADER
   ========================================================= */
.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 1000;
  padding: 26px 14px 0;
  background: transparent;
  border: 0;
  backdrop-filter: none;
}

.floating-header {
  position: relative;
  width: min(100%, 1640px);
  min-height: 102px;
  margin-inline: auto;
  padding: 0 48px;
  display: grid;
  /* Three columns so the logo column is exactly centred no matter how wide
     the two practice pills are. Nav now lives in the Meniu dropdown. */
  grid-template-columns: minmax(0, 1fr) 156px minmax(0, 1fr);
  align-items: center;
  column-gap: clamp(16px, 2vw, 38px);
  border-radius: 34px;
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 12px 36px rgba(13, 29, 43, 0.08);
}

.header-side {
  display: flex;
  align-items: center;
}

/* Pill at the outer edge, dropdown pushed inward against the logo. */
.header-side--left {
  justify-content: space-between;
  gap: 16px;
}

.header-side--right {
  justify-content: space-between;
  gap: 16px;
}

.practice-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: 14px 24px;
  border: 1px solid var(--navy);
  border-radius: 999px;
  color: var(--white);
  background: var(--navy);
  font-family: var(--font-serif-header);
  /* Matches the Meniu/Pasirinkti kalba pill size (.header-nav-trigger). The
     1240px/1020px/680px/430px breakpoints below still shrink it for tighter
     layouts. */
  font-size: 0.98rem;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: 0.012em;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: none;
  transition:
    transform 0.2s ease,
    background 0.2s ease,
    border-color 0.2s ease;
}

.practice-cta:hover {
  background: var(--muted-blue);
  border-color: var(--muted-blue);
  transform: translateY(-2px);
}

.practice-cta:active {
  background: var(--navy-950);
  border-color: var(--navy-950);
  transform: translateY(0);
}

.practice-cta:focus-visible {
  outline: 2px solid var(--muted-blue);
  outline-offset: 3px;
}

.practice-cta--left::before,
.practice-cta--right::after {
  font-family: var(--font-serif-header);
  font-size: 0.8em;
  font-weight: 500;
  opacity: 0.75;
}

.practice-cta--left::before {
  content: "←";
  margin-right: 10px;
}

.practice-cta--right::after {
  content: "→";
  margin-left: 10px;
}

.header-nav {
  display: flex;
  align-items: center;
  gap: 12px;
}

.header-nav a,
.header-nav-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 48px;
  padding: 11px 24px;
  border: 1px solid var(--navy);
  border-radius: 24px;
  color: var(--navy);
  background: var(--white);
  font-family: var(--font-serif-header);
  font-size: 0.98rem;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: 0.012em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition:
    color 0.2s ease,
    background 0.2s ease,
    border-color 0.2s ease,
    transform 0.2s ease;
}

/* Resting "current section" state — ivory fill + inset indicator, not just color */
/* Current page reads as a solid navy pill, matching the same state in the
   mobile panel. Replaces the earlier ivory fill with an inset underline. */
.header-nav a[aria-current="page"],
.header-nav-trigger[aria-current="page"] {
  background: var(--navy);
  color: var(--white);
  border-color: var(--navy);
  box-shadow: none;
}

/* Interactive states always win over the resting current-section look */
.header-nav a:hover,
.header-nav-trigger:hover {
  color: var(--white);
  background: var(--navy);
  border-color: var(--navy);
  box-shadow: none;
  transform: translateY(-1px);
}

.header-nav a:active,
.header-nav-trigger:active {
  color: var(--white);
  background: var(--navy-950);
  border-color: var(--navy-950);
  transform: translateY(0);
}

.header-nav a:focus-visible,
.header-nav-trigger:focus-visible {
  outline: 2px solid var(--muted-blue);
  outline-offset: 3px;
}

.header-logo {
  position: relative;
  z-index: 3;
  align-self: center;
  display: grid;
  place-items: center;
  width: 156px;
  height: 156px;
  margin-block: -28px;
  border-radius: 50%;
  background: #fff;
  text-decoration: none;
}

.header-logo img {
  width: 118px;
  height: 118px;
  object-fit: contain;
}

/* Advokatai dropdown */
.dropdown {
  position: relative;
  display: inline-flex;
}

/* Invisible bridge over the gap between the trigger and the menu, so
   moving the mouse straight down never leaves the hoverable area. */
.dropdown::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 14px;
}

.dropdown-menu {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  min-width: 288px;
  padding: 22px 12px 12px;
  background: var(--white);
  border: 1px solid var(--stone);
  border-radius: 22px;
  box-shadow: 0 18px 44px rgba(22, 36, 51, 0.12);
  z-index: 1100;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(-50%) translateY(-4px);
  transition:
    opacity 0.16s ease,
    transform 0.16s ease,
    visibility 0s linear 0.16s;
}

/* Reveal on hover (mouse) and on focus-within (keyboard: tabbing onto the
   trigger or any menu item keeps it open, per WCAG's usual pattern). */
.dropdown:hover .dropdown-menu,
.dropdown:focus-within .dropdown-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
  transition:
    opacity 0.16s ease,
    transform 0.16s ease,
    visibility 0s linear 0s;
}

/* "Pasirinkite advokatą" eyebrow above the menu items. */
.dropdown-menu-label {
  margin: 0 0 6px;
  padding: 0 16px;
  color: var(--muted);
  font-family: var(--font-serif-header);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Scoped through .dropdown-menu so these beat the `.header-nav a` pill styling
   the items would otherwise inherit from the surrounding nav. */
.dropdown-menu .dropdown-menu-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 56px;
  padding: 12px 16px;
  border: 0;
  border-radius: 14px;
  color: var(--navy);
  background: transparent;
  font-family: var(--font-serif-header);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  transition:
    background 0.15s ease,
    color 0.15s ease;
}

/* Hairline sits inset on the item's own box rather than on a shared border, so
   the divider stays put while the hover pill rounds over it. */
.dropdown-menu .dropdown-menu-item + .dropdown-menu-item {
  box-shadow: inset 0 1px 0 var(--stone);
}

.dropdown-menu-item-arrow {
  flex-shrink: 0;
  font-size: 1.15rem;
  line-height: 1;
  transition: transform 0.15s ease;
}

.dropdown-menu .dropdown-menu-item:hover,
.dropdown-menu .dropdown-menu-item:focus-visible {
  background: var(--navy);
  border-color: transparent;
  color: var(--white);
  transform: none;
  outline: none;
}

.dropdown-menu .dropdown-menu-item:hover .dropdown-menu-item-arrow,
.dropdown-menu .dropdown-menu-item:focus-visible .dropdown-menu-item-arrow {
  transform: translateX(3px);
}

/* Secondary group inside the Meniu dropdown (the individual advokatai). */
.dropdown-menu-label--section {
  margin-top: 14px;
  padding-top: 16px;
  border-top: 1px solid var(--stone);
}

/* Language switcher ---------------------------------------------------- */
.lang-trigger {
  min-width: 62px;
  padding-inline: 16px;
}
.dropdown-menu--lang {
  min-width: 214px;
  left: auto;
  right: 0;
  transform: translateY(-4px);
}
.dropdown:hover .dropdown-menu--lang,
.dropdown:focus-within .dropdown-menu--lang {
  transform: translateY(0);
}
.dropdown-menu--lang .dropdown-menu-item {
  font-size: 0.98rem;
}
.lang-code {
  flex-shrink: 0;
  color: var(--muted);
  font-family: var(--font-serif-header);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.1em;
}

/* Active language reads as selected; the three not yet translated are shown
   but inert, so the header never links to a page that does not exist. */
.dropdown-menu .dropdown-menu-item.is-current {
  background: var(--navy);
  color: var(--white);
}
.dropdown-menu .dropdown-menu-item.is-current .lang-code {
  color: rgba(255, 255, 255, 0.7);
}
/* Visually hidden, still announced by screen readers. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.header-menu-toggle {
  display: none;
}

.mobile-header-panel {
  display: none;
}

/* Mobile menu toggle + panel. The toggle lives inside .header-side--right
   as a flex sibling of the practice-cta (never overlapping it, since flex
   items share a row instead of stacking via fixed offsets), so the pill's
   own grid/shape never has to change size for it. */
@media (max-width: 1020px) {
  .header-side--right {
    gap: 10px;
  }

  .header-menu-toggle {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    /* Keep the toggle pinned to the header's right edge even when the
       practice pill hides (≤560px) and it becomes the only flex item. */
    margin-left: auto;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid var(--navy);
    border-radius: 50%;
    background: var(--white);
    color: var(--navy);
    cursor: pointer;
  }

  .header-menu-toggle span,
  .header-menu-toggle::before,
  .header-menu-toggle::after {
    content: "";
    display: block;
    width: 16px;
    height: 2px;
    margin: 3px auto;
    background: currentColor;
    transition:
      transform 0.2s ease,
      opacity 0.2s ease;
  }

  .header-menu-toggle[aria-expanded="true"] span {
    opacity: 0;
  }
  .header-menu-toggle[aria-expanded="true"]::before {
    transform: translateY(5px) rotate(45deg);
  }
  .header-menu-toggle[aria-expanded="true"]::after {
    transform: translateY(-5px) rotate(-45deg);
  }

  .mobile-header-panel {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 1150;
    padding: 22px 22px 32px;
    background: var(--ivory-warm);
    overflow-y: auto;
  }

  .mobile-header-panel[hidden] {
    display: none;
  }

  /* The panel covers the header, so its own back button is the only way to
     close it by tap — the toggle button underneath is not reachable. */
  .mobile-panel-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 4px;
    border: 0;
    background: none;
    color: var(--navy);
    font-family: var(--font-serif-header);
    font-size: 0.92rem;
    font-weight: 600;
    cursor: pointer;
  }

  .mobile-panel-logo {
    display: flex;
    justify-content: center;
    margin: 4px 0 28px;
  }

  .mobile-panel-logo img {
    width: 84px;
    height: 84px;
    object-fit: contain;
  }

  .mobile-header-panel nav {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 420px;
    margin: 0 auto;
  }

  .mobile-header-panel > nav > a,
  .mobile-accordion-trigger {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 12px 20px;
    border: 1px solid var(--navy);
    border-radius: 16px;
    background: var(--white);
    color: var(--navy);
    font-family: var(--font-serif-header);
    font-size: 1rem;
    font-weight: 500;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    transition:
      background 0.2s ease,
      color 0.2s ease;
  }

  .mobile-header-panel > nav > a[aria-current="page"],
  .mobile-accordion-trigger[aria-current="page"] {
    background: var(--navy);
    color: var(--white);
  }

  .mobile-header-panel > nav > a:focus-visible,
  .mobile-accordion-trigger:focus-visible {
    outline: 2px solid var(--muted-blue);
    outline-offset: 3px;
  }

  .mobile-accordion-trigger {
    width: 100%;
    position: relative;
  }

  .mobile-accordion-trigger::after {
    content: "";
    position: absolute;
    right: 20px;
    width: 9px;
    height: 9px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
    transition: transform 0.2s ease;
  }

  .mobile-accordion-trigger[aria-expanded="true"]::after {
    transform: rotate(225deg);
  }

  .mobile-accordion-panel {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 8px 4px;
  }

  .mobile-accordion-panel[hidden] {
    display: none;
  }

  .mobile-accordion-panel a {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 10px 20px;
    border: 1px solid var(--stone);
    border-radius: 14px;
    background: var(--white);
    color: var(--navy);
    font-family: var(--font-serif-header);
    font-size: 0.95rem;
    font-weight: 500;
    text-decoration: none;
    transition:
      background 0.2s ease,
      color 0.2s ease;
  }

  .mobile-accordion-panel a:hover,
  .mobile-accordion-panel a:focus-visible {
    background: var(--navy);
    color: var(--white);
    outline: none;
  }

  /* Same filled look as the desktop practice-cta pills, so these read as
     the same primary actions once the pills themselves are hidden below. */
  .mobile-header-panel > nav > a.mobile-panel-cta {
    background: var(--navy);
    color: var(--white);
  }

  .mobile-header-panel > nav > a.mobile-panel-cta:hover,
  .mobile-header-panel > nav > a.mobile-panel-cta:focus-visible {
    background: var(--muted-blue);
    border-color: var(--muted-blue);
  }

  /* Language row inside the mobile panel, mirroring the desktop switcher. */
  .mobile-panel-label {
    margin: 22px 0 10px;
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }
  .mobile-lang {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  .mobile-lang-option {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    padding: 0 18px;
    border: 1px solid var(--line);
    border-radius: 999px;
    font-family: var(--font-serif-header);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.08em;
  }
  .mobile-lang-option.is-current {
    border-color: var(--navy);
    background: var(--navy);
    color: var(--white);
  }
}

/* Below phone width the two practice pills (with the toggle) no longer
   leave enough room for readable text — they shrink to ~9px. Hide them
   and rely on the mobile-panel-cta links added there instead. */
@media (max-width: 560px) {
  .practice-cta--left,
  .practice-cta--right {
    display: none;
  }
}

/* Header sits over the hero image */
.hero {
  padding-top: 190px;
}

/* Hide all previous header structures */
.header-primary,
.header-secondary,
.header-primary-row,
.secondary-nav,
.practice-link,
.center-brand,
.main-nav,
.header-actions,
.header-row,
.menu-toggle {
  display: none !important;
}

@media (max-width: 1240px) {
  .floating-header {
    grid-template-columns: minmax(0, 1fr) 126px minmax(0, 1fr);
    column-gap: 15px;
    padding-inline: 28px;
  }

  /* Between the 1020px collapse and 1240px there is not enough room for the
     full firm name on one line beside four nav pills, so it wraps to two
     rather than overrunning its column. */
  .practice-cta--right {
    white-space: normal;
    max-width: 230px;
    padding-inline: 18px;
    line-height: 1.25;
    text-align: center;
  }

  .header-logo {
    width: 126px;
    height: 126px;
    margin-block: -18px;
  }

  .header-logo img {
    width: 96px;
    height: 96px;
  }

  .header-nav {
    gap: 9px;
  }

  .header-nav a {
    padding-inline: 19px;
  }

  .practice-cta {
    padding-inline: 22px;
  }
}

@media (max-width: 1020px) {
  html {
    scroll-padding-top: 120px;
  }

  .site-header {
    padding: 16px 12px 0;
  }

  .floating-header {
    min-height: 84px;
    grid-template-columns: minmax(0, 1fr) 92px minmax(0, 1fr);
    padding: 0 20px;
    border-radius: 28px;
  }

  .header-side--left,
  .header-side--right {
    display: flex;
  }

  .header-nav,
  .header-dd {
    display: none;
  }

  .header-logo {
    grid-column: 2;
    width: 104px;
    height: 104px;
    margin-block: -12px;
  }

  .header-logo img {
    width: 78px;
    height: 78px;
  }

  .practice-cta {
    min-height: 48px;
    padding-inline: 18px;
    font-size: 0.78rem;
  }

  .header-side--left {
    grid-column: 1;
    grid-row: 1;
  }

  .header-side--right {
    grid-column: 3;
    grid-row: 1;
  }

  .hero {
    padding-top: 150px;
  }
}

@media (max-width: 680px) {
  html {
    scroll-padding-top: 100px;
  }

  .site-header {
    padding: 10px 8px 0;
  }

  .floating-header {
    min-height: 72px;
    grid-template-columns: 1fr 72px 1fr;
    padding-inline: 10px;
    border-radius: 23px;
  }

  .header-logo {
    width: 82px;
    height: 82px;
    margin-block: -7px;
  }

  .header-logo img {
    width: 62px;
    height: 62px;
  }

  .practice-cta {
    min-height: 42px;
    padding: 8px 9px;
    font-size: 0.63rem;
    letter-spacing: 0;
  }

  /* Left side has no toggle sibling, so it can take the full row. */
  .practice-cta--left {
    width: 100%;
  }

  /* Right side shares its row with the menu toggle — flex instead of a
     fixed width so the two never overlap. */
  .practice-cta--right {
    flex: 1 1 auto;
    min-width: 0;
  }

  .practice-cta--left::before {
    margin-right: 4px;
  }

  .practice-cta--right::after {
    margin-left: 4px;
  }

  .hero {
    padding-top: 126px;
  }
}

@media (max-width: 430px) {
  .floating-header {
    grid-template-columns: 1fr 64px 1fr;
  }

  .header-logo {
    width: 74px;
    height: 74px;
  }

  .header-logo img {
    width: 56px;
    height: 56px;
  }

  .practice-cta {
    font-size: 0.56rem;
    padding-inline: 5px;
  }
}

/* =========================================================
   CONSISTENT SECTION SYSTEM
   Unified sizing, spacing, widths and vertical rhythm
   ========================================================= */
:root {
  --section-space-desktop: 112px;
  --section-space-tablet: 88px;
  --section-space-mobile: 64px;
  --section-min-desktop: 700px;
  --content-narrow: 760px;
  --content-medium: 960px;
}

/* Every major section follows one spacing system */
main > .section,
main > section.section {
  padding-top: var(--section-space-desktop);
  padding-bottom: var(--section-space-desktop);
}

main > .section:not(.section--navy):not(.section--soft):not(.section--ivory) {
  background: var(--paper);
}

/* Shared content width and internal rhythm */
.section > .container,
.page-hero > .container {
  width: min(calc(100% - 40px), var(--max));
}

.section-kicker {
  margin-bottom: 18px;
}

.section h2,
.page-hero h1 {
  margin-bottom: 28px;
}

.section .lead,
.page-hero .lead {
  margin-bottom: 0;
}

/* Consistent minimum section height on desktop */
@media (min-width: 821px) {
  main > .section {
    min-height: var(--section-min-desktop);
    display: flex;
    align-items: center;
  }

  /* Contacts size to their content instead of the 700px section floor —
     with one or two cards the default left a large empty band. The element
     qualifier is needed to match `main > section.section`, which otherwise
     outranks this and keeps the full 112px padding. */
  main > section.section--compact {
    min-height: 0;
    padding-top: 80px;
    padding-bottom: 80px;
  }

  main > .section > .container {
    width: min(calc(100% - 40px), var(--max));
  }

  .page-hero {
    min-height: 560px;
    display: flex;
    align-items: center;
  }

  /* Shorter content (kicker + heading + one paragraph) doesn't need the
     full section min-height — forcing it left a large empty gap before
     the next section. */
  #apie-mus {
    min-height: 420px;
  }
}

/* Fill the full viewport height below the fixed header on desktop */
.hero {
  min-height: 100svh;
  padding-top: 190px;
  padding-bottom: 110px;
}

/* Page hero (subpages) clears the fixed floating header the same way .hero does */
.page-hero {
  padding-top: 190px;
  padding-bottom: 84px;
}

/* Shared two-column ratios */
.intro-grid,
.memorial-grid,
.contact-grid,
.page-hero-grid,
.profile {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(56px, 7vw, 100px);
}

/* Contacts get an uneven split: an even one left the card column too narrow
   for the email tile, breaking addresses mid-word (…gmail.co / m). */
.contact-grid {
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
}

/* Practice and service card systems */
.practice-grid,
.services-grid {
  align-items: stretch;
}

.practice-card {
  min-height: 430px;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.practice-card h3 {
  min-height: 2.2em;
}

.practice-card p {
  margin-bottom: 54px;
}

.practice-card::after {
  margin-top: auto;
}

.service-card {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.service-card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 20px;
  padding: clamp(20px, 3vw, 28px);
}

.service-card-content h3 {
  min-height: 2.2em;
  font-size: 1.2rem;
}

.service-card-content p {
  margin-bottom: 0;
}

/* Lawyer rows remain equal */
.team-list {
  grid-auto-rows: 1fr;
}

.lawyer-row {
  min-height: 520px;
  height: 100%;
}

.lawyer-photo {
  min-height: 520px;
}

.lawyer-copy {
  min-height: 520px;
}

/* Equal profile sections on internal pages */
.profile {
  min-height: 660px;
  /* Top-aligned rather than centred: profiles with a long bio and a practice
     list run far taller than the photo, and centring left a large dead gap
     above the portrait. */
  align-items: start;
}

.profile + .profile {
  margin-top: var(--section-space-desktop);
  padding-top: var(--section-space-desktop);
}

.profile-photo img {
  min-height: 620px;
}

/* Consistent memorial proportions */
.memorial-image img {
  min-height: 420px;
}

/* Contact block. The old 420px floor existed to stop a short list of links
   leaving a thin band; the cards now supply their own height, so forcing it
   only padded the section out. */
.contact-grid {
  min-height: 0;
}

/* Footer spacing */
.site-footer {
  padding-top: 42px;
  padding-bottom: 42px;
}

/* Tablet */
@media (max-width: 820px) {
  main > .section,
  main > section.section {
    padding-top: var(--section-space-tablet);
    padding-bottom: var(--section-space-tablet);
  }

  .hero {
    min-height: auto;
    padding-top: 150px;
    padding-bottom: 88px;
  }

  .page-hero {
    padding-top: 150px;
    padding-bottom: 88px;
  }

  .intro-grid,
  .memorial-grid,
  .contact-grid,
  .page-hero-grid,
  .profile {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .practice-card,
  .service-card {
    min-height: 360px;
  }

  .lawyer-row,
  .lawyer-photo,
  .lawyer-copy {
    min-height: 0;
  }

  .lawyer-photo {
    aspect-ratio: 4 / 5;
  }

  .profile {
    min-height: 0;
  }

  .profile + .profile {
    margin-top: var(--section-space-tablet);
    padding-top: var(--section-space-tablet);
  }

  .profile-photo img {
    min-height: 0;
  }

  .memorial-image img {
    min-height: 0;
  }

  .contact-grid {
    min-height: 0;
  }
}

/* Mobile */
@media (max-width: 560px) {
  main > .section,
  main > section.section {
    padding-top: var(--section-space-mobile);
    padding-bottom: var(--section-space-mobile);
  }

  /* Too few words per line at phone width for justification to look like
     anything but stretched gaps, so the tribute falls back to ragged-right. */
  .memorial-body p {
    text-align: left;
  }

  /* Three milestone columns are unreadable at phone width — stack them and
     put the year beside its text so each row stays compact. */
  .memorial-milestones {
    grid-template-columns: 1fr;
    gap: 26px;
  }
  .memorial-milestones li {
    flex-direction: row;
    align-items: baseline;
    gap: 16px;
  }
  .memorial-milestone-year {
    flex-shrink: 0;
    min-width: 3.5ch;
  }

  .hero {
    padding-top: 126px;
    padding-bottom: 72px;
  }

  /* Purely decorative and redundant with the header's own logo — on a
     single-column mobile layout it stacked below the hero text as an
     oversized, out-of-place emblem. */
  .page-hero-logo {
    display: none;
  }

  .page-hero {
    padding-top: 126px;
    padding-bottom: 64px;
  }

  .section > .container,
  .page-hero > .container {
    width: min(calc(100% - 28px), var(--max));
  }

  .practice-card,
  .service-card {
    min-height: 330px;
  }

  .profile + .profile {
    margin-top: var(--section-space-mobile);
    padding-top: var(--section-space-mobile);
  }

  .site-footer {
    padding-top: 34px;
    padding-bottom: 34px;
  }
}

/* =========================================================
   LAWYERS SECTION AND LAWYERS PAGE
   ========================================================= */
.lawyers-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin-top: 54px;
}

.lawyer-card {
  height: 100%;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  background: var(--paper);
}

.lawyer-card-photo {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--blue-100);
}

.lawyer-card-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.lawyer-card-body {
  flex: 1;
  min-height: 430px;
  display: flex;
  flex-direction: column;
  padding: 34px;
}

.lawyer-card-body h3 {
  min-height: 2.15em;
  margin-bottom: 18px;
}

.lawyer-card-description {
  min-height: 124px;
  margin: 0 0 22px;
  color: var(--muted);
}

.lawyer-card .specialties {
  min-height: 102px;
  align-content: flex-start;
}

.lawyer-card-action {
  margin-top: auto;
  padding-top: 26px;
}

.lawyer-detail-grid {
  display: grid;
  grid-template-columns: minmax(300px, 0.72fr) minmax(0, 1.28fr);
  gap: clamp(48px, 7vw, 100px);
  align-items: center;
}

.lawyer-detail-grid + .lawyer-detail-grid {
  margin-top: var(--section-space-desktop);
  padding-top: var(--section-space-desktop);
  border-top: 1px solid var(--line);
}

.lawyer-detail-photo {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--blue-100);
}

.lawyer-detail-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.lawyer-detail-content .bio {
  max-width: 720px;
}

@media (max-width: 960px) {
  .lawyers-grid {
    grid-template-columns: 1fr;
  }

  .lawyer-card {
    display: grid;
    grid-template-columns: minmax(250px, 0.75fr) minmax(0, 1.25fr);
  }

  .lawyer-card-photo {
    aspect-ratio: auto;
    min-height: 520px;
  }

  .lawyer-card-body {
    min-height: 520px;
  }
}

@media (max-width: 820px) {
  .lawyer-detail-grid {
    grid-template-columns: 1fr;
    gap: 42px;
  }

  .lawyer-detail-grid + .lawyer-detail-grid {
    margin-top: var(--section-space-tablet);
    padding-top: var(--section-space-tablet);
  }

  .lawyer-detail-photo {
    max-width: 560px;
  }
}

@media (max-width: 620px) {
  .lawyer-card {
    display: flex;
  }

  .lawyer-card-photo {
    aspect-ratio: 4 / 5;
    min-height: 0;
  }

  .lawyer-card-body {
    min-height: 420px;
    padding: 28px 24px;
  }

  .lawyer-card-description,
  .lawyer-card .specialties {
    min-height: 0;
  }
}

/* =========================================================
   SERVICES CAROUSEL + COMPACT LAWYER CARDS
   ========================================================= */
.services-carousel {
  position: relative;
  margin-top: 52px;
}

.services-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(280px, 38%);
  gap: 18px;
  overflow-x: auto;
  scroll-snap-type: none;
  scroll-behavior: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 10px;
}

.services-track::-webkit-scrollbar {
  display: none;
}

.services-track .service-card {
  min-height: 360px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  transition:
    transform 0.35s ease,
    box-shadow 0.35s ease,
    border-color 0.35s ease,
    background 0.35s ease;
}

.services-track .service-card:hover {
  transform: translateY(-8px);
  border-color: rgba(255, 255, 255, 0.4);
  box-shadow: 0 24px 50px rgba(6, 14, 22, 0.35);
}

.service-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}

.service-card-person {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.service-card-avatar {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: cover;
  object-position: top center;
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.service-card-person-name {
  margin: 0;
  color: var(--white);
  font-family: var(--font-serif-header);
  font-size: 0.82rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.service-card-person-role {
  margin: 0;
  color: #9fb3c2;
  font-family: var(--font-serif-header);
  font-size: 0.74rem;
}

.service-card-arrow {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: var(--white);
  font-size: 0.95rem;
  transition:
    transform 0.3s ease,
    background 0.3s ease,
    color 0.3s ease;
}

.services-track .service-card:hover .service-card-arrow {
  background: var(--white);
  color: var(--navy);
  transform: rotate(-45deg);
}

.carousel-controls {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 24px;
}

.carousel-btn {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.42);
  border-radius: 50%;
  color: #fff;
  background: transparent;
  font-size: 1.15rem;
  line-height: 1;
  padding: 0;
  cursor: pointer;
  transition:
    background 0.18s ease,
    color 0.18s ease,
    transform 0.18s ease;
}

.carousel-btn:hover,
.carousel-btn:focus-visible {
  color: var(--navy-900);
  background: #fff;
  transform: translateY(-2px);
}

/* Landing-page lawyer cards: compact, balanced, no biography text.
   A 4/5 portrait plus a 330px body floor made each card ~890px tall — taller
   than most laptop viewports. The photo is squared off and the height floors
   dropped, since the grid already stretches every card to the tallest in the
   row and `margin-top: auto` keeps the profile links aligned. */
/* Guarded so it does not override the 4/5 portrait the ≤620px rule sets for
   the stacked mobile card — this block sits later in the file and would
   otherwise win there too. */
@media (min-width: 621px) {
  .lawyer-card-photo {
    aspect-ratio: 1 / 1;
  }
}

.lawyer-card-body {
  min-height: 0;
  padding: 26px;
}

.lawyer-card-body h3 {
  min-height: auto;
  margin-bottom: 16px;
}

.lawyer-card-description {
  display: none;
}

.lawyer-card .specialties {
  min-height: 0;
  margin-top: 6px;
}

.lawyer-card-action {
  padding-top: 18px;
}

@media (max-width: 1100px) {
  .services-track {
    grid-auto-columns: minmax(300px, 52%);
  }
}

@media (max-width: 760px) {
  .services-track {
    grid-auto-columns: 84%;
  }

  .lawyer-card-body {
    min-height: 300px;
  }
}

@media (max-width: 520px) {
  .services-track {
    grid-auto-columns: 92%;
  }

  .services-track .service-card {
    min-height: 330px;
  }

  .carousel-controls {
    justify-content: flex-start;
  }
}