/* input(44,39): run-time error CSS1019: Unexpected token, found ' '
input(44,39): run-time error CSS1019: Unexpected token, found ' '
input(44,39): run-time error CSS1042: Expected function, found ' '
input(44,39): run-time error CSS1062: Expected semicolon or closing curly-brace, found ' '
input(141,33): run-time error CSS1019: Unexpected token, found ' '
input(141,33): run-time error CSS1019: Unexpected token, found ' '
input(141,33): run-time error CSS1042: Expected function, found ' '
input(141,33): run-time error CSS1062: Expected semicolon or closing curly-brace, found ' '
input(387,36): run-time error CSS1019: Unexpected token, found ' '
input(387,36): run-time error CSS1019: Unexpected token, found ' '
input(387,36): run-time error CSS1042: Expected function, found ' '
input(387,36): run-time error CSS1062: Expected semicolon or closing curly-brace, found ' '
input(620,81): run-time error CSS1019: Unexpected token, found ' '
input(620,81): run-time error CSS1019: Unexpected token, found ' '
input(620,81): run-time error CSS1063: Expected calculation unit, found ' '
input(620,81): run-time error CSS1064: Expected calculation product, found ' '
input(620,81): run-time error CSS1065: Expected calculation sum, found ' '
input(620,81): run-time error CSS1034: Expected closing parenthesis, found ' '
input(620,81): run-time error CSS1042: Expected function, found ' '
input(620,81): run-time error CSS1062: Expected semicolon or closing curly-brace, found ' '
input(622,86): run-time error CSS1019: Unexpected token, found ' '
input(622,86): run-time error CSS1019: Unexpected token, found ' '
input(622,86): run-time error CSS1063: Expected calculation unit, found ' '
input(622,86): run-time error CSS1064: Expected calculation product, found ' '
input(622,86): run-time error CSS1065: Expected calculation sum, found ' '
input(622,86): run-time error CSS1034: Expected closing parenthesis, found ' '
input(622,86): run-time error CSS1042: Expected function, found ' '
input(622,86): run-time error CSS1062: Expected semicolon or closing curly-brace, found ' '
input(625,85): run-time error CSS1019: Unexpected token, found ' '
input(625,85): run-time error CSS1019: Unexpected token, found ' '
input(625,85): run-time error CSS1063: Expected calculation unit, found ' '
input(625,85): run-time error CSS1064: Expected calculation product, found ' '
input(625,85): run-time error CSS1065: Expected calculation sum, found ' '
input(625,85): run-time error CSS1034: Expected closing parenthesis, found ' '
input(625,85): run-time error CSS1042: Expected function, found ' '
input(625,85): run-time error CSS1062: Expected semicolon or closing curly-brace, found ' '
input(860,36): run-time error CSS1019: Unexpected token, found ' '
input(860,36): run-time error CSS1019: Unexpected token, found ' '
input(860,36): run-time error CSS1042: Expected function, found ' '
input(860,36): run-time error CSS1062: Expected semicolon or closing curly-brace, found ' '
input(1115,92): run-time error CSS1019: Unexpected token, found ' '
input(1115,92): run-time error CSS1019: Unexpected token, found ' '
input(1115,92): run-time error CSS1063: Expected calculation unit, found ' '
input(1115,92): run-time error CSS1064: Expected calculation product, found ' '
input(1115,92): run-time error CSS1065: Expected calculation sum, found ' '
input(1115,92): run-time error CSS1034: Expected closing parenthesis, found ' '
input(1115,92): run-time error CSS1042: Expected function, found ' '
input(1115,92): run-time error CSS1062: Expected semicolon or closing curly-brace, found ' '
input(1118,97): run-time error CSS1019: Unexpected token, found ' '
input(1118,97): run-time error CSS1019: Unexpected token, found ' '
input(1118,97): run-time error CSS1063: Expected calculation unit, found ' '
input(1118,97): run-time error CSS1064: Expected calculation product, found ' '
input(1118,97): run-time error CSS1065: Expected calculation sum, found ' '
input(1118,97): run-time error CSS1034: Expected closing parenthesis, found ' '
input(1118,97): run-time error CSS1042: Expected function, found ' '
input(1118,97): run-time error CSS1062: Expected semicolon or closing curly-brace, found ' '
input(1122,96): run-time error CSS1019: Unexpected token, found ' '
input(1122,96): run-time error CSS1019: Unexpected token, found ' '
input(1122,96): run-time error CSS1063: Expected calculation unit, found ' '
input(1122,96): run-time error CSS1064: Expected calculation product, found ' '
input(1122,96): run-time error CSS1065: Expected calculation sum, found ' '
input(1122,96): run-time error CSS1034: Expected closing parenthesis, found ' '
input(1122,96): run-time error CSS1042: Expected function, found ' '
input(1122,96): run-time error CSS1062: Expected semicolon or closing curly-brace, found ' '
input(1192,37): run-time error CSS1019: Unexpected token, found ' '
input(1192,37): run-time error CSS1019: Unexpected token, found ' '
input(1192,37): run-time error CSS1042: Expected function, found ' '
input(1192,37): run-time error CSS1062: Expected semicolon or closing curly-brace, found ' '
input(1320,38): run-time error CSS1019: Unexpected token, found ' '
input(1320,38): run-time error CSS1019: Unexpected token, found ' '
input(1320,38): run-time error CSS1042: Expected function, found ' '
input(1320,38): run-time error CSS1062: Expected semicolon or closing curly-brace, found ' '
input(1329,43): run-time error CSS1019: Unexpected token, found ' '
input(1329,43): run-time error CSS1019: Unexpected token, found ' '
input(1329,43): run-time error CSS1042: Expected function, found ' '
input(1329,43): run-time error CSS1062: Expected semicolon or closing curly-brace, found ' '
input(1340,40): run-time error CSS1019: Unexpected token, found ' '
input(1340,40): run-time error CSS1019: Unexpected token, found ' '
input(1340,40): run-time error CSS1042: Expected function, found ' '
input(1340,40): run-time error CSS1062: Expected semicolon or closing curly-brace, found ' '
input(1351,38): run-time error CSS1019: Unexpected token, found ' '
input(1351,38): run-time error CSS1019: Unexpected token, found ' '
input(1351,38): run-time error CSS1042: Expected function, found ' '
input(1351,38): run-time error CSS1062: Expected semicolon or closing curly-brace, found ' ' */
/* =============================================================================
   Paul, Weiss — London Trainee Program (Careers landing)
   Static prototype. Reuses the live site web fonts (ABCDiatype + UntitledSerif
   via /assets/css/global/font.css) and the committed PW brand palette.
   Bespoke layout for the London Site Redesign Figma frame.
   ========================================================================== */

:root {
  /* Brand palette (from existing site + Figma variables) */
  --navy:        #03203D;   /* primary */
  --navy-med:    #0B3D71;   /* medium blue */
  --navy-dark:   #001F3F;   /* dark blue */
  --blue:        #B9C8DA;   /* light blue */
  --blue-bg:     #B9C8DA;   /* blue-bg section tint (matches Figma) */
  --panel:       #F1F4F8;   /* gray panel bg */
  --border:      #DBDBDB;
  --video-bg:    #DDE1E6;   /* video placeholder base (Figma) */
  --white:       #FFFFFF;
  --ink:         #03203D;   /* body text on light */

  /* Reuse the site's own font stacks (see global style.css), not a custom one. */
  --font-sans: 'ABCDiatype', sans-serif;
  --font-serif: 'UntitledSerif';

  --shell-max: 85.375rem;
  --shell-pad: clamp(1.25rem, 5vw, 4rem);
  --section-y: clamp(3.5rem, 8vw, 7rem);

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);

  /* z-index scale */
  --z-subnav: 80;
  --z-header: 100;
  --z-nav-panel: 110;
}

/* ----------------------------------------------------------- Base / reset */
/* Scoped to .london-careers so the live site's global resets/typography are untouched */
.london-careers, .london-careers *, .london-careers *::before, .london-careers *::after { box-sizing: border-box; }

.london-careers {
  font-family: var(--font-serif);
  color: var(--ink);
  font-size: clamp(1.0625rem, 0.45vw + 0.9rem, 1.225rem);
  line-height: 1.58;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.london-careers img { max-width: 100%; display: block; }

/* Buttons are anchors; keep their label white over the navy fill. */
.london-careers a.lc-btn { color: var(--white); }

.london-careers p { margin: 0 0 1.1em; }
.london-careers p:last-child { margin-bottom: 0; }

.london-careers :focus-visible {
  outline: 3px solid var(--navy-med);
  outline-offset: 3px;
  border-radius: 2px;
}

.lc-visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

.lc-skip {
  position: absolute;
  left: 1rem; top: -3.5rem;
  z-index: 200;
  background: var(--navy);
  color: var(--white);
  padding: 0.6rem 1rem;
  font-family: var(--font-sans);
  font-weight: 700;
  text-decoration: none;
  transition: top 0.2s var(--ease-out);
}
.lc-skip:focus { top: 1rem; }

.lc-shell {
  width: 100%;
  max-width: var(--shell-max);
  margin-inline: auto;
  padding-inline: var(--shell-pad);
}
/* Desktop: the content area already sits at the site's logo gutter, so drop the
   shell's own inset — otherwise content is indented past the shared page gutter. */
@media print, screen and (min-width: 64em) {
  .lc-shell { padding-inline: 0; max-width: none; }
}

/* Headings */
.lc-h2 {
  font-family: var(--font-sans);
  font-weight: 700;
  color: var(--navy);
  font-size: clamp(2.25rem, 4.8vw, 3.5rem);
  line-height: 0.95;
  letter-spacing: -0.02em;
  margin: 0 0 clamp(1.75rem, 3vw, 2.75rem);
  text-wrap: balance;
}

.lc-h3sans {
  font-family: var(--font-sans);
  font-weight: 700;
  color: var(--navy);
  font-size: clamp(1.25rem, 1.6vw, 1.5rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin: 0 0 0.75em;
}

/* Content divider — matches site convention `.everify .grid-container .flex-box` */
.lc-rule {
  border: 0;
  border-top: 0.625rem solid var(--blue);
  margin: 0 0 clamp(1.5rem, 3vw, 2.5rem);
  /* Global `hr` caps width at 85.375rem; let the rule span the full content width. */
  max-width: none;
}
/* On blue-bg sections (Opportunities, Inclusion) the divider is the medium-dark blue so it reads against #B9C8DA */
.lc-rule--navy { border-top-color: var(--navy-med); }

/* Buttons — solid navy bars (per Figma "full width button") */
.lc-btn {
  --btn-bg: var(--navy);
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  background: var(--btn-bg);
  color: var(--white);
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(1rem, 0.4vw + 0.9rem, 1.1875rem);
  letter-spacing: 0.005em;
  line-height: 1;
  padding: 1.05rem 1.5rem;
  text-decoration: none;
  border: 0;
  cursor: pointer;
  transition: background-color 0.3s var(--ease-out);
}
/* No trailing icon by default; the external-link icon shows only on external
   CTAs via the .lc-btn--external modifier (PWRC-503 / Ariana). */
.lc-btn::after { content: none; }
.lc-btn--external::after {
  content: "";
  margin-left: auto;
  flex: 0 0 auto;
  width: 1.05em; height: 1.05em;
  /* Mask + currentColor so the icon takes the button's own text colour (white on
     the navy .lc-btn, navy on the light-blue .tc-card__btn) rather than a fixed fill. */
  background-color: currentColor;
  -webkit-mask: url(/assets/images/settings/share.svg?v=xfnkXNqfJkiM_VbQ2iNomusOdf8) no-repeat center / contain;
          mask: url(/assets/images/settings/share.svg?v=xfnkXNqfJkiM_VbQ2iNomusOdf8) no-repeat center / contain;
  transform: translateX(0);
  transition: transform 0.3s var(--ease-out);
}
/* Kill the global `a:hover { text-decoration: underline }` on these buttons. */
.lc-btn:hover { background: var(--navy-med); text-decoration: none; }
.lc-btn--external:hover::after { transform: translateX(4px); }
.lc-btn--block { display: flex; width: 100%; justify-content: space-between; }
.lc-btn--wide { max-width: 22rem; }

/* ----------------------------------------------------------- Header / nav */
.lc-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: var(--white);
  border-bottom: 1px solid var(--border);
}
.lc-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 5rem;
}

.lc-logo {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  background: var(--navy);
  color: var(--white);
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: clamp(1.25rem, 1.6vw, 1.6rem);
  line-height: 0.92;
  letter-spacing: -0.01em;
  text-decoration: none;
  padding: 0.55em 0.6em;
  align-self: stretch;
}
.lc-logo span { display: block; }
.lc-logo--light {
  background: transparent;
  padding: 0;
  font-size: clamp(1.6rem, 2.4vw, 2.1rem);
  align-self: flex-start;
}

.lc-nav { display: flex; flex-direction: column; align-items: flex-end; gap: 0.6rem; }

.lc-nav__utility {
  display: flex;
  gap: clamp(1rem, 2vw, 2rem);
}
.lc-nav__utility a {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--navy);
  text-decoration: none;
  transition: color 0.2s var(--ease-out);
}
.lc-nav__utility a:hover { color: var(--navy-med); }

.lc-nav__primary {
  display: flex;
  align-items: center;
  gap: clamp(1.1rem, 2vw, 2.1rem);
}
.lc-nav__primary > a {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(1rem, 1.1vw, 1.1875rem);
  color: var(--navy);
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 2px solid transparent;
  transition: border-color 0.2s var(--ease-out), color 0.2s var(--ease-out);
}
.lc-nav__primary > a:hover { border-bottom-color: var(--navy); }
.lc-nav__primary > a[aria-current="true"] { border-bottom-color: var(--navy); }

.lc-search {
  display: inline-flex !important;
  align-items: center;
  gap: 0.5rem;
  border: 1.5px solid var(--navy) !important;
  border-radius: 0 !important;
  padding: 0.4rem 0.85rem !important;
}
.lc-search svg { width: 1.05rem; height: 1.05rem; }

.lc-navtoggle {
  display: none;
  background: none;
  border: 0;
  padding: 0.5rem;
  cursor: pointer;
  color: var(--navy);
}
.lc-navtoggle__bars { display: block; width: 26px; }
.lc-navtoggle__bars i {
  display: block;
  height: 2.5px;
  background: currentColor;
  margin: 5px 0;
  transition: transform 0.3s var(--ease-out), opacity 0.2s var(--ease-out);
}
.lc-navtoggle[aria-expanded="true"] i:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.lc-navtoggle[aria-expanded="true"] i:nth-child(2) { opacity: 0; }
.lc-navtoggle[aria-expanded="true"] i:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

/* ----------------------------------------------------------- Hero */
.lc-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: clamp(360px, 54vw, 600px);
  overflow: hidden;
  background: var(--navy-dark);
}
.lc-hero__img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 30%;
}
.lc-hero__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(95deg, rgba(3,32,61,0.92) 0%, rgba(3,32,61,0.62) 38%, rgba(3,32,61,0.12) 72%, rgba(3,32,61,0) 100%),
    linear-gradient(0deg, rgba(3,32,61,0.55) 0%, rgba(3,32,61,0) 45%);
}
.lc-hero__content {
  position: relative;
  width: 100%;
  padding-block: clamp(2rem, 6vw, 4.5rem);
}
.lc-hero__title {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 700;
  color: var(--white);
  font-size: clamp(2.5rem, 7vw, 4.5rem);
  line-height: 0.95;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

/* ----------------------------------------------------------- Sub-nav tabs */
.lc-subnav {
  position: sticky;
  top: 5rem;
  z-index: var(--z-subnav);
  background: var(--white);
  border-bottom: 1px solid var(--border);
}
.lc-subnav__inner {
  display: flex;
  gap: clamp(1.25rem, 3vw, 3rem);
  overflow-x: auto;
  scrollbar-width: none;
}
.lc-subnav__inner::-webkit-scrollbar { display: none; }
.lc-subnav a {
  flex: 0 0 auto;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(0.95rem, 1vw, 1.0625rem);
  color: var(--navy);
  text-decoration: none;
  padding: 1.1rem 0;
  border-bottom: 3px solid transparent;
  white-space: nowrap;
  transition: border-color 0.2s var(--ease-out);
}
.lc-subnav a:hover { border-bottom-color: var(--blue); }
.lc-subnav a.is-current { border-bottom-color: var(--navy); font-weight: 700; }

/* ----------------------------------------------------------- Intro + video */
.lc-intro { padding-block: var(--section-y); }
.lc-intro__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
.lc-intro__copy { max-width: 34rem; }

/* Video figure wrapper (native Brightcove player lives inside .brx-video) */
.lc-video { margin: 0; }

/* ----------------------------------------------------------- Why join us */
.lc-why { padding-block: var(--section-y); }
.lc-why__grid {
  display: grid;
  /* Figma: equal text/image columns (686.5 each) with a 75px gap (5.18% of 1448) */
  grid-template-columns: 1fr 1fr;
  column-gap: 5.18%;
  row-gap: clamp(2rem, 4vw, 3.5rem);
  align-items: stretch; /* right column matches the left column height */
}
/* Block→block gap 35px (Figma) */
.lc-why__copy { display: flex; flex-direction: column; gap: clamp(1.75rem, 2.5vw, 2.1875rem); }
/* Title = Untitled Serif Bold 40px, lh 0.971, ls -1px (Figma H3 Serif) */
.lc-block__title {
  font-family: var(--font-serif);
  font-weight: 700;
  color: var(--navy);
  font-size: clamp(2rem, 2.8vw, 2.5rem);
  line-height: 0.971;
  letter-spacing: -0.025em;
  margin: 0 0 1.5625rem; /* title→body gap 25px */
}
/* Body = Untitled Serif Regular 27px, lh 1.236 (Figma Primary Body) */
.lc-block p {
  max-width: 60ch;
  font-family: var(--font-serif);
  font-weight: 400;
  color: var(--navy);
  font-size: clamp(1.25rem, 0.7vw + 1rem, 1.6875rem);
  line-height: 1.236;
  letter-spacing: -0.01em;
}

/* Right column: image grows to fill the height, social bar separated below it (Figma gap 30px) */
.lc-why__media { margin: 0; display: flex; flex-direction: column; gap: 1.875rem; }
.lc-why__media img {
  width: 100%;
  /* PWRC-503 r5 (Jared): was `flex: 1 1 auto`, which let the image grow to fill
     leftover column height and distorted its natural aspect ratio. Hold intrinsic
     size instead. */
  flex: 0 0 auto;
  min-height: 22rem;
  object-fit: cover;
  display: block;
}
.lc-why__social {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
  flex-shrink: 0;
  background: var(--navy-med); /* Medium Blue (Figma) */
  color: var(--white);
  padding: 1.125rem;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 24px;
  letter-spacing: -0.025em;
}
.lc-why__social a { display: inline-flex; color: var(--white); transition: opacity 0.2s; }
.lc-why__social a:hover { opacity: 0.75; }
.lc-why__social svg { width: 42px; height: 42px; aspect-ratio: 1 / 1; }
/* PWRC-503 r5 (Jared): keep the two social icons on one line so they wrap as a
   unit instead of a lone icon dropping to its own row on narrow viewports. */
.lc-why__social-icons { display: inline-flex; align-items: center; gap: 0.875rem; }
/* The LinkedIn glyph reads larger than Instagram at the same 42px box (its viewBox
   fills more of the frame); trim it to visually match. */
.lc-why__social a[aria-label="LinkedIn"] svg { width: 36px; height: 36px; }

/* ----------------------------------------------------------- Opportunities */
.lc-opps {
  padding-block: var(--section-y);
  background: var(--blue-bg);
}
/* Figma row: image 532 / gap 193 / text 723 within 1448 content width. fr
   columns + a percentage column-gap (193/1448 ≈ 13.33%) reproduce those
   proportions fluidly; the right column lands at x725 so the intro and every
   card body share the same left edge. */
.lc-opps__head {
  display: grid;
  grid-template-columns: 532fr 723fr;
  column-gap: 13.33%;
  row-gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: start;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.lc-opps__head .lc-h2 { margin: 0; }
.lc-opps__intro { max-width: none; align-self: start; }

.lc-opps__list {
  display: flex;
  flex-direction: column;
  gap: clamp(2.5rem, 5vw, 4.5rem);
}
.lc-opp {
  display: grid;
  grid-template-columns: 532fr 723fr;
  column-gap: 13.33%;
  row-gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: start;
}
.lc-opp__media { margin: 0; }
.lc-opp__media img {
  width: 100%;
  aspect-ratio: 532 / 382;
  object-fit: cover;
}
.lc-opp__title {
  font-family: var(--font-sans);
  font-weight: 700;
  color: var(--navy);
  font-size: clamp(1.5rem, 2.2vw, 1.875rem);
  line-height: 1.05;
  letter-spacing: -0.015em;
  margin: 0 0 0.65em;
}
.lc-opp__body p { max-width: none; margin-bottom: 1.5rem; }

/* ----------------------------------------------------------- About */
.lc-about { padding-block: var(--section-y); }
.lc-about__grid {
  display: grid;
  /* Figma: copy 665 (45.9%) left, video 733 (50.6%) right — video is the WIDER
     column — with a 50px gap (3.45% of 1448). */
  grid-template-columns: 665fr 733fr;
  column-gap: 3.45%;
  row-gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
  margin-bottom: clamp(2.5rem, 4vw, 3.5rem);
}
.lc-about__copy a { text-underline-offset: 3px; }
/* About §1 video — native 16/9 player (default .brx-video ratio). */
.lc-about__video { margin: 0; }
/* Reused video slider (videosliderpanel) — neutralize the global full-bleed rule
   (new-styles.css forces width/-50vw margin on .videosliderpanel for top-level panels;
   here it lives inside .lc-shell, so keep it within the section at all breakpoints). */
.lc-about__videos.videosliderpanel {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  overflow: hidden;
}
.lc-about__videos .swiper.videoSlider { width: 100%; }

/* Accordion — PWRC-503: London accordions reuse the site-standard markup and
   styles from /bundles/careersummerprogramlocation.css (see _summerLocationsPanel).
   That bundle scopes everything under `.summerprogramlocate .grid-container`, so
   the London panels carry those wrapper classes; the rules below only neutralize
   the wrappers' own page layout — .lc-shell already provides the London gutters
   and the sections set their own vertical rhythm. */
.london-careers .summerprogramlocate { margin-top: 0 !important; } /* global panel-gap rule (style.css) is !important */
.london-careers .summerprogramlocate .grid-container {
  max-width: none;
  margin: 0;
  padding-left: 0;
  padding-right: 0;
}
.london-careers .summerprogramlocate .grid-container .accordion {
  margin-top: 0;    /* the bundle adds its own gap above the accordion */
  margin-inline: 0; /* the bundle bleeds past the gutter on mobile; stay inside .lc-shell */
}
/* Keep the London readability cap on answer copy (was .lc-accordion__panel p). */
.london-careers .list-collapse .content p { max-width: 70ch; }

/* RTE-authored lists inside accordion answers (PWRC-503 r7/r8 / client). The shared
   summer-program bundle + global style.css suppress bullets and indent on
   `.summerprogramlocate .accordion ul li` (that page's accordion lists are link
   lists — no prose bullets). London's answers are prose, so restore the
   site-standard styled list, matching the reference accordion implementation on
   /careers/laterals-judicial-clerks (careerAccordion.css `.careerJudicial ...
   .insideBottomContent ul li::before`): the overlapping-squares squareBullet.svg
   as a background image, sized/positioned explicitly, with the global
   transform: rotate() overridden. Scoped deeper than the global rule so it
   out-ranks the suppression. Numbers stay visible for ol. */
.london-careers .summerprogramlocate .accordion .list-collapse .content ul,
.london-careers .summerprogramlocate .accordion .list-collapse .content ol { margin: 1em 0; }
.london-careers .summerprogramlocate .accordion .list-collapse .content ul li {
  position: relative;
  padding-left: 2.5rem; /* undo the bundle's padding-left: 0; matches the judicial-clerks list */
}
.london-careers .summerprogramlocate .accordion .list-collapse .content ul li::before {
  content: '';
  display: block; /* undo the bundle's display: none */
  position: absolute;
  top: 0.1875rem;
  left: 0;
  background: url("../assets/images/settings/squareBullet.svg?v=xfnkXNqfJkiM_VbQ2iNomusOdf8") no-repeat;
  background-size: contain;
  background-color: transparent; /* the global rule paints a solid navy square */
  height: 1.125rem;
  width: 1.125rem;
  -webkit-transform: rotate(0deg);
      -ms-transform: rotate(0deg);
          transform: rotate(0deg); /* nested ul li::before is rotated 45deg globally */
}
.london-careers .summerprogramlocate .accordion .list-collapse .content ol {
  list-style: decimal;
  padding-left: 1.6rem; /* room for the numeric marker */
}
.london-careers .summerprogramlocate .accordion .list-collapse .content ol li { padding-left: 0.35rem; }


/* ----------------------------------------------------------- Inclusion */
.lc-incl {
  padding-block: var(--section-y);
  background: var(--blue-bg);
}

/* Colored-bg sections bleed to full viewport at every breakpoint; content stays
   at the gutter. box-shadow + clip-path add no stacking context and no scroll. */
.lc-opps,
.lc-incl,
.tc-look {
  box-shadow: 0 0 0 100vw var(--blue-bg);
  clip-path: inset(0 -100vw);
}
.lc-incl__intro { max-width: none; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.lc-incl__grid {
  display: grid;
  /* Figma: copy 947 (65.4%) left, portrait image 427 (29.5%) right, 75px gap (5.18%) */
  grid-template-columns: 947fr 427fr;
  column-gap: 5.18%;
  row-gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.lc-incl__list { list-style: none; margin: 1.25rem 0 0; padding: 0; display: grid; gap: 1.1rem; }
.lc-incl__list li {
  position: relative;
  padding-left: 1.85rem;
  max-width: 62ch;
}
.lc-incl__list li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.55em;
  width: 0.7rem; height: 0.7rem;
  background: var(--navy);
}
.lc-incl__list strong { font-family: var(--font-serif); }
.lc-incl__media img { width: 100%; aspect-ratio: 427 / 636; object-fit: cover; }
.lc-incl__closing { max-width: none; }
.lc-incl__closing .lc-h3sans { margin-top: 1.75rem; }
/* Learn More button spans the full width of the section (Figma "FULL WIDTH BUTTON",
   #0B3D71, "Learn More" left-aligned, no trailing arrow) */
.lc-incl__closing .lc-btn {
  margin-top: 2rem;
  width: 100%;
  max-width: none;
  background: var(--navy-med);
  justify-content: flex-start;
}
.lc-incl__closing .lc-btn::after { content: none; }
.lc-incl__closing .lc-btn:hover { background: var(--navy); }

/* Inclusion is the last section — sit flush with the footer by cancelling the
   footer's responsive top margin (footer.threerow) on its wrapper. */
.london-careers:has(.lc-incl) { margin-bottom: calc(-1 * clamp(2.5rem, 4.011vw + 1.515rem, 3.438rem)); }
@media print, screen and (min-width: 48em) {
  .london-careers:has(.lc-incl) { margin-bottom: calc(-1 * clamp(3.438rem, 16.863vw - 4.657rem, 6.125rem)); }
}
@media print, screen and (min-width: 64em) {
  .london-careers:has(.lc-incl) { margin-bottom: calc(-1 * clamp(6.125rem, 7.102vw + 1.58rem, 9.25rem)); }
}

/* ----------------------------------------------------------- Footer */
.lc-footer {
  background: var(--navy);
  color: var(--white);
}
.lc-footer__grid {
  display: grid;
  grid-template-columns: 1.25fr repeat(4, 1fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
  padding-block: clamp(3rem, 6vw, 5rem);
}
.lc-footer__divider { border: 0; border-top: 1px solid rgba(255,255,255,0.3); margin: 1.5rem 0; max-width: 14rem; }
.lc-footer__quick { display: flex; flex-direction: column; gap: 0.4rem; }
.lc-footer__quick a {
  font-family: var(--font-sans);
  font-weight: 700;
  text-decoration: none;
  color: var(--white);
}
.lc-footer__quick a:hover { color: var(--blue); }
.lc-footer__social { display: flex; gap: 1rem; margin-top: 1.75rem; }
.lc-footer__social a { display: inline-flex; color: var(--white); transition: opacity 0.2s; }
.lc-footer__social a:hover { opacity: 0.7; }
.lc-footer__social svg { width: 1.5rem; height: 1.5rem; }

.lc-footer__col { display: flex; flex-direction: column; gap: 0.55rem; }
.lc-footer__title {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(1.0625rem, 1.3vw, 1.3125rem);
  margin: 0 0 0.6rem;
  color: var(--white);
}
.lc-footer__col a {
  font-family: var(--font-serif);
  color: rgba(255,255,255,0.82);
  text-decoration: none;
  font-size: 1.0625rem;
  line-height: 1.3;
  transition: color 0.2s var(--ease-out);
}
.lc-footer__col a:hover { color: var(--white); text-decoration: underline; text-underline-offset: 3px; }

.lc-footer__legal { background: var(--navy-dark); }
.lc-footer__legalinner {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 2rem;
  justify-content: space-between;
  padding-block: 1.15rem;
  font-family: var(--font-sans);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.7);
}

/* ----------------------------------------------------------- Reveal motion */
/* Server-rendered: content is always visible. Entrance animation is opt-in,
   activating only if a `lc-js` class is added to an ancestor. */
.lc-reveal { opacity: 1; transform: none; }
.lc-js .lc-reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}
.lc-js .lc-reveal.is-visible { opacity: 1; transform: none; }

/* =============================================================================
   Responsive
   ========================================================================== */
@media (max-width: 63.99875em) {
  .lc-navtoggle { display: inline-block; }
  .lc-header__inner { min-height: 4.5rem; }

  .lc-nav {
    position: absolute;
    left: 0; right: 0;
    top: 100%;
    z-index: var(--z-nav-panel);
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--white);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 12px 24px rgba(3,32,61,0.12);
    padding: 0.5rem 0 1rem;
  }
  .lc-nav.is-open { display: flex; }
  .lc-nav__utility,
  .lc-nav__primary {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .lc-nav__utility a,
  .lc-nav__primary > a {
    padding: 0.85rem var(--shell-pad);
    border-bottom: 1px solid var(--border);
  }
  .lc-nav__primary > a { border-bottom: 1px solid var(--border); }
  .lc-nav__primary > a[aria-current="true"] { color: var(--navy-med); font-weight: 700; }
  .lc-search { margin: 0.75rem var(--shell-pad) 0; justify-content: center; }

  .lc-subnav { top: 4.5rem; }
  .lc-subnav__inner { gap: 1.5rem; }

  .lc-intro__grid,
  .lc-why__grid,
  .lc-opps__head,
  .lc-opp,
  .lc-about__grid,
  .lc-quote,
  .lc-incl__grid {
    grid-template-columns: 1fr;
  }

  .lc-intro__copy { max-width: 100%; order: 2; }
  .lc-why__media { max-width: 32rem; }
  .lc-incl__media { max-width: 28rem; }
  .lc-opp__media { max-width: 34rem; }
  .lc-quote__media { max-width: 36rem; }

  .lc-footer__grid { grid-template-columns: 1fr 1fr; }
  .lc-footer__brand { grid-column: 1 / -1; }
}

@media (max-width: 39.99875em) {
  .lc-footer__grid { grid-template-columns: 1fr; }
  .lc-footer__legalinner { flex-direction: column; }
  .lc-hero { min-height: 70vw; }
  .lc-hero__scrim {
    background: linear-gradient(0deg, rgba(3,32,61,0.9) 5%, rgba(3,32,61,0.35) 55%, rgba(3,32,61,0.1) 100%);
  }
}

/* =============================================================================
   Reduced motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
  .lc-js .lc-reveal { opacity: 1; transform: none; }
  .lc-btn::after { transition: none; }
}

/* =============================================================================
   Rich-text-authored content inside panels (CMS editors author these as RTE,
   so style the raw elements to match the prototype's classed equivalents).
   ========================================================================== */
.london-careers .lc-incl__copy h3,
.london-careers .lc-incl__closing h3,
.london-careers .lc-about__copy h3 {
  font-family: var(--font-sans);
  font-weight: 700;
  color: var(--navy);
  font-size: clamp(1.25rem, 1.6vw, 1.5rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin: 1.75rem 0 0.6em;
}
.london-careers .lc-incl__copy ul,
.london-careers .lc-incl__closing ul {
  list-style: none;
  margin: 1.25rem 0 1.1em;
  padding: 0;
  display: grid;
  gap: 1.1rem;
}
.london-careers .lc-incl__copy ul li,
.london-careers .lc-incl__closing ul li {
  position: relative;
  padding-left: 1.85rem;
  max-width: 62ch;
}
.london-careers .lc-incl__copy ul li::before,
.london-careers .lc-incl__closing ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 0.7rem;
  height: 0.7rem;
  background: var(--navy);
}
.london-careers .lc-about__copy a {
  text-underline-offset: 3px;
}

/* =============================================================================
   Training Contract page (node 43090) — Figma frame 1:3017
   Reuses .london-careers / .lc-shell / .lc-rule / full-bleed + footer-gap helpers.
   Section headings here are the big H1 scale (ABC Diatype Bold 85px).
   ========================================================================== */
/* Single top-padding rhythm (Figma sections use pt-125, not py) so adjacent
   white sections don't double their gap. Colored sections (.tc-look) and the
   featured block (.tc-feat) re-add their own padding-block below. */
.tc-section { padding-top: var(--section-y); }

/* H1 — section headings (ABC Diatype Bold 85px, lh 0.8, ls -5px) */
.tc-h1 {
  font-family: var(--font-sans);
  font-weight: 700;
  color: var(--navy);
  font-size: clamp(2.5rem, 5.5vw, 5.3125rem);
  line-height: 0.8;
  letter-spacing: -0.05em;
  margin: 0 0 clamp(2rem, 4vw, 4.6875rem);
  text-wrap: balance;
}

/* H2 Serif — sub-title (Untitled Serif Regular 60px, lh 0.971, ls -2.5px) */
.tc-title {
  font-family: var(--font-serif);
  font-weight: 400;
  color: var(--navy);
  font-size: clamp(2rem, 3.8vw, 3.75rem);
  line-height: 0.971;
  letter-spacing: -0.025em;
  margin: 0;
}

/* Primary body (Untitled Serif Regular 27px, lh 1.236, ls -1px) */
.london-careers .tc-body { font-family: var(--font-serif); }
.london-careers .tc-body p,
.london-careers .tc-body li {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(1.25rem, 0.7vw + 1rem, 1.6875rem);
  line-height: 1.236;
  letter-spacing: -0.01em;
}

/* ----------------------------------------------------------- 1 · Intro + image */
/* Figma caps the intro copy block at 1248 of the 1448 content width (86.2%). */
/* PWRC-503 r2: tighter sub-title → body gap (was clamp(1.5rem, 3vw, 2.8125rem)) —
   client flagged extra whitespace under "A Trailblazing Opportunity". */
.tc-intro__copy { display: flex; flex-direction: column; gap: clamp(0.75rem, 1.5vw, 1.375rem); max-width: 86.19%; }
.tc-intro__copy .tc-body { max-width: none; }
.tc-intro__img { margin: clamp(2.5rem, 5vw, 4.6875rem) 0 0; }
/* PWRC-503 r5 (Jared): no fixed aspect-ratio — let the banner take the natural
   height of whatever is uploaded (Training Contract + Brussels intros). */
.tc-intro__img img { width: 100%; object-fit: cover; }
/* PWRC-503 r4 (Jared): the intro's wide image is flush to the section bottom
   (.tc-section rhythm is top-padding only). Fine when the next section is white,
   but on Brussels "Join Us" the next section is a coloured .lc-bg band, so the
   grey started hard against the image. Add bottom breathing room ONLY when a
   coloured band follows — the white-on-white Training Contract intro keeps its
   single gap (no double spacing). */
.london-careers:has(+ .london-careers > .tc-section.lc-bg) > .tc-section.tc-intro {
  padding-bottom: var(--section-y);
}

/* ----------------------------------------------------------- 2 · Experience Distinction */
.tc-dist__grid {
  display: grid;
  /* Figma: equal copy / navy-panel columns (686.5 each) with a 75px gap (5.18% of 1448) */
  grid-template-columns: 1fr 1fr;
  column-gap: 5.18%;
  row-gap: clamp(2rem, 4vw, 3rem);
  align-items: start;
}
.tc-dist__left { display: flex; flex-direction: column; gap: clamp(1.25rem, 2vw, 1.5625rem); }
.tc-dist__copy { max-width: none; }
.tc-dist__rest.is-hidden { display: none; }
.tc-dist__copy .tc-readmore { margin: 1.625rem 0 0; }
.tc-dist__rest > :first-child { margin-top: 1.1em; }
.tc-readmore {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  align-self: flex-start;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(1rem, 1.2vw, 1.25rem);
  letter-spacing: -0.02em;
  color: var(--navy);
}
.tc-readmore__icon {
  width: 1.25rem; height: 0.8rem;
  background: url(/assets/images/settings/icon-top-blue.svg?v=aZjKiCDzu-OcUn9yS6ElKOMDvbY) no-repeat center / contain;
  transform: rotate(180deg);
  transition: transform 0.2s ease;
}
.tc-readmore[aria-expanded="true"] .tc-readmore__icon { transform: rotate(360deg); }

/* Blue card */
.tc-dist__card {
  background: var(--navy-med);
  color: var(--white);
  padding: clamp(1.75rem, 3vw, 2.8125rem);
  display: flex;
  flex-direction: column;
  /* PWRC-503 r2: tighter card rhythm (was clamp(1.75rem, 3vw, 2.8125rem)) — the
     gap sits above AND below the Apply Now button, which read as too much air. */
  gap: clamp(1.125rem, 2vw, 1.625rem);
}
.tc-dist__cardtext p { color: var(--white); }
/* scoped under .london-careers so the button label beats the global text-link color */
.london-careers a.tc-card__btn {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  min-height: 3.75rem;
  background: var(--blue);
  color: var(--navy);
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(1.125rem, 1.4vw, 1.5625rem);
  letter-spacing: -0.025em;
  line-height: 0.971;
  padding: 0.5rem 1.5rem;
  text-decoration: none;
  transition: background-color 0.3s var(--ease-out), color 0.3s var(--ease-out);
}
/* PWRC-503 r2: light-blue CTAs on light/tinted backgrounds invert to the medium-blue
   fill with a white label on hover, matching the site's light-blue buttons. The
   .lc-btn--external icon is a currentColor mask, so it whitens automatically. */
.london-careers a.tc-card__btn:hover { background: var(--navy-med); color: var(--white); }
/* EXCEPTION: buttons sitting ON a medium-blue card (#0B3D71) would disappear with
   that hover — keep the original light hover inside the cards. */
.london-careers .tc-dist__card a.tc-card__btn:hover,
.london-careers .vs-card a.tc-card__btn:hover { background: #c8d4e3; color: var(--navy); }
/* PWRC-503 r2: tighter "Salary" heading → list gap (was clamp(1.25rem, 2vw, 1.5625rem)). */
.tc-salary { display: flex; flex-direction: column; gap: clamp(0.75rem, 1.25vw, 1rem); }
.tc-salary__title {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 700;
  color: var(--white);
  font-size: clamp(1.75rem, 2.6vw, 2.5rem);
  line-height: 0.971;
  letter-spacing: -0.025em;
}
.tc-salary__list ul {
  list-style: none;
  margin: 0;
  padding-left: 0.9375rem; /* 15px (Figma) */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* PWRC-503 r2: tighter list-item spacing (was clamp(1.5rem, 3vw, 2.1875rem) = Figma 35px). */
  gap: clamp(0.875rem, 1.5vw, 1.25rem);
}
.tc-salary__list li {
  position: relative;
  margin: 0;
  padding-left: 2.8125rem; /* 20px icon + 25px gap */
  color: var(--white);
}
/* Exact Figma "Frame" icon: two offset squares (navy + light-blue + medium-blue overlap) */
.tc-salary__list li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.12em;
  width: 1.25rem; height: 1.25rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M15.2613 0H0V15.331H15.2613V0Z' fill='%2303203D'/%3E%3Cpath d='M20.0001 4.66895H4.73877V20H20.0001V4.66895Z' fill='%23BCC8D9'/%3E%3Cpath d='M15.2614 4.66895H4.73877V15.2613H15.2614V4.66895Z' fill='%230B3D71'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* Pull quote */
.tc-quote {
  margin: clamp(2.5rem, 5vw, 6.25rem) 0 0;
  background: var(--blue);
  color: var(--navy-dark);
  text-align: center;
  padding: clamp(3rem, 8vw, 7.8125rem) clamp(1.5rem, 8vw, 10rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(1.5rem, 2.5vw, 2.4375rem);
}
/* scoped + explicit color/reset to override the site's global blockquote styling */
.london-careers .tc-quote__text {
  margin: 0;
  padding: 0;
  border: 0;
  quotes: none;
  max-width: 70.5rem;
  color: var(--navy-dark);
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.75rem, 3.6vw, 3.4375rem);
  line-height: 1.02;
  letter-spacing: -0.015em;
}
.london-careers .tc-quote__text::before,
.london-careers .tc-quote__text::after { content: none; }
.london-careers .tc-quote__cite {
  color: var(--navy-dark);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(0.95rem, 1.1vw, 1.25rem);
  letter-spacing: -0.015em;
}

/* ----------------------------------------------------------- 3 · FAQ + video */
.tc-faq__list { margin-bottom: clamp(3rem, 6vw, 6.25rem); }
/* FAQ video — native 16/9 player in a large container:
   Figma = 913 of the 1448 content width (63%), centred. */
.tc-faq__video { max-width: 63%; margin: 0 auto; }
/* Give the video breathing room above the next (coloured) section. */
.tc-faq { padding-bottom: var(--section-y); }

/* ----------------------------------------------------------- 4 · What we look for */
.tc-look {
  padding-block: var(--section-y);
  background: var(--blue-bg);
}
.tc-look__items { display: flex; flex-direction: column; gap: clamp(2rem, 4vw, 3.125rem); }
.tc-look__item { display: flex; flex-direction: column; gap: clamp(1rem, 1.6vw, 1.5625rem); }
.tc-look__title {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 700;
  color: var(--navy);
  font-size: clamp(1.75rem, 2.6vw, 2.5rem);
  line-height: 0.971;
  letter-spacing: -0.025em;
}
/* Figma body runs to 1250 of the 1448 content width (86.3%). */
.tc-look__item .tc-body { max-width: 86.3%; }

/* Featured videos — reuses the About panel's testimonial-video slider component
   (videosliderpanel + .lc-about__videos styling). Only the section padding is bespoke. */
.tc-feat { padding-block: var(--section-y); }
/* The component gives .contentwrap an overflow-y:auto with a thin #B9C8DA scrollbar,
   which shows as a vertical line on the right. The featured copy is short here — drop it. */
.tc-feat__videos .videoSlider .sliderwrap .contentwrap {
  overflow: visible !important;
  scrollbar-width: none !important;
  scrollbar-color: transparent transparent !important;
}
.tc-feat__videos .videoSlider .sliderwrap .contentwrap::-webkit-scrollbar { width: 0 !important; display: none !important; }

/* Testimonial copy to Figma sizes (the shared videosliderpanel renders it too
   small; its selector is deep, so !important like the other overrides above):
   name = ABC Diatype Bold 64px, title = ABC Diatype Regular 36px, quote =
   Untitled Serif 27px upright. Scoped to the London careers instances (TC §5 +
   About) so the global slider elsewhere is untouched. */
/* Keep name → title → quote grouped near the top (the slider's space-between
   pushes the quote to the bottom, leaving an oversized gap). */
.tc-feat__videos .contentwrap .content,
.lc-about__videos .contentwrap .content { justify-content: flex-start !important; gap: 1.5625rem; }
.tc-feat__videos .contentwrap .content h2,
.lc-about__videos .contentwrap .content h2 {
  font-family: var(--font-sans) !important;
  font-weight: 700 !important;
  font-size: clamp(2.5rem, 4.4vw, 4rem) !important;
  line-height: 1.0 !important;
  letter-spacing: -0.02em !important;
  color: var(--navy) !important;
}
.tc-feat__videos .contentwrap .content > p:nth-of-type(1),
.lc-about__videos .contentwrap .content > p:nth-of-type(1) {
  font-family: var(--font-sans) !important;
  font-weight: 400 !important;
  font-size: clamp(1.5rem, 2.5vw, 2.25rem) !important;
  line-height: 1.05 !important;
  letter-spacing: -0.02em !important;
}
.tc-feat__videos .contentwrap .content > p:nth-of-type(2),
.lc-about__videos .contentwrap .content > p:nth-of-type(2) {
  font-family: var(--font-serif) !important;
  font-size: clamp(1.25rem, 1.9vw, 1.6875rem) !important;
  line-height: 1.166 !important;
  letter-spacing: -0.01em !important;
}
.tc-feat__videos .contentwrap .content > p:nth-of-type(2) em,
.lc-about__videos .contentwrap .content > p:nth-of-type(2) em { font-style: normal !important; }

/* When "What We Look For" / featured-videos is the LAST panel, its coloured band
   bleeds down to meet the footer (cancel the footer's responsive top margin so
   there's no white gap), with extra bottom padding so the content still has
   breathing room above the footer. */
.london-careers:has(.tc-look):last-child .tc-look,
.london-careers:has(.tc-feat):last-child .tc-feat { padding-bottom: var(--section-y); }
.london-careers:has(.tc-feat):last-child,
.london-careers:has(.tc-look):last-child { margin-bottom: calc(-1 * clamp(2.5rem, 4.011vw + 1.515rem, 3.438rem)); }
@media print, screen and (min-width: 48em) {
  .london-careers:has(.tc-feat):last-child,
  .london-careers:has(.tc-look):last-child { margin-bottom: calc(-1 * clamp(3.438rem, 16.863vw - 4.657rem, 6.125rem)); }
}
@media print, screen and (min-width: 64em) {
  .london-careers:has(.tc-feat):last-child,
  .london-careers:has(.tc-look):last-child { margin-bottom: calc(-1 * clamp(6.125rem, 7.102vw + 1.58rem, 9.25rem)); }
}

/* =============================================================================
   Vacation Scheme page (node 43096) — Figma frame 1:3291
   Reuses .tc-h1 / .lc-rule / tc-body / .tc-card__btn / the two-tone square bullet.
   ========================================================================== */
/* 1 · Our Vacation Schemes — left copy + navy schedule card, full-width button + image */
/* Bottom breathing room so the wide image isn't flush against the next section
   (matches the padding-bottom other pre-band sections use, e.g. .tc-faq). */
.vs-schemes { padding-bottom: var(--section-y); }
.vs-schemes__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4.6875rem);
  align-items: start;
}
.vs-schemes__copy { max-width: none; }
.vs-card {
  background: var(--navy-med);
  color: var(--white);
  padding: clamp(1.75rem, 3vw, 2.8125rem);
  display: flex;
  flex-direction: column;
  gap: clamp(1.75rem, 3vw, 2.8125rem);
}
/* PWRC-503 r2: slightly tighter title → dates gap (was 1.5rem). */
.vs-card__item { display: flex; flex-direction: column; gap: 1rem; }
.vs-card__title {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 700;
  color: var(--white);
  font-size: clamp(1.5rem, 2vw, 1.875rem);
  line-height: 0.971;
  letter-spacing: -0.025em;
}
.vs-card__dates p { color: var(--white); margin: 0; }
.vs-card__dates p + p { margin-top: 0.1em; }
.vs-applybtn { margin-top: clamp(2rem, 4vw, 3.125rem); }
.vs-schemes__img { margin: clamp(2.5rem, 5vw, 4.6875rem) 0 0; }
/* PWRC-503 r5 (Jared): natural height, no fixed aspect-ratio. */
.vs-schemes__img img { width: 100%; object-fit: cover; }

/* 2 · The Vacation Scheme Promise — intro + title + two-column check list */
.vs-promise__intro { max-width: 78ch; margin-bottom: clamp(2rem, 4vw, 2.8125rem); }
.vs-promise__title {
  margin: 0 0 clamp(1.75rem, 3vw, 2.8125rem);
  font-family: var(--font-serif);
  font-weight: 700;
  color: var(--navy);
  font-size: clamp(1.75rem, 2.6vw, 2.5rem);
  line-height: 0.971;
  letter-spacing: -0.025em;
}
.vs-promise__list ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.5rem, 2.5vw, 2.1875rem) clamp(2rem, 4vw, 3.5rem);
}
.vs-promise__list li {
  position: relative;
  margin: 0;
  padding-left: 2.8125rem;
  color: var(--navy-dark);
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(1.125rem, 0.6vw + 1rem, 1.6875rem);
  line-height: 1.236;
  letter-spacing: -0.01em;
}
.vs-promise__list li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.12em;
  width: 1.25rem; height: 1.25rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M15.2613 0H0V15.331H15.2613V0Z' fill='%2303203D'/%3E%3Cpath d='M20.0001 4.66895H4.73877V20H20.0001V4.66895Z' fill='%23BCC8D9'/%3E%3Cpath d='M15.2614 4.66895H4.73877V15.2613H15.2614V4.66895Z' fill='%230B3D71'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* =============================================================================
   Brussels page (node 43097) — Figma frame 1:2510
   Reuses .tc-h1 / .lc-rule / tc-body / .tc-card__btn / .tc-readmore.
   ========================================================================== */
/* 1 · Intro + video (video reuses the .lc-video poster/controls widget — matches Figma) */
.brx-intro__grid {
  display: grid;
  /* Match the About §1 two-column layout (Jared, PWRC-503): copy 665 / video 733,
     video is the WIDER right column, 50px gap (3.45% of 1448). */
  grid-template-columns: 665fr 733fr;
  column-gap: 3.45%;
  row-gap: clamp(2rem, 5vw, 4.6875rem);
  align-items: start;
}
.brx-intro__copy { display: flex; flex-direction: column; gap: clamp(1.75rem, 3vw, 2.8125rem); }
.brx-intro__copy .tc-body { max-width: 60ch; }
.brx-intro__video { margin: 0; }
/* Apply Now button width in its column (Jared, PWRC-503) */
.london-careers a.brx-intro__btn { width: 85%; }
/* Native Brightcove player in a 16/9 box (PWRC-503: native controls like the
   carousel + the rest of the site). Figma container: border + base background. */
.brx-video { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--video-bg); border: 1px solid var(--border); }
.brx-video .video-js,
.brx-video video { position: absolute; inset: 0; width: 100%; height: 100%; }
.brx-video video,
.brx-video .vjs-tech { object-fit: cover; }
/* Editor still image shown when a poster media is set but no Brightcove id. */
.brx-video > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* 4 · Our Partners */
.brx-partners__list { display: flex; flex-direction: column; gap: clamp(3rem, 6vw, 7.8125rem); }
.brx-partner {
  display: grid;
  /* Figma: image 532 (36.7%) / text 723 (49.9%) with a 193px gap (13.33% of 1448) */
  grid-template-columns: 532fr 723fr;
  column-gap: 13.33%;
  row-gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}
.brx-partner__media { margin: 0; aspect-ratio: 532 / 382; background: var(--panel); overflow: hidden; }
.brx-partner__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.brx-partner__name {
  margin: 0 0 clamp(1.5rem, 2.5vw, 2rem);
  padding-top: clamp(1rem, 1.6vw, 1.375rem);
  border-top: 3px solid var(--navy-dark);
  font-family: var(--font-serif);
  font-weight: 400;
  color: var(--navy);
  /* Figma partner name = Untitled Serif 60px */
  font-size: clamp(2.25rem, 4.2vw, 3.75rem);
  line-height: 0.971;
  letter-spacing: -0.025em;
}
.brx-partner__bio { max-width: 62ch; }
.london-careers a.tc-readmore { text-decoration: none; }
/* Figma "Read More" = ABC Diatype Bold 20px */
.brx-partner__more { margin-top: clamp(1.25rem, 2vw, 1.625rem); font-size: 1.25rem; }

/* 5 · Traineeships — image floats right; copy wraps beside it and continues
   full-width below it (PWRC-503 / Ariana). Float (not grid) so the taller copy
   reclaims the space under the image instead of staying boxed in a column. */
/* PWRC-503 r2: the .tc-section rhythm is top-padding only, so this panel ended
   flush under the floated image / CTA. Give it the same bottom breathing room
   the other image-ended sections use (.vs-schemes, .tc-faq). */
.brx-train { padding-bottom: var(--section-y); }
.brx-train__grid { display: block; }
.brx-train__copy { display: block; }
.brx-train__copy::after { content: ""; display: block; clear: both; }
.brx-train__item { margin: 0 0 clamp(2rem, 4vw, 3.125rem); }
.brx-train__item:last-child { margin-bottom: 0; }
.brx-train__title {
  margin: 0 0 clamp(0.75rem, 1.4vw, 1.25rem);
  font-family: var(--font-sans);
  font-weight: 700;
  color: var(--navy);
  /* Figma traineeship subhead = ABC Diatype Bold 30px */
  font-size: clamp(1.375rem, 2vw, 1.875rem);
  line-height: 0.971;
  letter-spacing: -0.025em;
}
.brx-train__media {
  float: right;
  width: clamp(15rem, 32%, 29rem);
  margin: 0.3rem 0 clamp(1.5rem, 3vw, 2.5rem) clamp(2rem, 5vw, 3.75rem);
}
/* PWRC-503 r5 (Jared): natural height, no fixed aspect-ratio (Brussels Traineeships).
   r6 (Jared): dropped `filter: grayscale(1)` — the client now uploads an already
   black-and-white image, so the CSS greyscale is redundant (and was double-processing). */
.brx-train__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.brx-train__btn { margin-top: clamp(2.5rem, 5vw, 4.6875rem); }

/* ----------------------------------------------------------- TC responsive */
@media (max-width: 63.99875em) {
  .tc-dist__grid { grid-template-columns: 1fr; }
  .tc-dist__card { order: 2; }
  .tc-faq__video { max-width: 100%; }
  /* Let the "What We Look For" copy use the full column width on tablet/mobile. */
  .tc-look__item .tc-body { max-width: 100%; }
  .vs-schemes__grid { grid-template-columns: 1fr; }
  .vs-promise__list ul { grid-template-columns: 1fr; }
  .brx-intro__grid,
  .brx-partner { grid-template-columns: 1fr; }
  /* Traineeships: image stops floating and stacks full-width above the copy. */
  .brx-train__media { float: none; width: 100%; max-width: 26rem; margin: 0 0 clamp(1.5rem, 4vw, 2rem); }
  .london-careers a.brx-intro__btn { width: 100%; }
}

/* =============================================================================
   PWRC-503 — client type/spacing overrides. Trailing block so they win the
   cascade; these sizes are the section's source of truth for the other pages.
   ========================================================================== */
.london-careers p,
.london-careers li {
    font-family: var(--font-serif);
    font-weight: 400;
    color: var(--navy);
    font-size: clamp(1rem, 0.784rem + 0.917vw, 1.6875rem);
    line-height: 1.236;
    letter-spacing: -0.01em;
}

.london-careers h2 {
    font-family: var(--font-sans);
    font-weight: 700;
    color: var(--navy);
    font-size: clamp(3.4375rem, 2.849rem + 2.51vw, 5.3125rem);
    line-height: 0.8;
    letter-spacing: -0.05em;
    margin-top: 0;
    margin-bottom: .75em;
}

.london-careers .lc-opps h3 {
    font-family: var(--font-sans);
    font-weight: 700;
    color: var(--navy);
    font-size: clamp(1.5rem, 1.186rem + 1.336vw, 2.5rem);
    line-height: 0.971;
    letter-spacing: -0.025em;
    margin-top: 0;
    margin-bottom: 0.5em;
}

.london-careers .lc-incl h3 {
    font-family: var(--font-sans);
    font-weight: 700;
    color: var(--navy);
    font-size: clamp(1rem, 0.784rem + 0.917vw, 1.6875rem);
    line-height: 1.236;
    letter-spacing: -0.01em;
    margin-top: 0;
    margin-bottom: 0.2em;
}

.london-careers .lc-incl__grid {
    margin-bottom: clamp(1.5rem, 5vw, 2rem);
    row-gap: 1rem;
}

.london-careers .lc-incl__copy ul {
    margin-bottom: 0.25rem;
}

.london-careers .lc-about {
    padding-bottom: clamp(2rem, 4vw, 3rem);
}

.london-careers .lc-about__grid {
    margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}

.london-careers .lc-about .summerprogramlocate {
    margin-bottom: clamp(2rem, 4vw, 3rem);
}

.london-careers > .tc-section.tc-faq {
    padding-top: var(--section-y);
    padding-bottom: var(--section-y);
}

.london-careers .tc-faq__list {
    margin-bottom: 0;
}

.london-careers > .tc-section.tc-feat {
    padding-top: clamp(1.25rem, 4vw, 2rem);
    padding-bottom: var(--section-y);
}

.london-careers .lc-about__videos {
    margin-top: 0;
}

.london-careers .tc-look {
    /* PWRC-503 r2: more air between the band's top edge and the navy rule
       (was clamp(2rem, 4vw, 3rem) — client flagged insufficient top padding). */
    padding-top: clamp(3rem, 6vw, 5rem);
    padding-bottom: clamp(2rem, 4vw, 3rem);
}

.london-careers .sliderwrap .content {
    gap: 0;
    padding-bottom: .25em;
}

.london-careers .sliderwrap .content h2 {
    margin-bottom: .25em;
}

.london-careers .sliderwrap .content p:has(+p) {
    margin-bottom: auto;
}

.london-careers .sliderwrap .content p + p {
    margin-top: 1em;
}

/* =============================================================================
   Editable panel background (PWRC-503 / Ariana). Panels exposing the Approved
   Color picker render an optional full-bleed tinted band; the picked colour comes
   in via the inline --lc-bg custom property (white/empty renders no band). Padded
   so the tint has breathing room. Placed last so it wins the tc-faq padding reset.
   ========================================================================== */
.london-careers .tc-section.lc-bg {
  background: var(--lc-bg);
  box-shadow: 0 0 0 100vw var(--lc-bg);
  clip-path: inset(0 -100vw);
  padding-top: var(--section-y);
  padding-bottom: var(--section-y);
}
/* On a tinted panel band the accordion answer keeps a WHITE background so it stays
   distinct from the coloured section (its default #F1F4F8 grey would otherwise
   blend into a grey band). Only applies when a non-white colour is chosen.
   Selector depth mirrors the standard bundle's `.summerprogramlocate .grid-container
   .accordion .list-collapse li .content` and must out-rank it. */
.london-careers .tc-section.lc-bg .accordion .list-collapse li .content { background: var(--white); }

/* Dark (navy) cards keep white text. The broad `.london-careers p, li { color:
   navy }` in the PWRC-503 override block ties the cards' own white rules on
   specificity and, being later, wins — turning card body text dark. Re-assert
   white here at higher specificity. */
.london-careers .vs-card,
.london-careers .vs-card p,
.london-careers .vs-card li,
.london-careers .tc-dist__card,
.london-careers .tc-dist__card p,
.london-careers .tc-dist__card li {
  color: var(--white);
}
/* Text links on the medium-blue fill; the site's #03203D would be unreadable there. */
.london-careers .vs-card a:not(.tc-card__btn),
.london-careers .tc-dist__card a:not(.tc-card__btn) {
  color: var(--white);
}

/* tc-h1 (section heading) + tc-title (serif sub-title) must stay at their design
   sizes. They'd otherwise be captured by the broad PWRC-503 `.london-careers h2`
   (mid-heading) and `.london-careers p` (27px body) overrides — tc-title is a <p>,
   so it collapses to body size. Pin to 85px / 60px at higher specificity. */
.london-careers .tc-h1 { font-size: clamp(2.5rem, 5.9vw, 5.3125rem); }
/* PWRC-503 r4 (Jared): the sub-title → body gap still read too large. The broad
   `.london-careers p { margin: 0 0 1.1em }` (0,1,1) out-ranks `.tc-title { margin: 0 }`
   (0,1,0), so the <p> sub-title carried a ~66px bottom margin on top of the copy's
   flex gap — the r2 flex-gap trim only removed the smaller half. Zero it here at
   higher specificity so the intended flex gap alone spaces title → body. */
.london-careers .tc-title { font-size: clamp(2rem, 4.2vw, 3.75rem); margin-bottom: 0; }

/* The "Salary" card sub-heading is a <p>, so the broad PWRC-503 `.london-careers p`
   override collapsed it to serif body size. Re-assert the sans card-heading scale
   (same as .tc-look__title) at higher specificity (PWRC-503 r2). */
.london-careers .tc-salary__title {
  font-family: var(--font-sans);
  font-weight: 700;
  color: var(--white);
  font-size: clamp(1.75rem, 2.6vw, 2.5rem);
  line-height: 0.971;
  letter-spacing: -0.025em;
  /* Overrides the .london-careers p margin, which outranks .tc-salary__title's own. */
  margin-top: 0.75em;
  margin-bottom: 0.25em;
}

/* Same defect as the Salary title: `.vs-promise__title` is a <p>, so the broad
   PWRC-503 `.london-careers p` override collapses it to serif body size/weight.
   Re-assert its serif heading scale at higher specificity (PWRC-503 r2). */
.london-careers .vs-promise__title {
  font-weight: 700;
  font-size: clamp(1.75rem, 2.6vw, 2.5rem);
  line-height: 0.971;
  letter-spacing: -0.025em;
}