/* =====================================================================
   Law Senate — Arbitration Law Firm
   Design system. Palette derived from the logo:
   black · white · red · dark grey · metallic grey.
   ===================================================================== */

:root {
  --ls-red: #c62828;
  --ls-red-dark: #a41e1e;
  --ls-black: #111111;
  --ls-charcoal: #1c1f23;
  --ls-charcoal-2: #2b2b2b;
  --ls-ink: #20242a;
  --ls-mid: #5d636b;
  --ls-metallic: #8a8a8a;
  --ls-grey-light: #d9dbdd;
  --ls-line: #e7e8ea;
  --ls-offwhite: #f5f5f5;
  --ls-white: #ffffff;

  --font-serif: "Lora", Georgia, "Times New Roman", serif;
  --font-sans: "Inter", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --container: 1200px;
  --radius: 4px;
  --radius-lg: 8px;
  --shadow-sm: 0 1px 3px rgba(17, 17, 20, 0.08);
  --shadow: 0 10px 30px rgba(17, 17, 20, 0.09);
  --shadow-lg: 0 24px 60px rgba(17, 17, 20, 0.16);
  --header-h: 84px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

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

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

body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--ls-ink);
  background: var(--ls-white);
  line-height: 1.65;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body.no-scroll { overflow: hidden; }

img { max-width: 100%; height: auto; display: block; }
a { color: var(--ls-red); text-decoration: none; transition: color 0.2s var(--ease); }
a:hover { color: var(--ls-red-dark); }

h1, h2, h3, h4, h5 {
  font-family: var(--font-serif);
  color: var(--ls-black);
  line-height: 1.18;
  font-weight: 600;
  margin: 0 0 0.5em;
  letter-spacing: -0.01em;
}
h1 { font-size: clamp(2.1rem, 4.4vw, 3.4rem); }
h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); }
h3 { font-size: 1.4rem; }
p { margin: 0 0 1.1em; }

.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 24px; }
.container--narrow { max-width: 860px; }
/* Migrated pages carry the old site's own .container inside ours, which
   doubled the gutter — 96px of it at phone width, leaving ~33 characters a
   line. A nested container adds no padding of its own. */
.container .container { padding-left: 0; padding-right: 0; }

.section { padding: 84px 0; position: relative; }
.section--sm { padding: 56px 0; }
.section--muted { background-color: var(--ls-offwhite); }
.section--dark { background: var(--ls-charcoal); color: #d7dade; }
.section--dark h1, .section--dark h2, .section--dark h3 { color: #fff; }

/* --------------------------- Section heading -------------------------- */
.section-head { max-width: 720px; margin-bottom: 44px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.eyebrow {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ls-red);
  margin-bottom: 14px;
}
.eyebrow::before {
  content: ""; display: inline-block; width: 26px; height: 2px;
  background: var(--ls-red); vertical-align: middle; margin-right: 12px; margin-bottom: 4px;
}
.section-head.center .eyebrow::before { display: none; }
.section-head p { color: var(--ls-mid); font-size: 1.07rem; margin-bottom: 0; }
.section--dark .section-head p { color: var(--ls-metallic); }

/* -------------------------------- Buttons ----------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-sans); font-weight: 600; font-size: 0.93rem;
  letter-spacing: 0.02em; padding: 14px 28px; border-radius: var(--radius);
  border: 1.5px solid transparent; cursor: pointer; transition: all 0.25s var(--ease);
  text-align: center; line-height: 1;
}
.btn--primary { background: var(--ls-red); color: #fff; }
.btn--primary:hover { background: var(--ls-red-dark); color: #fff; transform: translateY(-2px); box-shadow: 0 12px 24px rgba(200, 16, 46, 0.28); }
.btn--dark { background: var(--ls-black); color: #fff; }
.btn--dark:hover { background: var(--ls-charcoal-2); color: #fff; transform: translateY(-2px); }
.btn--outline { border-color: var(--ls-black); color: var(--ls-black); background: transparent; }
.btn--outline:hover { background: var(--ls-black); color: #fff; }
.btn--light { border-color: rgba(255, 255, 255, 0.5); color: #fff; background: transparent; }
.btn--light:hover { background: #fff; color: var(--ls-black); }
.btn--ghost { color: var(--ls-black); padding-left: 0; padding-right: 0; }
.btn--ghost:hover { color: var(--ls-red); gap: 14px; }
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; }
.btn .arrow { transition: transform 0.25s var(--ease); }
.btn:hover .arrow { transform: translateX(3px); }

/* -------------------------------- Header ------------------------------ */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  height: var(--header-h); display: flex; align-items: center;
  transition: background 0.3s var(--ease), box-shadow 0.3s var(--ease), height 0.3s var(--ease);
}
.site-header .container { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.site-header.solid, .site-header.scrolled { background: #fff; box-shadow: 0 1px 0 var(--ls-line), var(--shadow-sm); height: 72px; }

.brand { display: flex; align-items: center; gap: 13px; }
.brand__logo { height: 44px; width: auto; display: block; transition: height 0.3s var(--ease); }
.site-header.scrolled .brand__logo, .site-header.solid .brand__logo { height: 40px; }
.brand__logo--white { display: none; }
.brand__mark { width: 42px; height: 42px; flex: none; }
.brand__text { display: flex; flex-direction: column; line-height: 1; }
.brand__name { font-family: var(--font-serif); font-weight: 700; font-size: 1.35rem; letter-spacing: 0.01em; color: var(--ls-black); }
.brand__name b { color: var(--ls-red); font-weight: 700; }
.brand__tag { font-family: var(--font-sans); font-size: 0.6rem; letter-spacing: 0.32em; text-transform: uppercase; color: var(--ls-mid); margin-top: 5px; }

/* over-hero (transparent) state — light text + reversed logo */
.site-header.transparent { background: transparent; }
.site-header.transparent .brand__logo--color { display: none; }
.site-header.transparent .brand__logo--white { display: block; }
.site-header.transparent .brand__name { color: #fff; }
.site-header.transparent .brand__tag { color: var(--ls-metallic); }
.site-header.transparent .nav > ul > li > a { color: #eef0f2; }
.site-header.transparent .nav-toggle span { background: #fff; }

/* primary nav */
.nav > ul { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; }
.nav > ul > li { position: relative; }
.nav > ul > li > a {
  display: flex; align-items: center; gap: 5px; padding: 9px 12px; white-space: nowrap;
  font-weight: 500; font-size: 0.9rem; color: var(--ls-ink);
  border-radius: var(--radius); transition: color 0.2s;
}
.nav > ul > li > a:hover, .nav > ul > li.active > a { color: var(--ls-red); }
.nav > ul > li > a .caret { font-size: 0.6rem; opacity: 0.6; transition: transform 0.2s; }
.nav > ul > li.has-mega:hover > a .caret { transform: rotate(180deg); }

.header-actions { display: flex; align-items: center; gap: 14px; }
/* "Contact Us" is shown as the CTA button on desktop, so hide the duplicate nav tab there
   (it remains in the mobile drawer, where the button is hidden). */
@media (min-width: 1081px) { .nav > ul > li.nav-item--contact { display: none; } }

/* mega menu */
.mega {
  position: absolute; top: calc(100% + 14px); left: 50%; transform: translateX(-50%) translateY(10px);
  min-width: 560px; background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  border-top: 3px solid var(--ls-red); padding: 22px; opacity: 0; visibility: hidden;
  transition: all 0.25s var(--ease); z-index: 1001;
}
.mega--single { min-width: 300px; }
.nav > ul > li.has-mega:hover .mega { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.mega::before { content: ""; position: absolute; top: -14px; left: 0; right: 0; height: 14px; }
.mega-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 24px; }
.mega a.mega-link { display: block; padding: 10px 12px; border-radius: var(--radius); color: var(--ls-ink); font-size: 0.92rem; font-weight: 500; }
.mega a.mega-link:hover { background: var(--ls-offwhite); color: var(--ls-red); }
.mega a.mega-link small { display: block; color: var(--ls-mid); font-weight: 400; font-size: 0.78rem; margin-top: 2px; }
.mega-foot { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--ls-line); }

.nav-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 8px; }
.nav-toggle span { width: 24px; height: 2px; background: var(--ls-black); transition: all 0.3s; }

/* ---------------------------------- Hero ------------------------------ */
.hero {
  position: relative; min-height: 86vh; display: flex; align-items: center;
  color: var(--ls-ink); padding: calc(var(--header-h) + 48px) 0 80px;
  background:
    radial-gradient(820px 460px at 82% 12%, rgba(200, 16, 46, 0.10), transparent 60%),
    linear-gradient(165deg, #ffffff 0%, #f5f6f7 58%, #eceef0 100%);
  overflow: hidden;
}
.hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.6;
  background-image: linear-gradient(rgba(17, 17, 20, 0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(17, 17, 20, 0.035) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: linear-gradient(120deg, #000 0%, transparent 72%);
}
.hero .container { position: relative; z-index: 2; }
.hero__inner { max-width: 760px; }
.hero .eyebrow { color: var(--ls-red); }
.hero .eyebrow::before { background: var(--ls-red); }
.hero h1 { color: var(--ls-black); font-size: clamp(2.4rem, 5.2vw, 4rem); margin-bottom: 22px; }
.hero h1 .accent { color: var(--ls-red); position: relative; }
.hero p.lead { font-size: 1.2rem; color: var(--ls-mid); max-width: 620px; margin-bottom: 34px; }
.hero .btn-row { margin-top: 8px; }
.hero__scroll { position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%); color: var(--ls-mid); font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; z-index: 2; }

/* page hero (inner pages) */
.page-hero {
  position: relative; color: var(--ls-ink); padding: calc(var(--header-h) + 52px) 0 48px;
  border-bottom: 1px solid var(--ls-line); overflow: hidden;
  background:
    radial-gradient(640px 320px at 88% 8%, rgba(200, 16, 46, 0.08), transparent 60%),
    linear-gradient(165deg, #ffffff 0%, #f4f5f7 100%);
}
/* Red side-wall shape on the body, flush against the header's bottom border (not the topmost edge). */
.page-hero::before {
  content: ''; position: absolute; left: 0; top: 72px; z-index: 0; pointer-events: none;
  width: 160px; height: calc(100% - 72px);
  background: url('/images/innerpage-left.png') left top / contain no-repeat;
  background: image-set(url('/images/innerpage-left.webp') type('image/webp'), url('/images/innerpage-left.png') type('image/png')) left top / contain no-repeat;
}
/* Push banner text right so it never overlaps the red shape; collapses on wide screens where the red sits in the margin. */
.page-hero .container { position: relative; z-index: 1; padding-left: max(24px, 180px - max(0px, (100vw - 1200px) / 2)); }
@media (max-width: 900px) {
  .page-hero::before { width: 84px; }
  .page-hero .container { padding-left: 100px; }
}
/* Phones: that 100px inset is over a quarter of a 375px screen, squeezing the
   page title into a narrow column. The side-wall is decoration, not content —
   drop it and give the heading the full width. */
@media (max-width: 600px) {
  .page-hero::before { display: none; }
  .page-hero .container { padding-left: 24px; } /* matches .container */
  .page-hero { padding: calc(var(--header-h) + 28px) 0 32px; }
}
.page-hero h1 { color: var(--ls-black); margin-bottom: 8px; }
.page-hero p { color: var(--ls-mid); max-width: 640px; margin-bottom: 0; }
.breadcrumb { font-size: 0.82rem; color: var(--ls-mid); margin-bottom: 18px; }
.breadcrumb a { color: var(--ls-mid); }
.breadcrumb a:hover { color: var(--ls-red); }
.breadcrumb span.sep { margin: 0 8px; opacity: 0.5; }

/* --------------------------------- Stats ------------------------------ */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.stat { text-align: center; padding: 8px; }
.stat__num { font-family: var(--font-serif); font-size: 2.8rem; font-weight: 700; color: var(--ls-red); line-height: 1; }
.stat__label { font-size: 0.86rem; color: var(--ls-mid); margin-top: 8px; letter-spacing: 0.02em; }
.section--dark .stat__label { color: var(--ls-metallic); }

/* --------------------------------- Cards ------------------------------ */
.grid { display: grid; gap: 26px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-5 { grid-template-columns: repeat(5, 1fr); }

.card { background: #fff; border: 1px solid var(--ls-line); border-radius: var(--radius-lg); overflow: hidden; transition: all 0.3s var(--ease); }
.card:hover { box-shadow: var(--shadow); transform: translateY(-4px); border-color: transparent; }

.service-card { padding: 32px 28px; position: relative; display: flex; flex-direction: column; height: 100%; }
.service-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--ls-red); transform: scaleY(0); transform-origin: top; transition: transform 0.3s var(--ease); }
.service-card:hover::before { transform: scaleY(1); }
.service-card .ic { font-size: 1.8rem; margin-bottom: 16px; }
.service-card h3 { font-size: 1.22rem; margin-bottom: 10px; }
.service-card p { color: var(--ls-mid); font-size: 0.95rem; flex: 1; }
.service-card .more { font-weight: 600; font-size: 0.86rem; color: var(--ls-red); letter-spacing: 0.04em; text-transform: uppercase; margin-top: 14px; }

/* team */
.team-card { text-align: left; }
.team-card .photo, .team-card .ph-fallback { aspect-ratio: 3 / 4; width: 100%; object-fit: cover; object-position: center top; filter: grayscale(100%); transition: filter 0.4s var(--ease); background: var(--ls-grey-light); }
.team-card:hover .photo { filter: grayscale(0); }
.ph-fallback { display: flex; align-items: center; justify-content: center; color: var(--ls-charcoal-2); font-family: var(--font-serif); font-weight: 700; font-size: 2.8rem; background: linear-gradient(160deg, #f0f1f3, #dde1e4); }
.team-card .body { padding: 20px 22px 24px; }
.team-card h3 { font-size: 1.16rem; margin-bottom: 3px; }
.team-card .desig { color: var(--ls-red); font-size: 0.88rem; font-weight: 600; }
.team-card .pa { color: var(--ls-mid); font-size: 0.85rem; margin-top: 8px; }
.team-card .excerpt { color: var(--ls-mid); font-size: 0.86rem; line-height: 1.55; margin-top: 10px; }

/* posts */
.post-card { display: flex; flex-direction: column; height: 100%; }
.post-card .thumb { aspect-ratio: 16/9; background: linear-gradient(160deg, #eef0f2, #dde1e4); position: relative; overflow: hidden; }
.post-card .thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s var(--ease); }
.post-card:hover .thumb img { transform: scale(1.05); }
.post-card .body { padding: 22px 24px 26px; display: flex; flex-direction: column; flex: 1; }
.post-card .date { font-size: 0.78rem; color: var(--ls-mid); letter-spacing: 0.03em; margin-bottom: 8px; }
/* Date and type share a line below the banner, the type ranged right. It used
   to be laid over the artwork; down here it reads as one of the facts about the
   piece rather than a sticker on the picture. */
.post-card__meta { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.post-card__meta .date { margin-bottom: 0; }
/* Pushed right by its own margin rather than by space-between: a lot of the
   migrated news carries no date, and page 2 of the news mixes the two. Left to
   space-between, a card with no date would put its label back on the left and
   the badges would jump from side to side down the grid. */
.post-card__meta .badge { flex: none; margin-left: auto; }
.post-card h3 { font-size: 1.16rem; line-height: 1.32; margin-bottom: 10px; }
.post-card h3 a { color: var(--ls-black); }
.post-card h3 a:hover { color: var(--ls-red); }
/* The compact card ends at its title, so it closes up the room the excerpt
   and button used to need. */
.post-card--compact .body { padding-bottom: 20px; }
.post-card--compact h3 { margin-bottom: 0; }
.post-card__more {
  display: inline-block; margin-top: 14px;
  font-weight: 600; font-size: 0.86rem; color: var(--ls-red);
  letter-spacing: 0.04em; text-transform: uppercase;
}
.post-card__more:hover { text-decoration: underline; }
.post-card p { color: var(--ls-mid); font-size: 0.92rem; flex: 1; }

.badge { display: inline-block; background: var(--ls-red); color: #fff; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; padding: 5px 11px; border-radius: 3px; }
.badge--ghost { background: rgba(0,0,0,0.55); }
.badge--muted { background: var(--ls-charcoal-2); }

/* clients */
/* Separators are drawn as a ring around each tile rather than by letting a grey
   container bleed through 1px gaps. With the old approach a country group that
   didn't fill the row (Malaysia, England and Hong Kong have one client each)
   left the unused cells showing as a large grey block. */
/* Separate rounded tiles rather than one hairline-ruled block: a wall of
   client marks reads better with air around each one. */
.client-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; }
/* Country groups share the page's column track, so a country with one client
   takes one column rather than a band of its own and four empty cells. Dense
   flow lets a later small group backfill a gap an earlier one left. The inner
   grid repeats the same count the group spans, which keeps every tile on the
   page the same size. */
.client-groups {
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: 34px 18px; align-items: start; grid-auto-flow: dense;
}
.client-group { grid-column: span 5; }
.client-group--1 { grid-column: span 1; }
.client-group--2 { grid-column: span 2; }
.client-group--3 { grid-column: span 3; }
.client-group--4 { grid-column: span 4; }
.client-group--1 .client-grid { grid-template-columns: repeat(1, 1fr); }
.client-group--2 .client-grid { grid-template-columns: repeat(2, 1fr); }
.client-group--3 .client-grid { grid-template-columns: repeat(3, 1fr); }
.client-group--4 .client-grid { grid-template-columns: repeat(4, 1fr); }
.client-group .section-head { margin-bottom: 16px; }
.client-tile {
  position: relative; background: var(--ls-offwhite); border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  padding: 26px 20px; min-height: 148px; text-align: center;
  transition: background 0.25s var(--ease), box-shadow 0.25s var(--ease), transform 0.25s var(--ease);
}
.client-tile:hover, .client-tile:focus-visible {
  background: #eef0f2; box-shadow: 0 6px 18px rgba(17, 17, 17, 0.07); transform: translateY(-2px);
}
.client-tile img {
  max-height: 62px; max-width: 100%; width: auto;
  filter: grayscale(100%); opacity: 0.82;
  transition: filter 0.3s var(--ease), opacity 0.3s var(--ease), transform 0.25s var(--ease);
}
.client-tile:hover img, .client-tile:focus-visible img { filter: grayscale(0); opacity: 1; transform: translateY(-8px); }

/* The name stays in the markup — it is what a reader or a search engine has to
   go on — but only surfaces on hover, so the grid reads as logos. Clamped to
   two lines: some are long ("SHANDONG SINO-AGRI UNITED BIOTECHNOLOGY CO. LTD"). */
.client-tile .name {
  position: absolute; left: 12px; right: 12px; bottom: 14px;
  font-family: var(--font-sans); font-weight: 600; color: var(--ls-ink);
  font-size: 0.74rem; line-height: 1.3; letter-spacing: 0.01em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
  opacity: 0; transform: translateY(4px);
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease);
}
.client-tile:hover .name, .client-tile:focus-visible .name { opacity: 1; transform: none; }

/* Touch has no hover, so there the name simply shows. */
@media (hover: none) {
  .client-tile .name { opacity: 1; transform: none; }
  .client-tile img { transform: none; }
}

/* testimonials */
.testimonial-card { background: #fff; border: 1px solid var(--ls-line); border-radius: var(--radius-lg); padding: 34px 32px; height: 100%; position: relative; }
.section--dark .testimonial-card { background: #23262b; border-color: #31353b; }
.testimonial-card .quote-mark { font-family: var(--font-serif); font-size: 4rem; line-height: 0.5; color: var(--ls-red); opacity: 0.32; height: 30px; display: block; }
.testimonial-card blockquote { margin: 0 0 22px; font-size: 1.06rem; font-style: italic; color: var(--ls-ink); }
.section--dark .testimonial-card blockquote { color: #e6e8ea; }
.testimonial-card .who { display: flex; align-items: center; gap: 14px; }
.testimonial-card .who .av { width: 46px; height: 46px; border-radius: 50%; background: var(--ls-charcoal); color: #fff; display: flex; align-items: center; justify-content: center; font-family: var(--font-serif); font-size: 1.05rem; flex: none; object-fit: cover; }
.testimonial-card .who b { display: block; font-size: 0.96rem; color: inherit; }
.testimonial-card .who span { font-size: 0.82rem; color: var(--ls-mid); }
.section--dark .testimonial-card .who span { color: var(--ls-metallic); }
.stars { color: var(--ls-red); letter-spacing: 2px; font-size: 0.9rem; margin-bottom: 14px; }

/* split feature */
.split { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 60px; align-items: center; }
.media-frame { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); background: linear-gradient(160deg, #ffffff, #eef0f2); border: 1px solid var(--ls-line); aspect-ratio: 4/3; position: relative; }
.media-frame.accented::after { content: ""; position: absolute; right: -18px; bottom: -18px; width: 120px; height: 120px; border: 3px solid var(--ls-red); border-radius: var(--radius-lg); z-index: -1; }

/* cta band */
.cta-band { background: linear-gradient(135deg, var(--ls-red), var(--ls-red-dark)); color: #fff; border-radius: var(--radius-lg); padding: 52px 56px; display: flex; align-items: center; justify-content: space-between; gap: 30px; flex-wrap: wrap; }
.cta-band h2 { color: #fff; margin-bottom: 6px; }
.cta-band p { color: rgba(255,255,255,0.9); margin: 0; }

/* --------------------------------- Prose ------------------------------ */
.prose { font-size: 1.05rem; color: var(--ls-ink); }
/* Headings inside body copy are sub-headings, not page titles. The global sizes
   (h2 up to 2.4rem) competed with the page h1 in the hero, so a service page
   read as two equally large headings stacked on top of each other. */
.prose h2 { font-size: clamp(1.35rem, 2.1vw, 1.75rem); margin-top: 1.6em; }
.prose h3 { font-size: clamp(1.14rem, 1.7vw, 1.32rem); margin-top: 1.4em; }
.prose h4 { font-size: 1.06rem; margin-top: 1.2em; }
/* The first heading sits directly under the hero — no extra gap above it. */
.prose > h2:first-child, .prose > h3:first-child, .prose > h4:first-child { margin-top: 0; }
.prose ul, .prose ol { padding-left: 1.3em; margin-bottom: 1.2em; }
.prose li { margin-bottom: 0.5em; }
.prose blockquote { border-left: 3px solid var(--ls-red); margin: 1.5em 0; padding: 6px 0 6px 22px; font-style: italic; color: var(--ls-mid); }
.prose img { border-radius: var(--radius); margin: 1.2em 0; }
.prose a { text-decoration: underline; text-underline-offset: 3px; }

/* --------------------------- Profile / detail ------------------------- */
.profile-grid { display: grid; grid-template-columns: 320px 1fr; gap: 50px; align-items: start; }
.profile-aside { position: sticky; top: 96px; }
.profile-photo { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); aspect-ratio: 3/3.6; }
.profile-photo img, .profile-photo .ph-fallback { width: 100%; height: 100%; object-fit: cover; }
.fact { padding: 14px 0; border-bottom: 1px solid var(--ls-line); }
.fact .k { font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--ls-mid); margin-bottom: 4px; }
.fact .v { font-size: 0.96rem; color: var(--ls-ink); }
.tag-list { display: flex; flex-wrap: wrap; gap: 8px; }
.tag { background: var(--ls-offwhite); border: 1px solid var(--ls-line); color: var(--ls-charcoal-2); font-size: 0.8rem; padding: 6px 12px; border-radius: 20px; }

.detail-grid { display: grid; grid-template-columns: 1fr 320px; gap: 50px; align-items: start; }
.side-box { background: var(--ls-offwhite); border: 1px solid var(--ls-line); border-radius: var(--radius-lg); padding: 26px; margin-bottom: 24px; }
.side-box h4 { font-family: var(--font-sans); font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ls-mid); margin-bottom: 16px; }
.mini-person { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.mini-person .av { width: 44px; height: 44px; border-radius: 50%; background: var(--ls-charcoal); color: #fff; display: flex; align-items: center; justify-content: center; font-family: var(--font-serif); flex: none; object-fit: cover; }
.mini-person b { font-size: 0.92rem; display: block; }
.mini-person span { font-size: 0.78rem; color: var(--ls-mid); }

/* share bar */
/* Seven 38px buttons plus the label needed more width than the article column
   has, so the row broke and left two icons stranded underneath. Smaller
   buttons and a tighter gap keep the whole set on one line. */
.share { display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; }
.share .lbl { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ls-mid); margin-right: 2px; white-space: nowrap; }
.share a { width: 30px; height: 30px; flex: none; border-radius: 50%; border: 1px solid var(--ls-line); display: inline-flex; align-items: center; justify-content: center; color: var(--ls-charcoal-2); font-size: 0.9rem; transition: all 0.2s; }
.share a:hover { background: var(--ls-red); color: #fff; border-color: var(--ls-red); }
/* On the narrowest phones the seven buttons fill the column exactly. The label
   is the one part the icons already imply, so it goes rather than the row
   breaking again. */
@media (max-width: 380px) {
  .share .lbl { display: none; }
}

/* --------------------------------- Tabs ------------------------------- */
.tabs { display: flex; flex-wrap: wrap; gap: 6px; border-bottom: 1px solid var(--ls-line); margin-bottom: 40px; }
.tabs a { padding: 12px 20px; font-weight: 600; font-size: 0.92rem; color: var(--ls-mid); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tabs a:hover { color: var(--ls-black); }
.tabs a.active { color: var(--ls-red); border-bottom-color: var(--ls-red); }
/* On a phone these seven tabs wrapped onto three stacked rows. Keep them on one
   line and let the strip scroll sideways instead. It bleeds to the screen edges
   so the cut-off tab signals there is more to swipe, and main.js scrolls the
   active one into view on load. */
@media (max-width: 900px) {
  .tabs {
    flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
    margin-left: -24px; margin-right: -24px;
    padding-left: 24px; padding-right: 24px;
  }
  .tabs::-webkit-scrollbar { display: none; }
  .tabs a { flex: none; white-space: nowrap; padding: 12px 14px; }
}

/* accordion (faq) */
.accordion { border-top: 1px solid var(--ls-line); }
.acc-item { border-bottom: 1px solid var(--ls-line); }
/* The heading only exists to put the question in the outline; the button
   inside it keeps every bit of the styling, so the row looks unchanged. */
.acc-h { margin: 0; font: inherit; letter-spacing: normal; }
.acc-q { width: 100%; text-align: left; background: none; border: none; cursor: pointer; padding: 22px 44px 22px 0; font-family: var(--font-serif); font-size: 1.12rem; color: var(--ls-black); position: relative; }
.acc-q::after { content: "+"; position: absolute; right: 6px; top: 50%; transform: translateY(-50%); font-size: 1.5rem; color: var(--ls-red); transition: transform 0.25s; }
.acc-item.open .acc-q::after { content: "−"; }
.acc-a { max-height: 0; overflow: hidden; transition: max-height 0.3s var(--ease); color: var(--ls-mid); }
.acc-a .inner { padding: 0 0 24px; }

/* --------------------------------- Forms ------------------------------ */
.form-card { background: #fff; border: 1px solid var(--ls-line); border-radius: var(--radius-lg); padding: 38px; box-shadow: var(--shadow-sm); }
.field { margin-bottom: 20px; }
.field label { display: block; font-weight: 600; font-size: 0.88rem; margin-bottom: 8px; color: var(--ls-charcoal-2); }
.field .req { color: var(--ls-red); }
.field input, .field select, .field textarea {
  width: 100%; padding: 13px 15px; border: 1.5px solid var(--ls-line); border-radius: var(--radius);
  font-family: var(--font-sans); font-size: 0.98rem; color: var(--ls-ink); background: #fff; transition: border-color 0.2s, box-shadow 0.2s;
}
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--ls-red); box-shadow: 0 0 0 3px rgba(200, 16, 46, 0.1); }
.field textarea { min-height: 140px; resize: vertical; }
.field .hint { font-size: 0.8rem; color: var(--ls-mid); margin-top: 6px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
input[type="file"] { padding: 10px; background: var(--ls-offwhite); }
/* iOS Safari zooms the page in when a focused field's text is under 16px, and
   never zooms back out. 0.98rem lands at ~15.7px, so pin fields to 16px on
   touch-sized screens. */
@media (max-width: 1024px) {
  .field input, .field select, .field textarea { font-size: 16px; }
}

/* flash + alerts */
.flash { padding: 15px 20px; border-radius: var(--radius); margin-bottom: 22px; font-size: 0.95rem; border: 1px solid; }
.flash--success { background: #eef8f0; border-color: #bfe3c6; color: #1d6b2c; }
.flash--error { background: #fdeef0; border-color: #f3c2c9; color: #a01829; }

/* pagination */
/* wrap: a seven-page pager overflowed a phone screen on one line */
.pagination { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 50px; }
.pagination a, .pagination span { min-width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--ls-line); border-radius: var(--radius); font-weight: 600; font-size: 0.9rem; color: var(--ls-charcoal-2); padding: 0 12px; }
.pagination a:hover { border-color: var(--ls-red); color: var(--ls-red); }
.pagination .current { background: var(--ls-red); color: #fff; border-color: var(--ls-red); }
/* Ellipsis between page ranges — a marker, not a button. */
.pagination .gap { border: 0; min-width: 20px; padding: 0; color: var(--ls-mid); }

/* video embeds */
.video-embed { position: relative; aspect-ratio: 16/9; border-radius: var(--radius-lg); overflow: hidden; background: #000; }
.video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* pdf frame */
.pdf-frame { width: 100%; height: 78vh; border: 1px solid var(--ls-line); border-radius: var(--radius-lg); }

/* --------------------------------- Footer ----------------------------- */
.site-footer { background: var(--ls-offwhite); color: var(--ls-mid); padding: 70px 0 0; font-size: 0.92rem; border-top: 1px solid var(--ls-line); position: relative; overflow: hidden; }
/* Grey side-wall shape pinned to the top-right, flush against the footer's top border. */
.site-footer::before {
  content: ''; position: absolute; right: 0; top: 0; z-index: 0; pointer-events: none;
  width: 150px; height: 260px;
  background: url('/images/innerpage-right.png') right top / contain no-repeat;
  background: image-set(url('/images/innerpage-right.webp') type('image/webp'), url('/images/innerpage-right.png') type('image/png')) right top / contain no-repeat;
}
.site-footer .container { position: relative; z-index: 1; }
/* Keep the right-hand footer column clear of the grey shape; collapses on wide screens. */
.footer-top { padding-right: max(0px, 95px - max(0px, (100vw - 1200px) / 2)); }
@media (max-width: 900px) {
  .site-footer::before { width: 96px; height: 150px; }
  .footer-top { padding-right: 70px; }
}
.footer-top { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 40px; padding-bottom: 50px; border-bottom: 1px solid var(--ls-line); }
.footer-brand .brand__name { color: var(--ls-black); }
.footer-brand .brand__tag { color: var(--ls-mid); }
.footer-brand p { margin: 18px 0; max-width: 320px; color: var(--ls-mid); }
.footer-col h5 { color: var(--ls-black); font-family: var(--font-sans); font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 18px; }
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col li { margin-bottom: 11px; }
.footer-col a { color: var(--ls-mid); }
.footer-col a:hover { color: var(--ls-red); padding-left: 4px; }
.footer-contact div { margin-bottom: 12px; display: flex; gap: 10px; }
.footer-contact .ic { color: var(--ls-red); }
.social { display: flex; gap: 10px; margin-top: 8px; flex-wrap: wrap; }
.social a { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--ls-grey-light); display: inline-flex; align-items: center; justify-content: center; color: var(--ls-charcoal-2); font-size: 0.82rem; font-weight: 600; transition: all 0.2s; }
/* Brand glyphs (partials/social-icon.ejs) inherit the link colour, so the
   existing hover states keep working without per-network overrides. */
.social .si { width: 18px; height: 18px; display: block; }
.share .si { width: 15px; height: 15px; display: block; }
.social a:hover { background: var(--ls-red); border-color: var(--ls-red); color: #fff; transform: translateY(-2px); }
.footer-bottom { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px; padding: 24px 0; font-size: 0.84rem; color: var(--ls-mid); }
.footer-bottom a { color: var(--ls-mid); }
.footer-bottom a:hover { color: var(--ls-red); }
.footer-bottom .links { display: flex; flex-wrap: wrap; gap: 18px; }

/* ----------------------------- Consent modal -------------------------- */
.consent-overlay { position: fixed; inset: 0; z-index: 4000; background: rgba(10, 11, 13, 0.82); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; padding: 24px; }
.consent-overlay[hidden] { display: none; }
.consent-card { background: #fff; max-width: 620px; width: 100%; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); border-top: 4px solid var(--ls-red); padding: 40px; max-height: 88vh; overflow: auto; }
.consent-card .mark { width: 46px; height: 46px; margin-bottom: 16px; }
.consent-card h2 { font-size: 1.6rem; margin-bottom: 14px; }
.consent-card .text { font-size: 0.92rem; color: var(--ls-mid); line-height: 1.7; max-height: 38vh; overflow: auto; padding-right: 8px; }
.consent-actions { display: flex; gap: 14px; margin-top: 26px; flex-wrap: wrap; }
.consent-actions .btn { flex: 1; justify-content: center; min-width: 140px; }

/* reveal animation */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
/* Safety-net state (see main.js): show the content outright, without relying on
   a transition to advance — in a context that produces no animation frames the
   fade would otherwise stay stuck at opacity 0. */
.reveal.shown { opacity: 1; transform: none; transition: none; }

/* misc */
.text-center { text-align: center; }
.mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; }
.lead { font-size: 1.15rem; color: var(--ls-mid); }
.divider { height: 1px; background: var(--ls-line); border: 0; margin: 40px 0; }
.empty-note { color: var(--ls-mid); font-style: italic; padding: 30px 0; }

/* ------------------------------ Responsive ---------------------------- */
@media (max-width: 1024px) {
  .footer-top { grid-template-columns: 1fr 1fr; }
  .client-grid { grid-template-columns: repeat(4, 1fr); gap: 16px; }
  /* Four tracks now, so nothing may span five — an over-wide span would open an
     implicit column and push the grid past the container. Only the classes that
     exceed four are clamped: naming .client-group itself here would match every
     group at the same specificity as .client-group--1 and, coming later, widen
     the small ones back to full width. */
  .client-groups { grid-template-columns: repeat(4, 1fr); gap: 30px 16px; }
  .client-group--5, .client-group--4 { grid-column: span 4; }
  .client-group--5 .client-grid, .client-group--4 .client-grid { grid-template-columns: repeat(4, 1fr); }
  .stats { grid-template-columns: repeat(2, 1fr); gap: 30px; }
}
/* Hamburger kicks in at <=1080px: the full menu can't fit beside the logo and
   CTA below this width, so collapse it into the drawer instead of wrapping. */
@media (max-width: 1080px) {
  .nav-toggle { display: flex; }
  .header-actions .btn { display: none; }
  .nav {
    position: fixed; top: 0; right: -100%; width: min(86vw, 360px); height: 100vh;
    background: #fff; box-shadow: var(--shadow-lg); padding: 90px 26px 30px; transition: right 0.35s var(--ease); overflow-y: auto; z-index: 1000;
  }
  .nav.open { right: 0; }
  .nav > ul { flex-direction: column; align-items: stretch; gap: 0; }
  .nav > ul > li > a { padding: 14px 8px; font-size: 0.95rem; white-space: normal; color: var(--ls-ink) !important; border-bottom: 1px solid var(--ls-line); }
  .site-header.transparent .nav > ul > li > a { color: var(--ls-ink) !important; }
  .mega { position: static; transform: none; min-width: 0; box-shadow: none; border-top: 0; padding: 4px 0 12px 14px; opacity: 1; visibility: visible; border-left: 2px solid var(--ls-line); }
  .mega-grid { grid-template-columns: 1fr; }
  .nav > ul > li.has-mega:hover .mega { transform: none; }
  .nav-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 999; }
}
@media (max-width: 900px) {
  .split, .profile-grid, .detail-grid { grid-template-columns: 1fr; gap: 36px; }
  .profile-aside { position: static; }
}
/* Tablets. Card rows previously held their desktop column count right down to
   760px, so an iPad in portrait showed four team cards at 161px each. Step the
   grids down here instead of jumping straight from four columns to one. */
@media (min-width: 761px) and (max-width: 1024px) {
  .grid-3, .grid-4, .grid-5 { grid-template-columns: repeat(2, 1fr); }
  .client-logo-card { flex-basis: calc((100% - 36px) / 3); }
  .media-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-top { grid-template-columns: repeat(2, 1fr); gap: 28px; }
}
@media (max-width: 760px) {
  body { font-size: 16px; }
  .section { padding: 60px 0; }
  .grid-2, .grid-3, .grid-4, .grid-5 { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .client-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  /* Two tracks: only a single-client country stays narrow, everything else
     fills the row. */
  .client-groups { grid-template-columns: repeat(2, 1fr); gap: 26px 14px; }
  .client-group--5, .client-group--4, .client-group--3, .client-group--2 { grid-column: span 2; }
  .client-group--5 .client-grid, .client-group--4 .client-grid,
  .client-group--3 .client-grid, .client-group--2 .client-grid { grid-template-columns: repeat(2, 1fr); }
  .cta-band { padding: 36px 28px; text-align: center; justify-content: center; }
  .hero { min-height: 86vh; }
  .footer-bottom { flex-direction: column; text-align: center; }
}
@media (max-width: 480px) {
  .client-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .footer-top { grid-template-columns: 1fr; }
  .brand__tag { display: none; }
}

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; }
}

/* ===================== Added components (design elevation) ============ */

/* Why choose us */
.why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--ls-line); border: 1px solid var(--ls-line); border-radius: var(--radius-lg); overflow: hidden; }
.why-item { background: #fff; padding: 34px 30px; transition: background 0.25s var(--ease); }
.why-item:hover { background: var(--ls-offwhite); }
.why-item .ic { width: 48px; height: 48px; border-radius: 10px; background: #fdecec; color: var(--ls-red); display: flex; align-items: center; justify-content: center; font-size: 1.35rem; margin-bottom: 18px; }
.why-item h3 { font-size: 1.14rem; margin-bottom: 8px; }
.why-item p { color: var(--ls-mid); font-size: 0.93rem; margin: 0; }

/* Work highlights / representative matters */
.matters { max-width: 920px; }
.matter { display: flex; gap: 24px; padding: 26px 0; border-bottom: 1px solid var(--ls-line); }
.matter:last-child { border-bottom: 0; }
.matter .no { font-family: var(--font-serif); font-size: 1.7rem; font-weight: 700; color: var(--ls-red); flex: none; width: 54px; line-height: 1.2; }
.matter .m-body h3 { font-size: 1.2rem; margin-bottom: 6px; }
.matter .m-body h3 a { color: var(--ls-black); }
.matter .m-body h3 a:hover { color: var(--ls-red); }
.matter .m-body p { color: var(--ls-mid); margin: 0 0 10px; }

/* Testimonial slider */
.t-slider { position: relative; }
.t-track { display: flex; gap: 26px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding-bottom: 8px; scrollbar-width: none; }
.t-track::-webkit-scrollbar { display: none; }
.t-track > * { scroll-snap-align: start; flex: 0 0 calc(33.333% - 18px); }
.t-controls { display: flex; gap: 10px; justify-content: center; margin-top: 30px; }
.t-controls button { width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--ls-line); background: #fff; cursor: pointer; font-size: 1.1rem; color: var(--ls-charcoal-2); transition: all 0.2s var(--ease); }
.t-controls button:hover { background: var(--ls-red); color: #fff; border-color: var(--ls-red); transform: translateY(-2px); }
@media (max-width: 1024px) { .t-track > * { flex: 0 0 calc(50% - 13px); } }
@media (max-width: 760px) { .t-track > * { flex: 0 0 86%; } }

/* Header search */
.search-btn { background: none; border: none; cursor: pointer; padding: 9px; display: inline-flex; align-items: center; color: var(--ls-charcoal-2); }
.search-btn:hover { color: var(--ls-red); }
.search-btn svg { width: 20px; height: 20px; }
.search-overlay { position: fixed; inset: 0; z-index: 2000; background: rgba(17, 17, 17, 0.55); backdrop-filter: blur(4px); display: flex; align-items: flex-start; justify-content: center; padding: 13vh 24px 24px; }
.search-overlay[hidden] { display: none; }
.search-box { background: #fff; width: 100%; max-width: 680px; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 12px 12px 12px 22px; display: flex; gap: 10px; align-items: center; }
.search-box input { flex: 1; border: none; font-size: 1.3rem; padding: 12px 0; font-family: var(--font-serif); color: var(--ls-black); background: none; }
.search-box input:focus { outline: none; }
.search-hint { color: #fff; text-align: center; margin-top: 16px; font-size: 0.82rem; opacity: 0.85; }
.search-close { position: absolute; top: 22px; right: 26px; background: none; border: none; color: #fff; font-size: 1.6rem; cursor: pointer; }

/* Filter bar (team / insights) */
.filter-bar { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between; margin-bottom: 36px; }
.filter-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { border: 1px solid var(--ls-line); background: #fff; border-radius: 30px; padding: 8px 16px; font-size: 0.84rem; font-weight: 500; color: var(--ls-charcoal-2); cursor: pointer; transition: all 0.2s; }
.chip:hover { border-color: var(--ls-red); color: var(--ls-red); }
.chip.active { background: var(--ls-red); border-color: var(--ls-red); color: #fff; }
.filter-search { position: relative; }
.filter-search input { border: 1px solid var(--ls-line); border-radius: 30px; padding: 11px 18px 11px 42px; font-size: 0.9rem; min-width: 250px; font-family: var(--font-sans); color: var(--ls-ink); }
.filter-search input:focus { outline: none; border-color: var(--ls-red); box-shadow: 0 0 0 3px rgba(198, 40, 40, 0.1); }
.filter-search svg { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--ls-mid); }
.is-hidden { display: none !important; }
.no-results { text-align: center; color: var(--ls-mid); padding: 50px 0; font-style: italic; }

/* Hero slider */
.hero-slider { position: relative; min-height: 84vh; overflow: hidden; background: var(--ls-offwhite); }
.hs-slides { position: absolute; inset: 0; }
.hs-slide {
  position: absolute; inset: 0; opacity: 1; z-index: 0; transition: opacity 1s ease-in-out;
  display: flex; align-items: center; background-size: cover; background-position: center; background-repeat: no-repeat;
  background-color: #1b2336;
  /* Default background; per-slide images override this via inline style. */
  /* The photograph, at about half the weight. The plain url() stays as the
     first declaration so a browser that does not know image-set() still gets
     one; those that do take the WebP. */
  background-image: url('/images/hero-columns.jpg');
  background-image: image-set(url('/images/hero-columns.webp') type('image/webp'), url('/images/hero-columns.jpg') type('image/jpeg'));
}

/* A phone gets a photograph cut for a phone: the same picture at 900px is a
   third of the bytes, and no screen that small can show the difference. */
@media (max-width: 900px) {
  .hs-slide {
    background-image: url('/images/hero-columns.jpg');
    background-image: image-set(url('/images/hero-columns-sm.webp') type('image/webp'), url('/images/hero-columns.jpg') type('image/jpeg'));
  }
}
.hs-slide.active { z-index: 1; }
/* Soft deepen on the right so the white overlay card keeps contrast over any slide photo. */
.hs-slide::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, rgba(17, 17, 17, 0) 38%, rgba(17, 17, 17, 0.46) 100%); }
.hs-slide .container { width: 100%; padding-top: var(--header-h); display: flex; justify-content: flex-end; position: relative; z-index: 2; }
.hs-box { background: #fff; color: var(--ls-ink); max-width: 480px; padding: 38px 40px; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); border-top: 4px solid var(--ls-red); display: flex; flex-direction: column; justify-content: center; }
.hs-box .hs-eyebrow { display: block; font-size: 0.74rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ls-red); margin-bottom: 12px; font-weight: 600; }
.hs-box h2 { color: var(--ls-black); font-size: clamp(1.7rem, 3vw, 2.5rem); margin-bottom: 14px; line-height: 1.2; }
.hs-box p { color: var(--ls-mid); font-size: 1.02rem; margin-bottom: 24px; }
.hs-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 50px; height: 50px; border-radius: 50%; border: none; background: rgba(255, 255, 255, 0.9); color: var(--ls-charcoal-2); font-size: 1.5rem; cursor: pointer; transition: all 0.2s; box-shadow: var(--shadow-sm); }
.hs-arrow:hover { background: var(--ls-red); color: #fff; }
.hs-prev { left: 22px; }
.hs-next { right: 22px; }
.hs-dots { position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 3; display: flex; gap: 10px; }
.hs-dot { width: 11px; height: 11px; border-radius: 50%; border: none; background: rgba(255, 255, 255, 0.65); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3); cursor: pointer; padding: 0; transition: all 0.25s var(--ease); }
.hs-dot.active { background: var(--ls-red); width: 30px; border-radius: 6px; }
@media (max-width: 900px) {
  .hero-slider { min-height: 78vh; }
  .hs-slide .container { justify-content: center; padding-top: calc(var(--header-h) + 12px); }
  .hs-box { max-width: 100%; }
  .hs-arrow { display: none; }
}
@media (max-width: 760px) {
  /* The card runs nearly edge to edge here, so the centred dots sat on top of
     its call-to-action. Reserve space below the card for them, and trim the
     card's generous desktop padding so the text gets the width instead. */
  .hs-slide .container { padding-bottom: 44px; }
  .hs-box { padding: 26px 22px; }
  .hs-box h2 { font-size: 1.55rem; margin-bottom: 10px; }
  .hs-box p { font-size: 0.97rem; margin-bottom: 18px; }
  .hs-dots { bottom: 14px; }
}

/* Practice highlights (homepage grid) */
.practice-highlights { padding: 60px 0; }
.ph-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.ph-card { border: 1px solid var(--ls-line); border-radius: var(--radius-lg); overflow: hidden; background: #fff; transition: box-shadow 0.3s var(--ease), transform 0.3s var(--ease); display: flex; flex-direction: column; }
.ph-card:hover { box-shadow: var(--shadow); transform: translateY(-4px); }
.ph-head { background: var(--ls-red); color: #fff; font-weight: 700; letter-spacing: 0.05em; font-size: 0.9rem; padding: 15px 22px; }
.ph-body { padding: 24px 22px 26px; display: flex; flex-direction: column; flex: 1; }
.ph-ic { font-size: 1.9rem; margin-bottom: 14px; }
.ph-body p { color: var(--ls-ink); font-size: 0.95rem; margin: 0 0 16px; flex: 1; }
.ph-more { font-weight: 600; font-size: 0.82rem; color: var(--ls-red); text-transform: uppercase; letter-spacing: 0.05em; }
@media (max-width: 760px) { .ph-grid { grid-template-columns: 1fr; } }

/* Search results page groups */
.result-group { margin-bottom: 44px; }
.result-group h2 { display: flex; align-items: center; gap: 12px; }
.result-group h2 .count { font-family: var(--font-sans); font-size: 0.8rem; font-weight: 600; color: var(--ls-red); background: #fdecec; padding: 3px 11px; border-radius: 20px; }
.result-list { list-style: none; padding: 0; margin: 0; }
.result-list li { padding: 16px 0; border-bottom: 1px solid var(--ls-line); }
.result-list li a { font-family: var(--font-serif); font-size: 1.12rem; color: var(--ls-black); }
.result-list li a:hover { color: var(--ls-red); }
.result-list li p { color: var(--ls-mid); font-size: 0.9rem; margin: 4px 0 0; }

/* ================= Horizontal full-page homepage ================= */
/* Default (mobile / no-JS): panels stack and scroll vertically. */
.hfp-panel { padding: 96px 0 64px; }
.hfp-panel--hero { padding: 0; }
.hfp-panel--muted { background: var(--ls-offwhite); }

/* Active horizontal mode (added by JS on desktop). */
.hfp.hfp--active { height: 100vh; overflow: hidden; }
.hfp.hfp--active .hfp-track { display: flex; flex-wrap: nowrap; height: 100%; width: max-content; transition: transform 0.9s cubic-bezier(0.76, 0, 0.24, 1); will-change: transform; }
.hfp.hfp--active .hfp-panel { flex: 0 0 100vw; width: 100vw; height: 100vh; overflow: hidden; padding: calc(var(--header-h) + 26px) 0 44px; display: flex; align-items: center; justify-content: center; }
.hfp.hfp--active .hfp-panel > .container { width: 100%; }
.hfp.hfp--active .hfp-panel .container { padding-right: 116px; }
.hfp.hfp--active .hfp-panel--hero { padding: 0; display: block; overflow: hidden; }
.hfp.hfp--active .hfp-panel--hero .hero-slider { width: 100%; height: 100vh; min-height: 0; }
body.hfp-lock { overflow: hidden; }

/* Compact helpers used inside panels */
.stats--2 { grid-template-columns: 1fr 1fr; max-width: 440px; gap: 26px; }
.grid--compact { gap: 18px; }
.grid--compact .service-card { padding: 22px 22px; }
.grid--compact .service-card .ic { font-size: 1.5rem; margin-bottom: 12px; }
.grid--compact .service-card h3 { font-size: 1.08rem; }
.grid--compact .service-card p { font-size: 0.86rem; }

.client-quote { max-width: 760px; margin: 34px auto 0; text-align: center; }
.client-quote blockquote { font-family: var(--font-serif); font-size: 1.25rem; font-style: italic; color: var(--ls-ink); margin: 6px 0 16px; }
.client-quote .who { justify-content: center; }

/* Client logo slider (manual ‹ › arrows) */
.logo-slider { display: flex; align-items: center; gap: 12px; max-width: 1120px; margin: 0 auto; }
.logo-slider__viewport { overflow: hidden; flex: 1; }
.logo-slider__track { display: flex; transition: transform 0.55s var(--ease); }
.logo-arrow { flex: none; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--ls-line); background: #fff; color: var(--ls-charcoal-2); font-size: 1.4rem; line-height: 1; cursor: pointer; transition: all 0.2s var(--ease); }
.logo-arrow:hover { background: var(--ls-red); color: #fff; border-color: var(--ls-red); }
.logo-arrow:disabled { opacity: 0.3; cursor: default; }
.logo-arrow:disabled:hover { background: #fff; color: var(--ls-charcoal-2); border-color: var(--ls-line); }
.logo-cell { flex: 0 0 auto; width: 200px; height: 132px; display: flex; align-items: center; justify-content: center; padding: 0 26px; }
.logo-cell img { max-height: 90px; max-width: 100%; width: auto; object-fit: contain; transition: transform 0.3s var(--ease); }
.logo-cell:hover img { transform: scale(1.08); }
.logo-cell .name { font-family: var(--font-serif); color: var(--ls-charcoal-2); font-weight: 600; text-align: center; font-size: 0.95rem; }
@media (max-width: 760px) { .logo-cell { width: 150px; padding: 0 16px; } }

/* Inline red highlight for a single word inside a heading */
.hl-red { color: var(--ls-red); }

/* ---- Clients: logo grid (homepage panel) ---- */
.clients-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; max-width: 1180px; margin: 0 auto; }
.client-logo-card { flex: 0 0 calc((100% - 64px) / 5); background: var(--ls-offwhite); border: 1px solid var(--ls-line); border-radius: 14px; height: 112px; display: flex; align-items: center; justify-content: center; padding: 18px 24px; transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), background 0.25s var(--ease); }
.client-logo-card:hover { transform: translateY(-3px); background: #fff; box-shadow: 0 12px 28px rgba(20, 20, 30, 0.09); }
.client-logo-card img { max-height: 62px; max-width: 100%; width: auto; object-fit: contain; }
.client-logo-card .name { font-family: var(--font-serif); color: var(--ls-charcoal-2); font-weight: 600; text-align: center; font-size: 0.95rem; }
@media (max-width: 1100px) { .client-logo-card { flex-basis: calc((100% - 48px) / 4); } }
@media (max-width: 760px) { .clients-grid { gap: 12px; } .client-logo-card { flex-basis: calc((100% - 12px) / 2); height: 96px; padding: 14px; } }

/* ---- Testimonials: split card with slider (homepage panel) ---- */
.tcard { display: grid; grid-template-columns: 0.82fr 1.18fr; max-width: 1080px; margin: 0 auto; background: #fff; border: 1px solid var(--ls-line); border-radius: 24px; box-shadow: 0 22px 60px rgba(20, 20, 30, 0.07); overflow: hidden; }
.tcard__left { padding: 46px 44px; border-right: 1px solid var(--ls-line); display: flex; flex-direction: column; }
.tcard__pill { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; background: var(--ls-offwhite); border: 1px solid var(--ls-line); border-radius: 999px; padding: 7px 16px; font-size: 0.82rem; font-weight: 600; color: var(--ls-ink); }
.tcard__pill .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ls-red); }
.tcard__left h2 { font-family: var(--font-serif); font-size: clamp(1.7rem, 2.4vw, 2.5rem); line-height: 1.12; margin: 0; }
.tcard__lead { color: var(--ls-mid); font-size: 1rem; line-height: 1.62; margin: 18px 0 0; }
.tcard__foot-left { margin-top: auto; padding-top: 24px; }
.tcard__stars { color: var(--ls-red); font-size: 1.1rem; letter-spacing: 4px; line-height: 1; margin-bottom: 12px; }
.tcard__reviews { padding-top: 0; }
.tcard__reviews b { font-size: 1.9rem; font-weight: 700; color: var(--ls-ink); }
.tcard__reviews span { color: var(--ls-mid); margin-left: 6px; }
.tcard__right { position: relative; display: flex; flex-direction: column; padding: 46px 44px; }
.htest__slide { display: none; flex: 1 1 auto; flex-direction: column; }
.htest__slide.active { display: flex; animation: htestFade 1s var(--ease); }
@keyframes htestFade { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
.tcard__qmark { color: var(--ls-red); width: 40px; height: 40px; flex: none; }
.tcard__quote { font-size: 1.12rem; line-height: 1.62; color: var(--ls-ink); margin: 16px 0 0; height: 152px; display: -webkit-box; -webkit-line-clamp: 5; line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.tcard__quote.typing::after { content: '|'; color: var(--ls-red); font-weight: 400; margin-left: 1px; animation: typeCaret 0.8s step-end infinite; }
@keyframes typeCaret { 50% { opacity: 0; } }
.tcard__who { display: flex; align-items: center; gap: 14px; margin-top: auto; padding-top: 22px; padding-right: 110px; }
.tcard__who .av { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; flex: none; }
.tcard__who .av--ph { display: inline-flex; align-items: center; justify-content: center; background: var(--ls-red); color: #fff; font-weight: 600; font-family: var(--font-serif); }
.tcard__who .meta { display: flex; flex-direction: column; }
.tcard__who .meta b { font-size: 1.02rem; color: var(--ls-ink); }
.tcard__who .meta span { font-size: 0.88rem; color: var(--ls-mid); }
.tcard__nav { position: absolute; right: 40px; bottom: 40px; display: flex; gap: 10px; }
.tcard__nav button { width: 46px; height: 46px; border-radius: 50%; border: none; background: var(--ls-ink); color: #fff; font-size: 1.1rem; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background 0.2s var(--ease), transform 0.2s var(--ease); }
.tcard__nav button:hover { background: var(--ls-red); transform: translateY(-2px); }
@media (max-width: 860px) {
  .tcard { grid-template-columns: 1fr; }
  .tcard__left { border-right: none; border-bottom: 1px solid var(--ls-line); }
  .tcard__foot-left { margin-top: 20px; }
  .tcard__quote { height: auto; min-height: 120px; }
  .tcard__who { padding-right: 0; }
  .tcard__nav { position: static; margin-top: 18px; }
}

/* ---- Latest Insights: News (cards) + Publications (list) ---- */
.insights-split { display: grid; grid-template-columns: 1.6fr 1fr; gap: 38px; align-items: start; max-width: 1200px; margin: 0 auto; }
.insights-news { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-content: start; }
.insights-news .post-card { height: auto; }
.insights-news .post-card { margin: 0; }
/* Text-only news cards in this panel — drop the banner image so the 2x2 grid
   stays compact and aligns with the Publications list beside it. */
.insights-news .post-card .thumb { display: none; }
.insights-news .post-card .body { padding: 20px 22px; }
.pub-panel__head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 12px; }
.pub-panel__head h3 { font-family: var(--font-serif); font-size: 1.5rem; margin: 0; }
.pub-viewall { color: var(--ls-red); font-weight: 600; font-size: 0.85rem; white-space: nowrap; }
.pub-viewall:hover { text-decoration: underline; }
.pub-list { list-style: none; margin: 0; padding: 0; border-left: 3px solid var(--ls-red); }
.pub-list li { border-bottom: 1px solid var(--ls-line); }
.pub-list li:last-child { border-bottom: none; }
.pub-list a { display: block; padding: 11px 0 11px 18px; color: var(--ls-ink); font-weight: 600; font-size: 0.95rem; line-height: 1.4; transition: color 0.2s var(--ease), padding 0.2s var(--ease); }
.pub-list a:hover { color: var(--ls-red); padding-left: 24px; }
/* Titles justify so the panel keeps a clean right edge against the news cards
   beside it. No hyphenation here — splitting a title across lines reads worse
   than a wide gap, and these run to two lines at most. */
.pub-list a { text-align: justify; text-justify: inter-word; hyphens: manual; -webkit-hyphens: manual; }
@media (max-width: 980px) { .insights-split { grid-template-columns: 1fr; gap: 26px; } }
@media (max-width: 560px) { .insights-news { grid-template-columns: 1fr; } }

/* ---- Section header with a right-aligned action (Case Studies / Media) ---- */
.cs-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin: 0 auto 26px; max-width: 1200px; }
.cs-head h2 { margin: 6px 0 0; }
.cs-head .eyebrow { margin-bottom: 6px; }
.cs-viewall { white-space: nowrap; }
.cs-viewall-link { color: var(--ls-red); font-weight: 600; white-space: nowrap; }
.cs-viewall-link:hover { text-decoration: underline; }

/* ---- Case Studies: thumbnail + title + tags + arrow rows ---- */
.cs-list { max-width: 1200px; margin: 0 auto; }
.cs-row { display: grid; grid-template-columns: 128px 1fr auto auto; align-items: center; gap: 26px; padding: 16px 4px; border-bottom: 1px solid var(--ls-line); color: var(--ls-ink); }
.cs-row:first-child { border-top: 1px solid var(--ls-line); }
/* Fill the grid column rather than hard-coding 128px: on mobile the column
   narrows to 72px and a fixed-width thumbnail spilled out over the title. */
.cs-thumb { width: 100%; height: 82px; border-radius: 10px; overflow: hidden; background: var(--ls-offwhite); flex: none; }
.cs-thumb img { width: 100%; height: 100%; object-fit: cover; }
.cs-title { font-family: var(--font-serif); font-weight: 700; font-size: 1.1rem; line-height: 1.32; transition: color 0.2s var(--ease); }
.cs-tags { display: flex; gap: 10px; }
.cs-tag { border: 1px solid var(--ls-line); border-radius: 999px; padding: 5px 14px; font-size: 0.78rem; color: var(--ls-mid); white-space: nowrap; }
.cs-arrow { width: 44px; height: 44px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 1.15rem; color: var(--ls-ink); border: 1px solid transparent; transition: background 0.2s var(--ease), color 0.2s var(--ease); }
.cs-arrow--primary { background: var(--ls-red); color: #fff; }
.cs-row:hover .cs-arrow { background: var(--ls-red); color: #fff; }
.cs-row:hover .cs-title { color: var(--ls-red); }
@media (max-width: 760px) {
  .cs-head { flex-direction: column; align-items: flex-start; }
  .cs-row { grid-template-columns: 72px 1fr auto; gap: 14px; align-items: start; }
  .cs-thumb { height: 56px; }
  .cs-title { font-size: 0.98rem; line-height: 1.35; }
  .cs-arrow { width: 34px; height: 34px; font-size: 1rem; align-self: center; }
  .cs-tags { display: none; }
}

/* ---- Media & Podcast: text cards ---- */
.media-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; max-width: 1200px; margin: 0 auto; }
.media-card { background: #fff; border: 1px solid var(--ls-line); border-radius: 12px; padding: 22px 24px; transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease); }
.media-card:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(20, 20, 30, 0.08); }
.media-card h3 { font-family: var(--font-serif); font-size: 1.16rem; line-height: 1.3; margin: 0 0 10px; }
.media-card h3 a { color: var(--ls-ink); }
.media-card h3 a:hover { color: var(--ls-red); }
.media-card p { color: var(--ls-mid); font-size: 0.92rem; line-height: 1.55; margin: 0 0 14px; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.media-more { color: var(--ls-red); font-weight: 600; font-size: 0.9rem; }
.media-more:hover { text-decoration: underline; }
@media (max-width: 760px) { .media-grid { grid-template-columns: 1fr; } }

.empty-note { color: var(--ls-mid); text-align: center; padding: 20px; }

/* Pages migrated from the previous site (legacy markup lands inside .prose) */
.legacy-date { color: var(--ls-mid); font-size: 0.88rem; letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: 14px; }
.legacy-prose img { max-width: 100%; height: auto; border-radius: 8px; }
/* Migrated tables carry an inline "width:900px", which beats a plain width
   declaration and made the whole page scroll sideways on a phone. Override it
   and cap the box, so a table too wide to fit scrolls inside its own column
   instead of dragging the layout with it. Applies to .prose as well: service
   overviews are built from the same legacy markup. */
.prose table, .legacy-prose table {
  width: 100% !important; max-width: 100%;
  display: block; overflow-x: auto; -webkit-overflow-scrolling: touch;
  border-collapse: collapse; margin: 18px 0;
}
.prose td, .prose th,
.legacy-prose td, .legacy-prose th { border: 1px solid var(--ls-line); padding: 8px 12px; text-align: left; }
/* The migrated tables put plain <td> inside <thead>, so the column labels carry
   no weight of their own. Style that row as a header instead — the labels used
   to be promoted to headings, which put table furniture into the page outline. */
.prose thead td, .prose thead th,
.legacy-prose thead td, .legacy-prose thead th {
  background: var(--ls-offwhite);
  font-weight: 600;
}
.prose thead td p, .legacy-prose thead td p { margin: 0; }
/* Long unbroken strings (case citations, URLs) must not widen the page either. */
.prose, .legacy-prose { overflow-wrap: anywhere; }
.prose img { max-width: 100%; height: auto; }
/* Migrated link lists put a thumbnail inside the anchor
   ("<li><a><img> International Arbitrations</a></li>"). The default block
   margin on .prose img pushed the label onto its own line, leaving a stray
   bullet beside a floating image. Lay each item out as thumbnail + label. */
.prose li > a > img,
.legacy-prose li > a > img {
  width: 44px; height: 44px; object-fit: cover;
  margin: 0; border-radius: 8px; flex: none;
}
.prose li:has(> a > img),
.legacy-prose li:has(> a > img) { list-style: none; margin-left: -1.3em; }
/* The "Related Information" lists put the thumbnail beside the link instead of
   inside it, as <img align="left">, which browsers render as a float. Floats
   stack, so each item began further right than the one above and the list came
   out as a staircase. The image is decorative — the same magazine icon 229
   times across the site — so it goes, and the list keeps its own marker. */
.prose li > img[align="left"],
.legacy-prose li > img[align="left"] { display: none; }
.prose li > a:has(> img),
.legacy-prose li > a:has(> img) {
  display: flex; align-items: center; gap: 12px;
  padding: 6px 0; text-decoration: none;
}
.legacy-prose iframe, .prose iframe { max-width: 100%; }
.legacy-prose [class*="col-"], .legacy-prose .row { width: auto !important; float: none !important; padding: 0 !important; margin-left: 0 !important; margin-right: 0 !important; }

.contact-panel { text-align: center; }
.contact-panel .eyebrow::before { display: none; }
.contact-cols { display: flex; justify-content: center; gap: 30px; flex-wrap: wrap; margin: 28px 0 6px; color: var(--ls-mid); font-size: 0.93rem; }
.contact-cols .ic { color: var(--ls-red); }
.contact-cols a { color: var(--ls-mid); }
.contact-cols a:hover { color: var(--ls-red); }
.contact-legal { margin-top: 24px; font-size: 0.85rem; display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.contact-legal a { color: var(--ls-mid); }
.contact-legal a:hover { color: var(--ls-red); }
.contact-legal span { opacity: 0.4; }
.contact-copy { margin-top: 10px; font-size: 0.8rem; color: var(--ls-mid); }

/* Side section navigation (Khaitan-style) */
.hfp-nav { position: fixed; top: 50%; right: 30px; transform: translateY(-50%); z-index: 900; display: none; color: var(--ls-charcoal-2); }
body.hfp-lock .hfp-nav { display: block; }
.hfp-nav ul { list-style: none; margin: 0; padding: 0; }
.hfp-nav li { display: flex; align-items: center; justify-content: flex-end; gap: 14px; height: 50px; }
.hfp-nav button { background: none; border: 0; padding: 0; cursor: pointer; display: flex; align-items: center; gap: 14px; color: inherit; font: inherit; }
/* Labels stay visible alongside the dots; the hovered/active one is full-strength.
   Content is centred well clear of the nav, so the labels don't sit over it. */
.hfp-nav .lbl { font-size: 0.85rem; font-weight: 600; letter-spacing: 0.02em; white-space: nowrap; opacity: 0.72; transition: opacity 0.25s, color 0.25s; }
.hfp-nav li:hover .lbl { opacity: 1; }
.hfp-nav li.active .lbl { opacity: 1; color: var(--ls-red); }
.hfp-nav.on-dark .lbl { text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5); }
.hfp-nav .dot { width: 13px; height: 13px; border-radius: 50%; border: 2px solid currentColor; opacity: 0.5; position: relative; flex: none; transition: all 0.25s; }
.hfp-nav li.active .dot { opacity: 1; border-color: var(--ls-red); background: var(--ls-red); --dot-glow: 198, 40, 40; box-shadow: 0 0 0 4px rgba(198, 40, 40, 0.16); animation: hfpDotPulse 2s ease-in-out infinite; }
.hfp-nav .dot::after { content: ""; position: absolute; left: 50%; top: 15px; transform: translateX(-50%); width: 2px; height: 37px; background: currentColor; opacity: 0.28; }
.hfp-nav li:last-child .dot::after { display: none; }
.hfp-nav.on-dark { color: #fff; }
.hfp-nav.on-dark li.active .lbl { color: #fff; }
.hfp-nav.on-dark li.active .dot { border-color: #fff; background: #fff; --dot-glow: 255, 255, 255; box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.25); }
/* Gentle glow pulse on the active section dot */
@keyframes hfpDotPulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(var(--dot-glow, 198, 40, 40), 0.30); }
  50% { box-shadow: 0 0 0 8px rgba(var(--dot-glow, 198, 40, 40), 0.05); }
}

/* Advance / scroll indicator */
.hfp-advance { position: fixed; right: 16px; bottom: 14px; z-index: 901; display: none; width: 40px; height: 40px; border-radius: 50%; border: 2px solid currentColor; background: transparent; color: var(--ls-charcoal-2); cursor: pointer; align-items: center; justify-content: center; transition: background 0.2s, color 0.2s, border-color 0.2s; }
body.hfp-lock .hfp-advance { display: flex; }
/* On desktop the right-side section nav owns the right edge, so hide the hero's
   side slide-arrows there to avoid the overlap (dots + autoplay still navigate). */
body.hfp-lock .hs-arrow { display: none; }
.hfp-advance .arr { font-size: 1.05rem; line-height: 1; animation: hfpbob 1.6s ease-in-out infinite; }
.hfp-advance:hover { background: var(--ls-red); border-color: var(--ls-red); color: #fff; }
.hfp-advance.on-dark { color: #fff; }
@keyframes hfpbob { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(5px); } }

/* Fit each panel within one screen (tighter spacing + media, no internal scroll) */
.hfp.hfp--active .hfp-panel:not(.hfp-panel--hero) { padding: calc(var(--header-h) + 14px) 0 24px; }
.hfp.hfp--active .section-head { margin-bottom: 20px; }
.hfp.hfp--active .section-head .eyebrow { margin-bottom: 8px; }
.hfp.hfp--active .section-head h2 { font-size: clamp(1.55rem, 2.3vw, 2.05rem); margin-bottom: 8px; }
.hfp.hfp--active .section-head p { font-size: 0.95rem; }
.hfp.hfp--active .hfp-panel .text-center { margin-top: 22px !important; }
/* Expertise — compact cards, summaries clamped to 2 lines */
.hfp.hfp--active .grid--compact { gap: 14px; }
.hfp.hfp--active .grid--compact .service-card { padding: 16px 18px; }
.hfp.hfp--active .grid--compact .service-card .ic { font-size: 1.3rem; margin-bottom: 8px; }
.hfp.hfp--active .grid--compact .service-card h3 { font-size: 1rem; margin-bottom: 6px; }
.hfp.hfp--active .grid--compact .service-card p { font-size: 0.8rem; margin-bottom: 10px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hfp.hfp--active .grid--compact .service-card .more { font-size: 0.72rem; }
/* People — shorter portraits */
.hfp.hfp--active [data-label="People"] .team-card .photo,
.hfp.hfp--active [data-label="People"] .team-card .ph-fallback { aspect-ratio: 3 / 4; height: auto; max-height: 40vh; }
.hfp.hfp--active .team-card .body { padding: 14px 18px 16px; }
/* Insights — slightly tighter cards, excerpts clamped */
.hfp.hfp--active [data-label="Insights"] .post-card .body { padding: 16px 20px 18px; }
.hfp.hfp--active [data-label="Insights"] .post-card p { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

@media (min-width: 901px) { body.page-home .site-footer { display: none; } }
@media (max-width: 900px) {
  .hfp.hfp--active { height: auto; overflow: visible; }
  .hfp.hfp--active .hfp-track { display: block; width: auto; height: auto; transform: none !important; }
  .hfp.hfp--active .hfp-panel { width: 100%; height: auto; overflow: visible; padding: 80px 0 56px; display: block; }
  .hfp.hfp--active .hfp-panel .container { padding-right: 24px; }
  .hfp-nav, .hfp-advance { display: none !important; }
}

/* ---- About: corporate page layout ------------------------------------- */
/* The migrated copy is unchanged; these styles just give it structure —
   a lead statement beside the firm's figures, its slogan as a pull quote,
   and the practice-area list as cards instead of 60px thumbnails. */
.section--muted { background: var(--ls-offwhite); }
.split--lead { align-items: center; gap: 48px; }
.about-lead__text { font-size: 1.24rem; line-height: 1.62; color: var(--ls-ink); margin: 10px 0 0; }
.about-lead__text a { color: var(--ls-red); }
.about-slogan {
  margin: 26px 0 0; padding: 18px 22px; border-left: 3px solid var(--ls-red);
  background: var(--ls-offwhite); font-family: var(--font-serif); font-size: 1.08rem;
  line-height: 1.5; color: var(--ls-ink);
}
.about-slogan strong { color: var(--ls-red); }
.about-stats .stat__num { color: var(--ls-red); }
.about-body p { margin-bottom: 18px; }
.about-body a { color: var(--ls-red); }
.about-cta {
  text-align: center; background: var(--ls-offwhite); border: 1px solid var(--ls-line);
  border-radius: 18px; padding: 46px 34px;
}
.about-cta h2 { font-family: var(--font-serif); margin-bottom: 10px; }
.about-cta p { color: var(--ls-mid); margin-bottom: 22px; }
@media (max-width: 900px) {
  .split--lead { gap: 30px; }
  .about-lead__text { font-size: 1.1rem; }
  .about-cta { padding: 34px 22px; }
}

/* ---- About: practice section ------------------------------------------ */
/* A single readable column with a quiet aside — no per-paragraph decoration. */
/* The lead and the practice account are one continuous read, so the two
   sections' padding stacked into a 168px band of empty page between them.
   Close it entirely: the practice heading follows the slogan directly, and
   the heading carries its own space below. The outer padding of the pair is
   untouched. */
.about-lead { padding-bottom: 0; }
.about-lead + .about-practice { padding-top: 0; }

.about-practice .ab-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 56px; align-items: start; }
.about-practice .ab-main { max-width: 68ch; }
.about-practice .ab-main p { margin: 0 0 20px; color: var(--ls-charcoal-2); font-size: 1.02rem; line-height: 1.8; }
.about-practice .ab-main p:last-child { margin-bottom: 0; }
.about-practice .ab-main a { color: var(--ls-red); }
.about-practice .ab-main b, .about-practice .ab-main strong { color: var(--ls-ink); font-weight: 600; }

.ab-aside { position: sticky; top: calc(var(--header-h) + 20px); display: flex; flex-direction: column; gap: 18px; }
.ab-card { border: 1px solid var(--ls-line); border-radius: 12px; padding: 20px; background: #fff; }
.ab-card h3 { font-size: 0.78rem; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ls-mid); margin: 0 0 14px; font-weight: 600; }

.ab-card--partner { display: flex; align-items: center; gap: 14px; padding: 16px; color: inherit; transition: border-color 0.2s var(--ease); }
.ab-card--partner:hover { border-color: var(--ls-red); }
/* The partner card was already a flex row with a gap — it just had nothing
   to sit beside the name. The portrait is greyscaled to match the team grid,
   and picks up its colour on hover as those cards do. */
.ab-card__avatar { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; flex: none;
  background: var(--ls-grey-light); filter: grayscale(100%); transition: filter 0.3s var(--ease); }
.ab-card--partner:hover .ab-card__avatar { filter: grayscale(0); }
.ab-card__avatar--initials { display: flex; align-items: center; justify-content: center;
  background: var(--ls-charcoal); color: #fff; font-family: var(--font-serif); filter: none; }
.ab-card__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ab-card__role { font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ls-mid); }
.ab-card__text strong { font-family: var(--font-serif); font-size: 1.02rem; color: var(--ls-ink); }
.ab-card__link { font-size: 0.82rem; color: var(--ls-red); }

/* Brochure download: the same row as the partner card, with a file chip where
   the portrait sits, so the aside reads as one set of cards. */
.ab-card--download { display: flex; align-items: center; gap: 14px; padding: 16px; color: inherit; transition: border-color 0.2s var(--ease); }
.ab-card--download:hover { border-color: var(--ls-red); }
.ab-card__file {
  width: 56px; height: 56px; border-radius: 10px; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: var(--ls-offwhite); color: var(--ls-mid);
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em;
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}
.ab-card--download:hover .ab-card__file { background: var(--ls-red); color: #fff; }

.ab-list { list-style: none; margin: 0; padding: 0; }
.ab-list li { padding: 9px 0; border-bottom: 1px solid var(--ls-line); }
.ab-list li:last-child { border-bottom: none; padding-bottom: 0; }
.ab-list b { display: block; font-size: 0.9rem; color: var(--ls-ink); font-weight: 600; }
.ab-list span { display: block; font-size: 0.8rem; color: var(--ls-mid); line-height: 1.45; margin-top: 2px; }

@media (max-width: 900px) {
  .about-practice .ab-layout { grid-template-columns: 1fr; gap: 30px; }
  .ab-aside { position: static; }
}

/* The map fills the space under the contact form, beside the office details. */
.contact-map { margin-top: 26px; border: 1px solid var(--ls-line); border-radius: var(--radius-lg); overflow: hidden; }
.contact-map iframe { display: block; width: 100%; border: 0; }

/* ---- Justified body copy on internal pages ---------------------------- */
/* Applies to the shared .prose container (service pages, migrated pages,
   profiles, insights, FAQs, careers) and the About column. Headings, buttons
   and captions keep their own alignment. Lines close by widening the spaces,
   never by hyphenating a word — see the hyphens declaration below. */
/* A hyphenated compound marked to stay whole. Justification closes the line by
   widening the spaces around it instead of splitting the word. */
.nb { white-space: nowrap; }

.prose p,
.prose li,
.prose blockquote,
.about-practice .ab-main p,
.about-lead__text,
.about-slogan,
.lead,
.section .container > p,
.section .container .grid > .reveal:not(.card) > p,
/* The standfirst under a page title. It is body copy set left at a 640px
   measure, not centred display text like the homepage hero, so it justifies
   with the rest of the page rather than leaving a ragged edge above it. */
.page-hero p {
  text-align: justify;
  text-justify: inter-word;
  /* No hyphens inserted to close a line — the spaces widen instead. Words the
     firm actually uses ("pre-adjudication", "cross-border") are compounds that
     read worse broken, and .nb keeps those whole on top of this. */
  hyphens: manual;
  -webkit-hyphens: manual;
}

/* Below roughly a 550px measure, justifying without hyphens stops working:
   with no word allowed to break, the spaces carry the whole difference. On
   this copy the widest gap goes 14px at a 693px column, 32px at 533px, 50px at
   413px, 102px at 308px — by the end a gap three lines of text could fit
   through. Hyphenating instead is the other way out, and the firm did not want
   words broken, so narrow screens set ragged right and keep the words intact. */
@media (max-width: 700px) {
  .prose p,
  .prose li,
  .prose blockquote,
  .about-practice .ab-main p,
  .about-lead__text,
  .about-slogan,
  .lead,
  .section .container > p,
  .section .container .grid > .reveal:not(.card) > p,
  .page-hero p {
    text-align: left;
  }
}

/* Chrome and display text keep their own alignment. Cards run ~230px wide,
   where justifying opens gaps wider than the words; the homepage hero and
   section heads are centred; the footer repeats on every page. */
.hero p,
.section-head p,
.card p,
.post-card p,
.service-card p,
.testimonial-card p,
.site-footer p,
footer p,
.empty-note,
.help,
figcaption,
.eyebrow {
  text-align: inherit;
  hyphens: manual;
  -webkit-hyphens: manual;
}

/* ---- Migrated prose: give it a web page's rhythm ---------------------- */
/* The old site marked section titles as bold paragraphs and left lists raw,
   so pages read as one long document. h.rich() turns those into real headings
   and tags the lists; these rules give them hierarchy and breathing room. */
.prose .prose-heading {
  font-family: var(--font-serif);
  font-size: clamp(1.12rem, 1.7vw, 1.3rem);
  line-height: 1.3;
  color: var(--ls-ink);
  margin: 2.1em 0 0.7em;
  padding-top: 0.9em;
  border-top: 1px solid var(--ls-line);
  text-align: left;
}
/* Office and chamber, stacked with a small label above each so the two read as
   different kinds of place rather than a list of branches. */
.ab-place { font-size: 0.9rem; line-height: 1.5; color: var(--ls-mid); }
.ab-place + .ab-place { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--ls-line); }
.ab-place__k {
  display: block; font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ls-ink); font-weight: 600; margin-bottom: 3px;
}

/* The title that opened the content area on the old site sits above the run of
   subsections, so it has to read as the larger of the two. Without this the
   shared .prose-heading size would flatten both levels into one. */
.prose h2.prose-heading {
  font-size: clamp(1.35rem, 2.1vw, 1.75rem);
  margin-top: 2.6em;
}
.prose .prose-heading:first-child { margin-top: 0; padding-top: 0; border-top: none; }
.prose .prose-heading strong,
.prose .prose-heading b { font-weight: 700; }

/* Lists: an accented marker instead of the browser's default bullet. */
.prose .prose-list { list-style: none; padding-left: 0; margin: 0 0 1.4em; }
.prose .prose-list > li {
  position: relative;
  padding: 0 0 0 26px;
  margin-bottom: 10px;
  line-height: 1.68;
}
.prose .prose-list > li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 0.62em;
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: var(--ls-red);
  opacity: 0.85;
}
.prose .prose-list > li:last-child { margin-bottom: 0; }
.prose .prose-list ul,
.prose .prose-list ol { margin-top: 10px; }

/* Opening paragraph carries a little more weight than the body. */
.prose > p:first-of-type { font-size: 1.08rem; color: var(--ls-charcoal-2); }

@media (max-width: 620px) {
  .prose .prose-heading { margin-top: 1.7em; }
}

/* ---- Migrated article pages (news, case studies, events) --------------- */
.article-meta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 20px; }
.article-meta__date { color: var(--ls-mid); font-size: 0.9rem; }
.side-links { list-style: none; margin: 0; padding: 0; }
.side-links li { padding: 8px 0; border-bottom: 1px solid var(--ls-line); }
.side-links li:last-child { border-bottom: none; padding-bottom: 0; }
.side-links a { color: var(--ls-ink); font-size: 0.94rem; }
.side-links a:hover { color: var(--ls-red); }

/* ---- Subscribe band, above the footer on the insights sections --------- */
.subscribe-band { padding: 0 0 72px; }
.subscribe-card {
  background: var(--ls-offwhite); border: 1px solid var(--ls-line);
  border-left: 4px solid var(--ls-red); border-radius: var(--radius-lg);
  padding: 34px 38px;
}
.subscribe-card h2 {
  font-family: var(--font-serif); font-size: 1.5rem; line-height: 1.3;
  color: var(--ls-ink); margin: 0 0 10px; max-width: 60ch;
}
.subscribe-card p { color: var(--ls-mid); margin: 0 0 20px; max-width: 72ch; font-size: 0.96rem; }
.subscribe-form { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.subscribe-form input[type="email"] {
  flex: 1 1 300px; max-width: 380px; padding: 12px 14px;
  border: 1px solid var(--ls-line); border-radius: 8px; background: #fff;
  font-family: inherit; font-size: 0.95rem; color: var(--ls-ink);
}
.subscribe-form input[type="email"]:focus {
  outline: none; border-color: var(--ls-red); box-shadow: 0 0 0 3px rgba(198, 40, 40, 0.12);
}
.subscribe-form .btn { flex: 0 0 auto; }

/* Present for a screen reader, absent from the page. */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* The newsletter opt-in on the contact form: box first, then its label, on one
   line. The size, padding and border are all stated rather than left to be
   inherited — .field input sets width:100% for the text fields, and a checkbox
   given that stretches the whole row and centres its tick in the middle, which
   drops the label onto a line of its own. */
.field--check { display: flex; align-items: flex-start; gap: 9px; }
.field--check input[type="checkbox"] {
  width: 16px; height: 16px; min-width: 16px; flex: none;
  margin: 0; padding: 0; border: 0; border-radius: 0;
  accent-color: var(--ls-red);
  /* Sits on the label's first line rather than the middle of the block, so a
     label long enough to wrap does not push the box halfway down beside it. */
  margin-top: 0.14em;
}
.field--check label {
  margin: 0; padding: 0; font-weight: 500; color: var(--ls-ink);
  cursor: pointer; line-height: 1.35;
}

@media (max-width: 620px) {
  .subscribe-card { padding: 26px 22px; }
  .subscribe-card h2 { font-size: 1.24rem; }
  .subscribe-form input[type="email"] { max-width: none; }
  .subscribe-form .btn { width: 100%; justify-content: center; }
}