/*
 Theme Name:   MergersCorp
 Description:  Individuelles Child-Theme der MergersCorp-Website auf Basis von Bricks.
 Author:       cherrycoding
 Template:     bricks
 Version:      1.1
 Text Domain:  bricks
*/

/* ==========================================================================
   MergersCorp — Global Stylesheet
   Static rebuild of the Figma file. One global sheet with CSS variables,
   so it can be copied 1:1 into the Bricks / ACF theme later.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Variables
   -------------------------------------------------------------------------- */
:root {
  /* Color — matches the Figma "Colors" spec page 1:1:
     Фон #040A1D, Подложки #F4F6FA, Текст #FFFFFF / #FFFFFF 50% / #06438E,
     Кнопки #206FD0. --color-navy-2 and the blue hover shades aren't
     distinct Figma tokens, just derived UI states. */
  --color-navy: #040a1d;
  --color-navy-2: #0d1228;
  --color-white: #ffffff;
  --color-text-muted: #a6adc4;
  --color-text-faint: #6f7690;
  --color-blue: #206fd0;
  --color-blue-light: #4f8fe0;
  --color-blue-dark: #17569e;
  --color-border: rgba(255, 255, 255, 0.1);
  /* menu active/hover accent (Figma "Menu open" sidebar) */
  --color-accent: #778ac6;

  /* Typography — confirmed in Figma's own font inspector (not a guess):
     body copy is set in Noto Sans (footer links, Team hero intro), display
     headings in Noto Serif (Team "Team" h1, 84px/500) — not Inter/Playfair
     Display, which the original build assumed. */
  --font-heading: "Noto Serif", Georgia, serif;
  --font-body: "Noto Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --mc-text-xs: 12px;
  --mc-text-sm: 14px;
  --mc-text-base: 16px;
  --mc-text-md: 18px;
  --mc-text-lg: 20px;
  --mc-text-xl: 24px;
  --mc-text-2xl: 32px;
  --mc-text-3xl: 44px;

  /* Fluid type: each hits its exact Figma px value (measured at the
     1920px desktop frame) at a 1920px viewport — 84px/19.2 = 4.375vw, etc
     — and eases down toward the min on narrower screens instead of
     staying pinned at the Figma-desktop size everywhere. */
  --fluid-100: clamp(48px, 5.2083vw, 100px);
  --fluid-84: clamp(40px, 4.375vw, 84px);
  --fluid-60: clamp(32px, 3.125vw, 60px);
  --fluid-48: clamp(28px, 2.5vw, 48px);
  --fluid-35: clamp(22px, 1.8229vw, 35px);
  --fluid-27: clamp(18px, 1.40625vw, 27px);
  --fluid-24: clamp(18px, 1.25vw, 24px);
  --fluid-20: clamp(16px, 1.0417vw, 20px);
  --fluid-18: clamp(15px, 0.9375vw, 18px);
  --fluid-16: clamp(14px, 0.8333vw, 16px);

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  /* Layout
     1920/80 measured directly off the Figma footer frame (node 22:26520,
     1920×1632, side margins 80px both sides — confirmed against multiple
     text nodes' "Links" values, all landing on the 80px grid). */
  --container-width: 1920px;
  /* Fixed 80px side padding matched Figma exactly at the 1920px reference
     frame, but didn't scale down on narrower real-world windows (e.g.
     1366/1440px laptops), eating proportionally more of the content width
     than Figma's 91.7% ratio — made it feel "squeezed" below 1920px.
     clamp() keeps 80px at 1920px and scales down smoothly to ~24px by the
     time the ≤700px breakpoint below takes over with its own fixed 20px. */
  --container-pad: clamp(24px, 4.6vw - 8px, 80px);
  --header-height: 88px;
  --header-row-height: 70px;

  /* Misc */
  --radius-pill: 999px;
  --radius-md: 10px;
  --transition: 200ms ease;

  /* Light sections (e.g. Team list) — everything else on the site is
     dark, this is the one section that flips to a light UI.
     --color-page-bg matches the Figma "Подложки" token (#F4F6FA);
     --color-link matches the Figma dark-blue "Текст" token (#06438E). */
  --color-page-bg: #f4f6fa;
  --color-card-bg: #ffffff;
  --color-filter-bg: #dee4ee;
  --color-row-highlight: #eaeff8;
  --color-ink: #1a1d29;
  --color-ink-muted: #6b7280;
  --color-link: #06438e;
  --color-border-light: #e4e6ec;
}

/* --------------------------------------------------------------------------
   2. Reset
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--color-navy);
  color: var(--color-white);
  font-family: var(--font-body);
  font-size: var(--mc-text-base);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img,
svg {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 400;
  line-height: 1.15;
}

/* --------------------------------------------------------------------------
   3. Layout helpers
   -------------------------------------------------------------------------- */
.container,
/* Bricks injects an inline `.brxe-container { width: 1400px; }` theme-style
   default (same specificity as .container, loads after our stylesheet, so
   it normally wins). The compound selector below is more specific than
   either alone, so OUR width/max-width wins regardless of load order —
   no !important needed. Harmless on the plain-HTML build, which never has
   a brxe-container class to match. */
.container.brxe-container {
  width: 100%;
  max-width: var(--container-width);
  margin-inline: auto;
  padding-inline: var(--container-pad);
  /* Bricks' native Container element is internally display:flex with
     align-items:flex-start by default, which shrinks every direct child
     to its own content width and pins it left instead of letting it span
     the full container — breaks any section whose children (filter bars,
     table rows, etc.) are meant to be full-width. stretch restores normal
     block-layout behavior. No-op in the plain-HTML build, where .container
     is never display:flex to begin with. */
  align-items: stretch;
}

/* Scroll reveal: global, reusable fade-in for headings/body text/cards —
   see js/main.js for the IntersectionObserver that adds `is-visible`.
   Figma review note: use this same subtle reveal on every internal page.
   IMPORTANT: a `.reveal` element is only ever hidden once JS adds
   `is-armed` to it right before observing it — CSS never hides it by
   itself. If main.js fails to load, errors, or is slow, content simply
   stays visible instead of being stuck invisible forever (this was a real
   bug: on a real device the fade-in never fired and the whole hero +
   team cards were permanently blank). */
.reveal.is-armed {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 600ms ease, transform 600ms ease;
}

.reveal.is-armed.is-visible {
  opacity: 1;
  transform: translateY(0);
}

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

/* Global muted-text utility: the trailing half of a two-tone heading
   (e.g. "Guarantee access to the best knowledge, experience & connections
   <span class="is-muted">in every industry</span>") — the muted half is
   simply always this color, no scroll/reveal animation attached. */
.is-muted {
  color: var(--color-text-muted);
}

/* --------------------------------------------------------------------------
   4. Buttons — measured off the Figma "Buttons and interaction" spec frame
   (Main > Buttons and Interaction): 240×58 swatch, 10px radius, NOT a pill;
   44×44 icon box (8px radius) inset 7px from the button edge; bg #206FD0
   default, #2481F2 on hover — same #2481F2 as the icon box itself.
   -------------------------------------------------------------------------- */
.mc-btn {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  padding: 7px 7px 7px 20px;
  border: none;
  box-shadow: none;
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  /* "btn" collides with a generic class Bricks' own frontend CSS ships
     with its own border + box-shadow — explicit none above kills it,
     since our class alone doesn't out-specificity theirs.
     Bricks' own base CSS for .brxe-block forces display:flex (beats our
     inline-flex, same specificity, loads later) — a block-level flex
     element with no width set stretches to fill its flex-row parent
     instead of shrinking to its content, so it has to be pinned here
     explicitly regardless of which display value actually wins. */
  width: fit-content;
  flex-shrink: 0;
}

.mc-btn--primary {
  background: var(--color-blue);
  color: var(--color-white);
  transition: background var(--transition);
}

.mc-btn--primary:hover {
  background: #2481f2;
}

.mc-btn__icon {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 8px;
  background: #2481f2;
  flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   4b. Forms — global field styles, reused by every form on the site (Book a
   Meeting, contact forms, newsletter, …). Figma's "Book a Meeting" reference
   card is a flattened image (not inspectable node-by-node), so these are
   measured proportionally off that screenshot rather than exact Figma px —
   flag for a follow-up pass if Figma later exposes real field components.
   -------------------------------------------------------------------------- */
.form-control {
  display: block;
  width: 100%;
  font: inherit;
  font-size: 18px;
  color: var(--color-ink);
  background: var(--color-card-bg);
  border: 1px solid rgba(11, 17, 38, 0.15);
  border-radius: 16px;
  padding: 24px 28px;
}

.form-control::placeholder {
  color: var(--color-ink-muted);
}

.form-control:focus {
  outline: 2px solid var(--color-blue);
  outline-offset: 1px;
}

select.form-control {
  appearance: none;
  color: var(--color-ink-muted);
  padding-right: 76px;
  background-repeat: no-repeat;
  background-position: right 6px center;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48'%3E%3Crect width='48' height='48' rx='12' fill='%23eef1f5'/%3E%3Cpath d='M16 21l8-6 8 6M16 27l8 6 8-6' stroke='%236b7280' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

textarea.form-control {
  resize: vertical;
}

.form-checkbox {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: var(--mc-text-xs);
  color: var(--color-ink-muted);
  cursor: pointer;
}

.form-checkbox input {
  width: 22px;
  height: 22px;
  margin-top: 2px;
  flex-shrink: 0;
  border-radius: 6px;
  accent-color: var(--color-link);
}

.form-checkbox a {
  color: var(--color-link);
  text-decoration: underline;
}

/* ==========================================================================
   5. Header
   ========================================================================== */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--color-navy);
}

/* ---- Utility bar: flush full-width strip above the nav pill ---- */
.header__utility {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: var(--space-4);
  height: 40px;
  font-size: var(--mc-text-xs);
  font-weight: 500;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.8);
}

/* The static build repeats this flex on the inner .container via an inline
   style="" attribute (it's the only item inside .header__utility, so the
   outer flex above barely does anything — the inner one is what actually
   lines up the links/divider/flag). Bricks has no inline-style field for
   this without a one-off Custom CSS block per element, so it's expressed
   here as a plain descendant selector instead. */
.header__utility .container {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  gap: 16px;
  /* Figma: the utility links end where the pill's CTA ends (pill right
     edge − 20px inset), not at the 1760 container edge */
  max-width: calc(1480px + 2 * var(--container-pad));
  padding-inline: var(--container-pad) calc(var(--container-pad) + 20px);
}

.header__utility a:hover {
  color: var(--color-white);
}

/* Same Bricks default-sizing issue as .mc-btn/.nav__link above — these
   text-basic+tag=a elements shrink their flex-basis down and wrap onto
   multiple lines instead of sizing to their own text unless pinned. The
   two <button> elements (search, language switcher) had the worse version
   of this: Bricks' own block default stretched them to the FULL width of
   the container (over 1000px, matching the container's own inner width),
   shoving the two text links off-screen to the left entirely. */
.header__utility a,
.header__utility button {
  width: fit-content;
  white-space: nowrap;
  flex-shrink: 0;
}

.header__utility-divider {
  width: 1px;
  height: 12px;
  background: var(--color-border);
}

.header__utility-flag {
  width: 20px;
  border-radius: 2px;
}

.header__lang {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
}

/* ---- Nav pill: floating rounded bar, 1480 wide and CENTERED — every
   Figma page frame (Home, Business, About, Newsroom, Press …) has it at
   x227 = (1920 − 1480) / 2 + 7; only the separate "Header & Footer" spec
   frame showed it flush left. ---- */
.header__pill {
  position: relative;
  max-width: 1480px;
  margin-inline: auto;
  background: #10172d;
  border-radius: 15px;
}

/* the open dropdown continues the pill downward (Figma "Menu services":
   one 1480 card, square corners where they meet) */
.header__pill:has(.nav__item:is(:hover, :focus-within) > .nav__dropdown) {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.header__row {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  height: var(--header-row-height);
  padding-inline: 20px; /* Figma: logo x247 / CTA right 1687 in the 227–1707 pill */
}

.logo {
  font-size: var(--mc-text-lg);
  font-weight: 800;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.logo span {
  font-weight: 400;
  color: var(--color-text-muted);
}

/* ---- Primary nav ---- */
.nav {
  flex: 1;
  align-self: stretch;
}

.nav__list {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: var(--space-6);
  height: 100%;
}

.nav__item {
  display: flex;
}

/* full row height, so the pointer can travel from the label into the
   dropdown without leaving the item */
.nav__link {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  font-size: var(--mc-text-md);
  font-weight: 500;
  letter-spacing: -0.04em;
  white-space: nowrap;
}

/* Figma "Line 66": 2px #2481F2 under the open item, on the pill's divider */
.nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: #2481f2;
  transform: scaleX(0);
  transition: transform var(--transition);
}

.nav__link svg {
  width: 12px;
  height: 12px;
  transition: transform var(--transition);
}

.nav__item:is(:hover, :focus-within) .nav__link::after,
.nav__item--active .nav__link::after {
  transform: none;
}

.nav__item:is(:hover, :focus-within) .nav__link svg {
  transform: rotate(180deg);
}

/* ---- Nav dropdown — Figma "Menu Who we are / services / Industries /
   For business / Contacts" (1920): continues the 1480 pill below a 1px
   white-10% divider; equal columns split by 1px white-10% rules; column
   padding 20 / 20 / 50; title Noto Sans 500 20/125 (+5×10 chevron 10px
   after it when it links somewhere), 15px to the text / links; text and
   links 18/125 white 80%, links 35px apart. Opens on hover or keyboard
   focus (pure CSS). Positioned against .header__pill. ---- */
.nav__dropdown {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  background: #10172d;
  border-top: 1px solid var(--color-border);
  border-radius: 0 0 15px 15px;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

.nav__dropdown--cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.nav__dropdown--cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* old Bricks markup (bricks-header.json) still wraps the columns */
.nav__dropdown-grid {
  display: contents;
}

.nav__item:is(:hover, :focus-within) > .nav__dropdown {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}

.nav__dropdown-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 15px;
  min-width: 0;
  padding: 20px 20px 50px;
}

.nav__dropdown-col + .nav__dropdown-col {
  border-left: 1px solid var(--color-border);
}

.nav__dropdown-title,
.menu-overlay__panel-title {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: var(--mc-text-lg);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.04em;
  color: var(--color-white);
}

a.nav__dropdown-title:hover,
a.menu-overlay__panel-title:hover {
  color: var(--color-accent);
}

.nav__dropdown-text,
.menu-overlay__panel-text {
  max-width: 236px;
  margin: 0;
  font-size: var(--mc-text-md);
  line-height: 1.25;
  letter-spacing: -0.04em;
  color: rgba(255, 255, 255, 0.8);
}

.nav__dropdown-links,
.menu-overlay__panel-links {
  display: flex;
  flex-direction: column;
  gap: 12.5px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav__dropdown-links a,
.menu-overlay__panel-links a {
  display: block;
  font-size: var(--mc-text-md);
  line-height: 1.25;
  letter-spacing: -0.04em;
  color: rgba(255, 255, 255, 0.8);
  transition: color var(--transition);
}

.nav__dropdown-links a:hover,
.nav__dropdown-links a:focus-visible,
.menu-overlay__panel-links a:hover,
.menu-overlay__panel-links a:focus-visible {
  color: var(--color-white);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Contacts dropdown: each half's links run in 2 sub-columns of 2 rows */
.nav__dropdown-col--split .nav__dropdown-links {
  display: grid;
  grid-template-rows: repeat(2, auto);
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 12.5px 20px;
  width: 100%;
}

.header__actions {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-5);
}

/* ---- Menu toggle: 3 lines that turn into an X (Daria #11) — the header's
   "Menu" button and the menu's own "× Menu" close button are the same
   component; Figma "× Menu": 18/125 500, icon 10px before the label ---- */
.menu-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--mc-text-md);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.04em;
  color: var(--color-white);
}

.menu-toggle:hover {
  color: var(--color-accent);
}

.menu-toggle__bars {
  position: relative;
  flex-shrink: 0;
  width: 20px;
  height: 14px;
}

.menu-toggle__bars span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  border-radius: 1px;
  background: currentColor;
  transition: transform var(--transition), opacity var(--transition);
}

.menu-toggle__bars span:nth-child(1) { top: 0; }
.menu-toggle__bars span:nth-child(2) { top: 6px; }
.menu-toggle__bars span:nth-child(3) { top: 12px; }

body.menu-open .menu-toggle__bars span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
body.menu-open .menu-toggle__bars span:nth-child(2) { opacity: 0; transform: scaleX(0); }
body.menu-open .menu-toggle__bars span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Small CTA variant — Figma "Menu open": 280×43, icon box 35 */
.mc-btn--sm {
  min-width: 280px;
  gap: var(--space-5);
  padding: 4px 4px 4px 15px;
  font-size: var(--mc-text-base);
}

.mc-btn--sm .mc-btn__icon {
  width: 35px;
  height: 35px;
  border-radius: 6px;
}

/* ==========================================================================
   6. Full-screen menu (Figma "Menu open" ×6, 1920 frame)
   Card 1760×1000 at x80 y40 (= right under the utility bar), radius 15,
   #10172D, page visible around it. Top row 70 (logo x+20, "× Menu" 40px
   before the 280×43 CTA, 20 from the right), 1px white-10% rule. Sidebar
   530 wide (rule at x610): items from 50px below the rule, 30px side
   padding, Noto Sans 500 20/125 -4%, 20px above/below each 1px rule (65
   pitch), 5×10 chevron at the right; active + hover #778AC6. Phones block:
   rule, 55 → labels 18 white 50% → numbers 20 with a 37×25 flag 10px
   before them; Europe column 270px after USA. Panel: 60 from the rule,
   heading Noto Serif 500 60/100 -4%, 50 → columns 265 + 30 gap (wide
   panels 340 + 30), title 20/125 500, 20 → links 18/125 white 80%,
   38 apart (35 in the dense panels).
   Tablet (807/809, 768) + mobile (808/810, 360), ≤1024px: the list of
   sections fills the card; tapping one drills into its panel with
   "← Name" (20/500, mobile 18) + rule on top; panel columns 2-up on
   tablet, 1 on mobile; title 20 / 16, links 16 / 14, 12px apart.
   ========================================================================== */
body.menu-open {
  overflow: hidden;
}

.menu-overlay {
  position: fixed;
  inset: var(--menu-top, 40px) 0 0;
  z-index: 200;
  display: none;
  padding: 0 var(--container-pad) 40px;
  background: rgba(4, 10, 29, 0.6);
}

body.menu-open .menu-overlay {
  display: block;
}

.menu-overlay__card {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  background: #10172d;
  border-radius: 15px;
}

.menu-overlay__row {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  flex-shrink: 0;
  height: 70px;
  padding-inline: 20px;
  border-bottom: 1px solid var(--color-border);
}

.menu-overlay__actions {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 40px;
}

.menu-overlay__body {
  display: grid;
  grid-template-columns: clamp(300px, 27.6042vw, 530px) minmax(0, 1fr);
  flex: 1;
  min-height: 0;
}

.menu-overlay__sidebar {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow-y: auto;
  border-right: 1px solid var(--color-border);
}

.menu-overlay__nav {
  margin: 0;
  padding: 30px 30px 0;
  list-style: none;
}

.menu-overlay__nav li + li {
  border-top: 1px solid var(--color-border);
}

.menu-overlay__nav-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  width: 100%;
  padding: 20px 0;
  font-family: var(--font-body);
  font-size: var(--mc-text-lg);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.04em;
  text-align: left;
  color: var(--color-white);
  transition: color var(--transition);
}

.menu-overlay__nav-item .mc-chevron {
  flex-shrink: 0;
  stroke-width: 1.8;
}

.menu-overlay__nav-item:hover,
.menu-overlay__nav-item:focus-visible,
.menu-overlay__nav-item--active {
  color: var(--color-accent);
}

.menu-overlay__contact {
  display: grid;
  grid-template-columns: 57.45% minmax(0, 1fr);
  gap: 20px 0;
  margin-top: auto;
  padding: 55px 30px 63px;
  border-top: 1px solid var(--color-border);
}

.menu-overlay__contact-label {
  display: block;
  margin-bottom: 12px;
  font-size: var(--mc-text-md);
  line-height: 1.25;
  letter-spacing: -0.04em;
  color: rgba(255, 255, 255, 0.5);
}

.menu-overlay__contact-phone {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--mc-text-lg);
  line-height: 1.25;
  letter-spacing: -0.04em;
  white-space: nowrap;
  color: var(--color-white);
}

.menu-overlay__contact-phone:hover {
  color: var(--color-accent);
}

.menu-overlay__contact-phone img {
  width: 37px;
  height: 25px;
  object-fit: cover;
}

.menu-overlay__panel {
  min-height: 0;
  overflow-y: auto;
  padding: 60px 20px 60px 60px;
}

.menu-overlay__sidebar,
.menu-overlay__panel {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}

.menu-overlay__panel-section {
  display: none;
}

.menu-overlay__panel-section--active {
  display: block;
}

.menu-overlay__back {
  display: none;
}

.menu-overlay__panel-heading {
  margin: 0 0 50px;
  font-family: var(--font-heading);
  font-size: var(--fluid-60);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--color-white);
}

.menu-overlay__panel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, clamp(200px, 13.8021vw, 265px));
  gap: 50px 30px;
  align-items: start;
}

.menu-overlay__panel-grid--wide {
  grid-template-columns: repeat(auto-fill, clamp(240px, 17.7083vw, 340px));
}

.menu-overlay__panel-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
}

.menu-overlay__panel-title {
  margin-bottom: 20px;
}

.menu-overlay__panel-title + .menu-overlay__panel-text {
  margin-top: -5px;
}

.menu-overlay__panel-links {
  gap: 15.5px;
}

.menu-overlay__panel-grid--dense .menu-overlay__panel-links {
  gap: 12.5px;
}

/* ---- Tablet + mobile: list → drill-down ---- */
@media (max-width: 1024px) {
  .menu-overlay {
    padding: 0 30px;
  }

  .menu-overlay__card {
    border-radius: 15px 15px 0 0;
  }

  .menu-overlay__body {
    display: flex;
    flex-direction: column;
  }

  .menu-overlay__sidebar {
    flex: 1;
    border-right: 0;
  }

  .menu-overlay__nav {
    padding: 30px 10px 0;
  }

  .menu-overlay__nav-item {
    padding: 15px 0;
  }

  /* list view has no "current" section (Figma 807/808: all white) */
  .menu-overlay__nav-item--active:not(:hover) {
    color: var(--color-white);
  }

  .menu-overlay__contact {
    display: flex;
    justify-content: space-between;
    padding: 30px 10px;
  }

  .menu-overlay__panel {
    display: none;
    flex: 1;
    padding: 40px 10px;
  }

  .menu-overlay--drill .menu-overlay__sidebar {
    display: none;
  }

  .menu-overlay--drill .menu-overlay__panel {
    display: block;
  }

  .menu-overlay__back {
    display: flex;
    align-items: center;
    gap: 15px;
    width: 100%;
    margin-bottom: 40px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--color-border);
    font-size: var(--mc-text-lg);
    font-weight: 500;
    line-height: 1.25;
    letter-spacing: -0.04em;
    text-align: left;
    color: var(--color-white);
  }

  .menu-overlay__panel-heading {
    display: none;
  }

  .menu-overlay__panel-grid,
  .menu-overlay__panel-grid--wide {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 40px 20px;
  }

  .menu-overlay__panel-title {
    margin-bottom: 20px;
  }

  .menu-overlay__panel-links,
  .menu-overlay__panel-grid--dense .menu-overlay__panel-links {
    gap: 12px;
  }

  .menu-overlay__panel-links a,
  .menu-overlay__panel-text {
    font-size: var(--mc-text-base);
  }
}

@media (max-width: 700px) {
  .menu-overlay {
    padding: 0 20px;
  }

  /* Figma 810: row 39 (card at the pill's top, 32), "← Name" 20 below the
     rule, the first title 23 below its rule */
  .menu-overlay__row {
    height: 40px;
    padding-inline: 10px;
  }

  .menu-overlay__panel {
    padding-top: 18px;
  }

  .menu-overlay__back {
    margin-bottom: 23px;
  }

  .menu-overlay__actions {
    gap: 15px;
  }

  /* Figma 808/810: just the X, and the CTA as a small text button */
  .menu-overlay .menu-toggle__label {
    display: none;
  }

  .menu-overlay .mc-btn--sm {
    min-width: 0;
    padding: 7px 10px;
    font-size: 10px;
  }

  .menu-overlay .mc-btn--sm .mc-btn__icon {
    display: none;
  }

  .menu-overlay__nav-item,
  .menu-overlay__back {
    font-size: var(--mc-text-md);
  }

  .menu-overlay__contact {
    flex-direction: column;
    gap: 20px;
  }

  .menu-overlay__contact-label {
    margin-bottom: 10px;
    font-size: var(--mc-text-sm);
  }

  .menu-overlay__contact-phone {
    font-size: var(--mc-text-base);
  }

  .menu-overlay__panel-grid,
  .menu-overlay__panel-grid--wide {
    grid-template-columns: minmax(0, 1fr);
  }

  .menu-overlay__panel-title {
    font-size: var(--mc-text-base);
  }

  .menu-overlay__panel-links a,
  .menu-overlay__panel-text {
    font-size: var(--mc-text-sm);
  }
}

/* ==========================================================================
   7. Preloader
   ========================================================================== */
/* Figma "Main > Preloader" (1920×1076): #0B1126, logo 430×100 centred,
   30 below it a 580×6 #10172D track (radius 100) with the #2481F2 bar.
   Output on the front page only (inc/mc-menu.php §4, first thing in
   <body>), once per browser session; hidden by main.js on window "load"
   (body.is-loaded). While it is up, the home hero entrance animations wait
   (html.has-preloader, see §22). */
.preloader {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 30px;
  background: #0b1126;
  color: var(--color-white);
  transition: opacity 500ms ease, visibility 500ms ease;
}

.mc-preloader-seen .preloader {
  display: none;
}

.preloader__logo {
  /* text logo ≈ Figma's 430px-wide logo image at 1920 */
  font-size: clamp(32px, 3.0469vw, 58.5px);
  line-height: 1;
}

.preloader__track {
  width: 580px;
  max-width: 70vw;
  height: 6px;
  border-radius: 100px;
  background: #10172d;
  overflow: hidden;
}

.preloader__bar {
  height: 100%;
  width: 0%;
  border-radius: 100px;
  background: #2481f2;
  animation: preloader-fill 1.8s ease forwards;
}

@keyframes preloader-fill {
  0%   { width: 0%; }
  70%  { width: 85%; }
  100% { width: 85%; }
}

body.is-loaded .preloader {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

body.is-loaded .preloader__bar {
  animation: none;
  width: 100%;
  transition: width 300ms ease;
}

/* ==========================================================================
   8. Footer
   ========================================================================== */
.footer {
  position: relative;
  background: var(--color-navy-2);
  padding-block: 80px var(--space-6);
  overflow: hidden;
}

.footer__bg {
  position: absolute;
  right: 0;
  bottom: 0;
  width: min(1280px, 70%);
  height: auto;
  pointer-events: none;
  /* the PNG is a flat rectangle (no alpha) — fade its top/left edges into
     the footer background instead of showing a hard box outline */
  -webkit-mask-image: linear-gradient(135deg, transparent 0%, transparent 12%, black 45%);
  mask-image: linear-gradient(135deg, transparent 0%, transparent 12%, black 45%);
}

.footer__inner {
  position: relative;
}

.footer__logo {
  font-size: var(--mc-text-lg);
  font-weight: 800;
  margin-bottom: 40px;
  display: inline-block;
}

.footer__logo span {
  font-weight: 400;
  color: var(--color-text-muted);
}

/* 6 equal-width columns; 275px column + 22px gap measured off the Figma
   footer frame (column start-x deltas are a flat 297px across all 6
   columns: 80, 377, 673, 970, 1267, 1564 — within a 1760px content area) */
.footer__columns {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 22px;
}

.footer__col-group {
  display: flex;
  flex-direction: column;
  gap: 56px;
}

.footer__col h4,
.footer__contact-links h4 {
  /* footer headings are Noto Sans, not the site's Noto Serif h1-h4 default */
  font-family: var(--font-body);
  font-size: var(--fluid-20);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.04em;
  color: var(--color-white);
  margin-bottom: 20px;
}

.footer__col ul {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.footer__col a {
  font-size: var(--fluid-18);
  line-height: 1.25;
  letter-spacing: -0.04em;
  color: rgba(255, 255, 255, 0.8);
}

.footer__col a:hover {
  color: var(--color-white);
}

.footer__contact-phone {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 20px;
}

.footer__contact-phone img {
  width: 22px;
  border-radius: 2px;
}

.footer__contact-links {
  margin-top: 15px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer__contact-links a {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fluid-20);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.04em;
  text-transform: uppercase;
}

/* solid white 30px circle with a dark icon glyph, not an outlined badge */
.footer__contact-links svg {
  width: 30px;
  height: 30px;
  padding: 8px;
  box-sizing: border-box;
  border-radius: 50%;
  background: var(--color-white);
  color: var(--color-navy);
  flex-shrink: 0;
}

.footer__divider {
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.3);
  margin-block: 40px;
}

.footer__bottom-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  row-gap: var(--space-3);
  font-size: var(--fluid-16);
  line-height: 1.25;
  letter-spacing: -0.04em;
  color: var(--color-white);
}

.footer__bottom-row a:hover {
  text-decoration: underline;
}

.footer__social {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-white);
  font-weight: 500;
}

.footer__address {
  margin-top: 40px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--space-5);
  font-size: var(--fluid-18);
  line-height: 1.25;
  letter-spacing: -0.04em;
  color: rgba(255, 255, 255, 0.8);
}

.footer__address strong {
  display: block;
  margin-top: var(--space-1);
  font-size: var(--fluid-20);
  color: var(--color-white);
  font-weight: 500;
}

.footer__legal {
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  font-size: var(--fluid-16);
  line-height: 1.25;
  letter-spacing: -0.04em;
  color: rgba(255, 255, 255, 0.5);
}

.footer__legal a {
  text-decoration: underline;
}

/* ==========================================================================
   9. Page hero (inner pages: breadcrumb + heading + intro text)
   ========================================================================== */
/* Figma (Contacts + "Countrires line", 1920 frame): header bottom y109 →
   breadcrumb y150 (41) → title y243 (70 below the 23px crumb) → intro
   (30 below the 84px title) → light panel 100 below the intro. The panel
   overlaps the hero by 30px (.page-panel / .country-archive margin-top),
   hence 130 bottom padding. Fluid: exact at 1920, eased below. */
.page-hero {
  background: var(--color-navy);
  padding-block: clamp(24px, 2.1354vw, 41px) clamp(80px, 6.7708vw, 130px);
  text-align: center;
}

/* Bricks' Container element is internally display:flex with
   align-items:flex-start, which shrinks each child (h1, breadcrumb) to its
   own content width and pins it left — our inherited text-align:center
   above has no effect on that. align-items:center here re-centers every
   child as a block regardless of Bricks' own flex defaults. Plain-HTML
   build is unaffected since .container there is a normal block element. */
.page-hero .container {
  align-items: center;
}

.breadcrumb {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: var(--space-2);
  /* 18px/Noto Sans 400/-4%, color #FFFFFF at 50% — confirmed directly in
     Figma's font inspector on "Team detail page v1"; --mc-text-sm (14px) and
     --color-text-muted were both unverified guesses. */
  font-size: var(--fluid-18);
  letter-spacing: -0.04em;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: var(--space-6);
}

/* inner-page hero: 70px crumb → title (Figma); detail heroes keep their own */
.page-hero .breadcrumb {
  margin-bottom: clamp(32px, 3.6458vw, 70px);
}

.breadcrumb a:hover {
  color: var(--color-white);
}

.breadcrumb .is-current {
  color: var(--color-white);
}

.page-hero h1 {
  /* 84px/500/100%/-4% confirmed directly in Figma's font inspector on the
     Team page hero — --mc-text-3xl (44px) was an unverified guess */
  font-size: var(--fluid-84);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.04em;
  margin-bottom: clamp(20px, 1.5625vw, 30px);
}

.page-hero__intro {
  max-width: 600px;
  margin: 0 auto; /* no default <p> margin — keeps HTML and Bricks identical */
  font-size: var(--fluid-20);
  line-height: 1.25;
  letter-spacing: -0.04em;
  color: rgba(255, 255, 255, 0.8);
}

/* ==========================================================================
   10. Team list
   ========================================================================== */
.team-section {
  background: var(--color-page-bg);
  color: var(--color-ink);
  padding-block: var(--space-9) var(--space-9);
}

.team-filters {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-5);
  background: rgba(6, 67, 142, 0.1);
  border-radius: var(--radius-md);
  padding: 20px;
  margin-bottom: var(--space-6);
}

.team-search {
  flex: 1;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 30px;
  height: 60px;
  background: var(--color-card-bg);
  border-radius: var(--radius-md);
  padding-inline: 20px;
  color: var(--color-ink-muted);
}

.team-search input {
  border: 0;
  outline: 0;
  background: none;
  font: inherit;
  color: var(--color-ink);
  width: 100%;
}

/* Bricks' native Filter-Search element renders its own wrapper class
   (.brxe-filter-search) instead of our .team-search — styled directly so
   it matches without needing to add our class via the Attributes panel.
   Measured against the Figma "Team filer" frame (Frame 121): 60px tall,
   10px radius, 1px border #10172D @10%, 20px gap, 20px inline padding. */
.team-filters .brxe-filter-search {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 20px;
  height: 60px;
  background: var(--color-card-bg);
  border: 1px solid rgba(16, 23, 45, 0.1);
  border-radius: var(--radius-md);
  padding-inline: 20px;
}

.team-filters .brxe-filter-search::before {
  content: "";
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  background: rgba(16, 23, 45, 0.5);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E")
    center / 18px 18px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E")
    center / 18px 18px no-repeat;
}

.team-filters .brxe-filter-search input {
  border: 0;
  outline: 0;
  background: none;
  font: inherit;
  font-size: 18px;
  letter-spacing: -0.04em;
  color: var(--color-ink);
  width: 100%;
}

.team-filters .brxe-filter-search input::placeholder {
  color: rgba(16, 23, 45, 0.5);
}

.team-filters select {
  appearance: none;
  font: inherit;
  height: 60px;
  background: var(--color-card-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%236b7280' stroke-width='1.5' fill='none'/%3E%3C/svg%3E") right 20px center no-repeat;
  color: var(--color-ink);
  border: 0;
  border-radius: var(--radius-md);
  padding: 0 40px 0 20px;
  min-width: 160px;
}

/* Country/Position filter pills — measured against Figma "Frame 125":
   180×60px, white, 10px radius, 15px/15px inline padding, 10px gap between
   label and chevron, no border, 18px text at full opacity (not muted, this
   one is NOT dimmed like the search placeholder is). Applies to whichever
   native Bricks filter element replaces the old static placeholders —
   add this class to it via the Attributes panel. */
.team-filters .team-filter-pill {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 180px;
  height: 60px;
  background: var(--color-card-bg);
  border-radius: var(--radius-md);
  padding-inline: 15px;
  font-size: 18px;
  letter-spacing: -0.04em;
  color: var(--color-ink);
}

.team-view-toggle {
  display: flex;
  flex-direction: row;
  gap: var(--space-2);
}

/* Selector also matches by class (not just the `button` tag) since Bricks'
   icon element doesn't reliably let you force a custom HTML tag — the JS
   in main.js toggles `aria-current` and `.team-list`'s view class the same
   way regardless of which concrete tag each build renders. */
.team-view-toggle button,
.team-view-toggle__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  color: var(--color-blue); /* Daria #15: same colour, inactive at 50 % */
  opacity: 0.5;
  cursor: pointer;
}

.team-view-toggle button[aria-current="true"],
.team-view-toggle__btn[aria-current="true"] {
  color: var(--color-blue);
  opacity: 1;
}

.team-table__head {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 0.8fr 48px;
  gap: var(--space-4);
  padding-inline: 20px;
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-border-light);
  /* Figma: Noto Sans 400, 18px, -4% letter-spacing, #0B1126 @ 30% —
     --mc-text-sm (14px) and --color-ink-muted (#6b7280) were both wrong. */
  color: rgba(11, 17, 38, 0.3);
  font-size: 18px;
  letter-spacing: -0.04em;
}

.team-row {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 0.8fr 48px;
  align-items: center;
  gap: var(--space-4);
  min-height: 158px;
  background: var(--color-card-bg);
  border-radius: 20px;
  padding-inline: 20px;
  margin-top: 15px;
  font-size: var(--fluid-20);
  transition: background var(--transition);
}

.team-row:hover {
  background: rgba(32, 111, 208, 0.05);
}

.team-row__person {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 30px;
}

.team-row__photo {
  width: 118px;
  height: 118px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(16, 23, 45, 0.1);
  object-fit: cover;
  flex-shrink: 0;
}

.team-row__name {
  color: var(--color-link);
  font-weight: 400;
}

.team-row__name:hover {
  text-decoration: underline;
}

.team-row > div,
.team-row__location span {
  color: rgba(11, 17, 38, 0.8);
}

.team-row__location {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
}

.team-row__location img {
  width: 32px;
  border-radius: 2px;
}

.team-row__linkedin {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 5px;
  background: #2481f2;
  color: var(--color-white);
}

.team-row__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 8px;
  background: #2481f2;
  color: var(--color-white);
  opacity: 0;
  transition: opacity var(--transition);
}

.team-row:hover .team-row__arrow {
  opacity: 1;
}

/* ── Grid / List view switch (desktop + tablet only — mobile always uses
   the single-column card layout below, see the ≤900px block, and the
   toggle itself is hidden there since there's no room to choose). Default
   markup/CSS above is the "list" view; `.team-list.is-grid-view` — added
   by main.js when a view-toggle button is clicked, persisted in
   localStorage — switches to a multi-column card grid instead. No Figma
   spec for this exists yet; styled to match the rest of the page's
   tokens (radius, card bg, color-link) — treat as a placeholder design,
   adjust once there's something to match pixel-for-pixel. ── */
/* min-width guard: grid-view's classes are more specific than the ≤900px
   mobile card rules below, so without this they'd win on mobile too and
   fight with the (always-on, toggle-independent) mobile card layout. */
@media (min-width: 901px) {
  .team-list.is-grid-view {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--space-5);
  }

  .team-list.is-grid-view .team-table__head {
    display: none;
  }

  .team-list.is-grid-view .team-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    min-height: 0;
    margin-top: 0;
    padding: var(--space-5) var(--space-4);
  }

  .team-list.is-grid-view .team-row__person {
    flex-direction: column;
    gap: var(--space-4);
  }

  .team-list.is-grid-view .team-row__photo {
    width: 140px;
    height: 140px;
  }

  .team-list.is-grid-view .team-row__position {
    text-align: center;
  }

  .team-list.is-grid-view .team-row__location {
    justify-content: center;
    margin-top: var(--space-2);
  }

  .team-list.is-grid-view .team-row__linkedin {
    margin-top: var(--space-3);
  }

  .team-list.is-grid-view .team-row__arrow {
    display: none;
  }
}

/* Tablet + mobile (≤900px, Figma frames "771"/"772"): the desktop table
   row breaks down at tablet widths — the 1.6fr/1fr/1fr/0.8fr columns get too
   narrow and the location text collides with the LinkedIn icon — so the
   2-column card layout (tall photo left, name/position/LinkedIn/location
   stacked right) is used from 900px down, not just below 640px.
   `.team-row__person` is unwrapped via display:contents so its children
   (photo, name) become direct grid items alongside their siblings, placed
   explicitly instead of relying on source order. The card's own metrics
   were only pixel-measured against the 360px "772" frame; 641–900px reuses
   them rather than a separately-measured "771" card spec. */
@media (max-width: 900px) {
  .team-row__arrow {
    display: none;
  }

  .team-filters {
    flex-wrap: wrap;
    padding: 10px;
  }

  .team-search {
    flex-basis: 100%;
    order: 1;
  }

  .team-filters select {
    flex: 1;
    min-width: 0;
    order: 2;
  }

  .team-view-toggle {
    display: none;
  }

  .team-table__head {
    display: none;
  }

  .team-row {
    display: grid;
    grid-template-columns: 118px 1fr;
    grid-template-rows: auto auto auto auto;
    column-gap: 10px;
    row-gap: 0;
    min-height: 0;
    padding: 10px;
    border: 1px solid rgba(16, 23, 45, 0.1);
  }

  .team-row__person {
    display: contents;
  }

  .team-row__photo {
    grid-column: 1;
    grid-row: 1 / 5;
    width: 118px;
    height: 118px;
  }

  .team-row__name {
    grid-column: 2;
    grid-row: 1;
    font-size: 14px;
  }

  .team-row__position {
    grid-column: 2;
    grid-row: 2;
    margin-top: 5px;
    font-size: 12px;
  }

  .team-row__linkedin {
    grid-column: 2;
    grid-row: 3;
    margin-top: 15px;
    width: 20px;
    height: 20px;
    border-radius: 4px;
  }

  .team-row__location {
    grid-column: 2;
    grid-row: 4;
    margin-top: 30px;
    font-size: 12px;
  }

  .team-row__location img {
    width: 16px;
  }
}

/* 36px/14px confirmed on the Figma "772" (360px) mobile frame — the fluid
   clamp floors (40px/16px) were close but not exact at this width */
@media (max-width: 640px) {
  .page-hero h1 {
    font-size: 36px;
  }

  .page-hero__intro {
    font-size: 14px;
  }
}

@media (max-width: 1100px) {
  .footer__columns {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 700px) {
  :root {
    --container-pad: 20px;
  }

  .nav {
    display: none;
  }

  .footer__columns {
    grid-template-columns: repeat(2, 1fr);
  }

  .footer__address {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ==========================================================================
   10b. Team profile (detail page) — measured off Figma "Team detail page v1"
   ========================================================================== */
.team-profile-hero {
  position: relative;
  background: var(--color-navy);
  padding-block: var(--space-7) 80px;
  overflow: hidden;
}

.team-profile-hero__inner {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-7);
  margin-top: var(--space-7);
}

.team-profile-hero__location {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}

.team-profile-hero__location img {
  width: 32px;
  border-radius: 2px;
}

.team-profile-hero__info h1 {
  font-size: var(--fluid-84);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.04em;
}

.team-profile-hero__role {
  margin-top: 15px;
  font-size: var(--fluid-27);
  color: rgba(255, 255, 255, 0.8);
}

.team-profile-hero__divider {
  border: 0;
  border-top: 1px solid var(--color-border);
  margin-block: var(--space-6);
  max-width: 460px;
}

.team-profile-hero__contacts {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 36px 32px;
}

.team-profile-hero__contacts a,
.team-profile-hero__linkedin {
  display: flex;
  flex-direction: row;
  flex: 0 0 auto !important;
  width: auto !important;
  align-items: center;
  gap: 10px;
  font-size: var(--fluid-20);
}

.team-profile-hero__linkedin {
  margin-top: var(--space-5);
}

/* Figma (node 22-20076, hero "Contact By Email / Contact By Phone / LinkedIn"
   block) puts Email+Phone on one row and LinkedIn alone on a 2nd row below,
   each icon a 32x32 badge — not bare icon-font glyphs in a single row like
   the live Bricks markup has (all 3 as siblings of .team-profile-hero__contacts,
   no separate row wrapper). Rather than restructure the Bricks template, the
   wrap is done in CSS: the container wraps, and each icon's `a` gets a flex
   `order` keyed off which icon it contains (:has, not DOM position) so the
   row always reads Email, Phone, LinkedIn regardless of the live DOM order
   (currently Email, LinkedIn, Phone) — and the LinkedIn link gets
   flex-basis:100% to push itself onto its own line. */
.team-profile-hero__contacts a:has(i.ion-ios-mail) {
  order: 1;
}

.team-profile-hero__contacts a:has(i.ion-ios-call) {
  order: 2;
}

.team-profile-hero__contacts a:has(i.ion-logo-linkedin) {
  order: 3;
  flex-basis: 100% !important;
}

/* Bricks icon elements render via an icon-font glyph (Ionicons <i
   class="brxe-icon">), which isn't reliably centered in its own em-box and
   whose Bricks "Size" field had been left at 60px (3x the Figma 32px badge)
   from early LinkedIn-visibility debugging. Hidden here and swapped for the
   exact Figma badge + icon as a background-image instead, same approach as
   .team-profile-contact__icons. Figma's hero badges differ from the Profile
   card's: Email/Phone are a white 32x32 box (6px radius) with a small dark
   navy icon inside; LinkedIn is the same blue linkedin-bug badge as the
   Profile card, just at 32px instead of 40px. */
.team-profile-hero__contacts a i.brxe-icon {
  font-size: 0 !important;
  display: block !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 6px !important;
  flex-shrink: 0 !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
}

.team-profile-hero__contacts a i.brxe-icon::before {
  content: none !important;
}

.team-profile-hero__contacts a i.ion-ios-mail,
.team-profile-hero__contacts a i.ion-ios-call {
  background-color: #ffffff !important;
  background-size: 16px 16px !important;
}

.team-profile-hero__contacts a i.ion-ios-mail {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23041128' stroke-width='2'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='M22 6l-10 7L2 6'/%3E%3C/svg%3E");
}

.team-profile-hero__contacts a i.ion-ios-call {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23041128' stroke-width='2'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.127.96.362 1.903.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.907.338 1.85.573 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E");
}

/* Exact "in" glyph extracted from Figma's own linkedin-bug-blue component
   (node 22-20304, "Copy as SVG"), not a generic/FontAwesome LinkedIn mark —
   the previous generic path's letterforms visibly didn't match Figma's
   when the user zoomed in. viewBox stays 0 0 40 40 (Figma's own badge
   canvas) so the three sub-paths' proportions are reproduced exactly. */
.team-profile-hero__contacts a i.ion-logo-linkedin {
  background-color: #2481f2 !important;
  background-size: 32px 32px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 40 40' fill='white'%3E%3Cpath d='M11.7647 15.2941H5.88235V34.1176H11.7647V15.2941Z'/%3E%3Cpath d='M12.2941 8.82353C12.2972 8.37858 12.2126 7.93737 12.0452 7.5251C11.8778 7.11284 11.6308 6.73758 11.3184 6.42077C11.0059 6.10396 10.6342 5.85179 10.2243 5.67866C9.81435 5.50554 9.37436 5.41484 8.92941 5.41176H8.82353C7.91867 5.41176 7.05088 5.77122 6.41105 6.41105C5.77122 7.05088 5.41176 7.91867 5.41176 8.82353C5.41176 9.72839 5.77122 10.5962 6.41105 11.236C7.05088 11.8758 7.91867 12.2353 8.82353 12.2353C9.26851 12.2462 9.71129 12.1694 10.1266 12.0092C10.5418 11.8489 10.9215 11.6084 11.2438 11.3014C11.5661 10.9944 11.8247 10.6269 12.005 10.2199C12.1852 9.81293 12.2834 9.3744 12.2941 8.92941V8.82353Z'/%3E%3Cpath d='M34.1176 22.6824C34.1176 17.0235 30.5176 14.8235 26.9412 14.8235C25.7702 14.7649 24.6042 15.0143 23.5597 15.5469C22.5152 16.0795 21.6285 16.8766 20.9882 17.8588H20.8235V15.2941H15.2941V34.1176H21.1765V24.1059C21.0914 23.0805 21.4144 22.063 22.0753 21.2744C22.7361 20.4858 23.6814 19.9898 24.7059 19.8941H24.9294C26.8 19.8941 28.1882 21.0706 28.1882 24.0353V34.1176H34.0706L34.1176 22.6824Z'/%3E%3C/svg%3E");
}

.team-profile-hero__photo {
  width: 509px;
  height: 509px;
  border-radius: 30px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  object-fit: cover;
  flex-shrink: 0;
}

.team-profile-section {
  background: var(--color-page-bg);
  color: var(--color-ink);
  padding-block: var(--space-9);
}

.team-profile-grid {
  display: grid;
  grid-template-columns: 1170fr 570fr;
  gap: 20px;
  align-items: start;
}

.team-profile-card,
.team-profile-form {
  background: var(--color-card-bg);
  border-radius: 30px;
  padding: 40px;
}

.team-profile-form {
  box-shadow: 0 4px 30px rgba(4, 10, 29, 0.1);
}

.team-profile-card h2,
.team-profile-form h2 {
  font-size: var(--fluid-35);
  font-weight: 500;
  color: var(--color-link);
  margin-bottom: var(--space-5);
}

.team-profile-card p {
  font-size: var(--fluid-18);
  line-height: 1.35;
  letter-spacing: -0.04em;
  color: rgba(11, 17, 38, 0.8);
}

.team-profile-card p + p {
  margin-top: var(--space-5);
}

.team-profile-facts {
  margin-top: var(--space-7);
  display: flex;
  flex-direction: column;
}

.team-profile-facts > div {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: var(--space-5);
  padding-block: var(--space-4);
  border-bottom: 1px solid var(--color-border-light);
}

/* Class selectors added alongside the tag selectors: Bricks' dt/dd tag
   overrides don't survive paste reliably, so the Bricks build uses plain
   elements with these classes instead of real <dt>/<dd> tags. */
.team-profile-facts dt,
.team-profile-facts__dt {
  font-size: var(--fluid-18);
  color: var(--color-ink-muted);
}

.team-profile-facts dd,
.team-profile-facts__dd {
  margin: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--fluid-18);
  color: var(--color-ink);
}

.team-profile-facts dd img {
  width: 24px;
  border-radius: 2px;
}

.team-profile-card__contact-heading {
  margin-top: var(--space-7);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-border-light);
}

.team-profile-contact {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr auto;
  gap: var(--space-5);
  align-items: end;
}

.team-profile-contact__label {
  display: block;
  font-size: var(--fluid-16);
  color: var(--color-ink-muted);
  margin-bottom: var(--space-2);
}

.team-profile-contact p,
.team-profile-contact__value {
  font-size: var(--fluid-18);
  color: var(--color-ink);
  line-height: 1.35;
}

/* mc_country_display() (functions.php) output — flag <img class="country-flag">
   + <span class="country-name"> wrapped in <span class="country-display">.
   Inherits font-size/color from whatever row it's dropped into (Facts
   "Location" value, Team Archive location column, hero location line) —
   this block only sets the flag+text layout, not typography. */
.country-display {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.country-flag {
  display: block;
  border-radius: 2px;
}

.team-profile-contact__icons {
  display: flex;
  flex-direction: row;
  gap: var(--space-3);
}

.team-profile-contact__icons a {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 5px;
  background: #2481f2;
  color: var(--color-white);
}

/* The Bricks Icon elements inside .team-profile-contact__icons render via an
   icon-font glyph (Ionicons <i class="brxe-icon">, content drawn with
   ::before + font-family:Ionicons). Font-glyph icons are not reliably
   centered in their own em-box (varies per glyph — the phone/envelope
   glyphs visibly sit toward the top-left of their box, confirmed by user
   screenshot) and this doesn't depend on font-loading/caching, it's just
   how these particular glyphs are drawn. team-detail.html never had this
   problem because it uses inline SVG instead of an icon font. Rather than
   rebuild these as raw SVG elements in Bricks (blocked: WP won't allow SVG
   media uploads, and Bricks' Code-element PHP execution is disabled on
   this install), the font glyph is hidden here and swapped for the exact
   same SVG paths as background-image — reliably centered via
   background-position, no font metrics involved. */
.team-profile-contact__icons a i.brxe-icon {
  font-size: 0 !important;
  display: block !important;
  width: 18px !important;
  height: 18px !important;
  flex-shrink: 0 !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
}

.team-profile-contact__icons a i.brxe-icon::before {
  content: none !important;
}

.team-profile-contact__icons a i.ion-ios-mail {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='M22 6l-10 7L2 6'/%3E%3C/svg%3E");
}

.team-profile-contact__icons a i.ion-ios-call {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.127.96.362 1.903.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.907.338 1.85.573 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E");
}

/* Exact "in" glyph extracted from Figma's own linkedin-bug-blue component
   (node 22-20304, "Copy as SVG"), not a generic/FontAwesome LinkedIn mark —
   see matching comment on .team-profile-hero__contacts a i.ion-logo-linkedin. */
.team-profile-contact__icons a i.ion-logo-linkedin {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 40 40' fill='white'%3E%3Cpath d='M11.7647 15.2941H5.88235V34.1176H11.7647V15.2941Z'/%3E%3Cpath d='M12.2941 8.82353C12.2972 8.37858 12.2126 7.93737 12.0452 7.5251C11.8778 7.11284 11.6308 6.73758 11.3184 6.42077C11.0059 6.10396 10.6342 5.85179 10.2243 5.67866C9.81435 5.50554 9.37436 5.41484 8.92941 5.41176H8.82353C7.91867 5.41176 7.05088 5.77122 6.41105 6.41105C5.77122 7.05088 5.41176 7.91867 5.41176 8.82353C5.41176 9.72839 5.77122 10.5962 6.41105 11.236C7.05088 11.8758 7.91867 12.2353 8.82353 12.2353C9.26851 12.2462 9.71129 12.1694 10.1266 12.0092C10.5418 11.8489 10.9215 11.6084 11.2438 11.3014C11.5661 10.9944 11.8247 10.6269 12.005 10.2199C12.1852 9.81293 12.2834 9.3744 12.2941 8.92941V8.82353Z'/%3E%3Cpath d='M34.1176 22.6824C34.1176 17.0235 30.5176 14.8235 26.9412 14.8235C25.7702 14.7649 24.6042 15.0143 23.5597 15.5469C22.5152 16.0795 21.6285 16.8766 20.9882 17.8588H20.8235V15.2941H15.2941V34.1176H21.1765V24.1059C21.0914 23.0805 21.4144 22.063 22.0753 21.2744C22.7361 20.4858 23.6814 19.9898 24.7059 19.8941H24.9294C26.8 19.8941 28.1882 21.0706 28.1882 24.0353V34.1176H34.0706L34.1176 22.6824Z'/%3E%3C/svg%3E");
}

/* mc_fax_tax_row_html() (inc/mc-countries.php) output — same label/value
   typography as .team-profile-contact__label / p above, just a different
   class pair since this one's generated server-side instead of hand-built
   markup. Whole row is omitted by PHP when both ACF fields are empty. */
.contact-fax-tax__label {
  display: block;
  font-size: var(--fluid-16);
  color: var(--color-ink-muted);
  margin-bottom: var(--space-2);
}

.contact-fax-tax__value {
  display: block;
  font-size: var(--fluid-18);
  color: var(--color-ink);
  line-height: 1.35;
}

.team-profile-form form {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.team-profile-form .mc-btn {
  width: 100%;
  margin-top: var(--space-2);
}

@media (max-width: 900px) {
  .team-profile-hero__inner {
    flex-direction: column;
    align-items: flex-start;
  }

  .team-profile-hero__photo {
    width: 100%;
    height: auto;
    max-width: 400px;
  }

  .team-profile-hero__info h1 {
    font-size: var(--mc-text-3xl);
  }

  .team-profile-grid {
    grid-template-columns: 1fr;
  }

  .team-profile-facts > div {
    grid-template-columns: 1fr;
    gap: var(--space-2);
  }

  .team-profile-contact {
    grid-template-columns: 1fr;
  }

  .team-profile-contact__icons {
    grid-column: 1;
  }
}

/* ==========================================================================
   11. Industries (archive + detail)
   Figma: "Final" page > section "Industries" > frame "Industries"
   (node 22:6795, 1920×6757). Category data (names + the full sub-tag list
   per category) is sourced from footer.html's own "Industries" column,
   which already enumerates all 28 sub-items grouped exactly as the 4
   Figma category rows group them — not re-typed from scratch, so the
   category↔sub-tag mapping can't drift from the footer.
   ========================================================================== */
.industries-section {
  background: var(--color-page-bg);
  color: var(--color-ink);
  padding-block: var(--space-9);
}

.industries-toolbar {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-5);
  background: rgba(6, 67, 142, 0.05);
  border-radius: var(--radius-md);
  height: 60px;
  padding-inline: 20px;
  margin-bottom: var(--space-6);
}

.industries-search {
  flex: 1;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 16px;
  color: rgba(16, 23, 45, 0.5);
}

.industries-search input {
  border: 0;
  outline: 0;
  background: none;
  font: inherit;
  font-size: 18px;
  letter-spacing: -0.04em;
  color: var(--color-ink);
  width: 100%;
}

.industries-search input::placeholder {
  color: rgba(16, 23, 45, 0.5);
}

.industries-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

/* 1760×690 measured directly off a row card in Figma (node 22:6802,
   "Rectangle 303"). The project's --container-width/--container-pad
   already reach that same 1760px content width at the 1920px reference
   frame (1920 − 2×80 − ... ), so no extra fixed width is set here — the
   card simply fills .container like every other full-width block. */
.industry-row {
  display: flex;
  flex-direction: row;
  background: var(--color-card-bg);
  border-radius: 20px;
  box-shadow: 0 4px 40px rgba(0, 0, 0, 0.05);
  overflow: hidden;
}

/* 553×610 photo, 20px radius — Figma "Rectangle 301" on the same row. */
.industry-row__photo {
  width: 553px;
  height: 610px;
  flex-shrink: 0;
  object-fit: cover;
  border-radius: 20px;
  margin: 20px;
}

.industry-row__content {
  flex: 1;
  padding: 60px 60px 60px 20px;
  display: flex;
  flex-direction: column;
}

/* "01 Technology & Digital" is one text node in Figma (48px/Noto Serif
   500/100%/-4%) with the number styled as a separate muted span inside
   it — reproduced here the same way rather than as two elements. */
.industry-row__content h2 {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 48px;
  line-height: 1;
  letter-spacing: -0.04em;
  margin-bottom: var(--space-5);
}

.industry-row__number {
  display: block;
  color: var(--color-text-faint);
  margin-bottom: var(--space-2);
}

.industry-row__content > p {
  font-size: var(--fluid-18);
  letter-spacing: -0.04em;
  color: rgba(11, 17, 38, 0.6);
  padding-bottom: var(--space-6);
  border-bottom: 1px solid rgba(16, 23, 45, 0.1);
  margin-bottom: var(--space-6);
}

.industry-row__tags {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 var(--space-6);
  margin-top: auto;
}

.industry-row__tags a {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-block: var(--space-4);
  border-bottom: 1px solid rgba(16, 23, 45, 0.1);
  color: var(--color-link);
  font-size: var(--fluid-18);
  letter-spacing: -0.04em;
  transition: opacity var(--transition);
}

/* Figma "Buttons and interaction" spec page: a plain text link (its
   --color-link example, "Businesses") dims on hover rather than changing
   color/underlining — opposite of the dark-background nav/footer links
   elsewhere, which brighten on hover (each separately confirmed against
   Figma already, not touched here). */
.industry-row__tags a:hover {
  opacity: 0.5;
}

.industry-row__tags a svg {
  flex-shrink: 0;
  color: var(--color-link);
}

@media (max-width: 900px) {
  .industry-row {
    flex-direction: column;
  }

  .industry-row__photo {
    width: auto;
    height: 280px;
  }

  .industry-row__content {
    padding: var(--space-6);
  }

  .industry-row__tags {
    grid-template-columns: 1fr;
  }
}

/* ---- Industry detail page: hero (name + description, same .page-hero
   this project already uses for Team/Industries archive heroes) followed
   by the full sub-tag list for that one category, laid out as a card
   grid instead of the archive row's 2-column link list — the single-item
   page has room to give each sub-tag its own clickable tile. ---- */
.industry-detail-section {
  background: var(--color-page-bg);
  color: var(--color-ink);
  padding-block: var(--space-9);
}

.industry-detail__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--space-5);
}

.industry-detail__grid a {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  background: var(--color-card-bg);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  color: var(--color-link);
  font-size: var(--fluid-20);
  letter-spacing: -0.04em;
  box-shadow: 0 4px 30px rgba(4, 10, 29, 0.05);
  transition: box-shadow var(--transition);
}

.industry-detail__grid a:hover {
  box-shadow: 0 4px 30px rgba(4, 10, 29, 0.12);
}

.industry-detail__grid a svg {
  flex-shrink: 0;
}

/* ==========================================================================
   Services archive + detail — "exactly like Figma" per node 22-14307
   ("Services v2") and the "Deatail page (Services + Industries)" template
   frame (shared by both Services and Industries — see service-detail.html
   / industry-detail.html for how the fields differ per post type).
   ========================================================================== */

/* ---- Two-tone hero heading reuse: .page-hero only ever had a single
   solid h1 before (team.html's "Team") — the Services archive hero uses
   the same solid-lead + muted-tail split as the home sections, so support
   is added generically here rather than duplicating .page-hero. */
.page-hero h1 .is-muted {
  color: var(--color-text-muted);
}

.page-hero--compact {
  padding-bottom: var(--space-7);
}

/* ---- Archive: search + grid/list toggle bar. Figma's own side margin on
   this row measured 100px (Links), 20px off the page's usual 80px grid —
   treated as an authoring slip and aligned to the standard .container so
   the bar doesn't visually hang further right than the card grid below
   it, which measured the expected 80px. */
.service-filters {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-6);
}

.service-search {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 30px;
  width: 353px;
  height: 60px;
  background: var(--color-card-bg);
  border: 1px solid rgba(16, 23, 45, 0.1);
  border-radius: var(--radius-md);
  padding-inline: 20px;
  color: var(--color-ink-muted);
  /* explicit: on the live site body inherits Core Framework's 10px Inter */
  font-family: var(--font-body);
  font-size: 18px;
  letter-spacing: -0.04em;
}

.service-search input {
  border: 0;
  outline: 0;
  background: none;
  font: inherit;
  color: var(--color-ink);
  width: 100%;
}

.service-view-toggle {
  display: flex;
  flex-direction: row;
  gap: 10px;
}

.service-view-toggle button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  color: var(--color-link);
  opacity: 0.5;
  cursor: pointer;
}

.service-view-toggle button[aria-current="true"] {
  color: var(--color-blue);
  opacity: 1;
}

/* ---- Archive: card grid. 3 columns × 20px gap measured directly off
   Figma's grid node (1760px wide, 573.33px cards) — card width is left to
   the grid math (1fr) rather than hardcoded, since it already lands on
   the same number. */
.service-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.service-card {
  position: relative;
  display: block;
  height: 320px;
  border-radius: 20px;
  overflow: hidden;
  color: var(--color-white);
}

/* Empty image (e.g. no country image uploaded yet): hide the broken-image
   icon, the card's dark background shows instead. */
.service-card img[src=""] {
  display: none;
}

.country-card {
  background: var(--color-navy-2);
}

.service-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.service-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.3);
}

.service-card__content {
  position: absolute;
  inset: 20px;
  top: auto;
  width: auto; /* Bricks block default is width:100%, which overrides the inset */
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-3);
}

/* Bricks: the text column is a Block element (width: 100% by default), which
   pushed the arrow button out of the card — let it flex instead. */
.service-card__content > :first-child {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
}

.service-card__content h2 {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 35px;
  line-height: 1;
  letter-spacing: -0.04em;
}

.service-card__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 8px;
  border: 1.5px solid var(--color-white);
  background: #2481f2;
  color: var(--color-white);
}

@media (max-width: 900px) {
  .service-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .service-filters {
    flex-wrap: wrap;
    gap: var(--space-4);
  }

  .service-search {
    width: 100%;
  }

  .service-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   LEGACY Service / Industry detail (first static build) — only
   industry-detail.html still uses these .service-hero / .service-detail-*
   classes; the Service detail is rebuilt on the Figma-measured global
   .detail-* components in section 15. Move the Industry detail over to
   section 15 and delete this block.
   ========================================================================== */
.service-hero {
  background: var(--color-navy);
  padding-block: var(--space-7) var(--space-8);
  text-align: center;
}

.service-hero .container {
  align-items: center;
}

.service-hero h1 {
  font-size: var(--fluid-84);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.04em;
}

.service-detail-section {
  background: var(--color-page-bg);
  color: var(--color-ink);
  padding-block: var(--space-9);
}

.service-detail-grid {
  display: grid;
  grid-template-columns: 1170fr 570fr;
  gap: 20px;
  align-items: start;
}

.service-detail-body {
  background: var(--color-card-bg);
  border-radius: 30px;
  padding: 40px;
}

.service-detail-block + .service-detail-block {
  margin-top: var(--space-7);
}

.service-detail-block h2 {
  font-size: var(--fluid-35);
  font-weight: 500;
  color: var(--color-link);
  margin-bottom: var(--space-4);
}

.service-detail-block p {
  font-size: var(--fluid-18);
  line-height: 1.35;
  letter-spacing: -0.04em;
  color: rgba(16, 23, 45, 0.8);
}

.service-detail-block p + p {
  margin-top: var(--space-4);
}

.service-benefits {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3) var(--space-5);
  margin: var(--space-5) 0 0;
  padding: 0;
  list-style: none;
}

.service-benefits li {
  position: relative;
  padding-left: var(--space-5);
  font-size: var(--fluid-18);
  color: var(--color-ink);
}

.service-benefits li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-blue);
}

.service-inquiry-form {
  background: var(--color-card-bg);
  border-radius: 30px;
  padding: 40px;
  box-shadow: 0 4px 30px rgba(4, 10, 29, 0.1);
}

.service-inquiry-form h2 {
  font-size: var(--fluid-35);
  font-weight: 500;
  color: var(--color-link);
  margin-bottom: var(--space-4);
}

.service-inquiry-form > p {
  font-size: var(--fluid-16);
  color: var(--color-ink-muted);
  margin-bottom: var(--space-5);
}

.service-inquiry-form form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.service-inquiry-form__submit {
  width: 100%;
  margin-top: var(--space-2);
}

@media (max-width: 1100px) {
  .service-detail-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   12. Countries archive (countries.html) — one page with a List / Grid
   toggle: list = Figma "Countrires line", grid = Figma "Countrires grid". Both frames put the
   content on a 1464px column (Links 228 at 1920), not the usual 80px grid,
   so .country-archive caps its container's content at that width.
   A–Z buttons + search are driven by the [data-alpha-filter] block in
   main.js; letter groups (.country-group) are BUILT by main.js from the
   flat term loop, so they never need to exist in the Bricks template.
   ========================================================================== */
.page-hero__intro--wide {
  max-width: 670px;
}

/* Light panel: #F4F6FA with a 30px top radius sitting over the hero's
   bottom edge, 100px from its top to the A–Z row. */
.country-archive {
  position: relative;
  margin-top: -30px;
  border-radius: 30px 30px 0 0;
  background: var(--color-page-bg);
  color: #10172d;
  padding-block: 100px var(--space-9);
}

.country-archive > .container > * {
  max-width: 1464px;
  margin-inline: auto;
}

/* ---- A–Z filter: letter buttons + search bar (20px apart, 50px to the
   content — 20 here + the first group's own 30px top padding) ---- */
/* main.js hides filtered entries with the hidden attribute — beat the
   display:flex/grid/block these components set */
[data-alpha-filter] [hidden] {
  display: none !important;
}

.alpha-filter {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 20px;
}

.alpha-filter .team-filters {
  margin-bottom: 0;
}

/* List / Grid toggle sits at the far right of the search bar (same
   buttons as the Team page). Unlike Team, it stays on mobile too — both
   country views work at every width. */
.alpha-filter .team-view-toggle {
  width: auto; /* Bricks block default is width:100% */
  margin-left: auto;
}

/* Bricks: letter + toggle buttons are Block(tag=button) elements whose
   label/icon sits in a Text element's own <div> — let it fall through. */
.alpha-filter button > .brxe-text-basic {
  display: contents;
}

/* ---- One page, two views of the same term loop: list by default,
   `.is-grid-view` (main.js, [data-view-scope]) swaps to the image grid ---- */
.country-archive:not(.is-grid-view) .country-grid,
.country-archive.is-grid-view .country-list {
  display: none;
}

/* Bricks: the Text element wraps the search icon + input in its own <div>;
   display: contents lets both sit directly in the label's flex row again. */
.service-search > .brxe-text-basic {
  display: contents;
}

.alpha-filter__letters {
  display: flex;
  /* explicit: Bricks gives every Block element flex-direction: column
     and width: 100% — anything not set here falls back to that */
  flex-direction: row;
  gap: 10px;
}

/* 54px tall, 0 20px, radius 10, Noto Sans 18/-4%. Buttons stretch so the
   row spans the full 1464px exactly as in Figma; padding eases down below
   1920 so All + A–V stay on one row on laptops (wraps ≤900px). */
.alpha-filter__letters button {
  flex: 1 1 auto;
  width: auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  height: 54px;
  padding-inline: clamp(8px, 1.0417vw, 20px);
  border: 1px solid rgba(16, 23, 45, 0.1);
  border-radius: var(--radius-md);
  font-size: var(--fluid-18);
  letter-spacing: -0.04em;
  color: #10172d;
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
}

.alpha-filter__letters button:hover {
  background: rgba(6, 67, 142, 0.05);
}

.alpha-filter__letters button[aria-current="true"] {
  background: var(--color-blue);
  border-color: rgba(6, 67, 142, 0.1);
  color: var(--color-white);
}

/* Figma search field is 343 wide (services' is 353) */
.service-search--sm {
  width: 343px;
}

.alpha-filter__empty {
  padding-block: 50px;
  font-size: var(--fluid-20);
  letter-spacing: -0.04em;
  color: rgba(16, 23, 45, 0.5);
}

/* ---- List: one .country-group per letter — 445px letter column + two
   484px columns (51px gap) that fill top-to-bottom, left column first.
   Separator only between VISIBLE groups (~ skips hidden ones). ---- */
/* Plain block wrapper around the JS-built letter groups (in Bricks it is a
   Block element, which would otherwise be a flex column that shrinks them). */
.country-list {
  display: block;
}

.country-group {
  display: grid;
  /* 445 : 1019 of the 1464 column, kept proportional below 1920 */
  grid-template-columns: minmax(0, 445fr) minmax(0, 1019fr);
  padding-block: 30px 50px;
}

.country-group:not([hidden]) ~ .country-group {
  border-top: 1px solid rgba(16, 23, 45, 0.1);
}

/* Noto Serif 500 / 60px / 100% / -4%, top aligned with the first flag */
.country-group__letter {
  margin-top: 20px;
  font-family: var(--font-heading);
  font-size: var(--fluid-60);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.04em;
}

.country-group__items {
  columns: 2;
  column-gap: 51px;
}

/* Row: 45×30 flag, 15px, name 20/1.25, chevron at the column's right
   edge; 20px above/below the flag, 1px rgba(16,23,45,.3) underline. */
.country-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 15px;
  padding-block: 20px;
  border-bottom: 1px solid rgba(16, 23, 45, 0.3);
  break-inside: avoid;
  font-size: var(--fluid-20);
  line-height: 1.25;
  letter-spacing: -0.04em;
  transition: opacity var(--transition);
}

.country-row:hover {
  opacity: 0.5;
}

.country-row__flag,
.country-row .country-flag {
  width: 45px;
  height: 30px;
  flex-shrink: 0;
  object-fit: cover;
}

/* Bricks: {mc_term_flag} outputs <img class="country-flag" width="20">, and
   the Text element wraps it in its own <div> — drop the inline-image gap. */
.country-row .country-flag {
  display: block;
  border-radius: 0;
}

.country-row__name {
  flex: 1;
}

.country-row svg {
  flex-shrink: 0;
}

/* ---- Grid: .service-card + .country-card modifier — bottom black
   gradient instead of the flat 30% scrim, 30px insets, "N Businesses For
   Sale" subline, borderless arrow sitting 40px off the bottom. ---- */
.country-card::after {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, 0.75) 100%);
}

.country-card .service-card__content {
  inset: 30px;
  top: auto;
  z-index: 1;
}

.country-card__meta {
  margin: 10px 0 0;
  font-size: var(--fluid-16);
  line-height: 1.25;
  letter-spacing: -0.04em;
  color: rgba(255, 255, 255, 0.8);
}

.country-card .service-card__arrow {
  border: 0;
  margin-bottom: 10px;
}

@media (max-width: 1100px) {
  .country-group {
    grid-template-columns: 120px 1fr;
  }
}

@media (max-width: 900px) {
  .alpha-filter .team-view-toggle {
    display: flex;
  }

  .alpha-filter__letters {
    flex-wrap: wrap;
  }

  .alpha-filter__letters button {
    flex: 0 0 auto;
    min-width: 54px;
  }
}

@media (max-width: 700px) {
  .country-group {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }

  .country-group__letter {
    margin-top: 0;
  }

  .country-group__items {
    columns: 1;
  }

  .service-search--sm {
    width: 100%;
  }
}

/* ==========================================================================
   13. Contact page (contact.html) + global components it introduced —
   measured off Figma "Contacts" (node 22-28909, 1920×5641). All the
   blocks below are GLOBAL classes (reused e.g. by the Services "Connect
   with our global advisory…" CTA), not page-scoped:
     .page-panel     light #F4F6FA panel with 30px top radius overlapping
                     the hero's bottom edge (Figma "Rectangle 248")
     .section-head   centered 60px serif heading + 20px intro
     .icon-badge     50×50 #F4F6FA square, 8px radius, 18px blue line icon
     .info-card(s)   white 20px-radius cards, 3-up, 20px gap
     .map-embed      1760×600 grayscale map, 30px radius
     .contact-block  label / value rows between 1px #10172D@30% rules
     .media-slider   #D9D9D9 placeholder box + prev/next buttons
     .cta-band       dark CTA section with the blue bars background
   ========================================================================== */
.page-panel {
  position: relative;
  margin-top: -30px;
  border-radius: 30px 30px 0 0;
  background: var(--color-page-bg);
  color: #10172d;
  /* 100px panel top → "Contact us"; 140px last block → next section */
  padding-block: clamp(56px, 5.2083vw, 100px) clamp(72px, 7.2917vw, 140px);
}

/* ---- Centered section heading: Noto Serif 500 60/100/-4% #06438E, intro
   Noto Sans 20/125/-4% #10172D@50%, 573px wide, 20px below ---- */
.section-head {
  text-align: center;
  /* Bricks: Block = flex column pinned left; center the children too */
  align-items: center;
}

.section-head h2 {
  font-family: var(--font-heading);
  font-size: var(--fluid-60);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--color-link);
}

.section-head p {
  max-width: 573px;
  margin: 20px auto 0;
  font-size: var(--fluid-20);
  line-height: 1.25;
  letter-spacing: -0.04em;
  color: rgba(16, 23, 45, 0.5);
}

/* ---- Icon badge (Figma "Rectangle 58/325/326") ---- */
.icon-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 8px;
  background: var(--color-page-bg);
  color: var(--color-blue);
  flex-shrink: 0;
}

.icon-badge svg {
  width: 18px;
  height: 18px;
}

/* ---- Info cards: 3 × 573px, 20px gap, 40px padding, 70px below the
   section head. Badge → 30 → title (Noto Serif 500 35/100/-4% #06438E)
   → 15 → text (Noto Sans 18/125/-4% #0B1126@80%) → 26 → 240×58 button ---- */
.info-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin-top: clamp(40px, 3.6458vw, 70px);
}

.info-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: clamp(24px, 2.0833vw, 40px);
  border-radius: 20px;
  background: var(--color-card-bg);
}

.info-card h3 {
  margin-top: 30px;
  font-family: var(--font-heading);
  font-size: var(--fluid-35);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--color-link);
}

.info-card p {
  max-width: 440px;
  margin: 15px 0 0;
  font-size: var(--fluid-18);
  line-height: 1.25;
  letter-spacing: -0.04em;
  color: rgba(11, 17, 38, 0.8);
}

.info-card .mc-btn {
  min-width: 240px;
  margin-top: auto;
}

/* the text block above the button always reserves 26px. Bricks: the button
   sits in a Text element's own <div>, so that wrapper takes the margin. */
.info-card p + .mc-btn,
.info-card p + div:has(> .mc-btn) {
  margin-top: 26px;
}

/* ---- Map: 1760×600, 30px radius, 140px below the cards. Figma uses a
   grayscale map screenshot; an embedded map with a grayscale filter
   matches it and stays interactive. ---- */
.map-embed {
  position: relative;
  margin-top: clamp(64px, 7.2917vw, 140px);
  height: clamp(320px, 31.25vw, 600px);
  border-radius: 30px;
  overflow: hidden;
  background: #e6e8ec;
}

.map-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  filter: grayscale(1) contrast(0.9) brightness(1.04);
}

/* ---- Corporate contacts: 722px info column at the left edge, 890×645
   media box right-aligned (148px gutter), both top-aligned, 140px below
   the map ---- */
.contact-split {
  display: grid;
  grid-template-columns: minmax(0, 722fr) minmax(0, 890fr);
  gap: clamp(40px, 7.7083vw, 148px);
  align-items: start;
  margin-top: clamp(64px, 7.2917vw, 140px);
}

.contact-split__title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: var(--fluid-60);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--color-link);
}

/* Each group: 1px rule, 40px, label (20/500 #06438E), 20px, content, 40px */
.contact-block {
  margin-top: 40px;
  border-bottom: 1px solid rgba(16, 23, 45, 0.3);
}

.contact-block__group {
  padding-block: 40px;
  border-top: 1px solid rgba(16, 23, 45, 0.3);
}

.contact-block__label {
  display: block;
  margin-bottom: 20px;
  font-size: var(--fluid-20);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.04em;
  color: var(--color-link);
}

.contact-block__text {
  max-width: 573px;
  margin: 0;
  font-size: var(--fluid-20);
  line-height: 1.25;
  letter-spacing: -0.04em;
  color: rgba(16, 23, 45, 0.8);
}

/* Two columns at x=80 / x=505 (425px pitch) */
.contact-block__cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 20px;
  row-gap: 20px;
  max-width: 722px;
}

.contact-block__cols > * {
  max-width: 400px;
}

/* phone row: 38×25 flag, 15px, number (20/125 80%) */
.contact-phone {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 15px;
  font-size: var(--fluid-20);
  line-height: 1.25;
  letter-spacing: -0.04em;
  color: rgba(16, 23, 45, 0.8);
}

.contact-phone img {
  width: 38px;
  height: 25px;
  object-fit: cover;
  flex-shrink: 0;
}

/* Schedule / small label: 16/125/-4% 80%, 20px below the number,
   10px above an e-mail value */
.contact-block__small {
  display: block;
  font-size: var(--fluid-16);
  line-height: 1.25;
  letter-spacing: -0.04em;
  color: rgba(16, 23, 45, 0.8);
}

.contact-phone + .contact-block__small {
  margin-top: 20px;
}

.contact-block__small + a {
  display: inline-block;
  margin-top: 10px;
  font-size: var(--fluid-20);
  line-height: 1.25;
  letter-spacing: -0.04em;
  color: rgba(16, 23, 45, 0.8);
  transition: opacity var(--transition);
}

.contact-block a:hover,
.contact-phone:hover {
  opacity: 0.5;
}

/* ---- Media slider placeholder: #D9D9D9, 20px radius, 890×645; two 58×58
   #2481F2 buttons (10px gap) centered 40px above the bottom ---- */
.media-slider {
  position: relative;
  aspect-ratio: 890 / 645;
  border-radius: 20px;
  overflow: hidden;
  background: #d9d9d9;
}

.media-slider img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.media-slider__nav {
  position: absolute;
  left: 50%;
  bottom: 40px;
  display: flex;
  flex-direction: row;
  gap: 10px;
  transform: translateX(-50%);
}

.media-slider__nav button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  border-radius: var(--radius-md);
  background: #2481f2;
  color: var(--color-white);
  cursor: pointer;
  transition: background var(--transition);
}

.media-slider__nav button:hover {
  background: var(--color-blue);
}

/* ---- CTA band (Figma "Career in Mergerscorp"; same block as the Services
   "Connect with our global advisory…" CTA): #040A1D, 1218px tall at 1920
   (section top → footer), title 146px from the top (Noto Serif 500
   84/100/-4%), 30px, text 20/125/-4% white@80% 578px wide, 50px, 240×58
   button. Background: assets/cta-bars.svg — the Figma "Group 111" vector
   (1920×1264, drawn from 16px below the section top, runs under the
   footer, so the section clips it). ---- */
.cta-band {
  position: relative;
  overflow: hidden;
  background: var(--color-navy);
  color: var(--color-white);
  text-align: center;
  min-height: max(560px, calc(1218 / 1920 * 100vw));
  padding-top: clamp(72px, 7.6042vw, 146px);
}

/* Bars background — Figma "Contacts" > Group 111 vector (also kept as
   assets/cta-bars.svg). Inlined as a data URI so the band needs no image
   element/upload in Bricks: just give any section the class .cta-band. */
.cta-band::before {
  content: "";
  position: absolute;
  top: clamp(8px, 0.8333vw, 16px);
  left: 50%;
  /* never narrower than 1400px, so on phones the wave still reaches into
     the (min 560px tall) section instead of shrinking to a thin strip */
  width: max(100%, 1400px);
  aspect-ratio: 1920 / 1264;
  transform: translateX(-50%);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1920' height='1264' viewBox='0 0 1920 1264' fill='none' aria-hidden='true'%3E%3Cdefs%3E%3ClinearGradient id='b' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop stop-color='%230C132A'/%3E%3Cstop offset='1' stop-color='%23344B93'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg fill='url(%23b)'%3E%3Cpath d='M1882.29 770L1889.70 163.6L1897.11 770A7.41 7.41 0 0 1 1882.29 770Z'/%3E%3Cpath d='M1842.29 770L1849.70 163.6L1857.11 770A7.41 7.41 0 0 1 1842.29 770Z'/%3E%3Cpath d='M1802.29 796L1809.70 163.6L1817.11 796A7.41 7.41 0 0 1 1802.29 796Z'/%3E%3Cpath d='M1762.29 829L1769.70 163.6L1777.11 829A7.41 7.41 0 0 1 1762.29 829Z'/%3E%3Cpath d='M1722.29 867L1729.70 163.6L1737.11 867A7.41 7.41 0 0 1 1722.29 867Z'/%3E%3Cpath d='M1682.29 909L1689.70 163.6L1697.11 909A7.41 7.41 0 0 1 1682.29 909Z'/%3E%3Cpath d='M1642.29 955L1649.70 163.6L1657.11 955A7.41 7.41 0 0 1 1642.29 955Z'/%3E%3Cpath d='M1602.29 999L1609.70 163.6L1617.11 999A7.41 7.41 0 0 1 1602.29 999Z'/%3E%3Cpath d='M1562.29 1016L1569.70 163.6L1577.11 1016A7.41 7.41 0 0 1 1562.29 1016Z'/%3E%3Cpath d='M1522.29 999L1529.70 163.6L1537.11 999A7.41 7.41 0 0 1 1522.29 999Z'/%3E%3Cpath d='M1482.29 955L1489.70 163.6L1497.11 955A7.41 7.41 0 0 1 1482.29 955Z'/%3E%3Cpath d='M1442.29 909L1449.70 163.6L1457.11 909A7.41 7.41 0 0 1 1442.29 909Z'/%3E%3Cpath d='M1402.29 867L1409.70 163.6L1417.11 867A7.41 7.41 0 0 1 1402.29 867Z'/%3E%3Cpath d='M1362.29 829L1369.70 163.6L1377.11 829A7.41 7.41 0 0 1 1362.29 829Z'/%3E%3Cpath d='M1322.29 796L1329.70 163.6L1337.11 796A7.41 7.41 0 0 1 1322.29 796Z'/%3E%3Cpath d='M1282.29 770L1289.70 163.6L1297.11 770A7.41 7.41 0 0 1 1282.29 770Z'/%3E%3Cpath d='M1242.29 757L1249.70 163.6L1257.11 757A7.41 7.41 0 0 1 1242.29 757Z'/%3E%3Cpath d='M1202.29 746L1209.70 163.6L1217.11 746A7.41 7.41 0 0 1 1202.29 746Z'/%3E%3Cpath d='M1162.29 746L1169.70 163.6L1177.11 746A7.41 7.41 0 0 1 1162.29 746Z'/%3E%3Cpath d='M1122.29 755L1129.70 163.6L1137.11 755A7.41 7.41 0 0 1 1122.29 755Z'/%3E%3Cpath d='M1082.29 774L1089.70 163.6L1097.11 774A7.41 7.41 0 0 1 1082.29 774Z'/%3E%3Cpath d='M1042.29 805L1049.70 163.6L1057.11 805A7.41 7.41 0 0 1 1042.29 805Z'/%3E%3Cpath d='M1002.29 840L1009.70 163.6L1017.11 840A7.41 7.41 0 0 1 1002.29 840Z'/%3E%3Cpath d='M962.29 878L969.70 163.6L977.11 878A7.41 7.41 0 0 1 962.29 878Z'/%3E%3Cpath d='M922.29 917L929.70 163.6L937.11 917A7.41 7.41 0 0 1 922.29 917Z'/%3E%3Cpath d='M882.29 957L889.70 163.6L897.11 957A7.41 7.41 0 0 1 882.29 957Z'/%3E%3Cpath d='M842.29 992L849.70 163.6L857.11 992A7.41 7.41 0 0 1 842.29 992Z'/%3E%3Cpath d='M802.29 1023L809.70 163.6L817.11 1023A7.41 7.41 0 0 1 802.29 1023Z'/%3E%3Cpath d='M762.29 1043L769.70 163.6L777.11 1043A7.41 7.41 0 0 1 762.29 1043Z'/%3E%3Cpath d='M722.29 1051L729.70 163.6L737.11 1051A7.41 7.41 0 0 1 722.29 1051Z'/%3E%3Cpath d='M682.29 1047L689.70 163.6L697.11 1047A7.41 7.41 0 0 1 682.29 1047Z'/%3E%3Cpath d='M642.29 1032L649.70 163.6L657.11 1032A7.41 7.41 0 0 1 642.29 1032Z'/%3E%3Cpath d='M602.29 1010L609.70 163.6L617.11 1010A7.41 7.41 0 0 1 602.29 1010Z'/%3E%3Cpath d='M562.29 979L569.70 163.6L577.11 979A7.41 7.41 0 0 1 562.29 979Z'/%3E%3Cpath d='M522.29 948L529.70 163.6L537.11 948A7.41 7.41 0 0 1 522.29 948Z'/%3E%3Cpath d='M482.29 913L489.70 163.6L497.11 913A7.41 7.41 0 0 1 482.29 913Z'/%3E%3Cpath d='M442.29 878L449.70 163.6L457.11 878A7.41 7.41 0 0 1 442.29 878Z'/%3E%3Cpath d='M402.29 845L409.70 163.6L417.11 845A7.41 7.41 0 0 1 402.29 845Z'/%3E%3Cpath d='M362.29 812L369.70 163.6L377.11 812A7.41 7.41 0 0 1 362.29 812Z'/%3E%3Cpath d='M322.29 785L329.70 163.6L337.11 785A7.41 7.41 0 0 1 322.29 785Z'/%3E%3Cpath d='M282.29 763L289.70 163.6L297.11 763A7.41 7.41 0 0 1 282.29 763Z'/%3E%3Cpath d='M242.29 748L249.70 163.6L257.11 748A7.41 7.41 0 0 1 242.29 748Z'/%3E%3Cpath d='M202.29 733L209.70 163.6L217.11 733A7.41 7.41 0 0 1 202.29 733Z'/%3E%3Cpath d='M162.29 724L169.70 163.6L177.11 724A7.41 7.41 0 0 1 162.29 724Z'/%3E%3Cpath d='M122.29 717L129.70 163.6L137.11 717A7.41 7.41 0 0 1 122.29 717Z'/%3E%3Cpath d='M82.29 713L89.70 163.6L97.11 713A7.41 7.41 0 0 1 82.29 713Z'/%3E%3Cpath d='M42.29 713L49.70 163.6L57.11 713A7.41 7.41 0 0 1 42.29 713Z'/%3E%3Cpath d='M2.29 713L9.70 163.6L17.11 713A7.41 7.41 0 0 1 2.29 713Z'/%3E%3C/g%3E%3Cg fill='%230C132A'%3E%3Cpath d='M21.99 160L29.40 1099.6L36.81 160A7.41 7.41 0 0 0 21.99 160Z'/%3E%3Cpath d='M61.99 172L69.40 1099.6L76.81 172A7.41 7.41 0 0 0 61.99 172Z'/%3E%3Cpath d='M101.99 184L109.40 1099.6L116.81 184A7.41 7.41 0 0 0 101.99 184Z'/%3E%3Cpath d='M141.99 199L149.40 1099.6L156.81 199A7.41 7.41 0 0 0 141.99 199Z'/%3E%3Cpath d='M181.99 212L189.40 1099.6L196.81 212A7.41 7.41 0 0 0 181.99 212Z'/%3E%3Cpath d='M221.99 228L229.40 1099.6L236.81 228A7.41 7.41 0 0 0 221.99 228Z'/%3E%3Cpath d='M261.99 265L269.40 1099.6L276.81 265A7.41 7.41 0 0 0 261.99 265Z'/%3E%3Cpath d='M301.99 309L309.40 1099.6L316.81 309A7.41 7.41 0 0 0 301.99 309Z'/%3E%3Cpath d='M341.99 355L349.40 1099.6L356.81 355A7.41 7.41 0 0 0 341.99 355Z'/%3E%3Cpath d='M381.99 397L389.40 1099.6L396.81 397A7.41 7.41 0 0 0 381.99 397Z'/%3E%3Cpath d='M421.99 434L429.40 1099.6L436.81 434A7.41 7.41 0 0 0 421.99 434Z'/%3E%3Cpath d='M461.99 467L469.40 1099.6L476.81 467A7.41 7.41 0 0 0 461.99 467Z'/%3E%3Cpath d='M501.99 494L509.40 1099.6L516.81 494A7.41 7.41 0 0 0 501.99 494Z'/%3E%3Cpath d='M541.99 507L549.40 1099.6L556.81 507A7.41 7.41 0 0 0 541.99 507Z'/%3E%3Cpath d='M581.99 518L589.40 1099.6L596.81 518A7.41 7.41 0 0 0 581.99 518Z'/%3E%3Cpath d='M621.99 518L629.40 1099.6L636.81 518A7.41 7.41 0 0 0 621.99 518Z'/%3E%3Cpath d='M661.99 509L669.40 1099.6L676.81 509A7.41 7.41 0 0 0 661.99 509Z'/%3E%3Cpath d='M701.99 489L709.40 1099.6L716.81 489A7.41 7.41 0 0 0 701.99 489Z'/%3E%3Cpath d='M741.99 459L749.40 1099.6L756.81 459A7.41 7.41 0 0 0 741.99 459Z'/%3E%3Cpath d='M781.99 423L789.40 1099.6L796.81 423A7.41 7.41 0 0 0 781.99 423Z'/%3E%3Cpath d='M821.99 386L829.40 1099.6L836.81 386A7.41 7.41 0 0 0 821.99 386Z'/%3E%3Cpath d='M861.99 346L869.40 1099.6L876.81 346A7.41 7.41 0 0 0 861.99 346Z'/%3E%3Cpath d='M901.99 307L909.40 1099.6L916.81 307A7.41 7.41 0 0 0 901.99 307Z'/%3E%3Cpath d='M941.99 272L949.40 1099.6L956.81 272A7.41 7.41 0 0 0 941.99 272Z'/%3E%3Cpath d='M981.99 241L989.40 1099.6L996.81 241A7.41 7.41 0 0 0 981.99 241Z'/%3E%3Cpath d='M1021.99 221L1029.40 1099.6L1036.81 221A7.41 7.41 0 0 0 1021.99 221Z'/%3E%3Cpath d='M1061.99 212L1069.40 1099.6L1076.81 212A7.41 7.41 0 0 0 1061.99 212Z'/%3E%3Cpath d='M1101.99 217L1109.40 1099.6L1116.81 217A7.41 7.41 0 0 0 1101.99 217Z'/%3E%3Cpath d='M1141.99 232L1149.40 1099.6L1156.81 232A7.41 7.41 0 0 0 1141.99 232Z'/%3E%3Cpath d='M1181.99 254L1189.40 1099.6L1196.81 254A7.41 7.41 0 0 0 1181.99 254Z'/%3E%3Cpath d='M1221.99 285L1229.40 1099.6L1236.81 285A7.41 7.41 0 0 0 1221.99 285Z'/%3E%3Cpath d='M1261.99 316L1269.40 1099.6L1276.81 316A7.41 7.41 0 0 0 1261.99 316Z'/%3E%3Cpath d='M1301.99 351L1309.40 1099.6L1316.81 351A7.41 7.41 0 0 0 1301.99 351Z'/%3E%3Cpath d='M1341.99 386L1349.40 1099.6L1356.81 386A7.41 7.41 0 0 0 1341.99 386Z'/%3E%3Cpath d='M1381.99 419L1389.40 1099.6L1396.81 419A7.41 7.41 0 0 0 1381.99 419Z'/%3E%3Cpath d='M1421.99 452L1429.40 1099.6L1436.81 452A7.41 7.41 0 0 0 1421.99 452Z'/%3E%3Cpath d='M1461.99 478L1469.40 1099.6L1476.81 478A7.41 7.41 0 0 0 1461.99 478Z'/%3E%3Cpath d='M1501.99 500L1509.40 1099.6L1516.81 500A7.41 7.41 0 0 0 1501.99 500Z'/%3E%3Cpath d='M1541.99 516L1549.40 1099.6L1556.81 516A7.41 7.41 0 0 0 1541.99 516Z'/%3E%3Cpath d='M1581.99 531L1589.40 1099.6L1596.81 531A7.41 7.41 0 0 0 1581.99 531Z'/%3E%3Cpath d='M1621.99 540L1629.40 1099.6L1636.81 540A7.41 7.41 0 0 0 1621.99 540Z'/%3E%3Cpath d='M1661.99 547L1669.40 1099.6L1676.81 547A7.41 7.41 0 0 0 1661.99 547Z'/%3E%3Cpath d='M1701.99 551L1709.40 1099.6L1716.81 551A7.41 7.41 0 0 0 1701.99 551Z'/%3E%3Cpath d='M1741.99 551L1749.40 1099.6L1756.81 551A7.41 7.41 0 0 0 1741.99 551Z'/%3E%3Cpath d='M1781.99 551L1789.40 1099.6L1796.81 551A7.41 7.41 0 0 0 1781.99 551Z'/%3E%3Cpath d='M1821.99 551L1829.40 1099.6L1836.81 551A7.41 7.41 0 0 0 1821.99 551Z'/%3E%3Cpath d='M1861.99 500L1869.40 1099.6L1876.81 500A7.41 7.41 0 0 0 1861.99 500Z'/%3E%3C/g%3E%3C/svg%3E") center top / 100% auto no-repeat;
  pointer-events: none;
}

.cta-band .container {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.cta-band h2 {
  font-family: var(--font-heading);
  font-size: var(--fluid-84);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.04em;
}

.cta-band p {
  max-width: 578px;
  margin: 30px auto 0;
  font-size: var(--fluid-20);
  line-height: 1.25;
  letter-spacing: -0.04em;
  color: rgba(255, 255, 255, 0.8);
}

.cta-band .mc-btn {
  min-width: 240px;
  margin-top: 50px;
}

@media (max-width: 1100px) {
  .info-cards {
    grid-template-columns: 1fr;
  }

  .info-card p {
    max-width: none;
  }

  .contact-split {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 700px) {
  .contact-block__cols {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   14. Services archive (services.html) — one page, List / Grid toggle.
   Figma "Services" > "Services v2" (list + grid frames, 1920 wide):
   hero title y243 (2 lines, 84px) → light panel y511 (100 below) → search
   bar 1760×100 at y611 → 50 → category cards (1760 wide, 30 radius, 60
   padding, 40 apart) → panel ends ~100 below the last card → .cta-band.
   Global pieces: .archive-toolbar (search + view toggle bar), .category-card
   (numbered card with illustration + 2-column link list), .link-row (one
   underlined link with chevron), .page-panel--compact, .cta-band--narrow.
   ========================================================================== */

/* Hero title: "Providing world-class" / muted "service experiences" on its
   own line, exactly like the Figma two-line heading. */
.page-hero h1 .is-muted {
  display: block;
}

.page-panel--compact {
  padding-bottom: clamp(56px, 5.2083vw, 100px);
}

/* ---- Search + view toggle bar (reuses .team-filters: #06438E@10%, 10px
   radius, 20px padding → 100px tall with the 60px search field) ---- */
.archive-toolbar {
  margin-bottom: clamp(32px, 2.6042vw, 50px);
}

.archive-toolbar .team-view-toggle {
  width: auto; /* Bricks block default is width:100% */
  margin-left: auto;
}

/* ---- One page, two views: list by default, `.is-grid-view` (main.js,
   [data-view-scope]) swaps to the image grid ---- */
[data-view-scope]:not(.is-grid-view) .view-grid,
[data-view-scope].is-grid-view .view-list {
  display: none;
}

/* ---- Category card (Figma "Rectangle 296/297/298"): white, 30 radius,
   0 4 40 #000@5%, 60px inset; "01" + title share one Noto Serif 48/100
   text node (number #10172D@30%, title #06438E); subtitle 20/125 @80% 20px
   below; 1px #10172D@10% divider 40px below; body = illustration column
   (centered in the 616px left area) + 120 gap + 904px two-column list ---- */
.category-cards {
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 2.0833vw, 40px);
}

.category-card {
  padding: clamp(24px, 3.125vw, 60px);
  border-radius: 30px;
  background: var(--color-card-bg);
  box-shadow: 0 4px 40px rgba(0, 0, 0, 0.05);
  color: #10172d;
}

.category-card__head {
  padding-bottom: clamp(24px, 2.0833vw, 40px);
  border-bottom: 1px solid rgba(16, 23, 45, 0.1);
}

.category-card__title {
  margin: 0;
  max-width: 631px;
  font-family: var(--font-heading);
  font-size: var(--fluid-48);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--color-link);
}

.category-card__num {
  display: block;
  color: rgba(16, 23, 45, 0.3);
}

.category-card__subtitle {
  margin: 20px 0 0;
  font-size: var(--fluid-20);
  line-height: 1.25;
  letter-spacing: -0.04em;
  color: rgba(16, 23, 45, 0.8);
}

.category-card__body {
  display: grid;
  grid-template-columns: minmax(0, 616fr) minmax(0, 904fr);
  gap: clamp(32px, 6.25vw, 120px);
  align-items: start;
  padding-top: 26px;
}

.category-card__illustration {
  justify-self: center;
  /* size = the width/height attributes (Figma size; the live PNG is 2×) */
  max-width: 100%;
  height: auto;
  /* Figma places it 38/60/45px below the divider on cards 1/2/3 — the
     middle value (45 = 26 body padding + 19) keeps all three within ~7px */
  margin-top: clamp(0px, 0.9896vw, 19px);
}

/* list: 2 columns of 420 with a 60 gap, filled top-to-bottom. display:
   block — Bricks Blocks are flex, and CSS columns don't apply to flex. */
.category-card__list {
  display: block;
  columns: 2;
  column-gap: clamp(24px, 3.125vw, 60px);
}

/* ---- Link row: 18/125 Noto Sans, 15 above / 15 below the text (53px row
   pitch in Figma), 1px #10172D@30% underline, 5×10 chevron at the right ---- */
.link-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  padding-block: 15px 14px;
  border-bottom: 1px solid rgba(16, 23, 45, 0.3);
  break-inside: avoid;
  font-size: var(--fluid-18);
  line-height: 1.25;
  letter-spacing: -0.04em;
  color: #10172d;
  transition: opacity var(--transition);
}

.link-row:hover {
  opacity: 0.5;
}

.link-row svg {
  flex-shrink: 0;
}

/* ---- Bricks wrappers: the illustration comes from a Text element (own
   <div>) and the grid view nests the post loop in an invisible category
   loop — both wrappers must not become grid items themselves ---- */
.category-card__body > div:has(> .category-card__illustration),
.loop-contents {
  display: contents;
}

/* ---- Bottom CTA: 3-line title (1134px) and a 543px text on Services ---- */
.cta-band--narrow h2 {
  max-width: 1134px;
  margin-inline: auto;
}

.cta-band--narrow p {
  max-width: 543px;
}

@media (max-width: 1100px) {
  /* Figma tablet frame: list first, illustration below it */
  .category-card__body {
    grid-template-columns: 1fr;
  }

  .category-card__illustration {
    order: 2;
    max-width: min(100%, 420px);
    margin-top: 0;
  }
}

@media (max-width: 900px) {
  .archive-toolbar .team-view-toggle {
    display: flex;
  }
}

@media (max-width: 700px) {
  .category-card__list {
    columns: 1;
  }

  .archive-toolbar .service-search {
    width: auto;
    flex: 1;
  }
}

/* ==========================================================================
   15. Detail page — Service (and later Industry) single template.
   Figma "Deatail page (Services + Industries)" (node 22-13128, 1920 frame):
   hero = global .page-hero (crumb y150, title y243, subtitle y357 20/135,
   514 wide) → light .page-panel at y511 → content 100 below. Left column
   727 wide at x228 (post content), right 570 wide form card at x1123, both
   starting at y611. Then the dark "Selected Transactions" band.
   ========================================================================== */
.page-hero__intro--narrow {
  max-width: 514px;
  line-height: 1.35;
}

.detail-layout {
  display: grid;
  grid-template-columns: minmax(0, 727fr) minmax(0, 570fr);
  gap: clamp(40px, 8.75vw, 168px);
  align-items: start;
  max-width: 1464px;
  margin-inline: auto;
}

/* Bricks: the Post Content element and the form card are Block children */
.detail-layout > * {
  min-width: 0;
}

/* ---- Post content typography (headings 35 serif #06438E; body 18/135
   #10172D 80%; 60 above each section heading; 30 after the opening h2,
   20 after the others; 15 between paragraphs) ---- */
.detail-content {
  color: rgba(16, 23, 45, 0.8);
  font-size: var(--fluid-18);
  line-height: 1.35;
  letter-spacing: -0.04em;
}

.detail-content > * {
  margin: 0;
}

.detail-content h2,
.detail-content h3,
.detail-content h4 {
  margin: clamp(36px, 3.125vw, 60px) 0 20px;
  font-family: var(--font-heading);
  font-size: var(--fluid-35);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--color-link);
}

.detail-content h2 {
  margin-bottom: 30px;
}

.detail-content > :first-child {
  margin-top: 0;
}

.detail-content p + p {
  margin-top: 15px;
}

/* Figma sets the body copy without the bold emphasis of the imported text */
.detail-content p b,
.detail-content p strong {
  font-weight: inherit;
}

.detail-content ul:not([class]),
.detail-content ol:not([class]) {
  margin-top: 15px;
  padding-left: 1.2em;
}

.detail-content li + li {
  margin-top: 8px;
}

.detail-content a {
  color: var(--color-link);
  text-decoration: underline;
}

/* ---- Accordion (long "Title: text" lists): 727 wide white rows, radius
   15, 15 apart, 40 below the intro. Title Noto Sans 500 20/125 #10172D,
   21/25 padding (closed row 67 high), chevron 10×5 at 25 from the right;
   open body 20 below the title, 18/135 80%, 25 bottom padding ---- */
.detail-accordion {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-top: 40px;
}

.detail-accordion__item {
  border-radius: 15px;
  background: var(--color-card-bg);
}

.detail-accordion__item summary {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 21px 25px;
  list-style: none;
  cursor: pointer;
  font-size: var(--fluid-20);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.04em;
  color: #10172d;
}

.detail-accordion__item summary::-webkit-details-marker {
  display: none;
}

.detail-accordion__chevron {
  flex-shrink: 0;
  transition: transform var(--transition);
}

.detail-accordion__item[open] .detail-accordion__chevron {
  transform: rotate(180deg);
}

.detail-accordion__body {
  padding: 0 25px 25px;
  margin-top: -1px;
}

.detail-accordion__body p {
  margin-top: 0;
  padding-top: 0;
}

.detail-accordion__item[open] summary {
  padding-bottom: 20px;
}

/* ---- Numbered tiles (short "Title: list" lists, Figma "Our Core Industry
   Focus"): two equal columns, no gutter (2nd badge at x592 = 364 after
   the 1st, text 298 wide per column), rows 30 apart; 45×45 white badge
   with the number (16 #06438E), text 20 to its right; title 20 medium
   #06438E, list 18/125 80% 10 below ---- */
.detail-tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 30px 0;
  margin: 36px 0 0;
  padding: 0;
  list-style: none;
}

.detail-tiles li {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 20px;
  padding-right: 10px;
}

.detail-tiles__num {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 45px;
  height: 45px;
  border-radius: 8px;
  background: var(--color-card-bg);
  font-size: var(--fluid-16);
  line-height: 1.25;
  color: var(--color-link);
}

.detail-tiles__title {
  display: block;
  font-size: var(--fluid-20);
  font-weight: 500;
  line-height: 1.25;
  color: var(--color-link);
}

.detail-tiles__text {
  display: block;
  margin-top: 10px;
  line-height: 1.25;
}

/* ---- Form card (Figma Group 305): 570 wide, white, radius 30, padding
   40 / 40 / 60; heading Noto Serif 500 35/100 #06438E, fields 40 below.
   Fields 490×58, radius 10, 1px #10172D 30%, 20 apart; textarea 116 high;
   checkboxes 20×20 #F4F6FA radius 3 + 14/125 #10172D 50% label (10 gap),
   28 below the textarea / 15 apart; submit 490×58, 30 below.
   Field markup = Bricks' Form element (.brxe-form .form-group …); the
   static HTML mirrors it so one ruleset serves both. ---- */
.form-card {
  padding: 40px 40px 60px;
  border-radius: 30px;
  background: var(--color-card-bg);
}

.form-card__title {
  margin: 0 0 40px;
  font-family: var(--font-heading);
  font-size: var(--fluid-35);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--color-link);
}

.form-card .brxe-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin: 0;
}

.form-card .brxe-form .form-group {
  width: 100%;
  margin: 0;
  padding: 0;
}

.form-card .brxe-form .form-group > label:not(:only-child) {
  display: none; /* Figma: placeholders only, no visible field labels */
}

.form-card .brxe-form input:not([type="checkbox"]),
.form-card .brxe-form select,
.form-card .brxe-form textarea {
  display: block;
  width: 100%;
  height: 58px;
  margin: 0;
  padding: 0 20px;
  border: 1px solid rgba(16, 23, 45, 0.3);
  border-radius: 10px;
  background-color: var(--color-card-bg);
  box-shadow: none;
  font-family: var(--font-body);
  font-size: var(--fluid-16);
  letter-spacing: -0.04em;
  color: #10172d;
}

.form-card .brxe-form textarea {
  height: 116px;
  padding-block: 18px;
  resize: vertical;
}

.form-card .brxe-form ::placeholder {
  color: rgba(16, 23, 45, 0.5);
}

.form-card .brxe-form select {
  appearance: none;
  padding-right: 56px;
  color: rgba(16, 23, 45, 0.5);
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 34px 34px; /* Bricks sets 4px on its form selects */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='34'%3E%3Crect width='34' height='34' rx='6' fill='%23F4F6FA'/%3E%3Cpath d='M13 15l4-3 4 3M13 19l4 3 4-3' stroke='%2310172D' stroke-width='1.2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.form-card .brxe-form input:focus,
.form-card .brxe-form select:focus,
.form-card .brxe-form textarea:focus {
  outline: 2px solid var(--color-blue);
  outline-offset: 1px;
}

/* Bricks wraps hidden fields in their own <div> — keep it out of the flex
   gap (the input still submits) */
.form-card .brxe-form > div:has(> input[type="hidden"]:only-child) {
  display: none;
}

/* checkbox groups: 28 below the textarea, 15 between the two */
.form-card .brxe-form .form-group:has(input[type="checkbox"]) {
  margin-top: 8px;
}

.form-card .brxe-form .form-group:has(input[type="checkbox"]) + .form-group:has(input[type="checkbox"]) {
  margin-top: -5px;
}

.form-card .brxe-form .options-wrapper {
  margin: 0;
  padding: 0;
  list-style: none;
}

.form-card .brxe-form .options-wrapper li {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
}

.form-card .brxe-form input[type="checkbox"] {
  appearance: none;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin: 0;
  border: 0;
  border-radius: 3px;
  background: var(--color-page-bg);
  cursor: pointer;
}

.form-card .brxe-form input[type="checkbox"]:checked {
  background: var(--color-blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='10'%3E%3Cpath d='M1 5l3.5 3.5L11 1' stroke='white' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px 10px no-repeat;
}

.form-card .brxe-form .options-wrapper label {
  font-size: 14px;
  line-height: 1.25;
  letter-spacing: -0.04em;
  color: rgba(16, 23, 45, 0.5);
  cursor: pointer;
}

/* submit: same look as .mc-btn--primary, full 490 width, 30 below */
.form-card .brxe-form .submit-button-wrapper {
  margin-top: 10px;
}

.form-card .brxe-form button[type="submit"] {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  height: 58px;
  margin: 0;
  padding: 0 64px 0 20px;
  border: 0;
  border-radius: var(--radius-md);
  background: var(--color-blue);
  box-shadow: none;
  font-family: var(--font-body);
  font-size: 16px;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  color: var(--color-white);
  cursor: pointer;
  transition: background var(--transition);
}

.form-card .brxe-form button[type="submit"]:hover {
  background: #2481f2;
}

.form-card .brxe-form button[type="submit"]::after {
  content: "";
  position: absolute;
  top: 7px;
  right: 7px;
  width: 44px;
  height: 44px;
  border-radius: 8px;
  background: #2481f2 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3'%3E%3Cpolyline points='9 6 15 12 9 18'/%3E%3C/svg%3E") center / 12px 12px no-repeat;
}

@media (max-width: 1100px) {
  .detail-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 700px) {
  .detail-tiles {
    grid-template-columns: 1fr;
  }

  .form-card {
    padding: 30px 20px 40px;
  }
}

/* ---- Selected Transactions (Figma Rectangle 310 + Group 475): #10172D
   band, 140 top/bottom; eyebrow 18/125 white 50%, title 84 serif 20
   below, track 70 below: 4 cards 384×365 (radius 20, 20 apart, 1596 wide)
   between two 58×58 #206FD0 arrows at the container edges; button 260×58
   50 below. Card: padding 40/27/30 — flags (40 wide, 10 apart) → 23 →
   title 35 serif → 10 → company 18 80% → 43 → outcome 20 medium → 5 →
   detail 16 80% → 20 → 1px 10% rule → 20 → pill (12/15, radius 50,
   #F4F6FA) + year. Static content (no Transactions post type yet). ---- */
.selected-transactions {
  background: #10172d;
  color: var(--color-white);
  padding-block: clamp(72px, 7.2917vw, 140px);
  text-align: center;
}

.selected-transactions__eyebrow {
  margin: 0;
  font-size: var(--fluid-18);
  line-height: 1.25;
  letter-spacing: -0.04em;
  color: rgba(255, 255, 255, 0.5);
}

.selected-transactions__title {
  margin: 20px 0 0;
  font-family: var(--font-heading);
  font-size: var(--fluid-84);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.04em;
}

.selected-transactions__slider {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: clamp(40px, 3.6458vw, 70px);
}

.selected-transactions__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 58px;
  height: 58px;
  border: 1.5px solid var(--color-white);
  border-radius: var(--radius-md);
  background: var(--color-blue);
  color: var(--color-white);
}

.selected-transactions__track {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 384px));
  justify-content: center;
  gap: 20px;
  flex: 1;
  min-width: 0;
  text-align: left;
}

/* Bricks: arrows + cards are raw-HTML Text elements — drop their wrapper
   <div> so the arrow / card itself is the flex / grid item */
.selected-transactions__slider > .brxe-text-basic,
.selected-transactions__track > .brxe-text-basic {
  display: contents;
}

.transaction-card {
  display: flex;
  flex-direction: column;
  padding: 40px 27px 30px;
  border-radius: 20px;
  background: var(--color-card-bg);
  color: #10172d;
}

.transaction-card__flags {
  display: flex;
  flex-direction: row;
  gap: 10px;
}

.transaction-card__flags img {
  display: block;
  width: 40px;
  height: 27px;
  object-fit: cover;
}

.transaction-card__title {
  margin: 23px 0 0;
  font-family: var(--font-heading);
  font-size: var(--fluid-35);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.04em;
}

.transaction-card__company {
  margin: 10px 0 0;
  font-size: var(--fluid-18);
  line-height: 1.25;
  letter-spacing: -0.04em;
  color: rgba(16, 23, 45, 0.8);
}

.transaction-card__outcome {
  margin: 43px 0 0;
  font-size: var(--fluid-20);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.04em;
}

.transaction-card__detail {
  margin: 5px 0 0;
  font-size: var(--fluid-16);
  line-height: 1.25;
  letter-spacing: -0.04em;
  color: rgba(16, 23, 45, 0.8);
}

.transaction-card__footer {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid rgba(16, 23, 45, 0.1);
  font-size: var(--fluid-16);
  line-height: 1.25;
  letter-spacing: -0.04em;
}

.transaction-card__tag {
  padding: 12px 15px;
  border-radius: 50px;
  background: var(--color-page-bg);
}

.selected-transactions__more {
  display: flex;
  min-width: 260px;
  margin: clamp(32px, 2.6042vw, 50px) auto 0;
}

@media (max-width: 1100px) {
  .selected-transactions__track {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .selected-transactions__arrow {
    display: none;
  }

  .selected-transactions__track {
    grid-template-columns: 1fr;
  }
}


/* ==========================================================================
   16. Base type guard, hero background, scroll motion
   (motion spec: Daria's Figma comments, see docs/animations-daria.md)
   ========================================================================== */

/* ---- Base type. Core Framework (live) sets html + body to 10px Inter;
   everything that inherits instead of setting its own size/family came
   out 10px Inter on the live site (header logo, utility bar, nav …).
   The type tokens are px (rem was 37.5% too small under a 10px root) and
   prefixed --mc-text-* because CF defines its own fluid --text-xs/xl/2xl/3xl
   and loads after us. `html body` outranks CF's `body`. */
html body {
  font-family: var(--font-body);
  font-size: var(--mc-text-base);
  line-height: 1.5;
}

/* ---- Header (live Bricks header): button icon always on the right (Figma
   "Buttons" spec), actions group pushed to the right edge of the pill */
.mc-btn > .mc-btn__icon {
  order: 1;
}

.header__actions {
  width: auto;
  margin-left: auto;
  justify-content: flex-end;
}

/* ---- Inner-page hero: faint bars background (Figma "Frame 177",
   1920×611, anchored to the very top of the frame = behind the header;
   48 bars #1053A7→#06438E at 15%). Kept as assets/hero-bars.svg too. ---- */
.page-hero {
  position: relative;
  isolation: isolate;
}

.page-hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  right: 0;
  top: calc(-1 * var(--hero-bars-offset, 110px)); /* header height above the hero */
  aspect-ratio: 1920 / 611;
  background: url("data:image/svg+xml,%3Csvg width='1920' height='611' viewBox='0 0 1920 611' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg%3E%3Cpath d='M1900.1 312.0C1900.1 307.9 1896.8 304.5 1892.6 304.5C1888.5 304.5 1885.2 307.9 1885.2 312.0L1892.6 918.5L1900.1 312.0Z' fill='url(%23p0)' fill-opacity='0.15'/%3E%3Cpath d='M1860.1 286.0C1860.1 281.9 1856.8 278.5 1852.6 278.5C1848.5 278.5 1845.2 281.9 1845.2 286.0L1852.6 918.5L1860.1 286.0Z' fill='url(%23p1)' fill-opacity='0.15'/%3E%3Cpath d='M1820.1 253.0C1820.1 248.9 1816.8 245.5 1812.6 245.5C1808.5 245.5 1805.2 248.9 1805.2 253.0L1812.6 918.5L1820.1 253.0Z' fill='url(%23p2)' fill-opacity='0.15'/%3E%3Cpath d='M1780.1 215.0C1780.1 210.9 1776.8 207.5 1772.6 207.5C1768.5 207.5 1765.2 210.9 1765.2 215.0L1772.6 918.5L1780.1 215.0Z' fill='url(%23p3)' fill-opacity='0.15'/%3E%3Cpath d='M1740.1 173.0C1740.1 168.9 1736.8 165.5 1732.6 165.5C1728.5 165.5 1725.2 168.9 1725.2 173.0L1732.6 918.5L1740.1 173.0Z' fill='url(%23p4)' fill-opacity='0.15'/%3E%3Cpath d='M1700.1 127.0C1700.1 122.9 1696.8 119.5 1692.6 119.5C1688.5 119.5 1685.2 122.9 1685.2 127.0L1692.6 918.5L1700.1 127.0Z' fill='url(%23p5)' fill-opacity='0.15'/%3E%3Cpath d='M1660.1 83.0C1660.1 78.9 1656.8 75.5 1652.6 75.5C1648.5 75.5 1645.2 78.9 1645.2 83.0L1652.6 918.5L1660.1 83.0Z' fill='url(%23p6)' fill-opacity='0.15'/%3E%3Cpath d='M1620.1 66.0C1620.1 61.9 1616.8 58.5 1612.6 58.5C1608.5 58.5 1605.2 61.9 1605.2 66.0L1612.6 918.5L1620.1 66.0Z' fill='url(%23p7)' fill-opacity='0.15'/%3E%3Cpath d='M1580.1 83.0C1580.1 78.9 1576.8 75.5 1572.6 75.5C1568.5 75.5 1565.2 78.9 1565.2 83.0L1572.6 918.5L1580.1 83.0Z' fill='url(%23p8)' fill-opacity='0.15'/%3E%3Cpath d='M1540.1 127.0C1540.1 122.9 1536.8 119.5 1532.6 119.5C1528.5 119.5 1525.2 122.9 1525.2 127.0L1532.6 918.5L1540.1 127.0Z' fill='url(%23p9)' fill-opacity='0.15'/%3E%3Cpath d='M1500.1 173.0C1500.1 168.9 1496.8 165.5 1492.6 165.5C1488.5 165.5 1485.2 168.9 1485.2 173.0L1492.6 918.5L1500.1 173.0Z' fill='url(%23p10)' fill-opacity='0.15'/%3E%3Cpath d='M1460.1 215.0C1460.1 210.9 1456.8 207.5 1452.6 207.5C1448.5 207.5 1445.2 210.9 1445.2 215.0L1452.6 918.5L1460.1 215.0Z' fill='url(%23p11)' fill-opacity='0.15'/%3E%3Cpath d='M1420.1 253.0C1420.1 248.9 1416.8 245.5 1412.6 245.5C1408.5 245.5 1405.2 248.9 1405.2 253.0L1412.6 918.5L1420.1 253.0Z' fill='url(%23p12)' fill-opacity='0.15'/%3E%3Cpath d='M1380.1 286.0C1380.1 281.9 1376.8 278.5 1372.6 278.5C1368.5 278.5 1365.2 281.9 1365.2 286.0L1372.6 918.5L1380.1 286.0Z' fill='url(%23p13)' fill-opacity='0.15'/%3E%3Cpath d='M1340.1 312.0C1340.1 307.9 1336.8 304.5 1332.6 304.5C1328.5 304.5 1325.2 307.9 1325.2 312.0L1332.6 918.5L1340.1 312.0Z' fill='url(%23p14)' fill-opacity='0.15'/%3E%3Cpath d='M1300.1 325.0C1300.1 320.9 1296.8 317.5 1292.6 317.5C1288.5 317.5 1285.2 320.9 1285.2 325.0L1292.6 918.5L1300.1 325.0Z' fill='url(%23p15)' fill-opacity='0.15'/%3E%3Cpath d='M1260.1 336.0C1260.1 331.9 1256.8 328.5 1252.6 328.5C1248.5 328.5 1245.2 331.9 1245.2 336.0L1252.6 918.5L1260.1 336.0Z' fill='url(%23p16)' fill-opacity='0.15'/%3E%3Cpath d='M1220.1 336.0C1220.1 331.9 1216.8 328.5 1212.6 328.5C1208.5 328.5 1205.2 331.9 1205.2 336.0L1212.6 918.5L1220.1 336.0Z' fill='url(%23p17)' fill-opacity='0.15'/%3E%3Cpath d='M1180.1 327.0C1180.1 322.9 1176.8 319.5 1172.6 319.5C1168.5 319.5 1165.2 322.9 1165.2 327.0L1172.6 918.5L1180.1 327.0Z' fill='url(%23p18)' fill-opacity='0.15'/%3E%3Cpath d='M1140.1 308.0C1140.1 303.9 1136.8 300.5 1132.6 300.5C1128.5 300.5 1125.2 303.9 1125.2 308.0L1132.6 918.5L1140.1 308.0Z' fill='url(%23p19)' fill-opacity='0.15'/%3E%3Cpath d='M1100.1 277.0C1100.1 272.9 1096.8 269.5 1092.6 269.5C1088.5 269.5 1085.2 272.9 1085.2 277.0L1092.6 918.5L1100.1 277.0Z' fill='url(%23p20)' fill-opacity='0.15'/%3E%3Cpath d='M1060.1 242.0C1060.1 237.9 1056.8 234.5 1052.6 234.5C1048.5 234.5 1045.2 237.9 1045.2 242.0L1052.6 918.5L1060.1 242.0Z' fill='url(%23p21)' fill-opacity='0.15'/%3E%3Cpath d='M1020.1 204.0C1020.1 199.9 1016.8 196.5 1012.6 196.5C1008.5 196.5 1005.2 199.9 1005.2 204.0L1012.6 918.5L1020.1 204.0Z' fill='url(%23p22)' fill-opacity='0.15'/%3E%3Cpath d='M980.1 165.0C980.1 160.9 976.8 157.5 972.6 157.5C968.5 157.5 965.2 160.9 965.2 165.0L972.6 918.5L980.1 165.0Z' fill='url(%23p23)' fill-opacity='0.15'/%3E%3Cpath d='M940.1 125.0C940.1 120.9 936.8 117.5 932.6 117.5C928.5 117.5 925.2 120.9 925.2 125.0L932.6 918.5L940.1 125.0Z' fill='url(%23p24)' fill-opacity='0.15'/%3E%3Cpath d='M900.1 90.0C900.1 85.9 896.8 82.5 892.6 82.5C888.5 82.5 885.2 85.9 885.2 90.0L892.6 918.5L900.1 90.0Z' fill='url(%23p25)' fill-opacity='0.15'/%3E%3Cpath d='M860.1 59.0C860.1 54.9 856.8 51.5 852.6 51.5C848.5 51.5 845.2 54.9 845.2 59.0L852.6 918.5L860.1 59.0Z' fill='url(%23p26)' fill-opacity='0.15'/%3E%3Cpath d='M820.1 39.0C820.1 34.9 816.8 31.5 812.6 31.5C808.5 31.5 805.2 34.9 805.2 39.0L812.6 918.5L820.1 39.0Z' fill='url(%23p27)' fill-opacity='0.15'/%3E%3Cpath d='M780.1 31.0C780.1 26.9 776.8 23.5 772.6 23.5C768.5 23.5 765.2 26.9 765.2 31.0L772.6 918.5L780.1 31.0Z' fill='url(%23p28)' fill-opacity='0.15'/%3E%3Cpath d='M740.1 35.0C740.1 30.9 736.8 27.5 732.6 27.5C728.5 27.5 725.2 30.9 725.2 35.0L732.6 918.5L740.1 35.0Z' fill='url(%23p29)' fill-opacity='0.15'/%3E%3Cpath d='M700.1 50.0C700.1 45.9 696.8 42.5 692.6 42.5C688.5 42.5 685.2 45.9 685.2 50.0L692.6 918.5L700.1 50.0Z' fill='url(%23p30)' fill-opacity='0.15'/%3E%3Cpath d='M660.1 72.0C660.1 67.9 656.8 64.5 652.6 64.5C648.5 64.5 645.2 67.9 645.2 72.0L652.6 918.5L660.1 72.0Z' fill='url(%23p31)' fill-opacity='0.15'/%3E%3Cpath d='M620.1 103.0C620.1 98.9 616.8 95.5 612.6 95.5C608.5 95.5 605.2 98.9 605.2 103.0L612.6 918.5L620.1 103.0Z' fill='url(%23p32)' fill-opacity='0.15'/%3E%3Cpath d='M580.1 134.0C580.1 129.9 576.8 126.5 572.6 126.5C568.5 126.5 565.2 129.9 565.2 134.0L572.6 918.5L580.1 134.0Z' fill='url(%23p33)' fill-opacity='0.15'/%3E%3Cpath d='M540.1 169.0C540.1 164.9 536.8 161.5 532.6 161.5C528.5 161.5 525.2 164.9 525.2 169.0L532.6 918.5L540.1 169.0Z' fill='url(%23p34)' fill-opacity='0.15'/%3E%3Cpath d='M500.1 204.0C500.1 199.9 496.8 196.5 492.6 196.5C488.5 196.5 485.2 199.9 485.2 204.0L492.6 918.5L500.1 204.0Z' fill='url(%23p35)' fill-opacity='0.15'/%3E%3Cpath d='M460.1 237.0C460.1 232.9 456.8 229.5 452.6 229.5C448.5 229.5 445.2 232.9 445.2 237.0L452.6 918.5L460.1 237.0Z' fill='url(%23p36)' fill-opacity='0.15'/%3E%3Cpath d='M420.1 270.0C420.1 265.9 416.8 262.5 412.6 262.5C408.5 262.5 405.2 265.9 405.2 270.0L412.6 918.5L420.1 270.0Z' fill='url(%23p37)' fill-opacity='0.15'/%3E%3Cpath d='M380.1 297.0C380.1 292.9 376.8 289.5 372.6 289.5C368.5 289.5 365.2 292.9 365.2 297.0L372.6 918.5L380.1 297.0Z' fill='url(%23p38)' fill-opacity='0.15'/%3E%3Cpath d='M340.0 319.0C340.1 314.9 336.8 311.5 332.6 311.5C328.5 311.5 325.2 314.9 325.2 319.0L332.6 918.5L340.0 319.0Z' fill='url(%23p39)' fill-opacity='0.15'/%3E%3Cpath d='M300.0 334.0C300.1 329.9 296.8 326.5 292.6 326.5C288.5 326.5 285.2 329.9 285.2 334.0L292.6 918.5L300.0 334.0Z' fill='url(%23p40)' fill-opacity='0.15'/%3E%3Cpath d='M260.0 349.0C260.1 344.9 256.8 341.5 252.6 341.5C248.5 341.5 245.2 344.9 245.2 349.0L252.6 918.5L260.0 349.0Z' fill='url(%23p41)' fill-opacity='0.15'/%3E%3Cpath d='M220.0 358.0C220.1 353.9 216.8 350.5 212.6 350.5C208.5 350.5 205.2 353.9 205.2 358.0L212.6 918.5L220.0 358.0Z' fill='url(%23p42)' fill-opacity='0.15'/%3E%3Cpath d='M180.0 365.0C180.1 360.9 176.8 357.5 172.6 357.5C168.5 357.5 165.2 360.9 165.2 365.0L172.6 918.5L180.0 365.0Z' fill='url(%23p43)' fill-opacity='0.15'/%3E%3Cpath d='M140.0 369.0C140.1 364.9 136.8 361.5 132.6 361.5C128.5 361.5 125.2 364.9 125.2 369.0L132.6 918.5L140.0 369.0Z' fill='url(%23p44)' fill-opacity='0.15'/%3E%3Cpath d='M100.0 369.0C100.1 364.9 96.8 361.5 92.6 361.5C88.5 361.5 85.2 364.9 85.2 369.0L92.6 918.5L100.0 369.0Z' fill='url(%23p45)' fill-opacity='0.15'/%3E%3Cpath d='M60.0 369.0C60.1 364.9 56.8 361.5 52.6 361.5C48.5 361.5 45.2 364.9 45.2 369.0L52.6 918.5L60.0 369.0Z' fill='url(%23p46)' fill-opacity='0.15'/%3E%3Cpath d='M20.0 369.0C20.1 364.9 16.8 361.5 12.6 361.5C8.5 361.5 5.2 364.9 5.2 369.0L12.6 918.5L20.0 369.0Z' fill='url(%23p47)' fill-opacity='0.15'/%3E%3C/g%3E%3Cdefs%3E%3ClinearGradient id='p0' x1='1892.6' y1='918.5' x2='1892.6' y2='304.5' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%2306438E'/%3E%3Cstop offset='1' stop-color='%231053A7'/%3E%3C/linearGradient%3E%3ClinearGradient id='p1' x1='1852.6' y1='918.5' x2='1852.6' y2='278.5' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%2306438E'/%3E%3Cstop offset='1' stop-color='%231053A7'/%3E%3C/linearGradient%3E%3ClinearGradient id='p2' x1='1812.6' y1='918.5' x2='1812.6' y2='245.5' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%2306438E'/%3E%3Cstop offset='1' stop-color='%231053A7'/%3E%3C/linearGradient%3E%3ClinearGradient id='p3' x1='1772.6' y1='918.5' x2='1772.6' y2='207.5' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%2306438E'/%3E%3Cstop offset='1' stop-color='%231053A7'/%3E%3C/linearGradient%3E%3ClinearGradient id='p4' x1='1732.6' y1='918.5' x2='1732.6' y2='165.5' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%2306438E'/%3E%3Cstop offset='1' stop-color='%231053A7'/%3E%3C/linearGradient%3E%3ClinearGradient id='p5' x1='1692.6' y1='918.5' x2='1692.6' y2='119.5' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%2306438E'/%3E%3Cstop offset='1' stop-color='%231053A7'/%3E%3C/linearGradient%3E%3ClinearGradient id='p6' x1='1652.6' y1='918.5' x2='1652.6' y2='75.5' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%2306438E'/%3E%3Cstop offset='1' stop-color='%231053A7'/%3E%3C/linearGradient%3E%3ClinearGradient id='p7' x1='1612.6' y1='918.5' x2='1612.6' y2='58.5' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%2306438E'/%3E%3Cstop offset='1' stop-color='%231053A7'/%3E%3C/linearGradient%3E%3ClinearGradient id='p8' x1='1572.6' y1='918.5' x2='1572.6' y2='75.5' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%2306438E'/%3E%3Cstop offset='1' stop-color='%231053A7'/%3E%3C/linearGradient%3E%3ClinearGradient id='p9' x1='1532.6' y1='918.5' x2='1532.6' y2='119.5' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%2306438E'/%3E%3Cstop offset='1' stop-color='%231053A7'/%3E%3C/linearGradient%3E%3ClinearGradient id='p10' x1='1492.6' y1='918.5' x2='1492.6' y2='165.5' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%2306438E'/%3E%3Cstop offset='1' stop-color='%231053A7'/%3E%3C/linearGradient%3E%3ClinearGradient id='p11' x1='1452.6' y1='918.5' x2='1452.6' y2='207.5' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%2306438E'/%3E%3Cstop offset='1' stop-color='%231053A7'/%3E%3C/linearGradient%3E%3ClinearGradient id='p12' x1='1412.6' y1='918.5' x2='1412.6' y2='245.5' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%2306438E'/%3E%3Cstop offset='1' stop-color='%231053A7'/%3E%3C/linearGradient%3E%3ClinearGradient id='p13' x1='1372.6' y1='918.5' x2='1372.6' y2='278.5' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%2306438E'/%3E%3Cstop offset='1' stop-color='%231053A7'/%3E%3C/linearGradient%3E%3ClinearGradient id='p14' x1='1332.6' y1='918.5' x2='1332.6' y2='304.5' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%2306438E'/%3E%3Cstop offset='1' stop-color='%231053A7'/%3E%3C/linearGradient%3E%3ClinearGradient id='p15' x1='1292.6' y1='918.5' x2='1292.6' y2='317.5' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%2306438E'/%3E%3Cstop offset='1' stop-color='%231053A7'/%3E%3C/linearGradient%3E%3ClinearGradient id='p16' x1='1252.6' y1='918.5' x2='1252.6' y2='328.5' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%2306438E'/%3E%3Cstop offset='1' stop-color='%231053A7'/%3E%3C/linearGradient%3E%3ClinearGradient id='p17' x1='1212.6' y1='918.5' x2='1212.6' y2='328.5' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%2306438E'/%3E%3Cstop offset='1' stop-color='%231053A7'/%3E%3C/linearGradient%3E%3ClinearGradient id='p18' x1='1172.6' y1='918.5' x2='1172.6' y2='319.5' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%2306438E'/%3E%3Cstop offset='1' stop-color='%231053A7'/%3E%3C/linearGradient%3E%3ClinearGradient id='p19' x1='1132.6' y1='918.5' x2='1132.6' y2='300.5' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%2306438E'/%3E%3Cstop offset='1' stop-color='%231053A7'/%3E%3C/linearGradient%3E%3ClinearGradient id='p20' x1='1092.6' y1='918.5' x2='1092.6' y2='269.5' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%2306438E'/%3E%3Cstop offset='1' stop-color='%231053A7'/%3E%3C/linearGradient%3E%3ClinearGradient id='p21' x1='1052.6' y1='918.5' x2='1052.6' y2='234.5' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%2306438E'/%3E%3Cstop offset='1' stop-color='%231053A7'/%3E%3C/linearGradient%3E%3ClinearGradient id='p22' x1='1012.6' y1='918.5' x2='1012.6' y2='196.5' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%2306438E'/%3E%3Cstop offset='1' stop-color='%231053A7'/%3E%3C/linearGradient%3E%3ClinearGradient id='p23' x1='972.6' y1='918.5' x2='972.6' y2='157.5' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%2306438E'/%3E%3Cstop offset='1' stop-color='%231053A7'/%3E%3C/linearGradient%3E%3ClinearGradient id='p24' x1='932.6' y1='918.5' x2='932.6' y2='117.5' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%2306438E'/%3E%3Cstop offset='1' stop-color='%231053A7'/%3E%3C/linearGradient%3E%3ClinearGradient id='p25' x1='892.6' y1='918.5' x2='892.6' y2='82.5' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%2306438E'/%3E%3Cstop offset='1' stop-color='%231053A7'/%3E%3C/linearGradient%3E%3ClinearGradient id='p26' x1='852.6' y1='918.5' x2='852.6' y2='51.5' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%2306438E'/%3E%3Cstop offset='1' stop-color='%231053A7'/%3E%3C/linearGradient%3E%3ClinearGradient id='p27' x1='812.6' y1='918.5' x2='812.6' y2='31.5' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%2306438E'/%3E%3Cstop offset='1' stop-color='%231053A7'/%3E%3C/linearGradient%3E%3ClinearGradient id='p28' x1='772.6' y1='918.5' x2='772.6' y2='23.5' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%2306438E'/%3E%3Cstop offset='1' stop-color='%231053A7'/%3E%3C/linearGradient%3E%3ClinearGradient id='p29' x1='732.6' y1='918.5' x2='732.6' y2='27.5' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%2306438E'/%3E%3Cstop offset='1' stop-color='%231053A7'/%3E%3C/linearGradient%3E%3ClinearGradient id='p30' x1='692.6' y1='918.5' x2='692.6' y2='42.5' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%2306438E'/%3E%3Cstop offset='1' stop-color='%231053A7'/%3E%3C/linearGradient%3E%3ClinearGradient id='p31' x1='652.6' y1='918.5' x2='652.6' y2='64.5' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%2306438E'/%3E%3Cstop offset='1' stop-color='%231053A7'/%3E%3C/linearGradient%3E%3ClinearGradient id='p32' x1='612.6' y1='918.5' x2='612.6' y2='95.5' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%2306438E'/%3E%3Cstop offset='1' stop-color='%231053A7'/%3E%3C/linearGradient%3E%3ClinearGradient id='p33' x1='572.6' y1='918.5' x2='572.6' y2='126.5' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%2306438E'/%3E%3Cstop offset='1' stop-color='%231053A7'/%3E%3C/linearGradient%3E%3ClinearGradient id='p34' x1='532.6' y1='918.5' x2='532.6' y2='161.5' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%2306438E'/%3E%3Cstop offset='1' stop-color='%231053A7'/%3E%3C/linearGradient%3E%3ClinearGradient id='p35' x1='492.6' y1='918.5' x2='492.6' y2='196.5' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%2306438E'/%3E%3Cstop offset='1' stop-color='%231053A7'/%3E%3C/linearGradient%3E%3ClinearGradient id='p36' x1='452.6' y1='918.5' x2='452.6' y2='229.5' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%2306438E'/%3E%3Cstop offset='1' stop-color='%231053A7'/%3E%3C/linearGradient%3E%3ClinearGradient id='p37' x1='412.6' y1='918.5' x2='412.6' y2='262.5' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%2306438E'/%3E%3Cstop offset='1' stop-color='%231053A7'/%3E%3C/linearGradient%3E%3ClinearGradient id='p38' x1='372.6' y1='918.5' x2='372.6' y2='289.5' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%2306438E'/%3E%3Cstop offset='1' stop-color='%231053A7'/%3E%3C/linearGradient%3E%3ClinearGradient id='p39' x1='332.6' y1='918.5' x2='332.6' y2='311.5' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%2306438E'/%3E%3Cstop offset='1' stop-color='%231053A7'/%3E%3C/linearGradient%3E%3ClinearGradient id='p40' x1='292.6' y1='918.5' x2='292.6' y2='326.5' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%2306438E'/%3E%3Cstop offset='1' stop-color='%231053A7'/%3E%3C/linearGradient%3E%3ClinearGradient id='p41' x1='252.6' y1='918.5' x2='252.6' y2='341.5' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%2306438E'/%3E%3Cstop offset='1' stop-color='%231053A7'/%3E%3C/linearGradient%3E%3ClinearGradient id='p42' x1='212.6' y1='918.5' x2='212.6' y2='350.5' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%2306438E'/%3E%3Cstop offset='1' stop-color='%231053A7'/%3E%3C/linearGradient%3E%3ClinearGradient id='p43' x1='172.6' y1='918.5' x2='172.6' y2='357.5' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%2306438E'/%3E%3Cstop offset='1' stop-color='%231053A7'/%3E%3C/linearGradient%3E%3ClinearGradient id='p44' x1='132.6' y1='918.5' x2='132.6' y2='361.5' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%2306438E'/%3E%3Cstop offset='1' stop-color='%231053A7'/%3E%3C/linearGradient%3E%3ClinearGradient id='p45' x1='92.6' y1='918.5' x2='92.6' y2='361.5' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%2306438E'/%3E%3Cstop offset='1' stop-color='%231053A7'/%3E%3C/linearGradient%3E%3ClinearGradient id='p46' x1='52.6' y1='918.5' x2='52.6' y2='361.5' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%2306438E'/%3E%3Cstop offset='1' stop-color='%231053A7'/%3E%3C/linearGradient%3E%3ClinearGradient id='p47' x1='12.6' y1='918.5' x2='12.6' y2='361.5' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%2306438E'/%3E%3Cstop offset='1' stop-color='%231053A7'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E") center top / 100% auto no-repeat;
  pointer-events: none;
}

/* ---- Scroll transition (Daria #13, #22–35): the hero stays put while the
   light section slides up over it. Everything after the hero sits above it. */
@media (prefers-reduced-motion: no-preference) {
  .page-hero {
    position: sticky;
    top: 0;
    z-index: 0;
  }

  .page-hero ~ * {
    position: relative;
    z-index: 1;
  }

  /* subtle parallax on the hero bars while the page scrolls (Daria #21) */
  @supports (animation-timeline: scroll()) {
    .page-hero::before {
      animation: mc-hero-parallax linear both;
      animation-timeline: scroll(root);
      animation-range: 0 100vh;
    }

    @keyframes mc-hero-parallax {
      to { transform: translateY(-60px); }
    }

    /* Team detail: parallax on the hero's background image (Daria #21;
       the image itself is set on the Bricks section) */
    .team-profile-hero {
      animation: mc-bg-parallax linear both;
      animation-timeline: scroll(root);
      animation-range: 0 100vh;
    }

    @keyframes mc-bg-parallax {
      from { background-position-y: 0; }
      to { background-position-y: 120px; }
    }

    /* Business valuation: the hero photo drifts slower than the page
       (Daria #70) */
    .valuation-hero::before {
      animation: mc-valuation-parallax linear both;
      animation-timeline: scroll(root);
      animation-range: 0 100vh;
    }

    @keyframes mc-valuation-parallax {
      from { background-position: center 50%; }
      to { background-position: center 30%; }
    }
  }
}

/* ---- Image cards: image zooms smoothly inside its frame on hover
   (Daria #51, #52, #56 — Countries grid, Industries, Services grid) ---- */
.service-card img,
.industry-row__photo {
  transition: transform 0.8s cubic-bezier(0.2, 0.6, 0.2, 1);
}

.service-card:hover img {
  transform: scale(1.06);
}

.industry-row {
  overflow: hidden;
}

.industry-row:hover .industry-row__photo {
  transform: scale(1.03);
}

/* ---- Detail pages: the form card on the right stays visible while the
   longer left column scrolls (Daria #19, #43, #64) ---- */
.team-profile-form,
.form-card {
  position: sticky;
  top: calc(var(--sticky-header, 0px) + 30px);
}

/* static build: the header is sticky (section 5) — keep the form below it.
   Live Bricks header isn't sticky, so the variable stays 0 there. */
body:has(> .header) {
  --sticky-header: 110px;
}

/* ---- Menu motion (Daria #11/#12): lines → X (§5), the menu card slides
   down out of the header while the backdrop fades, its content fades in
   a beat later; switching sections cross-fades the panel (desktop) /
   slides it in from the right (tablet/mobile drill-down). Dropdowns under
   the pill fade + drop 6px. Without motion preference everything just
   shows/hides (§5/§6). ---- */
@media (prefers-reduced-motion: no-preference) {
  .menu-overlay {
    display: block;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s ease, visibility 0s linear 0.45s;
  }

  body.menu-open .menu-overlay {
    visibility: visible;
    opacity: 1;
    transition: opacity 0.3s ease, visibility 0s;
  }

  .menu-overlay__card {
    transform: translateY(-24px);
    transition: transform 0.45s cubic-bezier(0.2, 0.6, 0.2, 1);
  }

  body.menu-open .menu-overlay__card {
    transform: none;
  }

  .menu-overlay__body {
    opacity: 0;
    transition: opacity 0.2s ease;
  }

  body.menu-open .menu-overlay__body {
    opacity: 1;
    transition: opacity 0.4s ease 0.15s;
  }

  .menu-overlay__panel-section--active {
    animation: mc-menu-fade 0.35s ease both;
  }

  .menu-overlay__nav-item .mc-chevron {
    transition: transform var(--transition);
  }

  .menu-overlay__nav-item:hover .mc-chevron,
  .menu-overlay__nav-item--active .mc-chevron {
    transform: translateX(3px);
  }

  .menu-toggle__bars span {
    transition: transform 0.3s ease, opacity 0.2s ease;
  }

  .nav__dropdown {
    transform: translateY(-6px);
    transition: opacity 0.2s ease, transform 0.25s ease, visibility 0s linear 0.25s;
  }

  .nav__item:is(:hover, :focus-within) > .nav__dropdown {
    transform: none;
    transition: opacity 0.2s ease, transform 0.25s ease, visibility 0s;
  }
}

@media (prefers-reduced-motion: no-preference) and (max-width: 1024px) {
  .menu-overlay--drill .menu-overlay__panel,
  .menu-overlay__sidebar {
    animation: mc-menu-slide 0.35s cubic-bezier(0.2, 0.6, 0.2, 1) both;
  }

  .menu-overlay__panel-section--active {
    animation: none;
  }
}

@keyframes mc-menu-fade {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

@keyframes mc-menu-slide {
  from { opacity: 0; transform: translateX(24px); }
  to { opacity: 1; transform: none; }
}


/* ==========================================================================
   17. Industries archive (industries.html / Bricks template 555) — same
   one-page List / Grid pattern as Services (§14); the list card is the
   photo variant. Figma "Industries" (list frame, 1920 wide): search bar
   y695 → cards from y825 (30 below the bar, Services: 50) → 4 cards
   1760×690, 30 radius, 0 4 40 #000@5%, 40 apart. Card: photo 553×610
   (radius 20) inset 40; content 60 right of the photo: "01"+title y+60
   (Noto Serif 48), subtitle 20/125 @80% 445 wide 20 below, divider 40
   below (1047 wide = 20 short of the list), link list bottom-aligned with
   the photo, 2 columns of 500 + 61 gap starting 6px in, rows 55px apart
   (Noto Sans 500 20/125 #06438E, 1px #10172D@30% underline, 5×10 chevron
   #10172D). Grid frame: .service-grid of 573×320 .service-card (§11/§14).
   ========================================================================== */
.archive-toolbar--tight {
  margin-bottom: clamp(20px, 1.5625vw, 30px);
}

.category-card--photo {
  display: grid;
  align-items: stretch; /* Bricks Block default is flex-start */
  grid-template-columns: minmax(0, 553fr) minmax(0, 1067fr);
  gap: clamp(24px, 3.125vw, 60px);
  padding: clamp(16px, 2.0833vw, 40px);
}

.category-card__media {
  overflow: hidden;
  border-radius: 20px;
  aspect-ratio: 553 / 610;
}

.category-card__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s cubic-bezier(0.2, 0.6, 0.2, 1);
}

/* image zooms smoothly inside its frame on hover (Daria #51/#52/#56) */
.category-card--photo:hover .category-card__image {
  transform: scale(1.04);
}

.category-card__main {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-width: 0;
  padding-top: clamp(0px, 1.0417vw, 20px);
}

.category-card--photo .category-card__head {
  margin-right: 20px;
}

.category-card--photo .category-card__subtitle {
  max-width: 445px;
}

.category-card--photo .category-card__list {
  margin-top: auto;
  padding-top: clamp(24px, 2.0833vw, 40px);
  padding-left: 6px;
  column-gap: clamp(24px, 3.1771vw, 61px);
}

/* accent link row (Industries list): 20px Medium #06438E, 55px row pitch */
.link-row--accent {
  padding-block: 15px 14px;
  font-size: var(--fluid-20);
  font-weight: 500;
  color: var(--color-link);
}

.link-row--accent svg {
  color: #10172d;
}

/* Bricks: the photo sits in a Text element's own <div> */
.category-card--photo > div:has(> .category-card__media) {
  display: contents;
}

@media (max-width: 1100px) {
  .category-card--photo {
    grid-template-columns: 1fr;
  }

  .category-card__media {
    aspect-ratio: 16 / 9;
  }

  .category-card--photo .category-card__head {
    margin-right: 0;
  }
}

/* ---- Industry detail (Bricks template 813, same layout as Service
   detail §15): the imported Industry texts are legacy markup — wrapper
   <div>s from a chat export, the title as an <h1>, and "<p><strong>…
   </strong></p>" pseudo-headings. Map them onto the Figma detail
   typography (section heading = Noto Serif 35 #06438E). Scoped to the
   Industry template via .detail-content--legacy. ---- */
.detail-content--legacy div {
  margin: 0;
}

.detail-content--legacy h1,
.detail-content--legacy p:has(> strong:only-child) {
  margin: clamp(36px, 3.125vw, 60px) 0 20px;
  font-family: var(--font-heading);
  font-size: var(--fluid-35);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--color-link);
}

.detail-content--legacy h1 {
  margin-top: 0;
  margin-bottom: 30px;
}


/* ==========================================================================
   18. Responsive fixes (checked at 390 / 768 in the live Bricks build)
   ========================================================================== */

/* Search field: icon + input always on one row (on phones the wrap pushed
   the input under the icon) */
.service-search {
  flex-wrap: nowrap;
}

.service-search input {
  flex: 1 1 auto;
  min-width: 0;
}

/* Header: Figma tablet/mobile frames show only logo · Menu · CTA — the
   desktop nav no longer fits below ~1200px and pushed the page wider than
   the viewport (768 → 1144px). `.header` prefix beats Bricks' own
   `.brxe-block { display: flex }`. Below 1200 the Menu button (full-screen
   menu, §6) is the only navigation. */
@media (max-width: 1200px) {
  .header .nav {
    display: none;
  }

  .header__pill,
  .header__row {
    max-width: 100%;
    min-width: 0;
  }
}

/* Mobile (Figma 808/810, 360): utility bar stays (compact), pill = logo ·
   CTA · menu icon; the CTA shrinks to its arrow button, the Menu label goes */
@media (max-width: 700px) {
  .header .header__utility {
    font-size: 10px;
  }

  .header__utility .container {
    gap: 8px;
    padding-inline: var(--container-pad) calc(var(--container-pad) + 16px);
  }

  .header__row {
    flex-wrap: nowrap;
    padding-inline: 16px;
  }

  .header .header__actions .mc-btn {
    gap: 0;
    padding: 7px;
    font-size: 0;
  }

  .header .menu-toggle__label {
    display: none;
  }

  .header .menu-toggle,
  .menu-overlay .menu-toggle {
    order: 1;
  }
}


/* ==========================================================================
   19. Transactions archive (Figma "Transactions / Latest Done Deals",
   1920 frame) + data-driven "Selected Transactions" slider (§15 band)
   Panel 100 → toolbar 1760×100 (search 353×60 left, selects right: Year 120,
   Transaction Type 200, Industries 160, 10 apart, 60 high, white, 1px
   #10172D 10%, radius 10, padding 0 15, Noto Sans 18/125) → 50 → grid
   4 × 425×365, 20 gap → 140 → 1px rule → 70 → inline CTA (title 821 wide,
   Noto Serif 60/100; side 398 wide 20/125 80%, button 47 below) → 140.
   Card (archive): 1px #10172D 10% border, padding 40/30/30, flags 40 wide
   → 23 → title 35 serif #06438E → 10 → company 18 80% → 44 → action 18
   medium #06438E → 6 → detail 16 80% → 20 → rule → 20 → pill + year 16.
   ========================================================================== */

/* filtered / not yet loaded cards (main.js [data-card-filter]) */
[data-card-filter] [hidden] {
  display: none !important;
}

.filter-selects {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 10px;
  width: auto;
  margin-left: auto;
}

.team-filters select.filter-select {
  min-width: 0;
  height: 60px;
  padding: 0 40px 0 15px;
  border: 1px solid rgba(16, 23, 45, 0.1);
  background-color: var(--color-card-bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2310172D' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
  background-position: right 15px center;
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.25;
  letter-spacing: -0.04em;
  color: #10172d;
  cursor: pointer;
}

/* Bricks: each select sits in its own Text element <div> */
.filter-selects > .brxe-text-basic {
  display: contents;
}

.filter-select--year { width: 120px; }
.filter-select--type { width: 200px; }
.filter-select--industry { width: 160px; }

.tx-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  align-items: stretch; /* Bricks block default is flex-start */
}

/* Bricks: the card is a raw-HTML Text element inside the loop block
   (.loop-contents, itself display:contents) — let its wrapper <div> fall
   through too so the <article> is the grid item and rows stretch evenly */
.tx-grid > .brxe-text-basic,
.selected-transactions__track > .brxe-text-basic,
.tx-grid > .loop-contents > .brxe-text-basic,
.selected-transactions__track > .loop-contents > .brxe-text-basic {
  display: contents;
}

.tx-grid .transaction-card {
  padding: 40px 30px 30px;
  border: 1px solid rgba(16, 23, 45, 0.1);
}

.tx-grid .transaction-card__title,
.tx-grid .transaction-card__outcome {
  color: var(--color-link);
}

.tx-grid .transaction-card__outcome {
  margin-top: 44px;
  font-size: var(--fluid-18);
}

.tx-grid .transaction-card__detail {
  margin-top: 6px;
}


/* cards in one grid row / slider stretch to the tallest one — keep the
   pill + year row on the bottom edge (min. 20px below the text) */
.transaction-card__detail {
  margin-bottom: 20px;
}

.transaction-card__footer {
  margin-top: auto;
}

.tx-empty {
  padding-block: 50px;
  font-size: var(--fluid-20);
  letter-spacing: -0.04em;
  color: rgba(16, 23, 45, 0.5);
}

.tx-more {
  display: flex;
  min-width: 240px;
  margin: clamp(32px, 2.6042vw, 50px) auto 0;
}

/* ---- Inline CTA on the light panel (Transactions): rule, then title left
   and text + button right ---- */
.cta-inline {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: nowrap;
  gap: 40px;
  margin-top: clamp(72px, 7.2917vw, 140px);
  padding-top: clamp(40px, 3.6458vw, 70px);
  border-top: 1px solid rgba(16, 23, 45, 0.1);
}

.cta-inline__title {
  max-width: 821px;
  margin: 0;
  font-family: var(--font-heading);
  font-size: var(--fluid-60);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--color-link);
}

.cta-inline__title .is-muted {
  color: rgba(16, 23, 45, 0.35);
}

.cta-inline__side {
  flex: 0 0 auto;
  width: min(398px, 100%);
}

.cta-inline__side p {
  margin: 0;
  font-size: var(--fluid-20);
  line-height: 1.25;
  letter-spacing: -0.04em;
  color: rgba(16, 23, 45, 0.8);
}

.cta-inline__side .mc-btn {
  min-width: 240px;
  margin-top: 47px;
}

/* ---- Selected Transactions slider (detail pages): the track scrolls
   horizontally, one card per arrow click (main.js [data-slider]) ---- */
.selected-transactions__track[data-slider-track] {
  display: grid;
  grid-auto-flow: column;
  /* 4 cards visible (Figma: 4 × 384 in the 1596 track), 2 on tablet */
  grid-auto-columns: calc((100% - 60px) / 4);
  grid-template-columns: none;
  justify-content: start;
  align-items: stretch; /* Bricks block default is flex-start */
  overflow-x: auto;
  overflow-y: hidden; /* overflow-x alone makes y "auto" → subpixel vertical scroll */
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.selected-transactions__track[data-slider-track]::-webkit-scrollbar {
  display: none;
}

.selected-transactions__track[data-slider-track] .transaction-card {
  scroll-snap-align: start;
}

button.selected-transactions__arrow {
  cursor: pointer;
  padding: 0;
  font: inherit;
}

button.selected-transactions__arrow:disabled {
  opacity: 0.4;
  cursor: default;
}

@media (max-width: 1100px) {
  .tx-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .selected-transactions__track[data-slider-track] {
    grid-auto-columns: calc((100% - 20px) / 2);
  }

  .cta-inline {
    flex-direction: column;
  }

  .archive-toolbar .filter-selects {
    margin-left: 0;
  }
}

@media (max-width: 900px) {
  .team-filters .filter-selects {
    flex-basis: 100%;
    order: 2;
  }

  .filter-select--year,
  .filter-select--type,
  .filter-select--industry {
    flex: 1 1 0;
    width: auto;
  }
}

@media (max-width: 640px) {
  .tx-grid {
    grid-template-columns: 1fr;
  }

  .filter-selects {
    flex-wrap: wrap;
  }

  .filter-select--year,
  .filter-select--type,
  .filter-select--industry {
    flex-basis: 100%;
  }

  .selected-transactions__track[data-slider-track] {
    grid-auto-columns: 85%;
  }
}


/* ==========================================================================
   20. Header variant "minimal" (customer decision pending): logo · Menu ·
   CTA only — no nav items / dropdowns in the bar, all navigation lives in
   the full-screen menu. Toggle = class `header--minimal` on the header
   (tools/build_header_html.py MINIMAL_HEADER; in Bricks: a class on the
   header section). Without the class the bar shows the nav + dropdowns.
   ========================================================================== */
.header--minimal .nav {
  display: none;
}

.header--minimal .header__actions {
  margin-left: auto;
}



/* ==========================================================================
   21. Full-screen menu on smaller desktop screens
   Figma's menu frames are 1920×1080; the menu sized only with the viewport
   WIDTH, so on lower windows the Services list overflowed (panel scrolled,
   heading out of view) and the Europe phone number was clipped.
   Desktop (≥1025px): vertical rhythm follows the viewport HEIGHT — exact
   Figma values at 1080px, tighter below (vh = 1080/100). Type shrinks only
   a little (links ≥16px, titles ≥17px, heading ≥40px) so it stays readable;
   the spacing absorbs the rest.
   ========================================================================== */
@media (min-width: 1025px) {
  .menu-overlay__panel {
    padding-top: clamp(24px, 5.556vh, 60px);
    padding-bottom: clamp(24px, 5.556vh, 60px);
  }

  .menu-overlay__panel-heading {
    font-size: min(var(--fluid-60), max(40px, 5.556vh));
    margin-bottom: clamp(16px, 4.63vh, 50px);
  }

  .menu-overlay__panel-grid {
    row-gap: clamp(20px, 4.63vh, 50px);
  }

  /* all categories of a panel in ONE row: columns keep their Figma width at
     1920 and shrink below it instead of wrapping into a second row (at 1280
     the 3rd service / 4th industry column dropped below the others) */
  .menu-overlay__panel-grid {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, clamp(150px, 13.8021vw, 265px));
    column-gap: clamp(20px, 1.5625vw, 30px);
  }

  .menu-overlay__panel-grid--wide {
    grid-auto-columns: minmax(0, clamp(180px, 17.7083vw, 340px));
  }

  .menu-overlay__panel-title {
    font-size: min(var(--mc-text-lg), max(17px, 1.852vh));
    margin-bottom: clamp(10px, 1.852vh, 20px);
  }

  .menu-overlay__panel-links a {
    font-size: min(var(--mc-text-md), max(16px, 1.667vh));
  }

  .menu-overlay__panel-links {
    gap: clamp(5px, 1.435vh, 15.5px);
  }

  .menu-overlay__panel-grid--dense .menu-overlay__panel-links {
    gap: clamp(4px, 1.157vh, 12.5px);
  }

  .menu-overlay__nav {
    padding-top: clamp(12px, 2.778vh, 30px);
  }

  .menu-overlay__nav-item {
    padding-block: clamp(8px, 1.852vh, 20px);
  }

  .menu-overlay__contact {
    padding-top: clamp(20px, 5.093vh, 55px);
    padding-bottom: clamp(20px, 5.833vh, 63px);
  }
}

/* Phones: side by side only where the sidebar has room for both numbers
   (Figma 1920 layout); otherwise stacked — never clipped */
@media (min-width: 1025px) and (max-width: 1699px) {
  .menu-overlay__contact {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (min-width: 1700px) {
  .menu-overlay__contact {
    grid-template-columns: auto auto;
    justify-content: space-between;
  }
}

/* very low desktop windows (≤760px tall, e.g. 1280×720): a touch tighter so
   even the longest panel (Services, 18 links) fits without scrolling */
@media (min-width: 1025px) and (max-height: 760px) {
  .menu-overlay__panel {
    padding-top: 28px;
    padding-bottom: 20px;
  }

  .menu-overlay__panel-links {
    gap: clamp(4px, 1.2vh, 15.5px);
  }
}

/* low windows (≤820px tall): keep the 16px links, tighten only the rows —
   the Services panel (18 links in its first column) is the tallest */
@media (min-width: 1025px) and (max-height: 820px) {
  .menu-overlay__panel-links,
  .menu-overlay__panel-grid--dense .menu-overlay__panel-links {
    gap: 6px;
  }

  .menu-overlay__panel-links a {
    line-height: 1.2;
  }

  .menu-overlay__panel {
    padding-top: 28px;
    padding-bottom: 16px;
  }

  .menu-overlay__panel-heading {
    margin-bottom: 20px;
  }
}

@media (min-width: 1025px) and (max-height: 760px) {
  .menu-overlay__panel-links,
  .menu-overlay__panel-grid--dense .menu-overlay__panel-links {
    gap: 4px;
  }
}

/* ==========================================================================
   22. Home (home.html) — Figma "Main > Concept 2.0" (1920 × 9633), every
   value below measured there (docs/home-figma-measurements.md). Sizes are
   exact at 1920 and scale with the viewport below that (clamp/vw), like the
   rest of the site. Behaviour (orbit draw-in, word fill, count-up, slider,
   stacked cards, light sections sliding over the dark ones): js/main.js
   "Home". Global pieces introduced here: .home-head (eyebrow + centered
   two-tone heading + button), .home-section--light, .float-chip,
   .glass-chip, .tag-chip, .browser-mockup, .stack-card(s), [data-text-fill].
   ========================================================================== */

/* ---- Light section (Figma #F4F6FA blocks): dark-blue headings, the muted
   half of a two-tone heading is #10172D @ 30% instead of the dark-section
   grey. Sits above the dark section before it ([data-stick-under]). ---- */
.home-section--light {
  position: relative;
  z-index: 1;
  background: var(--color-page-bg);
  color: #10172d;
  --fill-color: var(--color-link);
  --fill-muted: rgba(16, 23, 45, 0.3);
}

.home-section--light .is-muted {
  color: rgba(16, 23, 45, 0.3);
}

/* ---- Section heading: eyebrow 18/125 @50% → 20 → Noto Serif 500 84/100
   (or 60/105) centered → 50 → 240×58 button ---- */
.home-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.home-head__eyebrow {
  margin: 0;
  font-size: var(--fluid-18);
  line-height: 1.25;
  letter-spacing: -0.04em;
  color: rgba(255, 255, 255, 0.5);
}

.home-section--light .home-head__eyebrow {
  color: rgba(16, 23, 45, 0.5);
}

.home-head__title {
  margin: 20px 0 0;
  font-family: var(--font-heading);
  font-size: var(--fluid-84);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--fill-color, var(--color-white));
}

.home-head__title--60 {
  font-size: var(--fluid-60);
  line-height: 1.05;
}

.home-head .mc-btn {
  min-width: 240px;
  margin-top: clamp(32px, 2.6042vw, 50px);
}

/* ---- Word fill on scroll ([data-text-fill], main.js): the words turn from
   the muted colour to the heading colour as the heading moves up through
   the viewport. Without JS the heading keeps its static Figma two-tone. ---- */
.text-fill__word {
  transition: color 450ms ease;
}

[data-text-fill].is-text-fill .text-fill__word {
  color: var(--fill-muted, var(--color-text-muted));
}

[data-text-fill].is-text-fill .text-fill__word.is-filled {
  color: var(--fill-color, var(--color-white));
}

/* ---- Hero (Figma "Frame 115", 1920×1080 incl. the 110px header):
   eyebrow 18/120 @80% at y230 → 20 → "Global Investment Banking" 100/100.
   The globe photo + orbit vectors share one 16:9 box anchored to the
   bottom, so the orbits stay glued to the globe at every size. ---- */
.home-hero {
  --home-hero-h: max(560px, calc(56.25vw - 110px));
  position: relative;
  height: var(--home-hero-h);
  overflow: hidden;
  background: var(--color-navy);
  color: var(--color-white);
}

.home-hero__visual {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: max(100%, calc((var(--home-hero-h) + 110px) * 16 / 9));
  aspect-ratio: 1920 / 1080;
  transform: translateX(-50%);
  animation: home-globe-rise 1.6s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.home-hero__globe {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.home-hero__orbits {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.home-hero__orbit {
  fill: var(--color-white);
}

/* mask stroke: wide enough to uncover the whole 5px tapered shape */
.home-hero__orbit-line {
  fill: none;
  stroke: #fff;
  stroke-width: 24;
  stroke-linecap: round;
  stroke-dasharray: 1 1;
  stroke-dashoffset: 1;
  animation: home-orbit 9s ease-in-out infinite;
}

#home-orbit-1 .home-hero__orbit-line { animation-delay: 0.6s; animation-duration: 9s; }
#home-orbit-2 .home-hero__orbit-line { animation-delay: 1.1s; animation-duration: 8s; }
#home-orbit-3 .home-hero__orbit-line { animation-delay: 0.9s; animation-duration: 10s; }
#home-orbit-4 .home-hero__orbit-line { animation-delay: 1.4s; animation-duration: 8.5s; }

/* draw in along the path (thin tail → head), hold, then wipe out from the
   tail as if the comet moved on */
@keyframes home-orbit {
  0% { stroke-dashoffset: 1; }
  22% { stroke-dashoffset: 0; }
  72% { stroke-dashoffset: 0; }
  96%, 100% { stroke-dashoffset: -1; }
}

@keyframes home-globe-rise {
  from { opacity: 0; transform: translate(-50%, 8%); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

.home-hero__content {
  position: relative;
  padding-top: clamp(64px, 6.25vw, 120px);
  text-align: center;
}

.home-hero__eyebrow {
  margin: 0;
  font-size: var(--fluid-18);
  line-height: 1.2;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.8);
  animation: home-fade-up 1s ease 0.3s both;
}

.home-hero__title {
  margin: 20px 0 0;
  font-family: var(--font-heading);
  font-size: var(--fluid-100);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.04em;
  animation: home-fade-up 1s ease 0.45s both;
}

@keyframes home-fade-up {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: none; }
}

/* ---- Intro + key figures (dark): y1080 → eyebrow 1220 (140) → 60/105
   heading 1313 wide → 50 → button → stats stage. Stage = Figma y1697–2707
   (first stat top → last stat bottom), globe 785.5×765.5 centred at
   x566/y1743; stat = 2px white→navy line, 205 tall, value 84 serif 30
   right of it, label 18/125 @80% 15 below, flush with the line's end. ---- */
.home-intro {
  position: relative;
  background: var(--color-navy);
  color: var(--color-white);
  padding-block: clamp(72px, 7.2917vw, 140px);
}

.home-intro .home-head__title {
  max-width: 1313px;
}

.home-stats {
  position: relative;
  max-width: var(--container-width);
  margin: clamp(40px, 3.8542vw, 74px) auto 0;
  aspect-ratio: 1920 / 1010;
}

.home-stats__globe {
  position: absolute;
  left: 29.484%;
  top: 4.554%;
  width: 40.911%;
  aspect-ratio: 684 / 667;
}

.home-stats__globe img {
  display: block;
  width: 100%;
  height: 100%;
}

.home-stats__dots {
  position: absolute;
  inset: 0;
}

.home-stats__dots span {
  position: absolute;
  width: 1.273%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.6);
  transform: translate(-50%, -50%);
  animation: home-dot 4s ease-in-out infinite;
}

.home-stats__dots span:nth-child(3n) { animation-delay: -1.3s; }
.home-stats__dots span:nth-child(3n + 1) { animation-delay: -2.6s; }
.home-stats__dots span:nth-child(5n) { animation-duration: 5.5s; }

@keyframes home-dot {
  0%, 100% { opacity: 0.9; }
  50% { opacity: 0.35; }
}

.home-stat {
  position: absolute;
  height: 20.297%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-left: clamp(16px, 1.5625vw, 30px);
}

.home-stat::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(180deg, #ffffff 0%, #040a1d 100%);
}

.home-stat--1 { left: 4.1667%; top: 0; }
.home-stat--2 { left: 80.9375%; top: 26.238%; }
.home-stat--3 { left: 11.875%; top: 47.525%; }
.home-stat--4 { left: 65.729%; top: 79.703%; }

.home-stat__value {
  font-family: var(--font-heading);
  font-size: var(--fluid-84);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}

.home-stat__label {
  margin-top: 15px;
  font-size: var(--fluid-18);
  line-height: 1.25;
  letter-spacing: -0.04em;
  color: rgba(255, 255, 255, 0.8);
}

/* ---- M&A Business For Sale (light, y2847–3927): eyebrow at 140 → 60/105
   heading 1206 wide → 50 → button → 100 → 998×500 browser mockup sitting
   on the section's bottom edge, 5 floating filter chips around it ---- */
.home-business {
  padding-top: clamp(72px, 7.2917vw, 140px);
}

.home-business .home-head__title {
  max-width: 1206px;
}

.browser-mockup {
  position: relative;
  width: min(100%, 998px);
  margin: clamp(48px, 5.2083vw, 100px) auto 0;
}

.browser-mockup__window {
  overflow: hidden;
  border-radius: 10px 10px 0 0;
  background: var(--color-white);
  box-shadow: 0 4px 50px rgba(4, 10, 29, 0.1);
}

.browser-mockup__bar,
.browser-mockup__screen {
  display: block;
  width: 100%;
  height: auto;
}

/* Figma "Group 162/163/168/169/170": white, 10 radius, 44 tall, shadow
   0 4 30 #040A1D@10%; label @50% 30 before the value; icon chips: 34×34
   #2481F2@50% box (8 radius) inset 5, text 15 after it */
.float-chip {
  position: absolute;
  z-index: 1;
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 30px;
  height: 44px;
  padding: 0 20px;
  border-radius: 10px;
  background: var(--color-white);
  box-shadow: 0 4px 30px rgba(4, 10, 29, 0.1);
  font-size: 16px;
  line-height: 1.25;
  letter-spacing: -0.04em;
  white-space: nowrap;
  color: #0b1126;
  animation: home-float 5s ease-in-out infinite;
}

.float-chip:has(.float-chip__icon) {
  gap: 15px;
  padding-left: 5px;
}

.float-chip__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: rgba(36, 129, 242, 0.5);
  color: var(--color-white);
}

.float-chip__label {
  color: rgba(11, 17, 38, 0.5);
}

.float-chip--countries { left: -6.012%; top: 32.4%; }
.float-chip--status { left: -2.605%; top: 40%; animation-delay: -1.2s; }
.float-chip--types { left: 95.391%; top: 12.6%; animation-delay: -2.4s; }
.float-chip--price { left: 90.882%; top: 71%; animation-delay: -3.1s; }
.float-chip--ebitda { left: 86.673%; top: 81.8%; animation-delay: -0.6s; }

@keyframes home-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

/* ---- Industries slider (dark, y3927–5440): heading 84/100 1430 wide →
   70 → stage: active card 600×800 (20 radius) centred, neighbours 400×533
   at ±540 (blurred 3.5px, darkened 70%) → 50 → two 58×58 arrows (10 apart)
   → 100. Card: title 48 serif at 40 → 20 → text 20/125 @80% 452 wide;
   glass chips (white @20%, blur 5, 50 radius, 44 tall, 10 apart) 40 from
   the bottom. ---- */
.home-industries {
  position: relative;
  overflow: hidden;
  background: var(--color-navy);
  color: var(--color-white);
  padding-block: clamp(72px, 7.2917vw, 140px) clamp(56px, 5.2083vw, 100px);
}

.home-industries .home-head__title {
  max-width: 1430px;
}

.industry-slider {
  --slide-w: clamp(280px, 31.25vw, 600px);
  margin-top: clamp(40px, 3.6458vw, 70px);
}

.industry-slider__stage {
  position: relative;
  height: calc(var(--slide-w) * 4 / 3);
}

.industry-slide {
  position: absolute;
  top: 0;
  left: 50%;
  width: var(--slide-w);
  height: 100%;
  overflow: hidden;
  border-radius: 20px;
  background: #10172d;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) scale(0.5);
  transition: transform 700ms cubic-bezier(0.22, 1, 0.36, 1), opacity 700ms ease, filter 700ms ease;
}

.industry-slide::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  opacity: 1;
  transition: opacity 700ms ease;
}

.industry-slide.is-active {
  z-index: 2;
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%);
}

.industry-slide.is-active::after {
  opacity: 0;
}

.industry-slide.is-prev,
.industry-slide.is-next {
  z-index: 1;
  opacity: 1;
  filter: blur(3.5px);
}

/* 400/600 = 2/3; centre offset 540/600 = 0.9 card widths */
.industry-slide.is-prev {
  transform: translateX(calc(-50% - var(--slide-w) * 0.9)) scale(0.6667);
}

.industry-slide.is-next {
  transform: translateX(calc(-50% + var(--slide-w) * 0.9)) scale(0.6667);
}

.industry-slide.is-before {
  transform: translateX(calc(-50% - var(--slide-w) * 1.6)) scale(0.5);
}

.industry-slide.is-after {
  transform: translateX(calc(-50% + var(--slide-w) * 1.6)) scale(0.5);
}

.industry-slide__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  padding: clamp(24px, 2.0833vw, 40px) clamp(16px, 1.5625vw, 30px);
  text-align: center;
  background: linear-gradient(180deg, rgba(4, 10, 29, 0.55) 0%, rgba(4, 10, 29, 0) 35%, rgba(4, 10, 29, 0) 65%, rgba(4, 10, 29, 0.55) 100%);
  opacity: 0;
  transition: opacity 500ms ease;
}

.industry-slide.is-active .industry-slide__content {
  opacity: 1;
  transition-delay: 250ms;
}

.industry-slide__title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: var(--fluid-48);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.04em;
}

.industry-slide__text {
  max-width: 452px;
  margin: 20px 0 0;
  font-size: var(--fluid-20);
  line-height: 1.25;
  letter-spacing: -0.04em;
  color: rgba(255, 255, 255, 0.8);
}

.industry-slide__chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: auto;
}

.glass-chip {
  display: inline-flex;
  align-items: center;
  height: 44px;
  padding: 0 20px;
  border-radius: 50px;
  background: rgba(255, 255, 255, 0.2);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  font-size: 16px;
  line-height: 1.25;
  letter-spacing: -0.04em;
  white-space: nowrap;
  color: var(--color-white);
  transition: background var(--transition);
}

a.glass-chip:hover {
  background: rgba(255, 255, 255, 0.35);
}

.industry-slider__nav {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 10px;
  margin-top: clamp(32px, 2.6042vw, 50px);
}

.industry-slider__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  border: 0;
  border-radius: 8px;
  background: #2481f2;
  color: var(--color-white);
  cursor: pointer;
  transition: background var(--transition);
}

.industry-slider__arrow:hover {
  background: var(--color-blue);
}

.industry-slider__arrow--prev svg {
  transform: scaleX(-1);
}

/* ---- Services: stacked category cards (light, y5440–6700): heading
   84/100 1061 wide → 70 → card 1760×700 (white, 30 radius, 0 4 40 #000@5%):
   left 738 wide (60 inset) with "01" 48 serif @30% + title 48 #06438E,
   subtitle 20/125 @80% 20 below, chips (#F4F6FA, 50 radius, 44 tall,
   10 apart) + button 40 below them, bottom-aligned; 1px divider; the
   category illustration centred on the right. Cards stick under the header
   and the next one slides over the previous (main.js scales the covered
   ones down a little). ---- */
.home-services {
  padding-block: clamp(72px, 7.2917vw, 140px);
}

.home-services .home-head__title {
  max-width: 1061px;
}

.stack-cards {
  --stack-top: 140px;
  display: flex;
  flex-direction: column;
  gap: clamp(24px, 2.0833vw, 40px);
  margin-top: clamp(40px, 3.6458vw, 70px);
}

.stack-card {
  position: sticky;
  top: var(--stack-top);
  display: grid;
  grid-template-columns: minmax(0, 738fr) minmax(0, 1022fr);
  min-height: clamp(480px, 36.4583vw, 700px);
  border-radius: 30px;
  background: var(--color-card-bg);
  box-shadow: 0 4px 40px rgba(0, 0, 0, 0.05);
  color: #10172d;
  transform-origin: 50% 0;
  transform: scale(var(--stack-scale, 1));
}

.stack-card:nth-child(2) { top: calc(var(--stack-top) + 20px); }
.stack-card:nth-child(3) { top: calc(var(--stack-top) + 40px); }
.stack-card:nth-child(4) { top: calc(var(--stack-top) + 60px); }

.stack-card__main {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: clamp(24px, 3.125vw, 60px);
  border-right: 1px solid rgba(16, 23, 45, 0.1);
}

.stack-card__title {
  max-width: 604px;
  margin: 0;
  font-family: var(--font-heading);
  font-size: var(--fluid-48);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--color-link);
}

.stack-card__num {
  display: block;
  color: rgba(16, 23, 45, 0.3);
}

.stack-card__subtitle {
  margin: 20px 0 0;
  font-size: var(--fluid-20);
  line-height: 1.25;
  letter-spacing: -0.04em;
  color: rgba(16, 23, 45, 0.8);
}

.stack-card__footer {
  margin-top: auto;
  padding-top: 40px;
}

.stack-card__footer .mc-btn {
  min-width: 240px;
  margin-top: 40px;
}

.stack-card__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.tag-chip {
  display: inline-flex;
  align-items: center;
  height: 44px;
  padding: 0 20px;
  border-radius: 50px;
  background: var(--color-page-bg);
  font-size: 16px;
  line-height: 1.25;
  letter-spacing: -0.04em;
  white-space: nowrap;
  color: #0b1126;
  transition: background var(--transition), color var(--transition);
}

a.tag-chip:hover {
  background: var(--color-link);
  color: var(--color-white);
}

.tag-chip--more {
  border: 1px solid rgba(11, 17, 38, 0.1);
  background: transparent;
}

/* chips trimmed by main.js [data-chip-fit] (the chip classes set display) */
[data-chip-fit] > [hidden] {
  display: none;
}

.stack-card__visual {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(24px, 3.125vw, 60px);
}

.stack-card__visual img {
  width: clamp(200px, 25.5vw, 490px);
  height: auto;
  max-width: 100%;
}

/* ---- CTA band heading can fill word by word ([data-text-fill]) ---- */
.cta-band {
  --fill-color: var(--color-white);
}

/* ---- Hero entrance waits for the preloader (html.has-preloader is set by
   the preloader's inline script; main.js adds body.is-loaded) ---- */
.has-preloader body:not(.is-loaded) .home-hero__visual,
.has-preloader body:not(.is-loaded) .home-hero__eyebrow,
.has-preloader body:not(.is-loaded) .home-hero__title,
.has-preloader body:not(.is-loaded) .home-hero__orbit-line {
  animation-play-state: paused;
}

/* ---- Bricks parity: Bricks' own .brxe-block rule (display:flex; column;
   width:100%; align-items:flex-start) has the same specificity as our
   classes and loads later — the doubled classes below win in Bricks and
   change nothing in the static build ---- */
.home-head.home-head,
.industry-slide__content.industry-slide__content {
  align-items: center;
}

.industry-slider__stage > .industry-slide {
  width: var(--slide-w);
}

.industry-slide__chips.industry-slide__chips,
.stack-card__chips.stack-card__chips {
  flex-direction: row;
  align-items: center;
}

.industry-slide__chips.industry-slide__chips {
  justify-content: center;
  width: 100%;
}

.glass-chip.glass-chip,
.tag-chip.tag-chip {
  flex-direction: row;
  width: auto;
}

.stack-card.stack-card {
  display: grid;
  align-items: stretch;
}

.stack-card__visual.stack-card__visual {
  align-items: center;
  justify-content: center;
}

.stack-card__visual img {
  margin: 0;
}

/* Bricks Text elements wrap raw HTML in a <div>; inside flex columns that
   wrapper would shrink to its content */
.home-full {
  width: 100%;
}

.industry-slide__media,
.industry-slide__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---- Home responsive ---- */
@media (max-width: 1100px) {
  /* stats: globe on top, the four figures in a 2×2 grid below it */
  .home-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 40px 24px;
    aspect-ratio: auto;
    padding-inline: var(--container-pad);
  }

  .home-stats__globe {
    position: relative;
    left: auto;
    top: auto;
    grid-column: 1 / -1;
    justify-self: center;
    width: min(80%, 520px);
  }

  .home-stat {
    position: relative;
    left: auto;
    top: auto;
    height: auto;
    min-height: 150px;
  }

  /* one column; the illustration shrinks into the top-right corner so the
     card stays short enough to stack under the header */
  .stack-card {
    grid-template-columns: 1fr;
  }

  .stack-card__main {
    border-right: 0;
    padding-right: clamp(24px, 22vw, 200px);
  }

  .stack-card__visual {
    position: absolute;
    top: clamp(24px, 3.125vw, 60px);
    right: clamp(24px, 3.125vw, 60px);
    padding: 0;
  }

  .stack-card__visual img {
    width: clamp(96px, 16vw, 160px);
  }

  .float-chip--types { left: auto; right: -12px; }
  .float-chip--price { left: auto; right: -12px; }
  .float-chip--ebitda { left: auto; right: 40px; }
}

@media (max-width: 700px) {
  .home-hero {
    --home-hero-h: 560px;
  }

  .home-head .mc-btn {
    min-width: 0;
  }

  .home-stat__label br {
    display: none;
  }

  .float-chip {
    height: 36px;
    padding: 0 14px;
    gap: 16px;
    font-size: 13px;
  }

  .float-chip:has(.float-chip__icon) {
    gap: 10px;
    padding-left: 4px;
  }

  .float-chip__icon {
    width: 28px;
    height: 28px;
  }

  .float-chip--countries { left: -8px; top: 22%; }
  .float-chip--status { left: 8px; top: 38%; }
  .float-chip--types { right: -8px; top: 6%; }
  .float-chip--price,
  .float-chip--ebitda {
    display: none;
  }

  .industry-slider {
    --slide-w: min(78vw, 360px);
  }

  .glass-chip {
    height: 36px;
    padding: 0 14px;
    font-size: 14px;
  }

  .stack-cards {
    --stack-top: 96px;
  }

  .stack-card {
    min-height: 0;
  }

  .stack-card__visual {
    display: none;
  }

  .stack-card__main {
    border-bottom: 0;
  }

  .tag-chip {
    height: 36px;
    padding: 0 14px;
    font-size: 14px;
  }

  .stack-card__footer .mc-btn {
    min-width: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-hero__visual,
  .home-hero__eyebrow,
  .home-hero__title,
  .float-chip,
  .home-stats__dots span {
    animation: none;
  }

  .home-hero__orbit-line {
    animation: none;
    stroke-dashoffset: 0;
  }

  .industry-slide,
  .industry-slide__content,
  .text-fill__word {
    transition: none;
  }
}

/* ==========================================================================
   23. Listings — archive (listings.html) + detail (listing-detail.html).
   Figma "Business" (Businesses list / Grid / search filter / Businesses for
   sale table, 1920 frames) and "Detail - business" ("Deatail page v1").
   Archive: global .page-hero ("Businesses", y243) → .page-panel (100 top /
   140 bottom) → content 1465 wide (x228): toolbar (#06438E@10%, 10 radius,
   20 inset) → 50 → cards. Global pieces: .info-chip, .listing-figure,
   .listing-arrow, .listing-field, .listing-action, .listing-section.
   ========================================================================== */
.listing-archive {
  /* the table view spans the panel's full width (cqw = without scrollbar) */
  container-type: inline-size;
}

.listing-archive > .container {
  max-width: calc(1465px + 2 * var(--container-pad));
}

/* ---- Toolbar: search (white, 60 tall) · filter button 60×60 · Clear 101 ·
   Search 200 (#206FD0), 10 apart; 30 below: sort + export icons + view
   toggle (24px icons, active #206FD0, inactive @50%) ---- */
.listing-toolbar {
  padding: 20px;
  border-radius: 10px;
  background: rgba(6, 67, 142, 0.1);
}

.listing-toolbar__row {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 10px;
}

.listing-search {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
  height: 60px;
  padding: 0 20px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: var(--color-card-bg);
  color: rgba(16, 23, 45, 0.5);
}

.listing-search input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: none;
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.25;
  letter-spacing: -0.04em;
  color: #10172d;
}

.listing-search input::placeholder {
  color: rgba(16, 23, 45, 0.5);
}

.listing-toolbar__icon-btn,
.listing-toolbar__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 60px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: var(--color-card-bg);
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.25;
  letter-spacing: -0.04em;
  color: #10172d;
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
}

.listing-toolbar__icon-btn {
  width: 60px;
  flex-shrink: 0;
}

.listing-toolbar__btn {
  min-width: 101px;
  padding: 0 30px;
}

.listing-toolbar__btn--primary {
  min-width: 200px;
  background: var(--color-blue);
  color: var(--color-white);
}

.listing-toolbar__btn--primary:hover {
  background: #2481f2;
}

/* filter panel open (Figma "Businesses search filter"): the controls get a
   1px #10172D@10% border, the filter button turns blue */
.listing-archive.is-filters-open .listing-search,
.listing-archive.is-filters-open .listing-toolbar__btn:not(.listing-toolbar__btn--primary) {
  border-color: rgba(16, 23, 45, 0.1);
}

.listing-archive.is-filters-open .listing-toolbar__icon-btn {
  border-color: rgba(16, 23, 45, 0.1);
  background: var(--color-blue);
  color: var(--color-white);
}

/* ---- Filter row: 5 selects (215 wide) + price min/max (299), 10 apart,
   40 below the search row; label 18/125 #0B1126@50%, 10 above a 60 tall
   white field (1px #10172D@10%, 10 radius) ---- */
.listing-filters {
  display: none;
  grid-template-columns: repeat(5, minmax(0, 215fr)) minmax(0, 299fr);
  gap: 10px;
  margin-top: 40px;
}

.listing-archive.is-filters-open .listing-filters {
  display: grid;
}

.listing-field {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.listing-field__label {
  font-size: 18px;
  line-height: 1.25;
  letter-spacing: -0.04em;
  color: rgba(11, 17, 38, 0.5);
}

.listing-field__control {
  width: 100%;
  min-width: 0;
  height: 60px;
  padding: 0 16px;
  border: 1px solid rgba(16, 23, 45, 0.1);
  border-radius: 10px;
  background: var(--color-card-bg);
  font-family: var(--font-body);
  font-size: 18px;
  letter-spacing: -0.04em;
  color: #0b1126;
}

select.listing-field__control {
  appearance: none;
  padding-right: 40px;
  background: var(--color-card-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%2310172D' stroke-width='1.5'%3E%3Cpolyline points='1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E") right 16px center / 12px 8px no-repeat;
  cursor: pointer;
}

.listing-field__pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.listing-toolbar__meta {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  margin-top: 30px;
}

.listing-archive.is-filters-open .listing-toolbar__meta {
  margin-top: 50px;
}

.listing-sort {
  position: relative;
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 15px;
  color: #10172d;
}

.listing-sort select {
  appearance: none;
  border: 0;
  background: none;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.25;
  letter-spacing: -0.04em;
  color: inherit;
  cursor: pointer;
  padding-right: 35px;
  margin-right: -35px;
}

.listing-sort svg {
  pointer-events: none;
}

.listing-toolbar__views {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
}

.listing-toolbar__toggle {
  display: inline-flex;
  flex-direction: row;
  gap: 10px;
  margin-left: 30px;
}

.listing-toolbar__view {
  display: inline-flex;
  padding: 0;
  border: 0;
  background: none;
  color: rgba(32, 111, 208, 0.5);
  cursor: pointer;
  transition: color var(--transition);
}

.listing-toolbar__view[data-table-print],
.listing-toolbar__view[aria-current="true"],
.listing-toolbar__view:hover {
  color: var(--color-blue);
}

/* ---- three views, one scope ([data-view-scope] + main.js) ---- */
[data-view-scope]:not(.is-table-view) .view-table,
[data-view-scope].is-table-view .view-list,
[data-view-scope].is-table-view .view-grid {
  display: none;
}

/* ---- Info chip (Figma Frame 162–164): #F4F6FA, 50 radius, 45 tall,
   20 inset, 16/125 #10172D; flag 32×21, 8 before the name ---- */
.info-chip {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  height: 45px;
  padding: 0 20px;
  border-radius: 50px;
  background: var(--color-page-bg);
  font-size: 16px;
  line-height: 1.25;
  letter-spacing: -0.04em;
  white-space: nowrap;
  color: #10172d;
}

.info-chip .country-flag {
  width: 32px;
  height: 21px;
  object-fit: cover;
}

.listing-card__chips {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 10px;
}

/* ---- Arrow button (Figma Frame 166): 44×44, 8 radius ---- */
.listing-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 8px;
  background: var(--color-blue);
  color: var(--color-white);
}

.listing-arrow--light {
  background: #2481f2;
}

/* ---- List card (Figma Frame 147): 1465 wide, white, 30 radius, 30 inset;
   photo 387×246 (20 radius) · 30 · text column (chips → 20 → title 35
   serif → 20 → excerpt 18/125 @80%) · 30 · 1px #06438E@10% rule · 30 ·
   figures 328 (Target Price 35 serif #206FD0, rule, Revenue/EBITDA 24 serif,
   20 apart; arrow bottom right). Hover: #206FD0@5% fill, blue title ---- */
.listing-cards {
  display: flex;
  flex-direction: column;
  gap: 30px;
  margin-top: 50px;
}

.listing-card,
.listing-tile {
  border-radius: 30px;
  background: var(--color-card-bg);
  transition: background var(--transition);
}

.listing-card:hover {
  background: #f4f8fd; /* = rgba(32, 111, 208, 0.05) on #F4F6FA, opaque so it reads on white */
}

.listing-card__link {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 30px;
  padding: 30px;
  color: inherit;
}

.listing-card__image {
  flex: 0 0 387px;
  width: 387px;
  height: 246px;
  border-radius: 20px;
  object-fit: cover;
}

.listing-card__main {
  display: flex;
  flex-direction: column;
  gap: 20px;
  flex: 1 1 600px;
  min-width: 0;
  padding-right: 30px;
  border-right: 1px solid rgba(6, 67, 142, 0.1);
}

.listing-card__title {
  max-width: 534px;
  margin: 0;
  font-family: var(--font-heading);
  font-size: var(--fluid-35);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.04em;
  color: #10172d;
  transition: color var(--transition);
}

.listing-card:hover .listing-card__title {
  color: var(--color-blue);
}

.listing-card__excerpt,
.listing-tile__excerpt {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
  margin: 0;
  font-size: var(--fluid-18);
  line-height: 1.25;
  letter-spacing: -0.04em;
  color: rgba(16, 23, 45, 0.8);
}

.listing-card__figures {
  display: flex;
  flex-direction: column;
  gap: 20px;
  flex: 0 0 328px;
  min-width: 0;
}

.listing-figure {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.listing-figure__label {
  font-size: var(--fluid-18);
  line-height: 1.25;
  letter-spacing: -0.04em;
  color: rgba(16, 23, 45, 0.5);
}

.listing-figure__value {
  font-family: var(--font-heading);
  font-size: var(--fluid-24);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--color-blue);
}

.listing-figure--lead {
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(6, 67, 142, 0.1);
}

.listing-figure--lead .listing-figure__value {
  font-size: var(--fluid-35);
}

.listing-card__figures-row {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-top: -20px; /* the rule's 20 padding already separates them */
  padding-top: 20px;
}

.listing-card__figures-col {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* ---- Grid tile (Figma Frame 147/153): 3 columns of 474.67, 20 apart,
   700 tall, white, 30 radius, 20 inset; photo 244 tall (20 radius) → 20 →
   chips → 25 → title 27 serif → 20 → excerpt → figures at the bottom:
   rows 308 wide (label 18 @50% left, value right 18 serif #06438E, Target
   Price 25), 10 apart, rule under the first; arrow #2481F2 to the right.
   Hover: #06438E@5% fill, #06438E title ---- */
.listing-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin-top: 50px;
}

.listing-grid > * {
  min-width: 0; /* the one-row chip strip must not widen the column */
}

.listing-tile:hover {
  background: #f1f4f8; /* = rgba(6, 67, 142, 0.05) on white */
}

.listing-tile__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 700px;
  padding: 20px;
  color: inherit;
}

.listing-tile__image {
  width: 100%;
  height: 244px;
  margin-bottom: 20px;
  border-radius: 20px;
  object-fit: cover;
}

/* grid chips (Figma Frame 162–164 in the tile): 15 inset, 8 apart, one row */
.listing-tile .listing-card__chips {
  flex-wrap: nowrap;
  gap: 8px;
  overflow: hidden;
}

.listing-tile .info-chip {
  padding: 0 15px;
}

.listing-tile__title {
  margin: 25px 0 0;
  font-family: var(--font-heading);
  font-size: var(--fluid-27);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.04em;
  color: #10172d;
  transition: color var(--transition);
}

.listing-tile:hover .listing-tile__title {
  color: var(--color-link);
}

.listing-tile__excerpt {
  margin-top: 20px;
  -webkit-line-clamp: 5;
}

.listing-tile__figures {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-top: auto;
  padding-top: 30px;
}

.listing-tile__rows {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 0 1 308px;
  min-width: 0;
  margin: 0;
}

.listing-tile__row {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.listing-tile__row dt {
  font-size: var(--fluid-18);
  line-height: 1.25;
  letter-spacing: -0.04em;
  color: rgba(16, 23, 45, 0.5);
}

.listing-tile__row dd {
  margin: 0;
  font-family: var(--font-heading);
  font-size: var(--fluid-18);
  line-height: 1.25;
  letter-spacing: -0.04em;
  white-space: nowrap;
  color: var(--color-link);
}

.listing-tile__row--lead {
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(16, 23, 45, 0.1);
}

.listing-tile__row--lead dd {
  font-size: clamp(20px, 1.3021vw, 25px);
}

/* ---- Table view (Figma "Businesses for sale"): action buttons (60 tall,
   white, 1px #10172D@10%, 10 radius, 20 inset, icon 10 before the label,
   10 apart) 30 below the toolbar → 20 → table across the full page width
   (white, 10 radius, scrolls sideways; 40px rows, 16/125, header @50%,
   values @80%, name #06438E; 1px #000@10% rules; hover/selected row
   #06438E@5%). Column starts at 1920: 20 / 60 / 178 / 760 / 906 / 1051 /
   1185 / 1315 / 1442 / 1665 / 1880. ---- */
.listing-table-actions {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 30px;
}

.listing-action {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  height: 60px;
  padding: 0 20px;
  border: 1px solid rgba(16, 23, 45, 0.1);
  border-radius: 10px;
  background: var(--color-card-bg);
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.25;
  letter-spacing: -0.04em;
  color: #10172d;
  cursor: pointer;
  transition: border-color var(--transition);
}

.listing-action:hover {
  border-color: var(--color-blue);
}

.listing-action--muted {
  background: rgba(255, 255, 255, 0.5);
  color: rgba(16, 23, 45, 0.5);
}

.listing-table-wrap {
  position: relative; /* keeps the absolutely positioned .visually-hidden
                         header labels inside the scroll area */
  margin: 20px calc(50% - 50cqw) 0;
  overflow-x: auto;
  border-radius: 10px;
  background: var(--color-card-bg);
  scrollbar-color: var(--color-blue) transparent;
}

.listing-table-wrap::-webkit-scrollbar {
  height: 6px;
}

.listing-table-wrap::-webkit-scrollbar-thumb {
  border-radius: 50px;
  background: var(--color-blue);
}

/* 1920 = the Figma column widths exactly; below that the columns shrink
   with the window (never under a readable minimum) and the name column
   takes the rest — sideways scrolling only under 1200px */
.listing-table {
  width: 100%;
  min-width: 1200px;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 16px;
  line-height: 1.25;
  letter-spacing: -0.04em;
  color: rgba(16, 23, 45, 0.8);
}

.listing-table th,
.listing-table td {
  padding: 10px 20px 10px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  text-align: left;
  vertical-align: middle;
}

.listing-table th {
  height: 60px;
  font-weight: 400;
  vertical-align: top;
  color: rgba(16, 23, 45, 0.5);
}

.listing-table td {
  height: 40px;
  padding-block: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.listing-table th:nth-child(1), .listing-table td:nth-child(1) { width: 60px; padding-left: 20px; }
.listing-table th:nth-child(2) { width: max(100px, 6.1458vw); }  /* 118 @1920 */
.listing-table th:nth-child(3) { width: auto; }                   /* name: the rest (582 @1920) */
.listing-table th:nth-child(4) { width: max(125px, 7.6042vw); }  /* 146 */
.listing-table th:nth-child(5) { width: max(110px, 7.5521vw); }  /* 145 */
.listing-table th:nth-child(6) { width: max(110px, 6.9792vw); }  /* 134 */
.listing-table th:nth-child(7) { width: max(80px, 6.7708vw); }   /* 130 */
.listing-table th:nth-child(8) { width: max(80px, 6.6146vw); }   /* 127 */
.listing-table th:nth-child(9) { width: max(150px, 11.6146vw); } /* 223 */
.listing-table th:nth-child(10) { width: max(150px, 11.1979vw); } /* 215 */
.listing-table th:nth-child(11), .listing-table td:nth-child(11) { width: 40px; padding-right: 20px; }

.listing-table tbody tr {
  transition: background var(--transition);
}

.listing-table tbody tr:hover,
.listing-table tbody tr.is-selected {
  background: rgba(6, 67, 142, 0.05);
}

.listing-table__name a {
  color: var(--color-link);
}

.listing-table__name a:hover {
  text-decoration: underline;
}

.listing-table__country {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
}

.listing-table__country .country-flag {
  width: 24px;
  height: 16px;
  object-fit: cover;
}

.listing-table__go a {
  display: inline-flex;
  color: var(--color-link);
}

.listing-table input[type="checkbox"] {
  appearance: none;
  display: block;
  width: 20px;
  height: 20px;
  margin: 0;
  border: 1px solid rgba(16, 23, 45, 0.1);
  border-radius: 2px;
  background: var(--color-card-bg);
  cursor: pointer;
}

.listing-table input[type="checkbox"]:checked {
  border-color: var(--color-blue);
  background: var(--color-blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='10' viewBox='0 0 12 10' fill='none' stroke='white' stroke-width='2'%3E%3Cpolyline points='1 5 4.5 8.5 11 1.5'/%3E%3C/svg%3E") center / 12px 10px no-repeat;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.listing-empty {
  margin: 50px 0 0;
  font-size: var(--fluid-20);
  color: rgba(16, 23, 45, 0.5);
}

/* Disclaimer: 70 below the last card, 20/125 #10172D@50% */
.listing-disclaimer {
  margin: 70px 0 0;
  font-size: var(--fluid-20);
  line-height: 1.25;
  letter-spacing: -0.04em;
  color: rgba(16, 23, 45, 0.5);
}

/* ---- Detail page (light, no dark hero): header → 15 → breadcrumb
   (#10172D @50%, current #10172D) → 70 → "Return to listing" → 40 →
   title 84 serif #06438E (1170 wide) → 40 → 1170 | 20 | 570 columns.
   Left: photo 1170×600 (30 radius) → 40 → facts (3 columns at 0 / 224 /
   486; label 18 @50%, 10, value 20; rows 40 apart; share/print/save icons
   right) → 40 → white sections (40 inset, 30 radius, 20 apart: title 35
   serif #06438E, 30, 1px rule, 30, body 18/135 @80%, paragraphs 15 apart)
   → 50 → button. Right: sticky form card. ---- */
.listing-detail {
  padding: 15px 0 clamp(72px, 7.2917vw, 140px);
  background: var(--color-page-bg);
  color: #10172d;
}

.breadcrumb--light {
  justify-content: flex-start;
  margin: 0;
  color: rgba(16, 23, 45, 0.5);
}

.breadcrumb--light a:hover,
.breadcrumb--light .is-current {
  color: #10172d;
}

.listing-detail__back {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  margin-top: clamp(32px, 3.6458vw, 70px);
  font-size: var(--fluid-18);
  line-height: 1.25;
  letter-spacing: -0.04em;
  color: #10172d;
  transition: opacity var(--transition);
}

.listing-detail__back:hover {
  opacity: 0.6;
}

.listing-detail__title {
  /* Figma box 1170; browsers set Noto Serif a few px wider than Figma, +10
     keeps Figma's 2-line break ("… Power / Plant RTB …" would else wrap) */
  max-width: 1180px;
  margin: clamp(24px, 2.0833vw, 40px) 0 0;
  font-family: var(--font-heading);
  font-size: var(--fluid-84);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--color-link);
}

.listing-detail__layout {
  display: grid;
  grid-template-columns: minmax(0, 1170fr) minmax(0, 570fr);
  gap: 20px;
  align-items: start;
  margin-top: clamp(24px, 2.0833vw, 40px);
}

.listing-detail__main {
  min-width: 0;
}

.listing-detail__media {
  margin: 0;
  overflow: hidden;
  border-radius: 30px;
  background: #d9d9d9;
  aspect-ratio: 1170 / 600;
}

.listing-detail__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.listing-facts {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  gap: 30px;
  margin-top: 40px;
}

.listing-facts__grid {
  display: grid;
  grid-template-columns: 224px 262px auto;
  gap: 40px 0;
  margin: 0;
}

.listing-fact dt {
  font-size: var(--fluid-18);
  line-height: 1.25;
  letter-spacing: -0.04em;
  color: rgba(16, 23, 45, 0.5);
}

.listing-fact dd {
  margin: 10px 0 0;
  font-size: var(--fluid-20);
  line-height: 1.25;
  letter-spacing: -0.04em;
  color: #10172d;
}

.listing-fact__country {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
}

.listing-fact__country .country-flag {
  width: 30px;
  height: 20px;
  object-fit: cover;
}

.listing-facts__actions {
  display: flex;
  flex-direction: row;
  gap: 22px;
}

.listing-icon-btn {
  display: inline-flex;
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-link);
  cursor: pointer;
  transition: color var(--transition);
}

.listing-icon-btn svg :is(rect, path, polyline) {
  fill: transparent;
  transition: fill var(--transition);
}

/* Daria #45: on hover the icons fill with the accent colour */
.listing-icon-btn:is(:hover, :focus-visible) {
  color: #2481f2;
}

.listing-icon-btn:is(:hover, :focus-visible) svg :is(rect, path[d$="z"]) {
  fill: rgba(36, 129, 242, 0.25);
}

.listing-section {
  margin-top: 20px;
  padding: 40px;
  border-radius: 30px;
  background: var(--color-card-bg);
}

.listing-facts + .listing-section {
  margin-top: 40px;
}

.listing-section__head {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  gap: 30px;
}

.listing-section__title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: var(--fluid-35);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--color-link);
}

.listing-section__meta {
  margin: 0;
  max-width: 257px;
  font-size: var(--fluid-16);
  line-height: 1.25;
  letter-spacing: -0.04em;
  color: rgba(16, 23, 45, 0.5);
}

.listing-section__body {
  margin-top: 30px;
  padding-top: 30px;
  border-top: 1px solid rgba(16, 23, 45, 0.1);
  font-size: var(--fluid-18);
  line-height: 1.35;
  letter-spacing: -0.04em;
  color: rgba(16, 23, 45, 0.8);
}

.listing-section__body p {
  margin: 0;
}

.listing-section__body p + p {
  margin-top: 15px;
}

/* real listing texts (imported): plain lists, sub-headings, tables, images */
.listing-section__body > * + * {
  margin-top: 15px;
}

.listing-section__body ul:not([class]),
.listing-section__body ol:not([class]) {
  margin: 0;
  padding-left: 1.2em;
}

.listing-section__body ul:not([class]) {
  list-style: disc;
}

.listing-section__body ol:not([class]) {
  list-style: decimal;
}

.listing-section__body li + li {
  margin-top: 8px;
}

.listing-section__body li::marker {
  color: var(--color-link);
}

.listing-section__body h5,
.listing-section__body h6 {
  margin: 0;
  font-size: var(--fluid-20);
  font-weight: 500;
  color: #10172d;
}

.listing-section__body img {
  max-width: 100%;
  height: auto;
  border-radius: 10px;
}

.listing-section__body table {
  width: 100%;
  border-collapse: collapse;
}

.listing-section__body td,
.listing-section__body th {
  padding: 8px 0;
  border-bottom: 1px solid rgba(16, 23, 45, 0.1);
  text-align: left;
}

/* Investment Highlights: the global numbered tiles, 2 columns at 0 / 550,
   46×46 #F4F6FA badge, 20 before the text, rows 25 apart */
.listing-section .detail-tiles {
  gap: 25px 0;
  margin: 0;
}

.listing-section .detail-tiles__num {
  width: 46px;
  height: 46px;
  background: var(--color-page-bg);
}

.listing-section .detail-tiles__text {
  margin-top: 0;
  line-height: 1.25;
  color: rgba(16, 23, 45, 0.8);
}

/* Basic Details: 2 columns of 525, 40 apart; rows 44 pitch with a 1px rule;
   label left, value right-aligned #10172D */
.listing-basic {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 40px;
  margin-top: -10px;
}

.listing-basic__col {
  margin: 0;
}

.listing-basic__row {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: 20px;
  padding: 10px 0 9px; /* 44px pitch incl. the 1px rule */
  border-bottom: 1px solid rgba(16, 23, 45, 0.1);
}

.listing-basic__row:last-child {
  border-bottom: 0;
}

.listing-basic__row dt {
  color: rgba(16, 23, 45, 0.5);
}

.listing-basic__col--figures dt {
  color: rgba(16, 23, 45, 0.8);
}

.listing-basic__row dd {
  margin: 0;
  text-align: right;
  color: #10172d;
}

/* Deal tombstones (static block): header @50%, rows 15 above/below,
   1px rules, Deals column at ~995 */
.listing-tombstones {
  width: 100%;
  margin-top: -30px;
  border-collapse: collapse;
}

.listing-tombstones th,
.listing-tombstones td {
  padding: 15px 0;
  text-align: left;
  font-weight: 400;
  border-bottom: 1px solid rgba(16, 23, 45, 0.1);
}

.listing-tombstones th {
  padding-top: 30px;
  color: rgba(16, 23, 45, 0.5);
}

.listing-tombstones tr > :last-child {
  width: 105px;
}

.listing-tombstones tbody tr:last-child td {
  border-bottom: 0;
  padding-bottom: 0;
}

.listing-detail__cta {
  min-width: 240px;
  margin-top: 50px;
}

/* ---- Listings responsive ---- */
@media (max-width: 1500px) {
  .listing-card__image {
    flex-basis: 300px;
    width: 300px;
  }

  .listing-card__figures {
    flex-basis: 260px;
  }
}

@media (max-width: 1280px) {
  .listing-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .listing-filters {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .listing-card__link {
    flex-wrap: wrap;
  }

  .listing-card__main {
    flex-basis: calc(100% - 330px);
    padding-right: 0;
    border-right: 0;
  }

  .listing-card__figures {
    flex: 1 1 100%;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-end;
    padding-top: 20px;
    border-top: 1px solid rgba(6, 67, 142, 0.1);
  }

  .listing-figure--lead {
    padding-bottom: 0;
    border-bottom: 0;
  }

  .listing-card__figures-row {
    flex: 1;
    margin-top: 0;
    padding-top: 0;
  }

  .listing-card__figures-col {
    flex-direction: row;
    gap: 40px;
  }

  .listing-detail__layout {
    grid-template-columns: 1fr;
  }

  .listing-detail .form-card {
    position: static;
  }
}

@media (max-width: 900px) {
  .listing-toolbar__row {
    flex-wrap: wrap;
  }

  .listing-search {
    flex-basis: 100%;
  }

  .listing-toolbar__btn--primary {
    flex: 1;
    min-width: 0;
  }

  .listing-card__image {
    flex-basis: 100%;
    width: 100%;
    height: auto;
    aspect-ratio: 387 / 246;
  }

  .listing-card__main {
    flex-basis: 100%;
  }

  .listing-facts {
    flex-direction: column;
  }

  .listing-facts__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 30px 20px;
  }

  .listing-section .detail-tiles,
  .listing-basic {
    grid-template-columns: 1fr;
  }

  .listing-basic__col:first-child .listing-basic__row:last-child {
    border-bottom: 1px solid rgba(16, 23, 45, 0.1);
  }
}

@media (max-width: 700px) {
  .listing-toolbar {
    padding: 10px;
  }

  .listing-filters {
    grid-template-columns: 1fr;
  }

  .listing-grid {
    grid-template-columns: 1fr;
  }

  .listing-tile__link {
    min-height: 0;
  }

  .listing-card__link {
    padding: 20px;
    gap: 20px;
  }

  .listing-card__figures {
    flex-direction: column;
    align-items: stretch;
  }

  .listing-card__figures-col {
    gap: 20px;
  }

  .listing-section {
    padding: 24px;
  }

  .listing-section__head {
    flex-direction: column;
    gap: 10px;
  }

  .listing-facts__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .listing-toolbar__toggle {
    margin-left: 10px;
  }

  /* chips may wrap on phones, a bit tighter */
  .listing-tile .listing-card__chips {
    flex-wrap: wrap;
  }

  .info-chip,
  .listing-tile .info-chip {
    height: 38px;
    padding: 0 14px;
    font-size: 14px;
  }
}

/* ==========================================================================
   24. About (about.html), Newsroom (newsroom.html), Press (press.html), 404
   — Figma "About" (1920×9657), "Newsroom" (1920×5776), "Press"
   (1920×3783); 404 has no frame and only reuses global pieces. Generated
   by tools/build_pages_html.py. Values exact at 1920, fluid below.
   Global pieces introduced here: .page-hero__eyebrow, .person-card(s)
   (team card, also the spec the Team grid view never had), .kv-list
   (label / value rows between rules), .logo-marquee, .logo-grid/.logo-card,
   .filter-sidebar (.year-picker, .filter-nav), .news-card, .filter-empty.
   Animation notes from the Figma comments on "About": #76 map → points →
   arcs; #78 statement fills letter by letter from 50%; #79 video stays
   fixed while text and figures scroll over it; #80/#81 the next section
   slides over the previous one (rounded panels with z-index).
   ========================================================================== */

/* ---- Hero eyebrow (About: 18/120 white@80% at y243, 20 above the title) ---- */
.page-hero__eyebrow {
  margin: 0 0 clamp(12px, 1.0417vw, 20px);
  font-size: var(--fluid-18);
  line-height: 1.2;
  letter-spacing: -0.04em;
  color: rgba(255, 255, 255, 0.8);
}

/* About hero: breadcrumb y150 → eyebrow y243 → "MergersCorp" 100/100 at
   y285 → map 264 below the title (no panel overlap here) */
.about-hero {
  padding-bottom: clamp(72px, 13.75vw, 264px);
}

.about-hero h1 {
  font-size: var(--fluid-100);
  margin-bottom: 0;
}

/* ---- World map (Figma "Group 452", 1920×1266 at y649): map #10172D@60%,
   54 points #778AC6 r7.5 (full or 50%), 6 tapered white@50% arcs; "Our
   team" 84/105 + two 20/125 paragraphs centered 412 below the map top ---- */
.about-map {
  position: relative;
  overflow: hidden;
  min-height: calc(1266 / 1920 * 100vw);
  padding: clamp(150px, 21.4583vw, 412px) 0 clamp(120px, 29.7396vw, 571px);
  background: var(--color-navy); /* covers the sticky hero sliding under it */
  text-align: center;
}

.about-map__stage {
  position: absolute;
  top: 0;
  left: 50%;
  width: max(100%, 1100px);
  aspect-ratio: 1920 / 1266;
  transform: translateX(-50%);
  pointer-events: none;
}

.about-map__world,
.about-map__overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.about-map__dot {
  --dot-o: 0.5;
  fill: #778ac6;
  opacity: var(--dot-o);
  transform-box: fill-box;
  transform-origin: center;
}

.about-map__dot.is-hub {
  --dot-o: 1;
}

.about-map__arc {
  fill: #fff;
  fill-opacity: 0.5;
}

/* mask stroke, same draw-in trick as .home-hero__orbit-line */
.about-map__arc-line {
  fill: none;
  stroke: #fff;
  stroke-width: 24;
  stroke-linecap: round;
  stroke-dasharray: 1 1;
  stroke-dashoffset: 0;
}

/* JS armed: map fades in → points pop in west → east → arcs draw + loop */
.about-map.is-armed .about-map__world {
  opacity: 0;
  transition: opacity 1.2s ease;
}

.about-map.is-armed .about-map__dot {
  opacity: 0;
}

.about-map.is-armed .about-map__arc-line {
  stroke-dashoffset: 1;
}

.about-map.is-in .about-map__world {
  opacity: 1;
}

.about-map.is-in .about-map__dot {
  animation: about-dot-in 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: calc(0.9s + var(--i) * 40ms);
}

.about-map.is-in .about-map__arc-line {
  animation: home-orbit 9s ease-in-out infinite both;
  animation-delay: calc(3.2s + var(--i) * 0.6s);
}

@keyframes about-dot-in {
  from { opacity: 0; transform: scale(0); }
  to { opacity: var(--dot-o); transform: scale(1); }
}

.about-map__text {
  position: relative;
}

.about-map__text h2 {
  margin: 0;
  font-family: var(--font-heading);
  font-size: var(--fluid-84);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.04em;
}

.about-map__text p {
  max-width: 640px;
  margin: 15px auto 0;
  font-size: var(--fluid-20);
  line-height: 1.25;
  letter-spacing: -0.04em;
}

.about-map__text h2 + p {
  margin-top: clamp(20px, 1.5625vw, 30px);
}

/* ---- Our professionals (white panel y1931, r30, 1515 tall; slides over
   the map and its rounded bottom covers the video's top 34px) ---- */
.about-team {
  position: relative;
  z-index: 2;
  margin-top: clamp(8px, 0.8333vw, 16px);
  padding: clamp(56px, 6.5104vw, 125px) 0 clamp(80px, 10.8854vw, 209px);
  border-radius: 30px;
  background: var(--color-card-bg);
  color: #10172d;
}

.about-team__title {
  margin: 0 0 clamp(32px, 3.125vw, 60px);
  text-align: center;
  font-family: var(--font-heading);
  font-size: var(--fluid-60);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.04em;
  color: var(--color-link);
}

/* search 353 left, Country + Position 180×60 right, 10 apart */
.about-team__toolbar.about-team__toolbar {
  gap: 10px;
  margin-bottom: clamp(24px, 2.0833vw, 40px);
}

.about-team__toolbar .service-search {
  margin-right: auto;
}

.about-team__toolbar select {
  width: 180px;
  min-width: 0;
  padding-inline: 15px 40px;
  font-size: 18px;
  letter-spacing: -0.04em;
  color: #10172d;
}

/* ---- Person card (Figma "Frame 235", 336×449): 336² photo r20 → 20 →
   name 27/100 #0B1126 → 15 → flag 34×23 + "City, Country" 18/125 @80%
   → 8 → position 16/125 @50%. 5 columns, 20 gap. ---- */
.person-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 20px;
}

.person-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  color: #0b1126;
}

.person-card__photo {
  display: block;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 20px;
  background: #e9edf4;
}

.person-card__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 600ms ease;
}

.person-card:hover .person-card__photo img {
  transform: scale(1.04);
}

.person-card__name {
  margin: 20px 0 0;
  font-family: var(--font-body);
  font-size: var(--fluid-27);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.04em;
}

.person-card__name a:hover {
  color: var(--color-link);
}

.person-card__location {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 15px 0 0;
  font-size: var(--fluid-18);
  line-height: 1.25;
  letter-spacing: -0.04em;
  color: rgba(11, 17, 38, 0.8);
}

.person-card__location img {
  flex-shrink: 0;
  width: 34px;
  height: 23px;
  object-fit: cover;
}

.person-card__position {
  margin: 8px 0 0;
  font-size: var(--fluid-16);
  line-height: 1.25;
  letter-spacing: -0.04em;
  color: rgba(11, 17, 38, 0.5);
}

.filter-empty {
  margin: 0;
  padding: 40px 0;
  text-align: center;
  font-size: var(--fluid-18);
  letter-spacing: -0.04em;
  color: rgba(16, 23, 45, 0.5);
}

/* ---- Video section (Figma "Group 441" y3412 + "Group 442" y4492, each
   1920×1080, image/video + black 60%): the media is sticky for the whole
   section; part 1 = statement (60/105, x818, 140 from the top, muted tail
   fills word by word) + 20/125 text 30 below (538 wide); part 2 = four
   figures (2px white line 433 wide → 30 → value 100/100 → 10 → label
   20/125 @80%) at the Figma positions. ---- */
.about-film {
  position: relative;
  z-index: 1;
  margin-top: calc(-1 * clamp(20px, 1.7708vw, 34px));
  background: #000;
  color: var(--color-white);
}

.about-film__media {
  position: sticky;
  top: 0;
  height: 100vh;
  margin-bottom: -100vh;
  overflow: hidden;
}

.about-film__media img,
.about-film__media video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.about-film__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
}

.about-film__intro {
  position: relative;
  min-height: max(100vh, 560px);
  padding-top: clamp(80px, 7.2917vw, 140px);
  --fill-color: var(--color-white);
  --fill-muted: rgba(255, 255, 255, 0.5);
}

.about-film__intro > * {
  margin-left: 41.9318%; /* x818 in the 1760 content box */
}

.about-film__title {
  margin-block: 0;
  font-family: var(--font-heading);
  font-size: var(--fluid-60);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.04em;
}

.about-film__title .is-muted {
  color: rgba(255, 255, 255, 0.5);
}

.about-film__text {
  max-width: 538px;
  margin-block: clamp(20px, 1.5625vw, 30px) 0;
  font-size: var(--fluid-20);
  line-height: 1.25;
  letter-spacing: -0.04em;
  color: rgba(255, 255, 255, 0.8);
}

.about-film__stats {
  position: relative;
  height: clamp(640px, 56.25vw, 1080px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.about-stat {
  position: absolute;
  width: max(24.6023%, 240px); /* 433 / 1760 */
  padding-top: clamp(20px, 1.5625vw, 30px);
}

.about-stat::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--color-white);
  transform-origin: left;
  transition: transform 800ms cubic-bezier(0.22, 1, 0.36, 1);
}

.about-stat.reveal.is-armed:not(.is-visible)::before {
  transform: scaleX(0);
}

/* top = Figma y − 4492 (section top) over the 1080 frame; left in the
   1760 content box */
.about-stat--1 { top: 12.963%; left: 0; }
.about-stat--2 { top: 31.944%; left: 75.4545%; }
.about-stat--3 { top: 54.63%; left: 50.2841%; }
.about-stat--4 { top: 71.759%; left: 0; }

.about-stat__value {
  display: block;
  font-family: var(--font-heading);
  font-size: var(--fluid-100);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.04em;
}

.about-stat__label {
  display: block;
  margin-top: 10px;
  font-size: var(--fluid-20);
  line-height: 1.25;
  letter-spacing: -0.04em;
  color: rgba(255, 255, 255, 0.8);
}

/* ---- Core expertise (light panel y5522, r30, 1154 tall, slides 50px over
   the video): 84/105 heading (x80, w1167) → 60 → text column x673 w498
   + figure table x1246–1840 → 125 → press logo strip (40 tall) → 135 ---- */
.about-expertise {
  position: relative;
  z-index: 2;
  margin-top: calc(-1 * clamp(24px, 2.6042vw, 50px));
  padding: clamp(64px, 7.2917vw, 140px) 0 clamp(64px, 7.0313vw, 135px);
  border-radius: 30px;
  background: var(--color-page-bg);
  color: #10172d;
  --fill-color: var(--color-link);
  --fill-muted: rgba(16, 23, 45, 0.3);
}

.about-expertise__title {
  max-width: 1167px;
  margin: 0;
  font-family: var(--font-heading);
  font-size: var(--fluid-84);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.04em;
  color: var(--color-link);
}

.about-expertise__title .is-muted {
  color: rgba(16, 23, 45, 0.3);
}

.about-expertise__grid {
  display: grid;
  grid-template-columns: minmax(0, 518fr) minmax(0, 498fr) minmax(0, 594fr);
  column-gap: clamp(24px, 3.9063vw, 75px);
  align-items: start;
  margin-top: clamp(32px, 3.125vw, 60px);
}

.about-expertise__text {
  grid-column: 2;
}

.about-expertise__text p {
  margin: 0;
  font-size: var(--fluid-20);
  line-height: 1.25;
  letter-spacing: -0.04em;
  color: rgba(16, 23, 45, 0.8);
}

.about-expertise__text p + p {
  margin-top: 18px;
}

.about-expertise .kv-list {
  grid-column: 3;
}

/* ---- Label / value rows between 1px #10172D@30% rules, 20px padding
   (About figure table, Press contacts) ---- */
.kv-list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-bottom: 1px solid rgba(16, 23, 45, 0.3);
}

.kv-list__row {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  gap: 30px;
  padding: 20px 0 19px; /* rules 65 / 90 apart in Figma incl. the 1px line */
  border-top: 1px solid rgba(16, 23, 45, 0.3);
  font-size: var(--fluid-20);
  line-height: 1.25;
  letter-spacing: -0.04em;
}

.kv-list__row > :first-child {
  max-width: 430px;
}

.kv-list__row > :last-child {
  text-align: right;
}

.kv-list__key {
  color: rgba(16, 23, 45, 0.5);
}

.kv-list__val {
  color: #10172d;
}

a.kv-list__val:hover {
  color: var(--color-link);
}

.kv-list--stat .kv-list__val {
  font-weight: 500;
  color: var(--color-link);
}

/* ---- Logo strip (Figma "Frame 227", 1760×40, logos #10172D@20%, 50
   apart, 188px fade at both edges) — scrolls slowly as a marquee ---- */
.logo-marquee {
  margin-top: clamp(56px, 6.5104vw, 125px);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10.68%, #000 89.32%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 10.68%, #000 89.32%, transparent);
}

.logo-marquee__track {
  display: flex;
  width: max-content;
  animation: logo-marquee 50s linear infinite;
}

.logo-marquee__track img {
  display: block;
  width: auto;
  height: clamp(28px, 2.0833vw, 40px);
  margin-right: clamp(32px, 2.6042vw, 50px);
}

.logo-marquee:hover .logo-marquee__track {
  animation-play-state: paused;
}

@keyframes logo-marquee {
  to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .logo-marquee__track {
    animation: none;
  }
}

/* ---- Press logo grid (Figma "Frame 176"): 5 × 340×142 white r10 cards,
   15 gap, logo 260×~102 centered (20/40 inset) ---- */
.logo-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 15px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.logo-card {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 340 / 142;
  padding: 20px 11.765%; /* 40 / 340 */
  border-radius: 10px;
  background: var(--color-card-bg);
}

.logo-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ---- Press contact (y1856, 140 below the grid): text 20/135 @80% x80
   w654 | rows x1113–1836 ---- */
.press-contact {
  display: grid;
  grid-template-columns: minmax(0, 654fr) minmax(0, 723fr);
  column-gap: clamp(32px, 19.7396vw, 379px);
  align-items: start;
  margin-top: clamp(64px, 7.2917vw, 140px);
}

.press-contact__text p {
  margin: 0;
  font-size: var(--fluid-20);
  line-height: 1.35;
  letter-spacing: -0.04em;
  color: rgba(16, 23, 45, 0.8);
}

.press-contact__text p + p {
  margin-top: 15px;
}

/* ---- Newsroom: sidebar 300 + 40 + list 1420 ---- */
.news-layout {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 40px;
  align-items: start;
}

/* ---- Filter sidebar (Figma 300×483, white, 1px #000@5%, r10, 20/10
   padding, 20 gap): group title 20/125/500 #06438E; year picker #F4F6FA
   r8 (chevrons, 5 years 18/125 centered, active #06438E, rest @30%);
   category list 18/125 @80%, active row #06438E@10% r3 ---- */
.filter-sidebar {
  position: sticky;
  top: 120px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 20px 10px;
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: 10px;
  background: var(--color-card-bg);
  color: #10172d;
}

.filter-sidebar__group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.filter-sidebar__title {
  margin: 0;
  padding-inline: 10px;
  font-family: var(--font-body);
  font-size: var(--fluid-20);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.04em;
  color: var(--color-link);
}

.filter-sidebar__rule {
  width: calc(100% - 20px);
  margin: 0 10px -1px; /* 0-height line in Figma */
  border: 0;
  border-top: 1px solid rgba(16, 23, 45, 0.05);
}

.year-picker {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  margin-inline: 10px;
  padding: 10px 0;
  border-radius: 8px;
  background: var(--color-page-bg);
}

.year-picker button,
.filter-nav button {
  appearance: none;
  border: 0;
  background: none;
  font: inherit;
  cursor: pointer;
}

.year-picker__step {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 4px;
  padding: 0;
  color: var(--color-link);
}

/* bigger hit area without changing the 4px row in the layout */
.year-picker__step::before {
  content: "";
  position: absolute;
  inset: -8px 0;
}

.year-picker__step {
  position: relative;
}

.year-picker__item {
  height: 23px;
  padding: 0;
  font-size: var(--fluid-18);
  line-height: 1.25;
  letter-spacing: -0.04em;
  text-align: center;
  color: rgba(16, 23, 45, 0.3);
  transition: color var(--transition);
}

.year-picker__item:hover,
.year-picker__item[aria-pressed="true"] {
  color: var(--color-link);
}

.filter-nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.filter-nav__item {
  height: 29px;
  padding: 0 10px;
  border-radius: 3px;
  font-size: var(--fluid-18);
  line-height: 1.25;
  letter-spacing: -0.04em;
  text-align: left;
  color: rgba(16, 23, 45, 0.8);
  transition: background var(--transition);
}

.filter-nav__item:hover {
  background: rgba(6, 67, 142, 0.05);
}

.filter-nav__item[aria-pressed="true"] {
  background: rgba(6, 67, 142, 0.1);
}

/* ---- News card (Figma 1420 wide, white r10, 40 padding): source 18/125
   @80% → 10 → title Noto Serif 35/120 #06438E (≤1000 wide) → 20 → date
   18/125 @50% + 44×44 #2481F2 r8 arrow at the bottom right ---- */
.news-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.news-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(24px, 2.0833vw, 40px);
  border-radius: 10px;
  background: var(--color-card-bg);
  color: #10172d;
}

.news-card__source {
  margin: 0;
  font-size: var(--fluid-18);
  line-height: 1.25;
  letter-spacing: -0.04em;
  color: rgba(16, 23, 45, 0.8);
}

.news-card__title {
  max-width: 1000px;
  margin: 10px 0 0;
  font-family: var(--font-heading);
  font-size: var(--fluid-35);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.04em;
  color: var(--color-link);
}

/* whole card is the link */
.news-card__title a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.news-card__foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
  margin-top: 20px;
  font-size: var(--fluid-18);
  line-height: 1.25;
  letter-spacing: -0.04em;
  color: rgba(16, 23, 45, 0.5);
}

.news-card__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 8px;
  background: #2481f2;
  color: var(--color-white);
  transition: background var(--transition), transform var(--transition);
}

.news-card:hover .news-card__arrow {
  background: var(--color-blue);
  transform: translateX(4px);
}

.news-archive.is-grid-view .news-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.news-archive.is-grid-view .news-card__title {
  font-size: var(--fluid-27);
}

.news-archive.is-grid-view .news-card__foot {
  margin-top: auto;
  padding-top: 20px;
}

/* ---- 404 ---- */
.nf-home {
  display: flex;
  justify-content: center;
  margin-top: clamp(32px, 2.6042vw, 50px);
}

/* ---- Responsive ---- */
@media (max-width: 1400px) {
  .person-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .logo-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 1100px) {
  .about-expertise__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    row-gap: 40px;
  }

  .about-expertise__text {
    grid-column: 1;
  }

  .about-expertise .kv-list {
    grid-column: 2;
  }

  .news-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }

  /* sidebar becomes a compact filter bar above the list */
  .filter-sidebar {
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
  }

  .filter-sidebar__rule {
    display: none;
  }

  .year-picker {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 6px 16px;
    padding: 8px 14px;
  }

  .year-picker__step {
    display: none;
  }

  .filter-nav {
    flex-direction: row;
    flex-wrap: wrap;
  }
}

@media (max-width: 900px) {
  .about-team__toolbar .service-search {
    flex: 1 1 100%;
    width: auto;
    margin-right: 0;
  }

  .about-team__toolbar select {
    flex: 1;
    width: auto;
  }

  .person-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .about-film__intro > * {
    margin-left: 0;
  }

  .about-film__intro {
    min-height: 0;
    padding-bottom: 80px;
  }

  /* figures stack in a 2-column grid instead of the scattered layout */
  .about-film__stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 48px 24px;
    height: auto;
    padding-bottom: 96px;
  }

  .about-stat {
    position: relative;
    top: auto;
    left: auto;
    width: auto;
  }

  .logo-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
  }

  .press-contact {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 40px;
  }

  .news-archive.is-grid-view .news-list {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 700px) {
  .about-expertise__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .about-expertise__text,
  .about-expertise .kv-list {
    grid-column: 1;
  }

  .person-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px 12px;
  }

  .person-card__name {
    margin-top: 14px;
  }

  .person-card__location {
    gap: 6px;
  }

  .person-card__location img {
    width: 24px;
    height: 16px;
  }

  .logo-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .logo-card {
    padding: 14px 10%;
  }

  .kv-list__row {
    gap: 16px;
  }
}

/* ---- Bricks parity for the pages built from §23/§24 (Listings Archive +
   Listing Detail templates, Press page): Bricks' .brxe-block rule (flex,
   column, align-items:flex-start) has our specificity and loads later —
   doubled classes win in Bricks and change nothing in the static build ---- */
.kv-list__row.kv-list__row {
  flex-direction: row;
  align-items: flex-start;
}

.logo-card.logo-card {
  align-items: center;
  justify-content: center;
}

.listing-detail__layout.listing-detail__layout {
  display: grid;
  align-items: start;
}

.listing-detail__main.listing-detail__main {
  display: block;
}

/* facts and sections sit in separate Bricks Text wrappers, so the static
   ".listing-facts + .listing-section" spacing needs its own rule */
.listing-sections > .listing-section:first-child {
  margin-top: 40px;
}

/* ==========================================================================
   25. Legal pages (Privacy Policy, Disclaimer, GDPR … — 10 pages, one Bricks
   template "Legal Page") — Figma "text page layout" (1920×8272): standard
   .page-hero (title + optional 20px subtitle, 976 wide) → .page-panel →
   one 1170 column centered. Typography (all Noto Sans): "Latest Updates"
   20/125 @50% → 40 → 1px #10172D@10% rule → 40 → text 20/135 @80%;
   section heading 35/125/500 #06438E between rules (40 above/below);
   sub-heading 30/125/500 #06438E (40 above, 20 below); lists = numbered
   tiles in 2 columns (46×46 white r8 badge, title 20/500 #06438E, text
   18/125 @80%); tables = rows 67 apart between 1px @10% rules, head
   20/500 #06438E. Content = the page's normal WordPress content.
   ========================================================================== */
.page-hero--legal .page-hero__intro {
  max-width: 976px;
}

.legal-content {
  max-width: 1170px;
  margin-inline: auto;
  font-size: var(--fluid-20);
  line-height: 1.35;
  letter-spacing: -0.04em;
  color: rgba(16, 23, 45, 0.8);
  counter-reset: none;
}

.legal-content > * {
  margin: 0;
}

.legal-content > * + * {
  margin-top: 15px;
}

.legal-content .legal-updated {
  padding-bottom: clamp(24px, 2.0833vw, 40px);
  margin-bottom: clamp(24px, 2.0833vw, 40px);
  border-bottom: 1px solid rgba(16, 23, 45, 0.1);
  line-height: 1.25;
  color: rgba(16, 23, 45, 0.5);
}

.legal-content h2,
.legal-content h3,
.legal-content h4 {
  font-family: var(--font-body);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.04em;
  color: var(--color-link);
  scroll-margin-top: 140px;
}

.legal-content h2 {
  font-size: var(--fluid-35);
}

/* every section after the first sits between rules, 40 apart */
.legal-content > h2:not(:first-child) {
  margin-top: clamp(24px, 2.0833vw, 40px);
  padding-top: clamp(24px, 2.0833vw, 40px);
  border-top: 1px solid rgba(16, 23, 45, 0.1);
}

.legal-content .legal-updated + h2 {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.legal-content h3 {
  font-size: clamp(22px, 1.5625vw, 30px);
}

.legal-content > h2 + *,
.legal-content > h3:not(:first-child) {
  margin-top: clamp(24px, 2.0833vw, 40px);
}

.legal-content > h3 + * {
  margin-top: 20px;
}

.legal-content h4 {
  font-size: var(--fluid-20);
  color: #10172d;
}

.legal-content a {
  color: var(--color-link);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.legal-content a[href^="mailto:"] {
  font-weight: 500;
  color: #10172d;
}

.legal-content strong {
  font-weight: 500;
  color: #10172d;
}

/* lists → numbered tiles, 2 columns (Figma "01 Corporate Affiliates …") */
.legal-content ul,
.legal-content ol {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px clamp(24px, 5vw, 96px);
  padding: 0;
  list-style: none;
  counter-reset: legal-item;
}

.legal-content ul > * + *,
.legal-content ol > * + * {
  margin-top: 0;
}

.legal-content li {
  position: relative;
  min-height: 46px;
  padding: 2px 0 0 66px;
  font-size: var(--fluid-18);
  line-height: 1.25;
  counter-increment: legal-item;
}

.legal-content li::before {
  content: counter(legal-item, decimal-leading-zero);
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 8px;
  background: var(--color-card-bg);
  font-size: 16px;
  color: var(--color-link);
}

.legal-content li p {
  display: inline;
  margin: 0;
}

.legal-content li > strong:first-child,
.legal-content li > p:first-child > strong:first-child {
  display: block;
  margin-bottom: 4px;
  font-size: var(--fluid-20);
  color: var(--color-link);
}

/* nested lists (e.g. the link lists under "5. External Resources" on Web
   Fraud & Phishing Warning): plain rows with a small dot, no tile */
.legal-content li ul,
.legal-content li ol {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 8px 0 0;
}

.legal-content li li {
  min-height: 0;
  padding: 0 0 0 16px;
  font-size: var(--fluid-16);
  counter-increment: none;
}

.legal-content li li::before {
  content: "";
  top: 7px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-link);
}

.legal-content a {
  overflow-wrap: anywhere;
}

/* tables: rows between 1px rules, head in blue */
.legal-content table {
  width: 100%;
  border-collapse: collapse;
  border-bottom: 1px solid rgba(16, 23, 45, 0.1);
}

.legal-content th,
.legal-content td {
  padding: 20px 20px 20px 0;
  border-top: 1px solid rgba(16, 23, 45, 0.1);
  text-align: left;
  vertical-align: top;
}

.legal-content tr:first-child > * {
  border-top: 0;
}

.legal-content th,
.legal-content thead td,
.legal-content thead strong {
  font-weight: 500;
  color: var(--color-link);
}

@media (max-width: 767px) {
  .legal-content ul,
  .legal-content ol {
    grid-template-columns: minmax(0, 1fr);
  }

  .legal-content table {
    display: block;
    overflow-x: auto;
  }
}

/* ---- Bricks parity, About page (doubled classes beat .brxe-block) ---- */
.person-grid.person-grid {
  display: grid;
}

.person-card.person-card {
  align-items: stretch;
}

.about-map__text.about-map__text {
  align-items: center;
}

/* a Bricks Text wrapper that must not create a box (e.g. around the sticky
   video in .about-film — sticky needs the section as its container) */
.mc-contents {
  display: contents;
}


/* ---- Search results (template "Search Results"): search field full
   width + button; results reuse .news-card ---- */
.search-form.search-form {
  gap: 10px;
  margin-bottom: clamp(32px, 2.6042vw, 50px);
}

.search-form .service-search {
  flex: 1;
  width: auto;
}

.search-form .listing-toolbar__btn {
  min-width: 200px;
}

.search-result__excerpt {
  max-width: 1000px;
  margin: 10px 0 0;
  font-size: var(--fluid-18);
  line-height: 1.35;
  letter-spacing: -0.04em;
  color: rgba(16, 23, 45, 0.8);
}

.news-list.news-list,
.news-card.news-card {
  align-items: stretch;
}

.search-pagination {
  margin-top: 40px;
  color: #10172d;
}

@media (max-width: 640px) {
  .search-form.search-form {
    flex-wrap: wrap;
  }

  .search-form .service-search {
    flex-basis: 100%;
  }

  .search-form .listing-toolbar__btn {
    flex: 1;
    min-width: 0;
    height: 50px;
  }
}

/* Core Framework gives <label> a bottom margin — the search fields in the
   toolbars are labels, which made the 100px bars 105px tall */
.team-filters label.service-search,
.listing-toolbar label.listing-search {
  margin-block: 0;
}

/* ==========================================================================
   26. Locations (locations.html) — Figma "Locations / Network":
   "Locations grid v2" (1920×4621) and "Locations map" (1920×3392), one page
   with a view toggle (bars = map, squares = grid). Hero = .page-hero (intro
   670 wide) → .page-panel → toolbar (search 353 · Country 160 · toggle) →
   50 → per country: 1px rule · 50 · flag 45×30 + 48/100 serif title · 40 ·
   cards 573×225 (3 per row, 20 apart). Map view: map 1167×863 r20 + list
   573×863 r20 side by side. Data = the advisors (post type agent).
   ========================================================================== */
.page-hero--wide-intro .page-hero__intro {
  max-width: 670px;
}

.office-toolbar.office-toolbar {
  gap: 10px;
}

.office-toolbar .service-search {
  margin-right: auto;
}

.office-toolbar select,
.career-toolbar select {
  width: 160px;
  min-width: 0;
  padding-inline: 15px 40px;
  border: 1px solid rgba(16, 23, 45, 0.1);
  font-size: 18px;
  letter-spacing: -0.04em;
  color: #10172d;
}

.office-toolbar .team-view-toggle {
  margin-left: 40px;
}

.office-group {
  padding-top: clamp(32px, 2.6042vw, 50px);
  border-top: 1px solid rgba(16, 23, 45, 0.1);
}

.office-group + .office-group {
  margin-top: clamp(32px, 2.6042vw, 50px);
}

.office-group[hidden] + .office-group,
.office-group:first-child {
  margin-top: 0;
}

.office-group__title {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 20px;
  margin: 0 0 clamp(24px, 2.0833vw, 40px);
  font-family: var(--font-heading);
  font-size: var(--fluid-48);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--color-link);
}

.office-group__title .country-flag {
  flex-shrink: 0;
  width: 45px;
  height: 30px;
  object-fit: cover;
}

.office-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.office-card {
  position: relative;
  min-height: 225px;
  padding: 30px 30px 35px;
  border-radius: 20px;
  background: var(--color-card-bg);
  color: rgba(11, 17, 38, 0.8);
  font-size: var(--fluid-18);
  line-height: 1.25;
  letter-spacing: -0.04em;
}

.office-card__name {
  margin: 0;
  padding-right: 60px;
  font-family: var(--font-heading);
  font-size: var(--fluid-35);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--color-link);
}

/* whole card links to the advisor profile */
.office-card__name a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.office-card__city,
.office-row__city {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  margin: 40px 0 0;
}

.office-card__city .country-flag,
.office-row__city .country-flag {
  flex-shrink: 0;
  width: 32px;
  height: 21px;
  object-fit: cover;
}

.office-card__position {
  margin: 8px 0 0;
}

.office-card__phone {
  position: relative;
  z-index: 1; /* above the stretched card link */
  display: inline-block;
  margin-top: 8px;
  color: var(--color-link);
}

.office-card__arrow,
.office-row__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 8px;
  background: #2481f2;
  color: var(--color-white);
}

.office-card__arrow {
  position: absolute;
  right: 30px;
  bottom: 30px;
  transition: transform var(--transition);
}

.office-card:hover .office-card__arrow {
  transform: translateX(4px);
}

/* ---- Map view ---- */
.office-map {
  display: grid;
  grid-template-columns: minmax(0, 1167fr) minmax(0, 573fr);
  gap: 20px;
  height: 863px;
  margin-top: clamp(32px, 2.6042vw, 50px);
}

.office-map__canvas {
  min-height: 0;
  border-radius: 20px;
  overflow: hidden;
  background: #e9edf4;
}

/* light, grey map like the Figma screenshot */
.office-map__canvas .leaflet-tile-pane {
  filter: grayscale(1) brightness(1.06) contrast(0.85);
}

.office-pin {
  width: 30px;
  height: 30px;
  border: 3px solid var(--color-white);
  border-radius: 50%;
  background: var(--color-blue);
  box-shadow: 0 2px 8px rgba(16, 23, 45, 0.25);
  transition: background var(--transition), transform var(--transition);
}

.office-pin.is-active {
  background: #10172d;
  transform: scale(1.1);
}

.office-list {
  min-height: 0;
  padding: 0 15px 15px;
  border-radius: 20px;
  background: var(--color-card-bg);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.office-list__title {
  margin: 40px 15px 15px;
  font-family: var(--font-heading);
  font-size: var(--fluid-35);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--color-link);
}

.office-list__group:not([hidden]) ~ .office-list__group .office-list__title {
  margin-top: 40px;
}

.office-list > .office-list__group:first-child .office-list__title {
  margin-top: 60px;
}

.office-row {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
  padding: 25px 15px;
  border: 0;
  border-top: 1px solid rgba(16, 23, 45, 0.1);
  background: none;
  font: inherit;
  font-size: var(--fluid-18);
  line-height: 1.25;
  letter-spacing: -0.04em;
  text-align: left;
  color: rgba(16, 23, 45, 0.8);
}

.office-list__title + .office-row {
  border-top: 0;
}

.office-row:hover,
.office-row.is-active {
  background: var(--color-page-bg);
}

.office-row__text {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  letter-spacing: inherit;
  text-align: left;
  color: inherit;
  cursor: pointer;
}

/* the row (button) shows the office on the map, only the arrow opens the profile */
.office-row__text::after {
  content: "";
  position: absolute;
  inset: 0;
}

.office-row__arrow {
  position: relative;
  z-index: 1;
  text-decoration: none;
}

.office-row__position,
.office-row__phone {
  display: block;
}

.office-row__name {
  font-family: var(--font-heading);
  font-size: var(--fluid-27);
  font-weight: 500;
  line-height: 1;
  color: var(--color-link);
}

.office-row__position {
  margin: 10px 0 0;
  font-size: var(--fluid-16);
  color: rgba(16, 23, 45, 0.5);
}

.office-row__city {
  margin-top: 20px;
}

.office-row__phone {
  margin: 10px 0 0;
}

.office-row__arrow {
  flex-shrink: 0;
  background: var(--color-page-bg);
  color: #10172d;
}

.office-row.is-active .office-row__arrow {
  background: #2481f2;
  color: var(--color-white);
}

@media (max-width: 1100px) {
  .office-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .office-map {
    grid-template-columns: minmax(0, 1fr);
    height: auto;
  }

  .office-map__canvas {
    height: 420px;
  }

  .office-list {
    max-height: 640px;
  }
}

@media (max-width: 700px) {
  .office-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .office-toolbar .service-search {
    flex-basis: 100%;
    margin-right: 0;
  }

  .office-toolbar select {
    flex: 1;
    width: auto;
  }

  .office-toolbar .team-view-toggle {
    display: flex;
    margin-left: 10px;
  }

  .office-card {
    min-height: 0;
  }
}

/* ==========================================================================
   27. Career (career.html + vacancy-*.html) — Figma "Career" (Сareer 6,
   1920×5597) + "Vacancies (pop-up)" (1920×1710).
   Hero (crumb, "Career") → 100 → world map with "Corporate culture"
   (.about-map) → light panel (r30): "Vacancies" 84/105 serif → 60 →
   toolbar (search 353 | Location 160 · Job type 132 · Category 160) → 40 →
   cards 3 per row (white r10, 40 inset, 15 apart: pills, 27/120 title +
   44 arrow) → 140 → "Work with us" photo (1080, r30 top, black 30 %) with
   the 4 application steps. Pop-up: #0B1126 overlay, #F4F6FA panel
   1760 r30, 80 inset: title 60/100 + white pills, rule, then about text +
   accordions (795) | Apply card (570), 235 apart.
   ========================================================================== */
.page-hero--tight {
  padding-bottom: clamp(48px, 5.2083vw, 100px);
}

.page-hero--tight h1 {
  margin-bottom: 0;
}

.about-map--career {
  min-height: calc(1375 / 1920 * 100vw);
  padding-top: clamp(150px, 24.1667vw, 464px);
}

.about-map--career .about-map__text p + p {
  margin-top: 20px;
}

/* ---- Tag pills (location, work mode) ---- */
.tag-pill {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  border-radius: 50px;
  background: var(--color-page-bg);
  font-size: var(--fluid-16);
  line-height: 1.25;
  letter-spacing: -0.04em;
  color: #10172d;
  white-space: nowrap;
}

.tag-pill svg {
  flex-shrink: 0;
  color: var(--color-link);
}

.tag-pill--white {
  background: var(--color-card-bg);
}

/* ---- Vacancies panel ---- */
.career-jobs {
  position: relative;
  z-index: 1;
  padding: clamp(64px, 7.2917vw, 140px) 0 calc(clamp(64px, 7.2917vw, 140px) + 30px);
  border-radius: 30px 30px 0 0;
  background: var(--color-page-bg);
  color: #10172d;
}

.career-jobs__title {
  margin: 0 0 clamp(32px, 3.125vw, 60px);
  text-align: center;
  font-family: var(--font-heading);
  font-size: var(--fluid-84);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.04em;
  color: var(--color-link);
}

.career-toolbar.career-toolbar {
  justify-content: space-between;
  gap: 10px;
  margin-bottom: clamp(24px, 2.0833vw, 40px);
}

.career-toolbar__selects {
  display: flex;
  flex-direction: row;
  gap: 10px;
}

.career-toolbar select[data-filter-key="type"] {
  width: 132px;
}

.vacancy-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 15px;
}

.vacancy-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-height: 250px;
  padding: clamp(24px, 2.0833vw, 40px);
  border-radius: 10px;
  background: var(--color-card-bg);
}

.vacancy-card__tags,
.vacancy__tags {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 10px;
}

.vacancy-card__foot {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-top: auto;
}

.vacancy-card__title {
  max-width: 311px;
  margin: 0;
  font-family: var(--font-heading);
  font-size: var(--fluid-27);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.04em;
  color: var(--color-link);
}

.vacancy-card__title a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.vacancy-card__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 8px;
  background: #2481f2;
  color: var(--color-white);
  transition: transform var(--transition);
}

.vacancy-card:hover .vacancy-card__arrow {
  transform: translateX(4px);
}

/* ---- Work with us ---- */
.career-work {
  position: relative;
  z-index: 2;
  margin-top: -30px;
  min-height: max(720px, calc(1080 / 1920 * 100vw));
  border-radius: 30px 30px 0 0;
  overflow: hidden;
  color: var(--color-white);
}

.career-work__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.career-work::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.3);
}

.career-work__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 60px;
  min-height: inherit;
  padding-block: clamp(48px, 4.1667vw, 80px);
}

.career-work__intro {
  max-width: 723px;
  margin-inline: auto;
  text-align: center;
}

.career-work__intro h2 {
  margin: 0;
  font-family: var(--font-heading);
  font-size: var(--fluid-84);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.04em;
}

.career-work__intro p {
  margin: clamp(24px, 2.0833vw, 40px) 0 0;
  font-size: var(--fluid-20);
  line-height: 1.25;
  letter-spacing: -0.04em;
  color: rgba(255, 255, 255, 0.8);
}

.career-steps {
  display: flex;
  flex-direction: row;
  gap: 39px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.career-step {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1 1 0;
  min-width: 0;
  min-height: 205px;
  padding-left: 30px;
}

/* the 1px rule left of each step (own element so it can animate) */
.career-step::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 1px;
  background: rgba(255, 255, 255, 0.3);
  transform-origin: bottom;
}

/* Daria #75: step by step from left to right — first the line grows up
   from the bottom, then the number + text fade in, then the next step */
.career-step.reveal.is-armed {
  opacity: 1;
  transform: none;
  transition: none;
}

.career-step.reveal.is-armed::before {
  opacity: 0;
  transform: scaleY(0);
  transition: transform 600ms cubic-bezier(0.2, 0.6, 0.2, 1), opacity 300ms ease;
  transition-delay: var(--step-delay, 0ms);
}

.career-step.reveal.is-armed > * {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 500ms ease, transform 500ms ease;
  transition-delay: calc(var(--step-delay, 0ms) + 400ms);
}

.career-step.reveal.is-armed.is-visible::before,
.career-step.reveal.is-armed.is-visible > * {
  opacity: 1;
  transform: none;
}

.career-step:nth-child(2) { --step-delay: 500ms; }
.career-step:nth-child(3) { --step-delay: 1000ms; }
.career-step:nth-child(4) { --step-delay: 1500ms; }

@media (prefers-reduced-motion: reduce) {
  .career-step.reveal.is-armed::before,
  .career-step.reveal.is-armed > * {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

.career-step__num {
  font-family: var(--font-heading);
  font-size: var(--fluid-20);
  font-weight: 500;
  line-height: 1.2;
  color: rgba(255, 255, 255, 0.5);
}

.career-step h3 {
  margin: 0;
  font-family: var(--font-heading);
  font-size: var(--fluid-35);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.04em;
}

.career-step p {
  margin: 15px 0 0;
  font-size: var(--fluid-20);
  line-height: 1.25;
  letter-spacing: -0.04em;
  color: rgba(255, 255, 255, 0.8);
}

/* ---- Vacancy (pop-up content + own page) ---- */
.vacancy {
  color: #10172d;
}

.vacancy__head {
  display: flex;
  flex-direction: column;
  gap: 30px;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(16, 23, 45, 0.1);
}

.vacancy__title {
  /* Figma box 865; browsers set Noto Serif wider — 1000 keeps the 2 lines */
  max-width: 1000px;
  margin: 0;
  font-family: var(--font-heading);
  font-size: var(--fluid-60);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--color-link);
}

.vacancy__body {
  display: grid;
  grid-template-columns: minmax(0, 795fr) minmax(0, 570fr);
  gap: clamp(32px, 12.2396vw, 235px);
  align-items: start;
  margin-top: 40px;
}

.vacancy__about p {
  margin: 0;
  font-size: var(--fluid-18);
  line-height: 1.35;
  letter-spacing: -0.04em;
  color: rgba(16, 23, 45, 0.8);
}

.vacancy__about p + p {
  margin-top: 15px;
}

.vacancy__sections {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-top: 40px;
}

.vacancy-acc {
  padding: 0 25px;
  border-radius: 15px;
  background: var(--color-card-bg);
}

.vacancy-acc summary {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 21px 0;
  list-style: none;
  font-size: var(--fluid-20);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.04em;
  color: var(--color-link);
  cursor: pointer;
}

.vacancy-acc summary::-webkit-details-marker {
  display: none;
}

.vacancy-acc__chevron {
  flex-shrink: 0;
  transition: transform var(--transition);
}

.vacancy-acc[open] .vacancy-acc__chevron {
  transform: rotate(180deg);
}

.vacancy-acc[open] summary {
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(16, 23, 45, 0.1);
}

.vacancy-acc__body {
  padding: 20px 0 25px;
  font-size: var(--fluid-18);
  line-height: 1.35;
  letter-spacing: -0.04em;
  color: rgba(16, 23, 45, 0.8);
}

.vacancy-acc__body > * {
  margin: 0;
}

.vacancy-acc__body > * + * {
  margin-top: 20px;
}

.vacancy-acc__body strong {
  font-weight: 500;
  color: #10172d;
}

/* headings inside the job text (editor content) = bold run-in lines, not page headings */
.vacancy-acc__body :is(h1, h2, h3, h4, h5, h6) {
  font-family: inherit;
  font-size: inherit;
  font-weight: 500;
  line-height: inherit;
  letter-spacing: inherit;
  color: #10172d;
}

.vacancy-acc__body ul,
.vacancy-acc__body ol {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0;
  list-style: none;
}

.vacancy-acc__body li {
  position: relative;
  padding-left: 20px;
}

.vacancy-acc__body li::before {
  content: "";
  position: absolute;
  top: 0.45em;
  left: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-link);
}

.vacancy-acc__body li p {
  display: inline;
}

/* apply form: same field styles as the other form cards; two half rows */
.apply-form.brxe-form {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 20px 10px;
}

.form-card .apply-form .form-group--half {
  width: calc(50% - 5px);
}

.apply-form .form-group:has(input[type="checkbox"]) {
  margin-top: 0;
}

.file-upload {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  height: 58px;
  padding: 0 7px 0 20px;
  border-radius: 10px;
  background: var(--color-page-bg);
  font-size: var(--fluid-16);
  letter-spacing: -0.04em;
  color: rgba(16, 23, 45, 0.5);
  cursor: pointer;
}

.file-upload input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.file-upload.has-file {
  color: #10172d;
}

.file-upload__name {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.file-upload__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 8px;
  background: var(--color-card-bg);
  color: var(--color-link);
}

/* Bricks form (live): fields 001/002 + 005/006 are the half rows, the file
   field's label is the upload bar (same look as .file-upload above) */
.form-card .apply-form .form-group:has(> [name$="f001"], > [name$="f002"], > [name$="f005"], > [name$="f006"]) {
  width: calc(50% - 5px);
}

.apply-form .form-group.file {
  position: relative;
}

.apply-form .form-group.file input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.form-card .apply-form .form-group.file .choose-files {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  height: 58px;
  margin: 0;
  padding: 0 7px 0 20px;
  border: 0;
  border-radius: 10px;
  background: var(--color-page-bg);
  font-size: var(--fluid-16);
  font-weight: 400;
  letter-spacing: -0.04em;
  color: rgba(16, 23, 45, 0.5);
  cursor: pointer;
}

.form-card .apply-form .form-group.file .choose-files::after {
  content: "";
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 8px;
  background: var(--color-card-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%2306438e' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 16V4M7 9l5-5 5 5'/%3E%3Cpath d='M4 16v4h16v-4'/%3E%3C/svg%3E") center / 18px no-repeat;
}

.apply-form .form-group.file .file-result {
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  font-size: 14px;
  color: #10172d;
}

.apply-form .form-group.file .file-result .remove {
  padding: 4px 10px;
  border-radius: 6px;
  background: var(--color-page-bg);
  font-size: 12px;
  color: var(--color-link);
}

/* Bricks: the accordion item is a Block (flex column, align-items:flex-start) */
.vacancy-acc.vacancy-acc {
  display: block;
}

/* empty job fields (live): no work-mode tag, no empty accordion section */
.tag-pill[data-value=""],
.vacancy-acc:has(> .vacancy-acc__body:empty) {
  display: none;
}

/* the pop-up's apply form waits here until main.js moves it in */
.vacancy-form-holder[hidden] {
  display: none;
}

/* ---- Pop-up ---- */
.vacancy-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  padding: clamp(16px, 4.1667vw, 80px);
  background: #0b1126;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.vacancy-modal[hidden] {
  display: none;
}

.vacancy-modal__panel {
  position: relative;
  max-width: 1760px;
  margin: 0 auto;
  padding: clamp(24px, 4.1667vw, 80px);
  border-radius: 30px;
  background: var(--color-page-bg);
}

.vacancy-modal__close {
  position: absolute;
  top: clamp(24px, 4.1667vw, 80px);
  right: clamp(24px, 4.1667vw, 80px);
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  border: 0;
  border-radius: 10px;
  background: var(--color-card-bg);
  color: #10172d;
  cursor: pointer;
}

.vacancy-modal .vacancy__title {
  padding-right: 80px;
}

html.has-vacancy-modal {
  overflow: hidden;
}

/* own page (direct link / Google) */
.vacancy-page {
  padding: 15px 0 clamp(72px, 7.2917vw, 140px);
  background: var(--color-page-bg);
}

.vacancy-page .vacancy {
  margin-top: clamp(24px, 2.0833vw, 40px);
}

@media (max-width: 1100px) {
  .vacancy-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .vacancy__body {
    grid-template-columns: minmax(0, 1fr);
  }

  .career-steps {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 40px 24px;
  }

  .career-toolbar.career-toolbar {
    flex-wrap: wrap;
  }

  .career-toolbar .service-search {
    flex-basis: 100%;
  }
}

@media (max-width: 700px) {
  .vacancy-grid,
  .career-steps {
    grid-template-columns: minmax(0, 1fr);
  }

  .career-toolbar__selects {
    flex-wrap: wrap;
    width: 100%;
  }

  .career-toolbar select,
  .career-toolbar select[data-filter-key="type"] {
    flex: 1 1 140px;
    width: auto;
  }

  .form-card .apply-form .form-group--half,
  .form-card .apply-form .form-group:has(> [name$="f001"], > [name$="f002"], > [name$="f005"], > [name$="f006"]) {
    width: 100%;
  }

  .vacancy-card {
    min-height: 0;
  }
}

/* ==========================================================================
   28. Lehman Formula Calculator (lehman.html) — Figma "Lehman Formula
   Calculator" (1920×3930). Hero (intro 872 wide) → panel: title 48/100
   serif → 60 → "Deal Size $" 18/500 + input 870×60 → 20 → bar chart +
   pie chart cards (870×687, white, 1px @10%, r10, 20 apart) → 60 → table
   (1680 = 40 inset): Average / Total Fee rows 30/125 serif on
   #206FD0@5%, head + 8 tier rows 18/125, value column 280.
   ========================================================================== */
.page-hero--lehman .page-hero__intro {
  max-width: 872px;
}

.lehman {
  padding-bottom: clamp(80px, 9.375vw, 180px);
}

.lehman__title {
  margin: 0 0 clamp(32px, 3.125vw, 60px);
  text-align: center;
  font-family: var(--font-heading);
  font-size: var(--fluid-48);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--color-link);
}

.lehman__field {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: min(870px, calc(50% - 10px));
  margin: 0;
}

.lehman__label {
  font-size: var(--fluid-18);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.04em;
  color: var(--color-link);
}

.lehman__input {
  height: 60px;
  padding: 0 20px;
  border: 1px solid rgba(16, 23, 45, 0.1);
  border-radius: 10px;
  background: var(--color-card-bg);
  font: inherit;
  font-size: 18px;
  letter-spacing: -0.04em;
  color: #10172d;
}

.lehman__input:focus {
  outline: 2px solid var(--color-blue);
  outline-offset: 1px;
}

.lehman__charts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin-top: 20px;
}

.lehman-chart {
  margin: 0;
  border: 1px solid rgba(16, 23, 45, 0.1);
  border-radius: 10px;
  background: var(--color-card-bg);
}

.lehman-chart__svg {
  display: block;
  width: 100%;
  height: auto;
  font-family: var(--font-body);
  font-size: 14px;
  letter-spacing: -0.02em;
}

.lehman-chart__svg text {
  fill: rgba(16, 23, 45, 0.8);
}

.lehman-chart__svg .lehman-leader {
  fill: none;
  stroke: rgba(16, 23, 45, 0.35);
  stroke-width: 1;
}

.lehman-chart__svg .lehman-bar {
  transition: y 400ms ease, height 400ms ease;
}

.lehman-table {
  width: calc(100% - 80px);
  margin: clamp(32px, 3.125vw, 60px) 40px 0;
  border-collapse: collapse;
  font-size: var(--fluid-18);
  line-height: 1.25;
  letter-spacing: -0.04em;
  color: #10172d;
}

.lehman-table th,
.lehman-table td {
  height: 44px;
  padding: 10px;
  text-align: left;
  font-weight: 400;
}

.lehman-table td:last-child,
.lehman-table th:last-child {
  width: 280px;
}

.lehman-table__sum th,
.lehman-table__sum td {
  height: 59px;
  background: rgba(32, 111, 208, 0.05);
  font-family: var(--font-heading);
  font-size: clamp(22px, 1.5625vw, 30px);
  font-weight: 500;
  color: var(--color-link);
}

.lehman-table__head th {
  font-weight: 500;
}

@media (max-width: 1100px) {
  .lehman__charts {
    grid-template-columns: minmax(0, 1fr);
  }

  .lehman__field {
    width: 100%;
  }

  .lehman-table {
    width: 100%;
    margin-inline: 0;
  }
}

@media (max-width: 640px) {
  .lehman-table td:last-child,
  .lehman-table th:last-child {
    width: auto;
    text-align: right;
    white-space: nowrap;
  }
}

/* ==========================================================================
   29. Business Valuation (valuation.html) — Figma "Business valuation v1"
   (1920; step 1 + step 2), 828 (768) and 827 (360).
   Light page: photo hero 1080 tall incl. the 110 header (radius 0 0 30 30)
   → 100 → press strip → 140 → "Business Value Calculator" → 60 → form card
   (1163) + 27 + tombstones card (570) → 140 → Selected Transactions band.
   ========================================================================== */
.page-valuation main,
main:has(> .valuation-hero) {
  background: var(--color-page-bg);
}

.valuation-hero {
  position: relative;
  isolation: isolate;
  padding: clamp(12px, 0.9896vw, 19px) 0 clamp(48px, 4.1667vw, 80px);
  color: var(--color-white);
}

/* the photo starts behind the header (Figma frame top), cover-scaled */
.valuation-hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: calc(-1 * var(--hero-bars-offset, 110px)) 0 0;
  border-radius: 0 0 30px 30px;
  /* live: the page sets --valuation-hero-bg to the media-library image */
  background: #050d26 var(--valuation-hero-bg, url("../assets/valuation/hero.jpg")) center / cover no-repeat;
}

.valuation-hero .breadcrumb {
  justify-content: center;
}

.valuation-hero__intro {
  max-width: 991px;
  margin-top: clamp(40px, 3.9583vw, 76px); /* crumb 129+23 → title 232 */
}

.valuation-hero__title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: var(--fluid-60);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.04em;
}

.valuation-hero__title .is-muted {
  color: rgba(255, 255, 255, 0.5);
}

.valuation-hero__text {
  max-width: 677px;
  margin: 20px 0 0;
  font-size: var(--fluid-20);
  line-height: 1.25;
  letter-spacing: -0.04em;
}

.valuation-hero__title + .valuation-hero__text {
  margin-top: clamp(24px, 2.0833vw, 40px);
}

.valuation-hero__btn {
  min-width: 258px;
  justify-content: space-between;
  margin-top: clamp(24px, 2.0833vw, 40px);
}

.valuation-stats {
  display: flex;
  gap: 30px clamp(16px, 2.4479vw, 47px);
  margin: clamp(56px, 7.6042vw, 146px) 0 0;
  padding: 0;
  list-style: none;
}

/* 2 px line (white → transparent) + 15 + figure */
.valuation-stat {
  position: relative;
  display: flex;
  flex: 0 1 calc(var(--w, 209px) + 15px); /* Figma text widths 209–261, shrink below 1920 */
  flex-direction: column;
  min-width: 0;
  min-height: 120px;
  padding-left: 15px;
}

.valuation-stat::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 1px;
  height: 120px;
  background: linear-gradient(180deg, #ffffff 0%, rgba(255, 255, 255, 0) 100%);
}

.valuation-stat__value {
  font-family: var(--font-heading);
  font-size: clamp(28px, 2.0833vw, 40px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.04em;
}

.valuation-stat__label,
.valuation-stat__sub {
  font-size: var(--fluid-18);
  line-height: 1.25;
  letter-spacing: -0.04em;
}

.valuation-stat__label {
  margin-top: 10px;
}

.valuation-stat__sub {
  margin-top: 6px;
  color: rgba(255, 255, 255, 0.8);
}

.valuation-press .logo-marquee {
  margin-top: clamp(48px, 5.2083vw, 100px);
}

/* ---- Calculator ---- */
.valuation-calc {
  padding: clamp(64px, 7.2917vw, 140px) 0;
  color: #10172d;
}

.valuation-calc__title {
  margin: 0;
  text-align: center;
  font-family: var(--font-heading);
  font-size: var(--fluid-60);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.04em;
  color: var(--color-link);
}

.valuation-calc__layout {
  display: grid;
  grid-template-columns: minmax(0, 1163fr) minmax(0, 570fr);
  align-items: start;
  gap: 27px;
  margin-top: clamp(32px, 3.125vw, 60px);
}

.valuation-form,
.valuation-tombstones {
  border-radius: 30px;
  background: var(--color-card-bg);
}

.valuation-form {
  padding: clamp(24px, 2.0833vw, 40px);
}

.valuation-step[hidden] {
  display: none;
}

.valuation-step__count {
  margin: 0;
  font-size: var(--fluid-16);
  line-height: 1.35;
  letter-spacing: -0.04em;
  color: rgba(16, 23, 45, 0.5);
}

.valuation-step__title-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-top: 10px;
}

.valuation-step__title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: var(--fluid-35);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--color-link);
}

.valuation-step__pct {
  font-size: var(--fluid-16);
  line-height: 1.35;
  letter-spacing: -0.04em;
  color: rgba(16, 23, 45, 0.5);
}

.valuation-progress {
  height: 10px;
  margin-top: 15px;
  overflow: hidden;
  border-radius: 30px;
  background: var(--color-page-bg);
}

.valuation-progress span {
  display: block;
  height: 100%;
  border-radius: 30px;
  background: var(--color-blue);
}

/* two columns 531 + 21; step 1 rows 25 apart, step 2 rows 20 */
.valuation-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 25px 21px;
  margin-top: 40px;
}

[data-valuation-step="2"] .valuation-grid {
  row-gap: 20px;
}

.valuation-field {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 15px;
  min-width: 0;
}

.valuation-field--full {
  grid-column: 1 / -1;
}

.valuation-field__head {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.valuation-field__label {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  font-size: var(--fluid-18);
  line-height: 1.25;
  letter-spacing: -0.04em;
  color: #10172d;
}

.valuation-field__info {
  flex-shrink: 0;
  color: rgba(16, 23, 45, 0.5);
}

.valuation-field__help {
  max-width: 438px;
  font-size: var(--fluid-16);
  line-height: 1.25;
  letter-spacing: -0.04em;
  color: rgba(16, 23, 45, 0.5);
}

.valuation-field input:not([type="checkbox"]),
.valuation-field select,
.valuation-field textarea {
  width: 100%;
  height: 58px;
  padding: 0 20px;
  border: 0;
  border-radius: 10px;
  background: var(--color-page-bg);
  font: inherit;
  font-size: var(--fluid-16);
  letter-spacing: -0.04em;
  color: #10172d;
  outline: none;
  appearance: none;
}

.valuation-field textarea {
  height: 116px;
  padding-top: 19px;
  resize: vertical;
}

.valuation-field ::placeholder {
  color: rgba(16, 23, 45, 0.5);
}

/* select: white 44×44 box (radius 8) inset 7 with the chevron */
.valuation-field select {
  padding-right: 64px;
  cursor: pointer;
  background: var(--color-page-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44'%3E%3Crect width='44' height='44' rx='8' fill='%23FFFFFF'/%3E%3Cpath d='M18 20l4 4 4-4' stroke='%2310172D' stroke-width='1.2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 7px center / 44px 44px no-repeat;
}

.valuation-field select:invalid,
.valuation-field select:has(option[value=""]:checked) {
  color: rgba(16, 23, 45, 0.5);
}

.valuation-field input:focus,
.valuation-field select:focus,
.valuation-field textarea:focus {
  box-shadow: inset 0 0 0 1px var(--color-blue);
}

.valuation-field.is-invalid input,
.valuation-field.is-invalid select,
.valuation-field.is-invalid textarea {
  box-shadow: inset 0 0 0 1px #d64545;
}

.valuation-check {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: var(--fluid-16);
  letter-spacing: -0.04em;
  color: rgba(16, 23, 45, 0.8);
  cursor: pointer;
}

.valuation-check input {
  width: 30px;
  height: 30px;
  margin: 0;
  border-radius: 8px;
  background: var(--color-page-bg);
  appearance: none;
  cursor: pointer;
}

.valuation-check input:checked {
  background: var(--color-blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='10'%3E%3Cpath d='M1 5l4 4 8-8' stroke='%23FFFFFF' stroke-width='1.8' fill='none'/%3E%3C/svg%3E") center no-repeat;
}

.valuation-step__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 20px;
  margin-top: 40px;
}

.valuation-step__actions .mc-btn {
  width: 240px;
  justify-content: space-between;
}

.valuation-back {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-right: auto;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: var(--fluid-16);
  font-weight: 500;
  letter-spacing: -0.04em;
  color: var(--color-link);
  cursor: pointer;
}

.valuation-form__done {
  margin: 20px 0 0;
  font-size: var(--fluid-18);
  color: var(--color-link);
}

.valuation-form__note {
  margin: 40px 0 0;
  padding-top: 20px;
  border-top: 1px solid rgba(16, 23, 45, 0.1);
  font-size: 14px;
  line-height: 1.25;
  letter-spacing: -0.04em;
  color: rgba(16, 23, 45, 0.5);
}

/* ---- Tombstones card: 60 / 40 padding, table rows 15 + 24 + 15 ---- */
.valuation-tombstones {
  padding: clamp(32px, 3.125vw, 60px) clamp(24px, 2.0833vw, 40px);
}

.valuation-tombstones__title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: var(--fluid-35);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--color-link);
}

.valuation-tombstones .listing-tombstones {
  margin-top: 40px;
  font-size: var(--fluid-18);
  line-height: 1.35;
  letter-spacing: -0.04em;
  color: rgba(16, 23, 45, 0.8);
}

.valuation-tombstones .listing-tombstones th {
  padding-top: 0;
}

/* Figma: line → 14 → 24 text → 15 → line (54 pitch) */
.valuation-tombstones .listing-tombstones td {
  padding: 14px 0 15px;
}

.valuation-tombstones .listing-tombstones tr > :last-child {
  width: auto;
  text-align: right;
}

.valuation-tombstones .listing-tombstones tbody tr:last-child td {
  padding-bottom: 15px;
  border-bottom: 1px solid rgba(16, 23, 45, 0.1);
}

.valuation-tombstones__source {
  margin: 15px 0 0;
  font-size: var(--fluid-16);
  line-height: 1.35;
  letter-spacing: -0.04em;
  color: rgba(16, 23, 45, 0.5);
}

/* tablet (Figma 828): stats 2 columns, tombstones below the form */
@media (max-width: 1100px) {
  .valuation-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 30px;
  }

  .valuation-calc__layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }
}

/* mobile (Figma 827): one column form */
@media (max-width: 700px) {
  .valuation-hero::before {
    border-radius: 0 0 20px 20px;
  }

  .valuation-stats {
    gap: 24px 16px;
  }

  .valuation-stat {
    min-height: 100px;
  }

  .valuation-stat::before {
    height: 100px;
  }

  .valuation-grid {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 20px;
  }

  .valuation-form,
  .valuation-tombstones {
    border-radius: 20px;
  }

  .valuation-step__actions {
    flex-wrap: wrap;
  }

  .valuation-step__actions .mc-btn {
    width: 100%;
  }
}

/* ==========================================================================
   30. Side panel "Become a Partner" (become-a-partner.html) — Figma "Form"
   (1920×1076), "Form step 10" (768), "834" (360). Global: any link to
   #become-a-partner opens it (main.js "Side panel"); live = Bricks Popup.
   Desktop: 955 wide light panel on the right (radius 30 0 0 30), 80 inset,
   close 58×58 top right; title 60 → 30 → text 14 (15 apart) → 25 → line →
   25 → 5 white fields 58 (20 apart) → 73 → submit 240 → 20 → note 14.
   ========================================================================== */
.side-panel {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: flex;
  align-items: flex-start; /* the panel grows with its content (form errors) instead of being stretched to the viewport */
  justify-content: flex-end;
  background: rgba(11, 17, 38, 0.92);
  overflow-x: hidden; /* the panel slides in from +40px */
  overflow-y: auto;
  overscroll-behavior: contain;
}

.side-panel[hidden] {
  display: none;
}

.side-panel__panel {
  position: relative;
  width: min(955px, 100%);
  min-height: 100%;
  padding: clamp(20px, 4.1667vw, 80px);
  border-radius: 30px 0 0 30px;
  background: var(--color-page-bg);
  color: #10172d;
  animation: side-panel-in 0.4s cubic-bezier(0.2, 0.7, 0.2, 1);
}

@keyframes side-panel-in {
  from { transform: translateX(40px); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .side-panel__panel { animation: none; }
}

.side-panel__close {
  position: absolute;
  top: clamp(20px, 4.1667vw, 80px);
  right: clamp(20px, 4.1667vw, 80px);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: var(--color-card-bg);
  color: var(--color-blue);
  cursor: pointer;
}

.side-panel__title {
  max-width: 679px;
  margin: 0;
  font-family: var(--font-heading);
  font-size: var(--fluid-60);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--color-link);
}

.side-panel__text {
  max-width: 675px;
  margin-top: 30px;
  padding-bottom: 25px;
  border-bottom: 1px solid rgba(16, 23, 45, 0.1);
  font-size: 14px;
  line-height: 1.25;
  letter-spacing: -0.04em;
  color: rgba(16, 23, 45, 0.8);
}

.side-panel__text p {
  margin: 0;
}

.side-panel__text p + p {
  margin-top: 15px;
}

/* form = the global .form-card fields, here bare: white fields, no border */
.side-panel__form.form-card {
  margin-top: 25px;
  padding: 0;
  border-radius: 0;
  background: none;
}

.side-panel__form.form-card .brxe-form input:not([type="checkbox"]) {
  border: 0;
  background-color: var(--color-card-bg);
}

.side-panel__form.form-card .brxe-form .submit-button-wrapper {
  margin-top: 53px;
}

.side-panel__form.form-card .brxe-form button[type="submit"] {
  width: 240px;
}

.side-panel__note {
  margin: 20px 0 0;
  font-size: 14px;
  line-height: 1.25;
  letter-spacing: -0.04em;
  color: rgba(16, 23, 45, 0.5);
}

html.has-side-panel {
  overflow: hidden;
}

/* tablet (Form step 10): full width, radius 30, 30 inset, title 50, fields 56 */
@media (max-width: 1100px) {
  .side-panel__panel {
    width: 100%;
    padding: 60px 30px 30px;
    border-radius: 30px;
  }

  .side-panel__close {
    top: 60px;
    right: 30px;
  }

  .side-panel__title {
    max-width: min(612px, calc(100% - 70px)); /* stays clear of the close button */
    font-size: clamp(30px, 6.5vw, 50px);
  }

  .side-panel__form.form-card .brxe-form input:not([type="checkbox"]) {
    height: 56px;
    font-size: 14px;
  }
}

/* mobile (834): 20 inset, close 42 at the top, title 30, fields 40 / 10 apart, text 12 */
@media (max-width: 700px) {
  .side-panel__panel {
    padding: 82px 20px 30px;
    border-radius: 20px;
  }

  .side-panel__close {
    top: 30px;
    right: 20px;
    width: 42px;
    height: 42px;
    border-radius: 7px;
  }

  .side-panel__title {
    max-width: none; /* the close button sits above the title here */
  }

  .side-panel__text {
    font-size: 12px;
  }

  .side-panel__form.form-card .brxe-form {
    gap: 10px;
  }

  .side-panel__form.form-card .brxe-form input:not([type="checkbox"]) {
    height: 40px;
  }

  .side-panel__form.form-card .brxe-form .submit-button-wrapper {
    margin-top: 60px;
  }
}

/* ---- Request form in the side panel (contact-form.html, Figma "Form step
   1–4"): title 560 → 39 → sections (line, 25, head 20/500, 22, fields,
   25, line); 2 columns 387 + 21, rows 20 apart; selects with a #F4F6FA
   44×44 box; check box 25 (radius 3) right, blue when the section is
   complete; 50 → "Send a request" + confirmation 31 to the right ---- */
.side-panel__title--request {
  max-width: 560px;
}

.request-form {
  margin-top: 39px;
}

.request-section {
  border-top: 1px solid rgba(16, 23, 45, 0.1);
}

.request-section:last-of-type {
  border-bottom: 1px solid rgba(16, 23, 45, 0.1);
}

.request-section__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 24px 0 25px; /* + the 1px line = Figma line → 25 → title */
  border: 0;
  background: none;
  font: inherit;
  font-size: var(--fluid-20);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.04em;
  color: var(--color-link);
  cursor: pointer;
}

.request-section__head > span:first-child {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.request-section__chevron {
  transition: transform var(--transition);
}

.request-section.is-open .request-section__chevron {
  transform: rotate(180deg);
}

.request-section__check {
  flex-shrink: 0;
  width: 25px;
  height: 25px;
  border: 1px solid rgba(16, 23, 45, 0.3);
  border-radius: 3px;
}

.request-section.is-done .request-section__check {
  border-color: #2481f2;
  background: #2481f2 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='9'%3E%3Cpath d='M1 4.5l3.5 3.5L11 1' stroke='%23FFFFFF' stroke-width='1.6' fill='none'/%3E%3C/svg%3E") center no-repeat;
}

.request-section__body {
  display: none;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px 21px;
  margin-top: -3px; /* head → fields 22 */
  padding: 0 0 25px;
}

.request-section.is-open .request-section__body {
  display: grid;
}

.request-field--full {
  grid-column: 1 / -1;
}

.request-field input:not([type="checkbox"]),
.request-field select,
.request-field textarea {
  display: block;
  width: 100%;
  height: 58px;
  padding: 0 20px;
  border: 0;
  border-radius: 10px;
  background: var(--color-card-bg);
  font: inherit;
  font-size: var(--fluid-16);
  letter-spacing: -0.04em;
  color: #10172d;
  outline: none;
  appearance: none;
}

.request-field textarea {
  height: 116px;
  padding-top: 19px;
  resize: vertical;
}

.request-field ::placeholder {
  color: rgba(16, 23, 45, 0.5);
}

.request-field select {
  padding-right: 64px;
  cursor: pointer;
  background: var(--color-card-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44'%3E%3Crect width='44' height='44' rx='8' fill='%23F4F6FA'/%3E%3Cpath d='M18 20l4 4 4-4' stroke='%2310172D' stroke-width='1.2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 7px center / 44px 44px no-repeat;
}

.request-field select:has(option[value=""]:checked) {
  color: rgba(16, 23, 45, 0.5);
}

.request-field input:focus,
.request-field select:focus,
.request-field textarea:focus {
  box-shadow: inset 0 0 0 1px var(--color-blue);
}

.request-field.is-invalid input,
.request-field.is-invalid select,
.request-field.is-invalid textarea {
  box-shadow: inset 0 0 0 1px #d64545;
}

.request-consent p {
  margin: 0 0 15px;
  font-size: var(--fluid-16);
  letter-spacing: -0.04em;
  color: var(--color-link);
}

.request-consent .valuation-check input {
  background: var(--color-card-bg);
}

.request-form__foot {
  display: flex;
  align-items: center;
  gap: 31px;
  margin-top: 50px;
}

.request-form__foot .mc-btn {
  width: 240px;
  justify-content: space-between;
}

.request-form__done {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  font-size: var(--fluid-16);
  letter-spacing: -0.04em;
  color: rgba(16, 23, 45, 0.5);
}

.request-form__done[hidden] {
  display: none;
}

.request-form__done strong {
  font-size: var(--fluid-20);
  font-weight: 500;
  line-height: 1.25;
  color: var(--color-link);
}

@media (max-width: 1100px) {
  .request-field input:not([type="checkbox"]),
  .request-field select {
    height: 56px;
    font-size: 14px;
  }
}

@media (max-width: 700px) {
  .request-section__body {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }

  .request-field input:not([type="checkbox"]),
  .request-field select {
    height: 40px;
    padding-left: 15px;
  }

  .request-field select {
    padding-right: 44px;
    background-size: 30px 30px;
    background-position: right 5px center;
  }

  .request-form__foot {
    flex-wrap: wrap;
    gap: 20px;
  }
}

/* ==========================================================================
   31. Mobile = Figma 360 frames (page frames "360", 827, 830 …).
   The mobile design has its own, smaller scale — headings 30, hero 36,
   card titles 24, body 14, small text 12; buttons 40 high (10 px label,
   30 icon box); header: 8 px utility row, 320×40 pill (logo 129×30, CTA as
   a 101×20 text button, 2-line burger). Kept last so it wins over the
   per-section mobile rules above; page-specific fixes follow below.
   ========================================================================== */
@media (max-width: 700px) {
  :root {
    --fluid-84: 36px;
    --fluid-60: 30px;
    --fluid-35: 24px;
    --fluid-20: 14px;
    --fluid-18: 14px;
    --fluid-16: 12px;
  }

  /* ---- header: utility row 20 at y6, 6 gap, pill 40 ---- */
  .header .header__utility {
    height: auto;
    padding-top: 6px;
    font-size: 8px;
  }

  .header__utility .container {
    gap: 5px;
    height: 20px;
    padding-inline: 20px;
  }

  .header__utility-divider {
    height: 12px;
    background: rgba(255, 255, 255, 0.8);
  }

  .header__utility button[aria-label="Search"],
  .header__utility .header__lang {
    height: 20px;
    padding: 0 5px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 5px;
  }

  .header__utility button[aria-label="Search"] svg {
    width: 10px;
    height: 10px;
  }

  .header__utility-flag {
    width: 18px;
  }

  .header > .container {
    padding-top: 6px;
    padding-inline: 20px;
  }

  .header__pill {
    border-radius: 10px;
  }

  .header__row {
    height: 40px;
    gap: 10px;
    padding-inline: 10px;
  }

  .header .logo {
    font-size: 17px;
  }

  .header .header__actions {
    gap: 10px;
  }

  /* CTA = small text button 101×20, radius 3, 8 px label, no icon */
  .header .header__actions .mc-btn,
  .menu-overlay .mc-btn--sm {
    min-width: 0;
    height: 20px;
    gap: 0;
    padding: 0 5px;
    border-radius: 3px;
    font-size: 8px;
    font-weight: 500;
  }

  .header .header__actions .mc-btn .mc-btn__icon,
  .menu-overlay .mc-btn--sm .mc-btn__icon {
    display: none;
  }

  /* burger: 2 lines, 18×6 */
  .header .menu-toggle__bars {
    width: 18px;
    height: 8px;
  }

  .header .menu-toggle__bars span:nth-child(2) {
    display: none;
  }

  .header .menu-toggle__bars span:nth-child(3) {
    top: 6px;
  }

  body.menu-open .header .menu-toggle__bars span:nth-child(1) { transform: translateY(3px) rotate(45deg); }
  body.menu-open .header .menu-toggle__bars span:nth-child(3) { transform: translateY(-3px) rotate(-45deg); }

  /* ---- buttons: 162×40, radius 8, 10 px label, 30×30 icon (radius 6) inset 5 ---- */
  .mc-btn {
    min-width: 162px;
    height: 40px;
    padding: 5px 5px 5px 14px;
    border-radius: 8px;
    font-size: 10px;
  }

  .mc-btn .mc-btn__icon {
    width: 30px;
    height: 30px;
    border-radius: 6px;
  }
}

/* ---- Home at 360 (Figma "Main › 360"): hero 568 under the 72 header,
   eyebrow 12 at +60 → 10 → title 36/100; section heads: eyebrow 12 →
   10 → heading 30; buttons 40 below; key figures under a 324 globe, 2×2,
   lines 130, value 50 serif, label 12 (9 below), flush with the line end ---- */
@media (max-width: 700px) {
  .home-hero {
    --home-hero-h: 568px;
  }

  .home-hero__content {
    padding-top: 60px;
  }

  .home-hero__eyebrow {
    font-size: 12px;
  }

  .home-hero__title {
    margin-top: 10px;
    font-size: 36px;
  }

  .home-head__eyebrow {
    font-size: 12px;
  }

  .home-head__title {
    margin-top: 10px;
    font-size: 30px;
  }

  .home-head .mc-btn {
    min-width: 162px;
    margin-top: 40px;
  }

  .home-stats {
    gap: 30px 21px;
  }

  .home-stats__globe {
    width: 324px;
    max-width: 100%;
  }

  .home-stat {
    min-height: 130px;
    padding-left: 10px;
  }

  .home-stat__value {
    font-size: 50px;
  }

  .home-stat__label {
    margin-top: 9px;
    font-size: 12px;
  }

  .home-stat__label br {
    display: inline; /* Figma keeps the 2-line labels */
  }

  /* chips on the browser mockup scale with it (Figma 18 high, 6.3 px text) */
  .float-chip {
    height: 18px;
    gap: 8px;
    padding: 0 6px;
    border-radius: 4px;
    font-size: 6.3px;
  }

  .float-chip:has(.float-chip__icon) {
    gap: 5px;
    padding-left: 2px;
  }

  .float-chip__icon {
    width: 14px;
    height: 14px;
    border-radius: 3px;
  }

  .float-chip__icon svg {
    width: 8px;
    height: 8px;
  }
}

/* ---- Home at 360: industries slider (slide 320×400, radius 20, title 24,
   text 14, glass chips 35 / 12 px, arrows 40 radius 6, 30 below) and the
   service cards (320 wide, radius 10, padding 31/10/20, title 24, chips
   35 / 12 px 8 apart, button 20 below, illustration under a rule) ---- */
@media (max-width: 700px) {
  .industry-slider {
    --slide-w: min(320px, 100%);
  }

  .industry-slider__stage {
    height: 400px;
  }

  .industry-slide__content {
    padding: 21px 30px 20px;
  }

  .industry-slide__title {
    font-size: 24px;
  }

  .industry-slide__text {
    margin-top: 9px;
    font-size: 14px;
  }

  .glass-chip,
  .tag-chip {
    height: 35px;
    padding: 0 10px;
    font-size: 12px;
  }

  .industry-slider__nav {
    margin-top: 30px;
  }

  .industry-slider__arrow {
    width: 40px;
    height: 40px;
    border-radius: 6px;
  }

  .stack-card {
    min-height: 0;
    border-radius: 10px;
  }

  .stack-card__main {
    padding: 31px 10px 20px;
  }

  .stack-card__title {
    font-size: 24px;
  }

  .stack-card__subtitle {
    margin-top: 9px;
    font-size: 14px;
  }

  .stack-card__footer {
    padding-top: 20px;
  }

  .stack-card__chips {
    gap: 8px;
  }

  .stack-card__footer .mc-btn {
    min-width: 162px;
    margin-top: 20px;
  }

  .stack-card__visual {
    position: static;
    width: auto; /* Bricks block default 100% + the side margins overflowed */
    display: flex; /* Figma 360 shows it under the rule (was hidden on mobile) */
    margin: 0 10px;
    padding: 20px 0;
    border-top: 1px solid rgba(16, 23, 45, 0.1);
  }

  .stack-card__visual img {
    width: 220px;
  }
}

/* ---- Footer at 360 (Figma "Футер вариант 5"): no logo, 50 top; two 160
   columns 10 apart — left For business / Who we are / Contacts, M&A Deal
   Advisory, Consulting; right Industries, Corporate Finance — heading 16
   → 20 → links 14 @80% 8 apart, groups 40 apart; then full width: Contact
   links (16 caps, 25 circle) → phones (16, flag 24); rule 50 below; legal
   row 14 (5/20 gaps); address 10 @50% + 12 white; fine print 10 @50% ---- */
@media (max-width: 700px) {
  .footer {
    padding-top: 50px;
  }

  .footer__logo {
    display: none;
  }

  .footer__columns {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start; /* natural heights (main.js measures them) */
    gap: 40px 10px;
  }

  .footer__columns > :nth-child(1) { grid-column: 1; grid-row: 1; }
  .footer__columns > :nth-child(2) { grid-column: 2; grid-row: 1; }
  .footer__columns > :nth-child(3) { grid-column: 1; grid-row: 2; }
  .footer__columns > :nth-child(4) { grid-column: 1; grid-row: 3; }
  .footer__columns > :nth-child(5) { grid-column: 2; grid-row: 2 / span 2; }
  .footer__columns > :nth-child(6) {
    display: flex;
    flex-direction: column;
    grid-column: 1 / -1;
    grid-row: 4;
    margin-top: 10px;
  }

  /* main.js "Footer columns on mobile": 1px rows, each column spans its height */
  .footer__columns.is-masonry {
    grid-auto-rows: 1px;
    grid-auto-flow: dense;
    row-gap: 0;
    margin-bottom: -40px; /* the last span's +40 */
  }

  .footer__columns.is-masonry > * {
    grid-row-start: auto !important;
  }

  .footer__col-group {
    gap: 40px;
  }

  .footer__col h4,
  .footer__contact-links h4 {
    margin-bottom: 20px;
    font-size: 16px;
  }

  .footer__contact-links h4 {
    margin-bottom: 5px; /* + the 10 gap = Figma 15 */
  }

  .footer__col ul {
    gap: 8px;
  }

  .footer__col li {
    line-height: 1.25;
  }

  .footer__col a {
    display: block;
    font-size: 14px;
  }

  .footer__contact-links {
    order: -1;
    margin: 0 0 46px;
  }

  .footer__contact-links a,
  .footer__contact-phone {
    font-size: 16px;
  }

  .footer__contact-links svg {
    width: 25px;
    height: 25px;
    padding: 6px;
  }

  .footer__contact-phone {
    margin-bottom: 10px;
    font-weight: 500;
  }

  .footer__contact-phone img {
    width: 24px;
  }

  .footer__divider {
    margin: 40px 0;
  }

  .footer__bottom-row {
    justify-content: flex-start;
    gap: 5px 20px;
    font-size: 14px;
  }

  .footer__address {
    margin-top: 30px;
    gap: 6px;
    font-size: 10px;
    color: rgba(255, 255, 255, 0.5);
  }

  .footer__address strong {
    font-size: 12px;
  }

  .footer__legal {
    margin-top: 20px;
    gap: 20px;
    font-size: 10px;
  }
}

/* ==========================================================================
   32. Tablet = Figma 768 frames (page frames "768", 828, 831 …): desktop
   components (58 buttons, 84 key figures, desktop header) with smaller
   headings — hero 70, section headings 50, card titles 40, body 16,
   chips / small text 14; 30 side padding. Fixed values between 701 and
   1100 (the fluid scale would shrink them far below the Figma sizes).
   ========================================================================== */
@media (min-width: 701px) and (max-width: 1100px) {
  :root {
    --container-pad: 30px;
    --fluid-100: 70px;
    --fluid-84: 50px;
    --fluid-60: 50px;
    --fluid-48: 40px;
    --fluid-35: 30px;
    --fluid-27: 24px;
    --fluid-24: 20px;
    --fluid-20: 16px;
    --fluid-18: 16px;
    --fluid-16: 14px;
  }

  /* header CTA 248×40, icon 30 */
  .header .header__actions .mc-btn {
    min-width: 248px;
    height: 40px;
    padding: 5px 5px 5px 15px;
  }

  .header .header__actions .mc-btn .mc-btn__icon {
    width: 30px;
    height: 30px;
  }

  /* home: hero 1024 incl. the header, eyebrow 16 at 237 → 20 → title 70 */
  .home-hero {
    --home-hero-h: 914px;
  }

  .home-hero__content {
    padding-top: 127px;
  }

  .home-stat__value {
    font-size: 84px;
  }

  /* key figures: 610 globe, 2 columns from x80 / x434, lines 205, 70 apart */
  .home-stats {
    gap: 70px 0;
    padding-inline: 80px;
  }

  .home-stats__globe {
    width: min(100%, 610px);
  }

  .home-stat {
    min-height: 205px;
    padding-left: 30px;
  }

  .industry-slider {
    --slide-w: 500px;
  }

  .industry-slider__stage {
    height: 600px;
  }

  .industry-slider__arrow {
    width: 50px;
    height: 50px;
  }

  /* service cards 708 wide, radius 30, padding 40, illustration under a rule */
  .stack-card__main {
    padding: 40px 40px 30px;
    padding-right: 40px;
  }

  .stack-card__visual {
    position: static;
    width: auto; /* Bricks block default 100% + the side margins overflowed */
    display: flex;
    margin: 0 40px;
    padding: 30px 0 40px;
    border-top: 1px solid rgba(16, 23, 45, 0.1);
  }

  .stack-card__visual img {
    width: 340px;
  }
}

/* ---- Industries / Services / Countries archives at 360 (Figma 812):
   long two-tone hero titles 30; light panel radius 20; toolbar = full-width
   search (50) with the view toggle below it; image tiles 320×200 radius 10,
   title 24 above a 35 arrow box, both 10 from the bottom-left ---- */
@media (max-width: 700px) {
  .page-hero h1:has(.is-muted) {
    font-size: 30px;
  }

  .page-hero h1 br {
    display: none; /* desktop line breaks; mobile wraps naturally */
  }

  .page-panel {
    border-radius: 20px 20px 0 0;
  }

  .archive-toolbar {
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px;
  }

  .archive-toolbar .service-search {
    flex: 1 1 100%;
    width: 100%;
    height: 50px;
    gap: 10px;
    padding-inline: 15px;
    font-size: 14px;
  }

  .archive-toolbar .team-view-toggle {
    margin-left: 0;
  }

  .service-card {
    height: 200px;
    border-radius: 10px;
  }

  .service-card__content {
    inset: 10px;
    top: auto;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .service-card__content h2 {
    font-size: 24px;
  }

  .service-card__arrow {
    width: 35px;
    height: 35px;
    border: 0;
    border-radius: 6px;
  }
}

/* ---- Archives at 768 (Figma 811): page hero title 70; image tiles in 2
   columns, 192 high, radius 10, title above the arrow box like on mobile ---- */
@media (min-width: 701px) and (max-width: 1100px) {
  /* hero rhythm (811 / 795): crumb 66 below the header → 51 → title;
     panel 100 below the title (+30 overlap) */
  .page-hero {
    padding-block: 66px 130px;
  }

  .page-hero .breadcrumb {
    margin-bottom: 51px;
  }

  .page-hero h1 {
    font-size: 70px;
  }

  .page-hero h1 br {
    display: none;
  }

  .service-card {
    height: 192px;
    border-radius: 10px;
  }

  .service-card__content {
    inset: 10px;
    top: auto;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .service-card__content h2 {
    font-size: 28px;
  }

  .service-card__arrow {
    width: 35px;
    height: 35px;
    border: 0;
    border-radius: 6px;
  }
}

/* ---- Services list at 360 (Figma 796): category card radius 10, 30 top /
   10 side padding, title 24, subtitle 14 (10 below), link rows 45 pitch ---- */
@media (max-width: 700px) {
  .category-card {
    padding: 30px 10px 20px;
    border-radius: 10px;
  }

  .category-card--photo {
    padding: 10px;
  }

  .category-card__title {
    font-size: 24px;
  }

  .category-card__subtitle {
    margin-top: 20px;
  }

  .category-card__head {
    padding-bottom: 20px;
  }

  .category-card__illustration {
    width: 272px;
    margin: 30px auto 0;
  }

  .category-card__body {
    padding-top: 10px;
  }

  .link-row,
  .link-row--accent {
    padding-block: 13px;
  }
}

/* ---- Services list at 768 (Figma 795): hero title 50 (Industries 811 keeps
   70), category card padding 30, title 30 ---- */
@media (min-width: 701px) and (max-width: 1100px) {
  main:has(.category-card:not(.category-card--photo)) .page-hero h1 {
    font-size: 50px;
  }

  .category-card {
    padding: 30px;
  }

  .category-card__title {
    font-size: 30px;
  }
}

/* ---- Listing detail at 360 (Figma 783): crumb 14 wraps (current title on
   its own line); share / print / save icons above the facts; fact values
   16, labels 14; content cards padding 20 ---- */
@media (max-width: 700px) {
  .breadcrumb--light {
    flex-wrap: wrap;
    row-gap: 4px;
    font-size: 14px;
  }

  .breadcrumb--light .is-current {
    flex-basis: 100%;
  }

  .listing-facts {
    flex-direction: column-reverse;
    gap: 30px;
  }

  .listing-fact dt {
    font-size: 14px;
  }

  .listing-fact dd {
    font-size: 16px;
  }

  .listing-section {
    padding: 20px;
  }

  .listing-tombstones tr > :last-child {
    width: 60px;
  }

  /* form card (Book a Meeting, apply, contact forms): 10 padding, title 24,
     fields 44 high with a 12 px label */
  .form-card {
    padding: 30px 10px 20px;
    border-radius: 20px;
  }

  .form-card__title {
    margin-bottom: 30px;
    font-size: 24px;
  }

  .form-card .brxe-form {
    gap: 10px;
  }

  .form-card .brxe-form input:not([type="checkbox"]),
  .form-card .brxe-form select {
    height: 44px;
    padding-inline: 10px;
    font-size: 12px;
  }

  .form-card .brxe-form textarea {
    padding: 12px 10px;
    font-size: 12px;
  }

  .form-card .brxe-form button[type="submit"] {
    height: 40px;
    padding-left: 14px;
    font-size: 10px;
  }

  .form-card .brxe-form button[type="submit"]::after {
    top: 5px;
    right: 5px;
    width: 30px;
    height: 30px;
    border-radius: 6px;
  }
}

/* ---- Selected Transactions at 360 (Figma 783 / 798): title 30; one card
   per view (full width); the two arrows (40, radius 6) centred under it,
   30 below the card; "More transactions" 50 below ---- */
@media (max-width: 700px) {
  .selected-transactions__eyebrow {
    font-size: 12px;
  }

  .selected-transactions__title {
    margin-top: 10px;
    font-size: 30px;
  }

  .selected-transactions__slider {
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px 10px;
  }

  .selected-transactions__track,
  .selected-transactions__track[data-slider-track] {
    order: -1;
    flex: 1 1 100%;
    grid-auto-columns: 100%;
  }

  .selected-transactions__arrow,
  button.selected-transactions__arrow {
    display: flex;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 6px;
  }

  .form-card .brxe-form button[type="submit"] {
    width: auto;
    min-width: 162px;
  }
}

/* ---- Listing detail at 768 (Figma 780): crumb 70 below the header, title
   70, share / print / save to the right of the facts (as on desktop) ---- */
@media (min-width: 701px) and (max-width: 1100px) {
  .listing-detail {
    padding-top: 70px;
  }

  .listing-detail__title {
    font-size: 70px;
  }

  .listing-facts {
    flex-direction: row;
  }

  /* content cards + form card: 20 padding; table rows 42 pitch, deals right */
  .listing-section,
  .listing-detail .form-card {
    padding: 20px;
  }

  .listing-tombstones th,
  .listing-tombstones td,
  .listing-basic__row {
    padding-block: 10px;
  }

  .listing-tombstones tr > :last-child {
    width: 60px;
  }
}

/* ---- Listings at 360 (Figma 778 = grid tile, 818 = list = compact card):
   toolbar fields 40 / 12-14 px; tile padding 10, image 170 radius 10, chips
   40 / 14, title 24, rows full width with the arrow (35) under them;
   list card: no image / text, small chips (24 / 10), title 18, figures as
   label · value rows (14, values serif blue) ---- */
@media (max-width: 700px) {
  .listing-toolbar .service-search,
  .listing-toolbar input[type="search"] {
    height: 40px;
    font-size: 12px;
  }

  .listing-toolbar__btn,
  .listing-toolbar__icon-btn {
    height: 40px;
    font-size: 14px;
  }

  .listing-card,
  .listing-tile {
    border-radius: 10px;
  }

  .listing-tile__link {
    min-height: 0;
    padding: 10px 10px 10px;
  }

  .listing-tile__image {
    height: 170px;
    border-radius: 10px;
  }

  .info-chip {
    height: 40px;
    padding: 0 15px;
    font-size: 14px;
  }

  .listing-tile .listing-card__chips {
    flex-wrap: wrap;
  }

  .listing-tile__title {
    margin-top: 30px;
    font-size: 24px;
  }

  .listing-tile__excerpt {
    margin-top: 20px;
    font-size: 14px;
    -webkit-line-clamp: 4;
  }

  .listing-tile__figures {
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
  }

  .listing-tile__rows {
    flex-basis: auto;
  }

  .listing-tile__row dt,
  .listing-tile__row dd {
    font-size: 14px;
  }

  .listing-tile__row--lead dd {
    font-size: 18px;
  }

  .listing-tile__figures .listing-arrow {
    align-self: flex-end;
  }

  /* list view = compact card */
  .listing-card__link {
    flex-direction: column;
    gap: 10px;
    padding: 10px;
  }

  .listing-card__image,
  .listing-card__excerpt,
  .listing-card .listing-arrow {
    display: none;
  }

  .listing-card__main {
    gap: 10px;
    padding: 0;
    border: 0;
  }

  .listing-card__figures-row {
    display: block;
  }

  .listing-card__figures {
    padding: 0;
    border: 0;
  }

  .listing-cards {
    gap: 10px;
  }

  .listing-cards,
  .listing-grid {
    margin-top: 20px;
  }

  .listing-arrow {
    width: 35px;
    height: 35px;
    border-radius: 6px;
  }

  .listing-card__figures-col {
    display: flex;
    flex-direction: column;
  }

  .listing-card .info-chip {
    height: 24px;
    padding: 0 10px;
    gap: 5px;
    font-size: 10px;
  }

  .listing-card .info-chip .country-flag {
    width: 20px;
    height: 13px;
  }

  .listing-card__title {
    font-size: 18px;
  }

  .listing-card__figures,
  .listing-card__figures-col {
    gap: 8px;
  }

  .listing-card .listing-figure {
    flex-direction: row;
    justify-content: space-between;
  }

  .listing-card .listing-figure--lead {
    padding-bottom: 0;
    border-bottom: 0;
  }

  .listing-card .listing-figure__label {
    font-size: 14px;
  }

  .listing-card .listing-figure__value,
  .listing-card .listing-figure--lead .listing-figure__value {
    font-size: 14px;
    font-weight: 400;
    color: var(--color-link);
  }
}

/* ---- Listings at 768 (Figma 819): the list view is the compact card too
   (chips 24 / 10, title 18, label · value rows 14, figures in the left
   half); toolbar search + filter + Clear + Search in one row ---- */
@media (min-width: 701px) and (max-width: 1100px) {
  .listing-card {
    border-radius: 10px;
  }

  .listing-card__link {
    flex-direction: column;
    gap: 10px;
    padding: 10px 10px 15px;
  }

  .listing-card__image,
  .listing-card__excerpt,
  .listing-card .listing-arrow {
    display: none;
  }

  .listing-card__main {
    gap: 10px;
    padding: 0;
    border: 0;
  }

  .listing-card .info-chip {
    height: 24px;
    padding: 0 10px;
    gap: 5px;
    font-size: 10px;
  }

  .listing-card .info-chip .country-flag {
    width: 20px;
    height: 13px;
  }

  .listing-card__title {
    font-size: 18px;
  }

  .listing-card__figures {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    max-width: 50%;
    padding: 0;
    border: 0;
  }

  .listing-card__figures-row {
    display: block;
  }

  .listing-card__figures-col {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .listing-card .listing-figure {
    flex-direction: row;
    justify-content: space-between;
  }

  .listing-card .listing-figure--lead {
    padding-bottom: 0;
    border-bottom: 0;
  }

  .listing-card .listing-figure__label,
  .listing-card .listing-figure__value,
  .listing-card .listing-figure--lead .listing-figure__value {
    font-size: 14px;
  }

  .listing-card .listing-figure__value {
    font-weight: 400;
    color: var(--color-link);
  }

  .listing-cards {
    gap: 10px;
    margin-top: 30px;
  }

  .listing-toolbar__row {
    flex-wrap: nowrap;
  }

  .listing-search {
    flex: 1 1 auto;
  }

  .listing-toolbar__btn--primary {
    flex: 0 0 auto;
    min-width: 128px;
  }
}

/* ---- Service / Industry detail at 360 (Figma 798): accordion radius 10,
   10 padding, title 16 with a rule under it when open, 15 apart ---- */
@media (max-width: 700px) {
  .detail-accordion {
    margin-top: 30px;
  }

  .detail-accordion__item {
    border-radius: 10px;
  }

  .detail-accordion__item summary {
    padding: 13px 10px;
    font-size: 16px;
  }

  .detail-accordion__item[open] summary {
    margin-inline: 10px;
    padding: 13px 0;
    border-bottom: 1px solid rgba(16, 23, 45, 0.1);
  }

  .detail-accordion__body {
    padding: 20px 10px 10px;
    margin-top: 0;
  }

  /* numbered tiles: 1 column, 20 apart; badge 16, title 16, text 14 */
  .detail-tiles {
    gap: 20px;
  }

  .detail-tiles li {
    gap: 15px;
  }

  .detail-tiles__num,
  .detail-tiles__title {
    font-size: 16px;
  }

  .detail-tiles__text {
    margin-top: 6px;
  }
}

/* ---- Service / Industry detail at 768 (Figma 797): open accordion item
   gets the rule under its title (as on mobile) ---- */
@media (min-width: 701px) and (max-width: 1100px) {
  .detail-accordion__item[open] summary {
    margin-inline: 25px;
    padding-inline: 0;
    border-bottom: 1px solid rgba(16, 23, 45, 0.1);
  }

  .detail-accordion__body {
    padding-top: 20px;
  }
}

/* ---- Transactions at 360 (Figma 802): search + selects 40 high, 14 px —
   Year / Transaction Type in one row, Industries below; cards without
   border, padding 30 / 10 / 20, radius 15, flags 30 wide; slider + archive
   cards share the card ---- */
@media (max-width: 700px) {
  .archive-toolbar .filter-selects {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    width: 100%;
  }

  .filter-select--year,
  .filter-select--type,
  .filter-select--industry {
    flex-basis: auto;
    width: 100%;
  }

  .archive-toolbar .filter-selects select,
  .filter-selects select {
    height: 40px;
    font-size: 14px;
  }

  .transaction-card,
  .tx-grid .transaction-card {
    padding: 30px 10px 20px;
    border: 0;
    border-radius: 15px;
  }

  .transaction-card__flags img {
    width: 30px;
    height: 20px;
  }

  .transaction-card__title {
    margin-top: 20px;
  }

  .tx-grid .transaction-card__outcome {
    margin-top: 40px;
    font-size: 14px;
  }

  /* Figma 802: dark titles on mobile (desktop archive uses #06438E) */
  .tx-grid .transaction-card__title,
  .tx-grid .transaction-card__outcome {
    color: #10172d;
  }
}

/* ---- Transactions at 768 (Figma 801): full-width search, selects at their
   own width below it, cards without border, dark titles ---- */
@media (min-width: 701px) and (max-width: 1100px) {
  .archive-toolbar .service-search {
    flex: 1 1 100%;
    width: 100%;
  }

  .filter-select--year { flex: 0 0 116px; }
  .filter-select--type { flex: 0 0 205px; }
  .filter-select--industry { flex: 0 0 158px; }

  .tx-grid .transaction-card {
    padding: 30px 20px 20px;
    border: 0;
  }

  .tx-grid .transaction-card__title,
  .tx-grid .transaction-card__outcome {
    color: #10172d;
  }
}

/* ---- About at 360 (Figma 800): hero title 36; professionals one card per
   row (photo 320 square), name 20, location 14, position 12 caps; filter
   fields 40 high ---- */
@media (max-width: 700px) {
  .about-hero h1 {
    font-size: 36px;
  }

  .person-grid,
  .person-grid.person-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 30px;
  }

  .person-card__name {
    font-size: 20px;
  }

  .person-card__location {
    margin-top: 10px;
    font-size: 14px;
  }

  .person-card__location img {
    width: 27px;
    height: 18px;
  }

  .person-card__position {
    font-size: 12px;
    text-transform: uppercase;
  }

  .team-filters select,
  .team-filters select.filter-select {
    height: 40px;
    font-size: 14px;
  }

  .team-filters .service-search {
    height: 40px;
  }
}

/* ---- Contacts at 360 (Figma 806) + all buttons: every desktop
   "min-width: 240" button is 162 wide on mobile; info cards padding
   20 / 10, radius 10, title 24 (20 below the badge) ---- */
@media (max-width: 700px) {
  main .mc-btn.mc-btn:not(.valuation-step__actions .mc-btn) {
    min-width: 162px;
  }

  .info-cards {
    gap: 10px;
  }

  .info-card {
    padding: 20px 10px;
    border-radius: 10px;
  }

  .info-card h3 {
    margin-top: 20px;
  }

  .info-card p {
    margin-top: 10px;
  }

  .info-card p + .mc-btn,
  .info-card p + div:has(> .mc-btn) {
    margin-top: 20px;
  }
}

/* ==========================================================================
   33. Fluent Forms — every site form since 25.10.2026 (ids 3, 5–11; 3 =
   agent "Book a Meeting", wrapper .mc-ff--card in the agent template). Embedded with a Bricks Shortcode
   element inside a wrapper that names the context:
     .mc-ff.mc-ff--card       form cards (listing, service, industry, job,
                              career pop-up) — = .form-card .brxe-form
     .mc-ff.mc-ff--panel      "Become a Partner" side panel — = §30
     .mc-ff.mc-ff--request    "Contact Form" side panel, accordion — = §30
     .mc-ff.mc-ff--valuation  Business Valuation calculator, 2 steps — = §29
   main.js "Fluent Forms" turns the submit into an .mc-btn and builds the
   sections / steps from the form's custom-HTML markers
   (<div class="mc-step-marker" data-mc-title="…">); it also tags the groups
   with the static classes (request-field…, valuation-field…), so those
   layouts come from §29/§30 unchanged.
   Fluent's own CSS loads after this file and reaches (0,3,1), so every rule
   starts with .mc-ff .fluentform.ff-default (0,3,0) + the element class.
   Field options: container class "mc-half" (card: half row), "mc-full"
   (request / valuation: full row), "mc-info" (valuation: (i) icon).
   ========================================================================== */
.mc-ff {
  --ff-h: 58px;
  --ff-pad: 20px;
  --ff-bg: var(--color-card-bg);
  --ff-border: 1px solid rgba(16, 23, 45, 0.3);
  --ff-font: var(--fluid-16);
  --ff-select: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='34'%3E%3Crect width='34' height='34' rx='6' fill='%23F4F6FA'/%3E%3Cpath d='M13 15l4-3 4 3M13 19l4 3 4-3' stroke='%2310172D' stroke-width='1.2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --ff-select-size: 34px;
  --ff-select-inset: 10px;
}

.mc-ff--panel {
  --ff-border: 0;
}

.mc-ff--request,
.mc-ff--valuation {
  --ff-border: 0;
  --ff-select: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44'%3E%3Crect width='44' height='44' rx='8' fill='%23F4F6FA'/%3E%3Cpath d='M18 20l4 4 4-4' stroke='%2310172D' stroke-width='1.2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --ff-select-size: 44px;
  --ff-select-inset: 7px;
}

.mc-ff--valuation {
  --ff-bg: var(--color-page-bg);
  --ff-select: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44'%3E%3Crect width='44' height='44' rx='8' fill='%23FFFFFF'/%3E%3Cpath d='M18 20l4 4 4-4' stroke='%2310172D' stroke-width='1.2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.mc-ff .fluentform.ff-default {
  font-family: var(--font-body);
}

.mc-ff .fluentform.ff-default fieldset {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px 10px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.mc-ff .fluentform.ff-default .ff-el-group {
  grid-column: 1 / -1;
  min-width: 0;
  margin: 0;
}

/* Fluent's clearfix (::before/::after display:table) would be extra
   flex / grid items here */
.mc-ff .fluentform.ff-default .ff-el-group::before,
.mc-ff .fluentform.ff-default .ff-el-group::after,
.mc-ff .fluentform.ff-default .ff-el-input--content::before,
.mc-ff .fluentform.ff-default .ff-el-input--content::after {
  content: none;
}

.mc-ff--card .fluentform.ff-default .ff-el-group.mc-half {
  grid-column: auto;
}

/* Figma: placeholders only — labels only on the valuation form and on
   check-box questions of the request form (.ff-el-group: Fluent's own
   ".ff-el-group.ff-el-form-top .ff-el-input--label" shows them) */
.mc-ff .fluentform.ff-default .ff-el-group .ff-el-input--label {
  display: none;
}

/* Fluent "Name" field: extra wrapper (.ff-field_container > .ff-t-container
   > .ff-t-cell > .ff-el-group) — agent form 3 */
.mc-ff .fluentform.ff-default fieldset > .ff-field_container {
  grid-column: 1 / -1;
  margin: 0;
}

.mc-ff .fluentform.ff-default .ff-t-container {
  display: block;
  margin: 0;
}

.mc-ff .fluentform.ff-default .ff-t-cell {
  margin: 0;
  padding: 0;
}

.mc-ff .fluentform.ff-default .ff-el-form-control {
  display: block;
  width: 100%;
  height: var(--ff-h);
  margin: 0;
  padding: 0 var(--ff-pad);
  border: var(--ff-border);
  border-radius: 10px;
  background-color: var(--ff-bg);
  box-shadow: none;
  font-family: var(--font-body);
  font-size: var(--ff-font);
  line-height: normal;
  letter-spacing: -0.04em;
  color: #10172d;
}

.mc-ff .fluentform.ff-default textarea.ff-el-form-control {
  height: 116px;
  min-height: 0;
  padding-block: 18px;
  resize: vertical;
}

.mc-ff .fluentform.ff-default .ff-el-form-control::placeholder {
  color: rgba(16, 23, 45, 0.5);
}

.mc-ff .fluentform.ff-default select.ff-el-form-control {
  appearance: none;
  padding-right: calc(var(--ff-select-size) + var(--ff-select-inset) + 12px);
  background: var(--ff-bg) var(--ff-select) right var(--ff-select-inset) center / var(--ff-select-size) var(--ff-select-size) no-repeat;
  cursor: pointer;
}

.mc-ff .fluentform.ff-default select.ff-el-form-control:has(option[value=""]:checked) {
  color: rgba(16, 23, 45, 0.5);
}

.mc-ff .fluentform.ff-default .ff-el-form-control:focus {
  border-color: rgba(16, 23, 45, 0.3);
  background-color: var(--ff-bg);
  color: #10172d;
  outline: 2px solid var(--color-blue);
  outline-offset: 1px;
}

.mc-ff--request .fluentform.ff-default .ff-el-form-control:focus,
.mc-ff--valuation .fluentform.ff-default .ff-el-form-control:focus {
  outline: none;
  box-shadow: inset 0 0 0 1px var(--color-blue);
}

/* errors (Fluent adds .ff-el-is-error + a .text-danger line; main.js
   .is-invalid) — also while focused */
.mc-ff .fluentform.ff-default .ff-el-is-error .ff-el-form-control,
.mc-ff .fluentform.ff-default .ff-el-is-error .ff-el-form-control:focus,
.mc-ff .fluentform.ff-default .ff-el-group.is-invalid .ff-el-form-control,
.mc-ff .fluentform.ff-default .ff-el-group.is-invalid .ff-el-form-control:focus {
  border-color: #d64545;
  box-shadow: inset 0 0 0 1px #d64545;
}

.mc-ff .fluentform.ff-default .text-danger {
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: #d64545;
}

/* ---- check boxes (option field + terms): 20×20 #F4F6FA radius 3, label
   14/125 #10172D 50 %, 10 apart; 28 below the textarea, 15 between ---- */
.mc-ff .fluentform.ff-default .ff-el-group:has(.ff-el-form-check) {
  margin-top: 8px;
}

.mc-ff .fluentform.ff-default .ff-el-group:has(.ff-el-form-check) + .ff-el-group:has(.ff-el-form-check) {
  margin-top: -5px;
}

.mc-ff .fluentform.ff-default .ff-el-form-check {
  margin: 0;
}

/* several options in one check-box field (agent form 3): 15 apart */
.mc-ff .fluentform.ff-default .ff-el-form-check + .ff-el-form-check {
  margin-top: 15px;
}

.mc-ff .fluentform.ff-default .ff-el-form-check-label,
.mc-ff .fluentform.ff-default .ff-el-tc .ff_tc_label {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  font-size: 14px;
  line-height: 1.25;
  letter-spacing: -0.04em;
  color: rgba(16, 23, 45, 0.5);
  cursor: pointer;
}

.mc-ff .fluentform.ff-default .ff-el-tc {
  display: block;
}

.mc-ff .fluentform.ff-default .ff-el-tc .ff_tc_label > span,
.mc-ff .fluentform.ff-default .ff-el-tc .ff_tc_label > div {
  display: block;
  width: auto;
  padding: 0 !important; /* Fluent: padding-top 8px !important */
}

.mc-ff .fluentform.ff-default .ff_t_c a {
  color: var(--color-link);
}

.mc-ff .fluentform.ff-default .ff-el-form-check-input {
  position: static; /* Fluent: relative, top -2px */
  appearance: none;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 3px;
  background: var(--color-page-bg);
  cursor: pointer;
}

.mc-ff .fluentform.ff-default .ff-el-form-check-input:checked {
  background: var(--color-blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='10'%3E%3Cpath d='M1 5l3.5 3.5L11 1' stroke='white' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px 10px no-repeat;
}

.mc-ff .fluentform.ff-default .ff-el-is-error .ff-el-form-check-input,
.mc-ff .fluentform.ff-default .ff-el-group.is-invalid .ff-el-form-check-input {
  box-shadow: inset 0 0 0 1px #d64545;
}

/* ---- file upload = the 58 high #F4F6FA bar with the 44×44 upload box ---- */
.mc-ff .fluentform.ff-default .ff_file_upload_holder {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  height: var(--ff-h);
  margin: 0;
  padding: 0 7px 0 20px;
  border-radius: 10px;
  background: var(--color-page-bg);
  cursor: pointer;
}

.mc-ff .fluentform.ff-default .ff_file_upload_holder::after {
  content: "";
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 8px;
  background: var(--color-card-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%2306438e' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 16V4M7 9l5-5 5 5'/%3E%3Cpath d='M4 16v4h16v-4'/%3E%3C/svg%3E") center / 18px no-repeat;
}

.mc-ff .fluentform.ff-default .ff_upload_btn.ff-btn {
  overflow: hidden;
  padding: 0;
  border: 0;
  background: none;
  font-size: var(--ff-font);
  font-weight: 400;
  letter-spacing: -0.04em;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: rgba(16, 23, 45, 0.5);
}

.mc-ff .fluentform.ff-default .ff-el-is-error .ff_file_upload_holder {
  box-shadow: inset 0 0 0 1px #d64545;
}

.mc-ff .fluentform.ff-default .ff-uploaded-list {
  margin: 0;
  font-size: 14px;
  color: #10172d;
}

.mc-ff .fluentform.ff-default .ff-uploaded-list:not(:empty) {
  margin-top: 10px;
}

/* ---- submit (main.js makes it .mc-btn.mc-btn--primary) ---- */
.mc-ff .fluentform.ff-default .ff_submit_btn_wrapper {
  margin-top: 10px;
}

.mc-ff .fluentform.ff-default .ff-btn-submit.mc-btn {
  cursor: pointer;
}

.mc-ff .fluentform.ff-default .ff-btn-submit.mc-btn:disabled {
  opacity: 0.65;
}

.mc-ff--card .fluentform.ff-default .ff-btn-submit.mc-btn {
  width: 100%;
}

/* success / error messages */
.mc-ff .ff-message-success {
  margin: 20px 0 0;
  padding: 0;
  border: 0;
  box-shadow: none;
  font-size: var(--fluid-18);
  line-height: 1.35;
  letter-spacing: -0.04em;
  color: var(--color-link);
}

.mc-ff .ff-message-success p {
  margin: 0;
}

.mc-ff .ff-errors-in-stack .error {
  font-size: 14px;
  color: #d64545;
}

/* ---- side panel "Become a Partner": white fields without border, button
   240 wide 53 below ---- */
.mc-ff--panel .fluentform.ff-default fieldset {
  grid-template-columns: minmax(0, 1fr);
}

.mc-ff--panel .fluentform.ff-default .ff_submit_btn_wrapper {
  margin-top: 53px; /* + the 20 gap */
}

.mc-ff--panel .fluentform.ff-default .ff-btn-submit.mc-btn,
.mc-ff--request .fluentform.ff-default .ff-btn-submit.mc-btn {
  width: 240px;
}

/* ---- request form (accordion built by main.js into §30's .request-section) ---- */
.mc-ff--request .fluentform.ff-default fieldset {
  display: block;
}

.mc-ff--request .fluentform.ff-default .request-section__body .ff-el-group {
  grid-column: auto;
}

.mc-ff--request .fluentform.ff-default .request-section__body .ff-el-group.request-field--full {
  grid-column: 1 / -1;
}

.mc-ff--request .fluentform.ff-default .ff-el-group:has(.ff-el-form-check) {
  margin-top: 0;
}

.mc-ff--request .fluentform.ff-default .ff-el-group:has(.ff-el-form-check) .ff-el-input--label {
  display: block;
  margin: 0 0 15px;
}

.mc-ff--request .fluentform.ff-default .ff-el-group:has(.ff-el-form-check) .ff-el-input--label label {
  font-size: var(--fluid-16);
  font-weight: 400;
  letter-spacing: -0.04em;
  color: var(--color-link);
}

/* request + valuation check boxes = .valuation-check: 30×30 radius 8, 16 label */
.mc-ff--request .fluentform.ff-default .ff-el-form-check-label,
.mc-ff--valuation .fluentform.ff-default .ff-el-tc .ff_tc_label {
  align-items: center;
  font-size: var(--fluid-16);
  color: rgba(16, 23, 45, 0.8);
}

.mc-ff--request .fluentform.ff-default .ff-el-form-check-input,
.mc-ff--valuation .fluentform.ff-default .ff-el-form-check-input {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background-color: var(--ff-bg);
}

.mc-ff--request .fluentform.ff-default .ff-el-form-check-input:checked,
.mc-ff--valuation .fluentform.ff-default .ff-el-form-check-input:checked {
  background: var(--color-blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='10'%3E%3Cpath d='M1 5l4 4 8-8' stroke='%23FFFFFF' stroke-width='1.8' fill='none'/%3E%3C/svg%3E") center no-repeat;
}

.mc-ff--request .fluentform.ff-default .request-form__foot .ff_submit_btn_wrapper {
  margin: 0;
}

.mc-ff--request .ff-message-success {
  display: none; /* main.js shows .request-form__done next to the button */
}

/* ---- valuation (steps built by main.js into §29's .valuation-step) ---- */
.mc-ff--valuation .fluentform.ff-default fieldset {
  display: block;
}

.mc-ff--valuation .fluentform.ff-default .valuation-grid .ff-el-group {
  grid-column: auto;
}

.mc-ff--valuation .fluentform.ff-default .valuation-grid .ff-el-group.valuation-field--full {
  grid-column: 1 / -1;
}

.mc-ff--valuation .fluentform.ff-default .ff-el-input--label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
}

.mc-ff--valuation .fluentform.ff-default .ff-el-input--label label {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: var(--fluid-18);
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: -0.04em;
  color: #10172d;
}

.mc-ff--valuation .fluentform.ff-default .ff-el-input--label.ff-el-is-required label::after {
  content: none; /* the labels carry their own "*" */
}

.mc-ff--valuation .fluentform.ff-default .ff-el-tooltip {
  display: none;
}

.mc-ff--valuation .fluentform.ff-default .valuation-field--check {
  margin-top: 0;
}

.mc-ff--valuation .fluentform.ff-default .valuation-field--check .ff_t_c {
  padding: 0; /* the terms text, moved above the box as the question */
}

.mc-ff--valuation .fluentform.ff-default .valuation-step__actions .ff_submit_btn_wrapper {
  margin: 0;
}

.mc-ff--valuation .fluentform.ff-default .valuation-step__actions .ff-btn-submit.mc-btn {
  width: 240px;
}

@media (max-width: 1100px) {
  .mc-ff--panel,
  .mc-ff--request {
    --ff-h: 56px;
    --ff-font: 14px;
  }
}

@media (max-width: 700px) {
  .mc-ff--card {
    --ff-h: 44px;
    --ff-pad: 10px;
    --ff-font: 12px;
  }

  .mc-ff--card .fluentform.ff-default fieldset,
  .mc-ff--panel .fluentform.ff-default fieldset {
    gap: 10px;
  }

  .mc-ff--card .fluentform.ff-default textarea.ff-el-form-control {
    padding-block: 12px;
  }

  .mc-ff--card .fluentform.ff-default .ff-btn-submit.mc-btn {
    width: auto; /* = .form-card .brxe-form (Figma 783): 162+ wide */
  }

  .mc-ff--panel {
    --ff-h: 40px;
  }

  .mc-ff--panel .fluentform.ff-default .ff_submit_btn_wrapper {
    margin-top: 60px;
  }

  .mc-ff--request {
    --ff-h: 40px;
    --ff-pad: 15px;
    --ff-select-size: 30px;
    --ff-select-inset: 5px;
  }

  .mc-ff--valuation .fluentform.ff-default .valuation-step__actions .ff_submit_btn_wrapper,
  .mc-ff--valuation .fluentform.ff-default .valuation-step__actions .ff-btn-submit.mc-btn {
    width: 100%;
  }
}

/* ==========================================================================
   34. Smart search — PROTOTYPE, no Figma frame yet (home hero form +
   the "Showing: …" line on the listings archive; logic: main.js "Smart
   search"). Field = the listings search field (white, radius 10, 60 high)
   with the primary button inside; example chips below.
   ========================================================================== */
.smart-search {
  display: flex;
  align-items: center;
  gap: 10px;
  width: min(760px, 100%);
  margin: 40px auto 0;
  padding: 7px;
  border-radius: 14px;
  background: var(--color-card-bg);
  box-shadow: 0 10px 40px rgba(4, 10, 29, 0.35);
  animation: home-fade-up 1s ease 0.6s both;
}

.smart-search__field {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
  padding-left: 13px;
  color: rgba(16, 23, 45, 0.5);
  cursor: text;
}

/* doubled class: beats Bricks' "input { text-align: inherit }" (the hero
   is centred) and Core Framework's input padding */
.smart-search .smart-search__field input {
  flex: 1;
  min-width: 0;
  height: 44px;
  padding: 0;
  text-align: left;
  border: 0;
  outline: 0;
  background: none;
  font-family: var(--font-body);
  font-size: var(--fluid-18);
  letter-spacing: -0.04em;
  color: #10172d;
}

.smart-search__field input::placeholder {
  color: rgba(16, 23, 45, 0.5);
}

.smart-search__field input::-webkit-search-cancel-button {
  display: none;
}

.smart-search .mc-btn {
  min-width: 160px;
}

.smart-search__examples {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px;
  width: min(760px, 100%);
  margin: 16px auto 0;
  font-size: 14px;
  letter-spacing: -0.02em;
  color: rgba(255, 255, 255, 0.6);
  animation: home-fade-up 1s ease 0.75s both;
}

.smart-search__example {
  padding: 6px 14px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50px;
  background: rgba(8, 14, 36, 0.6);
  backdrop-filter: blur(6px);
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  transition: background var(--transition), border-color var(--transition);
}

.smart-search__example:hover {
  border-color: rgba(255, 255, 255, 0.5);
  background: rgba(8, 14, 36, 0.85);
}

/* listings archive: what the sentence was turned into */
.smart-hint {
  margin: 15px 0 0;
  font-size: var(--fluid-16);
  letter-spacing: -0.04em;
  color: var(--color-link);
}

.smart-hint[hidden] {
  display: none;
}

@media (max-width: 700px) {
  .smart-search {
    margin-top: 30px;
    padding: 5px;
    border-radius: 10px;
  }

  .smart-search__field {
    padding-left: 8px;
  }

  .smart-search__field svg {
    display: none;
  }

  .smart-search__field input {
    height: 40px;
    font-size: 14px;
  }

  .smart-search .mc-btn.mc-btn {
    min-width: 0;
  }

  .smart-search__examples {
    font-size: 12px;
  }

  .smart-search__example:nth-of-type(n + 3) {
    display: none;
  }
}

/* ---- Career at 768 (Figma 830): map text 450 wide, 296 below the hero
   text / 447 above the panel; panel: "Vacancies" 100 down → 60 → toolbar
   (20 / 10 inset, fields 50, 16 apart) → 30 → one card per row (250, 15
   apart); "Work with us" 1065 tall: title 60 down, the 4 steps 2 × 2 at
   the bottom (no min height, 20 / 24 apart), 100 below ---- */
@media (min-width: 701px) and (max-width: 1100px) {
  .about-map--career {
    padding-top: 152px;
    padding-bottom: 447px;
  }

  .about-map--career .about-map__text p {
    max-width: 450px;
  }

  .career-jobs {
    padding-top: 100px;
    padding-bottom: 150px; /* 120 visible above the photo (it overlaps 30) */
  }

  .career-jobs__title {
    margin-bottom: 60px;
  }

  .career-toolbar.career-toolbar {
    gap: 16px 10px;
    margin-bottom: 30px;
    padding: 20px 10px;
  }

  .career-toolbar .service-search,
  .career-toolbar select {
    height: 50px;
  }

  .vacancy-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .career-work {
    min-height: 1065px;
  }

  .career-work__inner {
    padding-block: 60px 100px;
  }

  .career-work__intro p {
    max-width: 556px;
    margin-inline: auto;
  }

  .career-steps {
    gap: 20px 24px;
  }

  .career-step {
    justify-content: flex-start;
    min-height: 0;
    padding-left: 20px;
  }

  .career-step h3 {
    margin-top: 33px;
  }

  .career-step p {
    margin-top: 12px;
  }
}

/* ---- Career at 360 (Figma 831): map title 180 below the hero text, text
   248 above the panel; panel: title 34 down → 39 → toolbar (20 / 10 inset,
   fields 40, 10 apart, selects 2 per row) → 20 → cards 180 (20 inset):
   pills 30 (12 px) → 20 → title 18/22 → 20 → arrow 30 below it, 15 apart;
   "Work with us": title 73 down → 40 → text → 60 → steps one per row,
   110 tall, 25 apart (12 px number, 24 title, 14/18 text), 75 below ---- */
@media (max-width: 700px) {
  .about-map--career {
    padding-top: 119px;
    padding-bottom: 248px;
  }

  .career-jobs {
    padding-top: 34px;
    padding-bottom: 119px; /* 89 visible above the photo */
  }

  .career-jobs__title {
    margin-bottom: 39px;
  }

  .career-toolbar.career-toolbar {
    gap: 10px;
    margin-bottom: 20px;
    padding: 20px 10px;
  }

  .career-toolbar__selects {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .career-toolbar .service-search,
  .career-toolbar select {
    height: 40px;
  }

  .vacancy-card {
    gap: 20px;
    min-height: 180px;
    padding: 20px;
  }

  .vacancy-card__tags {
    gap: 10px;
  }

  .vacancy-card .tag-pill {
    gap: 6px;
    height: 30px;
    padding: 0 10px;
    font-size: 12px;
  }

  .vacancy-card .tag-pill svg {
    width: 13px;
    height: 13px;
  }

  .vacancy-card__foot {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }

  .vacancy-card__title {
    max-width: none;
    font-size: 18px;
    line-height: 1.22;
  }

  .vacancy-card__arrow {
    width: 30px;
    height: 30px;
    border-radius: 4px;
  }

  .career-work {
    min-height: 0;
  }

  .career-work__inner {
    justify-content: flex-start;
    padding-block: 73px 75px;
  }

  .career-work__intro p {
    margin-top: 40px;
    line-height: 1.29;
  }

  .career-steps {
    gap: 25px;
  }

  .career-step {
    justify-content: flex-start;
    min-height: 0;
    padding-left: 20px;
  }

  .career-step__num {
    font-size: 12px;
  }

  .career-step h3 {
    margin-top: 25px;
    font-size: 24px;
  }

  .career-step p {
    margin-top: 8px;
    line-height: 1.29;
  }
}

/* ---- Vacancy pop-up at 360 (Figma 816): panel edge to edge 40 below the
   top (r30, 40 / 20 inset), close 30×30; title 36/100 48 below the panel
   top, 30 → pills 30 (12 px) → 20 → rule → 30 → text 14/19 (20 between
   paragraphs) → 30 → accordions (10 inset, head 16) → 90 → Apply card:
   fields 40, button 260×58 (16 px), 40 below ---- */
@media (max-width: 700px) {
  .vacancy-modal {
    padding: 40px 0 0;
  }

  .vacancy-modal__panel {
    padding: 40px 20px;
  }

  .vacancy-modal__close {
    top: 40px;
    right: 20px;
    width: 30px;
    height: 30px;
    border-radius: 4px;
  }

  .vacancy-modal__close svg {
    width: 12px;
    height: 12px;
  }

  .vacancy-modal .vacancy__title {
    margin-top: 48px;
    padding-right: 0;
  }

  .vacancy__title {
    font-size: 36px;
  }

  .vacancy__head {
    gap: 30px;
    padding-bottom: 20px;
  }

  .vacancy__tags .tag-pill {
    gap: 6px;
    height: 30px;
    padding: 0 10px;
    font-size: 12px;
  }

  .vacancy__tags .tag-pill svg {
    width: 13px;
    height: 13px;
  }

  .vacancy__body {
    gap: 90px;
    margin-top: 30px;
  }

  .vacancy__about p + p {
    margin-top: 20px;
  }

  .vacancy__sections {
    margin-top: 30px;
  }

  .vacancy-acc,
  .vacancy-acc.vacancy-acc {
    padding: 0 10px;
  }

  .vacancy-acc summary {
    padding-block: 20px;
    font-size: 16px;
  }

  .vacancy-acc__body {
    font-size: 14px;
    line-height: 1.36;
  }

  .vacancy__apply.form-card {
    padding-bottom: 40px;
  }

  .vacancy__apply .form-card__title {
    margin-bottom: 41px;
  }

  .vacancy__apply .mc-ff--card {
    --ff-h: 40px;
  }

  .vacancy__apply .mc-ff--card .fluentform.ff-default .ff-btn-submit.mc-btn,
  .vacancy__apply .brxe-form button[type="submit"] {
    width: 260px;
    height: 58px;
    padding: 7px 7px 7px 20px;
    font-size: 16px;
  }

  .vacancy__apply .mc-ff--card .ff-btn-submit.mc-btn .mc-btn__icon {
    width: 44px;
    height: 44px;
    border-radius: 8px;
  }

  .vacancy__apply .brxe-form button[type="submit"]::after {
    top: 7px;
    right: 7px;
    width: 44px;
    height: 44px;
    border-radius: 8px;
  }

  .vacancy__apply .brxe-form input:not([type="checkbox"]),
  .vacancy__apply .brxe-form select {
    height: 40px;
  }
}

/* ---- Vacancy pop-up at 768 (Figma 829): panel edge to edge 40 below the
   top (30 inset), close 58 at 60 / 30; title 50 two lines 48 below the
   close; accordions 20 inset, head 18; Apply card 20 inset, button 260 ---- */
@media (min-width: 701px) and (max-width: 1100px) {
  .vacancy-modal {
    padding: 40px 0 0;
  }

  .vacancy-modal__panel {
    padding: 30px;
  }

  .vacancy-modal__close {
    top: 60px;
    right: 30px;
  }

  .vacancy-modal .vacancy__title {
    margin-top: 135px;
    padding-right: 0;
  }

  .vacancy-acc,
  .vacancy-acc.vacancy-acc {
    padding: 0 20px;
  }

  .vacancy-acc summary {
    font-size: 18px;
  }

  .vacancy__apply.form-card {
    padding-inline: 20px;
  }

  .vacancy__apply .mc-ff--card .fluentform.ff-default .ff-btn-submit.mc-btn,
  .vacancy__apply .brxe-form button[type="submit"] {
    width: 260px;
  }
}

/* ---- Lehman at 360 (Figma 832): deal size field 40 (14 px); the table
   sits in a white card (r10, 1px #10172D@10%, 20 / 10 inset), cells
   between 1px rules with a rule between the two columns (right one 100
   wide), rows 38 / 57 (one / two lines, 14 px), sum rows 40 (16 serif) ---- */
@media (max-width: 700px) {
  .lehman__input {
    height: 40px;
    padding-inline: 10px;
    font-size: 14px;
  }

  .lehman-table {
    border-collapse: separate;
    border-spacing: 0;
    border: solid var(--color-card-bg);
    border-width: 20px 10px;
    border-radius: 10px;
    background: var(--color-card-bg);
    box-shadow: 0 0 0 1px rgba(16, 23, 45, 0.1);
    font-size: 14px;
  }

  .lehman-table th,
  .lehman-table td {
    height: 38px; /* one line; two-line rows grow to 57 */
    padding: 10px;
    border-bottom: 1px solid rgba(16, 23, 45, 0.1);
  }

  .lehman-table tr > :first-child {
    border-right: 1px solid rgba(16, 23, 45, 0.1);
  }

  .lehman-table tr:last-child > * {
    border-bottom: 0;
  }

  .lehman-table td:last-child,
  .lehman-table th:last-child {
    width: 100px;
    text-align: left;
  }

  .lehman-table__sum th,
  .lehman-table__sum td {
    height: 40px;
    font-size: 16px;
  }
}

/* ---- Footer at 768 (Figma 830 / 817 …): the 360 layout with tablet
   sizes — no logo, 80 top; two columns (left For business / Who we are /
   Contacts / M&A Deal Advisory / Consulting, right Industries / Corporate
   Finance, masonry via main.js), heading 18 → 20 → links 16 / 28, groups
   50 apart; then "Contact" + the two links left, the phones right (level
   with the links); rule 40 / 50; legal row 14 (20 apart) ---- */
@media (min-width: 701px) and (max-width: 1100px) {
  .footer {
    padding-top: 80px;
  }

  .footer__logo {
    display: none;
  }

  .footer__columns {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 50px 0;
  }

  .footer__columns > :nth-child(1) { grid-column: 1; grid-row: 1; }
  .footer__columns > :nth-child(2) { grid-column: 2; grid-row: 1; }
  .footer__columns > :nth-child(3) { grid-column: 1; grid-row: 2; }
  .footer__columns > :nth-child(4) { grid-column: 1; grid-row: 3; }
  .footer__columns > :nth-child(5) { grid-column: 2; grid-row: 2 / span 2; }
  .footer__columns > :nth-child(6) {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    grid-column: 1 / -1;
    grid-row: 4;
    margin-top: 5px;
  }

  .footer__columns > :nth-child(6) > .footer__contact-links {
    grid-column: 1;
    grid-row: 1 / span 3;
    margin: 0;
  }

  .footer__columns > :nth-child(6) > .footer__contact-phone {
    grid-column: 2;
    margin-bottom: 11px;
    font-size: 18px;
  }

  .footer__columns > :nth-child(6) > .footer__contact-phone:first-child {
    margin-top: 37px; /* level with the first contact link */
  }

  .footer__columns.is-masonry {
    grid-auto-rows: 1px;
    grid-auto-flow: dense;
    row-gap: 0;
    margin-bottom: -50px; /* the last span's +50 */
  }

  .footer__columns.is-masonry > * {
    grid-row-start: auto !important;
  }

  .footer__col-group {
    gap: 50px;
  }

  .footer__col h4,
  .footer__contact-links h4 {
    margin-bottom: 20px;
    font-size: 18px;
  }

  .footer__contact-links h4 {
    margin-bottom: 5px;
  }

  .footer__col ul {
    gap: 8px;
  }

  .footer__col li {
    line-height: 1.25;
  }

  .footer__col a {
    display: block;
    font-size: 16px;
  }

  .footer__contact-links a {
    font-size: 18px;
  }

  .footer__bottom-row {
    justify-content: flex-start;
    gap: 5px 20px;
    font-size: 14px;
  }

  .footer__contact-phone img {
    width: 40px;
  }

  .footer__address {
    gap: 6px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
  }

  .footer__address strong {
    font-size: 16px;
  }

  .footer__legal {
    gap: 20px;
    font-size: 12px;
  }
}

/* ---- Lehman at 768 (Figma 817): intro 530 wide, title 50; the table in
   the same white card as at 360 (40 / 20 inset), rows 41, sum rows 50
   (24 serif), right column 167 ---- */
@media (min-width: 701px) and (max-width: 1100px) {
  .page-hero--lehman .page-hero__intro {
    max-width: 530px;
    margin-inline: auto;
  }

  .lehman__title {
    font-size: 50px;
  }

  .lehman-table {
    border-collapse: separate;
    border-spacing: 0;
    border: solid var(--color-card-bg);
    border-width: 40px 20px;
    border-radius: 10px;
    background: var(--color-card-bg);
    box-shadow: 0 0 0 1px rgba(16, 23, 45, 0.1);
    font-size: 16px;
  }

  .lehman-table th,
  .lehman-table td {
    height: 41px;
    padding: 10px;
    border-bottom: 1px solid rgba(16, 23, 45, 0.1);
  }

  .lehman-table tr > :first-child {
    border-right: 1px solid rgba(16, 23, 45, 0.1);
  }

  .lehman-table tr:last-child > * {
    border-bottom: 0;
  }

  .lehman-table td:last-child,
  .lehman-table th:last-child {
    width: 167px;
  }

  .lehman-table__sum th,
  .lehman-table__sum td {
    height: 50px;
    font-size: 24px;
  }
}

/* ---- Press at 360 (Figma 820): logo cards 155×59 (2 per row, 10 apart),
   logo ~105 wide; first row 40 below the panel top ---- */
@media (max-width: 700px) {
  .page-panel:has(.logo-grid) {
    padding-top: 40px;
  }

  .logo-grid {
    gap: 10px;
  }

  .logo-card {
    aspect-ratio: auto;
    height: 59px;
    padding: 8px 16%;
    border-radius: 6px;
  }
}

/* ---- Press at 768 (Figma 833): intro 520 wide; logo cards 2 per row
   (349×142, 10 apart, logo 260 wide), first row 60 below the panel top ---- */
@media (min-width: 701px) and (max-width: 1100px) {
  .page-hero:has(+ .page-panel .logo-grid) .page-hero__intro {
    max-width: 520px;
    margin-inline: auto;
  }

  .page-panel:has(.logo-grid) {
    padding-top: 60px;
  }

  .logo-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .logo-card {
    aspect-ratio: 349 / 142;
    padding: 20px 12.5%;
  }
}

/* ---- Newsroom ≤1100 (Figma 821 / 822): no sidebar and no list / grid
   toggle — Year + Category are selects under the search field in the
   toolbar (main.js "Card filter" ignores the hidden sidebar buttons) ---- */
.news-archive__selects {
  display: none;
}

@media (max-width: 1100px) {
  .news-archive .team-view-toggle,
  .news-layout .filter-sidebar {
    display: none;
  }

  .news-archive .archive-toolbar {
    flex-wrap: wrap;
  }

  .news-archive .archive-toolbar .service-search {
    flex-basis: 100%;
  }

  .news-archive__selects {
    display: flex;
    margin-left: 0;
  }

  .news-layout {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* 768: toolbar 20 / 10 inset, search + selects 50 high (selects 180, 15
   below the search); cards 40 inset, title 27, 20 apart */
@media (min-width: 701px) and (max-width: 1100px) {
  .news-archive .archive-toolbar {
    gap: 15px 10px;
    height: auto;
    padding: 20px 10px;
  }

  .news-archive .archive-toolbar .service-search,
  .news-archive__selects .filter-select {
    height: 50px;
  }

  .news-archive__selects .filter-select {
    flex: 0 0 180px;
    width: 180px;
  }

  .news-archive .archive-toolbar {
    margin-bottom: 20px;
  }

  .news-card {
    padding: 40px;
  }

  .news-card__title {
    font-size: 27px;
  }
}

/* 360: toolbar 20 below → cards 20 inset, 15 apart: source 14 → title
   18/22 → date 14 + arrow 30 */
@media (max-width: 700px) {
  .news-archive .archive-toolbar {
    margin-bottom: 20px;
  }

  .news-list {
    gap: 15px;
  }

  .news-card {
    padding: 20px;
  }

  .news-card__source,
  .news-card__foot time {
    font-size: 14px;
  }

  .news-card__title {
    font-size: 18px;
    line-height: 1.22;
  }

  .news-card__arrow {
    width: 30px;
    height: 30px;
    border-radius: 4px;
  }
}

/* ---- Legal pages at 360 (Figma 824 "GDPR"): content 40 below the panel
   top; tables keep one line per cell and scroll sideways (rows 39 apart,
   first column 158) with a 6 px blue scroll bar under them ---- */
@media (max-width: 700px) {
  .page-panel:has(.legal-content) {
    padding-top: 40px;
  }

  .legal-content table {
    display: block;
    overflow-x: auto;
    padding-bottom: 20px;
    border-bottom: 0;
    white-space: nowrap;
    scrollbar-width: thin;
    scrollbar-color: var(--color-blue) transparent;
  }

  .legal-content table::-webkit-scrollbar {
    height: 6px;
  }

  .legal-content table::-webkit-scrollbar-thumb {
    border-radius: 3px;
    background: var(--color-blue);
  }

  .legal-content table::-webkit-scrollbar-track {
    background: transparent;
  }

  .legal-content th,
  .legal-content td {
    padding: 11px 20px 11px 0;
    border-bottom: 1px solid rgba(16, 23, 45, 0.1);
    border-top: 0;
    font-size: 14px;
  }

  .legal-content tr > :first-child {
    min-width: 158px;
  }
}

/* Agents archive (live): search field 353 wide (min) on desktop — was a
   Bricks element setting (#id rule, not overridable); full row up to 900 */
.team-filters .brxe-filter-search {
  flex: 0 0 353px;
  width: 353px;
  min-width: 353px;
}

@media (max-width: 900px) {
  .team-filters .brxe-filter-search {
    flex: 1 1 100%;
    min-width: 0;
    width: 100%;
  }

  .team-filters .brxe-filter-search input {
    min-width: 0;
  }
}

/* ---- Lehman at 360: the pie's SVG labels would be ~5 px (870 px wide
   chart scaled to 300) → hidden; a legend (dot, tier, amount) under the
   pie instead (main.js drawPieLegend) ---- */
.lehman-legend {
  display: none;
}

@media (max-width: 700px) {
  [data-lehman-pie] text,
  [data-lehman-pie] .lehman-leader {
    display: none;
  }

  /* bar chart axis labels: 870 px viewBox at ~300 px → 24 user units ≈ 8 px */
  [data-lehman-bars] text {
    font-size: 24px;
  }

  .lehman-legend {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: 0 15px 15px;
    list-style: none;
    font-size: 12px;
    line-height: 1.25;
    letter-spacing: -0.02em;
    color: rgba(16, 23, 45, 0.8);
  }

  .lehman-legend li {
    display: grid;
    grid-template-columns: 10px minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
  }

  .lehman-legend__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
  }

  .lehman-legend strong {
    font-weight: 500;
    color: #10172d;
    white-space: nowrap;
  }
}

/* ---- Locations at 768 / 360 (Figma 813 / 803, 814 / 804): map view = the
   map edge to edge (568 high at 768, 420 at 360, no zoom buttons), 40 below
   the toolbar, then the same country groups with cards as the grid view (no
   side list), 40 below. Toolbar 768: search | Country, view toggle in a
   second row (21 / 20 inset, 11 apart); 360: search → Country (full width)
   → toggle, 12 apart (11 / 10 inset); cards 213 (16 px text, name → city
   46) ---- */
@media (max-width: 1100px) {
  .office-toolbar.office-toolbar {
    gap: 11px 12px;
    margin-bottom: 40px;
    padding: 21px 21px 20px;
  }

  .office-toolbar .service-search {
    flex: 1 1 0;
    order: 1;
    margin-right: 0;
  }

  .office-toolbar select {
    flex: 0 0 118px;
    width: 118px;
    order: 2;
    padding-left: 15px;
    font-size: 16px;
  }

  .office-toolbar .service-search input {
    font-size: 16px;
  }

  .office-toolbar .team-view-toggle {
    display: flex;
    flex-basis: 100%;
    order: 3;
    margin-left: 0;
  }

  .office-archive:not(.is-grid-view) .view-grid {
    display: block;
  }

  .office-map {
    display: block;
    height: auto;
    margin: 0 calc(var(--container-pad) * -1);
  }

  .office-map__canvas {
    height: 568px;
    border-radius: 0;
  }

  .office-map .leaflet-control-zoom {
    display: none;
  }

  .office-list {
    display: none;
  }

  .office-archive:not(.is-grid-view) .office-map {
    margin-bottom: 40px;
  }

  /* map first, then the groups (in the markup the map comes after them;
     in Bricks each block sits in its own Text wrapper) */
  .office-archive:not(.is-grid-view) > .container {
    display: flex;
    flex-direction: column;
  }

  .office-archive:not(.is-grid-view) > .container > * {
    order: 3;
  }

  .office-archive:not(.is-grid-view) > .container > :is(.office-toolbar, :has(> .office-toolbar)) {
    order: 0;
  }

  .office-archive:not(.is-grid-view) > .container > :is(.office-map, :has(> .office-map)) {
    order: 1;
  }

  .office-archive:not(.is-grid-view) > .container > :is(.office-groups, :has(> .office-groups)) {
    order: 2;
  }
}

@media (max-width: 700px) {
  .office-toolbar.office-toolbar {
    gap: 12px 10px;
    padding: 11px 10px;
  }

  .office-toolbar .service-search {
    flex: 1 1 100%;
  }

  .office-toolbar select {
    flex: 1 1 100%;
  }

  .office-map__canvas {
    height: 420px;
  }

  .office-card {
    min-height: 213px;
    font-size: 16px;
  }

  .office-card__city {
    margin-top: 46px;
  }
}

/* ---- Header at 768 (Figma 813 / 808 …): the pill starts at y37 (utility
   row 37 instead of 40); the open menu card takes its place (main.js) ---- */
@media (min-width: 701px) and (max-width: 1024px) {
  .header .header__utility {
    height: 37px;
  }

  /* Figma 768: items 13 apart, flush with the pill's right edge; search
     18, flag 28, chevron 10 */
  .header__utility .container {
    gap: 13px;
    padding-inline: var(--container-pad);
  }

  .header__lang {
    gap: 8px;
  }

  .header__utility button > svg {
    width: 18px;
    height: 18px;
  }

  .header__utility .header__utility-flag {
    width: 28px;
  }

  .header__utility .header__lang svg {
    width: 10px;
    height: 10px;
  }

  /* pill 704×60: logo 22, "Menu" 14 after a 2-line 21×8 burger (13
     apart), 60 → CTA 248×40 with a 14 px label; 11 px inset */
  .header__row,
  .menu-overlay__row {
    height: 60px;
    padding-inline: 11px;
  }

  .header .logo,
  .menu-overlay__row .logo {
    font-size: 22px;
  }

  .header .header__actions,
  .menu-overlay__actions {
    gap: 60px;
  }

  .header .menu-toggle,
  .menu-overlay .menu-toggle {
    gap: 13px;
    font-size: 14px;
  }

  .header .menu-toggle__bars {
    width: 21px;
    height: 8px;
  }

  .header .menu-toggle__bars span {
    height: 1.5px;
  }

  .header .menu-toggle__bars span:nth-child(2) {
    display: none;
  }

  .header .menu-toggle__bars span:nth-child(3) {
    top: 6px;
  }

  body.menu-open .header .menu-toggle__bars span:nth-child(1) { transform: translateY(3px) rotate(45deg); }
  body.menu-open .header .menu-toggle__bars span:nth-child(3) { transform: translateY(-3px) rotate(-45deg); }

  .header .header__actions .mc-btn,
  .menu-overlay__actions .mc-btn {
    justify-content: space-between;
    min-width: 248px;
    font-size: 14px;
  }
}

/* ---- Countries at 768 / 360 (Figma 784 / 785, list view): the letter
   sits above its rows (50 / 40 px), rows 2-up (52 apart) / 1-up with a
   36×24 flag, 15 → name 16 / 14, 20 / 15 above and below; groups 40 / 30
   padded. A–Z buttons 54 / 45 high (45 wide at 360, 6 per row), 50 / 40
   below the panel's top; search bar 20 / 10 inset with the field 334×60 /
   full width ×50, view toggle (24 px icons) bottom right / own row ---- */
@media (max-width: 1100px) {
  .page-hero__intro--wide,
  .page-hero--wide-intro .page-hero__intro {
    max-width: 500px;
  }

  .country-archive {
    padding-top: 50px;
  }

  .alpha-filter {
    margin-bottom: 52px;
  }

  .alpha-filter .team-filters {
    align-items: flex-end;
    padding: 20px;
  }

  .alpha-filter .service-search--sm {
    gap: 9px;
    width: 334px;
    height: 60px;
    padding-inline: 17px;
    font-size: 16px;
  }

  .alpha-filter .service-search--sm svg {
    flex: none;
    width: 28px;
    height: 28px;
  }

  .alpha-filter .team-view-toggle {
    gap: 10px;
  }

  .alpha-filter .team-view-toggle button {
    width: 24px;
    height: 24px;
  }

  .alpha-filter .team-view-toggle svg {
    width: 24px;
    height: 24px;
  }

  /* Figma 784/785: the tablet/mobile toggle uses the 2-row / 4-tile icons
     (desktop keeps the 3 bars) — drawn as a mask in the button's colour */
  .alpha-filter .team-view-toggle svg {
    display: none;
  }

  .alpha-filter .team-view-toggle button::before {
    content: "";
    width: 24px;
    height: 24px;
    background: currentColor;
    -webkit-mask: var(--mc-view-icon) center / contain no-repeat;
    mask: var(--mc-view-icon) center / contain no-repeat;
  }

  .alpha-filter .team-view-toggle [data-view="list"] {
    --mc-view-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect width='24' height='11.4' rx='1'/%3E%3Crect y='12.6' width='24' height='11.4' rx='1'/%3E%3C/svg%3E");
  }

  .alpha-filter .team-view-toggle [data-view="grid"] {
    --mc-view-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect width='11.4' height='11.4' rx='1'/%3E%3Crect x='12.6' width='11.4' height='11.4' rx='1'/%3E%3Crect y='12.6' width='11.4' height='11.4' rx='1'/%3E%3Crect x='12.6' y='12.6' width='11.4' height='11.4' rx='1'/%3E%3C/svg%3E");
  }

  .country-group {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
    padding-block: 40px;
  }

  .country-group__letter {
    margin-top: 0;
    font-size: 50px;
  }

  .country-group__items {
    columns: 2;
    column-gap: 52px;
  }

  .country-row {
    padding-block: 20px 19px;
    font-size: 16px;
  }

  .country-row__flag,
  .country-row .country-flag {
    width: 36px;
    height: 24px;
  }
}

@media (max-width: 700px) {
  .country-archive {
    padding-top: 40px;
  }

  .alpha-filter__letters button {
    min-width: 45px;
    height: 45px;
    padding-inline: 0;
  }

  .alpha-filter {
    margin-bottom: 11px;
  }

  .alpha-filter .team-filters {
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px;
  }

  .alpha-filter .service-search--sm {
    flex: 1 1 100%;
    gap: 15px;
    width: 100%;
    height: 50px;
    padding-inline: 18px;
    font-size: 14px;
  }

  .alpha-filter .service-search--sm svg {
    width: 21px;
    height: 21px;
  }

  .alpha-filter .team-view-toggle {
    margin-left: 0;
  }

  .country-group {
    padding-block: 30px;
  }

  .country-group__letter {
    font-size: 40px;
  }

  .country-group__items {
    columns: 1;
  }

  .country-row {
    padding-block: 15px 14px;
    font-size: 14px;
  }
}

/* ---- Legal pages at 768 (Figma 825 "GDPR"): content 90 below the panel
   top; "Latest Updates" 30 / rule / 30; headings 24 (sections between
   rules 40 apart, sub-sections 40 above), 20 to their text; tables keep
   one line per cell and scroll sideways like at 360 (rows 62 apart, 16 px,
   first column 248) ---- */
@media (min-width: 701px) and (max-width: 1024px) {
  .page-panel:has(.legal-content) {
    padding-top: 90px;
  }

  .legal-content .legal-updated {
    padding-bottom: 30px;
    margin-bottom: 30px;
  }

  .legal-content h2,
  .legal-content h3 {
    font-size: 24px;
  }

  .legal-content > h2:not(:first-child),
  .legal-content > h3:not(:first-child) {
    margin-top: 40px;
  }

  .legal-content > h2:not(:first-child) {
    padding-top: 40px;
  }

  .legal-content .legal-updated + h2 {
    margin-top: 0;
    padding-top: 0;
  }

  .legal-content > h2 + *,
  .legal-content > h3 + * {
    margin-top: 20px;
  }

  .legal-content table {
    display: block;
    overflow-x: auto;
    padding-bottom: 20px;
    border-bottom: 0;
    white-space: nowrap;
    scrollbar-width: thin;
    scrollbar-color: var(--color-blue) transparent;
  }

  .legal-content table::-webkit-scrollbar {
    height: 6px;
  }

  .legal-content table::-webkit-scrollbar-thumb {
    border-radius: 3px;
    background: var(--color-blue);
  }

  .legal-content table::-webkit-scrollbar-track {
    background: transparent;
  }

  .legal-content th,
  .legal-content td {
    padding: 20px 30px 20px 0;
    border-top: 0;
    border-bottom: 1px solid rgba(16, 23, 45, 0.1);
    font-size: 16px;
  }

  .legal-content tr > :first-child {
    min-width: 248px;
  }
}

/* ==========================================================================
   35. Load more (global) — "Showing 24 of 370" + the LOAD MORE button
   (same button as Transactions .tx-more), centred under a list. Used by
   the listing archive (main.js "Listing archive" builds it). Plain page
   links .listing-pages are for crawlers / no JS only (main.js hides them).
   ========================================================================== */
.load-more {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  margin-top: clamp(32px, 2.6042vw, 50px);
}

.load-more[hidden],
.load-more__btn[hidden] {
  display: none;
}

.load-more__count {
  margin: 0;
  font-size: var(--fluid-16);
  letter-spacing: -0.04em;
  color: rgba(16, 23, 45, 0.5);
}

.load-more__btn {
  display: flex;
  min-width: 240px;
}

.listing-pages {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 40px;
}

.listing-pages a,
.listing-pages span {
  min-width: 40px;
  padding: 8px 10px;
  border: 1px solid rgba(16, 23, 45, 0.1);
  border-radius: var(--radius-md);
  text-align: center;
  color: #10172d;
}

.listing-pages [aria-current] {
  background: var(--color-blue);
  color: var(--color-white);
}

/* empty listing result → inquiry link (main.js "Listing archive") */
.listing-empty__cta {
  display: block;
  margin-top: 10px;
  font-size: var(--fluid-16);
  color: var(--color-link);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---- Filter dropdowns with search (Daria #17/#39/#40) — opened by main.js on desktop ---- */
.mc-select-panel {
  position: absolute;
  z-index: 1000;
  max-width: min(420px, calc(100vw - 20px));
  padding: 6px;
  background: var(--color-white);
  border: 1px solid rgba(16, 23, 45, 0.1);
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(4, 10, 29, 0.14);
  font-family: var(--font-body);
  color: var(--color-ink);
  animation: mc-select-in 0.18s ease-out;
}
@keyframes mc-select-in {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}
.mc-select-panel__search {
  display: block;
  width: 100%;
  height: 40px;
  margin: 0 0 6px;
  padding: 0 12px;
  border: 1px solid rgba(16, 23, 45, 0.12);
  border-radius: 6px;
  background: var(--color-page-bg);
  font: 16px/1 var(--font-body);
  color: var(--color-ink);
  outline: none;
}
.mc-select-panel__search:focus { border-color: var(--color-link); }
.mc-select-panel__list {
  max-height: 320px;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  list-style: none;
  overscroll-behavior: contain;
}
.mc-select-panel__list li {
  padding: 9px 12px;
  border-radius: 6px;
  font-size: 16px;
  line-height: 1.35;
  cursor: pointer;
}
.mc-select-panel__list li.is-active { background: rgba(6, 67, 142, 0.06); }
.mc-select-panel__list li[aria-selected="true"] { color: var(--color-link); font-weight: 500; }
.mc-select-panel__list .mc-select-panel__empty { color: var(--color-ink-muted); cursor: default; }
@media (prefers-reduced-motion: reduce) {
  .mc-select-panel { animation: none; }
}

/* ---- Language switcher (utility bar, inc/mc-menu.php mc_menu_lang_switcher, main.js) ---- */
.header__lang-switch {
  position: relative;
  display: flex;
  align-items: center;
}
.header__lang {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
}
.header__lang svg {
  transition: transform var(--transition);
}
.header__lang[aria-expanded="true"] svg {
  transform: rotate(180deg);
}
.header__lang-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: -10px;
  z-index: 1001;
  min-width: 200px;
  max-height: min(70vh, 520px);
  margin: 0;
  padding: 6px;
  overflow-y: auto;
  list-style: none;
  background: #10172d;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(4, 10, 29, 0.35);
  animation: mc-select-in 0.18s ease-out;
}
.header__lang-menu[hidden] {
  display: none;
}
.header__lang-menu a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 6px;
  color: var(--color-white);
  font-size: 14px;
  line-height: 1.3;
  text-decoration: none;
  white-space: nowrap;
}
.header__lang-menu a:is(:hover, :focus-visible) {
  background: rgba(255, 255, 255, 0.08);
}
.header__lang-menu a[aria-current="true"] {
  color: var(--color-blue-light);
}
.header__lang-menu .header__utility-flag {
  flex: 0 0 20px;
  height: 14px;
  object-fit: cover;
}
@media (prefers-reduced-motion: reduce) {
  .header__lang-menu { animation: none; }
}

/* ==========================================================================
   Kunden-Feedback 31.10.2026
   ========================================================================== */

/* ---- Official logo (inline SVG from inc/mc-menu.php mc_logo_svg) — sized
   in em so the existing .logo / .footer__logo font sizes per breakpoint
   still apply (cap height of the old text logo ≈ 0.715em) ---- */
.logo,
.footer__logo {
  line-height: 1;
}
.logo .mc-logo,
.footer__logo .mc-logo {
  display: block;
  height: 0.715em;
  width: auto;
  min-height: 0; /* framework: svg:not([height]) { min-height: 1em } */
  min-width: 0;
  aspect-ratio: 2240 / 218;
}
/* header (+ the menu overlay, which repeats the header row): larger —
   client 31.10.2026 ("Das Logo im Header muss größer sein"):
   ≈195px wide on desktop instead of 147px, a bit larger on phones too */
:is(.header, .menu-overlay) .logo .mc-logo {
  height: 0.95em;
}
@media (max-width: 700px) {
  :is(.header, .menu-overlay) .logo .mc-logo {
    height: 0.85em;
  }
}

/* ---- Sticky header: in Bricks the header sits in a wrapper exactly as tall
   as itself, so the sticky must go on Bricks' outer #brx-header. On scroll
   the utility bar folds away (main.js "Sticky header": .is-scrolled) ---- */
#brx-header {
  position: sticky;
  top: 0;
  z-index: 100;
}
body.admin-bar #brx-header {
  top: 32px;
}
@media (max-width: 782px) {
  body.admin-bar #brx-header {
    top: 0;
  }
}
.header__utility {
  transition: height 0.25s ease, opacity 0.2s ease;
}
/* clip only while folded — otherwise the language dropdown (which hangs
   below the 40px bar) is cut off and the open menu looks empty */
.header.is-scrolled .header__utility {
  height: 0;
  opacity: 0;
  overflow: hidden;
}

/* ---- Listings: filter bar stays visible while scrolling (desktop; on
   small screens it would cover too much) — below the sticky header ---- */
@media (min-width: 1101px) {
  .listing-toolbar,
  .brxe-text-basic:has(> .listing-toolbar) { /* Bricks wrapper = toolbar height → stick the wrapper */
    position: sticky;
    top: calc(var(--mc-header-h, 80px) + var(--mc-adminbar-h, 0px) + 10px);
    z-index: 50;
  }
  .listing-toolbar {
    /* same colour as rgba(6, 67, 142, 0.1) on the page background, but
       opaque — while stuck the table must not shine through */
    background: #dce4ef;
    box-shadow: 0 10px 30px rgba(4, 10, 29, 0.08);
  }
}

/* ---- Listing detail: facts row as a white card like the sections below ---- */
.listing-facts {
  padding: 40px;
  border-radius: 30px;
  background: var(--color-card-bg);
}
@media (max-width: 700px) {
  .listing-facts {
    padding: 24px;
  }
}
.listing-facts + .listing-section {
  margin-top: 20px;
}

/* ---- Listings pager (main.js "Listing archive"): counter · pages · per page ---- */
.listing-pager {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 20px;
  margin-top: clamp(32px, 2.6042vw, 50px);
}
.listing-pager[hidden] {
  display: none;
}
.listing-pager__count {
  margin: 0;
  font-size: var(--fluid-16);
  letter-spacing: -0.04em;
  color: rgba(16, 23, 45, 0.5);
}
.listing-pager__pages {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
.listing-pager__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  padding: 0 12px;
  border: 1px solid rgba(16, 23, 45, 0.12);
  border-radius: 10px;
  background: var(--color-white);
  color: var(--color-link);
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.listing-pager__btn:is(:hover, :focus-visible) {
  border-color: var(--color-blue);
}
.listing-pager__btn.is-current {
  border-color: var(--color-blue);
  background: var(--color-blue);
  color: var(--color-white);
}
.listing-pager__btn.is-prev svg {
  transform: rotate(180deg);
}
.listing-pager__gap {
  align-self: center;
  padding: 0 4px;
  color: rgba(16, 23, 45, 0.4);
}
.listing-pager__per {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  font-size: 15px;
  color: rgba(16, 23, 45, 0.6);
}
.listing-pager__per span {
  white-space: nowrap;
}
.listing-pager .listing-pager__per select { /* global select rule: width 100%, 2px dark border */
  flex: 0 0 auto;
  width: auto;
  min-width: 84px;
  height: 44px;
  padding: 0 32px 0 14px;
  border: 1px solid rgba(16, 23, 45, 0.12);
  border-radius: 10px;
  background: var(--color-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%2306438e' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 12px center;
  font: 500 15px/1 var(--font-body);
  color: var(--color-ink);
  appearance: none;
  cursor: pointer;
}
.listing-pager .listing-pager__per select:focus {
  border-color: var(--color-blue);
  outline: none;
}
@media (max-width: 700px) {
  .listing-pager {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }
  .listing-pager__per {
    justify-content: center;
  }
}

/* ---- Table export "Internal User CSV / Excel": staff only (logged in) ---- */
body:not(.logged-in) [data-table-internal] {
  display: none;
}

/* ---- Filter dropdown: flags in country lists ---- */
.mc-select-panel__list li {
  display: flex;
  align-items: center;
  gap: 10px;
}
.mc-select-panel__flag {
  flex: 0 0 20px;
  height: 14px;
  object-fit: cover;
  border-radius: 2px;
}

/* ---- Contact page media slider with images ([mc_contact_slider], main.js) ---- */
.media-slider__img {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.6s ease;
}
.media-slider__img.is-active {
  opacity: 1;
}
.media-slider__nav {
  z-index: 1;
}
@media (prefers-reduced-motion: reduce) {
  .media-slider__img { transition: none; }
}

/* listing card chips filter the list (main.js) */
[data-chip-filter] {
  cursor: pointer;
  transition: background-color var(--transition);
}

[data-chip-filter]:hover {
  background-color: #e3e9f2;
}

/* listing detail: country / industry link to the filtered archive */
.listing-fact__link {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition);
}

.listing-fact__link:hover {
  color: var(--color-link);
}

/* ---- Menu: the small text under a column title links like the title ---- */
.nav__dropdown-text a,
.menu-overlay__panel-text a {
  color: inherit;
  transition: color var(--transition);
}

.nav__dropdown-text a:hover,
.menu-overlay__panel-text a:hover {
  color: var(--color-white);
}

/* ---- Listings table (client 01.11): column heads sort; in the table view
   the head row sticks below the header instead of the filter bar ---- */
.listing-table__sort {
  display: inline-flex;
  align-items: flex-start;
  gap: 6px;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  letter-spacing: inherit;
  text-align: left;
  color: inherit;
  cursor: pointer;
}

.listing-table__sort::after {
  content: "";
  flex-shrink: 0;
  width: 8px;
  height: 10px;
  margin-top: 4px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='10' fill='none' stroke='%2310172D' stroke-width='1.2'%3E%3Cpolyline points='1 4 4 1 7 4'/%3E%3Cpolyline points='1 6 4 9 7 6'/%3E%3C/svg%3E") center / contain no-repeat;
  opacity: 0.35;
}

.listing-table th[aria-sort] .listing-table__sort {
  color: #10172d;
}

.listing-table th[aria-sort="ascending"] .listing-table__sort::after,
.listing-table th[aria-sort="descending"] .listing-table__sort::after {
  opacity: 1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='10' fill='none' stroke='%232481F2' stroke-width='1.5'%3E%3Cpolyline points='1 6 4 9 7 6'/%3E%3C/svg%3E");
}

.listing-table th[aria-sort="ascending"] .listing-table__sort::after {
  transform: rotate(180deg);
}

@media (min-width: 1201px) {
  [data-view-scope].is-table-view .listing-table-wrap {
    overflow-x: clip; /* no scroll box (the table fits) → the head can stick */
  }
  [data-view-scope].is-table-view .listing-table thead th {
    position: sticky;
    top: calc(var(--mc-header-h, 80px) + var(--mc-adminbar-h, 0px));
    z-index: 5;
    background: var(--color-card-bg);
    box-shadow: 0 -60px 0 var(--color-page-bg); /* covers the strip between header and head row */
  }
}

@media (min-width: 1101px) {
  [data-view-scope].is-table-view .listing-toolbar,
  [data-view-scope].is-table-view .brxe-text-basic:has(> .listing-toolbar) {
    position: static;
    box-shadow: none;
  }
}

/* ---- Press: logos link to their article ([mc_press_logos]) ---- */
.logo-card > a {
  display: contents;
}

.logo-card:has(> a) {
  transition: box-shadow var(--transition), transform var(--transition);
}

.logo-card:has(> a):hover {
  box-shadow: 0 10px 30px rgba(4, 10, 29, 0.08);
  transform: translateY(-2px);
}

/* ---- Footer: Zoom mark next to "Book a virtual meeting" (mc-menu.php) ---- */
.footer__contact-links svg.footer__zoom {
  padding: 0;
  background: none;
}

/* ---- Transaction card: "PR Link" top right (only when filled) ---- */
.transaction-card__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}

.transaction-card__pr {
  flex-shrink: 0;
  font-family: var(--font-heading);
  font-size: var(--fluid-20);
  font-weight: 500;
  line-height: 1.2;
  color: #10172d;
  transition: color var(--transition);
}

.transaction-card__pr:hover {
  color: var(--color-link);
}

/* ---- Footer: bigger flags + phone numbers (client 01.11, above Figma) ---- */
.footer__contact-phone {
  gap: 14px;
  font-size: clamp(18px, 1.35vw, 26px);
  font-weight: 500;
  white-space: nowrap; /* a number never breaks onto two lines */
}

.footer__contact-phone img {
  width: 34px;
  height: 23px;
  object-fit: cover;
}

@media (max-width: 700px) {
  .footer__contact-phone {
    font-size: 18px;
  }
  .footer__contact-phone img {
    width: 30px;
    height: 20px;
  }
}

/* ---- Contact page (client 01.11): bigger phone numbers, address as a
   paragraph, LinkedIn banner + social icons ([mc_contact_social]) ---- */
.contact-phone {
  font-size: clamp(22px, 1.5625vw, 30px);
  font-weight: 500;
  color: #10172d;
}

.contact-phone img {
  width: 45px;
  height: 30px;
}

.contact-block__text {
  line-height: 1.4;
}

.contact-social {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 15px;
  padding-top: 40px;
  border-top: 1px solid rgba(16, 23, 45, 0.3);
}

.contact-social__banner {
  display: flex;
  flex: 1 1 320px;
  align-items: center;
  gap: 20px;
  padding: 20px 25px;
  border-radius: 20px;
  background: var(--color-card-bg);
  color: #10172d;
  transition: box-shadow var(--transition), transform var(--transition);
}

.contact-social__banner:hover {
  box-shadow: 0 10px 30px rgba(4, 10, 29, 0.08);
  transform: translateY(-2px);
}

.contact-social__in {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 12px;
  background: #0a66c2;
  color: #fff;
}

.contact-social__in svg {
  width: 28px;
  height: 28px;
}

.contact-social__text {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 4px;
  font-size: var(--fluid-16);
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: rgba(16, 23, 45, 0.7);
}

.contact-social__text strong {
  font-size: var(--fluid-20);
  font-weight: 500;
  color: #10172d;
}

.contact-social__banner .mc-chevron {
  flex-shrink: 0;
  color: var(--color-blue);
}

.contact-social__icons {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 20px 25px;
  border-radius: 20px;
  background: var(--color-card-bg);
}

.contact-social__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 1px solid rgba(16, 23, 45, 0.1);
  transition: transform var(--transition);
}

.contact-social__icon:hover {
  transform: translateY(-2px);
}

.contact-social__icon svg {
  width: 26px;
  height: 26px;
}

.contact-social__icon--instagram { color: #e4405f; }
.contact-social__icon--youtube { color: #ff0000; }

/* ---- Listing detail: similar listings in the slider ([mc_similar_listings]) ---- */
.selected-transactions__track > .brxe-shortcode {
  display: contents; /* the tiles themselves are the grid items */
}

.selected-transactions__track .listing-tile {
  scroll-snap-align: start;
  text-align: left;
}

.selected-transactions .brxe-shortcode:has(> .selected-transactions__more) {
  display: flex;
  justify-content: center;
}

.selected-transactions__track .listing-card__chips {
  flex-wrap: wrap; /* narrow slider tiles: chips on two lines instead of cut off */
}

/* ---- Agent detail: hide contact links whose field is empty (client 02.11) ---- */
.team-profile-hero__contacts a[href="mailto:"],
.team-profile-hero__contacts a[href="tel:"],
.team-profile-hero__contacts a[href=""],
.team-profile-hero__contacts a:not([href]) {
  display: none;
}

/* ---- Listings table: head row clearly visible (client 02.11) ---- */
.listing-table thead th,
[data-view-scope].is-table-view .listing-table thead th {
  background: #e3e9f2;
  border-bottom: 2px solid rgba(16, 23, 45, 0.25);
  font-weight: 500;
  color: #10172d;
}

.listing-table thead th:first-child {
  border-top-left-radius: 10px;
}

.listing-table thead th:last-child {
  border-top-right-radius: 10px;
}

.listing-table__sort::after {
  opacity: 0.55;
}

/* ---- Newsroom: country flag before the source ({mc_news_flag}, client 01.11) ---- */
.news-card__source .country-flag {
  display: inline-block;
  width: 24px;
  height: 16px;
  margin-right: 8px;
  vertical-align: -2px;
  object-fit: cover;
  border-radius: 2px;
}

/* ---- /bs = professionals' export page (client 02.11.): header bar →
   breadcrumb → filter, no hero image/title/intro. Same light rhythm as the
   listing detail page (header → 15 → crumb → 70 → content). Body class from
   inc/mc-listings.php (?bs=1 on the listings archive). ---- */
.is-listing-pro .page-hero {
  position: relative;
  background: var(--color-page-bg);
  padding-block: 15px 0;
  text-align: left;
}

.is-listing-pro .page-hero::before,
.is-listing-pro .page-hero h1,
.is-listing-pro .page-hero__intro {
  display: none;
}

.is-listing-pro .page-hero .container {
  align-items: flex-start;
}

.is-listing-pro .page-hero .breadcrumb {
  justify-content: flex-start;
  margin: 0;
  color: rgba(16, 23, 45, 0.5);
}

.is-listing-pro .page-hero .breadcrumb a:hover,
.is-listing-pro .page-hero .breadcrumb .is-current {
  color: #10172d;
}

.is-listing-pro .page-panel {
  margin-top: -1px; /* no subpixel seam of the navy body between crumb and panel */
  border-radius: 0;
  padding-top: clamp(32px, 3.6458vw, 70px);
}

/* ---- Listing gallery (detail photo with ACF `gallery`, 03.11.): same
   1170×600 / radius 30 stage as the single photo; swipeable track, blue
   arrows like the transaction slider, counter bottom right, thumbnail row
   below, full-screen <dialog> on click. Small legacy photos are shown whole. ---- */
.listing-gallery__stage {
  position: relative;
}

.listing-gallery__track {
  position: relative;
  display: flex;
  height: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.listing-gallery__track::-webkit-scrollbar {
  display: none;
}

.listing-gallery__slide {
  flex: 0 0 100%;
  height: 100%;
  scroll-snap-align: start;
  cursor: zoom-in;
}

.listing-gallery__slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.listing-gallery__slide.is-small img {
  object-fit: contain;
}

.listing-gallery__arrow {
  position: absolute;
  top: 50%;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  margin-top: -29px;
  padding: 0;
  border: 1.5px solid var(--color-white);
  border-radius: var(--radius-md);
  background: var(--color-blue);
  color: var(--color-white);
  cursor: pointer;
}

.listing-gallery__arrow.is-prev {
  left: 20px;
}

.listing-gallery__arrow.is-next {
  right: 20px;
}

.listing-gallery__count {
  position: absolute;
  right: 20px;
  bottom: 20px;
  z-index: 1;
  padding: 6px 12px;
  border-radius: var(--radius-md);
  background: rgba(4, 10, 29, 0.6);
  color: var(--color-white);
  font-size: 14px;
  line-height: 1;
  letter-spacing: -0.02em;
}

.listing-gallery__thumbs {
  display: flex;
  gap: 10px;
  margin-top: 10px;
  overflow-x: auto;
  scrollbar-width: thin;
}

.listing-gallery__thumb {
  flex: 0 0 90px;
  height: 60px;
  padding: 0;
  overflow: hidden;
  border: 2px solid transparent;
  border-radius: var(--radius-md);
  background: #d9d9d9;
  opacity: 0.6;
  cursor: pointer;
  transition: opacity 0.2s ease, border-color 0.2s ease;
}

.listing-gallery__thumb:hover,
.listing-gallery__thumb[aria-current="true"] {
  opacity: 1;
}

.listing-gallery__thumb[aria-current="true"] {
  border-color: var(--color-blue);
}

.listing-gallery__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.listing-gallery__lightbox {
  width: 100vw;
  max-width: none;
  height: 100vh;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

.listing-gallery__lightbox::backdrop {
  background: rgba(4, 10, 29, 0.92);
}

.listing-gallery__lightbox[open] {
  display: flex;
  align-items: center;
  justify-content: center;
}

.listing-gallery__lightbox img {
  max-width: calc(100vw - 200px);
  max-height: calc(100vh - 120px);
  border-radius: var(--radius-md);
}

.listing-gallery__close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-white);
  font-size: 40px;
  line-height: 1;
  cursor: pointer;
}

.listing-gallery__lightbox .listing-gallery__count {
  right: 50%;
  bottom: 24px;
  transform: translateX(50%);
}

@media (max-width: 700px) {
  .listing-gallery__stage .listing-gallery__arrow {
    display: none;
  }

  .listing-gallery__count {
    right: 12px;
    bottom: 12px;
  }

  .listing-gallery__thumb {
    flex-basis: 64px;
    height: 44px;
  }

  .listing-gallery__lightbox img {
    max-width: 100vw;
    max-height: calc(100vh - 140px);
    border-radius: 0;
  }

  .listing-gallery__lightbox .listing-gallery__arrow {
    top: auto;
    bottom: 12px;
    width: 48px;
    height: 48px;
    margin-top: 0;
  }
}

/* ---- About: "About Us" + intro text on the world map as the page head
   (client 05.11., hero with "MergersCorp" + bars removed). Same rhythm as
   the inner-page hero: header → 41 → breadcrumb → 70 → title 84 → 30 → text ---- */
#brx-content > .about-map:first-child {
  padding-top: clamp(24px, 2.1354vw, 41px);
}

.about-map__text .breadcrumb {
  margin-bottom: clamp(32px, 3.6458vw, 70px);
}

.about-map__text h1 {
  margin: 0;
  font-family: var(--font-heading);
  font-size: var(--fluid-84);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.04em;
}

.about-map__text h1 + p {
  margin-top: clamp(20px, 1.5625vw, 30px);
}

@media (min-width: 701px) and (max-width: 1100px) {
  #brx-content > .about-map:first-child {
    padding-top: 66px;
  }

  .about-map__text .breadcrumb {
    margin-bottom: 51px;
  }

  .about-map__text h1 {
    font-size: 70px;
  }
}

/* ---- Listings: empty result as an invitation (client 05.11.): search
   icon, larger text, link opens the short off-market form ---- */
.listing-empty:not([hidden]) {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin: 50px 0 0;
  padding: clamp(40px, 3.6458vw, 70px) 24px;
  border-radius: 30px;
  background: var(--color-card-bg);
  text-align: center;
}

.listing-empty__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(32, 111, 208, 0.1);
  color: var(--color-blue);
}

.listing-empty__title {
  font-family: var(--font-heading);
  font-size: var(--fluid-35);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.04em;
  color: var(--color-link);
}

.listing-empty .listing-empty__cta {
  margin-top: 0;
  font-size: var(--fluid-20);
  line-height: 1.3;
}

/* ---- About head (client 06.11.): larger intro text with highlighted key
   phrases (full white, 600) on muted text, "As seen on" logo strip below
   (white logos from the old About page, assets/about/as-seen-on-*.png) ---- */
#brx-content > .about-map:first-child .about-map__text > p {
  max-width: 820px;
  font-size: clamp(18px, 1.25vw, 24px);
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.75);
}

#brx-content > .about-map:first-child .about-map__text > p strong {
  font-weight: 600;
  color: var(--color-white);
}

.about-seen {
  margin-top: clamp(48px, 4.1667vw, 80px);
}

.about-seen .about-seen__title {
  max-width: none;
  margin: 0 0 clamp(20px, 1.5625vw, 30px);
  font-size: 14px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}

.about-seen__logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(28px, 3.125vw, 60px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.about-seen__logo img {
  display: block;
  width: auto;
  height: 34px;
  opacity: 0.8;
}

.about-seen__logo--nyt img {
  height: 56px;
}

@media (max-width: 700px) {
  .about-seen__logos {
    gap: 20px 28px;
  }

  .about-seen__logo img {
    height: 24px;
  }

  .about-seen__logo--nyt img {
    height: 40px;
  }
}

/* Feedback 07.11.: listing detail — back link as a button, larger figures */
.listing-detail__back {
  width: fit-content;
  padding: 12px 22px;
  border: 1px solid rgba(6, 67, 142, 0.3);
  border-radius: var(--radius-md);
  font-size: var(--fluid-20);
  font-weight: 500;
}

.listing-detail__back:hover {
  opacity: 1;
  background: rgba(6, 67, 142, 0.06);
}

.listing-fact--figure dd {
  font-size: var(--fluid-24);
  font-weight: 500;
  line-height: 1.15;
}

@media (max-width: 700px) {
  .listing-detail__back {
    padding: 10px 16px;
    font-size: 16px;
  }

  .listing-fact--figure dd {
    font-size: 19px;
  }
}

/* Feedback 07.11.: agent detail — hide what has no data (Bricks element
   conditions don't apply here, so empty fields stay in the markup) */
.team-profile-facts > div:has(> .team-profile-facts__dd:empty),
.team-profile-contact > div:has(> .team-profile-contact__value:empty),
.team-profile-contact > div:has(> .team-profile-contact__label:empty):not(:has(> .team-profile-contact__value)),
.team-profile-contact__icons a:is([href=""], [href="mailto:"], [href="tel:"], :not([href])),
.team-profile-hero__contacts:not(:has(a)),
.team-profile-hero__role:empty {
  display: none !important;
}

@media (min-width: 901px) {
  .team-profile-contact__icons {
    grid-column-end: -1;
  }
}

/* Mobile overflow (07.11.2026): numbered tiles may shrink below their
   content's min width; wide tables in imported listing texts scroll inside
   their section instead of widening the page */
.detail-tiles li > div {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* lists inside a tile's text stay normal lists */
.detail-tiles li li {
  display: list-item;
  padding-right: 0;
}

.listing-section__body table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
}

@media (max-width: 900px) {
  .listing-section .detail-tiles {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 700px) {
  .detail-tiles {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Detail pages: "Book a Meeting" (Calendly → Zoom) under the inquiry form —
   navy, so it reads as a second, different action next to the blue submit */
.mc-btn.form-card__meeting {
  display: flex;
  width: 100%;
  margin-top: 15px;
  background: var(--color-navy);
  color: var(--color-white);
  text-decoration: none;
  transition: background var(--transition);
}

.mc-btn.form-card__meeting .mc-btn__icon {
  background: rgba(255, 255, 255, 0.1);
}

.mc-btn.form-card__meeting:hover {
  background: #142042;
  color: var(--color-white);
}

/* sticky form cards: top from main.js (below the sticky header, or bottom
   in view when the card is taller than the window) */
.team-profile-form,
.form-card {
  top: var(--mc-sticky-top, calc(var(--sticky-header, 0px) + 30px));
}


/* RTL (Arabic): directional arrows point the other way (07.11.) */
[dir="rtl"] .mc-chevron,
[dir="rtl"] .mc-btn__icon svg,
[dir="rtl"] .menu-overlay__back svg,
[dir="rtl"] .industry-slider__arrow svg,
[dir="rtl"] .listing-arrow svg,
[dir="rtl"] .listing-table__go svg,
[dir="rtl"] .listing-detail__back svg,
[dir="rtl"] .selected-transactions__arrow svg,
[dir="rtl"] [data-media-prev] svg,
[dir="rtl"] [data-media-next] svg,
[dir="rtl"] .is-prev > svg,
[dir="rtl"] .is-next > svg {
  transform: scaleX(-1);
}
[dir="rtl"] .form-card__meeting .mc-btn__icon svg {
  transform: none;
}
[dir="rtl"] .menu-overlay__nav-item:hover .mc-chevron,
[dir="rtl"] .menu-overlay__nav-item--active .mc-chevron {
  transform: scaleX(-1) translateX(3px);
}


/* Footer: operator address with the long US flag (client 08.11.) */
.footer__operator { display: flex; align-items: center; gap: 18px; }
.footer__operator .footer__flag { flex: 0 0 auto; width: 76px; height: 40px; border-radius: 2px; }
@media (max-width: 700px) {
  .footer__operator { gap: 12px; }
  .footer__operator .footer__flag { width: 53px; height: 28px; }
}


/* ==========================================================================
   Mobile header, readable (08.11.2026): the Figma mobile spec (8 px utility
   row, 101x20 CTA, 18x8 burger) is too small on real phones. Phones: the
   utility row keeps search + language as 34 px buttons, the two text links
   move into the menu; pill 56 px, CTA 38 px (two lines), burger 44 px target.
   Below 360 px the CTA is hidden (it stays first in the menu).
   ========================================================================== */
@media (max-width: 700px) {
  .header .header__utility { font-size: 11px; padding-top: 8px; }
  .header__utility .container { height: 34px; gap: 8px; justify-content: flex-end; }
  .header__utility .header__utility-link,
  .header__utility .header__utility-divider { display: none !important; }
  .header__utility .container > a[aria-label],
  .header__utility .header__lang {
    display: inline-flex; align-items: center; justify-content: center;
    height: 34px; min-width: 40px; padding: 0 9px;
    border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 6px;
  }
  .header__utility .container > a[aria-label] svg { width: 16px; height: 16px; }
  .header__utility .header__utility-flag { width: 24px !important; height: auto; }
  .header > .container { padding-top: 8px; }
  .header__pill { border-radius: 12px; }
  .header__row { height: 56px; gap: 8px; padding-inline: 14px; }
  .header .logo { font-size: 17px; }
  .header .header__actions { gap: 6px; }
  .header .header__actions .mc-btn {
    height: 38px; max-width: 132px; padding: 0 10px; border-radius: 6px;
    font-size: 10.5px; line-height: 1.2; white-space: normal; text-align: center;
  }
  .header .menu-toggle { padding: 10px; margin: -6px -10px -6px 0; }
  .header .menu-toggle__bars { width: 24px; height: 12px; }
  .menu-overlay .mc-btn--sm { height: 38px; padding: 0 12px; border-radius: 6px; font-size: 11px; }
  .menu-overlay__utility { display: flex; flex-direction: column; gap: 14px; margin-bottom: 24px; }
  .menu-overlay__utility a { color: inherit; font-size: 15px; text-decoration: underline; text-underline-offset: 3px; }
}
@media (max-width: 359px) {
  .header .header__actions .mc-btn { display: none; }
  .header .logo { font-size: 19px; }
}
@media (min-width: 701px) {
  .menu-overlay__utility { display: none; }
}

/* share button: "link copied" note (08.11.2026) */
.listing-icon-btn[data-share] { position: relative; }
.listing-icon-btn[data-share].is-copied::after {
  content: attr(data-share-note); position: absolute; left: 50%; bottom: calc(100% + 6px); transform: translateX(-50%);
  padding: 4px 8px; border-radius: 4px; background: #0b1d4d; color: #fff; font-size: 12px; white-space: nowrap; pointer-events: none;
}

/* table "Copy" button: "copied" note (08.11.2026) */
[data-table-export="copy"] { position: relative; }
[data-table-export="copy"].is-copied::after {
  content: attr(data-copy-note); position: absolute; left: 50%; bottom: calc(100% + 6px); transform: translateX(-50%);
  padding: 4px 8px; border-radius: 4px; background: #0b1d4d; color: #fff; font-size: 12px; font-weight: 400; text-transform: none; letter-spacing: 0; white-space: nowrap; pointer-events: none; z-index: 5;
}