/* ===================================
   CSS CUSTOM PROPERTIES (VARIABLES)
   =================================== */

:root {
  /* Colors */
  --color-black: #000;
  --color-white: #fff;
  --color-blue: #001e34;        /* base blue (page background) */
  --color-blue-dark: #07142c;   /* deep blue (panels, sub-headings) */
  --color-blue-deep: #050827;   /* near-black blue — blog cards */
  --color-aqua: #0096ff;        /* accent / links */
  --color-cyan: #35fdff;        /* bright cyan — victory dollar amounts */
  --color-orange: #ff8b2d;      /* CTA accent */
  --color-orange-light: #ffb642;/* CTA gradient top */
  --color-orange-dark: #ff7200; /* CTA gradient bottom */

  /* Fonts */
  --font-heading: 'Oswald', sans-serif;
  --font-body: 'Open Sans Condensed', sans-serif;

  /* Spacing (based on 0.25rem units) */
  --spacing-unit: 0.25rem;

  /* Font sizes */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.25rem;
  --text-xl: 1.5rem;
  --text-2xl: 1.75rem;
  --text-3xl: 2rem;
  --text-4xl: 2.5rem;
  --text-5xl: 3.5rem;
  --text-7xl: 5rem;

  /* Font weights */
  --font-light: 300;
  --font-regular: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;

  /* Line heights */
  --leading-tight: 1.25;
  --leading-snug: 1.375;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;

  /* media width */
  --step-min: 48rem;     /* ~768px  small / mobile */
  --step-med: 64rem;     /* ~1024px tablet */
  --step-max: 80rem;     /* ~1280px desktop */
  --step-xl: 93.75rem;   /* ~1500px wide desktop — inline horizontal nav */
}

/* ===================================
   RESET & BASE STYLES
   =================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  -moz-tab-size: 4;
  tab-size: 4;
  overflow-x: hidden; /* clip the off-canvas menu parked off-screen */
}

body {
  background: var(--color-blue);
  color: var(--color-white);
  font-family: var(--font-body);
  line-height: var(--leading-normal);
  overflow-x: hidden; /* contain the off-canvas menu parked off-screen */
}

/* Page wrapper: a positioning context (and future containing block) for
   absolutely-positioned children, present on every page as a template
   baseline. Keep transform/filter/will-change OFF it — those would turn
   it into the containing block for the fixed header/popout/menu too. */
.wrapper {
  position: relative;
}

/* Interior pages carry no hero, so the first content would slide under the
   fixed (~100px) white header — offset it. Home is excluded (hero sits behind). */
body:not(.page-main-home-page):not(.page-pagina-de-inicio) .wrapper {
  padding-top: 6.5rem;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0; /* override normalize's h1 margin (beats the * reset on specificity) */
  font-family: var(--font-heading);
  font-weight: var(--font-light);
  text-transform: uppercase;
}

a {
  color: var(--color-aqua);
  text-decoration: none;
}

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

ul {
  list-style: none;
}

svg {
  fill: currentColor;
}

/* ===================================
   HEADER / NAVIGATION
   =================================== */

header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  /* Above the menu backdrop (1050) so the off-canvas nav.full — which is
     trapped in this header's stacking context — paints over it and stays
     clickable when open. */
  z-index: 1100;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: calc(var(--spacing-unit) * 2);
  background: var(--color-white);
  color: var(--color-blue);
  box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.5);
  transition: background 0.2s linear, box-shadow 0.2s linear;
}

/* --- Logo (sprite: white version stacked over dark version) ---
   Default / interior pages: dark logo on the solid white bar. */
header > a.logo {
  position: relative;
  flex: 0 0 auto;
  width: 214px;
  aspect-ratio: 330 / 105; /* one half of the stacked sprite */
  margin: calc(var(--spacing-unit) * 2);
  overflow: hidden;
  transition: width 0.2s linear;
}

header > a.logo img {
  width: 100%;
  height: auto;
  transform: translateY(-50%); /* default/interior: dark half */
  transition: transform 0.2s linear;
}

/* --- Home page: transparent bar floating over the hero ---
   "Home" = the English home (.page-main-home-page) and the Spanish
   home (.page-pagina-de-inicio). */
.page-main-home-page header,
.page-pagina-de-inicio header {
  background: transparent;
  color: var(--color-white);
  box-shadow: none;
}

.page-main-home-page header > a.logo,
.page-pagina-de-inicio header > a.logo {
  width: 330px;
}

.page-main-home-page header > a.logo img,
.page-pagina-de-inicio header > a.logo img {
  transform: translateY(0); /* white half */
}

/* Home page, scrolled past the hero: solid bar (same as interior) */
.page-main-home-page header.scrolled,
.page-pagina-de-inicio header.scrolled {
  background: var(--color-white);
  color: var(--color-blue);
  box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.5);
}

.page-main-home-page header.scrolled > a.logo,
.page-pagina-de-inicio header.scrolled > a.logo {
  width: 214px;
}

.page-main-home-page header.scrolled > a.logo img,
.page-pagina-de-inicio header.scrolled > a.logo img {
  transform: translateY(-50%); /* dark half */
}

/* --- Right-hand cluster --- */
.header-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: calc(var(--spacing-unit) * 0.5);
  margin: calc(var(--spacing-unit) * 2);
  text-align: right;
}

.language-list {
  display: flex;
  gap: calc(var(--spacing-unit) * 3);
}

.language-list a {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--spacing-unit));
  color: inherit;
  font-size: var(--text-sm);
}

.language-list img {
  display: inline-block;
  width: auto;
  height: 16px;
}

/* --- Free consultation + phone --- */
.cta {
  line-height: var(--leading-tight);
}

.cta .consultation {
  display: block;
  color: var(--color-aqua); /* default / interior + home-scrolled */
  font-weight: var(--font-semibold);
  font-size: 1.375rem; /* 22px */
  line-height: 1.1;
  letter-spacing: 1px;
}

.page-main-home-page header .cta .consultation,
.page-pagina-de-inicio header .cta .consultation {
  color: var(--color-orange);
}

.page-main-home-page header.scrolled .cta .consultation,
.page-pagina-de-inicio header.scrolled .cta .consultation {
  color: var(--color-aqua);
}

.cta .phone {
  display: block;
  color: inherit;
  font-size: 2.25rem; /* 36px */
  line-height: 0.85;
}

/* Hamburger + CTA cluster grouped so the toggle centers on the
   constant-height cluster, not the header (whose height changes when the
   logo shrinks on scroll — which would make the toggle jump vertically). */
.header-end {
  display: flex;
  align-items: center;
  margin-left: auto; /* push the toggle + CTA cluster to the right edge */
}

/* --- Hamburger toggle: shown at mid widths (tablet → just under wide
   desktop); opens the off-canvas nav.full. Hidden on phones (the
   CALL/CONTACT/MENU bar takes over) and at wide desktop (inline nav). --- */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  margin-right: calc(var(--spacing-unit) * 5); /* breathing room before the CTA */
  width: 34px;
  height: 28px;
  padding: 0;
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
}

.nav-toggle span {
  display: block;
  width: 100%;
  height: 3px;
  background: currentColor;
  border-radius: 2px;
}

/* --- Quick-action bar: CALL / CONTACT / MENU (phone only) --- */
nav.basic {
  display: none;
}

nav.basic ul {
  display: flex;
  justify-content: flex-end;
  gap: calc(var(--spacing-unit) * 2);
}

nav.basic a {
  display: inline-block;
  color: inherit;
  font-weight: var(--font-bold);
  font-size: var(--text-sm);
  letter-spacing: 1px;
  padding: calc(var(--spacing-unit)) calc(var(--spacing-unit) * 2);
  border: 1px solid currentColor;
  border-radius: 4px;
}

nav.basic a:hover {
  background: var(--color-aqua);
  border-color: var(--color-aqua);
  color: var(--color-white);
}

/* --- Off-canvas slide-in menu (nav.full) --- */
nav.full {
  position: fixed;
  top: 0;
  right: 0;
  width: 320px;
  max-width: 85vw;
  height: 100%;
  background: var(--color-blue-dark);
  transform: translateX(100%);
  transition: transform 0.4s ease;
  overflow-y: auto;
  z-index: 1100;
  padding: calc(var(--spacing-unit) * 4) 0;
}

nav.full.open {
  transform: translateX(0);
  box-shadow: -1px 0 5px 0 rgba(0, 0, 0, 0.5);
}

nav.full .close-menu {
  display: block;
  color: var(--color-aqua);
  text-align: right;
  padding: 0 calc(var(--spacing-unit) * 5);
  cursor: pointer;
}

nav.full .close-menu svg {
  display: inline-block;
  height: 1.75rem;
  width: 1.75rem;
}

nav.full > ul {
  text-transform: uppercase;
}

nav.full > ul > li {
  position: relative;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

nav.full > ul > li > a {
  display: flex;
  align-items: center;
  gap: calc(var(--spacing-unit) * 2);
  color: var(--color-white);
  font-weight: var(--font-bold);
  letter-spacing: 1px;
  padding: calc(var(--spacing-unit) * 3) calc(var(--spacing-unit) * 5);
}

nav.full > ul > li > a:hover {
  color: var(--color-aqua);
}

nav.full svg.icon-home {
  height: 1rem;
  width: 1rem;
}

/* Submenu expand/collapse toggle (injected button). Collapsed = hamburger
   (matches the live site's aqua menu icon); expanded = chevron-up. */
nav.full .submenu-toggle {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  background: transparent;
  border: none;
  border-left: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--color-aqua);
  cursor: pointer;
}

/* Collapsed: three bars (center bar + two via box-shadow) */
nav.full .submenu-toggle::after {
  content: "";
  width: 20px;
  height: 2px;
  background: currentColor;
  box-shadow: 0 -6px 0 currentColor, 0 6px 0 currentColor;
}

/* Expanded: chevron pointing up */
nav.full li.expanded > .submenu-toggle::after {
  width: 9px;
  height: 9px;
  margin-top: 3px;
  background: none;
  box-shadow: none;
  border: solid currentColor;
  border-width: 2px 2px 0 0;
  transform: rotate(-45deg);
}

/* Nested submenus collapsed by default */
nav.full ul ul {
  display: none;
  background: var(--color-blue);
  text-transform: none;
}

nav.full li.expanded > ul {
  display: block;
}

nav.full ul ul li a {
  display: block;
  color: var(--color-white);
  font-size: var(--text-base);
  font-weight: var(--font-medium);
  padding: calc(var(--spacing-unit) * 1.5) calc(var(--spacing-unit) * 6);
  border-left: 4px solid transparent;
}

nav.full ul ul li a:hover {
  border-left-color: var(--color-aqua);
}

nav.full ul ul li.title {
  color: var(--color-aqua);
  font-weight: var(--font-bold);
  padding: calc(var(--spacing-unit) * 1.5) calc(var(--spacing-unit) * 5);
  background: var(--color-blue-dark);
}

/* Backdrop shown behind the open menu */
.menu-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0.4s ease;
  z-index: 1050;
}

.menu-backdrop.show {
  opacity: 1;
  visibility: visible;
}

/* Off-canvas slide-in panel — white styling to match the live site.
   Scoped below the wide-desktop breakpoint so the XL inline dropdowns
   (which stay dark) are untouched. Applies to mid + phone. */
@media (max-width: 93.74rem) {
  nav.full {
    background: var(--color-white);
  }

  nav.full > ul > li {
    border-top: none;
  }

  /* Top-level items: dark-blue label with an inset aqua underline */
  nav.full > ul > li > a {
    color: var(--color-blue);
    margin: 0 calc(var(--spacing-unit) * 7.5);
    padding: calc(var(--spacing-unit) * 2.5) 0;
    border-bottom: 1px solid var(--color-aqua);
  }

  nav.full > ul > li > a:hover {
    color: var(--color-aqua);
  }

  nav.full .submenu-toggle {
    border-left: none;
    color: var(--color-aqua);
  }

  /* Expanded sub-menu: aqua links on white, white-on-dark title bands */
  nav.full ul ul {
    background: var(--color-white);
    text-transform: uppercase;
    letter-spacing: 1px;
  }

  nav.full ul ul li a {
    color: var(--color-aqua);
    font-weight: var(--font-bold);
    border-left: none;
  }

  nav.full ul ul li a:hover {
    color: var(--color-blue);
  }

  nav.full ul ul li.title {
    color: var(--color-white);
    background: var(--color-blue);
  }
}

/* Small screens: stacked header — solid white logo row above a
   full-width CALL / CONTACT / MENU bar (matches live mobile). */
@media (max-width: 48rem) {
  header,
  .page-main-home-page header,
  .page-pagina-de-inicio header {
    flex-direction: column;
    align-items: stretch;
    padding: 0;
    background: var(--color-white);
    color: var(--color-blue);
    box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.5);
  }

  header > a.logo,
  .page-main-home-page header > a.logo,
  .page-pagina-de-inicio header > a.logo {
    width: 150px;
    margin: calc(var(--spacing-unit) * 2);
  }

  header > a.logo img,
  .page-main-home-page header > a.logo img,
  .page-pagina-de-inicio header > a.logo img {
    transform: translateY(-50%); /* dark logo on the white bar */
  }

  /* Full-width bar: the grouping wrapper must span the row, not shrink */
  .header-end {
    display: block;
    width: 100%;
    margin: 0;
  }

  .header-right {
    flex-direction: row;
    align-items: stretch;
    width: 100%;
    margin: 0;
    gap: 0;
  }

  /* Drop the language switch and CTA from the mobile bar */
  .language-list,
  .cta {
    display: none;
  }

  nav.basic {
    display: block;
    width: 100%;
  }

  nav.basic ul {
    background: var(--color-aqua);
    justify-content: stretch;
    gap: 0;
  }

  nav.basic li {
    flex: 1 1 0;
  }

  nav.basic a {
    display: block;
    text-align: center;
    color: var(--color-white);
    font-size: var(--text-base);
    border: none;
    border-radius: 0;
    border-left: 1px solid rgba(255, 255, 255, 0.25);
    padding: calc(var(--spacing-unit) * 2.5) 0;
  }

  nav.basic li:first-child a {
    border-left: none;
  }

  nav.basic a:hover {
    background: rgba(0, 0, 0, 0.12);
    border-color: rgba(255, 255, 255, 0.25);
    color: var(--color-white);
  }

  /* Hero clears the taller stacked header */
  .hero {
    padding: 130px calc(var(--spacing-unit) * 3) 60px;
  }
  .hero > h2 {
    letter-spacing: 2px;
  }
  .hero .rotate h3 {
    letter-spacing: 1px;
  }
  .button.large {
    white-space: normal;
    font-size: var(--text-lg);
  }

  /* Slider: single-column panels */
  .three-options {
    padding: calc(var(--spacing-unit) * 6) calc(var(--spacing-unit) * 3) calc(var(--spacing-unit) * 10);
  }
  .option {
    padding: calc(var(--spacing-unit) * 5) calc(var(--spacing-unit) * 3);
  }
  .testimonial-list blockquote {
    width: 100%;
  }
  .home-contact .form {
    width: 100%;
    padding: 0;
  }
}

/* Mid widths (just above phone, below wide desktop): the hamburger sits
   to the left of the FREE CONSULTATION block and opens nav.full. The XL
   block below overrides this to hide the hamburger once the inline nav
   appears. */
@media (min-width: 48.0625rem) {
  .nav-toggle {
    display: flex;
  }
}

/* ---------------------------------------------------------------
   WIDE DESKTOP (>= --step-xl, ~1500px): inline horizontal menu.
   nav.full leaves the off-canvas and sits in the header bar with
   hover dropdowns; the CALL/CONTACT/MENU bar is hidden.
   --------------------------------------------------------------- */
@media (min-width: 93.75rem) {
  header {
    align-items: center;
    flex-wrap: nowrap;
    /* No vertical padding so the nav items (and their rollover) fill the
       full height of the bar, edge to edge — matches the live site. */
    padding-block: 0;
  }

  .nav-toggle,
  nav.basic {
    display: none;
  }

  .header-end {
    order: 2;
  }

  nav.full {
    order: 1;
    position: static;
    transform: none;
    width: auto;
    max-width: none;
    /* Stretch to the full bar height so each item's rollover can fill it */
    align-self: stretch;
    display: flex;
    height: auto;
    padding: 0;
    overflow: visible;
    background: transparent;
    box-shadow: none;
    z-index: auto;
  }

  nav.full .close-menu,
  nav.full .submenu-toggle {
    display: none;
  }

  nav.full > ul {
    display: flex;
    /* stretch so each <li> (and its <a>) is the full height of the bar */
    align-items: stretch;
  }

  nav.full > ul > li {
    position: relative;
    display: flex;
    border-top: none;
  }

  nav.full > ul > li > a {
    position: relative;
    z-index: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    color: inherit;
    font-size: var(--text-base);
    padding: calc(var(--spacing-unit) * 2) calc(var(--spacing-unit) * 2.5);
  }

  /* Black rollover: a dark panel rises from the bottom on hover, with the
     label flipping to white over it (matches the live site). */
  nav.full > ul > li > a::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 0;
    background: var(--color-blue);
    transition: height 0.2s linear;
    z-index: -1;
  }

  nav.full > ul > li:hover > a::before {
    height: 100%;
  }

  nav.full > ul > li:hover > a {
    color: var(--color-white);
  }

  /* HOME item shows only its icon */
  nav.full > ul > li > a > span {
    display: none;
  }

  /* Hover dropdowns */
  nav.full ul ul {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 230px;
    box-shadow: 1px 1px 5px 0 rgba(0, 0, 0, 0.5);
  }

  nav.full > ul > li:hover > ul {
    display: block;
  }

  nav.full ul ul li a {
    white-space: nowrap;
  }
}

/* ===================================
   HERO (home jumbotron)
   =================================== */

.hero {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center; /* group the text block in the vertical middle (live) */
  gap: calc(var(--spacing-unit) * 4);
  text-align: center;
  color: var(--color-white);
  padding: 90px calc(var(--spacing-unit) * 4);
}

/* Background video */
.hero video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

/* Gradient that blends the bottom of the hero into the dark page */
.hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 120px;
  background: linear-gradient(to bottom, rgba(0, 30, 52, 0), var(--color-blue));
  z-index: 1;
}

.hero > h2,
.hero .rotator,
.hero .button {
  position: relative;
  z-index: 2;
  max-width: 100%;
}

/* "LEADING NYC EMPLOYMENT LAWYERS" — bordered top headline */
.hero > h2 {
  font-weight: var(--font-light);
  font-size: clamp(1.75rem, 4vw, 3.125rem);
  line-height: 1.05;
  letter-spacing: 5px;
  border-top: 2px solid var(--color-aqua);
  border-bottom: 2px solid var(--color-aqua);
  padding: calc(var(--spacing-unit)) calc(var(--spacing-unit) * 4);
  text-shadow: 0 0 15px rgba(7, 20, 44, 0.5);
  animation: heroIntro 1s ease both;
}

/* Rotating headline area — the two messages overlap (same grid cell)
   and cross-fade. */
.hero .rotator {
  width: 100%;
  flex: 0 0 auto; /* size to the headline; don't stretch the whole hero */
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  place-items: center;
}

.hero .rotate {
  grid-area: 1 / 1; /* both messages share the cell and overlap */
  width: 100%;
  text-shadow: 0 0 15px rgba(7, 20, 44, 0.6);
}

.hero .rotate h3 {
  display: flex;
  flex-direction: column;
  font-weight: var(--font-light);
  letter-spacing: 2px;
  line-height: 1.05;
}

/* Each line slides up into place, holds, then slides up and off the top
   of the screen — staggered, lower lines travelling farther/faster, so
   they exit at varying speeds (matches the live site). */
.hero .rotate .line-one,
.hero .rotate .line-two,
.hero .rotate .line-three {
  opacity: 0;
  animation-duration: 20s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

.hero .rotate .line-one {
  font-weight: var(--font-bold);
  font-size: clamp(2.5rem, 7.8vw, 6.25rem);
  color: var(--color-aqua);
  animation-name: heroLine1;
}

.hero .rotate .line-two {
  font-size: clamp(1.75rem, 5.5vw, 4.375rem);
  color: var(--color-white);
  animation-name: heroLine2;
}

.hero .rotate .line-three {
  font-size: clamp(1.75rem, 5.5vw, 4.375rem);
  color: var(--color-aqua);
  animation-name: heroLine3;
}

/* Second message runs in the back half of the loop */
.hero .rotate:nth-of-type(2) .line-one,
.hero .rotate:nth-of-type(2) .line-two,
.hero .rotate:nth-of-type(2) .line-three {
  animation-delay: -10s;
}

@keyframes heroLine1 {
  0%        { opacity: 0; transform: translateY(40px); }
  4%        { opacity: 1; transform: translateY(0); }
  44%       { opacity: 1; transform: translateY(0); }
  49%       { opacity: 0; transform: translateY(-60vh); }
  50%, 100% { opacity: 0; transform: translateY(40px); }
}

@keyframes heroLine2 {
  0%        { opacity: 0; transform: translateY(40px); }
  5%        { opacity: 1; transform: translateY(0); }
  45%       { opacity: 1; transform: translateY(0); }
  49%       { opacity: 0; transform: translateY(-75vh); }
  50%, 100% { opacity: 0; transform: translateY(40px); }
}

@keyframes heroLine3 {
  0%        { opacity: 0; transform: translateY(40px); }
  6%        { opacity: 1; transform: translateY(0); }
  46%       { opacity: 1; transform: translateY(0); }
  49%       { opacity: 0; transform: translateY(-90vh); }
  50%, 100% { opacity: 0; transform: translateY(40px); }
}

@keyframes heroIntro {
  from { opacity: 0; transform: translateY(40px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ===================================
   BUTTONS (orange CTA)
   =================================== */

.button {
  display: inline-block;
  font-family: var(--font-heading);
  font-weight: var(--font-bold);
  text-transform: uppercase;
  color: var(--color-white);
  white-space: nowrap;
  background: linear-gradient(to bottom, var(--color-orange-light), var(--color-orange-dark));
  border-bottom: 4px solid var(--color-orange);
  padding: calc(var(--spacing-unit) * 2) calc(var(--spacing-unit) * 5);
}

.button:hover {
  background: linear-gradient(to bottom, var(--color-orange-dark), var(--color-orange-light));
}

.button.large {
  font-size: clamp(1.25rem, 3.1vw, 2.5rem);
  animation: heroIntro 2s ease both;
}

/* Orange "MORE VIDEOS / OUR VICTORIES" pills share the button look */
.slideBtn {
  display: inline-block;
  margin: calc(var(--spacing-unit)) calc(var(--spacing-unit)) 0 0;
  font-family: var(--font-heading);
  font-weight: var(--font-bold);
  font-size: var(--text-lg);
  text-transform: uppercase;
  color: var(--color-white);
  background: linear-gradient(to bottom, var(--color-orange-light), var(--color-orange-dark));
  border-bottom: 4px solid var(--color-orange);
  padding: calc(var(--spacing-unit)) calc(var(--spacing-unit) * 4);
}

.slideBtn:hover {
  background: linear-gradient(to bottom, var(--color-orange-dark), var(--color-orange-light));
}

/* ===================================
   SECTION HEADINGS (reusable main / sub)
   =================================== */

.heading {
  padding: calc(var(--spacing-unit) * 12) calc(var(--spacing-unit) * 4) 0;
  text-align: center;
}

.heading h1 {
  color: var(--color-aqua);
  font-size: clamp(2.25rem, 6vw, 5rem);
  line-height: 0.95;
  letter-spacing: 1px;
}

.heading h2 {
  color: var(--color-white);
  font-weight: var(--font-light);
  font-size: clamp(1.1rem, 3.1vw, 2.5rem);
  line-height: 1.3;
  letter-spacing: clamp(4px, 1.7vw, 21px);
}

/* ===================================
   THREE-OPTIONS SLIDER (testimony / media / consultation)
   =================================== */

.three-options {
  max-width: 1200px;
  margin: 0 auto;
  padding: calc(var(--spacing-unit) * 6) calc(var(--spacing-unit) * 5) calc(var(--spacing-unit) * 16);
}

.slider-display {
  position: relative;
  border: 1px solid var(--color-aqua);
  background: rgba(7, 20, 44, 0.7);
  overflow: hidden;
}

.slider-track {
  display: flex;
  align-items: flex-start;
  transition: transform 0.4s ease;
}

.option {
  flex: 1 0 100%;
  min-width: 100%;
  padding: calc(var(--spacing-unit) * 6) calc(var(--spacing-unit) * 5);
  text-align: center;
}

.option > h2 {
  font-weight: var(--font-light);
}

/* Divider used inside the panels */
.three-options hr {
  width: 100%;
  max-width: 280px;
  margin: calc(var(--spacing-unit) * 4) auto;
  border: none;
  border-top: 1px solid rgba(0, 150, 255, 0.4);
}

/* --- Testimony panel --- */
.option.testimony h2 .line-one {
  display: block;
  color: var(--color-aqua);
  font-size: clamp(1.75rem, 4.5vw, 5rem);
  line-height: 1.05;
}

.option.testimony h2 .line-two {
  display: block;
  color: var(--color-white);
  font-size: clamp(1rem, 2.2vw, 2.5rem);
  letter-spacing: clamp(3px, 1vw, 16px);
}

.testimonial-list {
  position: relative;
  overflow: hidden;
  text-align: center;
  padding-inline: calc(var(--spacing-unit) * 4);
  /* Fixed height — room for the stars + a ~6-line quote + attribution.
     Quotes are top-aligned, so shorter ones simply leave space below and
     the panel never shifts. Bump this if a longer quote needs it. */
  min-height: 19rem;
}

/* Two testimonials sit in fixed left/right lanes and cross-slide: the
   outgoing pair escapes sideways (left one to the left, right one to the
   right) while the incoming pair slides in from the edges. Top-aligned so
   the stars always line up; absolutely positioned so length never shifts
   the (fixed-height) panel. */
.testimonial-list blockquote {
  position: absolute;
  top: calc(var(--spacing-unit) * 10);
  width: 40%;
  min-width: 250px;
  padding-top: 40px; /* clears the star image */
  background: url("../images/fivestars.png") no-repeat center top;
  transform: translateX(-150%); /* parked off-screen until JS classifies */
  transition: transform 0.6s ease;
}

.testimonial-list blockquote.lane-left  { left: 6%; }
.testimonial-list blockquote.lane-right { left: 54%; }

/* Parked / escaping off-screen, each toward its own side (clipped by the
   list's overflow:hidden, so no opacity fade is needed). */
.testimonial-list blockquote.lane-left.off  { transform: translateX(-150%); }
.testimonial-list blockquote.lane-right.off { transform: translateX(150%); }

.testimonial-list blockquote.is-active {
  transform: translateX(0);
}

.testimonial-list cite {
  display: block;
  margin-top: calc(var(--spacing-unit) * 2);
  font-style: italic;
  color: var(--color-aqua);
}

/* Mobile: drop the two-lane slide and the fixed height; stack the active
   pair in normal flow. (After the desktop rules so it wins on source order.) */
@media (max-width: 48rem) {
  .testimonial-list {
    min-height: 0;
    padding-block: calc(var(--spacing-unit) * 8) calc(var(--spacing-unit) * 4);
  }
  .testimonial-list blockquote {
    position: static;
    width: 90%;
    margin: 0 auto;
    transform: none;
    display: none;
  }
  .testimonial-list blockquote.is-active {
    display: block;
  }
}

/* --- Media panel --- */
.media-grid {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--spacing-unit) * 5);
  align-items: flex-start;
  text-align: left;
}

.media-grid .slider-video {
  flex: 1 1 0;
  width: 100%;
  min-width: 260px;
  aspect-ratio: 853 / 480;
  object-fit: cover;
  background: var(--color-black);
}

.media-copy {
  flex: 1 1 0;
  order: -1; /* copy on the left, video on the right (matches live) */
}

.media-copy p {
  margin-bottom: calc(var(--spacing-unit) * 3);
}

/* --- Contact forms (shared: consultation panel, bottom contact, popout) --- */
.contact-form {
  text-align: left;
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  margin-bottom: calc(var(--spacing-unit) * 2.5);
  padding: calc(var(--spacing-unit) * 2.5);
  font-family: var(--font-body);
  font-size: 1.125rem; /* 18px, matches live */
  color: var(--color-white);
  background: rgba(2, 84, 144, 0.6);
  border: 1px solid var(--color-aqua);
}

.contact-form ::placeholder {
  color: rgba(255, 255, 255, 0.7);
}

.contact-form textarea {
  min-height: 8.75rem; /* 140px, matches live */
  resize: vertical;
}

.contact-form input[type="checkbox"] {
  width: auto;
  margin: 0 calc(var(--spacing-unit) * 2) 0 0;
  border: none;
  vertical-align: middle;
}

.contact-form .acceptDisclaimer {
  font-size: var(--text-sm);
}

.contact-form p {
  font-size: var(--text-xs);
  margin-bottom: calc(var(--spacing-unit) * 2);
  color: rgba(255, 255, 255, 0.75);
}

.contact-form input[type="submit"] {
  width: 100%;
  margin-top: calc(var(--spacing-unit) * 3);
  font-family: var(--font-heading);
  font-weight: var(--font-bold);
  text-transform: uppercase;
  color: var(--color-white);
  background: linear-gradient(to bottom, var(--color-orange-light), var(--color-orange-dark));
  border: none;
  border-bottom: 4px solid var(--color-orange);
  padding: calc(var(--spacing-unit) * 2) calc(var(--spacing-unit) * 5);
  cursor: pointer;
}

.contact-form input[type="submit"]:hover {
  background: linear-gradient(to bottom, var(--color-orange-dark), var(--color-orange-light));
}

/* Validation messages hidden until JS flags an error */
.contact-form span[class$="-missing"] {
  display: none;
  color: var(--color-orange);
  font-size: var(--text-sm);
}

.contact-form span[class$="-missing"].show {
  display: block;
}

/* Consultation panel: two-column layout */
.home-contact {
  display: flex;
  flex-wrap: wrap;
}

.home-contact .form {
  width: 50%;
  padding: 0 calc(var(--spacing-unit) * 3);
}

.mail-message-area {
  display: none;
  margin-top: calc(var(--spacing-unit) * 4);
  text-align: center;
  color: var(--color-aqua);
}

.mail-message-area.show {
  display: block;
}

/* --- Slider switch buttons --- */
.slider-buttons {
  display: flex;
}

.slider-buttons li {
  flex: 1 1 0;
  text-align: center;
}

.slider-buttons li + li button {
  border-left: 1px solid var(--color-aqua);
}

.slider-buttons button {
  width: 100%;
  height: 100%;
  font-family: var(--font-body);
  font-size: clamp(0.95rem, 1.6vw, 1.5rem);
  text-transform: uppercase;
  color: var(--color-aqua);
  background: var(--color-blue);
  border: none;
  border-top: 1px solid var(--color-aqua); /* per-button so the active tab can break it */
  padding: calc(var(--spacing-unit) * 2.5) calc(var(--spacing-unit));
  cursor: pointer;
  transition: color 0.2s linear, background 0.2s linear;
}

.slider-buttons button:hover,
.slider-buttons button.active {
  color: var(--color-white);
  background: transparent;
}

/* Active tab merges into the panel above (top line removed) */
.slider-buttons button.active {
  border-top-color: transparent;
}

/* ===================================
   AWARDS & SETTLEMENTS (victory carousel)
   =================================== */

.awards-settlements {
  border-top: 1px solid var(--color-aqua);
  padding: calc(var(--spacing-unit) * 10) 0 calc(var(--spacing-unit) * 12);
  text-align: center;
}

.awards-settlements > h2 .line-one {
  display: block;
  color: var(--color-aqua);
  font-size: clamp(1.75rem, 4.5vw, 5rem);
  line-height: 1.05;
}

.awards-settlements > h2 .line-two {
  display: block;
  color: var(--color-white);
  font-weight: var(--font-light);
  font-size: clamp(1rem, 2.2vw, 2.5rem);
  letter-spacing: clamp(3px, 1vw, 21px);
}

.awards-settlements hr {
  width: 100%;
  max-width: 280px;
  margin: calc(var(--spacing-unit) * 4) auto 0;
  border: none;
  border-top: 1px solid rgba(0, 150, 255, 0.4);
}

/* Wrapper holds the arrows in the side gutters, outside the clipped window */
.award-carousel {
  position: relative;
  width: 90%;
  margin: calc(var(--spacing-unit) * 6) auto 0;
}

.award-window {
  margin: 0 3.5rem; /* gutters for the arrows */
  overflow: hidden;
}

.award-track {
  display: flex;
  transition: transform 0.4s ease;
}

.victory-container {
  text-align: center;
  padding: calc(var(--spacing-unit) * 2) calc(var(--spacing-unit) * 5);
}

/* In the homepage ticker the items are flex children of .award-track and
   sit on a dark band; the descriptive h3 is hidden (the dollar carries it). */
.award-track .victory-container {
  flex: 0 0 20%; /* 5 across on wide screens */
  border-left: 1px solid rgba(0, 150, 255, 0.2);
}

.award-track .victory-container:first-child {
  border-left-color: rgba(0, 150, 255, 0.5);
}

.award-track .victory-container > h3 {
  display: none;
}

.victory-container > h2 { /* dollar amount */
  color: var(--color-cyan);
  font-weight: var(--font-light);
  font-size: clamp(1.25rem, 2vw, 1.875rem);
  white-space: nowrap;
}

.victory-container > h4 { /* byline */
  color: var(--color-white);
  font-weight: var(--font-regular);
  font-size: var(--text-base);
  text-transform: none;
  margin-top: calc(var(--spacing-unit) * 3);
}

.victory-container > p { /* detailed description */
  color: var(--color-white);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  margin-top: calc(var(--spacing-unit) * 3);
}

/* Carousel arrows */
.asLeft,
.asRight {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  background: none;
  border: none;
  color: var(--color-aqua);
  cursor: pointer;
  padding: 0;
}

.asLeft { left: 0; }
.asRight { right: 0; }

.asLeft svg,
.asRight svg {
  height: 2.75rem;
  width: auto;
  display: block;
}

.asLeft:hover:not(:disabled),
.asRight:hover:not(:disabled) {
  color: var(--color-white);
}

.asLeft:disabled,
.asRight:disabled {
  opacity: 0.25;
  cursor: default;
}

@media (max-width: 80rem) {
  .award-track .victory-container { flex-basis: 25%; } /* 4 across */
}

@media (max-width: 64rem) {
  .award-track .victory-container { flex-basis: 33.333%; } /* 3 across */
}

@media (max-width: 48rem) {
  .award-track .victory-container { flex-basis: 50%; } /* 2 across */
}

@media (max-width: 30rem) {
  .award-track .victory-container { flex-basis: 100%; } /* 1 across */
}

/* ===================================
   VICTORIES & SETTLEMENTS (standalone page)
   =================================== */

/* Each victory is a full-width row (max 1000px, centred): a blue box holding
   the dollar amount on the left, with the title / byline / description on the
   right — mirrors the live site. Markup is flat (h2 = amount, h3 = title,
   h4 = byline, p = description), so a 2-column grid does the splitting. */

/* Constrain the article so the intro heading + lead paragraph don't span the
   full page width; the victory rows already centre themselves within it. The
   base h1 (uppercase, light) and paragraph styles then read fine as-is. */
.page-victories-and-settlements article,
.page-victorias-y-acuerdos article {
  max-width: 1000px;
  margin: 0 auto;
  padding: calc(var(--spacing-unit) * 10) calc(var(--spacing-unit) * 5)
    calc(var(--spacing-unit) * 16);
  box-sizing: border-box;
}

.page-victories-and-settlements .victory-container,
.page-victorias-y-acuerdos .victory-container {
  display: grid;
  grid-template-columns: 30% 1fr;
  width: 100%;
  max-width: 1000px;
  margin: 0 auto calc(var(--spacing-unit) * 10);
  padding: 0;
  border: 1px solid var(--color-aqua);
  background: rgba(7, 20, 44, 0.7);
  text-align: left;
  box-sizing: border-box;
}

/* dollar amount = blue box, top-left */
.page-victories-and-settlements .victory-container > h2,
.page-victorias-y-acuerdos .victory-container > h2 {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: calc(var(--spacing-unit) * 5) 0;
  background: var(--color-aqua);
  color: var(--color-white);
  font-weight: var(--font-bold, 700);
  font-size: clamp(1.5rem, 2.6vw, 2.25rem);
  white-space: nowrap;
}

/* right-hand content column */
.page-victories-and-settlements .victory-container > h3,
.page-victories-and-settlements .victory-container > h4,
.page-victories-and-settlements .victory-container > p,
.page-victorias-y-acuerdos .victory-container > h3,
.page-victorias-y-acuerdos .victory-container > h4,
.page-victorias-y-acuerdos .victory-container > p {
  grid-column: 2;
  margin-left: calc(var(--spacing-unit) * 5);
  margin-right: calc(var(--spacing-unit) * 5);
}

/* title — blue left accent */
.page-victories-and-settlements .victory-container > h3,
.page-victorias-y-acuerdos .victory-container > h3 {
  margin-top: calc(var(--spacing-unit) * 5);
  padding-left: calc(var(--spacing-unit) * 5);
  border-left: 4px solid var(--color-aqua);
  color: var(--color-white);
  font-weight: var(--font-light);
  font-size: var(--text-lg);
  text-transform: none;
}

/* byline — aqua, underlined */
.page-victories-and-settlements .victory-container > h4,
.page-victorias-y-acuerdos .victory-container > h4 {
  margin-top: calc(var(--spacing-unit) * 3);
  padding-bottom: calc(var(--spacing-unit) * 2.5);
  border-bottom: 1px solid var(--color-aqua);
  color: var(--color-aqua);
  font-weight: var(--font-regular);
  font-size: 1.125rem;
  text-transform: none;
}

/* description */
.page-victories-and-settlements .victory-container > p,
.page-victorias-y-acuerdos .victory-container > p {
  margin-top: calc(var(--spacing-unit) * 4);
  margin-bottom: calc(var(--spacing-unit) * 5);
  color: var(--color-white);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
}

/* stack on narrow screens: blue amount bar on top, content below */
@media (max-width: 40rem) {
  .page-victories-and-settlements .victory-container,
  .page-victorias-y-acuerdos .victory-container {
    grid-template-columns: 1fr;
  }
  .page-victories-and-settlements .victory-container > h2,
  .page-victories-and-settlements .victory-container > h3,
  .page-victories-and-settlements .victory-container > h4,
  .page-victories-and-settlements .victory-container > p,
  .page-victorias-y-acuerdos .victory-container > h2,
  .page-victorias-y-acuerdos .victory-container > h3,
  .page-victorias-y-acuerdos .victory-container > h4,
  .page-victorias-y-acuerdos .victory-container > p {
    grid-column: 1;
  }
}

/* ===================================
   SCROLL-REVEAL (reusable, JS-added)
   =================================== */

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal.in-view {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ===================================
   KNOW YOUR LEGAL RIGHTS (card grid)
   =================================== */

.legal-rights-section {
  max-width: 1280px;
  margin: 0 auto;
  padding: calc(var(--spacing-unit) * 12) calc(var(--spacing-unit) * 5);
  text-align: center;
}

.legal-rights-section > h2 {
  color: var(--color-aqua);
  font-size: clamp(2rem, 5vw, 5rem);
  line-height: 1.05;
}

.legal-rights-section hr {
  width: 100%;
  max-width: 280px;
  margin: calc(var(--spacing-unit) * 4) auto calc(var(--spacing-unit) * 10);
  border: none;
  border-top: 1px solid rgba(0, 150, 255, 0.4);
}

/* -----------------------------------------------------------------
   Investigation DETAIL pages (truck-drivers, retail-industry, …).
   They reuse .legal-rights-section as a text wrapper, whereas the
   index uses it for the tile grid — so restyle the text content here:
   left-aligned, question "bar" headings, and a multi-column company
   list (mirrors the live .team-bio / .sub-bar-heading / .list-wrap).
   ----------------------------------------------------------------- */
body.page-investigations:not(#investigations---index) .legal-rights-section,
body.page-investigaciones:not(#espanol---investigaciones---index) .legal-rights-section {
  max-width: 1200px;
  text-align: left;
}

/* page title — aqua left-accent bar (live .bar-heading.bio) */
body.page-investigations:not(#investigations---index) .legal-rights-section > h1,
body.page-investigaciones:not(#espanol---investigaciones---index) .legal-rights-section > h1 {
  margin: 0 0 calc(var(--spacing-unit) * 6);
  padding: calc(var(--spacing-unit) * 2) calc(var(--spacing-unit) * 4);
  border-left: 5px solid var(--color-aqua);
  background: var(--color-blue-dark);
  color: var(--color-white);
  text-transform: uppercase;
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  line-height: 1.2;
}

/* question sub-headings — compact aqua bar (live .sub-bar-heading) */
body.page-investigations:not(#investigations---index) .legal-rights-section > h2,
body.page-investigaciones:not(#espanol---investigaciones---index) .legal-rights-section > h2 {
  margin: calc(var(--spacing-unit) * 8) 0 calc(var(--spacing-unit) * 4);
  padding: var(--spacing-unit) calc(var(--spacing-unit) * 3);
  border-left: 5px solid var(--color-aqua);
  color: var(--color-white);
  text-transform: uppercase;
  font-size: var(--text-lg);
  line-height: 1.3;
}

body.page-investigations:not(#investigations---index) .legal-rights-section > p,
body.page-investigaciones:not(#espanol---investigaciones---index) .legal-rights-section > p {
  margin: 0 0 calc(var(--spacing-unit) * 4);
  font-size: 1.125rem;
  line-height: var(--leading-normal);
}

/* lists: no bullets by default (live .no-style) */
body.page-investigations:not(#investigations---index) .legal-rights-section ul,
body.page-investigaciones:not(#espanol---investigaciones---index) .legal-rights-section ul {
  margin: 0 0 calc(var(--spacing-unit) * 6);
  padding: 0;
  list-style: none;
}

body.page-investigations:not(#investigations---index) .legal-rights-section li,
body.page-investigaciones:not(#espanol---investigaciones---index) .legal-rights-section li {
  margin: 0 0 calc(var(--spacing-unit) * 2);
}

/* long reference list → multi-column (live .list-wrap: 4 → 2 → 1) */
.legal-rights-section ul.list-wrap {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: calc(var(--spacing-unit) * 6);
}

@media (max-width: 64rem) {
  .legal-rights-section ul.list-wrap { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 40rem) {
  .legal-rights-section ul.list-wrap { grid-template-columns: 1fr; }
}

.legal-right-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0; /* tiles touch, separated by their borders (matches live) */
}

/* Photo tile: the violation image fills it; a title bar sits at the bottom.
   On hover an aqua wash fades in, the title slides up, a white panel reveals
   the blurb and the Learn More button appears (matches the live site). */
.legal-right {
  position: relative;
  aspect-ratio: 53 / 30;
  overflow: hidden;
  border: 1px solid var(--color-blue);
  background-color: var(--color-blue);
  background-size: cover;
  background-position: center;
}

.legal-right::before { /* aqua wash */
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 150, 255, 0.9);
  opacity: 0;
  transition: opacity 0.2s linear;
  z-index: 1;
}

.legal-right:hover::before { opacity: 1; }

.legal-right h3 { /* title bar → label near the top on hover */
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  margin: 0;
  padding: calc(var(--spacing-unit) * 2);
  background: var(--color-blue);
  color: var(--color-white);
  font-weight: var(--font-semibold);
  font-size: clamp(0.8rem, 1vw, 1.125rem);
  line-height: 1.15;
  z-index: 3;
  transition: all 0.2s linear;
}

.legal-right:hover h3 {
  bottom: 70%;
  background: transparent;
  color: var(--color-blue);
}

.legal-right p { /* white blurb panel, revealed from the bottom */
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 0;
  margin: 0;
  overflow: hidden;
  background: var(--color-white);
  color: var(--color-blue);
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
  z-index: 2;
  transition: height 0.2s linear, padding 0.2s linear;
}

.legal-right:hover p {
  height: 60%;
  padding: calc(var(--spacing-unit) * 5) calc(var(--spacing-unit) * 4) 0;
}

.violation-button {
  position: absolute;
  left: 50%;
  top: 80%;
  transform: translateX(-50%);
  opacity: 0;
  z-index: 4;
  white-space: nowrap;
  color: var(--color-white);
  font-weight: var(--font-bold);
  text-transform: uppercase;
  font-size: var(--text-sm);
  letter-spacing: 1px;
  background: var(--color-aqua);
  padding: calc(var(--spacing-unit) * 2) calc(var(--spacing-unit) * 4);
  transition: top 0.2s linear, opacity 0.2s linear, background 0.2s linear;
}

.legal-right:hover .violation-button {
  top: 32%;
  opacity: 1;
}

.violation-button:hover {
  background: var(--color-blue);
  color: var(--color-white);
}

/* Per-tile violation photos */
/* Tile modifier class = the target page slug (matches each tile's href). */
.legal-right.wrongful-termination              { background-image: url("../images/Wrongful-termination.jpg"); }
.legal-right.retaliation                       { background-image: url("../images/Retaliation.jpg"); }
.legal-right.sexual-harassment                 { background-image: url("../images/sexual-harassment.jpg"); }
.legal-right.discrimination-and-harassment     { background-image: url("../images/race-gender-discrimination.jpg"); }
.legal-right.background-check-discrimination    { background-image: url("../images/background-check-discrimination.jpg"); }
.legal-right.disability-discrimination         { background-image: url("../images/Disability-discrimination.jpg"); }
.legal-right.pregnancy-discrimination          { background-image: url("../images/Pregnancy-discrimination.jpg"); }
.legal-right.severance-negotiation             { background-image: url("../images/Severance-negotiations.jpg"); }
.legal-right.whistleblower-claims              { background-image: url("../images/Whistleblower-claims.jpg"); }
.legal-right.breach-of-contract                { background-image: url("../images/Breach-of-employment-agreements.jpg"); }
.legal-right.negotiating-an-employment-contract { background-image: url("../images/Negotiating-employment-contracts.jpg"); }
.legal-right.failure-to-pay-commissions        { background-image: url("../images/Failure-to-pay-commissions.jpg"); }

/* Worker's-rights tiles — Spanish slugs (/espanol/derechos-de-los-trabajadores/), same images */
.legal-right.despido-injustificado              { background-image: url("../images/Wrongful-termination.jpg"); }
.legal-right.represalias                        { background-image: url("../images/Retaliation.jpg"); }
.legal-right.acoso-sexual                       { background-image: url("../images/sexual-harassment.jpg"); }
.legal-right.discriminacion-por-raza-genero-y-edad { background-image: url("../images/race-gender-discrimination.jpg"); }
.legal-right.control-de-antecedentes-discriminacion { background-image: url("../images/background-check-discrimination.jpg"); }
.legal-right.discriminacion-por-un-discapacidad { background-image: url("../images/Disability-discrimination.jpg"); }
.legal-right.discriminacion-por-embarazo        { background-image: url("../images/Pregnancy-discrimination.jpg"); }
.legal-right.negociacion-de-indemnizacion       { background-image: url("../images/Severance-negotiations.jpg"); }
.legal-right.denuncias-de-denunciantes          { background-image: url("../images/Whistleblower-claims.jpg"); }
.legal-right.incumplimiento-de-contratos        { background-image: url("../images/Breach-of-employment-agreements.jpg"); }
.legal-right.negociar-contratos-de-empleo       { background-image: url("../images/Negotiating-employment-contracts.jpg"); }
.legal-right.incumplimiento-de-pagar-comisiones { background-image: url("../images/Failure-to-pay-commissions.jpg"); }

/* Wage & Hour Violations hub tiles */
.legal-right.current-cases          { background-image: url("../images/current-cases.jpg"); }
.legal-right.wage-hour-violations   { background-image: url("../images/wage-and-hour-violations.jpg"); }
.legal-right.flsa-violations        { background-image: url("../images/Fair-Labor-Standards-act-violations.jpg"); }
.legal-right.overtime-violations    { background-image: url("../images/overtime-violations.jpg"); }

/* Investigations hub tiles */
.legal-right.banks-financial-institutions  { background-image: url("../images/banks-financial-institutions.jpg"); }
.legal-right.call-center-employees         { background-image: url("../images/call-center-employees.jpg"); }
.legal-right.casual-dining-chain-restaurants { background-image: url("../images/casual-dining-chain-restaurants.jpg"); }
.legal-right.independent-contractors       { background-image: url("../images/independent-contractors.jpg"); }
.legal-right.oil-gas-industry              { background-image: url("../images/oil-gas-industry.jpg"); }
.legal-right.retail-industry               { background-image: url("../images/retail-industry.jpg"); }
.legal-right.truck-drivers                 { background-image: url("../images/truck-drivers.jpg"); }

/* Investigations hub tiles — Spanish slugs (/espanol/investigaciones/), same images */
.legal-right.bancos-e-instituciones-financieras { background-image: url("../images/banks-financial-institutions.jpg"); }
.legal-right.empleados-del-centro-de-llamadas   { background-image: url("../images/call-center-employees.jpg"); }
.legal-right.restaurantes-casuales-de-cadena    { background-image: url("../images/casual-dining-chain-restaurants.jpg"); }
.legal-right.contratistas-independientes        { background-image: url("../images/independent-contractors.jpg"); }
.legal-right.industria-de-petroleo-y-gas        { background-image: url("../images/oil-gas-industry.jpg"); }
.legal-right.industria-minorista                { background-image: url("../images/retail-industry.jpg"); }
.legal-right.conductores-de-camiones            { background-image: url("../images/truck-drivers.jpg"); }

/* More Information hub: same tile component, but the section IS the grid (h1 +
   tiles directly, no inner container). Tile slug != image name on a few, so the
   backgrounds are mapped explicitly. */
.section-more-information {
  max-width: 1280px;
  margin: 0 auto;
  padding: calc(var(--spacing-unit) * 12) calc(var(--spacing-unit) * 5);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}

.section-more-information > h1 {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--color-aqua);
  font-size: clamp(1.75rem, 4vw, 3rem);
  line-height: 1.1;
  margin: 0 0 calc(var(--spacing-unit) * 8);
}


.legal-right.aml-overtime-lawsuits                            { background-image: url("../images/aml-overtime-lawsuits.jpg"); }
.legal-right.assistant-manager-misclassification              { background-image: url("../images/assistant-manager-misclassification.jpg"); }
.legal-right.assistant-manager-salary                         { background-image: url("../images/assistant-manager-salary.jpg"); }
.legal-right.day-rate-jobs                                    { background-image: url("../images/day-rate-jobs.jpg"); }
.legal-right.exempt-vs-non-exempt-employees                   { background-image: url("../images/exempt-vs-non-exempt-employees.jpg"); }
.legal-right.independent-contractor-misclassification         { background-image: url("../images/independent-contractor-misclassification.jpg"); }
.legal-right.job-reclassification                             { background-image: url("../images/job-reclassification.jpg"); }
.legal-right.an-explosion-of-jobs-in-the-marcellus-shale      { background-image: url("../images/an-explosion-of-jobs-in-the-marcellus-shale.jpg"); }
.legal-right.new-york-and-pennsylvania-fracking-overtime-lawsuits { background-image: url("../images/new-york-and-pennsylvania-fracking-overtime-lawsuits.jpg"); }
.legal-right.nyc-employment-lawyers                           { background-image: url("../images/nyc-employment-lawyers.jpg"); }
.legal-right.oil-field-jobs-overtime-pay                      { background-image: url("../images/oil-field-jobs-overtime-pay.jpg"); }
.legal-right.oil-field-overtime-lawsuit                       { background-image: url("../images/oil-field-overtime-lawsuit.jpg"); }
.legal-right.per-diem-workers                                 { background-image: url("../images/per-diem-workers.jpg"); }
.legal-right.restaurant-worker-rights                         { background-image: url("../images/restaurant-worker-rights.jpg"); }
.legal-right.restaurant-worker-rights-in-ny                   { background-image: url("../images/restaurant-worker-rights-in-ny.jpg"); }

/* More Information hub tiles — Spanish slugs (/espanol/mas-informacion/), same images */
.legal-right.derechos-de-trabajadores-de-restaurantes        { background-image: url("../images/restaurant-worker-rights.jpg"); }
.legal-right.derechos-de-trabajadores-de-restaurantes-de-ny  { background-image: url("../images/restaurant-worker-rights-in-ny.jpg"); }
.legal-right.abogados-laborales-de-nyc                        { background-image: url("../images/nyc-employment-lawyers.jpg"); }
.legal-right.demanda-por-horas-erxtras-en-la-area-del-petroleo { background-image: url("../images/oil-field-overtime-lawsuit.jpg"); }
.legal-right.clasificacion-incorrecta-de-asistentes-de-gerencia { background-image: url("../images/assistant-manager-misclassification.jpg"); }
.legal-right.clasificacion-incorrecta-de-contratistas-independientes { background-image: url("../images/independent-contractor-misclassification.jpg"); }
.legal-right.demandas-de-horas-extras-de-aml                 { background-image: url("../images/aml-overtime-lawsuits.jpg"); }
.legal-right.demandas-de-horas-extras-de-fracking-en-nueva-york-y-pennsylvania { background-image: url("../images/new-york-and-pennsylvania-fracking-overtime-lawsuits.jpg"); }
.legal-right.empleados-exentos-vs-no-exentos                 { background-image: url("../images/exempt-vs-non-exempt-employees.jpg"); }
.legal-right.reclasificacion-de-trabajo                      { background-image: url("../images/job-reclassification.jpg"); }
.legal-right.salario-del-asistente-del-gerente               { background-image: url("../images/assistant-manager-salary.jpg"); }
.legal-right.trabajadores-por-dia                            { background-image: url("../images/per-diem-workers.jpg"); }
.legal-right.trabajos-de-tarifas-diarias                     { background-image: url("../images/day-rate-jobs.jpg"); }
.legal-right.trabajos-en-la-industria-petrolera-y-pago-por-horas-extras { background-image: url("../images/oil-field-jobs-overtime-pay.jpg"); }
.legal-right.una-explosion-de-trabajo-en-el-marcellus-shale  { background-image: url("../images/an-explosion-of-jobs-in-the-marcellus-shale.jpg"); }

@media (max-width: 80rem) {
  .legal-right-container,
  .section-more-information { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 64rem) {
  .legal-right-container,
  .section-more-information { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 40rem) {
  .legal-right-container,
  .section-more-information { grid-template-columns: 1fr; }
}

/* ===================================
   CARD LISTING — used by Current Cases (index + previous-cases) and Decisions
   of Interest. Just one wrapping div around the cards (.listing-grid); the page
   <h1> and intro <p> are plain siblings, not wrapped. Cards are .listing-card.
   =================================== */

.listing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: calc(var(--spacing-unit) * 4);
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 calc(var(--spacing-unit) * 5) calc(var(--spacing-unit) * 12);
}

/* listing-page heading + intro: plain siblings before the grid (no wrapper),
   centered and width-matched so they don't run edge-to-edge. */
body.page-decisions-of-interest article > h1,
body.page-decisiones-de-interes article > h1,
body.page-current-cases article:not(.current-cases-section) > h1,
body.page-casos-actuales article:not(.current-cases-section) > h1 {
  text-align: center;
  color: var(--color-aqua);
  font-size: clamp(1.75rem, 4vw, 3rem);
  line-height: 1.1;
  margin: calc(var(--spacing-unit) * 10) 0 calc(var(--spacing-unit) * 4);
}

body.page-decisions-of-interest article > p,
body.page-decisiones-de-interes article > p {
  max-width: 70rem;
  margin: 0 auto calc(var(--spacing-unit) * 8);
  padding: 0 calc(var(--spacing-unit) * 5);
  text-align: center;
  line-height: 1.5;
}

/* the listing card */
.listing-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--color-blue-deep);
  border: 1px solid var(--color-blue-dark);
  overflow: hidden;
  padding-bottom: 2.25rem; /* room for the pinned button */
}

/* company logo sits on a white panel at the top */
.listing-card-image {
  background: var(--color-white);
  height: 7.5rem; /* 120px */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(var(--spacing-unit) * 3);
  box-sizing: border-box;
}

.listing-card-image img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  object-fit: contain;
}

.listing-card h2 {
  color: var(--color-white);
  font-size: 1rem;
  line-height: 1.25;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: 0;
  padding: calc(var(--spacing-unit) * 3) calc(var(--spacing-unit) * 4)
    calc(var(--spacing-unit) * 2);
}

/* decision date line */
.listing-card h3 {
  color: var(--color-aqua);
  font-size: 0.875rem;
  font-weight: var(--font-regular);
  letter-spacing: 1px;
  margin: 0;
  padding: 0 calc(var(--spacing-unit) * 4) calc(var(--spacing-unit) * 2);
}

/* alleged-violation bullets (Current Cases) */
.listing-card ul {
  margin: 0;
  padding: 0 calc(var(--spacing-unit) * 4) calc(var(--spacing-unit) * 3)
    calc(var(--spacing-unit) * 8);
  color: var(--color-white);
  list-style: disc;
}

.listing-card li {
  font-size: 0.9375rem;
  line-height: 1.4;
}

/* blurb / decision description */
.listing-card > p {
  margin: 0;
  padding: 0 calc(var(--spacing-unit) * 4) calc(var(--spacing-unit) * 3);
  color: var(--color-white);
  font-size: 0.9375rem;
  line-height: 1.4;
}

/* full-width button pinned to the bottom (View Case / View Decision) */
.listing-card > a {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  text-align: center;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--color-white);
  background: var(--color-aqua);
  padding: calc(var(--spacing-unit) * 2) calc(var(--spacing-unit) * 3);
}

.listing-card > a:hover {
  color: var(--color-aqua);
  background: var(--color-white);
}

/* --- Current Cases DETAIL pages (current-cases/<case>.html) ---------------
   Same .current-cases-section wrapper, but single-column: blue bar heading
   (the article > h1 rule above) + the issue subheading + justified body. */

/* the issue line (live's .sub-bar-heading): white, uppercase, aqua left tick */
body.page-current-cases .current-cases-section > h2,
body.page-casos-actuales .current-cases-section > h2 {
  color: var(--color-white);
  font-size: 1.25rem;
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: 1px;
  border-left: 5px solid var(--color-aqua);
  padding: 2px 10px;
  margin: 0 0 calc(var(--spacing-unit) * 5);
}

body.page-current-cases .current-cases-section > p,
body.page-casos-actuales .current-cases-section > p {
  color: var(--color-white);
  font-size: 1.25rem;
  line-height: 1.4;
  letter-spacing: 1px;
  text-align: justify;
  margin: 0 0 calc(var(--spacing-unit) * 4);
}

/* ===================================
   GET TO KNOW (partner intro)
   =================================== */

.get-to-know {
  background: linear-gradient(to bottom, var(--color-blue-dark), var(--color-blue));
  padding: calc(var(--spacing-unit) * 12) calc(var(--spacing-unit) * 5);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: calc(var(--spacing-unit) * 6);
  text-align: center;
}

.get-to-know > h2 {
  flex-basis: 100%;
}

.get-to-know > h2 .line-one {
  display: block;
  color: var(--color-aqua);
  font-size: clamp(1.75rem, 4.5vw, 5rem);
  line-height: 1.05;
}

.get-to-know > h2 .line-two {
  display: block;
  color: var(--color-white);
  font-weight: var(--font-light);
  font-size: clamp(1rem, 2.2vw, 2.5rem);
  letter-spacing: clamp(3px, 1vw, 16px);
}

/* Full-width flex line so the photo/name row wraps below it (a capped
   max-width here would leave the hr sharing the row and shoving the photo
   off-centre); the visible rule is a short, centred 280px line. */
.get-to-know > hr {
  flex-basis: 100%;
  width: 100%;
  height: 1px;
  margin: 0 0 calc(var(--spacing-unit) * 6);
  border: none;
  background: linear-gradient(rgba(0, 150, 255, 0.4), rgba(0, 150, 255, 0.4)) no-repeat center / 280px 1px;
}

.meet-jb {
  order: 2;
  flex: 0 0 30%;
  max-width: 360px;
  align-self: flex-end;
}

.meet-name {
  flex: 1 1 0;
  max-width: 420px;
  font-family: var(--font-heading);
}

.meet-name.joe {
  order: 1;
  text-align: right;
}

.meet-name.brian {
  order: 3;
  text-align: left;
}

.meet-name > a {
  display: block;
  margin-bottom: calc(var(--spacing-unit) * 3);
}

.meet-name .mName {
  display: block;
  color: var(--color-white);
  font-weight: var(--font-light);
  font-size: clamp(2rem, 3.5vw, 3.75rem);
  line-height: 1;
  letter-spacing: 3px;
}

.meet-name .mTitle {
  display: block;
  color: var(--color-aqua);
  font-weight: var(--font-light);
  font-size: clamp(1.1rem, 1.8vw, 1.875rem);
  letter-spacing: 9px;
}

.meet-name p {
  font-family: var(--font-body);
  color: rgba(255, 255, 255, 0.85);
  font-size: var(--text-base);
}

@media (max-width: 64rem) {
  .meet-jb { flex-basis: 40%; }
  .meet-name { flex-basis: 100%; max-width: 560px; }
  .meet-name.joe { order: 2; text-align: center; }
  .meet-jb { order: 1; align-self: center; }
  .meet-name.brian { order: 3; text-align: center; }
}

/* ===================================
   FEATURED IN MEDIA
   =================================== */

.featured {
  max-width: 1200px;
  margin: 0 auto;
  padding: calc(var(--spacing-unit) * 12) calc(var(--spacing-unit) * 5);
  text-align: center;
}

.featured > h2 {
  margin-bottom: calc(var(--spacing-unit) * 5);
}

.featuredLogo {
  display: inline-block;
  width: auto;
  max-width: min(100%, 406px);
}

.featured > p {
  max-width: 820px;
  margin: 0 auto calc(var(--spacing-unit) * 10);
  font-size: var(--text-lg);
  color: rgba(255, 255, 255, 0.85);
}

.featured-logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(1rem, 2.5vw, 2.75rem);
}

.featured-logos img {
  height: clamp(26px, 3vw, 42px);
  width: auto;
}

/* ===================================
   BLOG / NEWS CARDS
   =================================== */

/* homepage blog-cards section — scoped to <section> so it does not collide with
   the blog post pages, whose <body> also carries class="blog" */
section.blog {
  max-width: 1200px;
  margin: 0 auto;
  padding: calc(var(--spacing-unit) * 12) calc(var(--spacing-unit) * 5);
  text-align: center;
}

section.blog > h2 {
  color: var(--color-aqua);
  font-size: clamp(1.75rem, 4vw, 4rem);
  line-height: 1.05;
}

section.blog > hr {
  width: 100%;
  max-width: 280px;
  margin: calc(var(--spacing-unit) * 4) auto calc(var(--spacing-unit) * 9);
  border: none;
  border-top: 1px solid rgba(0, 150, 255, 0.4);
}

.blog-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(var(--spacing-unit) * 5);
}

.blog-entry {
  display: grid;
  grid-template-columns: 28% 1fr;
  grid-template-areas:
    "date title"
    "btn  btn";
  gap: calc(var(--spacing-unit) * 2) calc(var(--spacing-unit) * 4);
  align-items: start;
  padding: calc(var(--spacing-unit) * 5);
  background: var(--color-blue-deep);
  text-align: left;
}

.blog-date {
  grid-area: date;
  text-align: center;
  line-height: 1.1;
}

.blog-date span {
  display: block;
}

.blog-month {
  color: var(--color-orange);
  font-weight: var(--font-bold);
  text-transform: uppercase;
  font-size: var(--text-sm);
}

.blog-day {
  color: var(--color-aqua);
  font-family: var(--font-heading);
  font-size: clamp(2.5rem, 4vw, 3.75rem);
  line-height: 1;
}

.blog-year {
  color: var(--color-orange);
  font-family: var(--font-heading);
  font-size: var(--text-xl);
}

.blog-entry h3 {
  grid-area: title;
  color: var(--color-white);
  font-weight: var(--font-medium);
  font-size: var(--text-lg);
  text-transform: none;
  padding-bottom: calc(var(--spacing-unit) * 3);
  border-bottom: 1px solid var(--color-aqua);
}

.blog-entry .btn {
  grid-area: btn;
  justify-self: end;
  min-width: 50%;
  text-align: center;
  color: var(--color-white);
  font-weight: var(--font-bold);
  font-size: var(--text-base);
  background: var(--color-aqua);
  padding: calc(var(--spacing-unit) * 2) calc(var(--spacing-unit) * 4);
}

.blog-entry .btn:hover {
  background: var(--color-white);
  color: var(--color-blue);
}

@media (max-width: 64rem) {
  .blog-container { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 40rem) {
  .blog-container { grid-template-columns: 1fr; }
}

/* ===================================
   BOTTOM CONTACT (form + map + address)
   =================================== */

.bottom-contact {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  padding: calc(var(--spacing-unit) * 12) calc(var(--spacing-unit) * 5);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

/* Full-bleed aqua line separating the contact block from the section above */
.bottom-contact::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  border-top: 1px solid var(--color-aqua);
}

.bottom-contact > h2,
.bottom-contact > hr,
.bottom-contact > h3 {
  flex-basis: 100%;
  text-align: center;
}

.bottom-contact > h2 .line-one {
  display: block;
  color: var(--color-aqua);
  font-size: clamp(1.75rem, 4.5vw, 5rem);
  line-height: 1.05;
}

.bottom-contact > h2 .line-two {
  display: block;
  color: var(--color-white);
  font-weight: var(--font-light);
  font-size: clamp(1rem, 2.2vw, 2.5rem);
  letter-spacing: clamp(3px, 1vw, 16px);
}

.bottom-contact > hr {
  width: 100%;
  max-width: 280px;
  margin: calc(var(--spacing-unit) * 4) auto;
  border: none;
  border-top: 1px solid rgba(0, 150, 255, 0.4);
}

.bottom-contact > h3 {
  color: var(--color-white);
  font-weight: var(--font-light);
  font-size: clamp(1.1rem, 1.8vw, 1.875rem);
  line-height: var(--leading-snug);
  margin-bottom: calc(var(--spacing-unit) * 8);
}

.bottom-contact > h3 .contact-phones {
  color: var(--color-aqua);
}

.contact-block {
  flex: 1 1 45%;
  min-width: 280px;
  padding: 0 calc(var(--spacing-unit) * 3) calc(var(--spacing-unit) * 5);
}

.home-map {
  width: 100%;
  height: 280px;
  border: 0;
}

.contact-address {
  margin-top: calc(var(--spacing-unit) * 4);
  color: rgba(255, 255, 255, 0.9);
}

.contact-address li {
  padding: calc(var(--spacing-unit)) 0;
  display: flex;
  align-items: center;
  gap: calc(var(--spacing-unit) * 2);
}

.contact-address .phones {
  color: var(--color-white);
}

.contact-address .phones:hover {
  color: var(--color-aqua);
}

.contact-address .icon-phone,
.contact-address .icon-fax {
  height: 1rem;
  width: 1rem;
  color: var(--color-aqua);
}

@media (max-width: 64rem) {
  .contact-block { flex-basis: 100%; }
}

/* ===================================
   POPOUT — slide-in free consultation
   =================================== */

.popout-container {
  position: fixed;
  top: 50%;
  right: -320px;
  transform: translateY(-50%);
  width: 320px;
  max-width: 90vw;
  padding: calc(var(--spacing-unit) * 5);
  background: var(--color-white);
  border: 1px solid var(--color-aqua);
  z-index: 1090;
  transition: right 0.4s ease;
}

.popout-container.open {
  right: 0;
}

.popout-container .close-menu-left {
  display: block;
  text-align: right;
  color: var(--color-aqua);
}

.popout-container .close-menu-left svg {
  height: 1.25rem;
  width: 1.25rem;
  margin-left: auto;
}

.popout-container > h2 {
  text-align: center;
  color: var(--color-blue);
  font-weight: var(--font-light);
  font-size: var(--text-xl);
  letter-spacing: 8px;
}

.popout-phone {
  display: block;
  text-align: center;
  color: var(--color-aqua);
  font-size: clamp(2rem, 9vw, 3.125rem);
  letter-spacing: 3px;
  line-height: 1;
  margin: calc(var(--spacing-unit) * 2) 0;
}

.popout-container hr {
  margin: calc(var(--spacing-unit) * 3) 0;
  border: none;
  border-top: 1px solid var(--color-aqua);
}

/* Light-panel overrides for the popout form */
.popout-container .acceptDisclaimer,
.popout-container .contact-form p {
  color: var(--color-blue);
}

/* Tab handle that pokes out on the right edge of the screen.
   Centered on the (viewport-centered) card so it always clears the
   header CTA, regardless of the card's height. */
.popout-tab {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: -54px;
  padding: calc(var(--spacing-unit) * 2.5);
  background: var(--color-white);
  border: 1px solid var(--color-aqua);
  border-right: none;
  color: var(--color-aqua);
  cursor: pointer;
}

.popout-tab svg {
  display: block;
  height: 35px;
  width: 35px;
}

/* ===================================
   ARTICLES
   =================================== */

.kicker {
  display: block;
}

/* ===================================
   FOOTER
   =================================== */

footer {
  background: var(--color-blue);
  border-top: 1px solid var(--color-aqua);
  padding: calc(var(--spacing-unit) * 10) calc(var(--spacing-unit) * 6);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: calc(var(--spacing-unit) * 8);
}

.footer-block {
  flex: 1 1 200px;
}

.footer-block.legal {
  flex: 1 1 340px;
  order: -1; /* logo block on the left */
}

/* Link columns */
.footer-block.links li {
  padding-bottom: calc(var(--spacing-unit) * 2.5);
  margin-bottom: calc(var(--spacing-unit) * 2.5);
}

.footer-block.links a {
  color: var(--color-white);
  letter-spacing: 2px;
  font-size: var(--text-sm);
}

.footer-block.links a:hover {
  color: var(--color-aqua);
}

/* Legal block */
.footer-loto {
  width: 240px;
  max-width: 100%;
  margin-bottom: calc(var(--spacing-unit) * 4);
}

.footer-address {
  margin-bottom: calc(var(--spacing-unit) * 5);
  color: rgba(255, 255, 255, 0.9);
}

.footer-address li {
  display: flex;
  align-items: center;
  gap: calc(var(--spacing-unit) * 2);
  padding: calc(var(--spacing-unit) * 0.5) 0;
  letter-spacing: 2px;
  font-size: var(--text-sm);
}

.footer-address .phones {
  color: var(--color-white);
}

.footer-address .phones:hover {
  color: var(--color-aqua);
}

.footer-address .icon-phone,
.footer-address .icon-fax {
  height: 1rem;
  width: 1rem;
  color: var(--color-aqua);
}

/* Social icons */
.footer-social {
  margin-bottom: calc(var(--spacing-unit) * 5);
}

.footer-social span {
  display: block;
  margin-bottom: calc(var(--spacing-unit) * 2);
  font-weight: var(--font-medium);
  letter-spacing: 2px;
}

.social-list {
  display: flex;
  gap: calc(var(--spacing-unit) * 2);
}

.social-list a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.1);
  color: var(--color-white);
}

.social-list a:hover {
  background: var(--color-aqua);
}

.social-list svg {
  height: 1.25rem;
  width: 1.25rem;
}

.disclaimer {
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: calc(var(--spacing-unit) * 4);
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--spacing-unit));
  color: rgba(255, 255, 255, 0.8);
  font-size: var(--text-sm);
}

@media (max-width: 48rem) {
  footer {
    gap: calc(var(--spacing-unit) * 6);
  }
  .footer-block.legal {
    order: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero .rotate .line-one,
  .hero .rotate .line-two,
  .hero .rotate .line-three {
    animation: none;
  }
  /* Show the first message; hide the (overlapping) second */
  .hero .rotate:nth-of-type(1) .line-one,
  .hero .rotate:nth-of-type(1) .line-two,
  .hero .rotate:nth-of-type(1) .line-three {
    opacity: 1;
  }
  .hero .rotate:nth-of-type(2) {
    display: none;
  }
  .hero > h2,
  .button.large {
    animation: none;
  }
}

/* ===================================
   PAGE HERO (interior jumbo banner)
   Reusable banner — the per-page photo is set by body id (see below).
   =================================== */

.page-hero {
  position: relative;
  height: 31.25rem; /* 500px, matches live */
  background-color: var(--color-blue-dark);
  background-position: center center; /* live default; some sections override below */
  background-repeat: no-repeat;
  background-size: cover;
}

/* translucent white band pinned to the bottom of the banner */
.page-hero-band {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  padding: calc(var(--spacing-unit) * 3) calc(var(--spacing-unit) * 5);
  background: rgba(255, 255, 255, 0.8);
  text-align: center;
  box-sizing: border-box;
}

.page-hero-band h1 {
  color: var(--color-aqua);
  font-size: clamp(2.25rem, 6vw, 5rem);
  line-height: 1;
}

/* hero-band tagline (e.g. "Your Leaders in Employment Law") — a plain <p>,
   distinct from the .kicker eyebrow */
.page-hero-band p:not(.kicker) {
  color: var(--color-aqua);
  font-family: var(--font-heading);
  font-weight: var(--font-light);
  text-transform: uppercase;
  font-size: clamp(1.5rem, 4vw, 3rem);
  letter-spacing: 2px;
  line-height: 1.1;
  margin: 0;
}

.page-hero-band h2 {
  color: var(--color-blue); /* dark on the light band, like live */
  font-weight: var(--font-light);
  font-size: clamp(1.1rem, 3.1vw, 2.5rem);
  line-height: 1.3;
  letter-spacing: clamp(4px, 1.7vw, 21px);
}

@media (max-width: 71.875rem) {
  .page-hero {
    height: 21.875rem; /* 350px */
  }
}

@media (max-width: 64rem) {
  .page-hero {
    height: 15.625rem; /* 250px */
  }
}

@media (max-width: 48rem) {
  .page-hero {
    height: 13.75rem; /* 220px */
  }
}

/* Per-page hero photo (scoped by the page's body id) */
#legal-team---index .page-hero,
#espanol---nuestra-firma---index .page-hero {
  background-image: url("../images/fitapelli-schaffer-conference.jpg");
  background-position: center 80%; /* live .inner-jumbo.legal */
}

/* ===================================
   ATTORNEY BIO PAGE (legal-team/<name>.html)
   Banner with bordered photo + name/title bar + bio column.
   =================================== */

/* The bio pages and the team-grid index all carry body.page-legal-team; the index is
   excluded by its own id (`:not(#legal-team---index)`) so these bio-only rules
   never touch it — no per-element class and no :has() needed. */

/* the bio variant of the hero: office photo behind a bordered headshot */
body.page-legal-team:not(#legal-team---index) .page-hero,
body.page-nuestra-firma:not(#espanol---nuestra-firma---index) .page-hero {
  height: auto;
  padding: calc(var(--spacing-unit) * 10) calc(var(--spacing-unit) * 5);
  background-image: url("../images/fitapelli-schaffer-lobby.jpg");
  background-position: center center;
  overflow: hidden; /* contain the floated photo */
  box-sizing: border-box;
}

body.page-legal-team:not(#legal-team---index) .page-hero img,
body.page-nuestra-firma:not(#espanol---nuestra-firma---index) .page-hero img {
  float: left;
  width: 30%;
  border: 4px solid var(--color-white);
  box-sizing: border-box;
}

body.page-legal-team:not(#legal-team---index) article,
body.page-nuestra-firma:not(#espanol---nuestra-firma---index) article,
body[id^="workers-rights---"]:not(#workers-rights---index) article,
body[id^="espanol---derechos-de-los-trabajadores---"]:not(#espanol---derechos-de-los-trabajadores---index) article,
body[id^="investigations---"]:not(#investigations---index) article,
body[id^="espanol---investigaciones---"]:not(#espanol---investigaciones---index) article,
body.page-current-cases .current-cases-section,
body.page-casos-actuales .current-cases-section,
.blog-post {
  max-width: 1200px;
  margin: 0 auto;
  padding: calc(var(--spacing-unit) * 10) calc(var(--spacing-unit) * 5)
    calc(var(--spacing-unit) * 16);
  box-sizing: border-box;
}

/* name + title bar (live's .bar-heading.bio): h1 = name, the inner <span> = title,
   both on one line inside a single blue bar with the aqua left rule.
   Workers-rights interior pages reuse the same bar for the topic heading. */
body.page-legal-team:not(#legal-team---index) article > h1,
body.page-nuestra-firma:not(#espanol---nuestra-firma---index) article > h1,
body[id^="workers-rights---"]:not(#workers-rights---index) article > h1,
body[id^="espanol---derechos-de-los-trabajadores---"]:not(#espanol---derechos-de-los-trabajadores---index) article > h1,
body[id^="investigations---"]:not(#investigations---index) article > h1,
body[id^="espanol---investigaciones---"]:not(#espanol---investigaciones---index) article > h1,
body.page-current-cases .current-cases-section > h1,
body.page-casos-actuales .current-cases-section > h1,
.blog-post > h1 {
  background: var(--color-blue);
  border-left: 5px solid var(--color-aqua);
  box-sizing: border-box;
  color: var(--color-white);
  font-size: clamp(1.75rem, 4vw, 2.5rem); /* ~40px */
  line-height: 1.2;
  margin: 0 0 calc(var(--spacing-unit) * 6);
  padding: 8px 20px;
}

body.page-legal-team:not(#legal-team---index) article > h1 > span,
body.page-nuestra-firma:not(#espanol---nuestra-firma---index) article > h1 > span {
  color: var(--color-aqua);
  font-family: var(--font-heading);
  font-weight: var(--font-light);
  text-transform: uppercase;
  font-size: clamp(1.25rem, 2.4vw, 1.875rem); /* ~30px */
  letter-spacing: 2px;
  margin-left: calc(var(--spacing-unit) * 2);
}

/* two columns below the name bar: bio text (left) + team sidebar (right) */
.content-cols {
  display: flex;
  gap: calc(var(--spacing-unit) * 8);
  align-items: flex-start;
}

.content-main {
  flex: 1 1 auto;
  min-width: 0;
}

/* bio paragraphs */
.content-main p {
  color: var(--color-white);
  font-size: 1.25rem; /* 20px */
  line-height: 1.4;
  letter-spacing: 1px;
  text-align: justify;
  margin: 0 0 calc(var(--spacing-unit) * 4);
}

.content-main em {
  font-style: italic;
}

/* team sidebar (live's .content-side) */
.content-side {
  flex: 0 0 23%;
}

/* the team-grid index page never shows the bio sidebar */
#legal-team---index aside.content-side,
#espanol---nuestra-firma---index aside.content-side {
  display: none;
}

.content-side-heading {
  color: var(--color-white);
  font-size: 1.25rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  border-left: 5px solid var(--color-aqua);
  padding: 2px 10px;
  margin: 0 0 calc(var(--spacing-unit) * 3);
}

.content-side-menu {
  list-style: none;
  margin: 0;
  padding: calc(var(--spacing-unit) * 4) 0;
  border: 1px solid var(--color-blue);
}

.content-side-menu a {
  display: block;
  color: var(--color-white);
  font-size: 1.125rem; /* 18px */
  text-transform: capitalize;
  letter-spacing: 1px;
  padding: 5px 20px;
}

.content-side-menu a:hover {
  color: var(--color-aqua);
  background: var(--color-blue);
}

/* Active link = the current attorney. Each <li> carries a link-<slug> class;
   the one whose slug matches the page's body id is the active state. */
#legal-team---joseph-fitapelli .content-side-menu li.link-joseph-fitapelli a,
#legal-team---brian-schaffer .content-side-menu li.link-brian-schaffer a,
#legal-team---frank-mazzaferro .content-side-menu li.link-frank-mazzaferro a,
#legal-team---armando-ortiz .content-side-menu li.link-armando-ortiz a,
#legal-team---dana-cimera .content-side-menu li.link-dana-cimera a,
#legal-team---hunter-benharris .content-side-menu li.link-hunter-benharris a,
#legal-team---david-sack .content-side-menu li.link-david-sack a,
#legal-team---katherine-bonilla .content-side-menu li.link-katherine-bonilla a,
#legal-team---molly-lakis .content-side-menu li.link-molly-lakis a,
#legal-team---nicole-dapice .content-side-menu li.link-nicole-dapice a,
#legal-team---dianni-rodriguez .content-side-menu li.link-dianni-rodriguez a,
#legal-team---kellee-beck .content-side-menu li.link-kellee-beck a,
#legal-team---rose-trinidad .content-side-menu li.link-rose-trinidad a,
#legal-team---steven-mitchell-sack .content-side-menu li.link-steven-mitchell-sack a {
  color: var(--color-aqua);
  background: var(--color-blue-dark);
  pointer-events: none;
}

/* Spanish bios (nuestra-firma) — same active-link pattern; the attorney slugs
   match the English ones, only the body-id prefix differs (espanol---...). */
#espanol---nuestra-firma---armando-ortiz .content-side-menu li.link-armando-ortiz a,
#espanol---nuestra-firma---brian-schaffer .content-side-menu li.link-brian-schaffer a,
#espanol---nuestra-firma---dana-cimera .content-side-menu li.link-dana-cimera a,
#espanol---nuestra-firma---david-sack .content-side-menu li.link-david-sack a,
#espanol---nuestra-firma---dianni-rodriguez .content-side-menu li.link-dianni-rodriguez a,
#espanol---nuestra-firma---frank-mazzaferro .content-side-menu li.link-frank-mazzaferro a,
#espanol---nuestra-firma---hunter-benharris .content-side-menu li.link-hunter-benharris a,
#espanol---nuestra-firma---joseph-fitapelli .content-side-menu li.link-joseph-fitapelli a,
#espanol---nuestra-firma---katherine-bonilla .content-side-menu li.link-katherine-bonilla a,
#espanol---nuestra-firma---kellee-beck .content-side-menu li.link-kellee-beck a,
#espanol---nuestra-firma---molly-lakis .content-side-menu li.link-molly-lakis a,
#espanol---nuestra-firma---nicole-dapice .content-side-menu li.link-nicole-dapice a,
#espanol---nuestra-firma---rose-trinidad .content-side-menu li.link-rose-trinidad a,
#espanol---nuestra-firma---steven-mitchell-sack .content-side-menu li.link-steven-mitchell-sack a {
  color: var(--color-aqua);
  background: var(--color-blue-dark);
  pointer-events: none;
}

/* ===================================
   GENERIC INTERIOR TEXT PAGES
   FAQ, Super Lawyers, and the More-Information DETAIL pages (+ Spanish).
   They carry different wrappers — a bare <article>, .super-lawyers-section,
   or .section-more-information reused from the index tile grid — so normalise
   them into a centred, readable text column with bar-style headings (live).
   =================================== */

body.page-frequently-asked-questions article,
body.page-preguntas-frequentes article,
body.page-super-lawyers .super-lawyers-section,
body.page-super-abogados .super-lawyers-section,
body.page-more-information:not(#more-information---index) .section-more-information,
body.page-mas-informacion:not(#espanol---mas-informacion---index) .section-more-information {
  display: block; /* undo the more-info index grid on detail pages */
  max-width: 1000px;
  margin: 0 auto;
  padding: calc(var(--spacing-unit) * 10) calc(var(--spacing-unit) * 5)
    calc(var(--spacing-unit) * 16);
  box-sizing: border-box;
  text-align: left;
}

/* page title bar (live .bar-heading) */
body.page-frequently-asked-questions article > h1,
body.page-preguntas-frequentes article > h1,
body.page-more-information:not(#more-information---index) .section-more-information > h1,
body.page-mas-informacion:not(#espanol---mas-informacion---index) .section-more-information > h1 {
  margin: 0 0 calc(var(--spacing-unit) * 8);
  padding: 8px 20px;
  border-left: 5px solid var(--color-aqua);
  background: var(--color-blue);
  color: var(--color-white);
  text-align: left;
  text-transform: uppercase;
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  line-height: 1.2;
}

/* section / question sub-headings (live .sub-bar-heading) */
body.page-frequently-asked-questions article > h2,
body.page-preguntas-frequentes article > h2,
body.page-super-lawyers .super-lawyers-section > h2,
body.page-super-abogados .super-lawyers-section > h2,
body.page-more-information:not(#more-information---index) .section-more-information > h2,
body.page-mas-informacion:not(#espanol---mas-informacion---index) .section-more-information > h2 {
  margin: calc(var(--spacing-unit) * 8) 0 calc(var(--spacing-unit) * 4);
  padding: var(--spacing-unit) calc(var(--spacing-unit) * 3);
  border-left: 5px solid var(--color-aqua);
  color: var(--color-white);
  text-transform: uppercase;
  font-size: var(--text-lg);
  line-height: 1.3;
}

/* body copy */
body.page-frequently-asked-questions article > p,
body.page-preguntas-frequentes article > p,
body.page-super-lawyers .super-lawyers-section > p,
body.page-super-abogados .super-lawyers-section > p,
body.page-more-information:not(#more-information---index) .section-more-information > p,
body.page-mas-informacion:not(#espanol---mas-informacion---index) .section-more-information > p {
  margin: 0 0 calc(var(--spacing-unit) * 4);
  color: var(--color-white);
  font-size: 1.125rem;
  line-height: var(--leading-normal);
}

/* in-copy lists */
body.page-frequently-asked-questions article ul,
body.page-preguntas-frequentes article ul,
body.page-more-information:not(#more-information---index) .section-more-information ul,
body.page-mas-informacion:not(#espanol---mas-informacion---index) .section-more-information ul {
  margin: 0 0 calc(var(--spacing-unit) * 6);
  padding-left: calc(var(--spacing-unit) * 6);
  color: var(--color-white);
  font-size: 1.125rem;
  line-height: var(--leading-normal);
}

/* ===================================
   MEDIA / NEWS page — video gallery (2-up cards on aqua, live .media-flex)
   =================================== */
body.page-media .media-section,
body.page-medios .media-section {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--spacing-unit) * 5);
  max-width: 1200px;
  margin: 0 auto;
  padding: calc(var(--spacing-unit) * 10) calc(var(--spacing-unit) * 5)
    calc(var(--spacing-unit) * 16);
  box-sizing: border-box;
}

/* the page title already sits in the hero band, so the in-content h1 is kept
   for document structure but hidden visually (matches live — no bar here). */
body.page-media .media-section > h1,
body.page-medios .media-section > h1 {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.media-container {
  flex: 1 1 calc(50% - var(--spacing-unit) * 5);
  min-width: 280px;
  background: rgba(0, 150, 255, 0.8);
  padding-bottom: calc(var(--spacing-unit) * 3);
  box-sizing: border-box;
}

.media-container > video {
  display: block;
  width: 100%;
}

.media-container > h2 { /* live .media-title */
  margin: calc(var(--spacing-unit) * 3) 0 0;
  padding: 0 calc(var(--spacing-unit) * 3);
  color: var(--color-blue-dark);
  text-align: center;
  text-transform: none;
  font-size: clamp(1.25rem, 2vw, 1.75rem);
  line-height: 1.2;
}

.media-container > h3 { /* live .media-description */
  margin: calc(var(--spacing-unit) * 2) 0 0;
  padding: 0 calc(var(--spacing-unit) * 3);
  color: var(--color-white);
  text-align: center;
  font-weight: var(--font-light);
  font-size: 1.125rem;
  line-height: 1.3;
}

/* ===================================
   WORKER'S RIGHTS interior pages (workers-rights/<topic>.html)
   Reuse the bio layout: lobby hero + blue bar heading + bio text/sidebar.
   =================================== */

/* shared lobby photo behind the "KNOW YOUR RIGHTS" band (live's .inner-jumbo.rights) */
.rights-hero {
  background-image: url("../images/fitapelli-schaffer-lobby.jpg");
}

/* Current Cases hero photo (live's .inner-jumbo.current-cases) */
.cases-hero {
  background-image: url("../images/employment-litigation.jpg");
  background-position: center 80%; /* live .inner-jumbo.current-cases */
}

/* Lobby photo behind the band — blog/news (live .inner-jumbo.rights), the
   contact page (live .main) and every generic page (.page-generic-page →
   .fslaw-hero: thank-you, press, sitemap, policies, free-consultation) */
.blog-hero,
.news-hero,
.contact-us-hero,
.fslaw-hero {
  background-image: url("../images/fitapelli-schaffer-lobby.jpg");
}

/* Our Practice hero photo (live's .inner-jumbo.practice — the waiting room) */
.practice-hero {
  background-image: url("../images/fitapelli-schaffer-waiting.jpg");
  background-position: left 60%; /* live .inner-jumbo.practice */
}

/* More Information hero (live's .inner-jumbo.moreinfo) — center center via base */
.more-information-hero {
  background-image: url("../images/D3S_5051.jpg");
}

/* Media hero (live's media page uses .inner-jumbo.policy — D3S_5063) */
.media-hero {
  background-image: url("../images/D3S_5063.jpg");
}

/* FAQ + Policy pages hero (both = live's .inner-jumbo.conference) — center
   center via base. Live's privacy-policy/terms-and-conditions/legal-notices all
   use .inner-jumbo.conference (fitapelli-schaffer-conference.jpg), same as FAQ. */
.faq-hero,
.policy-hero {
  background-image: url("../images/fitapelli-schaffer-conference.jpg");
}

/* Super Lawyers hero (live's .inner-jumbo.super-lawyers) — shorter banner */
.super-lawyers-hero {
  background-image: url("../images/superlawyers-2023.jpg");
  background-position: center 25%;
  height: 18.75rem; /* 300px, matches live */
}

/* Prose page (Our Practice, Charity): centered column, centered heading, but the
   body copy stays left-aligned (matches live). */
.prose {
  max-width: 60rem;
  margin: 0 auto;
  padding: calc(var(--spacing-unit) * 12) calc(var(--spacing-unit) * 5)
    calc(var(--spacing-unit) * 16);
}

.prose h1 {
  color: var(--color-aqua);
  text-transform: uppercase;
  text-align: center;
  font-size: clamp(2rem, 5vw, 3.5rem);
  line-height: 1.1;
  margin: 0 0 calc(var(--spacing-unit) * 8);
}

.prose p {
  color: var(--color-white);
  line-height: 1.6;
  margin: 0 0 calc(var(--spacing-unit) * 5);
}

/* Charity & Community Involvement — same .prose wrapper as Our Practice, with an
   intro line + supporter logos. (Charity page uses <article class="prose">.) */
.prose h2 {
  color: var(--color-white);
  text-transform: none;
  text-align: center;
  font-weight: var(--font-light);
  font-size: clamp(1.25rem, 3vw, 1.75rem);
  line-height: 1.4;
  max-width: 50rem;
  margin: 0 auto calc(var(--spacing-unit) * 12);
}

.charity-logos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: calc(var(--spacing-unit) * 12) calc(var(--spacing-unit) * 14);
}

.charity-logos img {
  width: auto;
  max-width: 13rem;
  max-height: 6rem;
  height: auto;
}

/* "Posted by:" byline under a blog post title */
.blog-post > .posted-by {
  color: var(--color-aqua);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 0.875rem;
  margin: 0 0 calc(var(--spacing-unit) * 6);
}

/* ===================================
   BLOG INDEX — post listing + pagination
   =================================== */
.blog-roll {
  max-width: 1200px;
  margin: 0 auto;
  padding: calc(var(--spacing-unit) * 10) calc(var(--spacing-unit) * 5)
    calc(var(--spacing-unit) * 12);
}

/* each entry is a dark panel with a date badge top-right (live's blog roll) */
.blog-list {
  position: relative;
  background: var(--color-blue-deep);
  border: 1px solid var(--color-blue-dark);
  padding: calc(var(--spacing-unit) * 6) calc(var(--spacing-unit) * 7);
  padding-right: 8rem; /* clear the date badge */
  margin-bottom: calc(var(--spacing-unit) * 5);
}

.blog-list .date {
  position: absolute;
  top: 0;
  right: 0;
  background: var(--color-aqua);
  color: var(--color-white);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 0.9375rem;
  text-align: center;
  padding: calc(var(--spacing-unit) * 4) calc(var(--spacing-unit) * 4);
  margin: 0;
}

.blog-list h2 {
  text-transform: none; /* blog titles stay mixed-case (override global heading rule) */
  font-size: clamp(1.25rem, 2.5vw, 1.75rem);
  line-height: 1.2;
  margin: 0 0 calc(var(--spacing-unit) * 1);
}

.blog-list h2 a {
  color: var(--color-aqua);
}

.blog-list h2 a:hover {
  color: var(--color-white);
}

.blog-list .post-author {
  color: var(--color-white);
  opacity: 0.65;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 0.8125rem;
  margin: 0 0 calc(var(--spacing-unit) * 3);
}

.blog-list > p {
  color: var(--color-white);
  line-height: 1.5;
  margin: 0 0 calc(var(--spacing-unit) * 4);
}

/* orange "Continue Reading →" button (live) */
.blog-list .continue {
  display: inline-block;
  background: linear-gradient(to bottom, var(--color-orange-light), var(--color-orange-dark));
  color: var(--color-white);
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 1px;
  font-size: 0.875rem;
  padding: calc(var(--spacing-unit) * 2) calc(var(--spacing-unit) * 5);
}

.blog-list .continue::after {
  content: " \2192"; /* → */
}

.blog-list .continue:hover {
  filter: brightness(1.08);
}

/* numbered pager (page-2.html, page-3.html, …; page 1 = /blog/) */
.pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: calc(var(--spacing-unit) * 2);
  margin-top: calc(var(--spacing-unit) * 10);
}

.pagination a,
.pagination span {
  min-width: 2.5rem;
  text-align: center;
  padding: calc(var(--spacing-unit) * 2) calc(var(--spacing-unit) * 3);
  border: 1px solid var(--color-aqua);
  color: var(--color-aqua);
  box-sizing: border-box;
}

.pagination a:hover {
  background: var(--color-aqua);
  color: var(--color-white);
}

/* current page = highlighted, keyed on body id + the link's page class
   (page 1 is /blog/ -> body#blog---index; the rest are #blog---page-N).
   Entries beyond the live page count are harmless -- they match nothing.
   News (/blog/news/) reuses the same pager with #blog---news--- ids. */
#blog---news---index .pagination .link-page-1,
#blog---news---page-2 .pagination .link-page-2,
#blog---news---page-3 .pagination .link-page-3,
#blog---news---page-4 .pagination .link-page-4,
#blog---news---page-5 .pagination .link-page-5,
#blog---index .pagination .link-page-1,
#blog---page-2 .pagination .link-page-2,
#blog---page-3 .pagination .link-page-3,
#blog---page-4 .pagination .link-page-4,
#blog---page-5 .pagination .link-page-5,
#blog---page-6 .pagination .link-page-6,
#blog---page-7 .pagination .link-page-7,
#blog---page-8 .pagination .link-page-8,
#blog---page-9 .pagination .link-page-9,
#blog---page-10 .pagination .link-page-10,
#blog---page-11 .pagination .link-page-11,
#blog---page-12 .pagination .link-page-12,
#blog---page-13 .pagination .link-page-13,
#blog---page-14 .pagination .link-page-14,
#blog---page-15 .pagination .link-page-15,
#blog---page-16 .pagination .link-page-16,
#blog---page-17 .pagination .link-page-17,
#blog---page-18 .pagination .link-page-18,
#blog---page-19 .pagination .link-page-19,
#blog---page-20 .pagination .link-page-20 {
  background: var(--color-aqua);
  color: var(--color-white);
  pointer-events: none;
}

/* the eyebrow inside the hero band, styled like the band's aqua heading */
.page-hero-band .kicker {
  color: var(--color-aqua);
  font-size: clamp(2.25rem, 6vw, 5rem);
  line-height: 1;
}

/* subsection headings within the bio text (live's .sub-bar-heading):
   white, uppercase, aqua left tick — matches the sidebar heading style. */
.content-main h2 {
  color: var(--color-white);
  font-size: 1.25rem; /* 20px */
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: 1px;
  border-left: 5px solid var(--color-aqua);
  padding: 2px 10px;
  margin: 0 0 calc(var(--spacing-unit) * 5);
}

/* the bio paragraph that follows a subsection heading sits closer to it */
.content-main h2 + p {
  margin-top: calc(var(--spacing-unit) * -2);
}

/* "Read more" tiles linking to the four COVID-19 sub-articles (covid-19-rights.html;
   live's .cc-tiles): dark cards, each with a title and a full-width aqua button
   pinned to the bottom. Scoped under .content-main to win over the .content-main h2
   subsection rules above. */
.content-main .covid-rights {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: calc(var(--spacing-unit) * 4);
  margin: calc(var(--spacing-unit) * 8) 0 calc(var(--spacing-unit) * 4);
}

.content-main .covid-rights-item {
  display: flex;
  flex-direction: column;
  background: var(--color-blue-deep);
  border: 1px solid var(--color-aqua);
  overflow: hidden;
}

/* tile title: fills the card so the buttons bottom-align; no subsection bottom gap */
.content-main .covid-rights-item h2 {
  order: 1;
  flex: 1 1 auto;
  margin: 0;
  font-size: 1.125rem; /* 18px — fits the narrower tile */
  line-height: 1.3;
  padding: calc(var(--spacing-unit) * 4) calc(var(--spacing-unit) * 4)
    calc(var(--spacing-unit) * 5);
}

.content-main .covid-rights-item p {
  order: 2;
  margin: 0;
}

.content-main .covid-rights-item a {
  display: block;
  text-align: center;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--color-white);
  background: var(--color-aqua);
  padding: calc(var(--spacing-unit) * 2) calc(var(--spacing-unit) * 3);
}

.content-main .covid-rights-item a:hover {
  color: var(--color-aqua);
  background: var(--color-white);
}

/* Active sidebar link = the current topic. Each <li> carries a link-<slug>
   class; the one whose slug matches the page's body id is the active state
   (same pattern as the legal-team sidebar). */
#workers-rights---background-check-discrimination .content-side-menu li.link-background-check-discrimination a,
#workers-rights---breach-of-contract .content-side-menu li.link-breach-of-contract a,
#workers-rights---covid-19-rights .content-side-menu li.link-covid-19-rights a,
#workers-rights---disability-discrimination .content-side-menu li.link-disability-discrimination a,
#workers-rights---discrimination-and-harassment .content-side-menu li.link-discrimination-and-harassment a,
#workers-rights---failure-to-pay-commissions .content-side-menu li.link-failure-to-pay-commissions a,
#workers-rights---fair-labor-standards-act-violations .content-side-menu li.link-fair-labor-standards-act-violations a,
#workers-rights---negotiating-an-employment-contract .content-side-menu li.link-negotiating-an-employment-contract a,
#workers-rights---pregnancy-discrimination .content-side-menu li.link-pregnancy-discrimination a,
#workers-rights---retaliation .content-side-menu li.link-retaliation a,
#workers-rights---severance-negotiation .content-side-menu li.link-severance-negotiation a,
#workers-rights---sexual-harassment .content-side-menu li.link-sexual-harassment a,
#workers-rights---unpaid-overtime .content-side-menu li.link-unpaid-overtime a,
#workers-rights---wage-hour-violations .content-side-menu li.link-wage-hour-violations a,
#workers-rights---whistleblower-claims .content-side-menu li.link-whistleblower-claims a,
#workers-rights---wrongful-termination .content-side-menu li.link-wrongful-termination a {
  color: var(--color-aqua);
  background: var(--color-blue-dark);
  pointer-events: none;
}

/* Spanish worker's-rights (derechos-de-los-trabajadores) — same active-link
   pattern with the Spanish slugs. NOTE: the 4 covid-19/ subpages and
   violaciones-de-las-ley-de-las-normas-laborales-justas are NOT listed in the
   sidebar menu, so they have no active item (matches their markup). */
#espanol---derechos-de-los-trabajadores---acoso-sexual .content-side-menu li.link-acoso-sexual a,
#espanol---derechos-de-los-trabajadores---control-de-antecedentes-discriminacion .content-side-menu li.link-control-de-antecedentes-discriminacion a,
#espanol---derechos-de-los-trabajadores---denuncias-de-denunciantes .content-side-menu li.link-denuncias-de-denunciantes a,
#espanol---derechos-de-los-trabajadores---derechos-covid-19 .content-side-menu li.link-derechos-covid-19 a,
#espanol---derechos-de-los-trabajadores---despido-injustificado .content-side-menu li.link-despido-injustificado a,
#espanol---derechos-de-los-trabajadores---discriminacion-por-embarazo .content-side-menu li.link-discriminacion-por-embarazo a,
#espanol---derechos-de-los-trabajadores---discriminacion-por-raza-genero-y-edad .content-side-menu li.link-discriminacion-por-raza-genero-y-edad a,
#espanol---derechos-de-los-trabajadores---discriminacion-por-un-discapacidad .content-side-menu li.link-discriminacion-por-un-discapacidad a,
#espanol---derechos-de-los-trabajadores---incumplimiento-de-contratos .content-side-menu li.link-incumplimiento-de-contratos a,
#espanol---derechos-de-los-trabajadores---incumplimiento-de-pagar-comisiones .content-side-menu li.link-incumplimiento-de-pagar-comisiones a,
#espanol---derechos-de-los-trabajadores---negociacion-de-indemnizacion .content-side-menu li.link-negociacion-de-indemnizacion a,
#espanol---derechos-de-los-trabajadores---negociar-contratos-de-empleo .content-side-menu li.link-negociar-contratos-de-empleo a,
#espanol---derechos-de-los-trabajadores---represalias .content-side-menu li.link-represalias a,
#espanol---derechos-de-los-trabajadores---violaciones-de-horas-extras .content-side-menu li.link-violaciones-de-horas-extras a,
#espanol---derechos-de-los-trabajadores---violaciones-de-horas-y-salarios .content-side-menu li.link-violaciones-de-horas-y-salarios a {
  color: var(--color-aqua);
  background: var(--color-blue-dark);
  pointer-events: none;
}

@media (max-width: 48rem) {
  body.page-legal-team:not(#legal-team---index) .page-hero img,
  body.page-nuestra-firma:not(#espanol---nuestra-firma---index) .page-hero img {
    float: none;
    display: block;
    width: 60%;
    margin: 0 auto;
  }
  .content-cols {
    flex-direction: column;
  }
  .content-side {
    flex-basis: auto;
    width: 100%;
  }
  .content-main p {
    font-size: 1.125rem;
    text-align: left;
  }
  body.page-legal-team:not(#legal-team---index) article > h1 > span,
  body.page-nuestra-firma:not(#espanol---nuestra-firma---index) article > h1 > span {
    display: block;
    margin-left: 0;
  }
}

/* ===================================
   LEGAL TEAM PAGE (team grid)
   =================================== */

/* full-width "marble" band behind the team grid (live's .back-marble — a
   solid #0a0d20 tile); scoped to this page's team <article>. */
#legal-team---index article,
#espanol---nuestra-firma---index article {
  background: #0a0d20 url("../images/background-cloud.gif") repeat;
}

.team-page {
  display: flex;
  flex-wrap: wrap;
  max-width: 1200px;
  margin: 0 auto;
  padding: calc(var(--spacing-unit) * 10) 0 calc(var(--spacing-unit) * 16);
  box-sizing: border-box;
}

.team {
  position: relative;
  flex-grow: 1;
  max-width: 31.333%;
  margin: 0 1% calc(var(--spacing-unit) * 5);
  padding: 10px 20px 10px 10px;
  background: rgba(0, 150, 255, 0.3);
  box-sizing: border-box;
  overflow: hidden;
}

/* the first two cards (Partners) are larger and sit 2-up */
.team-page > .team:nth-child(1),
.team-page > .team:nth-child(2) {
  max-width: 48%;
}

.team > img {
  position: relative;
  float: left;
  width: 50%;
  margin: 0 10px 0 0;
  z-index: 0;
}

.team .team-name,
.team .team-title {
  position: relative;
  z-index: 100;
  font-family: var(--font-heading);
  margin: 0 0 5px;
  padding: 0;
}

.team .team-name {
  color: var(--color-white);
  font-weight: var(--font-regular);
  font-size: 26px;
  line-height: 26px;
}

.team .team-title {
  color: var(--color-aqua);
  font-size: 24px;
  line-height: 24px;
  letter-spacing: 2px;
}

.team-page > .team:nth-child(1) .team-name,
.team-page > .team:nth-child(2) .team-name {
  font-size: 36px;
  line-height: 36px;
}

.team-page > .team:nth-child(1) .team-title,
.team-page > .team:nth-child(2) .team-title {
  font-size: 30px;
  line-height: 30px;
}

/* dark panel that slides in from the right, revealing the profile button */
.team > a {
  position: absolute;
  top: 0;
  right: -50%;
  width: 50%;
  height: 100%;
  background: var(--color-blue-dark);
  transition: right 0.2s linear;
  display: block;
  z-index: 0;
  text-decoration: none;
}

.team:hover > a {
  right: 0;
}

.team-profile {
  position: absolute;
  bottom: 20%;
  left: 10px;
  color: var(--color-white);
  border: 1px solid var(--color-aqua);
  background: rgba(0, 150, 255, 0.5);
  padding: 5px 10px;
  box-sizing: border-box;
  display: inline-block;
  white-space: nowrap;
}

.team-profile span {
  margin-left: 4px;
}

/* tablet — everyone drops to 2-up */
@media (max-width: 64rem) {
  .team,
  .team-page > .team:nth-child(1),
  .team-page > .team:nth-child(2) {
    max-width: 48%;
  }
  .team .team-name,
  .team-page > .team:nth-child(1) .team-name,
  .team-page > .team:nth-child(2) .team-name {
    font-size: 24px;
    line-height: 24px;
  }
  .team .team-title,
  .team-page > .team:nth-child(1) .team-title,
  .team-page > .team:nth-child(2) .team-title {
    font-size: 20px;
    line-height: 20px;
  }
}

/* phone — stacked card: full-width photo, name/title below, whole card taps through */
@media (max-width: 48rem) {
  .team-page {
    padding: 10px 10px 40px;
  }
  .team {
    padding: 5px;
  }
  .team > img {
    float: none;
    width: 100%;
    margin: 0;
    display: block;
  }
  .team .team-name,
  .team .team-title {
    padding: 0 5px;
  }
  .team .team-name {
    font-size: 20px;
    line-height: 22px;
  }
  .team .team-title {
    font-size: 18px;
    line-height: 20px;
  }
  .team > a {
    inset: 0;
    width: 100%;
    height: 100%;
    right: auto;
    background: transparent;
    z-index: 200;
  }
  .team-profile {
    display: none;
  }
}