/* ===================================
   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;

  /* Prose (see PROSE BASELINE) */
  --prose-measure: 62rem;  /* ~1000px reading column, matches interior pages */
  --prose-size: 1.125rem;

  /* 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;
}

/* ===================================
   PROSE BASELINE — the default look for running text
   Left-aligned, readable measure, spaced paragraphs, real bullet lists.
   Write plain semantic HTML inside a scope below and it is already styled;
   no per-page typography.

   SCOPE = the selector list repeated in each rule. Give a new section
   class="prose-body", or add its own class to the lists, and it inherits
   the whole look. (The duplicated prose blocks further down — investigations
   detail, generic interior pages, .policy-section — are candidates to fold
   in here later; they are left alone for now so their pages don't shift.)

   Only DIRECT children are styled, so a component dropped inside a prose
   scope (.legal-right-container, cards, forms) is never touched.
   =================================== */

/* Container: same 1280px + gutters as the other content sections, so a prose
   article sitting under a tile grid lines up with it. Line length is held
   readable by --prose-measure on the children, not by this box. */
.prose-body {
  max-width: 1280px;
  margin: 0 auto;
  padding: calc(var(--spacing-unit) * 10) calc(var(--spacing-unit) * 5)
    calc(var(--spacing-unit) * 16);
}

:is(.prose-body, .legal-rights-section) {
  text-align: left;
}

:is(.prose-body, .legal-rights-section) > p {
  max-width: var(--prose-measure);
  margin: 0 0 calc(var(--spacing-unit) * 4);
  font-size: var(--prose-size);
  line-height: var(--leading-normal);
}

/* lists get their markers back — the global ul{list-style:none} is for nav */
:is(.prose-body, .legal-rights-section) > ul { list-style: disc; }
:is(.prose-body, .legal-rights-section) > ol { list-style: decimal; }

:is(.prose-body, .legal-rights-section) > :is(ul, ol) {
  max-width: var(--prose-measure);
  margin: 0 0 calc(var(--spacing-unit) * 6);
  padding-left: calc(var(--spacing-unit) * 6);
  font-size: var(--prose-size);
  line-height: var(--leading-normal);
}

:is(.prose-body, .legal-rights-section) > :is(ul, ol) > li {
  margin: 0 0 calc(var(--spacing-unit) * 2);
}

:is(.prose-body, .legal-rights-section) > :is(ul, ol) > li::marker {
  color: var(--color-aqua);
}

/* sub-heading — the compact aqua bar already used on every interior page */
:is(.prose-body, .legal-rights-section) > :is(h2, h3) {
  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);
  text-transform: uppercase;
  font-size: var(--text-lg);
  line-height: 1.3;
}

/* ===================================
   ARTICLE HEADINGS — the default for every <article>, in any section

   A plain h2 / h3 in page copy gets the site's heading look without a
   page-specific rule: h2 = the compact aqua bar (live .sub-bar-heading),
   h3 = white Oswald sub-heading. Kept to two plain element selectors on
   purpose (0,0,2), so any component rule (.listing-card h2, .blog-list h2,
   .legal-right h3, …) outranks it and only has to reset what it doesn't
   want — never the other way round.

   Content wrapped in a <section> instead of an <article> (investigations,
   workers-rights hubs, policies) is not reached and keeps its own rules.
   =================================== */

article 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);
  font-size: var(--text-lg);
  line-height: 1.3;
}

article h3 {
  margin: calc(var(--spacing-unit) * 6) 0 calc(var(--spacing-unit) * 2);
  font-weight: var(--font-regular);
  font-size: 1.125rem; /* one step under the h2 bar (--text-lg) */
  line-height: 1.3;
}

/* FAQ pairs dropped into running copy. sitebuilder emits them flat --
   alternating <p class="faq-question"> / <p class="faq-answer"> siblings --
   and every existing rule for those classes is scoped to the .faq-band panel
   (.faq-list) or to the legal-team bio column (.team-copy). Neither scope is
   inside an article body, so a pair pasted into one matched nothing and the
   question rendered as an ordinary paragraph, indistinguishable from its
   answer. One base rule fixes that: bold question, and the answer left to
   whatever paragraph rule the surrounding copy already uses.

   Deliberately unscoped, and deliberately one property, so it cannot collide
   with anything:
     - both panel rules are two classes (0,2,0) against this rule's (0,1,0),
       so they still win inside .faq-list and .team-copy -- nothing there
       changes, including their own font-weight;
     - font-weight is the only thing set, so an article's own `p` rules
       (.content-main p, the prose baseline, the body.page-* `article > p`
       rules) keep owning size, colour, margins and alignment everywhere.
   700 is a real loaded Open Sans Condensed weight, not faux bold. */
.faq-question {
  font-weight: var(--font-bold);
}

/* ===================================
   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);
}

/* --- Site search (last item of nav.full) ---
   Submits GET q= to /search/. Default shape (used inside the off-canvas
   panel and on phones) is a full-width box; the wide-desktop block further
   down collapses it to a magnifier that slides open on click. */
nav.full > ul > li.nav-search {
  border-top: none;
}

.site-search {
  display: flex;
  align-items: center;
}

.site-search input[type="search"] {
  flex: 1 1 auto;
  min-width: 0;
  height: 2.25rem;
  font-family: inherit;
  font-size: var(--text-base);
  color: var(--color-blue);
  background: var(--color-white);
  padding: 0 calc(var(--spacing-unit) * 2);
  border: 2px solid var(--color-aqua);
  border-right: none;
  border-radius: 4px 0 0 4px;
  outline: 0;
  -webkit-appearance: none;
  appearance: none;
}

.site-search input[type="search"]::placeholder {
  color: rgba(0, 30, 52, 0.5);
  opacity: 1;
}

/* Kill the WebKit clear "x" — the field is short and the glyph crowds it */
.site-search input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}

.site-search .search-submit {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  background: var(--color-aqua);
  border: 2px solid var(--color-aqua);
  border-radius: 0 4px 4px 0;
  color: var(--color-white);
  cursor: pointer;
}

.site-search .search-submit svg {
  width: 1rem;
  height: 1rem;
}

.site-search .search-submit:hover {
  background: var(--color-blue);
  border-color: var(--color-blue);
}

/* 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);
  }

  /* Search sits under the last menu item, inset to the same gutter as the
     top-level links, and stays open (no magnifier toggle in the panel). */
  nav.full > ul > li.nav-search .site-search {
    margin: calc(var(--spacing-unit) * 5) calc(var(--spacing-unit) * 7.5);
  }
}

/* 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;
  }

  /* --- Search: collapsed to a magnifier, expands on click ---
     Centred in the bar (not stretched like the link items) so the pill
     keeps its own height. */
  nav.full > ul > li.nav-search {
    align-items: center;
    padding-left: calc(var(--spacing-unit) * 2);
  }

  /* Closed: zero-width field with transparent borders, so only the icon reads */
  nav.full > ul > li.nav-search .site-search input[type="search"] {
    width: 0;
    padding-inline: 0;
    border-color: transparent;
    opacity: 0;
    transition: width 0.25s ease, padding 0.25s ease, opacity 0.25s ease;
  }

  nav.full > ul > li.nav-search .site-search.open input[type="search"] {
    width: 11rem;
    padding-inline: calc(var(--spacing-unit) * 2);
    border-color: var(--color-aqua);
    opacity: 1;
  }

  /* Closed icon inherits the bar colour: dark blue on the white header,
     white on the transparent home-page header. */
  nav.full > ul > li.nav-search .search-submit {
    background: transparent;
    border-color: transparent;
    border-radius: 4px;
    color: inherit;
  }

  nav.full > ul > li.nav-search .search-submit:hover {
    background: transparent;
    border-color: transparent;
    color: var(--color-aqua);
  }

  /* Open: the icon becomes the aqua submit button on the end of the field */
  nav.full > ul > li.nav-search .site-search.open .search-submit {
    background: var(--color-aqua);
    border-color: var(--color-aqua);
    border-radius: 0 4px 4px 0;
    color: var(--color-white);
  }

  nav.full > ul > li.nav-search .site-search.open .search-submit:hover {
    background: var(--color-blue);
    border-color: var(--color-blue);
    color: var(--color-white);
  }
}

/* ===================================
   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);
  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);
}

/* Optional intro lede. Body face at prose size, muted so it sits below the
   aqua h1 and letterspaced h2 rather than competing with them, and held to a
   readable measure — the section itself is full-bleed, so without the
   max-width this would run the whole 1440px. */
.heading > p {
  max-width: 46rem;
  margin: calc(var(--spacing-unit) * 6) auto 0;
  color: #c3d4e8;
  font-size: var(--prose-size);
  line-height: var(--leading-relaxed);
  text-wrap: balance;
}

/* ===================================
   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;
}

/* --- TrustLock seal badges (shared: all contact forms) --- */
.trustlock {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--spacing-unit) * 2);
  margin-top: calc(var(--spacing-unit) * 3);
}

.trustlock a {
  flex: 1 1 0;          /* three seals share the row, shrink together */
  min-width: 0;
  max-width: 119px;     /* native seal width — never upscale */
  line-height: 0;       /* drop the inline-image descender gap */
}

.trustlock img {
  display: block;
  width: 100%;
  height: auto;
}

/* Narrow slide-in popout: stack the three seals one per row */
.popout-container .trustlock {
  flex-direction: column;
}

.popout-container .trustlock a {
  flex: 0 0 auto;
  max-width: 100%;
}

/* 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)
   =================================== */

/* Both rules full-bleed, so the band is closed off top and bottom. The
   carousel cards are ragged at the foot (short cards leave whitespace), so
   without the bottom line the section bleeds into whatever follows. */
.awards-settlements {
  border-top: 1px solid var(--color-aqua);
  border-bottom: 1px solid var(--color-aqua);
  padding: calc(var(--spacing-unit) * 10) 0 calc(var(--spacing-unit) * 12);
  text-align: center;
}

/* .faq-band opens with its own aqua rule (legal-team/index.html is the one
   page where it follows the carousel) — drop one or they stack into 2px. */
.awards-settlements + .faq-band {
  border-top: none;
}

.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. */
.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);
}

/* Two markups share this component. LEGACY (the other ~39 pages that carry
   the ticker — Spanish home, legal-team, contact-us, media): h2 = amount,
   h3 = "$29.1 Million for Retail Workers", h4 = byline, p = description.
   That h3 just repeats the dollar amount, so it stays hidden by default. */
.award-track .victory-container > h3 {
  display: none;
}

/* CURRENT markup, English home only: h2 = amount, h3 = who the claimants are,
   p.violation + p.outcome. Here the h3 is the byline, so show and style it.
   When another page moves to this copy, add its body class to this rule. */
.page-main-home-page .award-track .victory-container > h3 {
  display: block;
  color: var(--color-white);
  font-weight: var(--font-medium);
  font-size: var(--text-base);
  line-height: var(--leading-snug);
  text-transform: none;
  margin-top: calc(var(--spacing-unit) * 3);
}

.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 (legacy markup) */
  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);
}

/* Violation / Outcome pair. The labels take the aqua the legacy h4 byline
   carried, which is what separates the case detail from the claimants line
   above it — in the ticker the titles wrap to different depths, so a rule
   there would sit at a different height in every card. */
.victory-container > .violation {
  margin-top: calc(var(--spacing-unit) * 4);
}

.victory-container > .outcome {
  margin-top: calc(var(--spacing-unit) * 2);
}

.victory-container > :is(.violation, .outcome) > strong {
  color: var(--color-aqua);
  font-weight: var(--font-bold);
}

/* In the ticker the label gets its own line: the columns are narrow and
   centred, so a run-in label leaves the first line of text starting halfway
   across and ragged. Broken out, it reads as a caption over its own block.
   The standalone page keeps them inline — a full-width row has the space. */
.award-track .victory-container > .violation > strong,
.award-track .victory-container > .outcome > strong {
  display: block;
}

/* 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 claimants / case detail on the
   right — mirrors the live site. Markup is flat (h2 = amount, h3 = title,
   then p.violation + p.outcome, or a legacy h4 byline + p), 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;
  border-left: 0; /* the box, not the ARTICLE HEADINGS bar */
  background: var(--color-aqua);
  color: var(--color-white);
  font-weight: var(--font-bold, 700);
  font-size: clamp(1.5rem, 2.6vw, 2.25rem);
  line-height: var(--leading-normal);
  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);
  margin-bottom: 0;
  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);
  line-height: var(--leading-normal);
  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: 0;
  color: var(--color-white);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
}

/* The row is taller than the amount box, so the last paragraph — not the
   container — carries the bottom padding. */
.page-victories-and-settlements .victory-container > :last-child,
.page-victorias-y-acuerdos .victory-container > :last-child {
  margin-bottom: calc(var(--spacing-unit) * 5);
}

/* One victory per row here, so the aqua rule that used to underline the h4
   byline can come back above "Violation:" — it divides the claimants from
   the case detail without the ragged heights it would have in the ticker. */
.page-victories-and-settlements .victory-container > .violation,
.page-victorias-y-acuerdos .victory-container > .violation {
  padding-top: calc(var(--spacing-unit) * 4);
  border-top: 1px solid var(--color-aqua);
}

/* The claimants line is set larger on this page; give the pair a matching
   step up so the row doesn't collapse into fine print. The wider column also
   takes more air between the two than the narrow ticker card does. */
.page-victories-and-settlements .victory-container > :is(.violation, .outcome),
.page-victorias-y-acuerdos .victory-container > :is(.violation, .outcome) {
  font-size: 1.0625rem;
}

.page-victories-and-settlements .victory-container > .outcome,
.page-victorias-y-acuerdos .victory-container > .outcome {
  margin-top: calc(var(--spacing-unit) * 4);
}

/* 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);
  /* No text-align: center here — the section holds prose as well as the tile
     grid, so centring lives on the two parts that want it: the hub title
     below and the tile label/blurb. Prose falls to the PROSE BASELINE. */
}

/* Hub title = the section's FIRST h2 ("KNOW YOUR LEGAL RIGHTS", "Industries
   We Investigate", …). Every hub page opens the section with it; detail pages
   open with h1 and article pages with p, so a LATER h2 is a prose subheading
   and correctly falls through to the baseline. */
.legal-rights-section > h2:first-child {
  margin: 0;
  padding: 0;
  border: none;
  text-align: center;
  color: var(--color-aqua);
  font-size: clamp(2rem, 5vw, 5rem);
  line-height: 1.05;
}

/* Tiles keep their centred label + blurb (was inherited, now explicit). */
.legal-right h3,
.legal-right p {
  text-align: center;
}

.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. The section holds the h1 + intro
   copy as plain blocks; only .more-info-list (the wrapper around the tiles) is
   the grid. 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);
}

.more-info-list {
  margin-top: calc(var(--spacing-unit) * 10);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}

.section-more-information > h1 {
  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.marcellus-shale-wage-law-overtime                { 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,
  .more-info-list { grid-template-columns: repeat(3, 1fr); }
}

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

@media (max-width: 40rem) {
  .legal-right-container,
  .more-info-list { 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);
}

/* Intro paragraph: emitted as a <p> on some pages and as a <div> right after
   the <h1> on others; :not(.listing-grid) keeps the cards grid full-width.
   (current-cases/casos-actuales wrap their grid in a plain <div>, so only the
   <p> form is targeted there — never the h1+div — to avoid shrinking it.) */
/* `:not(.prose-body)` — an article that has opted into the PROSE BASELINE
   sets its own column (1280px, matching .listing-grid), so this legacy
   70rem intro column must step aside for it. */
body.page-decisions-of-interest article:not(.prose-body) > p,
body.page-decisiones-de-interes article:not(.prose-body) > p,
body.page-current-cases article:not(.current-cases-section):not(.prose-body) > p,
body.page-casos-actuales article:not(.current-cases-section):not(.prose-body) > p,
body.page-decisions-of-interest article > h1 + div:not(.listing-grid),
body.page-decisiones-de-interes article > h1 + div:not(.listing-grid) {
  max-width: 70rem;
  margin: 0 auto calc(var(--spacing-unit) * 8);
  padding: 0 calc(var(--spacing-unit) * 5);
  text-align: left; /* live left-aligns these intros (centering a long paragraph reads badly) */
  line-height: 1.5;
}

/* Current-cases / casos-actuales DETAIL pages (excluding the index grid): give
   the plain <article> one consistent text column so the title, sub-heading and
   paragraphs all align — fixes the sub-heading (e.g. "Untimely Pay") falling to
   the far-left edge. Template-scoped, so it covers every detail page at once. */
body.page-current-cases:not(#current-cases---index) article,
body.page-casos-actuales:not(#espanol---casos-actuales---index) article {
  max-width: 70rem;
  margin: 0 auto;
  padding: 0 calc(var(--spacing-unit) * 5) calc(var(--spacing-unit) * 12);
  box-sizing: border-box;
}

/* paragraphs fill the column (override the index-intro re-centering rule) */
body.page-current-cases:not(#current-cases---index) article > p,
body.page-casos-actuales:not(#espanol---casos-actuales---index) article > p {
  max-width: none;
  margin: 0 0 calc(var(--spacing-unit) * 4);
  padding: 0;
}

/* the case sub-heading (e.g. "Untimely Pay") */
body.page-current-cases:not(#current-cases---index) article > h2,
body.page-casos-actuales:not(#espanol---casos-actuales---index) article > h2 {
  margin: 0 0 calc(var(--spacing-unit) * 4);
  color: var(--color-aqua);
  font-size: var(--text-lg);
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* 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);
  border-left: 0; /* card title, not the ARTICLE HEADINGS bar */
}

/* decision date line */
.listing-card h3 {
  color: var(--color-aqua);
  font-size: 0.875rem;
  font-weight: var(--font-regular);
  line-height: var(--leading-normal);
  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);
}

/* On the Contact page the hero already says "CONTACT / FITAPELLI & SCHAFFER
   LLP", so hide the site-wide CTA's duplicate heading + divider here (the
   "CONTACT US TODAY…" line + form stay). Matches live. */
body.page-contact-us .bottom-contact > h2,
body.page-contact-us .bottom-contact > hr,
body.page-contactenos .bottom-contact > h2,
body.page-contactenos .bottom-contact > hr {
  display: none;
}

.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;
}

/* The subtitle (e.g. "NEWS & MEDIA", "IN EMPLOYMENT LAW", "FITAPELLI &
   SCHAFFER LLP") is a <span> inside the title/tagline; live renders it as a
   second line — dark, uppercase and widely letter-spaced (its .sub-heading).
   Applies to the h1 titles, the plain-<p> taglines, and the .kicker taglines. */
.page-hero-band h1 > span,
.page-hero-band p > span {
  display: block;
  margin-top: calc(var(--spacing-unit) * 1);
  color: var(--color-blue);
  font-weight: var(--font-light);
  font-size: clamp(1rem, 2.6vw, 2.25rem);
  letter-spacing: clamp(4px, 1.6vw, 21px);
  line-height: 1.3;
  text-transform: uppercase;
}

.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;
}

/* ===================================
   LEGAL TEAM — two new sections
     1. .credentials  — reference table, sits inside the cloud-bg article
     2. .faq-band     — full-width band, same language as .awards-settlements

   Proposed addition to main.css (after the LEGAL TEAM PAGE block).
   =================================== */


/* ===================================
   1. CREDENTIALS REFERENCE TABLE

   A real <table> (it IS tabular data — the point is comparing attorneys
   row-to-row), skinned as a dark data panel so it reads like the .team
   cards above it: aqua-tinted fill, aqua-alpha borders, hover tint.

   Width matches .team-copy / .team-page (1200px) so all three left edges
   line up. Below --step-min the table collapses into one stacked card per
   attorney, so there is never a horizontal scrollbar.
   =================================== */

.credentials {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 0 calc(var(--spacing-unit) * 10);
  box-sizing: border-box;
}

/* reuses the sub-bar heading language from .team-copy h2 */
.credentials > 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);
  font-family: var(--font-heading);
  font-weight: var(--font-regular);
  font-size: var(--text-lg);
  line-height: 1.3;
  text-transform: uppercase;
}

.credentials-table {
  width: 100%;
  border-collapse: collapse;
  background: rgba(0, 150, 255, 0.07);
  border: 1px solid rgba(0, 150, 255, 0.28);
  font-size: var(--text-base);
  text-align: left;
}

/* header row: aqua Oswald caps on a slightly stronger fill, closed off by a
   full-strength aqua rule — the same trick the .team card border uses */
.credentials-table thead th {
  padding: 14px 20px;
  background: rgba(0, 150, 255, 0.18);
  border-bottom: 1px solid var(--color-aqua);
  color: var(--color-aqua);
  font-family: var(--font-heading);
  font-weight: var(--font-medium);
  font-size: var(--text-sm);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  white-space: nowrap;
}

/* column rhythm: the name stays tight, case focus gets the slack */
.credentials-table thead th:nth-child(1) { width: 17%; }
.credentials-table thead th:nth-child(2) { width: 25%; }
.credentials-table thead th:nth-child(3) { width: 26%; }
.credentials-table thead th:nth-child(4) { width: 32%; }

.credentials-table tbody th,
.credentials-table tbody td {
  padding: 16px 20px;
  border-top: 1px solid rgba(0, 150, 255, 0.16);
  color: #c3d4e8;
  line-height: var(--leading-normal);
  vertical-align: top;
  font-weight: var(--font-regular);
}

/* zebra + hover, both in aqua alpha so the panel never changes hue */
.credentials-table tbody tr:nth-child(even) {
  background: rgba(0, 150, 255, 0.05);
}

.credentials-table tbody tr:hover {
  background: rgba(0, 150, 255, 0.13);
}

/* row header = the attorney, in white Oswald like .team-name, and linked to
   the bio page so the table doubles as a second route into the profiles */
.credentials-table tbody th {
  color: var(--color-white);
  font-family: var(--font-heading);
  font-size: 1.0625rem;
  line-height: 1.2;
  text-align: left;
}

.credentials-table tbody th a {
  color: var(--color-white);
  text-decoration: none;
  border-bottom: 1px solid rgba(0, 150, 255, 0.55);
}

.credentials-table tbody th a:hover,
.credentials-table tbody th a:focus {
  color: var(--color-aqua);
  border-bottom-color: var(--color-aqua);
}

/* the role sits under the name, aqua caps, like .team-title */
.credentials-table .credentials-role {
  display: block;
  margin-top: 4px;
  color: var(--color-aqua);
  font-size: var(--text-xs);
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* --- stacked cards on small screens ---------------------------------- */
@media (max-width: 48rem) {
  .credentials-table {
    background: none;
    border: none;
  }

  .credentials-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .credentials-table tbody tr {
    display: block;
    margin-bottom: 18px;
    background: rgba(0, 150, 255, 0.1);
    border: 1px solid rgba(0, 150, 255, 0.28);
  }

  .credentials-table tbody tr:nth-child(even) {
    background: rgba(0, 150, 255, 0.1);
  }

  .credentials-table tbody th,
  .credentials-table tbody td {
    display: block;
    padding: 12px 18px;
    border-top: none;
  }

  .credentials-table tbody th {
    padding-top: 16px;
    padding-bottom: 14px;
    background: rgba(0, 150, 255, 0.16);
    border-bottom: 1px solid rgba(0, 150, 255, 0.3);
    font-size: 1.125rem;
  }

  /* the column head comes back as an inline label above each value */
  .credentials-table tbody td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 4px;
    color: var(--color-aqua);
    font-family: var(--font-heading);
    font-size: var(--text-xs);
    letter-spacing: 1.5px;
    text-transform: uppercase;
  }

  .credentials-table tbody td + td {
    border-top: 1px solid rgba(0, 150, 255, 0.12);
  }
}


/* ===================================
   DATA TABLE — any table pasted into page copy

   <table class="data-table"> is the table Style offered by the page editor
   (equipe:editor-tag-classes). Deliberately unscoped so it works in the copy
   of every section. Same skin as .credentials-table above — aqua-tinted
   panel, aqua Oswald caps header closed off by a full-strength aqua rule,
   zebra rows — minus the parts that only fit that one table (fixed column
   widths, stacked cards fed by data-label).

   The header is the <thead> row; a table pasted without a <thead> still
   gets the header look on any <th> cell. Below --step-min the table scrolls
   sideways inside its own box instead of pushing the page wider.
   =================================== */

.data-table {
  width: 100%;
  margin: 0 0 calc(var(--spacing-unit) * 6);
  border-collapse: collapse;
  background: rgba(0, 150, 255, 0.07);
  border: 1px solid rgba(0, 150, 255, 0.28);
  font-family: var(--font-body);
  font-size: var(--prose-size);
  line-height: var(--leading-normal);
  text-align: left;
}

.data-table th {
  padding: 14px 20px;
  background: rgba(0, 150, 255, 0.18);
  border-bottom: 1px solid var(--color-aqua);
  color: var(--color-aqua);
  font-family: var(--font-heading);
  font-weight: var(--font-medium);
  font-size: var(--text-sm);
  line-height: 1.3;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  text-align: left;
  vertical-align: bottom;
}

.data-table td {
  padding: 14px 20px;
  border-top: 1px solid rgba(0, 150, 255, 0.16);
  color: #c3d4e8;
  vertical-align: top;
}

.data-table tbody tr:nth-child(even) {
  background: rgba(0, 150, 255, 0.05);
}

.data-table tbody tr:hover {
  background: rgba(0, 150, 255, 0.13);
}

/* --- small screens: scroll inside the table, never the page ------------ */
@media (max-width: 48rem) {
  .data-table {
    display: block;
    overflow-x: auto;
    font-size: var(--text-base);
  }

  .data-table th,
  .data-table td {
    padding: 12px 14px;
  }
}


/* ===================================
   2. FAQ BAND

   Same band language as .awards-settlements and .bottom-contact: aqua top
   rule, centred two-line heading, short <hr>.

   The body is the flat pair sequence sitebuilder emits -- alternating
   <p class="faq-question"> / <p class="faq-answer"> siblings, no per-pair
   wrapper (see the note at the .team-copy .faq-question rule). So a "card"
   has to be assembled out of two siblings, and adjacent-sibling selectors do
   it: the template can keep emitting an arbitrary number of pairs with no
   markup change here.

   Two layouts, mobile first:
     - narrow: question stacked on its answer, borders split top/bottom
     - >= 64rem: a 2-column grid at the same 1200px as .credentials and
       .team-page. Grid auto-placement fills row by row, so Q lands in
       column 1 and its A in column 2 -- one row per pair, no wrapper, and
       the answer column stays at a readable measure instead of running the
       full 1200px.

   No accordion: with nothing wrapping a pair there is no element to toggle,
   so every answer is visible. That is also the safer read for the FAQPage
   JSON-LD (all of it is genuinely on the page) and removes the need for JS.
   =================================== */

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

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

.faq-band > 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);
}

.faq-band 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);
}

/* running text goes back to left-aligned inside the centred band */
.faq-list {
  max-width: 1200px;
  margin: calc(var(--spacing-unit) * 8) auto 0;
  text-align: left;
}

/* --- shared skin ------------------------------------------------------- */

/* Question: Oswald, but NOT uppercased -- a full sentence in caps is hard to
   read; .victory-container h4 sets the same precedent. */
.faq-list .faq-question {
  background: rgba(0, 150, 255, 0.17);
  border: 1px solid rgba(0, 150, 255, 0.28);
  border-left: 3px solid var(--color-aqua);
  color: var(--color-white);
  font-family: var(--font-heading);
  font-weight: var(--font-regular);
  font-size: 1.1875rem;
  line-height: 1.3;
}

.faq-list .faq-answer {
  background: rgba(0, 150, 255, 0.07);
  border: 1px solid rgba(0, 150, 255, 0.28);
  color: #c3d4e8;
  font-size: 1.0625rem;
  line-height: var(--leading-relaxed);
}

.faq-list .faq-answer a {
  color: var(--color-aqua);
  text-decoration: underline;
}

/* --- narrow: stacked, borders split top/bottom ------------------------- */

.faq-list .faq-question {
  margin: 14px 0 0;
  padding: 14px 18px 12px;
  border-bottom: none;
}

.faq-list .faq-answer {
  margin: 0;
  padding: 14px 18px 16px;
  border-top: 1px solid rgba(0, 150, 255, 0.22); /* hairline split, not a gap */
  border-left: 3px solid var(--color-aqua);      /* spine continues */
}

.faq-list .faq-question:first-child { margin-top: 0; }

/* A question that follows an answer starts a new card -- the only place the
   gap between pairs is set, so pairs never drift apart. */
.faq-list .faq-answer + .faq-question { margin-top: 14px; }

/* Consecutive answers (a multi-paragraph answer) stack inside one box. */
.faq-list .faq-answer + .faq-answer {
  border-top: none;
  padding-top: 0;
}

/* Defensive: a trailing question with no answer, or an answer opening the
   run, still closes its own box instead of leaving a borderless edge. */
.faq-list .faq-question:last-child {
  border-bottom: 1px solid rgba(0, 150, 255, 0.28);
}
.faq-list .faq-answer:first-child {
  border-top-color: rgba(0, 150, 255, 0.28);
}

/* --- >= 64rem: question left, answer right, one row per pair ----------- */

@media (min-width: 64rem) {
  .faq-list {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    row-gap: 14px;
  }

  /* row-gap owns the spacing now, so drop every margin rule above */
  .faq-list .faq-question,
  .faq-list .faq-answer,
  .faq-list .faq-answer + .faq-question,
  .faq-list .faq-question:first-child {
    margin: 0;
  }

  .faq-list .faq-question {
    padding: 18px 22px;
    border: 1px solid rgba(0, 150, 255, 0.28);
    border-right: none;
    border-left: 3px solid var(--color-aqua);
  }

  .faq-list .faq-answer {
    padding: 18px 24px;
    border: 1px solid rgba(0, 150, 255, 0.28);
    /* the split is now vertical, between the two columns */
    border-left: 1px solid rgba(0, 150, 255, 0.22);
  }

  /* the stacked-layout special cases don't apply on a grid row */
  .faq-list .faq-answer + .faq-answer {
    border-top: 1px solid rgba(0, 150, 255, 0.28);
    padding-top: 18px;
  }

  .faq-list .faq-question:last-child {
    border-right: 1px solid rgba(0, 150, 255, 0.28);
  }
}

/* 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;
}

/* In-copy lists. No rule existed for these, so they fell through to the
   global ul{list-style:none} (which is there for nav menus) plus the *
   reset: no marker, no indent, no spacing between items, and 1rem text
   sitting next to 1.25rem paragraphs. Match the paragraph scale and put
   the marker back on the left. Applies to the 25 article pages that carry
   a plain <ul>/<ol> in the copy; every one of those lists is unclassed,
   so nothing else is caught. */
.content-main ul,
.content-main ol {
  margin: 0 0 calc(var(--spacing-unit) * 4);
  padding-left: calc(var(--spacing-unit) * 6);
  font-size: 1.25rem; /* 20px — same as .content-main p */
  line-height: 1.4;
  letter-spacing: 1px;
}

.content-main ul { list-style: disc; }
.content-main ol { list-style: decimal; }

.content-main li {
  margin: 0 0 calc(var(--spacing-unit) * 2);
}

.content-main li::marker {
  color: var(--color-aqua);
}

/* --- Inline call-to-action -------------------------------------------------
   A short "does this sound like you? → call us" beat placed between
   paragraphs of article copy. Deliberately quiet: it reuses the FAQ panel
   skin (aqua wash + 3px aqua left rule) so it reads as part of the page, and
   stays away from the orange CTA gradient, which is the loud register kept
   for the contact form's submit button. Drop <aside class="inline-cta"> into
   any article; it isn't tied to this page type. */
.inline-cta {
  margin: calc(var(--spacing-unit) * 7) 0;
  padding: calc(var(--spacing-unit) * 4) calc(var(--spacing-unit) * 5);
  background: rgba(0, 150, 255, 0.1);
  border: 1px solid rgba(0, 150, 255, 0.22);
  border-left: 3px solid var(--color-aqua);
}

/* TWO MARKUP SHAPES are supported, because a WYSIWYG editor may refuse to
   emit a block-level <aside> with nested <p>s (it previously flattened
   <div class="media-container"> the same way):

   (a) rich:  <aside class="inline-cta">
                <p class="cta-hook">Question?</p>
                <p class="cta-action">Call <a href="tel:…">(212) 300-0375</a> …</p>
              </aside>

   (b) flat:  <p class="inline-cta">
                <strong>Question?</strong><br>
                Call <a href="tel:…">(212) 300-0375</a> …
              </p>

   Both render identically. Shape (b) is one paragraph, one class, a <strong>,
   a <br> and a link — all things an editor preserves. */

/* Body copy here is justified with 1px letter-spacing at 1.25rem; CTA lines
   are short, so reset all three or they comb out badly. The p.inline-cta
   selector is needed to outrank .content-main p on the flat shape. */
.inline-cta p,
p.inline-cta {
  margin: 0;
  text-align: left;
  letter-spacing: 0;
}

p.inline-cta {
  margin: calc(var(--spacing-unit) * 7) 0;
}

/* the hook line — .cta-hook in the rich shape, <strong> in the flat one */
.inline-cta .cta-hook,
.inline-cta > strong {
  display: block;
  margin-bottom: calc(var(--spacing-unit) * 1.5);
  color: var(--color-white);
  font-family: var(--font-heading);
  font-weight: var(--font-light);
  font-size: var(--text-lg);
  line-height: 1.3;
}

/* The hook is display:block, so a <br> straight after it would render an
   empty line. Editors add one by habit — swallow it so both shapes match. */
.inline-cta > strong + br {
  display: none;
}

/* The action line. The flat shape needs the class written twice: a mobile
   rule further down (.content-main p, ~line 4290) sets 1.125rem at the same
   specificity as p.inline-cta and, being later, would win. Doubling the class
   makes this (0,2,1) so it holds regardless of source order. The rich shape
   is already safe — .inline-cta .cta-action is two classes. */
.inline-cta .cta-action,
p.inline-cta.inline-cta {
  color: rgba(255, 255, 255, 0.8);
  font-size: 1.0625rem;
  line-height: 1.4;
}

.inline-cta a {
  color: var(--color-aqua);
  font-weight: var(--font-semibold);
  white-space: nowrap; /* never break a phone number across lines */
}

.inline-cta a:hover {
  text-decoration: underline;
}

/* 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 h2` as well as the class: the English legal-team bios carry
   the heading as class="tcontent-side-heading" (a typo in the template), so
   only the element selector reaches it and makes it match the Spanish bios
   and the workers-rights sidebar. It also outranks the ARTICLE HEADINGS
   default, which would otherwise push the heading down 32px. */
.content-side-heading,
.content-side h2 {
  color: var(--color-white);
  font-size: 1.25rem;
  line-height: var(--leading-normal);
  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: the ARTICLE HEADINGS default (all of these
   wrappers are <article>s), so no rule here */

/* 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,
body#more-information---index .section-more-information > p,
body#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);
}

/* FAQ: each <h2> question may be followed by a <ul> of sub-topics, one per
   <li>, each an <h3> (ARTICLE HEADINGS default) + <p>. The p rule above is
   direct-child only, so give these paragraphs the same spacing. */
body.page-frequently-asked-questions article li > p,
body.page-preguntas-frequentes article li > p {
  margin: 0 0 calc(var(--spacing-unit) * 4);
}

/* Generic pages (thank-you, gracias, sitemap, free-consultation) carry
   body.page-generic-page with a bare <article>; centre + width-constrain it so
   the heading/paragraphs don't run edge-to-edge. The h1 is centred, running
   copy is left-aligned (it reads better and matches the sitemap's lists,
   which keep their own layout). */
body.page-generic-page article {
  max-width: 62rem;
  margin: 0 auto;
  padding: calc(var(--spacing-unit) * 10) calc(var(--spacing-unit) * 5)
    calc(var(--spacing-unit) * 16);
  box-sizing: border-box;
}

body.page-generic-page article > h1 {
  margin: 0 0 calc(var(--spacing-unit) * 5);
  color: var(--color-aqua);
  text-align: center;
  font-size: clamp(1.75rem, 4vw, 3rem);
  line-height: 1.1;
}

body.page-generic-page article > p {
  margin: 0 0 calc(var(--spacing-unit) * 4);
  color: var(--color-white);
  font-size: 1.125rem;
  line-height: var(--leading-normal);
  text-align: left;
}

/* Exception: the confirmation and not-found pages are two short lines under a
   centred heading — left-aligning them just leaves a ragged gap, so they stay
   centred. (404 needs an attribute selector: an id starting with a digit can't
   be written as #404.) */
body#thank-you---index article > p,
body#espanol---gracias---index article > p,
body[id="404"] article > p {
  text-align: center;
}

/* ===================================
   MEDIA / NEWS page — video gallery (2-up cards on aqua, live .media-flex)
   The <article> is the centred, width-constrained column holding the h1 +
   intro copy; .media-section inside it wraps only the video cards.
   =================================== */
body.page-media article,
body.page-medios article {
  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;
}

body.page-media article > h1,
body.page-medios article > h1 {
  margin: 0 0 calc(var(--spacing-unit) * 5);
  color: var(--color-aqua);
  text-align: center;
  font-size: clamp(1.75rem, 4vw, 3rem);
  line-height: 1.1;
}

body.page-media article > p,
body.page-medios article > p {
  margin: 0 0 calc(var(--spacing-unit) * 4);
  color: var(--color-white);
  font-size: 1.125rem;
  line-height: var(--leading-normal);
}

body.page-media .media-section,
body.page-medios .media-section {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--spacing-unit) * 5);
  margin-top: calc(var(--spacing-unit) * 8);
}

/* Each video + title + description must be wrapped in a real block */
.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 > 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;
}

.media-container > p { /* 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);
}

/* ===================================
   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 */
}

/* Policy pages (Privacy Policy, Terms, Legal Notices — EN + ES) ship a bare
   <section class="policy-section"> whose text ran flush edge-to-edge with no
   container. Give it the same centered reading column + bar headings as the
   other interior text pages (More Information / FAQ / Super Lawyers). */
.policy-section {
  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;
}

.policy-section > 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-transform: uppercase;
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  line-height: 1.2;
}

.policy-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;
}

.policy-section > p {
  margin: 0 0 calc(var(--spacing-unit) * 4);
  color: var(--color-white);
  font-size: 1.125rem;
  line-height: var(--leading-normal);
}

.policy-section ol,
.policy-section 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);
}

.policy-section li {
  margin: 0 0 calc(var(--spacing-unit) * 2);
}

.policy-section a {
  color: var(--color-aqua);
}

/* 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);
}

/* sub-heading — same compact aqua bar as the .prose-body baseline */
.prose > h2,
.prose > h3 {
  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);
  text-transform: uppercase;
  font-size: var(--text-lg);
  line-height: 1.3;
}

/* lists get their markers back — the global ul{list-style:none} is for nav.
   Descendant (not direct-child) selectors, so lists wrapped in a div still get
   styled. */
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }

.prose ul,
.prose ol {
  margin: 0 0 calc(var(--spacing-unit) * 6);
  padding-left: calc(var(--spacing-unit) * 6);
  line-height: 1.6;
}

.prose li {
  margin: 0 0 calc(var(--spacing-unit) * 2);
}

.prose li::marker {
  color: var(--color-aqua);
}

/* Charity & Community Involvement — same .prose wrapper as Our Practice, with an
   intro line + supporter logos. Scoped to the charity pages so h2s added to
   Our Practice keep the aqua-bar sub-heading above. */
#our-practice---charity .prose h2,
#espanol---acerca-de-la-firma---caridad .prose h2 {
  border-left: none;
  padding: 0;
  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);
  padding: 0;     /* a post title, not the ARTICLE HEADINGS bar */
  border-left: 0;
}

.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;
  }
  /* keep in-copy lists on the same scale as the paragraphs */
  .content-main ul,
  .content-main ol {
    font-size: 1.125rem;
  }
  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)

   v2 — cards carry a short bio, and the page takes free copy above and
   below the grid. Requires the updated card markup: the name/title/bio/link
   live inside a .team-text wrapper, and the role is NOT emitted as a class.
   =================================== */

/* full-width "marble" band behind the team grid (unchanged) */
#legal-team---index article,
#espanol---nuestra-firma---index article {
  background: #0a0d20 url("../images/background-cloud.gif") repeat;
  padding: 0 20px;
}

/* --- copy blocks (above and below the grid) ---------------------------
   One reusable container. Nothing inside it but h2 / h3 / p / ul / li.
   Left-aligned, and its left edge lines up with the card grid.

   These MUST be siblings of .team-page, never children of it: .team-page is
   a grid whose tiers are chosen by :nth-child, so any extra child would
   renumber the cards and break the featured pair.

   This page has NO generic `article p / h2 / ul` styling to inherit -- every
   such rule in main.css is scoped to a body class that legal-team does not
   carry -- so all of it has to be declared here.
   --------------------------------------------------------------------- */

.team-copy {
  max-width: 1200px;
  margin: 0 auto;
  padding: calc(var(--spacing-unit) * 10) 0 calc(var(--spacing-unit) * 4);
  color: #c3d4e8;
  font-size: 1.125rem;
  line-height: var(--leading-normal);
  text-align: left;
  box-sizing: border-box;
}

/* The container matches the grid width so left edges align, but running text
   is capped so lines stay readable instead of stretching to 1200px. Use a rem
   cap, not ch -- Open Sans Condensed has a very narrow ch, so 72ch lands
   around 500px and leaves the column looking stranded. */
.team-copy p,
.team-copy ul { max-width: 48rem; }

/* section headings reuse the site's existing sub-bar language: uppercase,
   white, 5px aqua rule on the left (see .sub-bar-heading on the FAQ,
   Super Lawyers and More Information pages) */
.team-copy 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);
  font-family: var(--font-heading);
  font-weight: var(--font-regular);
  font-size: var(--text-lg);
  line-height: 1.3;
  text-transform: uppercase;
}

.team-copy > h2:first-child { margin-top: 0; }

/* Sub-headings. sitebuilder emits FAQ pairs as
   <p class="faq-question"> / <p class="faq-answer">, so .faq-question is
   styled as a heading even though it is a <p>. The class selector outranks
   the generic `.team-copy p` rule below, so its margins win. */
.team-copy h3,
.team-copy .faq-question {
  margin: calc(var(--spacing-unit) * 6) 0 calc(var(--spacing-unit) * 2);
  max-width: 48rem;
  color: var(--color-white);
  font-family: var(--font-heading);
  font-weight: var(--font-regular);
  font-size: 1.375rem;
  line-height: 1.3;
}

.team-copy .faq-answer { margin: 0 0 calc(var(--spacing-unit) * 4); }

/* p has no default margin on this page -- without this, paragraphs collapse
   into one another */
.team-copy p { margin: 0 0 calc(var(--spacing-unit) * 4); }
.team-copy > *:last-child { margin-bottom: 0; }

/* the closing block butts up against the shared awards band, so give it room */
.team-copy:last-child { padding-bottom: calc(var(--spacing-unit) * 12); }

/* a global reset strips list markers */
.team-copy ul {
  margin: 0 0 calc(var(--spacing-unit) * 6);
  padding-left: calc(var(--spacing-unit) * 6);
  list-style: disc outside;
}

.team-copy li { margin: 0 0 calc(var(--spacing-unit) * 2); }

/* inline links need the underline back -- aqua alone is colour-only */
.team-copy a {
  color: var(--color-aqua);
  text-decoration: underline;
}

/* --- the grid ----------------------------------------------------------
   A 6-column track lets the 2-up featured pair (span 3) and the 3-up
   remainder (span 2) share ONE grid, so both tiers stay on the same
   alignment system. Every card is identical markup; :nth-child does the
   tiering, so the template stays a single flat loop.
   --------------------------------------------------------------------- */

.team-page {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 26px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0;
  box-sizing: border-box;
}

.team:nth-child(-n + 2) { grid-column: span 3; }
.team:nth-child(n + 3)  { grid-column: span 2; }

/* --- the card ---------------------------------------------------------- */

.team {
  position: relative;
  display: grid;
  max-width: none;
  margin: 0;
  padding: 0;
  background: rgba(0, 150, 255, 0.16);
  border: 1px solid rgba(0, 150, 255, 0.28);
  box-sizing: border-box;
  overflow: hidden;
  transition: background 0.2s linear, border-color 0.2s linear,
    transform 0.2s ease;
}

.team:hover {
  background: rgba(0, 150, 255, 0.3);
  border-color: var(--color-aqua);
  transform: translateY(-3px);
}

.team > img {
  float: none;
  width: 100%;
  margin: 0;
  display: block;
  object-fit: cover;
}

.team-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 22px 24px 20px;
}

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

.team .team-name {
  color: var(--color-white);
  font-weight: var(--font-regular);
  line-height: 1.15;
  margin: 0 0 2px;
}

.team .team-title {
  color: var(--color-aqua);
  line-height: 1.2;
  text-transform: uppercase;
  margin: 0 0 14px;
}

.team-bio {
  color: #c9d9ec;
  line-height: 1.62;
  margin: 0 0 20px;
}

/* VIEW PROFILE is a real link pinned to the bottom of the text column.
   The ::after stretches it over the whole card so the card stays clickable
   without a panel covering the bio. */
.team .team-profile {
  position: static;
  margin-top: auto;
  padding: 8px 16px;
  font-size: 14px;
  letter-spacing: 2px;
  color: var(--color-white);
  text-decoration: none;
  white-space: nowrap;
  border: 1px solid var(--color-aqua);
  background: rgba(0, 150, 255, 0.35);
  transition: background 0.2s linear;
}

.team:hover .team-profile { background: var(--color-aqua); }

.team .team-profile::after { content: ""; position: absolute; inset: 0; }

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

/* --- tier 1: the featured pair (photo left, text right) ----------------
   min-height stops the featured row reading SHORTER than the stacked
   cards below it, which would invert the hierarchy. */

.team:nth-child(-n + 2) {
  grid-template-columns: 46% minmax(0, 1fr);
  min-height: 460px;
}

.team:nth-child(-n + 2) > img { height: 100%; object-position: 50% 12%; }
.team:nth-child(-n + 2) .team-text  { padding: 30px 32px 28px; }
.team:nth-child(-n + 2) .team-name  { font-size: 26px; }
.team:nth-child(-n + 2) .team-title { font-size: 17px; letter-spacing: 3px; }
.team:nth-child(-n + 2) .team-bio   { font-size: 17px; }

/* --- tier 2: everyone else (stacked, photo on top) ---------------------
   A square crop keeps these from towering over the featured pair. A 3-up
   HORIZONTAL card would leave only ~165px for the bio, hence stacking. */

.team:nth-child(n + 3) { grid-template-columns: minmax(0, 1fr); }

.team:nth-child(n + 3) > img {
  aspect-ratio: 1 / 1;
  height: auto;
  object-position: 50% 8%;
}

.team:nth-child(n + 3) .team-name  { font-size: 23px; }
.team:nth-child(n + 3) .team-title { font-size: 15px; letter-spacing: 2.5px; }
.team:nth-child(n + 3) .team-bio   { font-size: 15px; }

/* --- tablet: everything drops to 2-up and goes horizontal again -------- */

@media (max-width: 64rem) {
  .team-page { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .team:nth-child(-n + 2),
  .team:nth-child(n + 3) {
    grid-column: span 1;
    grid-template-columns: 40% minmax(0, 1fr);
  }

  .team:nth-child(-n + 2) { min-height: 0; }

  .team:nth-child(-n + 2) > img,
  .team:nth-child(n + 3) > img { aspect-ratio: auto; height: 100%; }

  .team:nth-child(-n + 2) .team-text,
  .team:nth-child(n + 3) .team-text { padding: 22px 24px 20px; }

  .team:nth-child(-n + 2) .team-name,
  .team:nth-child(n + 3) .team-name  { font-size: 22px; }

  .team:nth-child(-n + 2) .team-title,
  .team:nth-child(n + 3) .team-title { font-size: 15px; }

  .team:nth-child(-n + 2) .team-bio,
  .team:nth-child(n + 3) .team-bio   { font-size: 15px; }
}

/* --- phone: single column, photo stays beside the text ----------------- */

@media (max-width: 48rem) {
  .team-page { grid-template-columns: minmax(0, 1fr); gap: 18px; }

  .team:nth-child(-n + 2),
  .team:nth-child(n + 3) { grid-template-columns: 38% minmax(0, 1fr); }

  .team:nth-child(-n + 2) .team-text,
  .team:nth-child(n + 3) .team-text { padding: 16px 16px 14px; }

  .team:nth-child(-n + 2) .team-name,
  .team:nth-child(n + 3) .team-name  { font-size: 20px; }

  .team:nth-child(-n + 2) .team-bio,
  .team:nth-child(n + 3) .team-bio   { font-size: 14.5px; margin-bottom: 14px; }

  .team-intro,
  .team-outro { font-size: 16px; }

  /* the old rule hid this on phones because the whole card was the tap
     target; with a bio present we want a visible affordance again */
  .team .team-profile { display: inline-block; }
}


/* ===================================
   SEARCH RESULTS PAGE (/search/)
   =================================== */

.equipe-search {
  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;
}

/* --- Query box at the top of the results --- */
.equipe-search > form {
  display: flex;
  max-width: 34rem;
  margin: 0 0 calc(var(--spacing-unit) * 8);
}

.equipe-search > form input[type="search"] {
  flex: 1 1 auto;
  min-width: 0;
  height: 3rem;
  font-family: inherit;
  font-size: var(--text-lg);
  color: var(--color-blue);
  background: var(--color-white);
  padding: 0 calc(var(--spacing-unit) * 4);
  border: 2px solid var(--color-aqua);
  border-right: none;
  border-radius: 4px 0 0 4px;
  outline: 0;
  -webkit-appearance: none;
  appearance: none;
}

.equipe-search > form input[type="search"]::placeholder {
  color: rgba(0, 30, 52, 0.5);
  opacity: 1;
}

.equipe-search > form button {
  flex: 0 0 auto;
  height: 3rem;
  font-family: var(--font-heading);
  font-size: var(--text-base);
  font-weight: var(--font-medium);
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--color-white);
  background: var(--color-aqua);
  padding: 0 calc(var(--spacing-unit) * 6);
  border: 2px solid var(--color-aqua);
  border-radius: 0 4px 4px 0;
  cursor: pointer;
}

.equipe-search > form button:hover {
  background: var(--color-white);
  color: var(--color-blue);
}

/* --- Summary / status lines --- */
.equipe-search .sitesearch-summary {
  font-family: var(--font-heading);
  font-weight: var(--font-light);
  font-size: var(--text-xl);
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--color-white);
  margin: 0 0 calc(var(--spacing-unit) * 5);
  padding-bottom: calc(var(--spacing-unit) * 3);
  border-bottom: 1px solid rgba(0, 150, 255, 0.4);
}

.equipe-search .sitesearch-status {
  color: rgba(255, 255, 255, 0.7);
  font-style: normal;
}

.equipe-search .sitesearch-error {
  color: var(--color-orange);
}

.equipe-search .sitesearch-suggestion {
  color: rgba(255, 255, 255, 0.8);
  margin: 0 0 calc(var(--spacing-unit) * 6);
}

.equipe-search .sitesearch-suggestion a {
  color: var(--color-cyan);
  font-weight: var(--font-bold);
}

/* --- Two-column layout: filters rail + results --- */
@media (min-width: 45rem) {
  .equipe-search .sitesearch-layout {
    gap: calc(var(--spacing-unit) * 8);
  }
}

/* --- Filters rail --- */
.equipe-search .sitesearch-facets {
  background: var(--color-blue-deep);
  padding: calc(var(--spacing-unit) * 5);
}

.equipe-search .sitesearch-facets h3 {
  color: var(--color-aqua);
  font-size: var(--text-xl);
  font-weight: var(--font-light);
  letter-spacing: 1px;
  margin: 0 0 calc(var(--spacing-unit) * 3);
  padding-bottom: calc(var(--spacing-unit) * 2);
  border-bottom: 1px solid rgba(0, 150, 255, 0.4);
}

.equipe-search .sitesearch-facets h4 {
  color: var(--color-orange);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  letter-spacing: 1px;
  margin: calc(var(--spacing-unit) * 5) 0 calc(var(--spacing-unit) * 2);
}

.equipe-search .sitesearch-facet-group:first-of-type h4 {
  margin-top: 0;
}

.equipe-search .sitesearch-facets li {
  margin: 0;
}

.equipe-search .sitesearch-facet {
  display: block;
  color: rgba(255, 255, 255, 0.85);
  font-size: var(--text-sm);
  padding: calc(var(--spacing-unit)) 0;
}

.equipe-search .sitesearch-facet:hover {
  color: var(--color-aqua);
}

.equipe-search .sitesearch-facet.on {
  color: var(--color-cyan);
  font-weight: var(--font-bold);
}

.equipe-search .sitesearch-clear {
  display: inline-block;
  color: var(--color-orange);
  font-size: var(--text-sm);
  margin-bottom: calc(var(--spacing-unit) * 2);
}

/* --- Result cards (same dark card as the blog roll) --- */
.equipe-search .sitesearch-result {
  background: var(--color-blue-deep);
  border-left: 4px solid transparent;
  padding: calc(var(--spacing-unit) * 5);
  margin: 0 0 calc(var(--spacing-unit) * 4);
  transition: border-color 0.2s linear;
}

.equipe-search .sitesearch-result:hover {
  border-left-color: var(--color-aqua);
}

.equipe-search .sitesearch-result h3 {
  font-size: var(--text-lg);
  font-weight: var(--font-medium);
  text-transform: none;
  line-height: var(--leading-snug);
  margin: 0 0 calc(var(--spacing-unit));
}

.equipe-search .sitesearch-result h3 a {
  color: var(--color-white);
}

.equipe-search .sitesearch-result h3 a:hover {
  color: var(--color-aqua);
}

/* doc type · language · page type */
.equipe-search .sitesearch-meta {
  color: var(--color-orange);
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: calc(var(--spacing-unit) * 2);
}

.equipe-search .sitesearch-snippet {
  color: rgba(255, 255, 255, 0.8);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
}

/* Keyword hit: the vendor's yellow highlighter reads as an error on the dark
   page — use the site's bright cyan accent on a faint aqua wash instead. */
.equipe-search .sitesearch-snippet mark {
  background: rgba(0, 150, 255, 0.18);
  color: var(--color-cyan);
  font-weight: var(--font-bold);
  padding: 0 2px;
  border-radius: 2px;
}

/* --- Pagination --- */
.equipe-search .sitesearch-pagination {
  justify-content: center;
  gap: calc(var(--spacing-unit) * 6);
  margin: calc(var(--spacing-unit) * 10) 0 0;
  padding-top: calc(var(--spacing-unit) * 6);
  border-top: 1px solid rgba(0, 150, 255, 0.4);
}

.equipe-search .sitesearch-pagelink {
  color: var(--color-white);
  font-weight: var(--font-bold);
  font-size: var(--text-base);
  letter-spacing: 1px;
  text-transform: uppercase;
  background: var(--color-aqua);
  padding: calc(var(--spacing-unit) * 2) calc(var(--spacing-unit) * 6);
}

.equipe-search .sitesearch-pagelink:hover {
  background: var(--color-white);
  color: var(--color-blue);
}

.equipe-search .sitesearch-page {
  color: rgba(255, 255, 255, 0.7);
  font-family: var(--font-heading);
  letter-spacing: 1px;
}

/* Query box goes full width on phones */
@media (max-width: 48rem) {
  .equipe-search > form {
    max-width: none;
  }
}

/* Below the widget's own two-column breakpoint (720px) the filter rail stacks
   above the results. Left as a vertical list it would push every result off
   the first screen, so the facet values become wrapping chips instead. */
@media (max-width: 44.99rem) {
  .equipe-search .sitesearch-facets {
    margin-bottom: calc(var(--spacing-unit) * 6);
  }

  .equipe-search .sitesearch-facets ul {
    display: flex;
    flex-wrap: wrap;
    gap: calc(var(--spacing-unit) * 1.5);
  }

  .equipe-search .sitesearch-facet {
    padding: calc(var(--spacing-unit)) calc(var(--spacing-unit) * 3);
    font-size: var(--text-xs);
    border: 1px solid rgba(0, 150, 255, 0.5);
    border-radius: 999px;
  }

  .equipe-search .sitesearch-facet.on {
    color: var(--color-white);
    background: var(--color-aqua);
    border-color: var(--color-aqua);
  }
}

/* ===================================
   UTILITIES
   Small single-purpose classes, added to a section alongside its component
   class. They live at the END of the sheet so they win against the component
   rules above on equal specificity — keep new utilities here.
   =================================== */

/* Close the gap to whatever follows — e.g. a tile grid sitting directly on
   top of its <article class="prose-body">. */
.flush-bottom {
  padding-bottom: 0;
}

/* Same, for the top edge. */
.flush-top {
  padding-top: 0;
}