/* Navicus Law — design system
 *
 * File structure (keep this order):
 *   1. Tokens             — :root custom properties
 *   2. Web fonts          — @font-face, self-hosted under /assets/fonts/
 *   3. Reset              — box-sizing, body, img/video defaults
 *   4. Base elements      — h1–h6, p, a (no class needed)
 *   5. Layout primitives  — .container (only what is used in HTML)
 *   6. Utilities          — .eyebrow etc. (added when first used)
 *   7. Preview helpers    — body.preview-on-dark (dev-time only)
 *   8. Components         — alphabetical; one block per component;
 *                           breakpoints co-located inside each block
 *
 * Rules:
 *   - Only add CSS for components that exist in HTML. No pre-stubbing.
 *   - BEM: .block, .block__element, .block--modifier, .is-state.
 *   - No inline style="" in HTML.
 *   - When a value comes from old-website source, comment which rule it mirrors.
 */

/* 1. Tokens
   ----------------------------------------------------------------- */

:root {
  /* color */
  --c-bg-deep:       #023734;  /* primary dark teal — hero, footer, dark sections */
  --c-bg-mid:        #105a55;  /* secondary teal — heading on light, button hover */
  --c-bg-muted:      #2a554e;  /* muted teal — feature/statement bands on dark pages */
  --c-bg-light:      #ffffff;
  --c-bg-soft:       #ededed;  /* off-white — light section background */
  --c-accent:        #88a19a;  /* sage — links/buttons on dark */
  --c-accent-hover:  #8ab2aa;
  --c-accent-overlay:#7e9b99;  /* sage variant — overlay-menu hover (old site) */
  --c-fg-light:      #fafafa;
  --c-fg-muted:      #ededed;
  --c-fg-navy:       #0d2b3a;  /* dark navy — body copy on light bg */
  --c-fg-dark:       #212121;

  /* layout */
  --container-max: 1260px;
  --gutter:        1.667rem;   /* 30px — body container padding */
  --header-inset:  2.222rem;   /* 40px — header nav/logo offset from edge */
  --header-pad-y:  3.556rem;   /* 64px — header top + bottom padding */
  --header-row:    3.556rem;   /* 64px — header content row height */

  /* type */
  --font-display:         "GT Super Display Bold", Georgia, serif;
  --font-display-italic:  "GT Super Display Light Italic", Georgia, serif;
  --font-display-light:   "GT Super Display Light", Georgia, serif;
  --font-display-regular: "GT Super Display Regular", Georgia, serif;
  --font-sans:            "SharpSansDispNo1 Medium", system-ui, -apple-system, "Helvetica Neue", sans-serif;
  --font-body:            "Lora", Georgia, serif;
}

/* 2. Web fonts
   Self-hosted under /assets/fonts/. Originally from old-website's
   22w.118.myftpupload.com CDN — downloaded once to avoid relying on
   an external host that could go away.
   ----------------------------------------------------------------- */

@font-face {
  font-family: "GT Super Display Bold";
  src: url("/assets/fonts/GT-Super-Display-Bold.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "GT Super Display Light Italic";
  src: url("/assets/fonts/GT-Super-Display-Light-Italic.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;       /* italic is in the font itself, not via CSS */
  font-display: swap;
}
@font-face {
  font-family: "GT Super Display Light";
  src: url("/assets/fonts/GT-Super-Display-Light.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "GT Super Display Regular";
  src: url("/assets/fonts/GT-Super-Display-Regular.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "SharpSansDispNo1 Medium";
  src: url("/assets/fonts/SharpSansDispNo1-Medium.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* 2. Reset
   ----------------------------------------------------------------- */

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

html { font-size: 18px; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.333;
  color: var(--c-fg-light);
  background: var(--c-bg-deep);    /* deep teal so any gaps between dark sections stay dark */
  -webkit-font-smoothing: antialiased;
}

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

/* 3. Base elements
   ----------------------------------------------------------------- */

a { color: var(--c-accent); text-decoration: none; }
a:hover { color: var(--c-accent-hover); }

h1, h2, h3, h4, h5, h6 { margin: 0 0 0.5em; font-weight: 700; }

h1 {
  font-family: var(--font-display);
  font-size: 2.667rem;
  line-height: 2.889rem;
  letter-spacing: -0.033rem;
}
h2 {
  font-family: var(--font-display-italic);
  font-style: italic;
  font-weight: 200;
  font-size: 2.667rem;
  line-height: 2.889rem;
}
h3 {
  font-family: var(--font-display-italic);
  font-style: italic;
  font-weight: 200;
  font-size: 1.889rem;
  line-height: 2.333rem;
}
h4 { font-family: var(--font-sans); font-size: 1.222rem; line-height: 2.056rem; font-weight: 500; }
h5 { font-family: var(--font-sans); font-size: 1.111rem; line-height: 1.889rem; font-weight: 500; }
h6 { font-family: var(--font-sans); font-size: 0.944rem; line-height: 1.667rem; font-weight: 500; }

p { margin: 0 0 1.333em; }

/* 4. Layout primitives
   ----------------------------------------------------------------- */

.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.container--fluid { max-width: 100%; }   /* matches old-site [data-layout="fluid"] .container */

/* 5. Utilities
   (none yet — add when first used)
   ----------------------------------------------------------------- */

/* 6. Preview helpers
   Temporary canvas for previewing components against the brand dark
   background before a real hero/section provides it. Remove when a
   hero is in place.
   ----------------------------------------------------------------- */

body.preview-on-dark {
  background: var(--c-bg-deep);
  color: var(--c-fg-light);
  min-height: 100vh;
}

/* 7. Components
   ----------------------------------------------------------------- */

/* .about-services
 * Tagline + CTA on deep teal with the court illustration anchored to the
 * bottom-right corner. Copy column sits in the left half (6/12); the right
 * half is empty so the illustration is visible behind/beside it.
 * Mirrors old-site /about-us/ #section_jrwpx0sti.
 */
.about-services {
  background-color: var(--c-bg-deep);
  background-image: url("/assets/img/court-illustration.png");
  background-repeat: no-repeat;
  background-position: 100% 100%;     /* bottom-right */
  background-size: contain;
  color: var(--c-fg-light);
  padding-top: 4.444rem;
  padding-bottom: 36.111rem;          /* matches old #section_jrwpx0sti */
}
.about-services__row {
  display: grid;
  grid-template-columns: 1fr 1fr;     /* 6/6 — copy left, empty right */
  gap: 0;
}
.about-services__copy {
  /* sits in column 1 by default */
}
.about-services__tagline {
  font-family: var(--font-display-italic);
  font-size: 2.111rem;
  line-height: 2.778rem;
  color: var(--c-accent);
  margin: 0 0 2.222rem;
}
.about-services__action { margin: 0; }

@media (max-width: 991.98px) {
  .about-services { padding-bottom: 22rem; }
  .about-services__row { grid-template-columns: 1fr; }
  .about-services__tagline { font-size: 1.667rem; line-height: 2.222rem; }
}
@media (max-width: 543.98px) {
  .about-services { padding-bottom: 16rem; }
}


/* .about-principles
 * Heading + sage italic subhead + lead paragraph + sage outline CTA, with
 * content constrained to a 7/12 column on the left (5/12 spacer on the right).
 * Mirrors old-site /about-us/ #section_wzrl2lq83.
 */
.about-principles {
  background-color: var(--c-bg-deep);
  color: var(--c-fg-light);
  padding: 5.556rem 0 4.444rem;     /* matches old #section_wzrl2lq83 */
}
.about-principles__row {
  display: grid;
  grid-template-columns: 7fr 5fr;   /* matches old data-xl-width 7 / 5 (spacer) */
  align-items: center;
  gap: 0;
}
.about-principles__heading {
  font-family: var(--font-display);
  font-style: normal;               /* override h2 base italic */
  font-weight: normal;
  font-size: 2.111rem;
  line-height: 2.778rem;
  color: var(--c-fg-muted);
  margin: 0 0 0.556rem;
}
.about-principles__tagline {
  font-family: var(--font-display-italic);
  font-size: 2.111rem;
  line-height: 2.778rem;
  color: var(--c-accent);
  margin: 0 0 1.111rem;
}
.about-principles__lead {
  font-family: var(--font-sans);
  font-size: 1.056rem;
  line-height: 1.667rem;
  color: var(--c-fg-light);
  margin: 0 0 1.667rem;
}
.about-principles__action { margin: 0; }

@media (max-width: 991.98px) {
  .about-principles__row { grid-template-columns: 1fr; }
  .about-principles__heading,
  .about-principles__tagline { font-size: 1.778rem; line-height: 2.444rem; }
}


/* .principles
 * 3 × 2 grid of rectangular principle cards. Each card: number eyebrow,
 * sage italic heading, off-white body. Subtle contrast against the deep teal
 * by using a slightly lighter muted-teal panel.
 * Mirrors old-site /about-us/ #section_2de9abie8.
 */
.principles {
  background-color: var(--c-bg-deep);
  color: var(--c-fg-light);
  padding: 0 0 5.556rem;
}
.principles__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.667rem;
}
.principles__card {
  background-color: var(--c-bg-muted);
  padding: 2.222rem 1.667rem;
  display: flex;
  flex-direction: column;
}
.principles__number {
  font-family: var(--font-display);
  font-style: normal;
  font-weight: normal;
  font-size: 1rem;
  letter-spacing: 0.111rem;
  color: var(--c-accent);
  margin: 0 0 1.111rem;
}
.principles__heading {
  font-family: var(--font-display-italic);
  font-style: normal;               /* font itself is italic */
  font-weight: normal;
  font-size: 1.778rem;
  line-height: 2.222rem;
  color: var(--c-accent);
  margin: 0 0 1.111rem;
}
.principles__body {
  font-family: var(--font-sans);
  font-size: 0.889rem;
  line-height: 1.5rem;
  color: var(--c-fg-muted);
  margin: 0;
}

@media (max-width: 991.98px) {
  .principles__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 543.98px) {
  .principles__grid { grid-template-columns: 1fr; }
  .principles__heading { font-size: 1.444rem; line-height: 1.889rem; }
}


/* .about-dedicated
 * Italic sage tagline + sage outline CTA on deep teal, with the court
 * illustration anchored to the bottom-right corner. Sits between the
 * "Driven on solving problems" intro and the principle cards.
 * Mirrors old-site /about-us/ #section_2de9abie8 closing row + bg.
 */
.about-dedicated {
  background-color: var(--c-bg-deep);
  background-image: url("/assets/img/court-illustration.png");
  background-repeat: no-repeat;
  background-position: 100% 100%;
  background-size: contain;
  color: var(--c-fg-light);
  padding: 4.444rem 0 22rem;
}
.about-dedicated__row {
  display: grid;
  grid-template-columns: 7fr 5fr;   /* matches old data-xl-width=7 + spacer 5 */
  gap: 0;
}
.about-dedicated__tagline {
  font-family: var(--font-display-italic);
  font-size: 2.111rem;
  line-height: 2.778rem;
  color: var(--c-accent);
  margin: 0 0 2.222rem;
}
.about-dedicated__action { margin: 0; }

@media (max-width: 991.98px) {
  .about-dedicated { padding-bottom: 14rem; }
  .about-dedicated__row { grid-template-columns: 1fr; }
  .about-dedicated__tagline { font-size: 1.667rem; line-height: 2.222rem; }
}
@media (max-width: 543.98px) {
  .about-dedicated { padding-bottom: 10rem; }
}


/* .about-team
 * Closing section: three team photos in a row, then a centered italic sage
 * tagline + sage outline CTA below.
 * Mirrors old-site /about-us/ #section_82aeccf59.
 */
.about-team {
  background-color: var(--c-bg-deep);
  color: var(--c-fg-light);
  padding: 0 0 2.778rem;             /* tightened — top spacing comes from .wave-divider above */
}
.about-team__copy {
  max-width: 50%;                     /* matches old data-xl-width=6 inside fluid container */
  margin: 0 auto;
  text-align: center;
}
.about-team__tagline {
  font-family: var(--font-display-italic);
  font-size: 2.111rem;
  line-height: 2.889rem;
  color: var(--c-accent);
  margin: 0 0 2.222rem;
}
.about-team__action { margin: 0; }

@media (max-width: 991.98px) {
  .about-team__copy { max-width: 80%; }
  .about-team__tagline { font-size: 1.778rem; line-height: 2.333rem; }
}
@media (max-width: 543.98px) {
  .about-team__copy { max-width: 100%; }
}


/* .anniversary-callout
 * Three-column band on deep teal: anniversary logo (left), heading and
 * subhead (center), CTA button (right). Background photo overlays the
 * deep-teal fill.
 * Mirrors old-site #section_q0dcs9qwu.
 */
.anniversary-callout {
  background-color: var(--c-bg-deep);
  background-image: url("/assets/img/anniversary-bg.png?v=2");
  background-repeat: no-repeat;
  background-position: center;       /* center so the ship stays visible at all widths */
  background-size: cover;
  color: var(--c-fg-light);
  padding: 3.333rem 0;               /* matches old #section_q0dcs9qwu */
}
.anniversary-callout__row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: center;
  gap: 0;
  padding: 0 1.389rem;               /* matches old column padding 25px on row sides */
}

.anniversary-callout__logo {
  display: flex;
  align-items: center;
  justify-content: flex-start;       /* logo flush to the left of its cell */
}
.anniversary-callout__logo img {
  display: block;
  width: 100%;
  max-width: 18rem;                  /* ~324px — fixed cap so logo stays small at all widths */
  height: auto;
}

.anniversary-callout__copy {
  text-align: center;
  padding: 0 1.389rem;
}
.anniversary-callout__heading {
  font-family: var(--font-display-regular);
  font-style: normal;                /* override h2 base italic */
  font-weight: normal;
  font-size: 1.333rem;               /* matches old #content_jlz5mwsfh */
  line-height: 3.333rem;
  color: var(--c-fg-muted);
  margin: 0;
}
.anniversary-callout__sub {
  font-family: var(--font-display-italic);
  font-size: 1.167rem;               /* matches old #content_hszalw9dh */
  color: var(--c-accent);
  margin: 0;
}

.anniversary-callout__action {
  display: flex;
  align-items: center;
  justify-content: flex-end;         /* button flush to the right of its cell */
  padding: 2.778rem 0;               /* vertical breathing room from old #content_ck1f5cbih */
  margin: 0;
}

@media (max-width: 991.98px) {
  .anniversary-callout__row { grid-template-columns: 1fr; gap: 1.667rem; }
  .anniversary-callout__logo { justify-content: center; }
  .anniversary-callout__heading { line-height: 1.5; }
  .anniversary-callout__action { justify-content: center; padding: 0; }
}

@media (max-width: 543.98px) {
  .anniversary-callout__sub { font-size: 1.444rem; }  /* matches old data-font-size-xs */
  .anniversary-callout__heading { line-height: 2.222rem; }
}


/* .about-intro
 * Top section of /about-us/. Deep teal, generous top padding so the absolute
 * header doesn't overlap the heading. Copy column sits in the right half of
 * the container (left half is empty), vertically centred.
 * Mirrors old-site /about-us/ #section_eeb8c685a.
 */
.about-intro {
  background-color: var(--c-bg-deep);
  color: var(--c-fg-light);
  padding: 4.444rem 0 2.778rem;
}
.about-intro__row {
  display: grid;
  grid-template-columns: 1fr 1fr;  /* matches old data-xl-width=6 / 6 */
  gap: 0;
}
.about-intro__copy {
  grid-column: 2;                  /* sits in the right half, leaving the left half empty */
}
.about-intro__heading {
  font-family: var(--font-display);
  font-style: normal;              /* override h2 base italic */
  font-weight: normal;
  font-size: 2.889rem;
  line-height: 3.722rem;
  color: var(--c-fg-muted);
  margin: 0 0 0.556rem;
}
.about-intro__tagline {
  font-family: var(--font-display-italic);
  font-size: 2.111rem;
  color: var(--c-accent);
  margin: 0 0 1.111rem;
}
.about-intro__lead {
  font-family: var(--font-sans);
  font-size: 1.056rem;
  line-height: 1.667rem;
  color: var(--c-fg-light);
  margin: 0 0 1.667rem;
}
.about-intro__lead a {
  color: var(--c-accent);
  text-decoration: underline;
}
.about-intro__lead a:hover { color: var(--c-fg-muted); }
.about-intro__action { margin: 0; }

@media (max-width: 991.98px) {
  .about-intro { padding: 8rem 0 2.778rem; }
  .about-intro__row { grid-template-columns: 1fr; }
  .about-intro__copy { grid-column: 1; }
  .about-intro__heading { font-size: 2.111rem; line-height: 2.444rem; }
  .about-intro__tagline { font-size: 1.778rem; }
}


/* .btn
 * Outline button. The base sets shared structure with small/standard sizing.
 * Border colour follows text colour via `currentColor`, so colour variants
 * only need to override `color`.
 *
 *   .btn--lg          : taller padding + wider tracking (anniversary CTA)
 *   .btn--on-dark     : off-white outline; sage on hover (for dark bg)
 *   .btn--on-light    : deep-teal outline; mid-teal on hover (for light bg)
 *   .btn--accent      : sage outline + label, with deep-teal FILL; off-white
 *                       on hover (used on dark sections as an alternate CTA)
 *
 * Mirrors old-site #content_ck1f5cbih, #content_39457f707, #content_e82d69d97.
 */
.btn {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 0.778rem;             /* ~14px */
  text-transform: uppercase;
  letter-spacing: 0.089rem;
  padding: 0.444rem 1.778rem;
  background: transparent;
  border: 1px solid currentColor;
  border-radius: 0.111rem;
  transition: color 0.2s linear;
}

.btn--lg {
  letter-spacing: 0.278rem;
  padding: 0.833rem 1.667rem;
}
.btn--md { font-size: 0.944rem; }   /* slightly larger label, same padding */

.btn--on-dark { color: var(--c-fg-muted); }
.btn--on-dark:hover { color: var(--c-accent); }

.btn--on-light { color: var(--c-bg-deep); }
.btn--on-light:hover { color: var(--c-bg-mid); }

.btn--accent {
  color: var(--c-accent);
  background: var(--c-bg-deep);
}
.btn--accent:hover { color: var(--c-fg-muted); }


/* .contact-location
 * Centered "St. Petersburg" card on deep teal — left column has the heading,
 * address, phones, email and three outline link buttons (Google Maps, LinkedIn,
 * Facebook); right column has a portrait photo. The two columns each occupy
 * 4/12 (so the whole block is 8/12, centred horizontally — matches old
 * #section_529d88eeb data-justify="center").
 * Mirrors old-site /contact-us/ #section_529d88eeb.
 */
.contact-location {
  background-color: var(--c-bg-deep);
  color: var(--c-fg-muted);
  padding: 5.556rem 0;                        /* matches old #section_529d88eeb */
}
.contact-location__row {
  display: grid;
  grid-template-columns: 1.3fr 4fr;            /* slightly wider copy column so address spreads out */
  align-items: center;
  gap: 2.5rem;                                 /* tight gap so the photo gets the room */
  max-width: 100%;                              /* fill the full page container, not 8/12 */
  margin: 0 auto;
}
.contact-location__copy {
  text-align: left;
  margin-left: -3.333rem;                       /* push the text column further toward the page edge */
}
.contact-location__heading {
  font-family: var(--font-display);
  font-style: normal;                         /* override h2 base italic */
  font-weight: normal;
  font-size: 1.889rem;                         /* smaller display heading */
  line-height: 2.444rem;
  color: var(--c-fg-muted);
  margin: 0 0 1.333rem;
  white-space: nowrap;                         /* keep "St. Petersburg" on one line */
}
.contact-location__address {
  font-style: normal;                          /* override <address> default italic */
  margin: 0 0 1.333rem;
}
.contact-location__line {
  font-family: var(--font-sans);
  font-size: 0.889rem;                          /* smaller body */
  line-height: 1.667rem;
  letter-spacing: 0.033rem;                    /* a little more horizontal stretch */
  color: var(--c-fg-muted);
  margin: 0;
}
.contact-location__line a {
  color: var(--c-fg-muted);
  text-decoration: none;
}
.contact-location__line a:hover { color: var(--c-accent); }
.contact-location__links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.111rem;
}
/* Stacked-image trick for blurred edges:
 *   .contact-location__photo-blur  — full-bleed blurred copy of the photo
 *   .contact-location__photo-main  — sharp copy on top, masked so the centre
 *                                    is opaque and the edges fade to transparent
 *   ::after                         — deep-teal tint over the whole stack
 * Where the sharp image is transparent (the edges), the blurred copy shows
 * through, so the photo blurs out into the background instead of just fading.
 */
.contact-location__photo {
  position: relative;
  overflow: hidden;
  margin-right: -1.667rem;                     /* push the photo flush to the page's right edge */
  justify-self: end;
}
.contact-location__photo-blur {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(45px);                          /* heavier blur for softer edge transition */
  transform: scale(1.2);                       /* avoid blur halo at the clipped edge */
  z-index: 1;
}
.contact-location__photo-main {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  z-index: 2;
  /* Longer fade region (35% → 100%) so the centre eases into the blurred copy
   * over a wider area instead of cutting off abruptly. */
  -webkit-mask-image: radial-gradient(ellipse at center, #000 35%, transparent 100%);
          mask-image: radial-gradient(ellipse at center, #000 35%, transparent 100%);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
}
.contact-location__photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--c-bg-deep);
  opacity: 0.4;
  z-index: 3;
  pointer-events: none;
}

@media (max-width: 1169.98px) {
  .contact-location__row { gap: 4.444rem; }
}
@media (max-width: 991.98px) {
  .contact-location {
    padding: 4.444rem 0;
    overflow-x: hidden;              /* belt-and-braces against any horizontal overflow on mobile */
  }
  .contact-location__row {
    grid-template-columns: 1fr;
    gap: 2.222rem;
    max-width: 44rem;                 /* roomier on mobile so the portrait reads bigger */
    margin: 0 auto;                   /* re-anchor the column in the centre of the viewport */
  }
  .contact-location__copy {
    margin-left: 0 !important;        /* override the desktop -3.333rem nudge that pushes text off-screen */
    margin-right: 0 !important;
    text-align: center;
    padding: 0 var(--gutter);         /* keep the text safely inside the viewport */
  }
  .contact-location__links {
    align-items: center;              /* center the buttons on small viewports */
  }
  .contact-location__heading {
    font-size: 2.333rem;
    line-height: 2.889rem;
    white-space: normal;              /* allow "St. Petersburg" to wrap if needed */
  }
  .contact-location__photo {
    margin: 0 !important;             /* full-bleed inside the row so the photo fills its width */
    justify-self: stretch;
  }
}


/* .expertise-detail
 * Long-form per-category breakdowns of each practice area on /our-expertise/.
 * Each <article> has an id matching the practice-card link slug, so clicking
 * a card from the grid (or from the homepage) scrolls to the matching spot.
 * Sits on the deep teal page background; each group has a divider rule, an
 * italic sage tagline, and a 2-column body on desktop.
 */
.expertise-detail {
  background-color: var(--c-bg-deep);
  color: var(--c-fg-light);
  padding: 5.556rem 0 2.222rem;     /* tighter bottom spacing before the wave divider */
}
.expertise-detail__group {
  scroll-margin-top: 6.667rem;        /* clear the absolute site header on anchor jump */
  padding: 3.333rem 0;
  border-top: 1px solid rgba(136, 161, 154, 0.25);  /* sage at low alpha */
}
.expertise-detail__group:first-child { border-top: 0; padding-top: 0; }
/* 2-column row inside each group: circular sage badge on one side, copy on
 * the other. Even-numbered groups flip — badge on the right — to create an
 * alternating editorial rhythm down the page. */
.expertise-detail__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.667fr);
  gap: 4.444rem;
  align-items: start;
}
.expertise-detail__group:nth-child(even) .expertise-detail__row {
  grid-template-columns: minmax(0, 1.667fr) minmax(0, 1fr);
}
.expertise-detail__group:nth-child(even) .expertise-detail__media { order: 2; }
.expertise-detail__group:nth-child(even) .expertise-detail__copy  { order: 1; }
.expertise-detail__media {
  position: sticky;
  top: 6.667rem;                       /* stays in view while you read down */
  display: flex;
  justify-content: center;
}
.expertise-detail__badge {
  position: relative;
  width: 100%;
  max-width: 22.222rem;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: radial-gradient(
    circle at 30% 30%,
    rgba(136, 161, 154, 0.32) 0%,
    rgba(16, 90, 85, 0.55) 60%,
    rgba(2, 55, 52, 0.85) 100%
  );
  box-shadow:
    inset 0 0 0 1px rgba(136, 161, 154, 0.45),
    0 1.333rem 2.222rem -1.111rem rgba(0, 0, 0, 0.45);
  display: grid;
  place-items: center;
}
.expertise-detail__badge img {
  width: 56%;
  height: 56%;
  object-fit: contain;
  display: block;
}
.expertise-detail__copy { min-width: 0; }
/* Override the older 60rem cap so body text fills its column inside the
 * new 2-column row layout. */
.expertise-detail__copy .expertise-detail__body { max-width: none; }
.expertise-detail__heading {
  font-family: var(--font-display);
  font-style: normal;                 /* override h2 base italic */
  font-weight: normal;
  font-size: 1.889rem;
  line-height: 2.444rem;
  color: var(--c-fg-muted);
  margin: 0 0 0.667rem;
}
.expertise-detail__lead {
  font-family: var(--font-display-italic);
  font-size: 1.222rem;
  line-height: 1.778rem;
  color: var(--c-accent);
  margin: 0 0 1.444rem;
}
.expertise-detail__body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 2.778rem;
  max-width: 60rem;
}
.expertise-detail__body p {
  font-family: var(--font-body);
  font-size: 0.889rem;
  line-height: 1.556rem;
  color: var(--c-fg-light);
  margin: 0 0 0.944rem;
}
.expertise-detail__body p:last-child { margin-bottom: 0; }

/* Variant for groups with sub-headings and bullet lists (e.g. Non-Maritime
 * Matters) — body becomes a single column so each <h3>+<ul> pair stays on
 * its own line, full-width. */
.expertise-detail__body--full { grid-template-columns: 1fr; max-width: 60rem; }
.expertise-detail__subhead {
  font-family: var(--font-display-italic);
  font-style: normal;                  /* font itself is italic */
  font-weight: normal;
  font-size: 1.167rem;
  line-height: 1.556rem;
  color: var(--c-accent);
  margin: 1.444rem 0 0.556rem;
}
.expertise-detail__subhead:first-child { margin-top: 0; }
/* Chapter heading — a top-level group within a body that contains multiple
 * sub-headings (used in Maritime & Offshore and Corporate where the hierarchy
 * is two levels deep). White serif, sits above .expertise-detail__subhead. */
.expertise-detail__chapter {
  font-family: var(--font-display);
  font-style: normal;
  font-weight: normal;
  font-size: 1.444rem;
  line-height: 2rem;
  color: var(--c-fg-light);
  margin: 2.444rem 0 0.444rem;
}
.expertise-detail__chapter:first-child { margin-top: 0; }
.expertise-detail__chapter + .expertise-detail__subhead { margin-top: 0.889rem; }
.expertise-detail__list {
  margin: 0 0 1.111rem;
  padding-left: 1.667rem;
}
.expertise-detail__list li {
  font-family: var(--font-body);
  font-size: 0.889rem;
  line-height: 1.556rem;
  color: var(--c-fg-light);
  margin: 0 0 0.444rem;
}
.expertise-detail__list li:last-child { margin-bottom: 0; }

@media (max-width: 991.98px) {
  .expertise-detail { padding: 3.333rem 0 1.667rem; }
  .expertise-detail__group { padding: 2.222rem 0; }
  .expertise-detail__heading { font-size: 1.667rem; line-height: 2.222rem; }
  .expertise-detail__lead { font-size: 1.056rem; line-height: 1.667rem; }
  .expertise-detail__body { grid-template-columns: 1fr; gap: 0; }
  .expertise-detail__subhead { font-size: 1.056rem; }
  .expertise-detail__chapter { font-size: 1.278rem; line-height: 1.778rem; }
  .expertise-detail__row,
  .expertise-detail__group:nth-child(even) .expertise-detail__row {
    grid-template-columns: 1fr;
    gap: 1.667rem;
  }
  .expertise-detail__group:nth-child(even) .expertise-detail__media,
  .expertise-detail__group:nth-child(even) .expertise-detail__copy { order: initial; }
  .expertise-detail__media { position: static; justify-content: flex-start; }
  .expertise-detail__badge { max-width: 11.111rem; }
}


/* Light variant of the practice grid — used on the homepage where the
 * Practice areas section sits on a white panel between deep-teal sections.
 * Heading stays sage (green), body and labels become dark navy, icons are
 * inverted from white silhouettes to a dark teal/black via filter.
 * Selectors chain two classes (.practice-intro.practice-intro--light) to
 * outrank the base .practice-intro / .practice-grid rules that come later
 * in the file. */
.practice-intro.practice-intro--light,
.practice-grid.practice-grid--light {
  background-color: var(--c-bg-light);   /* white */
  color: var(--c-bg-mid);
}
.practice-intro.practice-intro--light { padding: 2.222rem 0 0.556rem; }
.practice-grid.practice-grid--light { padding: 0.556rem 0 2.222rem; }
.practice-intro.practice-intro--light .practice-intro__heading {
  color: var(--c-bg-mid);                /* dark teal-green #105a55 — matches Our People */
}
.practice-intro.practice-intro--light .practice-intro__lead {
  color: #000;
}
.practice-grid.practice-grid--light .practice-card__label {
  color: var(--c-bg-mid);
  font-weight: 700;
}
.practice-grid.practice-grid--light .practice-card__desc {
  color: #000;
}
.practice-grid.practice-grid--light .practice-card__link { color: var(--c-bg-mid); }
/* icons on the light variant use the *_dark.png files (recolored to
 * #105a55 in PIL) so they match the heading color exactly — no filter. */


/* .updates-grid
 * News/updates listing — same shape as .people-grid: 3-up card grid on
 * deep teal. Each card has a thumbnail photo (3:2 crop), the post date as
 * an eyebrow, and the post title as a sage italic display heading. The
 * whole card is wrapped in a single anchor that links to the post page.
 */
.updates-intro {
  background-color: var(--c-bg-deep);
  color: var(--c-fg-muted);
  padding: 11.111rem 0 2.778rem;             /* clear the absolute header */
}
.updates-intro__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}
.updates-intro__copy { grid-column: 1; }     /* "Updates" + tagline anchored to the left */
.updates-intro__heading {
  font-family: var(--font-display);
  font-style: normal;
  font-weight: normal;
  font-size: 2.889rem;
  line-height: 3.722rem;
  color: var(--c-fg-muted);
  margin: 0 0 0.556rem;
}
.updates-intro__tagline {
  font-family: var(--font-display-italic);
  font-size: 2.111rem;
  line-height: 2.778rem;
  color: var(--c-accent);
  margin: 0;
}
@media (max-width: 991.98px) {
  .updates-intro { padding: 9.444rem 0 2.222rem; }
  .updates-intro__row { grid-template-columns: 1fr; }
  .updates-intro__copy { grid-column: 1; }
  .updates-intro__heading { font-size: 2.111rem; line-height: 2.444rem; }
  .updates-intro__tagline { font-size: 1.778rem; }
}

.updates-grid {
  background-color: var(--c-bg-deep);
  color: var(--c-fg-muted);
  padding: 2.778rem 0 5.556rem;
}
.updates-grid__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3.333rem 2.222rem;
}
.update-card {
  display: flex;
  flex-direction: column;
}
.update-card__link {
  display: contents;
  color: inherit;
  text-decoration: none;
}
.update-card__photo {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 0 1.111rem;
  overflow: hidden;
  aspect-ratio: 3 / 2;
}
.update-card__photo img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;                        /* show whole image, no crop */
  transition: transform 0.4s ease;
}
.update-card__link:hover .update-card__photo img { transform: scale(1.04); }
.update-card__date {
  font-family: var(--font-sans);
  font-size: 0.778rem;
  letter-spacing: 0.067rem;
  text-transform: uppercase;
  color: var(--c-accent);
  margin: 0 0 0.444rem;
}
.update-card__title {
  font-family: var(--font-display-italic);
  font-style: normal;                        /* italic from the font itself */
  font-weight: normal;
  font-size: 1.333rem;
  line-height: 1.778rem;
  color: var(--c-fg-muted);
  margin: 0;
  transition: color 0.2s linear;
}
.update-card__link:hover .update-card__title { color: var(--c-accent); }

@media (max-width: 991.98px) {
  .updates-grid__list { grid-template-columns: repeat(2, 1fr); gap: 2.778rem 1.667rem; }
}
@media (max-width: 543.98px) {
  .updates-grid__list { grid-template-columns: 1fr; }
}


/* .updates-pagination
 * Page-1/Page-2 link strip below the grid.
 */
.updates-pagination {
  background-color: var(--c-bg-deep);
  padding: 0 0 5.556rem;
}
.updates-pagination__inner {
  display: flex;
  justify-content: center;
  gap: 1.111rem;
}
.updates-pagination__link {
  font-family: var(--font-sans);
  font-size: 0.889rem;
  letter-spacing: 0.067rem;
  text-transform: uppercase;
  padding: 0.556rem 1.667rem;
  border: 1px solid var(--c-accent);
  color: var(--c-accent);
  text-decoration: none;
  transition: color 0.2s linear, background 0.2s linear;
}
.updates-pagination__link:hover { color: var(--c-fg-light); }
.updates-pagination__link[aria-current="page"] {
  background: var(--c-accent);
  color: var(--c-bg-deep);
}


/* .article
 * Single news/update post page. Constrained reading column on deep teal
 * with a date eyebrow, display title, featured image, and body paragraphs.
 */
.article {
  background-color: var(--c-bg-deep);
  color: var(--c-fg-muted);
  padding: 9.444rem 0 4.444rem;              /* clear the absolute header */
}
.article__inner {
  max-width: 50rem;
  margin: 0 auto;
}
.article__date {
  font-family: var(--font-sans);
  font-size: 0.833rem;
  letter-spacing: 0.067rem;
  text-transform: uppercase;
  color: var(--c-accent);
  margin: 0 0 1rem;
}
.article__title {
  font-family: var(--font-display);
  font-style: normal;
  font-weight: normal;
  font-size: 2.444rem;
  line-height: 2.889rem;
  color: var(--c-fg-light);
  margin: 0 0 2.222rem;
  letter-spacing: -0.022rem;
}
.article__hero {
  margin: 0 0 2.222rem;
}
.article__hero img {
  display: block;
  width: 100%;
  height: auto;
}
.article__body p,
.article__body li {
  font-family: var(--font-body);
  font-size: 1.056rem;
  line-height: 1.889rem;
  color: var(--c-fg-muted);
}
.article__body p { margin: 0 0 1.222rem; }
.article__body ul, .article__body ol { margin: 0 0 1.667rem; padding-left: 1.667rem; }
.article__body a {
  color: var(--c-accent);
  text-decoration: underline;
}
.article__body a:hover { color: var(--c-fg-light); }
.article__body figure { margin: 1.667rem 0; }
.article__body figure img { display: block; width: 100%; height: auto; }
.article__back {
  display: inline-block;
  margin-top: 2.222rem;
  font-family: var(--font-sans);
  font-size: 0.833rem;
  letter-spacing: 0.067rem;
  text-transform: uppercase;
  color: var(--c-accent);
  text-decoration: none;
}
.article__back::before { content: "\2190 \00a0"; }
.article__back:hover { color: var(--c-fg-light); }

@media (max-width: 543.98px) {
  .article { padding: 7.778rem 0 3.333rem; }
  .article__title { font-size: 1.889rem; line-height: 2.333rem; }
}


/* .privacy-policy
 * Long-form legal page. Two-column layout: a sticky-feeling display title on
 * the left (4/12) and the body copy on the right (8/12). No hero — first
 * section needs extra top padding to clear the absolute site header.
 * Mirrors old-site /privacy-policy/ #section_qbrxoqikv (3/2/7 grid simplified
 * to 4/8 for the new typography scale).
 */
.privacy-policy {
  background-color: var(--c-bg-deep);
  color: var(--c-fg-muted);
  padding: 11.111rem 0 5.556rem;            /* extra top space for the absolute header */
}
.privacy-policy__row {
  display: grid;
  grid-template-columns: 1fr 2fr;            /* 4/12 title + 8/12 body */
  gap: 3.333rem;
  align-items: start;
}
.privacy-policy__title-col {
  position: sticky;
  top: 6.667rem;                              /* offset under the header on scroll */
}
.privacy-policy__title {
  font-family: var(--font-display-light);    /* lighter weight, not bold */
  font-style: normal;                        /* override h1 base style */
  font-weight: normal;
  font-size: 2.667rem;
  line-height: 3.333rem;
  letter-spacing: -0.022rem;
  color: var(--c-accent);                    /* sage / light green for "Privacy Policy" */
  margin: 0;
}
.privacy-policy__title-brand {
  font-family: var(--font-display);          /* GT Super Display Bold */
  color: var(--c-fg-light);                  /* off-white */
}
.privacy-policy__body-col {
  max-width: 44rem;                           /* readable measure for long-form text */
}
.privacy-policy__lead {
  font-family: var(--font-display-italic);
  font-size: 1.333rem;
  line-height: 2rem;
  color: var(--c-accent);
  margin: 0 0 2.222rem;
}
.privacy-policy__heading {
  font-family: var(--font-display);
  font-style: normal;                        /* override h2 base italic */
  font-weight: normal;
  font-size: 1.444rem;
  line-height: 2rem;
  color: var(--c-fg-muted);
  margin: 2.222rem 0 0.833rem;
}
.privacy-policy__subheading {
  font-family: var(--font-display-italic);
  font-style: normal;                        /* font itself is italic */
  font-weight: normal;
  font-size: 1.222rem;
  line-height: 1.778rem;
  color: var(--c-accent);
  margin: 1.667rem 0 0.667rem;
}
.privacy-policy__body-col p {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.778rem;
  color: var(--c-fg-muted);
  margin: 0 0 1.111rem;
}
.privacy-policy__body-col a {
  color: var(--c-accent);
  text-decoration: underline;
}
.privacy-policy__body-col a:hover { color: var(--c-fg-light); }
.privacy-policy__list {
  margin: 0 0 1.667rem;
  padding-left: 1.667rem;
}
.privacy-policy__list li {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.778rem;
  color: var(--c-fg-muted);
  margin: 0 0 0.667rem;
}

@media (max-width: 991.98px) {
  .privacy-policy { padding: 9.444rem 0 4.444rem; }
  .privacy-policy__row { grid-template-columns: 1fr; gap: 2.222rem; }
  .privacy-policy__title-col { position: static; top: auto; }
  .privacy-policy__title { font-size: 2.222rem; line-height: 2.778rem; }
}
@media (max-width: 543.98px) {
  .privacy-policy__title { font-size: 1.889rem; line-height: 2.444rem; }
  .privacy-policy__heading { font-size: 1.333rem; line-height: 1.889rem; }
}


/* .contact-info
 * Full-width contact details band on deep teal: NAVICUS.LAW heading,
 * street address, two phone numbers, email. Everything left-aligned,
 * off-white type.
 * Mirrors old-site #section_9b50649b4.
 */
.contact-info {
  background-color: var(--c-bg-deep);
  color: var(--c-fg-muted);
}
.contact-info__inner {
  padding: 2.778rem var(--gutter) 5.556rem;  /* tighter top, same bottom and sides */
  font-style: normal;               /* override <address> default italic */
}
.contact-info__title {
  font-family: var(--font-display-regular);
  font-size: 1.167rem;
  color: var(--c-fg-muted);
  margin: 0 0 1.111rem;
}
.contact-info__address {
  font-family: var(--font-sans);
  font-size: 1rem;
  color: var(--c-fg-muted);
  margin: 0 0 1.111rem;             /* tighter gap between address and phones */
}
.contact-info__line {
  font-family: var(--font-sans);
  font-size: 1.056rem;              /* matches old h4 */
  line-height: 2rem;                /* tighter line-height between phone/email lines */
  color: var(--c-fg-muted);
  margin: 0;
}
.contact-info__line a {
  color: var(--c-fg-muted);
  text-decoration: none;
  transition: color 0.2s linear;
}
.contact-info__line a:hover { color: var(--c-accent); }

@media (max-width: 543.98px) {
  .contact-info__inner { padding: 3.333rem var(--gutter); }
  .contact-info__line { font-size: 1rem; line-height: 2.222rem; }
}


/* .ethics
 * Code of Ethics: italic sage intro paragraph + 3-column grid of 17 numbered
 * principle cards on a slightly lighter teal panel.
 * Mirrors old-site /about-us/ #section_0a0bodbsu through #section_3tyzct2mt
 * (the desktop ethics block split across six sections).
 */
.ethics {
  background-color: var(--c-bg-deep);
  color: var(--c-fg-light);
  padding: 0;                        /* spacing comes from .wave-divider above and below */
}
.ethics__intro {
  font-family: var(--font-display-italic);
  font-size: 2.111rem;
  line-height: 2.778rem;
  color: var(--c-accent);
  margin: 0 0 4.444rem;
  max-width: 50rem;
}
.ethics__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.667rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.ethics__item {
  background-color: var(--c-bg-muted);
  padding: 2.222rem 1.667rem;
}
.ethics__number {
  font-family: var(--font-display);
  font-style: normal;
  font-weight: normal;
  font-size: 1rem;
  letter-spacing: 0.111rem;
  color: var(--c-accent);
  margin: 0 0 1.111rem;
}
.ethics__body {
  font-family: var(--font-sans);
  font-size: 0.833rem;
  line-height: 1.444rem;
  color: var(--c-fg-muted);
  margin: 0;
}

@media (max-width: 991.98px) {
  .ethics__grid { grid-template-columns: repeat(2, 1fr); }
  .ethics__intro { font-size: 1.667rem; line-height: 2.222rem; }
}
@media (max-width: 543.98px) {
  .ethics__grid { grid-template-columns: 1fr; }
}


/* .wave-divider
 * Decorative two-piece wave pattern. Two halves placed side-by-side form a
 * pattern that converges in the centre. Used as a section separator.
 * Mirrors old-site /about-us/ #section_19e69b257 div images.
 */
.wave-divider {
  display: flex;
  background-color: var(--c-bg-deep);
  padding: 5.556rem 0;              /* equal breathing room above and below */
  overflow: hidden;                  /* clip any overflow when halves are forced wider */
}
/* Tight variant — for cases where the surrounding sections already supply
 * generous vertical padding (e.g. between homepage blocks) and stacking the
 * full 5.556rem above + below would leave too much dead space. */
.wave-divider--tight { padding: 0; }
.wave-divider__half {
  flex: 1 1 0;
  min-width: 0;
  width: 0;                         /* flex distributes evenly across full viewport */
  height: auto;
  display: block;
  opacity: 0.55;
}

@media (max-width: 991.98px) {
  /* On tablet/mobile fewer halves fit comfortably — give each one a generous
   * min-size so the wave silhouette stays legible and bump the opacity. */
  .wave-divider { padding: 3.333rem 0; }
  .wave-divider__half {
    flex: 0 0 25%;
    min-width: 25%;
    width: auto;
    opacity: 0.85;
  }
}
@media (max-width: 543.98px) {
  .wave-divider__half {
    flex: 0 0 33.333%;
    min-width: 33.333%;
    opacity: 0.95;
  }
}


/* .experienced-lawyers
 * Two-column callout: image on the left (linked to /careers/), copy on the
 * right. Right column is vertically centred and has a sage italic eyebrow
 * "Looking for", a bold display heading "Experienced / Lawyers" (stacked on
 * two lines), and a sage-on-deep-teal CTA button.
 * Section background inherits the page's deep teal.
 * Mirrors old-site #section_c8d221b3c.
 */
.experienced-lawyers {
  background-color: var(--c-bg-deep);
  color: var(--c-fg-light);
  padding: 5.556rem 0;             /* matches old #section_c8d221b3c */
}
.experienced-lawyers__row {
  display: grid;
  grid-template-columns: 1fr 1fr;  /* matches old data-xl-width=6 / 6 */
  align-items: center;
  gap: 2.222rem;                   /* matches old data-gutter="yes" */
}
.experienced-lawyers__image {
  display: block;
  text-align: left;
}
.experienced-lawyers__image img {
  display: inline-block;
  max-width: 100%;
  height: auto;
}
.experienced-lawyers__copy { text-align: center; }
.experienced-lawyers__eyebrow {
  font-family: var(--font-display-italic);
  font-size: 2.111rem;             /* matches old #content_9bbb2c9d4 */
  line-height: 2.889rem;
  letter-spacing: -0.011rem;
  color: var(--c-accent);
  margin: 0 0 1.333rem;
}
.experienced-lawyers__heading {
  font-family: var(--font-display);
  font-style: normal;              /* override h2 base italic */
  font-weight: normal;
  font-size: 2.111rem;             /* matches old #content_f38624e7e */
  line-height: 2.778rem;
  color: var(--c-fg-muted);
  margin: 0 0 2.778rem;
}
.experienced-lawyers__action {
  margin: 0;
}

@media (max-width: 991.98px) {
  .experienced-lawyers { padding: 4.444rem 0 2.778rem; }
  .experienced-lawyers__row { grid-template-columns: 1fr; gap: 1.667rem; }
  .experienced-lawyers__image { text-align: center; }
  .experienced-lawyers__eyebrow { font-size: 1.556rem; line-height: 2.222rem; }
}
@media (max-width: 543.98px) {
  .experienced-lawyers__eyebrow { font-size: 1.444rem; line-height: 2.111rem; }
  .experienced-lawyers__heading { font-size: 2.333rem; }
}


/* .expertise
 * Long expertise/achievements block on dark navy. "Our Expertise" heading,
 * then four practice-area groups. Each group: rules-flanked area title,
 * lead paragraph, brighter-teal sub-block with "Our X include" subhead and
 * two cards (title + body). Mirrors old-site /11th-anniversary/
 * #section_oglti00yx (Our Expertise portion).
 */
.expertise {
  background-color: transparent;     /* bg comes from the .expertise-band wrapper */
  color: var(--c-fg-muted);
  padding-bottom: 8.333rem;
}
.expertise__heading {
  font-family: var(--font-display-regular);
  font-style: normal;
  font-weight: normal;
  font-size: 2.222rem;
  text-align: center;
  color: var(--c-fg-muted);
  margin: 0;
  padding-top: 4.167rem;
}
.expertise__rule {
  border: 0;
  height: 0.278rem;                   /* matches old #content_2y9sgn4ar height */
  background-color: #396a62;
  margin: 1.111rem 26.5rem 4.167rem 30.944rem;  /* matches old #content_2y9sgn4ar paddings */
}
.expertise__group { margin-bottom: 4.167rem; }
.expertise__group-title-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 0;
}
.expertise__group-rule {
  border: 0;
  height: 0.167rem;                   /* matches old side spacer (3px), thinner than main rule */
  background-color: #396a62;
  margin: 0;                          /* old uses padding-top 1.167rem; flex-centring handles vertical */
}
.expertise__group-title {
  font-family: var(--font-display-regular);
  font-style: normal;
  font-weight: normal;
  font-size: 1.333rem;
  color: var(--c-fg-muted);
  margin: 0;
  padding: 0.222rem 0.833rem;         /* matches old #content_lemyep9s4 */
  white-space: nowrap;
}
.expertise__group-lead {
  font-family: var(--font-sans);
  font-size: 0.833rem;
  line-height: 1.333rem;
  color: var(--c-fg-muted);
  text-align: center;
  max-width: 56rem;
  margin: 1.389rem auto 1.389rem;     /* matches old #content_e4r1r3gvh padding-top */
  padding: 0 1.111rem;
}
.expertise__cards-block {
  background-color: #396a62;          /* brighter teal panel for subhead + cards */
}
.expertise__group-subhead {
  font-family: var(--font-display-regular);
  font-size: 1.167rem;
  text-align: center;
  color: var(--c-fg-muted);
  margin: 0;
  padding: 1.389rem 1.111rem 1.944rem;  /* matches old #content_frprn4h6j */
}
.expertise__cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  padding: 0 0 1.389rem;              /* matches old card column bottom padding */
}
.expertise__card {
  padding: 0 1.389rem;                /* matches old #content_i8oc825ko / hqy1jx32e */
}
.expertise__card-title {
  font-family: var(--font-display-regular);
  font-style: normal;
  font-weight: normal;
  font-size: 1.167rem;
  color: var(--c-fg-muted);
  text-align: center;
  margin: 0;
  padding-bottom: 0.833rem;           /* matches old #content_xr3lyg3jk / kphtm50jt */
}
.expertise__card-body {
  font-family: var(--font-sans);
  font-size: 0.833rem;
  line-height: 1.333rem;
  color: var(--c-fg-muted);
  text-align: center;
  margin: 0;
}

@media (max-width: 991.98px) {
  .expertise__rule { margin: 1.111rem auto 2.222rem; max-width: 12rem; }
  .expertise__group { margin-bottom: 3.333rem; }
  .expertise__group-title-row { grid-template-columns: 1fr; gap: 1.111rem; }
  .expertise__group-rule { display: none; }
  .expertise__cards { grid-template-columns: 1fr; gap: 1.667rem; }
}


/* .expertise-intro
 * Top text section on /our-expertise/. Deep teal, 5/7 grid (5/12 spacer
 * left + 7/12 content right). Sage heading "Practice areas" + off-white
 * lead paragraph.
 * Mirrors old-site /our-expertise/ #section_le8qsr66o.
 */
.expertise-intro {
  background-color: var(--c-bg-deep);
  color: var(--c-fg-light);
  padding: 5.556rem 0 2.778rem;     /* matches old #section_le8qsr66o */
}
.expertise-intro__row {
  display: grid;
  grid-template-columns: 7fr 5fr;    /* copy left, spacer right */
  gap: 0;
}
.expertise-intro__copy {
  grid-column: 1;                    /* anchored to the left corner */
}
.expertise-intro__heading {
  font-family: var(--font-display);
  font-style: normal;               /* override h2 base italic */
  font-weight: normal;
  font-size: 2.889rem;
  line-height: 3.722rem;
  color: var(--c-accent);           /* sage — different from homepage's white */
  margin: 0 0 0.556rem;
  text-align: left;
}
.expertise-intro__lead {
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.667rem;
  color: var(--c-fg-muted);
  margin: 0;
}

@media (max-width: 991.98px) {
  .expertise-intro__row { grid-template-columns: 1fr; }
  .expertise-intro__copy { grid-column: 1; }
  .expertise-intro__heading { font-size: 1.722rem; line-height: 2.222rem; }
}


/* .footer-nav
 * Final section: full-viewport-height (`100vh`), deep teal, with the
 * 2-color footer illustration as a bottom-anchored cover image. Two rows
 * of content sit over the illustration: a 4-button nav near the top and
 * a privacy/copyright line at the very bottom.
 * Mirrors old-site #section_f4cf5c70e (data-height="fullscreen").
 */
.footer-nav {
  background-color: var(--c-bg-deep);
  background-image: url("/assets/img/footer-illustration.png");
  background-repeat: no-repeat;
  background-position: 50% 100%;
  background-size: cover;
  color: var(--c-fg-muted);
  min-height: 100vh;
  padding-top: 5.556rem;
  display: flex;
  flex-direction: column;
}
.footer-nav__inner {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.footer-nav__menu {
  max-width: 65rem;                 /* ~1170px — matches old site's button row span */
  margin: 0 auto;
  padding: 0 var(--gutter);
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}
.footer-nav__item {
  display: flex;
  justify-content: center;
  padding-bottom: 1.389rem;
}
.footer-nav__legal {
  display: grid;
  grid-template-columns: 1fr auto 1fr;   /* privacy left, copyright centered between equal side columns */
  align-items: end;                      /* privacy aligns with the bottom (last) line of copyright */
  gap: 1.111rem;
  padding: 0 var(--gutter) 1.667rem;
}
.footer-nav__privacy,
.footer-nav__copyright {
  font-family: var(--font-sans);
  font-size: 0.889rem;
  line-height: 1.4;
  color: var(--c-fg-muted);
  margin: 0;
}
.footer-nav__privacy {
  grid-column: 1;
  justify-self: start;             /* anchored to the left edge */
  text-align: left;
}
.footer-nav__copyright {
  grid-column: 2;
  justify-self: center;            /* perfectly centered in the row */
  text-align: center;
}
.footer-nav__privacy a {
  color: var(--c-fg-light);
  text-decoration: underline;
}
.footer-nav__privacy a:hover { color: var(--c-accent); }
.footer-nav__copyright a {
  color: var(--c-fg-muted);
  text-decoration: underline;
}
.footer-nav__copyright a:hover { color: var(--c-accent); }
.footer-nav__copyright a {
  color: var(--c-fg-muted);
  text-decoration: underline;
}
.footer-nav__copyright a:hover { color: var(--c-accent); }

@media (max-width: 991.98px) {
  .footer-nav { min-height: 0; padding: 3.333rem 0 0; }
  .footer-nav__menu { grid-template-columns: repeat(2, 1fr); gap: 0.556rem 0; }
}
@media (max-width: 543.98px) {
  .footer-nav__menu { grid-template-columns: 1fr; }
  .footer-nav__legal {
    grid-template-columns: 1fr;     /* stack on narrow viewports */
    padding-bottom: 1.111rem;
    text-align: center;
  }
  .footer-nav__privacy,
  .footer-nav__copyright {
    grid-column: 1;
    justify-self: center;
    text-align: center;
  }
}


/* .pull-quote
 * Cinematic full-bleed editorial band on the homepage. Sits between the
 * Practice areas grid (white) and the Latest Updates strip (deep teal),
 * giving the page a moment of visual rest. A wide cover photo is darkened
 * by a deep-teal radial veil; a small sage eyebrow, a thin sage rule, and
 * one large italic display line ("Together we are an ocean.") sit centred.
 * Background-attachment: fixed produces a subtle parallax on desktop;
 * disabled on small screens to avoid mobile-Safari stutter.
 */
.pull-quote {
  position: relative;
  min-height: 32.222rem;
  padding: 6.667rem 1.333rem;
  display: grid;
  place-items: center;
  isolation: isolate;
  overflow: hidden;
  background-color: var(--c-bg-deep);
}
/* Cover photo as an actual <img> element, sized 120% tall so the parallax
 * translation (set inline by JS in menu.js) never reveals the edges. */
.pull-quote__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 130%;
  top: -15%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
  will-change: transform;
}
.pull-quote__veil {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(ellipse at 50% 50%,
      rgba(2, 55, 52, 0.55) 0%,
      rgba(2, 55, 52, 0.85) 65%,
      rgba(2, 55, 52, 0.95) 100%);
}
.pull-quote__inner {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 60rem;
}
.pull-quote__eyebrow {
  font-family: var(--font-sans);
  font-size: 0.833rem;
  letter-spacing: 0.333rem;
  text-transform: uppercase;
  color: var(--c-accent);
  margin: 0 0 1.667rem;
}
.pull-quote__rule {
  border: 0;
  height: 0.111rem;
  width: 4.444rem;
  background-color: var(--c-accent);
  margin: 0 auto 2.222rem;
}
.pull-quote__line {
  font-family: var(--font-display-italic);
  font-style: normal;                    /* italic from the font itself */
  font-weight: normal;
  font-size: 4.444rem;
  line-height: 1.1;
  letter-spacing: -0.044rem;
  color: var(--c-fg-light);
  margin: 0;
  text-shadow: 0 0.111rem 1.667rem rgba(0, 0, 0, 0.35);
}

@media (max-width: 991.98px) {
  .pull-quote {
    min-height: 22.222rem;
    padding: 4.444rem 1.333rem;
  }
  .pull-quote__line { font-size: 2.778rem; }
}
@media (max-width: 543.98px) {
  .pull-quote { min-height: 17.778rem; padding: 3.333rem 1.111rem; }
  .pull-quote__line { font-size: 2.111rem; }
  .pull-quote__eyebrow { letter-spacing: 0.222rem; }
}


/* .home-updates
 * Homepage "Latest Updates" strip — sage eyebrow, white heading, three
 * update-card tiles in a row, and a sage outline button to /updates/.
 * Reuses the existing .update-card component from /updates/.
 */
.home-updates {
  background-color: var(--c-bg-deep);
  color: var(--c-fg-light);
  padding: 5.556rem 0 6.667rem;
}
.home-updates__head { text-align: center; margin: 0 0 3.333rem; }
.home-updates__eyebrow {
  font-family: var(--font-sans);
  font-size: 0.833rem;
  letter-spacing: 0.222rem;
  text-transform: uppercase;
  color: var(--c-accent);
  margin: 0 0 0.833rem;
}
.home-updates__heading {
  font-family: var(--font-display);
  font-style: normal;                 /* override h2 base italic */
  font-weight: normal;
  font-size: 2.667rem;
  line-height: 3.222rem;
  letter-spacing: -0.022rem;
  color: var(--c-fg-light);
  margin: 0;
}
/* Carousel — viewport clips, track slides horizontally via JS-set transform.
 * Each card is sized to (1 / cards-per-view) of the viewport (minus gap), so
 * 3 fit on desktop, 2 on tablet, 1 on mobile. The two nav buttons sit below
 * the strip, centered, and disable at the ends. JS lives in /assets/js/menu.js. */
.home-updates__carousel {
  --cards-per-view: 3;
  --gap: 2.222rem;
  position: relative;
  margin: 0 0 2.222rem;
}
.home-updates__viewport {
  overflow: hidden;
}
.home-updates__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: var(--gap);
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}
.home-updates__list .update-card {
  flex: 0 0
    calc((100% - (var(--cards-per-view) - 1) * var(--gap)) / var(--cards-per-view));
  min-width: 0;
}
.home-updates__controls {
  display: flex;
  justify-content: center;
  gap: 1.111rem;
  margin: 1.667rem 0 0;
}
.home-updates__nav {
  appearance: none;
  border: 1px solid var(--c-accent);
  background: transparent;
  color: var(--c-accent);
  width: 2.778rem;
  height: 2.778rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  cursor: pointer;
  font-size: 1.333rem;
  line-height: 1;
  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}
.home-updates__nav:hover { color: var(--c-fg-light); background: rgba(136, 161, 154, 0.18); }
.home-updates__nav:disabled {
  opacity: 0.35;
  cursor: default;
  background: transparent;
  color: var(--c-accent);
}
.home-updates__nav svg { width: 0.778rem; height: 0.778rem; fill: currentColor; }
.home-updates__action { text-align: center; margin: 0; }

@media (max-width: 991.98px) {
  .home-updates { padding: 3.889rem 0 4.444rem; }
  .home-updates__heading { font-size: 2.111rem; line-height: 2.667rem; }
  .home-updates__carousel { --cards-per-view: 2; --gap: 1.667rem; }
}
@media (max-width: 543.98px) {
  .home-updates__carousel { --cards-per-view: 1; }
}


/* .home-intro
 * Homepage "Who we are" teaser. Two-column layout — illustration left,
 * copy right (sage eyebrow, italic display headline, thin sage rule,
 * serif lead paragraph, accent button). Sits between the hero and the
 * practice grid on the homepage. On narrow viewports the columns stack
 * (illustration above the copy) and the text re-centers.
 */
.home-intro {
  background-color: var(--c-bg-deep);
  color: var(--c-fg-light);
  padding: 6.667rem 0 5.556rem;
}
.home-intro__row {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  align-items: center;
  gap: 2.222rem;
}
.home-intro__media {
  display: block;
}
.home-intro__media img {
  display: block;
  width: 140%;
  height: auto;
  max-width: 83.333rem;
  margin-left: -16.667rem;
}
.home-intro__copy {
  text-align: left;
  max-width: 55.556rem;
}
.home-intro__eyebrow {
  font-family: var(--font-sans);
  font-size: 0.833rem;
  letter-spacing: 0.222rem;
  text-transform: uppercase;
  color: var(--c-accent);
  margin: 0 0 1.111rem;
}
.home-intro__heading {
  font-family: var(--font-display-italic);
  font-style: normal;                 /* italic from the font itself */
  font-weight: normal;
  font-size: 2.667rem;
  line-height: 3.333rem;
  letter-spacing: -0.022rem;
  color: var(--c-fg-light);
  margin: 0 0 1.667rem;
}
.home-intro__rule {
  border: 0;
  height: 0.111rem;
  background-color: var(--c-accent);
  width: 4.444rem;
  margin: 0 0 1.667rem;
}
.home-intro__lead {
  font-family: var(--font-body);
  font-size: 1.056rem;
  line-height: 1.889rem;
  color: var(--c-fg-muted);
  margin: 0 0 2.222rem;
}
.home-intro__lead a {
  color: var(--c-accent);
  text-decoration: underline;
}
.home-intro__lead a:hover { color: var(--c-fg-light); }
.home-intro__action { margin: 0; }

@media (max-width: 991.98px) {
  .home-intro { padding: 4.444rem 0 3.889rem; }
  .home-intro__row {
    grid-template-columns: minmax(0, 1fr);
    gap: 2.222rem;
    text-align: center;
  }
  .home-intro__copy {
    text-align: center;
    margin: 0 auto;
  }
  .home-intro__rule { margin-left: auto; margin-right: auto; }
  .home-intro__heading { font-size: 2.111rem; line-height: 2.667rem; }
  .home-intro__lead { font-size: 1rem; line-height: 1.778rem; }
  .home-intro__media img {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
  }
}
@media (max-width: 543.98px) {
  .home-intro__heading { font-size: 1.778rem; line-height: 2.333rem; }
}


/* .hero
 * Full-viewport-height cover with looping muted video background.
 * .site-header sits over it transparently (header z-index 20 > hero stack).
 * Title and tagline anchored to bottom-left inside .container; chevron
 * scroll-cue centered along the bottom edge.
 * Mirrors old-site #cover-10.semplice-cover[data-height="fullscreen"].
 */
.hero {
  position: relative;
  height: 100vh;
  min-height: 36rem;
  background: var(--c-bg-deep);
  color: var(--c-fg-light);
  overflow: hidden;
}
.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;       /* matches old-site data-object-fit="cover" */
  z-index: 1;
}
.hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(180deg,
    rgba(2, 55, 52, 0.15) 0%,
    rgba(2, 55, 52, 0.55) 100%);
}
.hero__content {
  position: absolute;
  bottom: 5.556rem;
  left: 0; right: 0;
  z-index: 3;
}
.hero__title {
  font-family: var(--font-display);
  font-size: 3.889rem;        /* unified with .page-cover__title */
  line-height: 5rem;
  letter-spacing: -0.044rem;
  color: var(--c-fg-light);
  margin: 0;
}
.hero__tagline {
  font-family: var(--font-display-italic);
  font-size: 2.111rem;        /* unified with .page-cover__tagline */
  line-height: 2.778rem;
  color: var(--c-accent);
  margin: 0.556rem 0 0;
}
.hero__scroll-cue {
  position: absolute;
  bottom: 1.667rem;
  left: 50%;
  z-index: 3;
  transform: translateX(-50%);
  display: inline-flex;
  width: 53px;
  height: 20px;
  color: var(--c-fg-muted);
  animation: hero-bob 2.4s ease-in-out infinite;
}
.hero__scroll-cue svg { fill: currentColor; }
.hero__scroll-cue:hover { color: var(--c-accent); }

@keyframes hero-bob {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(0.333rem); }
}

@media (max-width: 543.98px) {
  .hero__title   { font-size: 2.889rem; line-height: 3.556rem; }  /* matches old-site xs */
  .hero__tagline { font-size: 1.778rem; line-height: 2.444rem; }
  .hero__content { bottom: 3.333rem; }
}


/* .history-mission
 * White-background section with two parallel headings (Our History / Our
 * Mission), each with a brighter-teal accent line and a paragraph, plus a
 * full-width illustration below.
 * Mirrors old-site /11th-anniversary/ #section_305e73bfd.
 */
.history-mission {
  background-color: var(--c-bg-light);
  color: #103339;                     /* matches old heading colour */
  padding: 5.556rem 0 0;              /* matches old #section_305e73bfd */
}
.history-mission__row {
  display: grid;
  grid-template-columns: 5fr 2fr 5fr;  /* matches old data-xl-width 5 / 2 / 5 */
  align-items: stretch;
  gap: 0;
}
.history-mission__col { display: flex; flex-direction: column; }
.history-mission__col--mission { grid-column: 3; }
.history-mission__heading {
  font-family: var(--font-display-regular);
  font-style: normal;                 /* override h2 base italic */
  font-weight: normal;
  font-size: 2.222rem;                /* matches old #content_5a6527519 */
  line-height: 1.2;
  color: #103339;
  margin: 0;
}
.history-mission__rule {
  border: 0;
  height: 0.278rem;                   /* matches old spacer height */
  background-color: #396a62;          /* brighter teal accent — matches old spacer bg */
  margin: 0.056rem 14.722rem 1.667rem 4.222rem;  /* asymmetric — matches old #content_oz4kfjjp6 */
}
.history-mission__col--mission .history-mission__rule {
  margin: 0 14.167rem 1.667rem 4.278rem;  /* matches old #content_7iy3axw0l */
}
.history-mission__copy {
  font-family: var(--font-sans);
  font-size: 0.889rem;                /* matches old paragraph */
  line-height: 1.389rem;
  color: #103339;
  margin: 0;
}
.history-mission__illustration {
  display: block;
  margin-top: 1.389rem;               /* matches old #content_re82oshwn padding-top */
}
.history-mission__illustration img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
}

@media (max-width: 991.98px) {
  .history-mission { padding: 3.333rem 0 0; }
  .history-mission__row { grid-template-columns: 1fr; gap: 2.222rem; }
  .history-mission__col--mission { grid-column: 1; }
  .history-mission__rule,
  .history-mission__col--mission .history-mission__rule {
    margin: 0.556rem 6.722rem 1.111rem 0;
  }
}


/* .menu-toggle
 * Hamburger button shown on tablet/mobile (≤991.98px) in place of .site-nav.
 * Three white bars, ~24×14px; transforms to X when body.menu-open is set.
 * Mirrors old-website .navbar-inner .hamburger.
 */
.menu-toggle {
  display: none;             /* shown by .site-header media query */
  position: absolute;
  left: var(--header-inset);
  top: 0;
  height: 100%;
  align-items: center;
  appearance: none;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  z-index: 25;
}
.menu-toggle__bars,
.menu-toggle__bars::before,
.menu-toggle__bars::after {
  display: block;
  width: 1.333rem;            /* ~24px */
  height: 2px;
  background: var(--c-fg-light);
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.menu-toggle__bars { position: relative; }
.menu-toggle__bars::before,
.menu-toggle__bars::after {
  content: "";
  position: absolute;
  left: 0;
}
.menu-toggle__bars::before { transform: translateY(-6px); }
.menu-toggle__bars::after  { transform: translateY( 6px); }

body.menu-open .menu-toggle__bars { background: transparent; }
body.menu-open .menu-toggle__bars::before { transform: translateY(0) rotate( 45deg); }
body.menu-open .menu-toggle__bars::after  { transform: translateY(0) rotate(-45deg); }


/* .our-people
 * Light off-white band introducing the firm's people.
 * Two-column layout: copy on the left (5/12), image on the right (6/12),
 * with a 1/12 spacer between them. Big vertical breathing room.
 * Mirrors old-site #section_9b36bb1c1.
 */
.our-people {
  background-color: var(--c-bg-soft);
  color: var(--c-fg-navy);
  padding: 10rem 0;                /* matches old #section_9b36bb1c1 */
}
.our-people__row {
  display: grid;
  grid-template-columns: 5fr 1fr 6fr;  /* matches old data-xl-width=5 / 1 / 6 */
  align-items: center;
  gap: 0;
}
.our-people__copy {
  /* nothing structural — sits in column 1 */
}
.our-people__heading {
  font-family: var(--font-display);
  font-style: normal;              /* override h2 base italic */
  font-weight: normal;             /* font itself is bold */
  font-size: 2.889rem;             /* matches old #content_57e3b7548 */
  line-height: 3.722rem;
  color: var(--c-bg-mid);
  margin: 0;
  text-align: left;
}
.our-people__tagline {
  font-family: var(--font-display-italic);
  font-size: 2.111rem;             /* matches old #content_dd254b363 */
  color: var(--c-accent);
  margin: 0.556rem 0 1.111rem;
}
.our-people__lead {
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.667rem;
  color: var(--c-fg-navy);
  margin: 0 0 1.667rem;
}
.our-people__image {
  display: block;
  text-align: right;
}
.our-people__image img {
  max-width: 100%;
  height: auto;
  display: inline-block;
}

@media (max-width: 991.98px) {
  .our-people { padding: 3.333rem 0 4.444rem; }      /* matches old smaller-breakpoint */
  .our-people__row { grid-template-columns: 1fr; gap: 2.222rem; }
  .our-people__heading { font-size: 1.778rem; line-height: 2.444rem; }
  .our-people__tagline { font-size: 1.444rem; line-height: 2.111rem; }
  .our-people__image { text-align: center; }
}


/* .overlay-menu
 * Full-viewport menu shown when body.menu-open is set. Fades in via opacity.
 * Mirrors old-website #overlay-menu.
 */
.overlay-menu {
  position: fixed;
  inset: 0;
  z-index: 22;                /* above header, below .site-logo */
  background: var(--c-bg-deep);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s linear, visibility 0s linear 0.3s;
  overflow-y: auto;
}
body.menu-open { overflow: hidden; }
body.menu-open .overlay-menu {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s linear, visibility 0s linear 0s;
}

.overlay-menu__inner {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  transform: translateY(-50%);
  text-align: center;
  line-height: 1;
}
.overlay-menu__inner ul { list-style: none; margin: 0; padding: 0; }
.overlay-menu__inner li { line-height: inherit; }
.overlay-menu__inner a {
  display: inline-block;
  padding: 0.556rem 0;
  font-family: var(--font-display-regular);
  font-size: 1.778rem;        /* ~32px — Semplice overlay default */
  color: var(--c-fg-light);
  transition: color 0.2s linear;
}
.overlay-menu__inner a:hover { color: var(--c-accent-overlay); }

@media (max-width: 543.98px) {
  .overlay-menu__inner a { font-size: 1.444rem; }
}


/* .page-cover
 * Generic full-viewport cover for inner pages (About Us, People, Expertise, etc.).
 * Background `<img>` positioned absolute with `object-fit: cover`. Title and
 * tagline anchored bottom-left inside .container; .site-header overlays via z-index.
 * Mirrors old-site #cover-35 (and similar cover-NN sections on inner pages).
 */
.page-cover {
  position: relative;
  height: 100vh;
  min-height: 36rem;
  background-color: var(--c-bg-mid);
  color: var(--c-fg-light);
  overflow: hidden;
}
.page-cover__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}
.page-cover__overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(180deg,
    rgba(2, 55, 52, 0.15) 0%,
    rgba(2, 55, 52, 0.55) 100%);
}
/* Expertise hero — darker bottom so the white "Our Expertise" title and
 * sage tagline read clearly against the busy photograph. */
.page-cover--expertise .page-cover__overlay {
  background: linear-gradient(180deg,
    rgba(2, 55, 52, 0.20) 0%,
    rgba(2, 55, 52, 0.55) 50%,
    rgba(2, 55, 52, 0.85) 100%);
}
/* Updates hero — same treatment as expertise, deepened to deep teal at the
 * bottom so "Updates" and the tagline contrast against the photograph. */
.page-cover--updates .page-cover__overlay {
  background: linear-gradient(180deg,
    rgba(2, 55, 52, 0.20) 0%,
    rgba(2, 55, 52, 0.55) 50%,
    rgba(2, 55, 52, 0.90) 100%);
}
.page-cover__content {
  position: absolute;
  bottom: 5.556rem;
  left: 0; right: 0;
  z-index: 3;
}
/* Fluid variant: full-width with old-site asymmetric inset padding
 * (5.556rem left / 1.389rem right) — matches old #content_0ryxj4qs1 on /careers/.
 */
.page-cover__content--inset {
  padding: 0 1.389rem 0 5.556rem;
}
/* (Careers/Contact bottom-position overrides removed — all heroes now use
 * the default .page-cover__content { bottom: 5.556rem } for consistency.) */
@media (max-width: 1169.98px) {
  .page-cover__content--inset { padding-right: 3.333rem; }
}
@media (max-width: 991.98px) {
  .page-cover__content--inset { padding-left: 4.444rem; padding-right: 4.444rem; }
}
@media (max-width: 767.98px) {
  .page-cover__content--inset { padding-left: 2.778rem; }
}
@media (max-width: 543.98px) {
  .page-cover__content--inset { padding-left: 1.389rem; padding-right: 1.389rem; }
}

/* Scroll-down chevron at bottom-center of hero — matches old .show-more
 * SVG (53×20 polygon) on cover-79 of the careers page.
 */
.page-cover__scroll {
  position: absolute;
  left: 50%;
  bottom: 1.667rem;
  transform: translateX(-50%);
  z-index: 4;
  display: block;
  color: var(--c-fg-muted);
  transition: transform 0.2s ease, color 0.2s linear;
}
.page-cover__scroll:hover {
  color: var(--c-fg-light);
  transform: translateX(-50%) translateY(0.222rem);
}
.page-cover__scroll svg {
  display: block;
  width: 2.944rem;                    /* matches old #content-79 .show-more svg width */
  height: auto;
  fill: currentColor;
}
.page-cover__title {
  font-family: var(--font-display);
  font-size: 3.889rem;             /* matches old #cover-35 h6 (font_t76fd6lln) */
  line-height: 5rem;
  letter-spacing: -0.044rem;
  color: var(--c-fg-light);
  margin: 0;
}
.page-cover__tagline {
  font-family: var(--font-display-italic);
  font-size: 2.111rem;             /* matches old #cover-35 h2 */
  line-height: 2.778rem;
  color: var(--c-accent);
  margin: 0.556rem 0 0;
}
/* Larger tagline variant — matches old /contact-us/ #cover-47 h2 (2.889rem). */
.page-cover__tagline--lg {
  font-size: 2.889rem;
  line-height: 3.722rem;
}

@media (max-width: 991.98px) {
  .page-cover__title { font-size: 3.222rem; line-height: 3.889rem; }
  .page-cover__tagline { font-size: 1.778rem; line-height: 2.444rem; }
  .page-cover__tagline--lg { font-size: 2.222rem; line-height: 2.889rem; }
}
@media (max-width: 543.98px) {
  .page-cover__title { font-size: 2.889rem; line-height: 3.556rem; }
  .page-cover__tagline { font-size: 1.556rem; line-height: 2.222rem; }
  .page-cover__tagline--lg { font-size: 1.778rem; line-height: 2.444rem; }
  .page-cover__content { bottom: 3.333rem; }
}


/* .people-grid
 * 3-column grid of person cards. Each card: portrait photo (clickable),
 * bold display name on two lines, sage italic role.
 * Mirrors old-site /people/ #section_b4m4l1jhb (and similar people rows).
 */
.people-grid {
  background-color: var(--c-bg-deep);
  color: var(--c-fg-light);
  padding: 2.778rem 0;
}
.people-grid__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.222rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.person-card { text-align: center; }
.person-card__photo {
  display: block;
  margin-bottom: 1.111rem;
  aspect-ratio: 862 / 1000;        /* enforce uniform aspect on the wrapper */
  overflow: hidden;
}
.person-card__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.person-card__name {
  display: block;
  font-family: var(--font-display);
  font-style: normal;
  font-weight: normal;
  font-size: 1.889rem;
  line-height: 2.444rem;
  color: var(--c-fg-muted);
  text-decoration: none;
  margin: 0;
}
.person-card__name:hover { color: var(--c-accent); }
.person-card__role {
  font-family: var(--font-display-italic);
  font-size: 1.222rem;
  letter-spacing: 0.044rem;
  color: var(--c-accent);
  margin: 0.556rem 0 0;
}

@media (max-width: 991.98px) {
  .people-grid__list { grid-template-columns: repeat(2, 1fr); }
  .person-card__name { font-size: 1.444rem; line-height: 2rem; }
}
@media (max-width: 543.98px) {
  .people-grid__list { grid-template-columns: 1fr; }
}


/* .people-intro
 * Hero section at the top of /people/ — full-viewport background photo with
 * gradient overlay, copy anchored bottom-left in .container. 6/6 grid keeps
 * heading + tagline + lead in left column.
 */
.people-intro {
  position: relative;
  height: 100vh;
  min-height: 36rem;
  background-color: var(--c-bg-deep);
  color: var(--c-fg-light);
  overflow: hidden;
}
.people-intro__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}
.people-intro__overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(180deg,
    rgba(2, 55, 52, 0.25) 0%,
    rgba(2, 55, 52, 0.65) 100%);
}
.people-intro__content {
  position: absolute;
  bottom: 5.556rem;
  left: 0; right: 0;
  z-index: 3;
}
.people-intro__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}
.people-intro__copy {
  /* sits in column 1 (left) */
}
.people-intro__heading {
  font-family: var(--font-display);
  font-style: normal;
  font-weight: normal;
  font-size: 3.889rem;
  line-height: 5rem;
  letter-spacing: -0.044rem;
  color: var(--c-fg-light);
  margin: 0 0 0.556rem;
}
.people-intro__tagline {
  font-family: var(--font-display-italic);
  font-size: 2.111rem;
  line-height: 2.778rem;
  color: var(--c-accent);
  margin: 0.556rem 0 0;            /* top-only, matches .page-cover__tagline */
}
.people-intro__lead {
  font-family: var(--font-display-italic);   /* legacy — kept for any other usage */
  font-size: 2.111rem;
  line-height: 2.778rem;
  color: var(--c-accent);
  margin: 0.556rem 0 0;
}

/* Sage italic intro paragraph that sits between the hero and the first
 * people-grid. Same look as a hero tagline but standalone in its own band. */
.people-lead {
  background-color: var(--c-bg-deep);
  color: var(--c-fg-muted);
  padding: 4.444rem 0 2.778rem;
}
.people-lead__heading {
  font-family: var(--font-display);    /* GT Super Display Bold */
  font-style: normal;                  /* override h2 base italic */
  font-weight: 700;                    /* explicit bold */
  font-size: 2.667rem;
  line-height: 3.222rem;
  letter-spacing: -0.022rem;
  color: var(--c-fg-light);            /* bright white #fafafa */
  margin: 0 0 0.833rem;
}
.people-lead__text {
  font-family: var(--font-display-italic);
  font-size: 2.111rem;
  line-height: 2.778rem;
  color: var(--c-accent);
  margin: 0;
  max-width: 60rem;
}
@media (max-width: 991.98px) {
  .people-lead { padding: 3.333rem 0 1.667rem; }
  .people-lead__heading { font-size: 2.111rem; line-height: 2.667rem; }
  .people-lead__text { font-size: 1.778rem; line-height: 2.444rem; }
}
@media (max-width: 543.98px) {
  .people-lead__heading { font-size: 1.778rem; line-height: 2.333rem; }
  .people-lead__text { font-size: 1.556rem; line-height: 2.222rem; }
}

@media (max-width: 991.98px) {
  .people-intro__row { grid-template-columns: 1fr; }
  .people-intro__heading { font-size: 3.222rem; line-height: 3.889rem; }
  .people-intro__tagline { font-size: 1.778rem; line-height: 2.444rem; }
}
@media (max-width: 543.98px) {
  .people-intro__heading { font-size: 2.889rem; line-height: 3.556rem; }
  .people-intro__tagline { font-size: 1.556rem; line-height: 2.222rem; }
  .people-intro__content { bottom: 3.333rem; }
}


/* .person-profile
 * Individual person profile page. Top row: portrait photo on the left,
 * name + role + contact (mobile, email, CV download) on the right.
 * Below the row: 3 stacked sections (Key Practice Areas, Representative
 * Experience, Additional Information). All on deep teal.
 */
.person-profile {
  background-color: var(--c-bg-deep);
  color: var(--c-fg-light);
  padding: 10rem 0 1.111rem;
}
.person-profile__row {
  display: grid;
  grid-template-columns: 30rem minmax(0, 1fr);
  gap: 6.667rem;
  align-items: end;
}
.person-profile__media {
  position: relative;
  margin-left: -3.333rem;
}
.person-profile__photo {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 862 / 1000;
  object-fit: cover;
  object-position: center top;
}
.person-profile__copy {
  /* sits in column 2 (right); items align to top of column */
  padding-top: 0.667rem;
}
.person-profile__eyebrow {
  font-family: var(--font-sans);
  font-size: 0.778rem;
  letter-spacing: 0.278rem;
  text-transform: uppercase;
  color: var(--c-accent);
  margin: 0 0 1.667rem;
}
.person-profile__eyebrow a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease;
}
.person-profile__eyebrow a:hover { border-bottom-color: var(--c-accent); }
.person-profile__name {
  font-family: var(--font-display);
  font-style: normal;
  font-weight: normal;
  font-size: 4rem;
  line-height: 1;
  letter-spacing: -0.066rem;
  color: var(--c-fg-light);
  margin: 0 0 1.333rem;
}
.person-profile__name-first {
  display: block;
  margin-bottom: 0.222rem;
}
.person-profile__name-last {
  display: block;
}
.person-profile__rule {
  border: 0;
  height: 0.111rem;
  width: 3.333rem;
  background-color: var(--c-accent);
  margin: 0 0 1.333rem;
}
.person-profile__role {
  font-family: var(--font-display-italic);
  font-size: 1.444rem;
  line-height: 1.667rem;
  color: var(--c-accent);
  margin: 0 0 2.222rem;
}
.person-profile__hero-bio {
  font-family: var(--font-body);
  font-size: 1.056rem;
  line-height: 1.889rem;
  color: var(--c-fg-muted);
  margin: 0 0 2.222rem;
}
.person-profile__contact {
  font-family: var(--font-sans);
  font-size: 0.944rem;
  line-height: 1.667rem;
  color: var(--c-fg-light);
}
.person-profile__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.778rem;
  margin-top: 2.222rem;
}
.person-profile__bio {
  font-family: var(--font-body);
  font-size: 1.056rem;
  line-height: 1.778rem;
  color: var(--c-fg-muted);
  margin: 2.222rem 0 0;
  max-width: 56rem;
}
@media (max-width: 543.98px) {
  .person-profile__bio { font-size: 1rem; line-height: 1.667rem; max-width: 100%; }
}

/* Featured bio block — pulls the bio paragraph into a wide italic display
 * pull-quote with a sage rule above and below. Sits between the wave divider
 * and the 2-column shell (aside + main). Centered, 50rem max-width. */
.person-profile__featured {
  margin: 4.444rem auto 5rem;
  max-width: 56rem;
  text-align: center;
  padding: 0;
}
.person-profile__featured-rule {
  border: 0;
  height: 0.111rem;
  width: 4.444rem;
  background-color: var(--c-accent);
  margin: 0 auto;
}
.person-profile__featured-text {
  font-family: var(--font-display-italic);
  font-style: normal;                  /* italic from the font itself */
  font-size: 1.667rem;
  line-height: 2.444rem;
  color: var(--c-fg-light);
  margin: 2.222rem 0;
}
.person-profile__main { margin-bottom: 5rem; }
/* Back-to-people link — sage chevron + label, sits below the last section. */
.person-profile__back {
  margin: 5.556rem 0 0;
}
.person-profile__back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.667rem;
  font-family: var(--font-sans);
  font-size: 0.833rem;
  letter-spacing: 0.222rem;
  text-transform: uppercase;
  color: var(--c-accent);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.person-profile__back-link:hover {
  color: var(--c-fg-light);
  border-bottom-color: var(--c-accent);
}
.person-profile__back-link svg {
  width: 0.722rem;
  height: 1.333rem;
  fill: currentColor;
}
.person-profile__contact-line {
  margin: 0 0 0.556rem;
}
.person-profile__contact-label {
  color: var(--c-accent);
  margin-right: 0.444rem;
}
.person-profile__contact a {
  color: var(--c-fg-light);
  text-decoration: none;
  border-bottom: 1px solid rgba(250, 250, 250, 0.3);
  transition: border-color 0.2s ease;
}
.person-profile__contact a:hover { border-bottom-color: var(--c-fg-light); }
.person-profile__cv,
.person-profile__linkedin {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 0.833rem;
  letter-spacing: 0.167rem;
  text-transform: uppercase;
  color: var(--c-accent);
  text-decoration: none;
  border: 1px solid var(--c-accent);
  padding: 0.778rem 1.667rem;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.person-profile__cv:hover,
.person-profile__linkedin:hover {
  background-color: var(--c-accent);
  color: var(--c-bg-deep);
}
/* Tabbed content area — head nav with three buttons (Practice / Cases / More).
 * Active tab gets a sage underline; inactive tabs sit on a muted sage. Panels
 * are toggled via JS in menu.js by adding/removing the `is-active` class on
 * the button and the matching panel (matched via aria-controls). */
.person-profile__tabs { max-width: 60rem; margin: 0 auto; }
.person-profile__tablist {
  display: flex;
  flex-wrap: wrap;
  gap: 2.222rem;
  border-bottom: 1px solid rgba(136, 161, 154, 0.3);
  margin: 0 0 2.778rem;
  padding: 0;
}
.person-profile__tab {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 0.667rem 0;
  margin-bottom: -1px;                 /* sit on the bottom rule */
  font-family: var(--font-sans);
  font-size: 0.833rem;
  letter-spacing: 0.222rem;
  text-transform: uppercase;
  color: rgba(136, 161, 154, 0.7);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.person-profile__tab:hover { color: var(--c-fg-light); }
.person-profile__tab.is-active {
  color: var(--c-fg-light);
  border-bottom-color: var(--c-accent);
}
.person-profile__panel { padding: 1.111rem 0 0; }
.person-profile__panel[hidden] { display: none; }
.person-profile__panel-heading {
  font-family: var(--font-display);
  font-style: normal;
  font-weight: normal;
  font-size: 2rem;
  line-height: 2.444rem;
  letter-spacing: -0.022rem;
  color: var(--c-fg-light);
  margin: 0 0 1.667rem;
}

/* Sections — each numbered with a big sage italic numeral on the left,
 * a sage rule along the top, and editorial typography. CSS counter is
 * declared on .person-profile__sections so the numbering survives across
 * all 14 person pages without per-page markup changes. */
.person-profile__sections {
  margin-top: 0;
  counter-reset: profile-section;
  max-width: 60rem;
  margin-left: auto;
  margin-right: auto;
}
.person-profile__section {
  counter-increment: profile-section;
  position: relative;
  padding: 3.333rem 0 2.778rem;
  display: grid;
  grid-template-columns: minmax(0, 6rem) minmax(0, 1fr);
  gap: 2.222rem;
  align-items: start;
}
.person-profile__section::before {
  content: counter(profile-section, decimal-leading-zero);
  font-family: var(--font-display-italic);
  font-style: normal;
  font-size: 4.444rem;
  line-height: 0.9;
  letter-spacing: -0.044rem;
  color: var(--c-accent);
  opacity: 0.55;
  grid-column: 1;
}
.person-profile__section > * {
  grid-column: 2;
}
.person-profile__section + .person-profile__section {
  border-top: 1px solid rgba(136, 161, 154, 0.3);
}
.person-profile__section-eyebrow {
  font-family: var(--font-sans);
  font-size: 0.722rem;
  letter-spacing: 0.278rem;
  text-transform: uppercase;
  color: var(--c-accent);
  margin: 0 0 0.667rem;
}
.person-profile__section-heading {
  font-family: var(--font-display);
  font-style: normal;
  font-weight: normal;
  font-size: 2rem;
  line-height: 2.444rem;
  letter-spacing: -0.022rem;
  color: var(--c-fg-light);
  margin: 0 0 1.667rem;
}
.person-profile__section-body {
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.778rem;
  color: var(--c-fg-light);
}
.person-profile__section-body p {
  margin: 0 0 1.111rem;
}
.person-profile__section-body p:last-child { margin-bottom: 0; }
.person-profile__section-body ul {
  margin: 0;
  padding-left: 0;
  list-style: none;
}
.person-profile__section-body li {
  position: relative;
  padding-left: 1.667rem;
  margin: 0 0 0.778rem;
}
.person-profile__section-body li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.722rem;
  width: 0.444rem;
  height: 0.444rem;
  background-color: var(--c-accent);
  transform: rotate(45deg);   /* sage diamond marker */
}
.person-profile__section-body h3 {
  font-family: var(--font-display-italic);
  font-style: normal;          /* italic from the font itself */
  font-weight: normal;
  font-size: 1.333rem;
  line-height: 1.778rem;
  color: var(--c-accent);
  margin: 2rem 0 0.444rem;
  position: relative;
  padding-left: 1.111rem;
}
.person-profile__section-body h3::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.778rem;
  width: 0.444rem;
  height: 0.444rem;
  background-color: var(--c-accent);
  transform: rotate(45deg);   /* matching sage diamond before subheads */
}
.person-profile__section-body h3:first-child { margin-top: 0; }

@media (max-width: 991.98px) {
  .person-profile { padding: 8rem 0 5rem; }
  .person-profile__row { grid-template-columns: 1fr; gap: 2.222rem; }
  .person-profile__media { max-width: 28rem; margin-left: 0; }
  .person-profile__copy { padding-top: 0; }
  .person-profile__name { font-size: 3rem; }
  .person-profile__role { font-size: 1.333rem; }
  .person-profile__sections { margin-top: 0; }
  .person-profile__featured { margin: 3.333rem auto 3.333rem; }
  .person-profile__featured-text { font-size: 1.333rem; line-height: 2rem; }
  .person-profile__hero-bio { font-size: 1rem; line-height: 1.778rem; }
  .person-profile__section {
    grid-template-columns: 1fr;
    gap: 0.444rem;
    padding: 2.778rem 0 2.222rem;
  }
  .person-profile__section::before { font-size: 3rem; opacity: 0.45; }
  .person-profile__section-heading { font-size: 1.667rem; line-height: 2.111rem; }
}
@media (max-width: 543.98px) {
  .person-profile__name { font-size: 2.444rem; }
  .person-profile__eyebrow { letter-spacing: 0.222rem; }
  .person-profile__featured-text { font-size: 1.222rem; line-height: 1.778rem; }
}


/* .pioneers
 * Centered "We believe in the pioneers of the industry" heading + lead
 * paragraph (with inline links) + centered CTA on deep teal.
 * Mirrors old-site /our-expertise/ #section_ia5n3ckwn.
 */
.pioneers {
  background-color: var(--c-bg-deep);
  color: var(--c-fg-light);
  padding: 1.111rem 0 8.333rem;     /* matches old #section_ia5n3ckwn */
}
.pioneers__heading {
  font-family: var(--font-display);
  font-style: normal;               /* override h2 base italic */
  font-weight: normal;
  font-size: 2.889rem;
  line-height: 3.556rem;
  color: var(--c-fg-muted);
  text-align: center;
  margin: 0 0 1.667rem;
}
.pioneers__lead {
  font-family: var(--font-sans);
  font-size: 1.056rem;
  line-height: 1.667rem;
  color: var(--c-fg-light);
  text-align: center;
  max-width: 56rem;
  margin: 0 auto 2.222rem;
}
.pioneers__lead a {
  color: var(--c-accent);
  text-decoration: underline;
}
.pioneers__lead a:hover { color: var(--c-fg-muted); }
.pioneers__action {
  text-align: center;
  margin: 0;
}

@media (max-width: 543.98px) {
  .pioneers__heading { font-size: 2.111rem; line-height: 2.778rem; }
  .pioneers__lead { font-size: 0.944rem; }
}


/* .practice-card
 * Single practice-area tile: clickable icon (PNG), label below, italic-sage
 * description. The icon and label share one link; description is below.
 * Mirrors old-site cards inside #section_a0b3eff8d.
 */
.practice-card {
  list-style: none;
  text-align: center;
  padding: 1.111rem 1.111rem;
}
.practice-card__link {
  display: block;
  color: var(--c-fg-light);
  text-decoration: none;
}
.practice-card__icon {
  display: block;
  margin: 0 auto 1.111rem;
  width: 100%;
  max-width: 11rem;                /* compact icons (~198px) */
  height: auto;
  transition: transform 0.25s ease;
}
.practice-card__link:hover .practice-card__icon { transform: translateY(-0.222rem); }
.practice-card__label {
  display: block;
  font-family: var(--font-display-regular);
  font-size: 0.944rem;
  line-height: 1.556rem;
  letter-spacing: -0.011rem;
  color: var(--c-fg-light);
}
.practice-card__desc {
  font-family: var(--font-sans);
  font-size: 0.722rem;
  line-height: 1.333rem;
  color: var(--c-accent);
  margin: 0.556rem 0 0;
}


/* .practice-grid
 * Wrapping grid of 10 .practice-card tiles, constrained inside .container
 * (max 1260px). Old site uses data-xl-width="2" (1/6 each) with
 * data-justify="space-around": 6 per row, 4 wrap to a centered second row.
 * Mirrors old-site #section_a0b3eff8d.
 */
.practice-grid {
  background-color: var(--c-bg-deep);
  color: var(--c-fg-light);
  padding: 1.333rem 0 9.444rem;    /* matches old #section_a0b3eff8d */
}
.practice-grid--tight { padding-bottom: 0; }
.practice-grid__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  margin: 0;
  padding: 0;
  list-style: none;
}
.practice-grid__list .practice-card {
  flex: 0 0 20%;                   /* 5 per row × 2 rows = 10 cards */
}

@media (max-width: 991.98px) {
  .practice-grid__list .practice-card { flex: 0 0 33.333%; }  /* 3 per row */
  .practice-card { padding: 1.111rem 0.667rem; }
  .practice-card__icon { max-width: 7.222rem; margin-bottom: 0.778rem; }
  .practice-card__label { font-size: 0.889rem; line-height: 1.333rem; }
  .practice-card__desc { font-size: 0.722rem; line-height: 1.222rem; }
}
@media (max-width: 543.98px) {
  .practice-grid__list .practice-card { flex: 0 0 50%; }      /* 2 per row */
  .practice-grid { padding-bottom: 4.444rem; }
  .practice-card__icon { max-width: 6.111rem; }
  .practice-card__label { font-size: 0.833rem; }
}


/* .practice-intro
 * Heading section above the grid, constrained inside .container (max 1260px).
 * "Practice areas" / lead paragraph live in the left half (max-width 50%);
 * right half is empty.
 * Mirrors old-site #section_95b51e10f.
 */
.practice-intro {
  background-color: var(--c-bg-deep);
  color: var(--c-fg-light);
  padding: 2.778rem 0 1.333rem;    /* matches old #section_95b51e10f */
}
.practice-intro__copy {
  max-width: 50%;                   /* matches old data-xl-width="6" */
}
.practice-intro__heading {
  font-family: var(--font-display);
  font-style: normal;              /* override h2 base italic */
  font-weight: normal;
  font-size: 2.667rem;
  line-height: 3.333rem;
  letter-spacing: -0.022rem;
  color: var(--c-accent);          /* sage — matches /our-expertise/ heading */
  margin: 0 0 1.667rem;            /* breathing room between heading and lead */
  text-align: left;
}
.practice-intro__tagline {
  font-family: var(--font-display-italic);
  font-size: 1.778rem;
  line-height: 2.444rem;
  letter-spacing: -0.017rem;
  color: var(--c-accent);
  margin: 0.556rem 0;
}
.practice-intro__lead {
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.667rem;
  letter-spacing: -0.006rem;
  color: var(--c-fg-muted);
  margin: 0;
}

@media (max-width: 991.98px) {
  .practice-intro__copy { max-width: 75%; }
}
@media (max-width: 543.98px) {
  .practice-intro__copy { max-width: 100%; }
  .practice-intro__heading { font-size: 2.111rem; line-height: 2.778rem; }
}


/* .recognition
 * Dark teal-navy band with a "BG.png" overlay anchored to bottom. Centered
 * "Our Recognition" heading, brighter-teal accent line below, and an SVG
 * row of legal-ranking logos. Bottom padding generous (8.333rem) so the
 * background illustration breathes.
 * Mirrors old-site /11th-anniversary/ #section_oglti00yx (first chunk).
 */
/* .expertise-band — wrapper that hosts the deep-teal bg colour and the
   bottom-anchored illustration that covers BOTH .recognition and .expertise.
   Matches old-site /11th-anniversary/ #section_oglti00yx (which contained
   both blocks under one section with the BG.png at bottom). */
.expertise-band {
  background-color: #103339;
  background-image: url("/assets/img/expertise-bg.png");
  background-repeat: no-repeat;
  background-position: 50% 100%;
  background-size: cover;
}

.recognition {
  background-color: transparent;
  color: var(--c-fg-muted);
  padding-bottom: 2.778rem;
}
.recognition__heading {
  font-family: var(--font-display-regular);
  font-style: normal;                 /* override h2 base italic */
  font-weight: normal;
  font-size: 2.222rem;
  line-height: 1.2;
  color: var(--c-fg-muted);
  text-align: center;
  margin: 0;
  padding-top: 6.944rem;              /* matches old #content_6xoc3wff2 */
}
.recognition__rule {
  border: 0;
  height: 0.278rem;
  background-color: #396a62;          /* matches old spacer accent */
  margin: 0 25.222rem 2.222rem 29.722rem;  /* matches old #content_18ro3ukzr */
}
.recognition__lead {
  font-family: var(--font-sans);
  font-size: 1rem;
  text-align: center;
  color: var(--c-fg-muted);
  margin: 0 0 4.167rem;               /* matches old #content_m8f66inea bottom */
}
.recognition__logos {
  display: block;
  padding: 0 5.556rem;                /* matches old #content_e496xucut */
}
.recognition__logos img {
  display: block;
  max-width: 100%;
  height: auto;
}
/* 8 ranking marks displayed in 2 rows of 4. Larger than the footer
 * .rankings strip — this is the headline placement. */
.recognition__list {
  list-style: none;
  margin: 0 auto;
  padding: 0 5.556rem;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: center;
  gap: 3.333rem 2.222rem;
}
.recognition__item {
  display: flex;
  align-items: center;
  justify-content: center;
}
.recognition__item img {
  display: block;
  max-width: 100%;
  max-height: 9rem;                   /* ~162px — bigger than footer (~120px) */
  width: auto;
  height: auto;
  object-fit: contain;
}

@media (max-width: 991.98px) {
  .recognition__rule { margin: 0 auto 1.667rem; max-width: 12rem; }
  .recognition__logos { padding: 0 var(--gutter); }
  .recognition__list { padding: 0 var(--gutter); grid-template-columns: repeat(2, 1fr); gap: 2.222rem 1.667rem; }
  .recognition__item img { max-height: 7rem; }
}
@media (max-width: 543.98px) {
  .recognition__list { grid-template-columns: 1fr; }
}
@media (max-width: 543.98px) {
  .recognition__heading { padding-top: 4.167rem; font-size: 1.778rem; }
  .recognition__lead { margin-bottom: 2.778rem; }
}


/* .rankings
 * Logo strip just before the footer: Navicus mark + four ranking marks
 * (IFLR-1000, two Chambers Europe variants, Pravo.ru-300). 5 equal columns.
 * Mirrors old-site #section_549078edd.
 */
.rankings {
  background-color: var(--c-bg-deep);
  padding: 0 var(--gutter);
}
.rankings__list {
  max-width: 100%;                  /* span the full page width */
  margin: 0 auto;
  padding: 0 1.667rem;              /* small breathing room from viewport edges */
  list-style: none;
  display: grid;
  grid-template-columns: repeat(9, 1fr);   /* 9 marks in one row at desktop */
  align-items: center;
  gap: 1.667rem 1.667rem;           /* wider horizontal spread between marks */
}
.rankings__item {
  display: flex;
  align-items: center;
  justify-content: center;
}
.rankings__item img {
  display: block;
  max-width: 100%;
  max-height: 6.667rem;             /* bigger ~120px cap on every mark */
  width: auto;
  height: auto;
  object-fit: contain;
}
.rankings__item--brand img {
  max-height: 7.222rem;             /* wordmark slightly larger */
}

@media (max-width: 1169.98px) {
  .rankings__list { grid-template-columns: repeat(5, 1fr); }
}
@media (max-width: 767.98px) {
  .rankings__list { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 543.98px) {
  .rankings { padding: 0 var(--gutter); margin-bottom: 1rem; }
  .rankings__list { grid-template-columns: repeat(2, 1fr); gap: 1.111rem; }
}


/* .statement
 * Large display statement on deep teal — "Together we are an ocean."
 * The first part uses Light weight, the punchline ("an ocean.") uses Regular.
 * A brighter-teal accent line sits below the heading, offset asymmetrically.
 * Mirrors old-site /11th-anniversary/ #section_z29ir0607.
 */
.statement {
  background-color: var(--c-bg-muted);   /* matches old 11th-anniversary .transition-wrap (#2a554e) */
  color: var(--c-fg-light);
}
.statement__inner {
  padding: 5.556rem 0 3.333rem;     /* matches old #content_n96z08qo4 top */
}
.statement__heading {
  font-family: var(--font-display-light);
  font-style: normal;               /* override h2 base italic */
  font-weight: normal;
  font-size: 3.111rem;              /* matches old */
  line-height: 3.278rem;
  color: var(--c-fg-light);
  text-align: left;
  margin: 0;
}
.statement__strong {
  font-family: var(--font-display-regular);
  font-weight: normal;              /* override <strong> bold default */
}
.statement__divider {
  border: 0;
  height: 0.278rem;                 /* matches old spacer height */
  background-color: #46998f;        /* brighter teal accent — matches old spacer bg */
  margin: 1.667rem 32.333rem 0 21.5rem;  /* matches old #content_l9luwszp8 asymmetric padding */
}

.statement__body {
  /* full-viewport-width row: image left, copy adjacent, empty space on the right.
     Sits outside .container so the illustration bleeds to the viewport edge.
     Old: data-xl-width=6 image, data-xl-width=4 copy, remaining 2/12 = empty right. */
  display: grid;
  grid-template-columns: 6fr 4fr 2fr;
  align-items: center;
  gap: 0;
  padding-bottom: 5.556rem;             /* matches old #content_ngtlc3a3s padding-bottom */
}
.statement__image {
  display: block;
}
.statement__image img {
  display: block;
  width: 100%;                          /* fill the column edge-to-edge */
  height: auto;
}
.statement__copy {
  grid-column: 2;                       /* sit in column 2, right next to the illustration */
  padding: 2.778rem 1.111rem 0;         /* matches old #content_f5bd97b5a */
}
.statement__copy p:not(.statement__footnote) {
  font-family: var(--font-sans);
  font-size: 0.889rem;                  /* matches old paragraph */
  line-height: 1.167rem;
  color: var(--c-fg-muted);
  margin: 0 0 1.111rem;
}
.statement__rule {
  border: 0;
  height: 0.167rem;                     /* matches old spacer height (3px) */
  background-color: #46998f;
  margin: 2.222rem 1.111rem 1.111rem;   /* matches old #content_yoh3nw2u9 */
}
.statement__footnote {
  font-family: var(--font-display-regular);   /* matches old #content_ngtlc3a3s span class */
  font-size: 1.333rem;                        /* matches old */
  line-height: 1.4;
  color: var(--c-fg-muted);
  margin: 0;
  padding: 0 1.111rem;
}

@media (max-width: 991.98px) {
  .statement__inner { padding: 3.333rem 0 2.222rem; }
  .statement__heading { font-size: 2.222rem; line-height: 2.667rem; }
  .statement__divider { margin: 1.111rem 0 0; }
  .statement__body { grid-template-columns: 1fr; padding-bottom: 3.333rem; }
  /* On mobile the body content is outside .container so it needs its own
   * horizontal gutter — without it the copy is flush to the viewport edges
   * and the leftmost characters are partly off-screen. */
  .statement__copy { grid-column: 1; padding: 2.222rem var(--gutter) 0; }
  .statement__rule { margin: 2.222rem var(--gutter) 1.111rem; }
  .statement__footnote { padding: 0 var(--gutter); }
}
@media (max-width: 543.98px) {
  .statement__heading { font-size: 1.889rem; line-height: 2.333rem; }
}


/* .site-header
 * Fixed-top transparent navbar. Full viewport width, ~192px tall total
 * (header-pad-y · 2 + header-row). Children .site-nav, .menu-toggle, and
 * .site-logo are absolutely positioned inside .site-header__inner.
 * Mirrors old-website nav_dkcc2xtty.
 */
.site-header {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 20;
  background: transparent;
  height: var(--header-row);
  padding-top: var(--header-pad-y);
  padding-bottom: var(--header-pad-y);
}
.site-header__inner {
  position: relative;
  height: 100%;
  width: 100%;
}

@media (max-width: 991.98px) {
  /* swap inline nav for hamburger */
  .site-nav { display: none; }
  .menu-toggle { display: flex; }
}
@media (max-width: 543.98px) {
  .site-header { padding-top: 2.222rem; padding-bottom: 2.222rem; }
}


/* .site-logo
 * Logo lockup; absolute, anchored top-right of header.
 * Width 5rem desktop, 4.111rem ≤543.98px (matches old-site small-screen rule).
 */
.site-logo {
  position: absolute;
  right: var(--header-inset);
  top: 0;
  height: 100%;
  display: flex;
  align-items: center;
  z-index: 25;                /* above .overlay-menu so logo stays clickable */
}
.site-logo img {
  display: block;
  width: 5rem;                /* ~90px — matches old-site .nav_dkcc2xtty .logo svg */
  height: auto;
}

@media (max-width: 543.98px) {
  .site-logo img { width: 4.111rem; }
}


/* .site-nav
 * Desktop horizontal nav; absolute, anchored top-left of header.
 * Items spaced via padding-right on each <a> (last child cleared).
 * Mirrors old-site .navbar-inner nav.standard with data-font="font_grmgt8j6i".
 */
.site-nav {
  position: absolute;
  left: var(--header-inset);
  top: 0;
  height: 100%;
}
.site-nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  height: 100%;
}
.site-nav__item { line-height: 0; }
.site-nav__link {
  display: inline-block;
  padding-right: 1.667rem;    /* ~30px between items */
  font-family: var(--font-display-regular);
  font-size: 1.111rem;        /* 20px */
  line-height: 1;
  color: var(--c-fg-light);
  transition: opacity 0.2s linear;
}
.site-nav__item:last-child .site-nav__link { padding-right: 0; }
.site-nav__link:hover { color: var(--c-fg-light); opacity: 0.7; }


/* .scroll-top
 * Small fixed back-to-top chevron in the bottom-right of every page. Hidden
 * by default; menu.js toggles .is-visible after the user scrolls past 400px.
 */
.scroll-top {
  position: fixed;
  right: 1.667rem;
  bottom: 1.667rem;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.778rem;
  height: 2.778rem;
  border-radius: 50%;
  background: var(--c-bg-mid);
  color: var(--c-fg-light);
  text-decoration: none;
  opacity: 0;
  pointer-events: none;
  transform: translateY(0.556rem);
  transition: opacity 0.2s linear, transform 0.2s ease, background-color 0.2s linear;
}
.scroll-top.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.scroll-top:hover { background: var(--c-accent); color: var(--c-bg-deep); }
.scroll-top svg {
  width: 1.111rem;
  height: 1.111rem;
  fill: currentColor;
  transform: rotate(180deg);          /* re-use the down-chevron polygon, rotated to point up */
}
@media (max-width: 543.98px) {
  .scroll-top { right: 1rem; bottom: 1rem; width: 2.444rem; height: 2.444rem; }
}


/* .careers-intro
 * Top section of /careers/. Heading + sage italic tagline + lead paragraph,
 * stacked in the right half of the container (left half empty), on deep teal.
 * Mirrors old-site /careers/ #section_ade3364b8.
 */
.careers-intro {
  background-color: var(--c-bg-deep);
  color: var(--c-fg-light);
  padding: 10rem 0 5.556rem;        /* matches old #section_ade3364b8 */
}
.careers-intro__row {
  display: grid;
  grid-template-columns: 1fr 1fr;     /* 6/6 — copy right, empty left */
  gap: 0;
}
.careers-intro__copy { grid-column: 2; }
.careers-intro__heading {
  font-family: var(--font-display);
  font-style: normal;                  /* override h2 base italic */
  font-weight: normal;
  font-size: 2.889rem;                 /* matches old #content_9c35eb618 h1 */
  line-height: 3.722rem;
  color: var(--c-fg-muted);
  margin: 0 0 0.556rem;
}
.careers-intro__tagline {
  font-family: var(--font-display-italic);
  font-size: 2.111rem;                 /* matches old #content_def90ecb8 */
  line-height: 2.778rem;
  color: var(--c-accent);
  margin: 0 0 1.111rem;
}
.careers-intro__lead {
  font-family: var(--font-sans);
  font-size: 1rem;                     /* matches old #content_0cafa2efa */
  line-height: 1.667rem;
  color: var(--c-fg-muted);
  margin: 0;
}

@media (max-width: 991.98px) {
  .careers-intro { padding: 8rem 0 4.444rem; }
  .careers-intro__row { grid-template-columns: 1fr; }
  .careers-intro__copy { grid-column: 1; }
  .careers-intro__heading { font-size: 2.111rem; line-height: 2.444rem; }
  .careers-intro__tagline { font-size: 1.778rem; }
}


/* .careers-pillars
 * Three-column "Challenging / Interesting / Flexible" panel. 4/4/4 grid on
 * deep teal; each card has a 3:2 photo, a centered display heading and a
 * centered short body paragraph.
 * Mirrors old-site /careers/ #section_079826067.
 */
.careers-pillars {
  background-color: var(--c-bg-deep);
  color: var(--c-fg-light);
  padding: 5.556rem 0 8.333rem;       /* matches old #section_079826067 */
}
.careers-pillars__grid {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);   /* matches old data-xl-width 4/4/4 */
  align-items: start;                       /* let middle card drop without stretching siblings */
  gap: 6.667rem;                            /* wider breathing room between the three pillars */
  max-width: 88rem;                          /* ~1584px — between standard container and full viewport */
}
.careers-pillars__card {
  display: flex;
  flex-direction: column;
  text-align: center;                       /* matches old h1/h5 text-align */
}
.careers-pillars__card:nth-child(2) {
  margin-top: 5.556rem;                     /* drop the middle card lower than the outer two */
}
.careers-pillars__image {
  margin: 0 0 1.667rem;
  overflow: hidden;
  aspect-ratio: 5 / 4;             /* a touch taller than 4/3 */
}
.careers-pillars__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.careers-pillars__heading {
  font-family: var(--font-display);
  font-style: normal;                       /* override h3 base italic */
  font-weight: normal;
  font-size: 2.333rem;                      /* matches old pillar h1 */
  line-height: 3rem;
  color: var(--c-accent);                   /* sage / green */
  margin: 0 0 0.556rem;
}
.careers-pillars__body {
  font-family: var(--font-sans);
  font-size: 1rem;                          /* matches old pillar h5 */
  line-height: 1.667rem;
  color: var(--c-fg-muted);
  margin: 0;
}

@media (max-width: 991.98px) {
  .careers-pillars { padding: 4.444rem 0 5.556rem; }
  .careers-pillars__grid { grid-template-columns: 1fr; gap: 2.778rem; }
  .careers-pillars__card:nth-child(2) { margin-top: 0; }   /* offset only makes sense in the 3-up grid */
  .careers-pillars__heading { font-size: 2rem; line-height: 2.556rem; }
}


/* .pattern-band
 * Decorative full-bleed band with the sage wave-net pattern repeating
 * horizontally at native size on the deep-teal page background. Sits between
 * the pillars and the Law Students CTA.
 * Mirrors old-site /careers/ #section_6bac990be (8.333rem padding top + bottom,
 * 2.778rem margin-top, image at top-left, repeat-x, native size).
 */
.pattern-band {
  background-color: var(--c-bg-deep);
  background-image: url("/assets/img/divider-pattern-light.png");
  background-repeat: repeat-x;
  background-position: top left;
  background-size: auto;                  /* native pixel size — matches old */
  height: 16.667rem;                       /* 8.333 + 8.333 padding span */
  margin-top: 2.778rem;
}

@media (max-width: 991.98px) {
  .pattern-band {
    height: 8.333rem;
    background-size: auto 100%;            /* scale-to-fit on smaller bands */
    background-position: top center;
  }
}
@media (max-width: 543.98px) {
  .pattern-band { height: 5.556rem; }
}


/* .careers-pitch
 * Two-column CTA block: image one side, copy the other. Copy column has a
 * large sage italic eyebrow ("Learn from the pioneers" / "Work along with
 * the pioneers"), display heading, sage CTA button, and an "Or contact us"
 * line below.
 *
 *   .careers-pitch--reverse swaps the order so the image is on the right.
 *
 * Mirrors old-site /careers/ #section_3303cb09a (Law Students) and
 * #section_e9d4e54f7 (Experienced Lawyers).
 */
.careers-pitch {
  background-color: var(--c-bg-deep);
  color: var(--c-fg-light);
  padding: 5.556rem 0;                    /* matches old #section_f9f7dda9d / #section_bsawrkmmv */
}
.careers-pitch__row {
  display: grid;
  grid-template-columns: 1fr 1fr;          /* 6/6 — matches old data-xl-width */
  align-items: center;
  gap: 2.222rem;                           /* matches old data-gutter="yes" */
}
.careers-pitch--reverse .careers-pitch__copy { order: 1; }
.careers-pitch--reverse .careers-pitch__image { order: 2; }
.careers-pitch__image {
  display: block;
  overflow: hidden;
}
.careers-pitch__image img {
  width: 100%;
  height: auto;
  display: block;
}
.careers-pitch__copy { text-align: center; }
.careers-pitch__eyebrow {
  font-family: var(--font-display-italic);
  font-size: 2.111rem;                     /* matches old #content_4cd91d59b / um22zjk7d */
  line-height: 2.889rem;
  letter-spacing: -0.011rem;
  color: var(--c-accent);
  margin: 0 0 1.333rem;
}
.careers-pitch__heading {
  font-family: var(--font-display);
  font-style: normal;                      /* override h2 base italic */
  font-weight: normal;
  font-size: 3.222rem;                     /* matches old aade3b7fd / mq3woemcl */
  line-height: 4rem;
  color: var(--c-fg-muted);
  margin: 0 0 2.222rem;
}
.careers-pitch__action { margin: 0 0 1.111rem; }
.careers-pitch__contact {
  font-family: var(--font-sans);
  font-size: 0.778rem;                     /* matches old 7402d926e / q5iensjn1 */
  line-height: 1.667rem;
  color: var(--c-accent);
  margin: 0;
}
.careers-pitch__contact-link {
  color: var(--c-accent);
  text-decoration: underline;
}
.careers-pitch__contact-link:hover { color: var(--c-fg-muted); }

@media (max-width: 991.98px) {
  .careers-pitch { padding: 4.444rem 0; }
  .careers-pitch__row { grid-template-columns: 1fr; gap: 1.667rem; }
  .careers-pitch--reverse .careers-pitch__copy,
  .careers-pitch--reverse .careers-pitch__image { order: initial; }
  .careers-pitch__eyebrow { font-size: 1.778rem; line-height: 2.444rem; }
  .careers-pitch__heading { font-size: 2.667rem; line-height: 3.333rem; }
}
@media (max-width: 543.98px) {
  .careers-pitch__eyebrow { font-size: 1.556rem; line-height: 2.222rem; }
  .careers-pitch__heading { font-size: 2.222rem; line-height: 2.778rem; }
}


/* Motion — restrained animations across the site, all gated behind a
 * `prefers-reduced-motion: no-preference` check so users who request reduced
 * motion see the static version.
 *
 *   1. main fades in over 0.55s on every page load.
 *   2. .reveal-up elements (added by JS in menu.js to below-the-fold sections)
 *      fade and slide up 1.111rem when they enter the viewport.
 *   3. card hovers — update / person / practice cards get a subtle lift and
 *      photo zoom on hover.
 */
@media (prefers-reduced-motion: no-preference) {
  main { animation: nx-main-fade 0.55s ease-out both; }
  @keyframes nx-main-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
  }

  .reveal-up {
    opacity: 0;
    transform: translateY(1.111rem);
    transition:
      opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
      transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, transform;
  }
  .reveal-up.is-revealed {
    opacity: 1;
    transform: none;
  }

  /* Card lift on hover — applies to update, person, and practice cards. */
  .update-card__link,
  .person-card__photo,
  .practice-card__link {
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .update-card:hover .update-card__link,
  .person-card:hover .person-card__photo {
    transform: translateY(-0.333rem);
  }
  .person-card__photo img {
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .person-card:hover .person-card__photo img { transform: scale(1.04); }
  .person-card__name { transition: color 0.2s ease; }
  .person-card:hover .person-card__name { color: var(--c-accent); }
}