@charset "UTF-8";
/* ==========================================================================
   DIAMOND LAW — style.css
   Vanilla CSS3 · strict BEM · mobile-first · LTR + RTL
   THEME: "Light & Gold" — white / pearl surfaces, deep-navy anchors,
          premium gold reserved for action and accent.
   --------------------------------------------------------------------------
   TABLE OF CONTENTS
     01. Design tokens (custom properties)
     02. Reset & base
     03. Layout primitives & utilities
     04. Motion: scroll reveal
     05. Buttons
     06. Brand
     07. Header
     08. Navigation + hamburger + drawer
     09. Language switcher
     10. Hero
     11. Stats
     12. Section shell
     13. Practice cards
     14. Leadership
     15. Offices
     16. CTA band
     17. Footer
     18. Floating UI (progress bar, back-to-top)
     -- service detail pages -------------------------------------------------
     19. Inner hero + breadcrumb
     20. Service layout (sticky aside + content)
     21. Aside: quick nav + consultation card
     22. Prose blocks, advantage grid, callout
     23. Vertical timeline
     24. Corporate entity cards + FAQ
     25. Visa cards, synergy callout, workflow
     26. Comparison table, credential badges, intake form, contact cards
     -- accessibility --------------------------------------------------------
     27. A11y widget (button + panel)
     28. A11y modes (contrast, text size, dyslexia, motion)
     -- global ---------------------------------------------------------------
     29. RTL overrides
     30. Reduced motion & print
   ========================================================================== */


/* ==========================================================================
   01. DESIGN TOKENS
   ========================================================================== */
:root {
  /* ---- Surfaces -------------------------------------------------------- */
  --color-white:      #FFFFFF;
  --color-pearl:      #F4F4F6;   /* alternating section band              */
  --color-pearl-deep: #EAECF0;   /* hairlines, insets                     */
  --color-navy:       #0A192F;   /* footer, CTA band, headings            */
  --color-navy-soft:  #12233F;   /* raised surface on navy                */

  /* ---- Ink ------------------------------------------------------------- */
  --color-ink:        #1A1A1A;   /* body copy                             */
  --color-ink-soft:   #4A4F57;   /* secondary copy                        */
  --color-muted:      #6B7280;   /* meta, labels                          */
  --color-on-navy:    #E8ECF3;   /* body copy on navy                     */
  --color-on-navy-dim:#9AA7BC;

  /* ---- Gold -----------------------------------------------------------
     #D4AF37 is only ~1.9:1 on white, so it never carries text. Decorative
     gold uses --color-gold; anything readable uses --color-gold-text
     (#856616 ≈ 5.2:1 on white — WCAG AA for normal text).              */
  --color-gold:       #D4AF37;
  --color-gold-deep:  #B08D2A;
  --color-gold-text:  #856616;
  --color-gold-light: #E8D28A;
  --color-gold-wash:  rgba(212, 175, 55, 0.10);

  --color-error:      #B3261E;   /* ≈5.9:1 on white — AA for form errors  */

  --color-line:       rgba(10, 25, 47, 0.12);
  --color-line-soft:  rgba(10, 25, 47, 0.07);
  --color-line-gold:  rgba(212, 175, 55, 0.45);
  --color-glass:      rgba(255, 255, 255, 0.88);

  --gradient-gold:      linear-gradient(120deg, var(--color-gold-light) 0%,
                                                var(--color-gold) 45%,
                                                var(--color-gold-deep) 100%);
  --gradient-gold-text: linear-gradient(120deg, var(--color-gold-deep) 0%,
                                                var(--color-gold-text) 100%);
  --gradient-rule:      linear-gradient(90deg, transparent,
                                               var(--color-gold) 35%,
                                               var(--color-gold) 65%,
                                               transparent);

  /* ---- Typography ----------------------------------------------------- */
  --font-display: "Playfair Display", "Frank Ruhl Libre", Georgia,
                  "Times New Roman", serif;
  --font-body:    "Inter", "Heebo", -apple-system, BlinkMacSystemFont,
                  "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --fs-xs:    0.75rem;
  --fs-sm:    0.8125rem;
  --fs-base:  0.9375rem;
  --fs-md:    1.0625rem;
  --fs-lg:    clamp(1.05rem, 0.98rem + 0.35vw, 1.1875rem);

  --fs-h1:    clamp(2.4rem, 1.15rem + 4.8vw, 4.75rem);
  --fs-h2:    clamp(1.85rem, 1.25rem + 2.3vw, 3rem);
  --fs-h3:    clamp(1.125rem, 1.02rem + 0.45vw, 1.3125rem);
  --fs-stat:  clamp(2rem, 1.4rem + 2.1vw, 3rem);

  --tracking-wide:  0.08em;
  --tracking-wider: 0.22em;

  /* ---- Spacing scale --------------------------------------------------- */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs:  0.75rem;
  --space-sm:  1rem;
  --space-md:  1.5rem;
  --space-lg:  2rem;
  --space-xl:  3rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;
  --section-y: clamp(4rem, 2.5rem + 7vw, 8rem);

  /* ---- Structure ------------------------------------------------------- */
  --container:    1280px;
  --gutter:       clamp(1.25rem, 0.6rem + 2.6vw, 3rem);
  --header-h:     4.75rem;
  --radius-sm:    2px;
  --radius-md:    4px;
  --radius-lg:    10px;

  /* ---- Motion ---------------------------------------------------------- */
  --ease-out:     cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out:  cubic-bezier(0.65, 0, 0.35, 1);
  --transition:   0.3s ease-in-out;

  /* ---- Elevation ------------------------------------------------------- */
  --shadow-sm:    0 1px 2px rgba(10, 25, 47, 0.06),
                  0 2px 8px rgba(10, 25, 47, 0.04);
  --shadow-md:    0 10px 30px -12px rgba(10, 25, 47, 0.18),
                  0 2px 6px rgba(10, 25, 47, 0.05);
  --shadow-gold:  0 16px 38px -16px rgba(176, 141, 42, 0.45),
                  0 2px 8px rgba(10, 25, 47, 0.08);
  --shadow-deep:  0 24px 60px -24px rgba(10, 25, 47, 0.35);

  /* The drawer lives inside .site-header and shares its stacking context,
     so the scrim must sit BELOW the header rather than between the two. */
  --z-scrim:  90;
  --z-header: 100;
  --z-drawer: 120;
  --z-top:    140;
  --z-a11y:   160;
}

@media (min-width: 64em) {
  :root { --header-h: 5.75rem; }
}


/* ==========================================================================
   02. RESET & BASE
   ========================================================================== */
*,
*::before,
*::after { box-sizing: border-box; }

* { margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1.5rem);
}

/* The closed off-canvas drawer sits outside the viewport and would otherwise
   extend the document's scroll width. `clip` contains it without turning the
   root into a scroll container (which would break scroll-padding + sticky). */
html, body { overflow-x: clip; }
@supports not (overflow-x: clip) {
  html, body { overflow-x: hidden; }
}

body {
  background-color: var(--color-white);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  font-weight: 400;
  line-height: 1.75;
  letter-spacing: 0.005em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body.is-locked { overflow: hidden; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.16;
  letter-spacing: -0.015em;
  color: var(--color-navy);
  text-wrap: balance;
}

p { text-wrap: pretty; }

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition);
}

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

ul, ol { list-style: none; }

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

address { font-style: normal; }
blockquote { quotes: none; }

/* The UA rule for [hidden] is a plain `display: none`, so any author rule that
   sets `display` (e.g. .btn) silently defeats it. Restate it with weight so
   hiding an element from script actually hides it. */
[hidden] { display: none !important; }

::selection {
  background-color: var(--color-gold);
  color: var(--color-navy);
}

:focus-visible {
  outline: 3px solid var(--color-gold-text);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

html { scrollbar-color: var(--color-gold-deep) var(--color-pearl); scrollbar-width: thin; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--color-pearl); }
::-webkit-scrollbar-thumb {
  background: var(--color-gold-deep);
  border: 3px solid var(--color-pearl);
  border-radius: 10px;
}


/* ==========================================================================
   03. LAYOUT PRIMITIVES & UTILITIES
   ========================================================================== */
.container {
  width: min(100% - (var(--gutter) * 2), var(--container));
  margin-inline: auto;
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: fixed;
  top: var(--space-sm);
  inset-inline-start: var(--space-sm);
  z-index: var(--z-top);
  padding: 0.75rem 1.25rem;
  background-color: var(--color-navy);
  color: var(--color-white);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  transform: translateY(-200%);
  transition: transform var(--transition);
}
.skip-link:focus { transform: translateY(0); }


/* ==========================================================================
   04. MOTION: SCROLL REVEAL
   Hidden state is scoped to `.js` (set by an inline script in <head>), so if
   JavaScript never runs the content simply renders — no blank sections.
   ========================================================================== */
.reveal {
  transition: opacity 0.85s var(--ease-out),
              transform 0.85s var(--ease-out);
}
.js .reveal {
  opacity: 0;
  transform: translate3d(0, 32px, 0);
  will-change: opacity, transform;
}
.js .reveal.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  will-change: auto;
}

.reveal:nth-child(2) { transition-delay: 0.09s; }
.reveal:nth-child(3) { transition-delay: 0.18s; }
.reveal:nth-child(4) { transition-delay: 0.27s; }
.reveal:nth-child(5) { transition-delay: 0.36s; }
.reveal:nth-child(6) { transition-delay: 0.45s; }


/* ==========================================================================
   05. BUTTONS
   ========================================================================== */
.btn {
  --btn-px: 2rem;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  padding: 1.0625rem var(--btn-px);
  border: 1px solid transparent;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  isolation: isolate;
  cursor: pointer;
  transition: color var(--transition),
              background-color var(--transition),
              border-color var(--transition),
              transform var(--transition),
              box-shadow var(--transition);
}

/* Sheen that sweeps across on hover. */
.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(115deg,
              transparent 25%,
              rgba(255, 255, 255, 0.45) 50%,
              transparent 75%);
  transform: translateX(-120%);
  transition: transform 0.75s var(--ease-out);
}
.btn:hover::after,
.btn:focus-visible::after { transform: translateX(120%); }

.btn:active { transform: translateY(1px); }

/* --- Primary: solid gold, navy label (≈7:1) ----------------------------- */
.btn--primary {
  background: var(--gradient-gold);
  border-color: var(--color-gold-deep);
  color: var(--color-navy);
}
.btn--primary:hover,
.btn--primary:focus-visible {
  box-shadow: var(--shadow-gold);
  transform: translateY(-2px);
}

/* --- Ghost: navy outline ------------------------------------------------ */
.btn--ghost {
  background-color: transparent;
  border-color: var(--color-navy);
  color: var(--color-navy);
}
.btn--ghost:hover,
.btn--ghost:focus-visible {
  background-color: var(--color-navy);
  color: var(--color-white);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

/* --- Outline: gold outline (header CTA) --------------------------------- */
.btn--outline {
  background-color: transparent;
  border-color: var(--color-gold-deep);
  color: var(--color-gold-text);
}
.btn--outline:hover,
.btn--outline:focus-visible {
  background-color: var(--color-gold);
  border-color: var(--color-gold-deep);
  color: var(--color-navy);
}

/* --- On navy surfaces --------------------------------------------------- */
.btn--on-navy {
  background-color: transparent;
  border-color: rgba(255, 255, 255, 0.5);
  color: var(--color-white);
}
.btn--on-navy:hover,
.btn--on-navy:focus-visible {
  background-color: var(--color-white);
  border-color: var(--color-white);
  color: var(--color-navy);
  transform: translateY(-2px);
}

.btn--sm { --btn-px: 1.375rem; padding-block: 0.8125rem; font-size: var(--fs-xs); }
.btn--block { display: flex; width: 100%; }


/* ==========================================================================
   06. BRAND
   ========================================================================== */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6875rem;
  flex-shrink: 0;
}

.brand__mark {
  display: grid;
  place-items: center;
  width: 2.125rem;
  height: 2.125rem;
  flex-shrink: 0;
  transition: transform 0.6s var(--ease-out);
}
.brand__mark svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: var(--color-gold-deep);
  stroke-width: 2.4;
  stroke-linejoin: round;
}
.brand:hover .brand__mark { transform: rotate(180deg) scale(1.06); }

/* The wordmark is a proper noun: it reads "DIAMOND LAW" in every locale, so
   the lockup stays LTR even when the document flips to RTL. Only the
   translated tagline beneath it follows the document direction. */
.brand__text {
  display: grid;
  grid-template-columns: auto auto;
  align-items: baseline;
  column-gap: 0.4em;
  line-height: 1;
  direction: ltr;
}

.brand__name {
  font-family: var(--font-display);
  font-size: 1.1875rem;
  font-weight: 700;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--color-navy);
  transition: color var(--transition);
}
.brand__name--accent { color: var(--color-gold-text); }

.brand__tagline {
  grid-column: 1 / -1;
  margin-top: 0.35rem;
  font-size: 0.5625rem;
  font-weight: 500;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-muted);
  display: none;
}

@media (min-width: 30em) {
  .brand__name    { font-size: 1.3125rem; }
  .brand__tagline { display: block; }
}

/* Below 480px the wordmark + language control + hamburger no longer fit the
   gutter, and the actions group gets pushed past the container edge. Tighten
   the lockup rather than letting the header overflow. */
@media (max-width: 29.99em) {
  .brand__name     { font-size: 1.0625rem; letter-spacing: 0.14em; }
  .brand__mark     { width: 1.875rem; height: 1.875rem; }
  .brand           { gap: 0.5rem; }
  .lang__chevron   { display: none; }
  .lang__toggle    { padding-inline: 0.375rem; gap: 0.25rem; }
  .site-header__inner { gap: var(--space-2xs); }
}

/* 360px-class handsets need a little more headroom still. */
@media (max-width: 23em) {
  .brand__name { letter-spacing: 0.10em; }
  .hamburger   { width: 2.5rem; height: 2.5rem; }
}

/* Brand inside the navy footer */
.brand--footer .brand__name { color: var(--color-white); }
.brand--footer .brand__name--accent { color: var(--color-gold); }
.brand--footer .brand__mark svg { stroke: var(--color-gold); }


/* ==========================================================================
   07. HEADER
   ========================================================================== */
.site-header {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: var(--z-header);
  background-color: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color 0.45s var(--ease-out),
              border-color 0.45s var(--ease-out),
              box-shadow 0.45s var(--ease-out);
}

.site-header--scrolled {
  background-color: var(--color-glass);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  backdrop-filter: blur(14px) saturate(150%);
  border-bottom-color: var(--color-line);
  box-shadow: var(--shadow-sm);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header--scrolled { background-color: var(--color-white); }
}

/* Detail pages open under a light inner hero, so the bar needs its surface
   from the very top rather than only after scrolling. */
.site-header--solid {
  background-color: var(--color-white);
  border-bottom-color: var(--color-line);
}

/* --- On-dark header state ------------------------------------------------
   When the header is transparent AND not marked --solid (i.e. it's sitting
   over the photographic hero on the home page), every foreground element
   inverts to a light treatment. As soon as the header scrolls into its
   glass state or a detail page renders it --solid, these overrides stop
   firing and the default dark treatment returns. */
.site-header:not(.site-header--scrolled):not(.site-header--solid) .brand__name { color: var(--color-white); }
.site-header:not(.site-header--scrolled):not(.site-header--solid) .brand__name--accent { color: var(--color-gold); }
.site-header:not(.site-header--scrolled):not(.site-header--solid) .brand__tagline { color: rgba(255, 255, 255, 0.72); }
.site-header:not(.site-header--scrolled):not(.site-header--solid) .brand__mark svg { stroke: var(--color-gold); }

.site-header:not(.site-header--scrolled):not(.site-header--solid) .nav__link,
.site-header:not(.site-header--scrolled):not(.site-header--solid) .nav__link--trigger { color: var(--color-white); }
.site-header:not(.site-header--scrolled):not(.site-header--solid) .nav__link:hover,
.site-header:not(.site-header--scrolled):not(.site-header--solid) .nav__link--trigger:hover,
.site-header:not(.site-header--scrolled):not(.site-header--solid) .nav__link--active { color: var(--color-gold); }

.site-header:not(.site-header--scrolled):not(.site-header--solid) .lang__toggle { color: rgba(255, 255, 255, 0.85); }
.site-header:not(.site-header--scrolled):not(.site-header--solid) .lang__toggle:hover,
.site-header:not(.site-header--scrolled):not(.site-header--solid) .lang__toggle[aria-expanded="true"] {
  color: var(--color-gold);
  border-color: rgba(255, 255, 255, 0.25);
}

.site-header:not(.site-header--scrolled):not(.site-header--solid) .btn--outline {
  border-color: rgba(255, 255, 255, 0.55);
  color: var(--color-white);
}
.site-header:not(.site-header--scrolled):not(.site-header--solid) .btn--outline:hover,
.site-header:not(.site-header--scrolled):not(.site-header--solid) .btn--outline:focus-visible {
  background-color: var(--color-white);
  border-color: var(--color-white);
  color: var(--color-navy);
}

.site-header:not(.site-header--scrolled):not(.site-header--solid) .hamburger {
  border-color: rgba(255, 255, 255, 0.35);
}
.site-header:not(.site-header--scrolled):not(.site-header--solid) .hamburger:hover {
  border-color: var(--color-gold);
  background-color: rgba(255, 255, 255, 0.10);
}
.site-header:not(.site-header--scrolled):not(.site-header--solid) .hamburger__line { background-color: var(--color-white); }

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  min-height: var(--header-h);
}

.site-header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
}

.site-header__cta { display: none; }

@media (min-width: 64em) {
  /* 1fr | auto | 1fr keeps the nav optically centred on the page rather than
     centred in whatever space the brand and actions happen to leave over. */
  .site-header__inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
  }
  .site-header__actions { justify-self: end; gap: var(--space-md); }
  .site-header__cta { display: inline-flex; }
}


/* ==========================================================================
   08. NAVIGATION
   ========================================================================== */
.nav {
  position: fixed;
  inset-block: 0;
  inset-inline-end: 0;
  z-index: var(--z-drawer);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-2xl);
  width: min(88vw, 25rem);
  padding: calc(var(--header-h) + var(--space-lg)) var(--gutter) var(--space-2xl);
  background-color: var(--color-white);
  border-inline-start: 1px solid var(--color-line);
  box-shadow: var(--shadow-deep);
  overflow-y: auto;
  overscroll-behavior: contain;
  transform: translateX(100%);
  visibility: hidden;
  transition: transform 0.5s var(--ease-out), visibility 0.5s;
}
.nav.is-open { transform: translateX(0); visibility: visible; }

.nav__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.nav__item {
  opacity: 0;
  transform: translateX(1.5rem);
  transition: opacity 0.45s var(--ease-out), transform 0.45s var(--ease-out);
}
.nav.is-open .nav__item { opacity: 1; transform: translateX(0); }
.nav.is-open .nav__item:nth-child(1) { transition-delay: 0.12s; }
.nav.is-open .nav__item:nth-child(2) { transition-delay: 0.19s; }
.nav.is-open .nav__item:nth-child(3) { transition-delay: 0.26s; }
.nav.is-open .nav__item:nth-child(4) { transition-delay: 0.33s; }
.nav.is-open .nav__item:nth-child(5) { transition-delay: 0.40s; }

.nav__link {
  position: relative;
  display: inline-block;
  padding-block: var(--space-3xs);
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--color-navy);
}
.nav__link::after {
  content: "";
  position: absolute;
  inset-block-end: 0;
  inset-inline-start: 0;
  width: 100%;
  height: 2px;
  background-color: var(--color-gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s var(--ease-out);
}
.nav__link:hover,
.nav__link--active { color: var(--color-gold-text); }
.nav__link:hover::after,
.nav__link--active::after { transform: scaleX(1); }

.nav__drawer-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--color-line-soft);
}

.nav__meta {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  font-size: var(--fs-sm);
  color: var(--color-ink-soft);
}
.nav__meta-link:hover { color: var(--color-gold-text); }

.nav-scrim {
  position: fixed;
  inset: 0;
  z-index: var(--z-scrim);
  background-color: rgba(10, 25, 47, 0.45);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity 0.45s var(--ease-out);
}
.nav-scrim.is-visible { opacity: 1; }

/* --- Hamburger ---------------------------------------------------------- */
.hamburger {
  position: relative;
  z-index: var(--z-top);
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--color-line);
  transition: border-color var(--transition), background-color var(--transition);
}
.hamburger:hover { border-color: var(--color-gold-deep); background-color: var(--color-gold-wash); }

.hamburger__box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 1.125rem;
  height: 1.125rem;
}
.hamburger__line {
  display: block;
  height: 2px;
  width: 100%;
  background-color: var(--color-navy);
  transition: transform 0.4s var(--ease-out), opacity 0.25s linear;
}
.hamburger.is-active .hamburger__line:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.hamburger.is-active .hamburger__line:nth-child(2) { opacity: 0; transform: scaleX(0); }
.hamburger.is-active .hamburger__line:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }


/* --- Serviços dropdown --------------------------------------------------
   Mobile: an accordion inside the drawer. Desktop rules further down turn
   it into a floating card. `.nav__link--trigger` is a <button> that has to
   look like the sibling <a> links, so most of .nav__link inherits. */
.nav__link--trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  width: 100%;
  justify-content: space-between;
  background: transparent;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-align: start;
}

.nav__chevron {
  width: 0.75em; height: 0.75em;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform var(--transition);
}
.nav__link--trigger[aria-expanded="true"] .nav__chevron { transform: rotate(180deg); }

/* Accordion body — hidden by default; the trigger's aria-expanded controls it,
   so no separate class is needed. */
.nav__dropdown {
  overflow: hidden;
  max-height: 0;
  padding-inline-start: var(--space-md);
  margin-top: 0;
  visibility: hidden;
  /* Zero-second visibility swap: appear instantly on expand, but wait for
     the collapse animation to finish before disappearing (so the transition
     doesn't clip mid-flight). Also keeps clipped links out of tab order. */
  transition: max-height 0.35s var(--ease-out),
              margin-top 0.35s var(--ease-out),
              visibility 0s 0.35s;
}
.nav__link--trigger[aria-expanded="true"] + .nav__dropdown {
  /* Five items with the longest Portuguese labels (Vistos Americanos e
     Imigração de Investidores) can wrap to three lines each; the ceiling
     must accommodate that even when a11y-large-text bumps every string by
     ~19%. 48rem gives one item ≈ 4-5 rem × 5 items with headroom. */
  max-height: 48rem;
  margin-top: var(--space-2xs);
  visibility: visible;
  transition: max-height 0.35s var(--ease-out),
              margin-top 0.35s var(--ease-out),
              visibility 0s;
}

/* No-JS fallback: without the trigger's aria-expanded ever changing, keep
   the submenu open so the four practice pages remain reachable. */
html:not(.js) .nav__dropdown {
  max-height: none;
  visibility: visible;
  overflow: visible;
}

.nav__submenu-list {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  padding-block: 0.375rem;
  border-inline-start: 2px solid var(--color-line-gold);
  padding-inline-start: var(--space-sm);
}

.nav__submenu-link {
  display: block;
  padding-block: 0.375rem;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--color-ink-soft);
  transition: color var(--transition);
}
.nav__submenu-link:hover,
.nav__submenu-link:focus-visible { color: var(--color-gold-text); }


/* --- Desktop layout ----------------------------------------------------- */
@media (min-width: 64em) {
  .nav {
    position: static;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 0;
    width: auto;
    padding: 0;
    background-color: transparent;
    border: 0;
    box-shadow: none;
    overflow: visible;
    transform: none;
    visibility: visible;
  }
  .nav__list { flex-direction: row; gap: clamp(1.25rem, 0.2rem + 2vw, 2.5rem); }
  .nav__item { opacity: 1; transform: none; }
  .nav__link {
    font-family: var(--font-body);
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--color-ink);
  }
  .nav__link::after { inset-block-end: -0.5rem; }
  .nav__drawer-actions { display: none; }
  .hamburger { display: none; }
  .nav-scrim { display: none; }

  /* --- Serviços dropdown, desktop -------------------------------------
     The .nav__item that holds the submenu becomes the positioning root, so
     the dropdown card can align to the trigger's centre rather than the
     viewport. Hover, focus-within and the JS-toggled state all raise it. */
  .nav__item--has-submenu { position: relative; }

  .nav__link--trigger {
    width: auto;
    justify-content: initial;
    /* The button already picks up .nav__link's typography, but its inline
       flex layout must not stretch — otherwise it grows to fit the ul. */
    gap: 0.35em;
  }

  .nav__dropdown {
    position: absolute;
    inset-block-start: calc(100% + 0.75rem);
    inset-inline-start: 50%;
    z-index: var(--z-top);
    min-width: 20rem;
    max-height: none;
    padding: var(--space-2xs);
    background-color: var(--color-white);
    border-top: 3px solid var(--color-gold);
    border-inline: 1px solid var(--color-line);
    border-bottom: 1px solid var(--color-line);
    box-shadow: var(--shadow-md);
    margin-top: 0;
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, -0.5rem);
    transition: opacity 0.25s var(--ease-out),
                transform 0.25s var(--ease-out),
                visibility 0.25s;
  }
  .nav__link--trigger[aria-expanded="true"] + .nav__dropdown,
  .nav__item--has-submenu:hover .nav__dropdown,
  .nav__item--has-submenu:focus-within .nav__dropdown {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
  }

  /* Invisible bridge under the trigger so the pointer can cross the gap
     into the dropdown without dismissing hover. */
  .nav__item--has-submenu::after {
    content: "";
    position: absolute;
    inset-block-start: 100%;
    inset-inline: 0;
    height: 0.75rem;
    pointer-events: none;
  }
  .nav__item--has-submenu:hover::after,
  .nav__item--has-submenu:focus-within::after { pointer-events: auto; }

  .nav__submenu-list {
    padding: 0;
    border: 0;
    gap: 0;
  }
  .nav__submenu-link {
    padding: 0.75rem 1rem;
    border-inline-start: 3px solid transparent;
    font-size: var(--fs-sm);
    color: var(--color-ink);
    transition: background-color var(--transition), color var(--transition),
                border-color var(--transition);
  }
  .nav__submenu-link:hover,
  .nav__submenu-link:focus-visible {
    background-color: var(--color-gold-wash);
    border-inline-start-color: var(--color-gold);
    color: var(--color-gold-text);
  }
}


/* ==========================================================================
   09. LANGUAGE SWITCHER
   ========================================================================== */
.lang { position: relative; }

.lang__toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 0.625rem;
  border: 1px solid transparent;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  color: var(--color-ink-soft);
  transition: color var(--transition), border-color var(--transition);
}
.lang__toggle:hover,
.lang__toggle[aria-expanded="true"] {
  color: var(--color-gold-text);
  border-color: var(--color-line);
}

.lang__globe,
.lang__chevron {
  width: 1rem; height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}
.lang__chevron { width: 0.75rem; height: 0.75rem; transition: transform var(--transition); }
.lang__toggle[aria-expanded="true"] .lang__chevron { transform: rotate(180deg); }

.lang__current { font-variant-numeric: tabular-nums; }

.lang__menu {
  position: absolute;
  inset-block-start: calc(100% + 0.625rem);
  inset-inline-end: 0;
  z-index: var(--z-top);
  min-width: 11.5rem;
  padding: var(--space-3xs);
  background-color: var(--color-white);
  border: 1px solid var(--color-line);
  box-shadow: var(--shadow-md);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-0.5rem);
  transition: opacity 0.25s var(--ease-out),
              transform 0.25s var(--ease-out),
              visibility 0.25s;
}
.lang__menu.is-open { opacity: 1; visibility: visible; transform: translateY(0); }

.lang__option {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  width: 100%;
  padding: 0.625rem 0.75rem;
  font-size: var(--fs-sm);
  text-align: start;
  color: var(--color-ink-soft);
  transition: background-color var(--transition), color var(--transition);
}
.lang__option:hover { background-color: var(--color-pearl); color: var(--color-navy); }

.lang__option--active { color: var(--color-gold-text); font-weight: 600; }
.lang__option--active .lang__code { border-color: var(--color-gold-deep); }

.lang__code {
  display: grid;
  place-items: center;
  min-width: 2.125rem;
  padding: 0.125rem 0.25rem;
  border: 1px solid var(--color-line);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  transition: border-color var(--transition);
}

.lang__name { white-space: nowrap; }


/* ==========================================================================
   10. HERO
   ========================================================================== */
.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100vh;
  min-height: 100svh;
  padding-block: calc(var(--header-h) + var(--space-2xl)) var(--space-3xl);
  overflow: hidden;
  isolation: isolate;
  /* Photographic background — same file, three widths, picked by the media
     queries below. The client swaps assets/hero-real-bridge.jpg for their
     real photograph; the placeholder that ships is a bridge silhouette so
     nothing 404s in the meantime. */
  background: url('../assets/hero-real-bridge.jpg') center 60% / cover no-repeat #0A192F;
  animation: hero-drift 30s var(--ease-in-out) infinite alternate;
  transform-origin: center;
}
@media (max-width: 40em) {
  .hero { background-image: url('../assets/hero-real-bridge-1200.jpg'); }
}
@media (min-resolution: 1.6dppx) and (min-width: 90em),
       (min-width: 120em) {
  .hero { background-image: url('../assets/hero-real-bridge-2560.jpg'); }
}
@keyframes hero-drift {
  from { transform: scale(1)    translate3d(0, 0, 0); }
  to   { transform: scale(1.05) translate3d(0, -0.8%, 0); }
}

/* Cinematic overlay: a deep navy wash so the massive white headline holds
   > 7:1 contrast anywhere on the photograph. Stronger over the copy (top-
   left), lighter mid-way so the horizon glow still shows through, and
   re-anchored at the bottom for a clean cut into the next section. */
.hero__overlay {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(115deg,
      rgba(10, 25, 47, 0.86) 0%,
      rgba(10, 25, 47, 0.66) 35%,
      rgba(10, 25, 47, 0.30) 65%,
      rgba(10, 25, 47, 0.55) 100%),
    linear-gradient(180deg,
      rgba(10, 25, 47, 0.20) 0%,
      transparent 55%,
      rgba(10, 25, 47, 0.85) 100%);
}

.hero__grain {
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.22;
  mix-blend-mode: overlay;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.28'/%3E%3C/svg%3E");
}

.hero__inner { position: relative; }

.hero__eyebrow {
  margin-bottom: var(--space-md);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-gold);
}

/* The h1 is now just a wrapper for two spans — the massive display line and
   the italic sub-headline — so it carries no styling of its own. */
.hero__title {
  margin: 0;
  max-width: none;
}

.hero__massive-text {
  display: block;
  /* Fluid, capped so two-word PT/ES/HE fit at desktop while one-word EN
     scales down gracefully on phones. */
  font-family: var(--font-display);
  font-size: clamp(3rem, 1rem + 10vw, 8.25rem);
  font-weight: 700;
  line-height: 0.92;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--color-white);
  text-shadow: 0 4px 40px rgba(0, 0, 0, 0.45);
}

.hero__sub-text {
  display: block;
  margin-top: var(--space-sm);
  max-width: 22ch;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 0.8rem + 2vw, 2.5rem);
  font-weight: 500;
  font-style: italic;
  line-height: 1.15;
  letter-spacing: -0.005em;
  color: var(--color-gold-light);
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.55);
}

.hero__rule {
  display: block;
  width: 5.5rem;
  height: 3px;
  margin-block: var(--space-md);
  background: var(--gradient-gold);
  transform-origin: left;
}

.hero__subtitle {
  max-width: 56ch;
  font-size: var(--fs-lg);
  font-weight: 400;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.88);
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.5);
}

/* On the dark photographic hero the ghost button needs a white outline so
   it stays legible against the darkest zone of the photo. */
.hero .btn--ghost { border-color: rgba(255, 255, 255, 0.85); color: var(--color-white); }
.hero .btn--ghost:hover,
.hero .btn--ghost:focus-visible {
  background-color: var(--color-white);
  color: var(--color-navy);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: var(--space-xl);
}

.hero__scroll {
  position: absolute;
  bottom: var(--space-md);
  right: var(--gutter);
  display: none;
  align-items: center;
  gap: var(--space-2xs);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-muted);
  writing-mode: vertical-rl;
}
.hero__scroll { color: rgba(255, 255, 255, 0.65); }
.hero__scroll:hover { color: var(--color-gold); }
.hero__scroll-line {
  width: 2px;
  height: 3.5rem;
  background: linear-gradient(var(--color-gold), transparent);
  animation: scroll-cue 2.4s var(--ease-in-out) infinite;
}
@keyframes scroll-cue {
  0%, 100% { transform: scaleY(0.35); opacity: 0.4; transform-origin: top; }
  50%      { transform: scaleY(1);    opacity: 1;   transform-origin: top; }
}

@media (min-width: 48em) {
  .hero__actions { margin-top: var(--space-2xl); }
  .hero__scroll  { display: flex; }
}




/* ==========================================================================
   10.5 HERO STAGGERED ENTRANCE
   Cinematic on-load reveal replacing the old .reveal path — the hero is
   above the fold, so IntersectionObserver isn't needed. `.js` scoping keeps
   the content visible for no-JS visitors; .a11y-no-motion cancels the whole
   sequence via the reduced-motion block near the bottom of the file.
   ========================================================================== */
@keyframes hero-in {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes hero-rule-in {
  from { opacity: 0; transform: scaleX(0); }
  to   { opacity: 1; transform: scaleX(1); }
}

.js .hero__eyebrow,
.js .hero__massive-text,
.js .hero__sub-text,
.js .hero__subtitle,
.js .hero__actions,
.js .stats {
  opacity: 0;
  animation: hero-in 0.95s var(--ease-out) both;
  will-change: opacity, transform;
}
.js .hero__rule {
  opacity: 0;
  transform-origin: left;
  animation: hero-rule-in 1s var(--ease-out) both;
}

/* Chain: eyebrow → massive → sub-headline → rule → subtitle → CTAs → stats,
   each stage ~0.15s after the last, so the whole thing lands in about 2s. */
.js .hero__eyebrow      { animation-delay: 0.10s; }
.js .hero__massive-text { animation-delay: 0.25s; }
.js .hero__sub-text     { animation-delay: 0.80s; }
.js .hero__rule         { animation-delay: 1.05s; }
.js .hero__subtitle     { animation-delay: 1.20s; }
.js .hero__actions      { animation-delay: 1.40s; }
.js .stats              { animation-delay: 1.60s; }

[dir="rtl"] .js .hero__rule { transform-origin: right; }

/* ==========================================================================
   11. STATS
   ========================================================================== */
.stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-sm);
  margin-top: var(--space-2xl);
  padding-top: var(--space-lg);
  border-top: 1px solid rgba(255, 255, 255, 0.20);
  max-width: 40rem;
}

.stats__value {
  display: flex;
  align-items: baseline;
  gap: 0.05em;
  font-family: var(--font-display);
  font-size: var(--fs-stat);
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--color-gold);
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.4);
}
.stats__suffix { font-size: 0.6em; }

.stats__label {
  margin-top: var(--space-2xs);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
  line-height: 1.45;
}


/* ==========================================================================
   12. SECTION SHELL
   ========================================================================== */
.section { position: relative; padding-block: var(--section-y); }

.section--practice { background-color: var(--color-white); }

.section--leadership {
  background-color: var(--color-pearl);
  background-image: url("../assets/pattern-facet.svg");
  background-size: 520px 520px;
  background-position: top right;
  background-repeat: no-repeat;
}

.section--offices {
  background-color: var(--color-white);
  border-top: 1px solid var(--color-line-soft);
}

.section__head { max-width: 46rem; margin-bottom: var(--space-2xl); }
.section__head--center { margin-inline: auto; text-align: center; }

.section__eyebrow {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  margin-bottom: var(--space-sm);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-gold-text);
}
.section__eyebrow::before {
  content: "";
  width: 2rem;
  height: 2px;
  background-color: var(--color-gold);
  flex-shrink: 0;
}
.section__head--center .section__eyebrow { justify-content: center; }

.section__title { font-size: var(--fs-h2); color: var(--color-navy); }

.section__lead {
  margin-top: var(--space-md);
  max-width: 52ch;
  font-size: var(--fs-md);
  color: var(--color-ink-soft);
}
.section__head--center .section__lead { margin-inline: auto; }


/* ==========================================================================
   13. PRACTICE CARDS
   ========================================================================== */
.practice__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-sm);
}

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem);
  background-color: var(--color-white);
  border: 1px solid var(--color-line);
  overflow: hidden;
  isolation: isolate;
  transition: transform var(--transition),
              border-color var(--transition),
              box-shadow var(--transition);
}

.card__border {
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  height: 3px;
  background: var(--gradient-gold);
  transform: scaleX(0.16);
  transform-origin: left;
  transition: transform 0.55s var(--ease-out);
}

.card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(120% 90% at 0% 0%, rgba(212,175,55,0.07), transparent 58%);
  opacity: 0;
  transition: opacity var(--transition);
}

.card:hover,
.card:focus-visible {
  transform: translateY(-5px);
  border-color: var(--color-line-gold);
  box-shadow: var(--shadow-gold);
}
.card:hover .card__border,
.card:focus-visible .card__border { transform: scaleX(1); }
.card:hover::before,
.card:focus-visible::before { opacity: 1; }

.card__index {
  position: absolute;
  inset-block-start: 1.25rem;
  inset-inline-end: 1.5rem;
  font-family: var(--font-display);
  font-size: 2.75rem;
  font-weight: 700;
  line-height: 1;
  color: rgba(10, 25, 47, 0.07);
  transition: color var(--transition);
  pointer-events: none;
}
.card:hover .card__index { color: rgba(176, 141, 42, 0.24); }

.card__icon {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border: 1px solid var(--color-line-gold);
  transition: background-color var(--transition), border-color var(--transition);
}
.card__icon svg {
  width: 1.5rem; height: 1.5rem;
  fill: none;
  stroke: var(--color-gold-deep);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.card:hover .card__icon { background-color: var(--color-gold-wash); border-color: var(--color-gold); }

.card__title {
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-navy);
  transition: color var(--transition);
}
.card:hover .card__title { color: var(--color-gold-text); }

.card__text { font-size: var(--fs-base); color: var(--color-ink-soft); flex-grow: 1; }

.card__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  margin-top: var(--space-2xs);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-gold-text);
}

.card__arrow {
  width: 1rem; height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform var(--transition);
}
.card:hover .card__arrow { transform: translateX(5px); }

/* When the whole card is a link, stretch the hit area over it. */
.card__link--stretched::before { content: ""; position: absolute; inset: 0; }

/* Phone: 1 col. Tablet: 2 cols (2+2+1, orphan bottom-left — acceptable). */
@media (min-width: 40em) { .practice__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Desktop premium layout — five cards render as 3 on top, 2 centred below.
   The trick: a 6-column grid where every card spans 2 cols by default (so
   3 cards fit a row of 6), and the fourth & fifth cards each span 3 cols
   (so the two of them occupy the full 6-col row, perfectly centred). No
   Flexbox second-row wrapper needed, no orphan card. */
@media (min-width: 68em) {
  .practice__grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .practice__grid > .card                { grid-column: span 2; }
  .practice__grid > .card:nth-child(4)   { grid-column: span 3; }
  .practice__grid > .card:nth-child(5)   { grid-column: span 3; }
}


/* ==========================================================================
   14. LEADERSHIP
   ========================================================================== */
.leadership__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2xl);
  align-items: center;
}

.leadership__media {
  position: relative;
  max-width: 26rem;
  width: 100%;
  margin-inline: auto;
}

.leadership__frame {
  position: absolute;
  inset-block: 1.5rem -1.5rem;
  inset-inline: 1.5rem -1.5rem;
  border: 2px solid var(--color-gold);
  opacity: 0.75;
  transition: transform 0.6s var(--ease-out), opacity 0.6s var(--ease-out);
  pointer-events: none;
}
.leadership__media:hover .leadership__frame { transform: translate(-6px, -6px); opacity: 1; }

.leadership__image {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  background-color: var(--color-pearl-deep);
  filter: grayscale(0.2);
  transition: filter 0.6s var(--ease-out);
}
.leadership__media:hover .leadership__image { filter: grayscale(0); }

.leadership__badge {
  position: absolute;
  inset-block-end: -1.25rem;
  inset-inline-start: -0.75rem;
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.875rem 1.125rem;
  background-color: var(--color-navy);
  box-shadow: var(--shadow-md);
}
.leadership__badge-number {
  font-family: var(--font-display);
  font-size: 2.125rem;
  font-weight: 700;
  line-height: 1;
  color: var(--color-gold);
}
.leadership__badge-label {
  font-size: 0.625rem;
  line-height: 1.4;
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-on-navy);
}

.leadership__name { margin-bottom: var(--space-3xs); }

.leadership__role {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-gold-text);
}

.leadership__rule {
  display: block;
  width: 4rem;
  height: 2px;
  margin-block: var(--space-md);
  background: var(--gradient-gold);
}

.leadership__text { color: var(--color-ink-soft); font-size: var(--fs-base); }
.leadership__text + .leadership__text { margin-top: var(--space-sm); }

.leadership__quote {
  margin-block: var(--space-lg);
  padding-inline-start: var(--space-md);
  border-inline-start: 3px solid var(--color-gold);
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-style: italic;
  line-height: 1.55;
  color: var(--color-navy);
}

.credentials {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
  margin-bottom: var(--space-xl);
}
.credentials__item {
  padding: 0.4375rem 0.875rem;
  background-color: var(--color-white);
  border: 1px solid var(--color-line);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-ink-soft);
  transition: background-color var(--transition), color var(--transition),
              border-color var(--transition);
}
.credentials__item:hover {
  background-color: var(--color-gold-wash);
  border-color: var(--color-line-gold);
  color: var(--color-gold-text);
}

@media (min-width: 56em) {
  .leadership__grid {
    grid-template-columns: minmax(0, 0.78fr) minmax(0, 1fr);
    gap: clamp(3rem, 1rem + 6vw, 6rem);
  }
  .leadership__media { margin-inline: 0; max-width: 24rem; }
}


/* ==========================================================================
   15. OFFICES
   ========================================================================== */
.offices {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background-color: var(--color-line);
  border: 1px solid var(--color-line);
}

.office {
  position: relative;
  padding: clamp(1.75rem, 1.2rem + 1.6vw, 2.75rem);
  background-color: var(--color-white);
  text-align: center;
  overflow: hidden;
  transition: background-color var(--transition);
}
.office::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  height: 3px;
  background: var(--gradient-rule);
  opacity: 0;
  transition: opacity var(--transition);
}
.office:hover { background-color: var(--color-pearl); }
.office:hover::before { opacity: 1; }

.office__code {
  display: block;
  margin-bottom: var(--space-sm);
  font-family: var(--font-display);
  font-size: 2.25rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1;
  color: rgba(10, 25, 47, 0.18);
  transition: color var(--transition);
}
.office:hover .office__code { color: var(--color-gold-deep); }

.office__country { font-size: var(--fs-h3); font-weight: 700; color: var(--color-navy); }

.office__city {
  margin-top: var(--space-3xs);
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-muted);
}

.office__contact {
  display: inline-block;
  margin-top: var(--space-sm);
  font-size: var(--fs-base);
  color: var(--color-ink-soft);
  border-bottom: 1px solid var(--color-line);
  transition: color var(--transition), border-color var(--transition);
}
.office__contact:hover { color: var(--color-gold-text); border-bottom-color: var(--color-gold); }

@media (min-width: 48em) { .offices { grid-template-columns: repeat(2, minmax(0, 1fr)); } }


/* ==========================================================================
   16. CTA BAND — the authoritative navy anchor
   ========================================================================== */
.cta-band {
  position: relative;
  padding-block: var(--section-y);
  background-color: var(--color-navy);
  background-image:
    radial-gradient(90% 130% at 50% 0%, rgba(212,175,55,0.16), transparent 62%);
  text-align: center;
  overflow: hidden;
}

.cta-band__inner { position: relative; max-width: 46rem; }
.cta-band__title { font-size: var(--fs-h2); color: var(--color-white); }
.cta-band__text {
  margin-top: var(--space-md);
  font-size: var(--fs-md);
  color: var(--color-on-navy);
}
.cta-band__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-sm);
  margin-top: var(--space-xl);
}


/* ==========================================================================
   17. FOOTER
   ========================================================================== */
.site-footer {
  padding-top: var(--space-3xl);
  background-color: var(--color-navy);
  color: var(--color-on-navy);
  font-size: var(--fs-base);
  border-top: 3px solid var(--color-gold);
}

.site-footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  padding-bottom: var(--space-2xl);
}

.brand--footer { margin-bottom: var(--space-sm); }

.site-footer__tagline {
  max-width: 30ch;
  color: var(--color-on-navy-dim);
  font-size: var(--fs-sm);
}

.site-footer__heading {
  margin-bottom: var(--space-sm);
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-gold);
}

.site-footer__list { display: flex; flex-direction: column; gap: var(--space-2xs); }

.site-footer__link {
  position: relative;
  display: inline-block;
  font-size: var(--fs-sm);
  color: var(--color-on-navy);
  overflow-wrap: anywhere;
}
.site-footer__link::after {
  content: "";
  position: absolute;
  inset-block-end: -2px;
  inset-inline-start: 0;
  width: 100%;
  height: 1px;
  background-color: var(--color-gold);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.4s var(--ease-out);
}
.site-footer__link:hover { color: var(--color-gold); }
.site-footer__link:hover::after { transform: scaleX(1); transform-origin: left; }

.site-footer__label {
  display: inline-block;
  min-width: 2.5rem;
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-wide);
  color: var(--color-on-navy-dim);
}

.site-footer__bottom {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  padding-block: var(--space-md) var(--space-lg);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: var(--fs-xs);
  color: var(--color-on-navy-dim);
}
.site-footer__copy { display: flex; flex-wrap: wrap; gap: 0.35em; }
.site-footer__disclaimer { max-width: 88ch; line-height: 1.7; }

@media (min-width: 40em) { .site-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64em) {
  .site-footer__grid { grid-template-columns: 1.6fr 1fr 1.5fr 1.4fr; gap: var(--space-2xl); }
  .site-footer__bottom { flex-direction: row; align-items: center; justify-content: space-between; }
  .site-footer__disclaimer { max-width: 62ch; text-align: end; }
}


/* ==========================================================================
   18. FLOATING UI
   ========================================================================== */
.progress {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: calc(var(--z-header) + 1);
  height: 3px;
  pointer-events: none;
}
.progress__bar {
  display: block;
  height: 100%;
  background: var(--gradient-gold);
  transform: scaleX(0);
  transform-origin: left;
}

.to-top {
  position: fixed;
  inset-block-end: var(--space-md);
  inset-inline-end: var(--space-md);
  z-index: var(--z-header);
  display: grid;
  place-items: center;
  width: 2.875rem;
  height: 2.875rem;
  background-color: var(--color-white);
  border: 1px solid var(--color-line);
  box-shadow: var(--shadow-md);
  opacity: 0;
  visibility: hidden;
  transform: translateY(0.75rem);
  transition: opacity var(--transition), transform var(--transition),
              visibility var(--transition), background-color var(--transition);
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.to-top:hover { background-color: var(--color-gold); }
.to-top svg {
  width: 1.125rem; height: 1.125rem;
  fill: none;
  stroke: var(--color-navy);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}


/* ==========================================================================
   19. INNER HERO + BREADCRUMB  (service detail pages)
   ========================================================================== */
/* Column flow + justify-content: flex-end bottom-aligns the content without
   making .inner-hero__inner a stretched row item — which would have needed a
   width override, and that would have cancelled .container's own width and
   removed the page gutters. */
.inner-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 50vh;
  padding-block: calc(var(--header-h) + var(--space-2xl)) var(--space-2xl);
  overflow: hidden;
  isolation: isolate;
  border-bottom: 1px solid var(--color-line-soft);
}

.inner-hero__media { position: absolute; inset: 0; z-index: -2; }
.inner-hero__image {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 40%;
}
.inner-hero__overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.92) 0%, rgba(255,255,255,0.70) 45%,
                            rgba(255,255,255,0.90) 100%),
    radial-gradient(90% 90% at 0% 100%, rgba(212,175,55,0.14), transparent 60%);
}

.inner-hero__inner { position: relative; }

.inner-hero__eyebrow {
  margin-bottom: var(--space-sm);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-gold-text);
}

.inner-hero__title {
  max-width: 20ch;
  font-size: clamp(2rem, 1.2rem + 3.4vw, 3.75rem);
  line-height: 1.06;
  color: var(--color-navy);
}

.inner-hero__lead {
  max-width: 60ch;
  margin-top: var(--space-md);
  font-size: var(--fs-md);
  color: var(--color-ink-soft);
}

.inner-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs) var(--space-md);
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-line);
}
.inner-hero__meta-item {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-ink-soft);
}
.inner-hero__meta-item svg {
  width: 1rem; height: 1rem;
  fill: none;
  stroke: var(--color-gold-deep);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* --- Breadcrumb --------------------------------------------------------- */
.breadcrumb { margin-bottom: var(--space-md); }
.breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--fs-xs);
  color: var(--color-muted);
}
.breadcrumb__item { display: flex; align-items: center; gap: 0.5rem; }
.breadcrumb__item::after {
  content: "/";
  color: var(--color-line-gold);
  font-weight: 600;
}
.breadcrumb__item:last-child::after { content: none; }
.breadcrumb__link { color: var(--color-ink-soft); border-bottom: 1px solid transparent; }
.breadcrumb__link:hover { color: var(--color-gold-text); border-bottom-color: var(--color-gold); }
.breadcrumb__current { color: var(--color-gold-text); font-weight: 600; }


/* ==========================================================================
   20. SERVICE LAYOUT — asymmetric aside + content
   ========================================================================== */
.service-layout { padding-block: var(--section-y); background-color: var(--color-white); }

.service-layout__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2xl);
}

@media (min-width: 62em) {
  .service-layout__grid {
    grid-template-columns: minmax(0, 30fr) minmax(0, 70fr);
    gap: clamp(2.5rem, 1rem + 4vw, 4.5rem);
    align-items: start;
  }
  /* `align-items: start` above is what makes position: sticky effective —
     a stretched grid item is already full height and can never stick. */
  .service-layout__aside {
    position: sticky;
    top: calc(var(--header-h) + var(--space-md));
    max-height: calc(100vh - var(--header-h) - var(--space-xl));
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}


/* ==========================================================================
   21. ASIDE — quick nav + consultation card
   ========================================================================== */
.aside-nav {
  padding: var(--space-md);
  background-color: var(--color-pearl);
  border: 1px solid var(--color-line-soft);
}

.aside-nav__title,
.aside-cta__title {
  margin-bottom: var(--space-sm);
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-gold-text);
}

.aside-nav__list { display: flex; flex-direction: column; gap: 1px; }

.aside-nav__link {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  padding: 0.6875rem var(--space-sm);
  background-color: var(--color-white);
  border-inline-start: 3px solid transparent;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--color-ink-soft);
  transition: background-color var(--transition), color var(--transition),
              border-color var(--transition);
}
.aside-nav__link::before {
  content: "";
  width: 5px; height: 5px;
  flex-shrink: 0;
  background-color: var(--color-line-gold);
  transform: rotate(45deg);
  transition: background-color var(--transition), transform var(--transition);
}
.aside-nav__link:hover {
  background-color: var(--color-gold-wash);
  border-inline-start-color: var(--color-gold);
  color: var(--color-navy);
}
.aside-nav__link--active {
  background-color: var(--color-white);
  border-inline-start-color: var(--color-gold);
  color: var(--color-navy);
  font-weight: 700;
}
.aside-nav__link--active::before,
.aside-nav__link:hover::before { background-color: var(--color-gold-deep); transform: rotate(45deg) scale(1.2); }

/* --- Consultation card -------------------------------------------------- */
.aside-cta {
  margin-top: var(--space-md);
  padding: var(--space-lg) var(--space-md);
  background-color: var(--color-white);
  border: 2px solid var(--color-gold);
  box-shadow: var(--shadow-gold);
  text-align: center;
}

.aside-cta__mark {
  display: grid;
  place-items: center;
  width: 2.75rem; height: 2.75rem;
  margin: 0 auto var(--space-sm);
  border: 1px solid var(--color-line-gold);
  border-radius: 50%;
}
.aside-cta__mark svg {
  width: 1.375rem; height: 1.375rem;
  fill: none;
  stroke: var(--color-gold-deep);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.aside-cta__heading {
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-navy);
}

.aside-cta__text {
  margin-block: var(--space-2xs) var(--space-md);
  font-size: var(--fs-sm);
  color: var(--color-ink-soft);
}

.aside-cta__contacts {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
  margin-top: var(--space-md);
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-line-soft);
  font-size: var(--fs-xs);
  color: var(--color-muted);
}
.aside-cta__contact:hover { color: var(--color-gold-text); }


/* ==========================================================================
   22. PROSE, ADVANTAGE GRID, CALLOUT
   ========================================================================== */
.service-section + .service-section { margin-top: var(--space-3xl); }
.service-section__head { margin-bottom: var(--space-lg); }

.service-section__title {
  font-size: clamp(1.6rem, 1.15rem + 1.7vw, 2.375rem);
  color: var(--color-navy);
}

.prose { color: var(--color-ink-soft); font-size: var(--fs-md); line-height: 1.85; }
.prose > * + * { margin-top: var(--space-sm); }
.prose strong { color: var(--color-navy); font-weight: 600; }
.prose em { color: var(--color-navy); }

.prose__link {
  color: var(--color-gold-text);
  font-weight: 600;
  border-bottom: 1px solid var(--color-line-gold);
}
.prose__link:hover { border-bottom-color: var(--color-gold-deep); }

/* --- Advantage grid ----------------------------------------------------- */
.advantages {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
}

.advantage {
  display: flex;
  gap: var(--space-sm);
  padding: var(--space-md);
  background-color: var(--color-pearl);
  border-inline-start: 3px solid var(--color-gold);
  transition: background-color var(--transition), transform var(--transition);
}
.advantage:hover { background-color: var(--color-gold-wash); transform: translateY(-3px); }

.advantage__icon {
  flex-shrink: 0;
  width: 2rem; height: 2rem;
  fill: none;
  stroke: var(--color-gold-deep);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.advantage__title {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  font-weight: 700;
  color: var(--color-navy);
  margin-bottom: 0.15rem;
}
.advantage__text { font-size: var(--fs-sm); color: var(--color-ink-soft); line-height: 1.65; }

@media (min-width: 40em) { .advantages { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* --- Callout ------------------------------------------------------------ */
.callout {
  display: flex;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
  padding: var(--space-md);
  background-color: var(--color-navy);
  color: var(--color-on-navy);
}
.callout__icon {
  flex-shrink: 0;
  width: 1.5rem; height: 1.5rem;
  fill: none;
  stroke: var(--color-gold);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.callout__title {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: var(--space-3xs);
}
.callout__text { font-size: var(--fs-sm); line-height: 1.7; }


/* ==========================================================================
   23. VERTICAL TIMELINE
   ========================================================================== */
.timeline {
  position: relative;
  margin-top: var(--space-xl);
  padding-inline-start: 2.75rem;
}

/* The rail. A gradient tail lets it fade out instead of stopping abruptly. */
.timeline::before {
  content: "";
  position: absolute;
  inset-block: 0.75rem 0;
  inset-inline-start: 0.9375rem;
  width: 2px;
  background: linear-gradient(180deg,
              var(--color-gold) 0%,
              var(--color-line-gold) 78%,
              transparent 100%);
}

.timeline__item { position: relative; padding-bottom: var(--space-xl); }
.timeline__item:last-child { padding-bottom: 0; }

/* --- Node --------------------------------------------------------------- */
.timeline__node {
  position: absolute;
  inset-block-start: 0.25rem;
  inset-inline-start: -2.75rem;
  display: grid;
  place-items: center;
  width: 2rem; height: 2rem;
  background-color: var(--color-white);
  border: 2px solid var(--color-gold);
  border-radius: 50%;
  font-size: 0.6875rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--color-gold-text);
  transition: background-color var(--transition), color var(--transition),
              transform var(--transition), box-shadow var(--transition);
}
/* Halo, drawn as a pseudo-element so it can scale independently. */
.timeline__node::after {
  content: "";
  position: absolute;
  inset: -0.4375rem;
  border: 1px solid var(--color-line-gold);
  border-radius: 50%;
  opacity: 0;
  transform: scale(0.7);
  transition: opacity var(--transition), transform var(--transition);
}

.timeline__item:hover .timeline__node,
.timeline__item:focus-within .timeline__node {
  background-color: var(--color-gold);
  color: var(--color-navy);
  transform: scale(1.12);
  box-shadow: var(--shadow-gold);
}
.timeline__item:hover .timeline__node::after,
.timeline__item:focus-within .timeline__node::after { opacity: 1; transform: scale(1); }

/* --- Body --------------------------------------------------------------- */
.timeline__panel {
  padding: var(--space-md);
  background-color: var(--color-white);
  border: 1px solid var(--color-line);
  transition: border-color var(--transition), box-shadow var(--transition),
              transform var(--transition);
}
.timeline__item:hover .timeline__panel,
.timeline__item:focus-within .timeline__panel {
  border-color: var(--color-line-gold);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.timeline__phase {
  display: inline-block;
  margin-bottom: var(--space-2xs);
  padding: 0.1875rem 0.5rem;
  background-color: var(--color-pearl);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-ink-soft);
}

.timeline__title {
  font-size: var(--fs-h3);
  font-weight: 700;
  color: var(--color-navy);
  margin-bottom: var(--space-3xs);
}

.timeline__text { font-size: var(--fs-base); color: var(--color-ink-soft); }

.timeline__duration {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  margin-top: var(--space-sm);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-gold-text);
}
.timeline__duration svg {
  width: 0.875rem; height: 0.875rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (min-width: 40em) {
  .timeline { padding-inline-start: 3.5rem; }
  .timeline::before { inset-inline-start: 1.1875rem; }
  .timeline__node { inset-inline-start: -3.5rem; width: 2.5rem; height: 2.5rem; font-size: 0.75rem; }
  .timeline__panel { padding: var(--space-lg); }
}


/* ==========================================================================
   24. CORPORATE ENTITY CARDS + FAQ
   ========================================================================== */
.entities {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
}

.entity {
  position: relative;
  padding: var(--space-lg);
  background-color: var(--color-white);
  border: 1px solid var(--color-line);
  border-top: 3px solid var(--color-gold);
  transition: transform var(--transition), box-shadow var(--transition);
}
.entity:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }

.entity__tag {
  display: inline-block;
  margin-bottom: var(--space-2xs);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-gold-text);
}
.entity__name { font-size: var(--fs-h3); font-weight: 700; color: var(--color-navy); }
.entity__text { margin-top: var(--space-2xs); font-size: var(--fs-base); color: var(--color-ink-soft); }

.entity__list { margin-top: var(--space-sm); display: flex; flex-direction: column; gap: var(--space-3xs); }
.entity__list-item {
  position: relative;
  padding-inline-start: 1.25rem;
  font-size: var(--fs-sm);
  color: var(--color-ink-soft);
}
.entity__list-item::before {
  content: "";
  position: absolute;
  inset-block-start: 0.6em;
  inset-inline-start: 0;
  width: 6px; height: 6px;
  background-color: var(--color-gold);
  transform: rotate(45deg);
}

@media (min-width: 46em) { .entities { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* --- Inline CTA strip --------------------------------------------------- */
.service-cta {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  align-items: flex-start;
  margin-top: var(--space-2xl);
  padding: var(--space-lg);
  background-color: var(--color-pearl);
  border-inline-start: 4px solid var(--color-gold);
}
.service-cta__title { font-size: 1.375rem; color: var(--color-navy); }
.service-cta__text { font-size: var(--fs-base); color: var(--color-ink-soft); margin-top: var(--space-3xs); }

@media (min-width: 50em) {
  .service-cta { flex-direction: row; align-items: center; justify-content: space-between; }
  .service-cta__body { max-width: 46ch; }
}


/* ==========================================================================
   25. VISA CARDS · SYNERGY CALLOUT · WORKFLOW   (U.S. immigration page)
   ========================================================================== */

/* --- 25.1 Visa category cards ------------------------------------------- */
.visa-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
  margin-top: var(--space-lg);
}

.visa-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background-color: var(--color-white);
  border: 1px solid var(--color-line);
  overflow: hidden;
  transition: transform var(--transition), border-color var(--transition),
              box-shadow var(--transition);
}
.visa-card:hover,
.visa-card:focus-visible {
  transform: translateY(-4px);
  border-color: var(--color-line-gold);
  box-shadow: var(--shadow-md);
}

/* Featured route (E-2) carries the firm's cross-border strategy. */
.visa-card--featured { border: 2px solid var(--color-gold); box-shadow: var(--shadow-gold); }
.visa-card--featured:hover,
.visa-card--featured:focus-visible { box-shadow: var(--shadow-gold), var(--shadow-md); }

.visa-card__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  background-color: var(--color-navy);
}

.visa-card__code {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--color-white);
}

.visa-card__type {
  flex-shrink: 0;
  padding: 0.25rem 0.5rem;
  border: 1px solid rgba(255, 255, 255, 0.35);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-on-navy);
  white-space: nowrap;
}
.visa-card__type--immigrant { border-color: var(--color-gold); color: var(--color-gold); }

/* Full-width strip above the head rather than a corner badge: the head
   already carries the type tag on that side, and the two would collide. */
.visa-card__ribbon {
  display: block;
  padding: 0.4375rem var(--space-md);
  background: var(--gradient-gold);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  text-align: center;
  color: var(--color-navy);
}

.visa-card__body { padding: var(--space-md); flex-grow: 1; }

.visa-card__title {
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-navy);
  margin-bottom: var(--space-2xs);
}

.visa-card__text { font-size: var(--fs-base); color: var(--color-ink-soft); }

/* Fact table: label / value rows separated by hairlines. */
.visa-card__facts {
  margin: var(--space-md) 0 0;
  border-top: 1px solid var(--color-line-soft);
}
.visa-card__fact {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-sm);
  padding-block: 0.5rem;
  border-bottom: 1px solid var(--color-line-soft);
}
.visa-card__fact-label {
  flex-shrink: 0;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-muted);
}
.visa-card__fact-value {
  font-size: var(--fs-sm);
  font-weight: 600;
  text-align: end;
  color: var(--color-navy);
}
.visa-card__fact-value--gold { color: var(--color-gold-text); }

@media (min-width: 46em) { .visa-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }


/* --- 25.2 Cross-border synergy callout ---------------------------------- */
.synergy {
  margin-top: var(--space-2xl);
  background-color: var(--color-white);
  border: 2px solid var(--color-gold);
  box-shadow: var(--shadow-gold);
  overflow: hidden;
}

.synergy__head {
  padding: var(--space-md);
  background-color: var(--color-navy);
  background-image: radial-gradient(120% 160% at 0% 0%, rgba(212,175,55,0.20), transparent 60%);
}
.synergy__eyebrow {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  margin-bottom: var(--space-2xs);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-gold);
}
.synergy__eyebrow svg {
  width: 1rem; height: 1rem;
  fill: none; stroke: currentColor;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.synergy__title {
  font-size: clamp(1.375rem, 1.1rem + 1vw, 1.875rem);
  color: var(--color-white);
}

.synergy__body { padding: var(--space-md); }
.synergy__text { font-size: var(--fs-md); color: var(--color-ink-soft); line-height: 1.8; }
.synergy__text strong { color: var(--color-navy); font-weight: 700; }

/* Three-node path: stacks on phones, runs across on tablets and up. */
.synergy__flow {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-2xs);
  margin-top: var(--space-md);
}

.synergy__node {
  flex: 1;
  padding: var(--space-sm);
  background-color: var(--color-pearl);
  border-top: 3px solid var(--color-gold);
}
.synergy__node-step {
  display: block;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-gold-text);
  margin-bottom: 0.15rem;
}
.synergy__node-title {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  font-weight: 700;
  color: var(--color-navy);
}
.synergy__node-text {
  margin-top: 0.15rem;
  font-size: var(--fs-sm);
  color: var(--color-ink-soft);
  line-height: 1.6;
}

.synergy__arrow {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  align-self: center;
  width: 1.5rem; height: 1.5rem;
}
.synergy__arrow svg {
  width: 1.25rem; height: 1.25rem;
  fill: none; stroke: var(--color-gold-deep);
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  transform: rotate(90deg);                 /* points down while stacked */
  transition: transform var(--transition);
}

/* Caveat strip — the legal distinction that makes the strategy work. */
.synergy__note {
  display: flex;
  gap: var(--space-2xs);
  margin-top: var(--space-md);
  padding: var(--space-sm);
  background-color: var(--color-gold-wash);
  border-inline-start: 3px solid var(--color-gold-deep);
  font-size: var(--fs-sm);
  line-height: 1.65;
  color: var(--color-ink);
}
.synergy__note svg {
  flex-shrink: 0;
  width: 1.125rem; height: 1.125rem;
  fill: none; stroke: var(--color-gold-text);
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.synergy__note strong { color: var(--color-navy); }

@media (min-width: 44em) {
  .synergy__head, .synergy__body { padding: var(--space-lg); }
  .synergy__flow { flex-direction: row; align-items: stretch; }
  .synergy__arrow svg { transform: rotate(0deg); }
}


/* --- 25.3 Four-step workflow -------------------------------------------- */
.workflow {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  margin-top: var(--space-lg);
}

.workflow__step { position: relative; display: flex; gap: var(--space-sm); }

.workflow__num {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 2.75rem; height: 2.75rem;
  background-color: var(--color-navy);
  border: 2px solid var(--color-navy);
  border-radius: 50%;
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--color-gold);
  transition: background-color var(--transition), color var(--transition),
              transform var(--transition), border-color var(--transition);
}
.workflow__step:hover .workflow__num,
.workflow__step:focus-within .workflow__num {
  background-color: var(--color-gold);
  border-color: var(--color-gold-deep);
  color: var(--color-navy);
  transform: scale(1.08);
}

.workflow__title {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  font-weight: 700;
  color: var(--color-navy);
  margin-bottom: 0.2rem;
}
.workflow__text { font-size: var(--fs-sm); color: var(--color-ink-soft); line-height: 1.65; }

@media (min-width: 52em) {
  .workflow { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-md); }
  .workflow__step { flex-direction: column; gap: var(--space-sm); }

  /* One continuous rule from the centre of the first marker to the centre of
     the last: 12.5% is half of a quarter-width column, so it mirrors under
     RTL without any extra rules. */
  .workflow::before {
    content: "";
    position: absolute;
    inset-block-start: 1.3125rem;
    inset-inline: 12.5%;
    height: 2px;
    background-color: var(--color-line-gold);
  }
}


/* ==========================================================================
   26. COMPARISON TABLE · CREDENTIAL BADGES · INTAKE FORM · CONTACT CARDS
   ========================================================================== */

/* --- 26.1 Comparison table ---------------------------------------------- */
/* Wrapper scrolls instead of the page: a three-column table cannot reflow
   below ~360px without losing the side-by-side reading it exists for. */
.compare-scroll {
  margin-top: var(--space-lg);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  border: 1px solid var(--color-line);
}

.compare {
  width: 100%;
  min-width: 34rem;
  border-collapse: collapse;
  font-size: var(--fs-sm);
  text-align: start;
}

.compare__head-cell {
  padding: var(--space-sm) var(--space-md);
  background-color: var(--color-navy);
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  text-align: start;
  color: var(--color-on-navy);
  white-space: nowrap;
}
.compare__head-cell--gold { color: var(--color-gold); }

.compare__row { border-top: 1px solid var(--color-line-soft); transition: background-color var(--transition); }
.compare__row:hover { background-color: var(--color-pearl); }

.compare__label {
  padding: var(--space-sm) var(--space-md);
  font-weight: 700;
  text-align: start;
  color: var(--color-navy);
  vertical-align: top;
}
.compare__cell {
  padding: var(--space-sm) var(--space-md);
  color: var(--color-ink-soft);
  vertical-align: top;
}
.compare__cell--gold {
  background-color: var(--color-gold-wash);
  color: var(--color-ink);
  font-weight: 600;
}

/* Tiny leading glyph so the two columns read apart without relying on colour */
.compare__cell::before {
  content: "—";
  margin-inline-end: 0.4rem;
  color: var(--color-muted);
  font-weight: 700;
}
.compare__cell--gold::before { content: "✓"; color: var(--color-gold-text); }


/* --- 26.2 Credential badges --------------------------------------------- */
.badges {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: var(--space-sm);
  margin-top: var(--space-lg);
}

.badge {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  padding: var(--space-md);
  background-color: var(--color-white);
  border: 1px solid var(--color-line);
  border-top: 3px solid var(--color-gold);
  transition: transform var(--transition), box-shadow var(--transition);
}
.badge:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }

.badge__icon {
  flex-shrink: 0;
  width: 1.75rem; height: 1.75rem;
  fill: none;
  stroke: var(--color-gold-deep);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.badge__label {
  display: block;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-muted);
  margin-bottom: 0.15rem;
}
.badge__value {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  font-weight: 700;
  line-height: 1.35;
  color: var(--color-navy);
}
.badge__note { display: block; margin-top: 0.2rem; font-size: var(--fs-sm); color: var(--color-ink-soft); }


/* --- 26.3 Multi-step intake form ---------------------------------------- */
.intake {
  padding: clamp(1.25rem, 0.8rem + 1.8vw, 2.25rem);
  background-color: var(--color-white);
  border: 1px solid var(--color-line);
  box-shadow: var(--shadow-sm);
}

.intake__progress {
  height: 4px;
  background-color: var(--color-pearl-deep);
  overflow: hidden;
}
.intake__progress-bar {
  display: block;
  height: 100%;
  width: 33.333%;
  background: var(--gradient-gold);
  transition: width 0.45s var(--ease-out);
}

.intake__steps {
  display: flex;
  gap: var(--space-sm);
  margin-block: var(--space-sm) var(--space-lg);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-muted);
  flex-wrap: wrap;
}
.intake__step-tab { display: flex; align-items: center; gap: 0.4rem; }
.intake__step-tab::before {
  content: "";
  width: 0.5rem; height: 0.5rem;
  background-color: var(--color-pearl-deep);
  transform: rotate(45deg);
  transition: background-color var(--transition);
}
.intake__step-tab--active { color: var(--color-gold-text); }
.intake__step-tab--active::before,
.intake__step-tab--done::before { background-color: var(--color-gold); }
.intake__step-tab--done { color: var(--color-ink-soft); }

/* Panels: only the active one participates in layout. */
.intake__panel { border: 0; display: none; }
.intake__panel--active { display: block; animation: intake-in 0.35s var(--ease-out); }
@keyframes intake-in {
  from { opacity: 0; transform: translateY(0.5rem); }
  to   { opacity: 1; transform: none; }
}

.intake__legend {
  padding: 0;
  margin-bottom: var(--space-md);
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-navy);
}

/* --- fields ------------------------------------------------------------- */
.field { margin-bottom: var(--space-md); }
.field__label {
  display: block;
  margin-bottom: 0.35rem;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-ink-soft);
}
.field__required { color: var(--color-gold-text); }

.field__control {
  display: block;
  width: 100%;
  padding: 0.8125rem var(--space-sm);
  background-color: var(--color-white);
  border: 1px solid var(--color-line);
  border-radius: 0;
  font-family: var(--font-body);
  font-size: var(--fs-base);
  color: var(--color-ink);
  transition: border-color var(--transition), box-shadow var(--transition);
  -webkit-appearance: none;
  appearance: none;
}
.field__control::placeholder { color: var(--color-muted); }
.field__control:focus {
  outline: none;
  border-color: var(--color-gold-deep);
  box-shadow: 0 0 0 3px var(--color-gold-wash);
}
textarea.field__control { min-height: 8.5rem; resize: vertical; line-height: 1.65; }

.field--invalid .field__control { border-color: var(--color-error); }
.field__error {
  display: none;
  margin-top: 0.35rem;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--color-error);
}
.field--invalid .field__error { display: block; }

/* --- consultation type: radio cards ------------------------------------- */
.choices { display: grid; grid-template-columns: 1fr; gap: var(--space-2xs); }

.choice { position: relative; }
.choice__input {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.choice__body {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  background-color: var(--color-white);
  border: 1px solid var(--color-line);
  transition: border-color var(--transition), background-color var(--transition);
  pointer-events: none;
}
.choice__input:hover + .choice__body { border-color: var(--color-line-gold); background-color: var(--color-pearl); }
.choice__input:checked + .choice__body {
  border-color: var(--color-gold);
  background-color: var(--color-gold-wash);
  box-shadow: inset 3px 0 0 var(--color-gold);
}
.choice__input:focus-visible + .choice__body {
  outline: 3px solid var(--color-gold-text);
  outline-offset: 2px;
}

.choice__marker {
  flex-shrink: 0;
  width: 1.125rem; height: 1.125rem;
  margin-top: 0.15rem;
  border: 2px solid var(--color-line);
  border-radius: 50%;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.choice__input:checked + .choice__body .choice__marker {
  border-color: var(--color-gold-deep);
  box-shadow: inset 0 0 0 3px var(--color-white), inset 0 0 0 10px var(--color-gold);
}

.choice__title { font-size: var(--fs-base); font-weight: 700; color: var(--color-navy); }
.choice__text { font-size: var(--fs-sm); color: var(--color-ink-soft); line-height: 1.55; }

@media (min-width: 40em) { .choices { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* --- consent + actions --------------------------------------------------- */
.consent { display: flex; align-items: flex-start; gap: var(--space-2xs); }
.consent__input {
  flex-shrink: 0;
  width: 1.125rem; height: 1.125rem;
  margin-top: 0.2rem;
  accent-color: var(--color-gold-deep);
}
.consent__text { font-size: var(--fs-sm); color: var(--color-ink-soft); line-height: 1.6; }

.intake__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
  align-items: center;
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-line-soft);
}
.intake__actions .btn { flex-grow: 1; }
@media (min-width: 34em) { .intake__actions .btn { flex-grow: 0; } }

.intake__status {
  margin-top: var(--space-sm);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--color-gold-text);
}
.intake__status:empty { margin-top: 0; }

/* Success panel replaces the form once a draft has been handed off. */
.intake__done { display: none; text-align: center; padding-block: var(--space-lg); }
.intake--sent .intake__done { display: block; }
.intake--sent .intake__panel,
.intake--sent .intake__actions,
.intake--sent .intake__steps,
.intake--sent .intake__progress { display: none; }
.intake__done-mark {
  display: grid;
  place-items: center;
  width: 3.5rem; height: 3.5rem;
  margin: 0 auto var(--space-sm);
  border: 2px solid var(--color-gold);
  border-radius: 50%;
}
.intake__done-mark svg {
  width: 1.75rem; height: 1.75rem;
  fill: none; stroke: var(--color-gold-deep);
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}


/* --- 26.4 Contact cards (sticky aside) ---------------------------------- */
.contact-card {
  padding: var(--space-md);
  background-color: var(--color-pearl);
  border: 1px solid var(--color-line-soft);
}
.contact-card + .contact-card { margin-top: var(--space-sm); }

.contact-card__title {
  margin-bottom: var(--space-sm);
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-gold-text);
}

.contact-card__list { display: flex; flex-direction: column; gap: var(--space-2xs); }

.contact-card__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2xs);
  font-size: var(--fs-sm);
  color: var(--color-ink-soft);
}
.contact-card__item svg {
  flex-shrink: 0;
  width: 1rem; height: 1rem;
  margin-top: 0.2rem;
  fill: none;
  stroke: var(--color-gold-deep);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.contact-card__link { border-bottom: 1px solid transparent; overflow-wrap: anywhere; }
.contact-card__link:hover { color: var(--color-gold-text); border-bottom-color: var(--color-gold); }

.contact-card__office { font-size: var(--fs-sm); color: var(--color-ink-soft); line-height: 1.6; }
.contact-card__office + .contact-card__office {
  margin-top: var(--space-sm);
  padding-top: var(--space-sm);
  border-top: 1px solid var(--color-line-soft);
}
.contact-card__city { display: block; font-weight: 700; color: var(--color-navy); }
.contact-card__flag {
  display: inline-block;
  margin-inline-end: 0.4rem;
  padding: 0.05rem 0.35rem;
  background-color: var(--color-navy);
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--color-gold);
  vertical-align: 0.12em;
}


/* ==========================================================================
   27. ACCESSIBILITY WIDGET
   Bespoke, dependency-free. Anchored to the inline-start corner so it never
   collides with .to-top, and mirrors automatically under RTL.
   ========================================================================== */
.a11y { position: fixed; inset-block-end: var(--space-md); inset-inline-start: var(--space-md); z-index: var(--z-a11y); }

.a11y__fab {
  position: relative;
  display: grid;
  place-items: center;
  width: 3.25rem; height: 3.25rem;
  background-color: var(--color-navy);
  border: 2px solid var(--color-gold);
  border-radius: 50%;
  box-shadow: var(--shadow-deep);
  transition: transform var(--transition), background-color var(--transition);
}
.a11y__fab svg { width: 1.625rem; height: 1.625rem; fill: var(--color-gold); }
.a11y__fab:hover { transform: scale(1.07); background-color: var(--color-navy-soft); }
.a11y__fab[aria-expanded="true"] { background-color: var(--color-gold); }
.a11y__fab[aria-expanded="true"] svg { fill: var(--color-navy); }

/* Small dot signalling that non-default settings are active. */
.a11y__badge {
  position: absolute;
  inset-block-start: -2px;
  inset-inline-end: -2px;
  width: 0.875rem; height: 0.875rem;
  background-color: var(--color-gold);
  border: 2px solid var(--color-white);
  border-radius: 50%;
  opacity: 0;
  transform: scale(0.4);
  transition: opacity var(--transition), transform var(--transition);
}
.a11y.is-modified .a11y__badge { opacity: 1; transform: scale(1); }

.a11y__panel {
  position: absolute;
  inset-block-end: calc(100% + 0.875rem);
  inset-inline-start: 0;
  width: min(21rem, calc(100vw - 2rem));
  max-height: min(30rem, calc(100vh - 8rem));
  overflow-y: auto;
  overscroll-behavior: contain;
  background-color: var(--color-white);
  border: 1px solid var(--color-line);
  border-top: 3px solid var(--color-gold);
  box-shadow: var(--shadow-deep);
  opacity: 0;
  visibility: hidden;
  transform: translateY(0.75rem) scale(0.97);
  transform-origin: bottom left;
  transition: opacity 0.28s var(--ease-out), transform 0.28s var(--ease-out),
              visibility 0.28s;
}
.a11y__panel.is-open { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }

.a11y__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2xs);
  padding: var(--space-sm) var(--space-md);
  background-color: var(--color-navy);
}
.a11y__heading {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-white);
}
.a11y__close {
  display: grid;
  place-items: center;
  width: 1.75rem; height: 1.75rem;
  border-radius: 50%;
  transition: background-color var(--transition);
}
.a11y__close svg {
  width: 1rem; height: 1rem;
  fill: none;
  stroke: var(--color-white);
  stroke-width: 2;
  stroke-linecap: round;
}
.a11y__close:hover { background-color: rgba(255, 255, 255, 0.16); }

.a11y__list { padding: var(--space-2xs); }

.a11y__option {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  width: 100%;
  padding: 0.75rem var(--space-sm);
  text-align: start;
  border: 1px solid transparent;
  transition: background-color var(--transition), border-color var(--transition);
}
.a11y__option:hover { background-color: var(--color-pearl); }
.a11y__option[aria-pressed="true"] {
  background-color: var(--color-gold-wash);
  border-color: var(--color-line-gold);
}

.a11y__icon {
  flex-shrink: 0;
  width: 1.375rem; height: 1.375rem;
  fill: none;
  stroke: var(--color-gold-deep);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.a11y__label {
  flex-grow: 1;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--color-navy);
  line-height: 1.35;
}
.a11y__hint {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 400;
  color: var(--color-muted);
}

/* Switch */
.a11y__switch {
  position: relative;
  flex-shrink: 0;
  width: 2.375rem; height: 1.375rem;
  background-color: var(--color-pearl-deep);
  border: 1px solid var(--color-line);
  border-radius: 1rem;
  transition: background-color var(--transition), border-color var(--transition);
}
.a11y__switch::after {
  content: "";
  position: absolute;
  inset-block-start: 2px;
  inset-inline-start: 2px;
  width: 1rem; height: 1rem;
  background-color: var(--color-white);
  border-radius: 50%;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition);
}
.a11y__option[aria-pressed="true"] .a11y__switch {
  background-color: var(--color-gold);
  border-color: var(--color-gold-deep);
}
.a11y__option[aria-pressed="true"] .a11y__switch::after { transform: translateX(1rem); }

.a11y__footer { padding: var(--space-2xs) var(--space-md) var(--space-md); }
.a11y__reset {
  width: 100%;
  padding: 0.625rem;
  border: 1px solid var(--color-line);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-ink-soft);
  transition: background-color var(--transition), color var(--transition),
              border-color var(--transition);
}
.a11y__reset:hover {
  background-color: var(--color-navy);
  border-color: var(--color-navy);
  color: var(--color-white);
}

.a11y__note {
  margin-top: var(--space-2xs);
  font-size: 0.6875rem;
  line-height: 1.5;
  color: var(--color-muted);
  text-align: center;
}


/* ==========================================================================
   28. ACCESSIBILITY MODES
   Classes are applied to BOTH <html> and <body>: <html> is what makes the
   rem-based type scale respond, <body> is the documented hook.
   ========================================================================== */

/* --- 28.1 High contrast — reuses the token layer, so every component
       recolours at once instead of needing per-component overrides. ------- */
.a11y-high-contrast {
  --color-white:      #000000;
  --color-pearl:      #000000;
  --color-pearl-deep: #000000;
  --color-navy:       #000000;
  --color-navy-soft:  #000000;
  --color-glass:      #000000;

  --color-ink:        #FFFF00;
  --color-ink-soft:   #FFFF00;
  --color-muted:      #FFFF00;
  --color-on-navy:    #FFFF00;
  --color-on-navy-dim:#FFFF00;

  --color-gold:       #FFFF00;
  --color-gold-deep:  #FFFF00;
  --color-gold-text:  #FFFF00;
  --color-gold-light: #FFFFFF;
  --color-gold-wash:  #000000;

  --color-line:       #FFFF00;
  --color-line-soft:  #FFFF00;
  --color-line-gold:  #FFFF00;

  --gradient-gold:      none;
  --gradient-gold-text: none;
  --gradient-rule:      none;

  --shadow-sm: none; --shadow-md: none; --shadow-gold: none; --shadow-deep: none;
}

/* The token layer alone is not enough: --color-navy is BOTH a surface and a
   heading colour, so remapping it to black would render every heading and the
   wordmark black-on-black. A blanket sweep over real elements guarantees no
   invisible text — including in components added later. Pseudo-elements are
   handled surgically below, because several are load-bearing (the timeline
   rail, the card top border, the stretched link hit-area). */
.a11y-high-contrast body {
  background-color: #000 !important;
  color: #FFFF00 !important;
}
.a11y-high-contrast body *:not(.a11y__switch) {
  background-color: transparent !important;
  background-image: none !important;
  color: #FFFF00 !important;
  border-color: #FFFF00 !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

/* Real photographs stay untouched in high-contrast mode. The user asked for
   visual continuity, not for a stripped-down page: an inversion or a solid
   overlay across the portrait would remove the person's face from the About
   page altogether. Only the ornamental grain layer and the button sheen come
   off, because those are decoration rather than content. */
.a11y-high-contrast .hero__grain,
.a11y-high-contrast .btn::after { display: none !important; }

/* Belt-and-braces exemption: neither the blanket sweep further up nor any
   later filter/opacity override may reach an <img> or its media container. */
.a11y-high-contrast img,
.a11y-high-contrast .leadership__image,
.a11y-high-contrast .hero__image,
.a11y-high-contrast .inner-hero__image {
  filter: none !important;
  opacity: 1 !important;
  visibility: visible !important;
}
.a11y-high-contrast .hero__media,
.a11y-high-contrast .inner-hero__media,
.a11y-high-contrast .leadership__media,
.a11y-high-contrast .leadership__frame {
  background-color: transparent !important;
  border-color: #FFFF00 !important;
}

/* The blanket sweep above stripped `background-image` from every element;
   reinstate the bridge photograph on .hero and darken the overlay so yellow
   massive-text stays legible against it. */
.a11y-high-contrast body .hero {
  background-image: url('../assets/hero-real-bridge.jpg') !important;
}
.a11y-high-contrast body .hero .hero__overlay {
  background:
    linear-gradient(115deg, rgba(0, 0, 0, 0.86) 0%,
                            rgba(0, 0, 0, 0.68) 60%,
                            rgba(0, 0, 0, 0.88) 100%) !important;
}
.a11y-high-contrast body .hero .hero__massive-text { color: #FFFF00 !important; }
.a11y-high-contrast body .hero .hero__sub-text     { color: #FFFFFF !important; }

.a11y-high-contrast .leadership__frame { opacity: 0.9 !important; }

/* Snap the image filter to its exempted state immediately — otherwise the
   default 0.6s ease serialises as `grayscale(0.001)` mid-flight and the
   visible-photo assertion (and any programmatic filter check) would fail. */
.a11y-high-contrast body .leadership__image,
.a11y-high-contrast body .hero__image,
.a11y-high-contrast body .inner-hero__image { transition: none !important; }

/* The scrim over the hero image has to darken *hard* so yellow headline
   text stays legible against whatever pale photograph now sits behind it. */
.a11y-high-contrast body .hero__overlay,
.a11y-high-contrast body .inner-hero__overlay {
  background:
    linear-gradient(180deg, rgba(0,0,0,0.82) 0%,
                            rgba(0,0,0,0.62) 45%,
                            rgba(0,0,0,0.88) 100%) !important;
}

/* Surfaces that float over other content must stay opaque, otherwise the
   sweep above makes the page read straight through them. */
.a11y-high-contrast body .site-header,
.a11y-high-contrast body .nav,
.a11y-high-contrast body .nav-scrim,
.a11y-high-contrast body .lang__menu,
.a11y-high-contrast body .a11y__panel,
.a11y-high-contrast body .a11y__fab,
.a11y-high-contrast body .to-top { background-color: #000000 !important; }

.a11y-high-contrast body .a11y__badge { background-color: #FFFF00 !important; }
.a11y-high-contrast body .intake__progress-bar,
.a11y-high-contrast body .intake__step-tab--active::before,
.a11y-high-contrast body .intake__step-tab--done::before,
.a11y-high-contrast body .contact-card__flag { background: #FFFF00 !important; }
.a11y-high-contrast body .contact-card__flag { color: #000000 !important; }
.a11y-high-contrast body .choice__input:checked + .choice__body {
  box-shadow: inset 3px 0 0 #FFFF00 !important;
}
.a11y-high-contrast body .field__control { color: #FFFF00 !important; }
.a11y-high-contrast body .field__error { color: #FFFFFF !important; }

.a11y-high-contrast body .visa-card__ribbon {
  background-color: #FFFF00 !important;
  color: #000000 !important;
}

/* Icons inherit the sweep; the widget glyph is fill-based, not stroked. */
.a11y-high-contrast svg { stroke: #FFFF00 !important; }
.a11y-high-contrast .a11y__fab svg { fill: #FFFF00 !important; stroke: none !important; }

/* Solid affordances invert so they stay unmistakably actionable. */
.a11y-high-contrast body .btn--primary,
.a11y-high-contrast body .btn--primary *,
.a11y-high-contrast body .a11y__reset:hover,
.a11y-high-contrast body .skip-link {
  background-color: #FFFF00 !important;
  color: #000000 !important;
}
.a11y-high-contrast body .btn--primary svg { stroke: #000000 !important; }

/* Switch: track and knob must stay distinguishable in both states. */
.a11y-high-contrast body .a11y__switch { background-color: #000 !important; }
.a11y-high-contrast body .a11y__option[aria-pressed="true"] .a11y__switch { background-color: #FFFF00 !important; }
.a11y-high-contrast body .a11y__switch::after { background-color: #FFFF00 !important; }
.a11y-high-contrast body .a11y__option[aria-pressed="true"] .a11y__switch::after { background-color: #000 !important; }

/* Gold-filled decorations that must remain visible. */
.a11y-high-contrast body .card__border,
.a11y-high-contrast body .progress__bar,
.a11y-high-contrast body .hero__rule,
.a11y-high-contrast body .leadership__rule,
.a11y-high-contrast body .hero__scroll-line,
.a11y-high-contrast .timeline::before,
.a11y-high-contrast .office::before,
.a11y-high-contrast .aside-nav__link::before,
.a11y-high-contrast .entity__list-item::before,
.a11y-high-contrast .section__eyebrow::before {
  background: #FFFF00 !important;
  opacity: 1 !important;
}
.a11y-high-contrast .timeline__node::after { border-color: #FFFF00 !important; }

.a11y-high-contrast a:not(.btn):not(.brand):hover,
.a11y-high-contrast a:not(.btn):not(.brand):focus-visible { text-decoration: underline; }

.a11y-high-contrast body .leadership__image { filter: grayscale(1) contrast(1.5); }

.a11y-high-contrast :focus-visible { outline-color: #FFFFFF !important; }

/* --- 28.2 Larger text ---------------------------------------------------
   118.75% pushes the root from 16 → 19 px. Anything sized in rem/em scales
   automatically; the rules below cover the handful of components whose
   fixed sizes or clipping bounds would otherwise pinch the enlarged text. */
html.a11y-large-text  { font-size: 118.75%; }        /* 16px -> 19px        */

/* Buttons: allow labels to wrap, and give the wrap enough leading so the
   second line's descenders (g, j, p, q, y) don't get shaved by .btn's
   overflow-clip that contains the hover sheen. */
.a11y-large-text .btn {
  white-space: normal;
  line-height: 1.3;
  padding-block: 0.75rem;
}

/* Header row: min-height was already correct, but the sticky aside on
   service pages caps at 100vh-header-margin — enlarge that headroom too
   so the aside can scroll internally without truncating its last card. */
.a11y-large-text .service-layout__aside { max-height: none; }

/* Small-cap eyebrows and badge labels are set in absolute 0.625rem sizes;
   118.75% still leaves them readable, but any component with a fixed
   height would clip. None currently do — this rule is a belt-and-braces
   guarantee that the site never introduces one silently. */
.a11y-large-text [class*="__icon"],
.a11y-large-text .brand__mark,
.a11y-large-text .card__icon,
.a11y-large-text .aside-cta__mark,
.a11y-large-text .to-top,
.a11y-large-text .hamburger { flex-shrink: 0; }

/* Cards, entities and visa-cards use overflow: hidden to trim decorative
   overlays (::before radial glow, sheen). In large-text mode the wrapped
   body copy sits comfortably inside because padding is rem-based — but
   we explicitly guarantee the body content can grow vertically by making
   sure no fixed heights sit on their text-carrying descendants. */
.a11y-large-text .card,
.a11y-large-text .entity,
.a11y-large-text .visa-card,
.a11y-large-text .badge,
.a11y-large-text .office,
.a11y-large-text .aside-cta,
.a11y-large-text .contact-card,
.a11y-large-text .callout,
.a11y-large-text .service-cta { height: auto; min-height: 0; }

/* The mobile services accordion already carries the raised max-height in
   its base rule; here we lift the ceiling entirely so nothing clips. */
.a11y-large-text .nav__link--trigger[aria-expanded="true"] + .nav__dropdown {
  max-height: none;
}

/* --- 28.3 Dyslexia-friendly -------------------------------------------- */
.a11y-dyslexia {
  --font-display: Verdana, Tahoma, "Trebuchet MS", Arial, sans-serif;
  --font-body:    Verdana, Tahoma, "Trebuchet MS", Arial, sans-serif;
}
.a11y-dyslexia body {
  letter-spacing: 0.055em;
  word-spacing: 0.16em;
  line-height: 1.95;
}
.a11y-dyslexia h1, .a11y-dyslexia h2,
.a11y-dyslexia h3, .a11y-dyslexia h4 {
  letter-spacing: 0.015em;
  line-height: 1.35;
  font-weight: 700;
}
.a11y-dyslexia .leadership__quote,
.a11y-dyslexia em,
.a11y-dyslexia i { font-style: normal !important; }
.a11y-dyslexia .hero__title,
.a11y-dyslexia .inner-hero__title { letter-spacing: 0.01em; }

/* --- 28.4 Paused animation --------------------------------------------- */
.a11y-no-motion *,
.a11y-no-motion *::before,
.a11y-no-motion *::after {
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  animation-delay: 0ms !important;
  transition-duration: 0.001ms !important;
  transition-delay: 0ms !important;
}
.a11y-no-motion,
.a11y-pause-animations { scroll-behavior: auto !important; }
.a11y-no-motion .reveal,
.a11y-pause-animations .reveal { opacity: 1 !important; transform: none !important; }
.a11y-no-motion .hero,
.a11y-no-motion .hero__image,
.a11y-pause-animations .hero,
.a11y-pause-animations .hero__image { animation: none !important; }

/* Hero staggered entrance: kill the delay too, so no element sits invisible
   waiting for its turn while the visitor has motion paused. */
.a11y-no-motion .js .hero__eyebrow,
.a11y-no-motion .js .hero__massive-text,
.a11y-no-motion .js .hero__sub-text,
.a11y-no-motion .js .hero__rule,
.a11y-no-motion .js .hero__subtitle,
.a11y-no-motion .js .hero__actions,
.a11y-no-motion .js .stats,
.a11y-pause-animations .js .hero__eyebrow,
.a11y-pause-animations .js .hero__massive-text,
.a11y-pause-animations .js .hero__sub-text,
.a11y-pause-animations .js .hero__rule,
.a11y-pause-animations .js .hero__subtitle,
.a11y-pause-animations .js .hero__actions,
.a11y-pause-animations .js .stats {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
}



/* Inside the open mobile drawer the surface is opaque white regardless of
   whether the header has scrolled, so the trigger button must not inherit
   the on-dark treatment above — override it back to the dark ink colour. */
@media (max-width: 63.99em) {
  .site-header:not(.site-header--scrolled):not(.site-header--solid) .nav.is-open .nav__link,
  .site-header:not(.site-header--scrolled):not(.site-header--solid) .nav.is-open .nav__link--trigger {
    color: var(--color-navy);
  }
  .site-header:not(.site-header--scrolled):not(.site-header--solid) .nav.is-open .nav__link:hover,
  .site-header:not(.site-header--scrolled):not(.site-header--solid) .nav.is-open .nav__link--trigger:hover,
  .site-header:not(.site-header--scrolled):not(.site-header--solid) .nav.is-open .nav__link--active {
    color: var(--color-gold-text);
  }
}

/* ==========================================================================
   29. RTL OVERRIDES (Hebrew)
   Logical properties handle most of the flip; these cover the transforms,
   directional gradients and background positions that cannot be logical.
   ========================================================================== */

/* Drawer geometry only exists below the desktop breakpoint. Scoping this to
   the same range stops the attribute selector's higher specificity from
   re-applying the off-canvas transform to the static desktop nav. */
@media (max-width: 63.99em) {
  [dir="rtl"] .nav { transform: translateX(-100%); }
  [dir="rtl"] .nav.is-open { transform: translateX(0); }
  [dir="rtl"] .nav__item { transform: translateX(-1.5rem); }
  [dir="rtl"] .nav.is-open .nav__item { transform: translateX(0); }
}

[dir="rtl"] .nav__link::after,
[dir="rtl"] .card__border,
[dir="rtl"] .hero__rule,
[dir="rtl"] .progress__bar { transform-origin: right; }
[dir="rtl"] .site-footer__link::after { transform-origin: left; }
[dir="rtl"] .site-footer__link:hover::after { transform-origin: right; }

[dir="rtl"] .card__border { transform: scaleX(0.16); }
[dir="rtl"] .card:hover .card__border { transform: scaleX(1); }

[dir="rtl"] .card::before {
  background: radial-gradient(120% 90% at 100% 0%, rgba(212,175,55,0.07), transparent 58%);
}
[dir="rtl"] .inner-hero__overlay {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.92) 0%, rgba(255,255,255,0.70) 45%,
                            rgba(255,255,255,0.90) 100%),
    radial-gradient(90% 90% at 100% 100%, rgba(212,175,55,0.14), transparent 60%);
}

[dir="rtl"] .card__arrow { transform: scaleX(-1); }

/* The checked-choice edge marker sits on the reading-start side. */
[dir="rtl"] .choice__input:checked + .choice__body {
  box-shadow: inset -3px 0 0 var(--color-gold);
}

/* Synergy arrows follow the reading direction; while stacked they point down
   in both directions, so only the horizontal case flips. */
@media (min-width: 44em) {
  [dir="rtl"] .synergy__arrow svg { transform: scaleX(-1); }
}
[dir="rtl"] .card:hover .card__arrow { transform: translateX(-5px) scaleX(-1); }

[dir="rtl"] .section--leadership { background-position: top left; }
[dir="rtl"] .leadership__media:hover .leadership__frame { transform: translate(6px, -6px); }

[dir="rtl"] .btn::after { transform: translateX(120%); }
[dir="rtl"] .btn:hover::after,
[dir="rtl"] .btn:focus-visible::after { transform: translateX(-120%); }

[dir="rtl"] .hero__scroll {
  writing-mode: vertical-lr;
  right: auto;
  left: var(--gutter);
}

/* Wordmark stays LTR (see .brand__text); the tagline under it flips back. */
[dir="rtl"] .brand__text   { text-align: right; }
[dir="rtl"] .brand__tagline { direction: rtl; }

/* Accessibility panel grows from the opposite corner. */
[dir="rtl"] .a11y__panel { transform-origin: bottom right; }
[dir="rtl"] .a11y__option[aria-pressed="true"] .a11y__switch::after { transform: translateX(-1rem); }

/* Hebrew reads better with slightly looser leading and no negative tracking. */
[lang="he"] h1, [lang="he"] h2, [lang="he"] h3,
[lang="he"] .hero__title, [lang="he"] .section__title,
[lang="he"] .inner-hero__title {
  letter-spacing: 0;
  line-height: 1.24;
}
[lang="he"] body,
[lang="he"] .hero__subtitle { letter-spacing: 0; }
[lang="he"] .brand__name { letter-spacing: 0.19em; }

/* The line above has the same specificity as the phone-width tightening in
   section 06 but comes later in the file, so it would otherwise re-widen the
   wordmark and push the header actions outside the gutter on small screens.
   Restating the narrow cases here keeps source order on the right side. */
@media (max-width: 29.99em) { [lang="he"] .brand__name { letter-spacing: 0.14em; } }
@media (max-width: 23em)    { [lang="he"] .brand__name { letter-spacing: 0.10em; } }


/* ==========================================================================
   30. REDUCED MOTION & PRINT
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  .js .reveal { opacity: 1; transform: none; }
  .hero, .hero__image { animation: none; }
  .js .hero__eyebrow, .js .hero__massive-text, .js .hero__sub-text,
  .js .hero__rule,    .js .hero__subtitle,      .js .hero__actions,
  .js .stats {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
}

@media print {
  .site-header, .nav, .to-top, .progress, .hero__scroll,
  .nav-scrim, .a11y, .service-layout__aside { display: none !important; }
  body { background: #fff; color: #000; }
  .hero, .inner-hero { min-height: auto; }
  .hero__media, .inner-hero__media { display: none; }
  .cta-band, .site-footer { background: #fff !important; color: #000 !important; }
  .cta-band__title, .site-footer__link, .site-footer__heading { color: #000 !important; }
  .service-layout__grid { display: block; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.75em; }
}