/* ============================================================
   FONTS — Geomanist, self hosted from Brand_Assets
   Three roles from one family: display (200/300),
   body (400 Book), utility (500 Medium), data (700 Bold)
   ============================================================ */
@font-face { font-family:'Geomanist'; src:url('Brand_Assets/Fonts/Geomanist-ExtraLight.ttf') format('truetype'); font-weight:200; font-style:normal; font-display:swap; }
@font-face { font-family:'Geomanist'; src:url('Brand_Assets/Fonts/Geomanist-Light.ttf')      format('truetype'); font-weight:300; font-style:normal; font-display:swap; }
@font-face { font-family:'Geomanist'; src:url('Brand_Assets/Fonts/Geomanist-Book.ttf')       format('truetype'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Geomanist'; src:url('Brand_Assets/Fonts/Geomanist-Medium.ttf')     format('truetype'); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:'Geomanist'; src:url('Brand_Assets/Fonts/Geomanist-Bold.ttf')       format('truetype'); font-weight:700; font-style:normal; font-display:swap; }

/* ============================================================
   TOKENS
   ============================================================ */
:root{
  /* Brand, from Brand_Assets/Colours */
  --ink:        #150A38;   /* dark blue: sobriety, elegance, confidence, rigour */
  --ink-deep:   #0C0522;   /* derived deeper shade */
  --ink-raised: #1D1147;   /* derived elevated surface on dark */
  --sky:        #5FADFB;   /* corporates and institutional clients */
  --coral:      #FF5C4A;   /* private wealth and family offices */
  --amber:      #FDB45F;   /* funds */

  /* Sky is too light for text on a light surface, so accents on the
     glass panel use this darker cut of the same hue */
  /* Glass hairlines: light film edges, not the dark-ground rules */
  /* Sky is too light for text on a light surface */
  --sky-ink:         #1668C9;
  --glass-line:      rgba(255,255,255,.16);
  --glass-line-edge: rgba(255,255,255,.26);

  /* Grounds */
  --paper:      #F3F6FD;   /* pale blue ground, derived from sky */
  --surface:    #FFFFFF;

  /* Ink on light */
  --on-paper:        var(--ink);
  --on-paper-muted:  rgba(21,10,56,.60);
  --on-paper-faint:  rgba(21,10,56,.40);
  --line-paper:      rgba(21,10,56,.11);

  /* Ink on dark */
  --on-ink:          #F1F5FD;
  --on-ink-muted:    rgba(241,245,253,.72);
  --on-ink-faint:    rgba(241,245,253,.46);
  --line-ink:        rgba(241,245,253,.14);

  /* Layering, tinted with brand ink rather than neutral black */
  --lift-1: 0 1px 2px rgba(21,10,56,.05), 0 4px 14px -4px rgba(21,10,56,.08);
  --lift-2: 0 1px 2px rgba(21,10,56,.05), 0 10px 30px -8px rgba(21,10,56,.13), inset 0 1px 0 rgba(255,255,255,.7);
  --lift-3: 0 2px 6px rgba(21,10,56,.07), 0 22px 60px -14px rgba(21,10,56,.20), inset 0 1px 0 rgba(255,255,255,.8);
  --lift-ink: 0 2px 8px rgba(4,1,14,.34), 0 24px 70px -18px rgba(4,1,14,.55);

  /* Spacing scale, intentional steps only */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:48px; --s8:64px; --s9:96px; --s10:128px; --s11:176px;

  --gutter: clamp(20px, 5vw, 80px);
  --measure: 1320px;

  --r-sm: 3px;
  --r-md: 6px;
  --r-lg: 18px;
  --r-full: 999px;

  /* Motion: critically damped, no overshoot (Apple default) */
  --spring: cubic-bezier(.22,1,.36,1);
  /* Stronger ease out than the CSS built ins, for entrances */
  --ease-out-strong: cubic-bezier(.23,1,.32,1);
  --spring-soft: cubic-bezier(.33,1,.68,1);
}

/* ============================================================
   RESET + BASE
   ============================================================ */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  /* Deepest shade, so overscroll never flashes a lighter band
     than the footer it sits behind */
  background:var(--ink-deep);
  color:var(--on-ink);
  font-family:'Geomanist', ui-sans-serif, system-ui, sans-serif;
  font-weight:400;
  font-size:clamp(1rem, .96rem + .18vw, 1.0625rem);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg{ max-width:100%; display:block; }
h1,h2,h3,h4,p,ul,ol,figure{ margin:0; }
ul,ol{ padding:0; list-style:none; }
a{ color:inherit; text-decoration:none; }
button,input,textarea,select{ font:inherit; color:inherit; }

:focus-visible{
  outline:2px solid var(--sky);
  outline-offset:3px;
  border-radius:var(--r-sm);
}

.skip{
  position:absolute; left:var(--s4); top:-100px; z-index:200;
  background:var(--sky); color:var(--ink);
  padding:var(--s3) var(--s5); border-radius:var(--r-md);
  font-weight:500; transition:top .2s var(--spring);
}
.skip:focus{ top:var(--s4); }

/* Grain, for depth on the dark acts */
.grain{
  position:fixed; inset:0; z-index:1; pointer-events:none;
  opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ============================================================
   LAYOUT PRIMITIVES
   Section padding lives ONLY on .band so nothing cancels out.
   ============================================================ */
.band{
  position:relative; z-index:2;
  padding-top:clamp(var(--s9), 9vw, 152px);
  padding-bottom:clamp(var(--s9), 9vw, 152px);
  padding-left:var(--gutter);
  padding-right:var(--gutter);
}
.band--tight{
  padding-top:clamp(var(--s8), 7vw, var(--s9));
  padding-bottom:clamp(var(--s8), 7vw, var(--s9));
}
.wrap{ max-width:var(--measure); margin-inline:auto; width:100%; }

/* An "act" wraps one or more consecutive bands, so the ambient
   gradient spans the whole run instead of restarting at every
   section and leaving a visible seam. */
.ink-act{ position:relative; background:var(--ink); color:var(--on-ink); }
.ink-act--raised{ background:var(--ink-raised); }
.paper-act{ position:relative; background:var(--paper); color:var(--on-paper); }

/* Ambient depth on dark acts: layered radials, static (no looping motion) */
.ink-act::before{
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(760px 520px at 12% 0%,   rgba(95,173,251,.12), transparent 62%),
    radial-gradient(560px 420px at 96% 8%,   rgba(255,92,74,.05),  transparent 64%),
    radial-gradient(780px 600px at 68% 102%, rgba(253,180,95,.045), transparent 66%);
}
.ink-act > *{ position:relative; z-index:1; }

/* Pointer-follow light, injected by JS. Sits above the static
   ambient gradient but behind real content since it shares the
   ">*" z-index of 1 and paints first in DOM order. */
.ink-act > .cursor-glow{
  position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(560px 560px at var(--mx,50%) var(--my,50%), rgba(95,173,251,.14), transparent 62%);
  opacity:0; transition:opacity .5s var(--spring);
}
.ink-act:hover > .cursor-glow{ opacity:1; }

/* ============================================================
   TYPE ROLES
   Tracking and leading are size specific, never one value.
   ============================================================ */
.eyebrow{
  font-weight:500; font-size:.6875rem; line-height:1.2;
  letter-spacing:.16em; text-transform:uppercase;
  display:flex; align-items:center; gap:var(--s3);
  color:var(--on-ink-muted);
}
.paper-act .eyebrow{ color:var(--on-paper-muted); }

/* The colon from the mark, used as the section marker.
   A colon means: here is what follows. */
.colon{ display:inline-flex; flex-direction:column; gap:3px; flex:none; }
.colon i{ width:5px; height:5px; border-radius:var(--r-full); display:block; }
.colon i:first-child{ background:var(--coral); }
.colon i:last-child{ background:var(--amber); }

.display{
  font-weight:300;
  font-size:clamp(2.75rem, 7vw, 5.875rem);
  line-height:1.03;
  letter-spacing:-.036em;
  text-wrap:balance;
}
.h2{
  font-weight:300;
  font-size:clamp(2rem, 4.1vw, 3.375rem);
  line-height:1.08;
  letter-spacing:-.028em;
  text-wrap:balance;
}
.h3{
  font-weight:400;
  font-size:clamp(1.25rem, 1.9vw, 1.5rem);
  line-height:1.22;
  letter-spacing:-.017em;
}
.h4{
  font-weight:500; font-size:1rem; line-height:1.35; letter-spacing:-.008em;
}
.lede{
  font-weight:300;
  font-size:clamp(1.125rem, 1.55vw, 1.4375rem);
  line-height:1.5;
  letter-spacing:-.012em;
  color:var(--on-ink-muted);
  max-width:60ch;
}
.paper-act .lede{ color:var(--on-paper-muted); }
.body-muted{ color:var(--on-ink-muted); }
.paper-act .body-muted{ color:var(--on-paper-muted); }
.small{ font-size:.875rem; line-height:1.55; }
.tiny{
  font-size:.6875rem; letter-spacing:.14em; text-transform:uppercase;
  font-weight:500; line-height:1.3;
}

/* Section heading block.
   Measured in px, not ch: a ch max-width here would be computed
   from the container's body font size and would crush the h2. */
.head{ display:grid; gap:var(--s5); max-width:660px; }
.head--wide{ max-width:880px; }

/* ============================================================
   BUTTONS
   Every interactive element: hover, focus-visible, active.
   ============================================================ */
.btn{
  display:inline-flex; align-items:center; gap:var(--s3);
  padding:var(--s4) var(--s6);
  border-radius:var(--r-full);
  font-weight:500; font-size:.9375rem; letter-spacing:-.005em;
  border:1px solid transparent;
  cursor:pointer;
  will-change:transform;
  transition:transform .22s var(--spring), background-color .22s var(--spring),
             border-color .22s var(--spring), color .22s var(--spring), box-shadow .22s var(--spring);
}
.btn:active{ transform:scale(.975); }

.btn--primary{ background:var(--sky); color:var(--ink); }
.btn--primary:hover{ background:#84c1fc; transform:translateY(-2px); box-shadow:0 10px 28px -8px rgba(95,173,251,.55); }
.btn--primary:active{ transform:translateY(-1px) scale(.975); }

.btn--ghost{ border-color:var(--line-ink); color:var(--on-ink); }
.btn--ghost:hover{ border-color:rgba(241,245,253,.42); background:rgba(241,245,253,.05); transform:translateY(-2px); }
.btn--ghost:active{ transform:translateY(-1px) scale(.975); }

.paper-act .btn--ghost{ border-color:var(--line-paper); color:var(--on-paper); }
.paper-act .btn--ghost:hover{ border-color:rgba(21,10,56,.34); background:rgba(21,10,56,.035); }

.btn--dark{ background:var(--ink); color:var(--on-ink); }
.btn--dark:hover{ background:var(--ink-raised); transform:translateY(-2px); box-shadow:var(--lift-2); }
.btn--dark:active{ transform:translateY(-1px) scale(.975); }

.arrow{ transition:transform .28s var(--spring); }
.btn:hover .arrow{ transform:translateX(4px); }

/* Text link with a rule that draws in */
.tlink{
  display:inline-flex; align-items:center; gap:var(--s2);
  font-weight:500; font-size:.9375rem;
  padding-bottom:2px;
  background-image:linear-gradient(var(--sky),var(--sky));
  background-size:0% 1px; background-position:0 100%; background-repeat:no-repeat;
  transition:background-size .32s var(--spring), color .22s var(--spring);
}
.tlink:hover{ color:var(--sky); }
.tlink:active{ opacity:.75; }

/* ============================================================
   NAV — translucent material, content scrolls under
   ============================================================ */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:100;
  padding:var(--s4) var(--gutter);
  background:rgba(12,5,34,.55);
  backdrop-filter:blur(22px) saturate(170%);
  -webkit-backdrop-filter:blur(22px) saturate(170%);
  border-bottom:1px solid transparent;
  transition:background-color .4s var(--spring), border-color .4s var(--spring), padding .4s var(--spring);
}
.nav.scrolled{
  background:rgba(12,5,34,.86);
  border-bottom-color:var(--line-ink);
  padding-top:var(--s3); padding-bottom:var(--s3);
}
.scrollbar{
  position:absolute; left:0; bottom:-1px; height:2px; width:0%;
  background:linear-gradient(90deg, var(--sky), var(--coral), var(--amber));
  pointer-events:none;
}
.nav__in{
  max-width:var(--measure); margin-inline:auto;
  display:flex; align-items:center; justify-content:space-between; gap:var(--s6);
}
.nav__logo{ display:block; flex:none; position:relative; z-index:2; }
.nav__logo img{ height:26px; width:auto; transition:opacity .2s var(--spring); }
.nav__logo:hover img{ opacity:.78; }
.nav__logo:active img{ opacity:.6; }

.nav__links{ display:flex; align-items:center; gap:var(--s7); min-width:0; }
.nav__links a{
  font-size:.875rem; font-weight:400; color:var(--on-ink-muted);
  padding:var(--s2) 0; position:relative; white-space:nowrap;
  transition:color .22s var(--spring);
}
/* Hover is carried by colour alone, no underline */
.nav__links a:hover{ color:var(--on-ink); }
.nav__links a:active{ color:var(--sky); }
/* The page you are on, marked with the colon dot from the mark */
.nav__links a[aria-current="page"]{ color:var(--on-ink); }
.nav__links a[aria-current="page"]::before{
  content:''; position:absolute; left:50%; bottom:-5px;
  width:4px; height:4px; margin-left:-2px;
  border-radius:var(--r-full); background:var(--sky);
}
.nav__right{ display:flex; align-items:center; gap:var(--s5); flex:none; position:relative; z-index:2; }
.nav__cta-m{ display:none; }
.nav .btn{ padding:var(--s3) var(--s5); font-size:.875rem; white-space:nowrap; flex:none; }

.nav__burger{
  display:none; background:none; border:0; cursor:pointer;
  padding:var(--s2); border-radius:var(--r-md);
}
.nav__burger span{
  display:block; width:22px; height:1.5px; background:var(--on-ink); border-radius:2px;
  transition:transform .3s var(--spring), opacity .2s var(--spring);
}
.nav__burger span + span{ margin-top:5px; }
.nav.open .nav__burger span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
.nav.open .nav__burger span:nth-child(2){ opacity:0; }
.nav.open .nav__burger span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }

/* Nav collapses in stages as width runs out, so the phone number and
   the call to action are never squeezed into wrapping. */
@media (max-width:1320px){
  .nav__links{ gap:var(--s5); }
}
@media (max-width:860px){
  /* At phone widths the logo, the call to action and the burger stop
     fitting on one line, so everything moves inside the menu and the
     bar keeps only the logo and the burger. */
  .nav__right .btn{ display:none; }
  .nav__cta-m{
    display:inline-flex; justify-content:center;
    margin-top:var(--s3); width:100%;
  }
  .nav__links.open{ padding-bottom:var(--s7); }
}
@media (max-width:1080px){
  .nav__links{ display:none; }
  .nav__burger{ display:block; }

  /* While the menu is open the bar stops being glass. Its
     backdrop-filter would otherwise become the containing block for
     the panel and trap position:fixed inside the bar's own height. */
  .nav.open{ background:transparent; backdrop-filter:none; -webkit-backdrop-filter:none; border-bottom-color:transparent; }

  .nav__links.open{
    display:flex; flex-direction:column; justify-content:center;
    align-items:stretch; text-align:left;
    position:fixed; inset:0; z-index:1;
    padding:var(--s10) var(--gutter) var(--s8);
    gap:0;
    background:
      radial-gradient(72% 46% at 18% 10%, rgba(95,173,251,.17), transparent 72%),
      radial-gradient(64% 44% at 90% 92%, rgba(255,92,74,.11), transparent 72%),
      var(--ink-deep);
    overflow-y:auto;
  }
  .nav__links.open a{
    font-size:clamp(1.625rem, 7.5vw, 2.375rem);
    font-weight:300;
    letter-spacing:-.03em;
    line-height:1.1;
    color:var(--on-ink);
    padding:var(--s5) 0;
    border-bottom:1px solid var(--line-ink);
    opacity:0;
    transform:translateY(16px);
    animation:menu-in .6s var(--spring) forwards;
  }
  .nav__links.open a:nth-child(1){ animation-delay:.05s; }
  .nav__links.open a:nth-child(2){ animation-delay:.10s; }
  .nav__links.open a:nth-child(3){ animation-delay:.15s; }
  .nav__links.open a:nth-child(4){ animation-delay:.20s; }
  .nav__links.open a:nth-child(5){ animation-delay:.25s; }
  .nav__links.open a:nth-child(6){ animation-delay:.30s; }
  .nav__links.open a:nth-child(7){ animation-delay:.36s; }
  .nav__links.open a:hover{ color:var(--sky); }

  .nav__links.open a[aria-current="page"]{ color:var(--sky); }
  .nav__links.open a[aria-current="page"]::before{ display:none; }

  .nav__links.open .nav__cta-m{
    margin-top:var(--s7);
    padding:var(--s5) var(--s6);
    font-size:1rem;
    border-bottom:0;
    color:var(--ink);
    letter-spacing:normal;
  }
  .nav__links.open .nav__cta-m:hover{ color:var(--ink); }
}
@keyframes menu-in{
  to{ opacity:1; transform:none; }
}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative;
  min-height:var(--hero-min, 100svh);
  display:flex; align-items:stretch;
  padding-top:clamp(132px, 19vh, 190px);
  padding-bottom:clamp(var(--s6), 5vh, var(--s7));
  background:url('Brand_Assets/Backgrounds/hero.jpg') center 32% / cover no-repeat;
}
/* Colour treatment: folds the photo into the brand's ink rather
   than letting it sit on top as a stock image. */
.hero::before{
  content:''; position:absolute; inset:0; z-index:1;
  background:var(--ink); mix-blend-mode:multiply; opacity:.38;
}
/* Legibility: a top-right porthole (matching the ambient highlight
   used on the rest of this act) sinking into solid ink everywhere
   the copy actually sits. */
.hero::after{
  content:''; position:absolute; inset:0; z-index:1;
  background:
    radial-gradient(1100px 700px at 88% 6%, transparent 0%, rgba(12,5,34,.28) 48%, rgba(12,5,34,.68) 100%),
    linear-gradient(180deg, rgba(12,5,34,.2) 0%, rgba(12,5,34,.4) 46%, var(--ink-raised) 92%);
}
.hero__grid{
  position:relative; z-index:2;
  display:flex; flex-direction:column;
  gap:clamp(var(--s5), 3.2vh, var(--s7));
  width:100%;
}
.hero__top{ display:grid; gap:var(--s5); margin-top:auto; }
.hero .display{ max-width:20ch; }

.hero__left{ display:grid; gap:var(--s6); }
.hero__lede{ max-width:46ch; }
.hero__cta{ display:flex; flex-wrap:wrap; gap:var(--s4); align-items:center; }

/* Quiet figure band pinned to the fold. Deliberately small:
   the instrument below carries the big numbers. */
/* The figures speak in the same voice as the display type: light and
   large with tight tracking, rather than the bold condensed numerals
   of a dashboard stat row. Labels take the utility cut so the two
   never compete. */
.facts{
  margin-top:auto;
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:clamp(var(--s6), 4vw, var(--s8));
  border-top:1px solid var(--line-ink);
  padding-top:clamp(var(--s6), 3vw, var(--s7));
}
.facts__i{ display:grid; gap:var(--s4); align-content:start; }
.facts__n{
  font-weight:300;
  font-size:clamp(2.25rem, 3.6vw, 3.25rem);
  line-height:.95;
  letter-spacing:-.045em;
  color:var(--on-ink);
}
/* The suffix is a qualifier, not part of the figure */
.facts__n .suffix{
  color:var(--sky);
  font-weight:400;
  font-size:.52em;
  margin-left:.06em;
  letter-spacing:0;
}
.facts__l{
  color:var(--on-ink-faint);
  font-size:.6875rem; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase;
  line-height:1.45;
  max-width:24ch;
}

/* ============================================================
   ODOMETER — fixed digit cells, because Geomanist has no
   tabular figures and counters would otherwise jitter
   ============================================================ */
/* min-height reserves the line box while the element is still empty.
   Without it the figures have zero height until the counter runs and
   the whole section jumps taller the moment they appear. */
.odo{ display:inline-flex; align-items:baseline; min-height:1em; font-variant-numeric:tabular-nums; }
.odo i{ display:inline-block; width:.60em; text-align:center; font-style:normal; }
.odo i.sep{ width:.26em; }
.odo .suffix{ font-style:normal; }

/* ============================================================
   SIGNATURE — The Proximity Constant
   Milk glass: a thin translucent film, not a solid card. The dark
   act shows through it, so the surface reads dark and the content
   stays light. Depth comes from blur, edge light and a surface
   sheen rather than from opacity.
   ============================================================ */
.inst{ display:grid; gap:var(--s8); }

/* The keyvisual sits directly behind the glass, so the panel has
   something real to be transparent against. Darkened towards the
   brand ink so the surface still reads deep and the text stays light. */
.inst__stage{ position:relative; }
.inst__panel{
  position:relative; z-index:1;
  border:1px solid var(--glass-line-edge);
  border-top-color:rgba(255,255,255,.55);   /* light catching the top rim */
  border-radius:var(--r-lg);
  box-shadow:
    0 2px 10px rgba(4,1,14,.28),
    0 34px 90px -24px rgba(4,1,14,.55),
    inset 0 1px 0 rgba(255,255,255,.34),
    inset 0 -1px 0 rgba(4,1,14,.22);
  color:var(--on-ink);
  overflow:hidden;
}
.inst__readouts{
  display:grid; grid-template-columns:repeat(4,1fr);
}
.inst__ro{
  padding:var(--s7) var(--s6);
  border-right:1px solid var(--glass-line);
  display:grid; gap:var(--s3); align-content:start;
}
.inst__ro:last-child{ border-right:0; }
.inst__ro .tiny{ color:var(--on-ink-faint); }
.inst__ro .odo{
  font-weight:700; font-size:clamp(2.25rem,4.4vw,3.75rem);
  line-height:1; letter-spacing:-.035em; color:var(--on-ink);
}

/* Track. A touch more white film, because lighter material draws
   attention to the part you are meant to touch. */
.inst__track-area{
  padding:var(--s7) var(--s6) var(--s6);
  border-top:1px solid var(--glass-line);
  background:rgba(255,255,255,.06);
}
.inst__track-head{
  display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline;
  gap:var(--s3) var(--s5); margin-bottom:var(--s6);
}
.inst__hint{ color:var(--on-ink-faint); font-size:.8125rem; }
.inst__hint b{ color:var(--sky); font-weight:500; }

.track{
  position:relative; height:44px;
  touch-action:none; cursor:grab;
  -webkit-user-select:none; user-select:none;
}
.track:active{ cursor:grabbing; }
.track__rail{
  position:absolute; left:0; right:0; top:21px; height:2px;
  background:rgba(255,255,255,.24); border-radius:var(--r-full);
}
.track__fill{
  position:absolute; left:0; top:21px; height:2px;
  background:linear-gradient(90deg, rgba(95,173,251,.55), var(--sky));
  border-radius:var(--r-full);
  transform-origin:left center;
  width:100%; transform:scaleX(0);
}
.track__ticks{ position:absolute; left:0; right:0; top:16px; height:12px; }
.track__tick{
  position:absolute; top:0; width:2px; height:12px; border-radius:1px;
  background:rgba(255,255,255,.30); transform:translateX(-1px);
}
.track__handle{
  position:absolute; top:6px; left:0; width:32px; height:32px;
  margin-left:-16px;
  border-radius:var(--r-full);
  background:var(--sky);
  box-shadow:0 2px 10px rgba(4,1,14,.55), 0 0 0 0 rgba(95,173,251,.28);
  display:grid; place-items:center;
  will-change:transform;
  transition:box-shadow .28s var(--spring), background-color .2s var(--spring);
}
.track__handle::after{
  content:''; width:10px; height:10px; border-radius:var(--r-full);
  background:var(--ink);
  transition:transform .18s var(--spring);
}
.track:hover .track__handle{ box-shadow:0 2px 10px rgba(4,1,14,.55), 0 0 0 9px rgba(95,173,251,.16); }
.track__handle:focus-visible{ outline:2px solid var(--on-ink); outline-offset:4px; }
.track.dragging .track__handle{ box-shadow:0 2px 14px rgba(4,1,14,.6), 0 0 0 13px rgba(95,173,251,.2); }
/* The outer ring keeps carrying the 1:1 translateX untouched by any
   transition; the inner dot alone gives the squeeze so grabbing the
   handle never adds lag to its position. */
.track.dragging .track__handle::after{ transform:scale(.62); }

.track__scale{
  display:flex; justify-content:space-between;
  margin-top:var(--s4);
  color:var(--on-ink-faint); font-size:.75rem;
}

/* Constants: the half that does not move. Slightly recessed,
   neutral rather than tinted. */
.constants{
  display:grid; grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--glass-line);
  background:rgba(4,1,14,.12);
}
.constants__i{
  padding:var(--s6);
  border-right:1px solid var(--glass-line);
  display:flex; gap:var(--s5); align-items:flex-start;
}
.constants__i:last-child{ border-right:0; }
.constants__n{
  font-weight:700; font-size:2.75rem; line-height:.9; letter-spacing:-.03em;
  color:var(--sky); flex:none; min-width:2.1ch;
}
.constants__t .h4{ margin-bottom:2px; }
.constants__t p{ color:var(--on-ink-faint); font-size:.8125rem; line-height:1.5; }

/* The panel reveals as one piece; these two rows then cascade in
   slightly behind it, item by item, rather than popping in as a
   block. Piggybacks on the existing .in trigger, no new observer. */
.js .inst__ro,
.js .constants__i{
  opacity:0; transform:translateY(10px);
  transition:opacity .5s var(--spring), transform .5s var(--spring);
}
.js .inst__stage.in .inst__ro,
.js .inst__stage.in .constants__i{ opacity:1; transform:none; }
.inst__ro:nth-child(2){ transition-delay:.06s; }
.inst__ro:nth-child(3){ transition-delay:.12s; }
.inst__ro:nth-child(4){ transition-delay:.18s; }
.constants__i:nth-child(2){ transition-delay:.06s; }
.constants__i:nth-child(3){ transition-delay:.12s; }

/* ============================================================
   POSITIONING — purely typographic, two columns
   ============================================================ */
.pos{ display:grid; grid-template-columns:1.05fr 1fr; gap:clamp(var(--s7),6vw,var(--s10)); align-items:start; }
.pos__body{ display:grid; gap:var(--s5); }
/* The copy sits level with the heading and graphic beside it */
#approach .pos{ align-items:center; }
.pos__body p{ color:var(--on-paper-muted); max-width:46ch; }
.pos__body strong{ color:var(--on-paper); font-weight:500; }

/* ============================================================
   VISION — a standalone statement band, dark against the two
   paper sections either side of it so it reads as a pause, not
   another paragraph.
   ============================================================ */

/* ============================================================
   SEGMENTS — shared bits still used by the accordions
   ============================================================ */

/* One shared close, not three near-identical ones: each card used
   to end with its own "talk to us when" line. */
.segs__pain{
  margin-top:var(--s7); padding-top:var(--s6);
  max-width:62ch; margin-inline:auto; text-align:center;
  color:var(--on-paper-faint); font-size:1rem; line-height:1.6;
}

/* ============================================================
   SERVICES — the standardised service matrix
   ============================================================ */
.svcs{ border-top:1px solid var(--line-paper); }
.svc{
  display:grid; grid-template-columns:7px minmax(0,320px) minmax(0,1fr);
  column-gap:var(--s5); row-gap:var(--s3); align-items:baseline;
  padding:var(--s6) var(--s4);
  border-bottom:1px solid var(--line-paper);
  transition:background-color .3s var(--spring);
}
.svc:hover{ background:rgba(255,255,255,.72); }
.svc__t{ transition:color .24s var(--spring); }
.svc:hover .svc__t{ color:var(--sky); }
.svc__d{
  width:7px; height:7px; border-radius:var(--r-full);
  background:var(--on-paper-faint); margin-top:.55em;
  transition:background-color .3s var(--spring), transform .3s var(--spring);
}
.svc:hover .svc__d{ background:var(--sky); transform:scale(1.35); }
.svc__t{ font-weight:400; font-size:clamp(1.0625rem,1.5vw,1.25rem); letter-spacing:-.015em; }
.svc__c{ color:var(--on-paper-muted); font-size:.9375rem; line-height:1.6; }
.svc__c ul{ display:grid; gap:var(--s2); margin-top:var(--s3); padding-left:1.1em; }
.svc__c li{ list-style:disc; }

.svcs__cta{ display:flex; justify-content:center; margin-top:var(--s7); }

/* ============================================================
   LEGAL / STATIC PROSE — privacy policy, legal notice
   ============================================================ */
.legal{ max-width:720px; margin-inline:auto; display:grid; gap:var(--s5); }
.legal h2{ font-weight:500; font-size:1.375rem; letter-spacing:-.015em; margin-top:var(--s4); }
.legal p{ color:var(--on-paper-muted); font-size:.9375rem; line-height:1.7; }
.legal ul{ display:grid; gap:var(--s3); padding-left:1.15em; }
.legal li{ list-style:disc; color:var(--on-paper-muted); font-size:.9375rem; line-height:1.6; }
.legal a{ color:var(--sky); }
.legal .small{ color:var(--on-paper-faint); }
.legal__table{ width:100%; border-collapse:collapse; font-size:.875rem; }
.legal__table th,.legal__table td{ text-align:left; padding:var(--s3) var(--s4) var(--s3) 0; border-bottom:1px solid var(--line-paper); color:var(--on-paper-muted); }
.legal__table th{ color:var(--on-paper); font-weight:500; }

/* ============================================================
   COMMITMENTS
   ============================================================ */
.promises{ position:relative; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--s5); }
/* As accordions they stack full width */
.promises.accs{ grid-template-columns:1fr; gap:var(--s4); }

/* ============================================================
   HUBS
   ============================================================ */
.hubs__lead{ margin-bottom:var(--s8); }

.hubgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s5); }
.hub{
  border-radius:var(--r-lg); overflow:hidden;
  border:1px solid var(--line-ink);
  background:rgba(241,245,253,.03);
  display:grid; grid-template-rows:auto 1fr;
  will-change:transform;
  transition:transform .38s var(--spring), border-color .38s var(--spring);
}
.hub:hover{ transform:translateY(-5px); border-color:rgba(241,245,253,.3); }
.hub__img{ position:relative; aspect-ratio:16/10; overflow:hidden; }
.hub__img > a{ position:absolute; inset:0; z-index:0; }
.hub__img img{
  width:100%; height:100%; object-fit:cover;
  filter:grayscale(1) contrast(1.05);
  transition:transform .7s var(--spring-soft);
}
.hub:hover .hub__img img{ transform:scale(1.045); }
/* Monochrome at rest; on hover the photo folds into the hero's blue ink
   wash rather than taking the segment colours */
.hub__img::before{
  content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:var(--ink); mix-blend-mode:multiply; opacity:.26;
  transition:opacity .5s var(--spring-soft);
}
.hub:hover .hub__img::before{ opacity:.62; }
.hub__tint{
  position:absolute; inset:0; z-index:2;
  background:
    radial-gradient(1100px 700px at 88% 6%, rgba(95,173,251,.20) 0%, rgba(12,5,34,.26) 48%, rgba(12,5,34,.46) 100%),
    linear-gradient(180deg, rgba(12,5,34,.24) 0%, rgba(21,10,56,.44) 50%, rgba(21,10,56,.46) 100%);
  opacity:0;
  transition:opacity .5s var(--spring-soft);
  pointer-events:none;
}
.hub:hover .hub__tint{ opacity:1; }
.hub__img::after{
  content:''; position:absolute; inset:0; z-index:3; pointer-events:none;
  background:linear-gradient(to top, rgba(12,5,34,.30), rgba(12,5,34,0) 55%);
}
.hub__tag{
  position:absolute; z-index:4; pointer-events:none; left:var(--s5); top:var(--s5);
  padding:5px var(--s3); border-radius:var(--r-full);
  background:rgba(12,5,34,.6);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border:1px solid var(--line-ink);
}
.hub__tag.live{ color:var(--sky); }
.hub__tag.next{ color:var(--amber); }
.hub__body{ padding:var(--s6); display:grid; gap:var(--s3); align-content:start; }
.hub__body p{ color:var(--on-ink-faint); font-size:.875rem; line-height:1.55; }

/* ============================================================
   INSIGHTS
   ============================================================ */
.arts{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s5); }
.art{ display:grid; gap:var(--s5); align-content:start; will-change:transform; transition:transform .38s var(--spring); }
.art:hover{ transform:translateY(-4px); }
.art__img{ position:relative; border-radius:var(--r-lg); overflow:hidden; aspect-ratio:3/2; }
.art__img img{ width:100%; height:100%; object-fit:cover; transition:transform .7s var(--spring-soft); }
.art:hover .art__img img{ transform:scale(1.05); }
.art__img::before{
  content:''; position:absolute; inset:0; z-index:1;
  background:var(--ink); mix-blend-mode:multiply; opacity:.35;
}
.art__img::after{
  content:''; position:absolute; inset:0; z-index:2;
  background:linear-gradient(to top, rgba(12,5,34,.6), rgba(12,5,34,0) 58%);
}
.art__meta{ display:flex; gap:var(--s4); align-items:center; color:var(--on-ink-faint); }
.art__meta .cat{ color:var(--sky); }
.art h3{ transition:color .22s var(--spring); }
.art:hover h3{ color:var(--sky); }

/* ============================================================
   CONTACT
   ============================================================ */
.contact{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(var(--s8),7vw,var(--s10)); align-items:start; }
.contact__facts{ display:grid; gap:var(--s6); margin-top:var(--s8); }
.cfact{ display:grid; gap:var(--s2); padding-top:var(--s5); border-top:1px solid var(--line-ink); }
.cfact .tiny{ color:var(--on-ink-faint); }
.cfact a,.cfact p{ font-size:1.0625rem; font-weight:300; }
.cfact a{ transition:color .2s var(--spring); }
.cfact a:hover{ color:var(--sky); }

.form{ display:grid; gap:var(--s5); }
.field{ display:grid; gap:var(--s3); }
.field label{ font-size:.8125rem; font-weight:500; letter-spacing:.06em; text-transform:uppercase; color:var(--on-ink-faint); }
.field input,.field textarea,.field select{
  background:rgba(241,245,253,.045);
  border:1px solid var(--line-ink);
  border-radius:var(--r-md);
  padding:var(--s4);
  font-weight:300;
  transition:border-color .24s var(--spring), background-color .24s var(--spring);
}
.field input::placeholder,.field textarea::placeholder{ color:var(--on-ink-faint); }
.field input:hover,.field textarea:hover,.field select:hover{ border-color:rgba(241,245,253,.3); }
.field input:focus,.field textarea:focus,.field select:focus{
  outline:none; border-color:var(--sky); background:rgba(95,173,251,.07);
}
.field input:focus-visible,.field textarea:focus-visible,.field select:focus-visible{ outline:2px solid var(--sky); outline-offset:2px; }
.field textarea{ resize:vertical; min-height:110px; }
.field select{
  appearance:none; cursor:pointer;
  padding-right:var(--s8);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%235FADFB' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right var(--s4) center;
  background-size:12px 8px;
}
/* The native dropdown paints its own light background, so options
   must set their colours explicitly. Inheriting the page's light
   text here renders the list invisible. */
.field select option{ background-color:var(--surface); color:var(--ink); }

/* Custom select: the native <select> stays in the DOM as the form's
   source of truth and the no-JS fallback (visible by default). Once
   site.js confirms it can drive the widget, .js swaps the visible
   control for the button + listbox below, so the open panel can
   finally be styled instead of falling back to OS chrome. */
.dd{ position:relative; }
.dd__btn{
  display:none; width:100%; align-items:center; justify-content:space-between; gap:var(--s3);
  background:rgba(241,245,253,.045); border:1px solid var(--line-ink); border-radius:var(--r-md);
  padding:var(--s4); font:inherit; font-weight:300; text-align:left; color:var(--on-ink);
  cursor:pointer;
  transition:border-color .24s var(--spring), background-color .24s var(--spring);
}
.dd__btn:hover{ border-color:rgba(241,245,253,.3); }
.dd__btn:focus-visible{ outline:2px solid var(--sky); outline-offset:2px; }
.dd__btn[aria-expanded="true"]{ border-color:var(--sky); background:rgba(95,173,251,.07); }
.dd__val{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dd__chev{ flex:none; color:var(--sky); transition:transform .28s var(--spring); }
.dd__btn[aria-expanded="true"] .dd__chev{ transform:rotate(180deg); }

.dd__list{
  display:none; position:absolute; z-index:20; left:0; right:0; top:calc(100% + var(--s2));
  margin:0; padding:var(--s2); list-style:none;
  max-height:320px; overflow-y:auto;
  background:var(--ink-raised); border:1px solid rgba(95,173,251,.22); border-radius:var(--r-lg);
  box-shadow:var(--lift-ink);
  transform-origin:top center;
  opacity:0; transform:translateY(-6px) scale(.98); pointer-events:none;
  transition:opacity .2s var(--spring), transform .2s var(--spring);
}
.dd__list[data-open]{ opacity:1; transform:translateY(0) scale(1); pointer-events:auto; }
.dd__opt{
  display:flex; align-items:center; justify-content:space-between; gap:var(--s4);
  padding:var(--s3) var(--s4); border-radius:var(--r-sm);
  font-size:.9375rem; font-weight:300; color:var(--on-ink-muted); cursor:pointer;
  transition:background-color .16s var(--spring), color .16s var(--spring);
}
.dd__opt:hover,.dd__opt.is-active{ background:rgba(95,173,251,.12); color:var(--on-ink); }
.dd__opt[aria-selected="true"]{ color:var(--sky); font-weight:500; }
.dd__check{ flex:none; color:var(--sky); opacity:0; transform:scale(.6); transition:opacity .16s var(--spring), transform .16s var(--spring); }
.dd__opt[aria-selected="true"] .dd__check{ opacity:1; transform:scale(1); }

/* Only once .js proves the widget is wired up: show it and hand the
   native select off to accessibility-tree-only duty. */
.js .dd__btn{ display:flex; }
.js .dd__list{ display:block; }
.js .dd__native{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.form__row{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s5); }
.form__ok{
  display:none; gap:var(--s3); align-items:center;
  padding:var(--s4) var(--s5); border-radius:var(--r-md);
  background:rgba(95,173,251,.1); border:1px solid rgba(95,173,251,.34);
  color:var(--sky); font-size:.9375rem;
}
.form__ok.show{ display:flex; }

/* ============================================================
   FOOTER
   ============================================================ */
.foot{ background:var(--ink-deep); color:var(--on-ink); position:relative; z-index:2; }
.foot__in{
  max-width:var(--measure); margin-inline:auto;
  padding:var(--s9) var(--gutter) var(--s6);
}
.foot__top{
  display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:var(--s7);
  padding-bottom:var(--s8); border-bottom:1px solid var(--line-ink);
}
.foot__brand{ display:grid; gap:var(--s5); align-content:start; }
.foot__brand img{ height:30px; width:auto; }
.foot__brand p{ color:var(--on-ink-faint); font-size:.875rem; max-width:30ch; }
.foot__col{ display:grid; gap:var(--s4); align-content:start; }

.foot__col .tiny{ color:var(--on-ink-faint); margin-bottom:var(--s2); }
.foot__col a{ font-size:.875rem; color:var(--on-ink-muted); transition:color .2s var(--spring); width:fit-content; }
.foot__col a:hover{ color:var(--sky); }
.foot__bot{
  display:flex; flex-wrap:wrap; gap:var(--s5); justify-content:space-between;
  padding-top:var(--s6); color:var(--on-ink-faint); font-size:.8125rem;
}
.foot__bot nav{ display:flex; flex-wrap:wrap; gap:var(--s5); }
.foot__bot a:hover{ color:var(--sky); }

/* ============================================================
   MOTION — reveals and the load sequence.
   Only transform and opacity. Never transition-all.
   ============================================================ */
/* Hidden state is gated on .js so that content is never
   permanently invisible if scripting fails or is blocked. */
.js [data-reveal]{
  opacity:0;
  transform:translateY(22px);
  transition:opacity .78s var(--spring), transform .78s var(--spring);
  transition-delay:var(--d,0ms);
}
.js [data-reveal].in{ opacity:1; transform:none; }

/* Hero load sequence, orchestrated rather than scattered.
   Driven by a CSS animation with fill-mode both, so the settled
   state is guaranteed without waiting on any script. */
@keyframes seq-rise{
  from{ opacity:0; transform:translateY(18px); }
  to{ opacity:1; transform:none; }
}
.seq{
  animation:seq-rise .9s var(--spring) both;
  animation-delay:var(--d,0ms);
}
.still .seq{ animation:none; }

/* ============================================================
   TEAM PAGE
   ============================================================ */
.pagehead{
  position:relative;
  padding-top:clamp(150px, 20vh, 220px);
  /* Balances the tall top padding that clears the fixed nav, so the
     content sits optically centred in the band rather than low in it. */
  padding-bottom:clamp(var(--s8), 15vh, 170px);
  background:url('Brand_Assets/Backgrounds/pagehead.jpg') center 40% / cover no-repeat;
}
/* Same treatment as the home hero's key visual: an ink wash to fold
   the photo into the brand, then a porthole gradient that sinks to
   solid ink everywhere the copy sits. */
.pagehead::before{
  content:''; position:absolute; inset:0; z-index:1;
  background:var(--ink); mix-blend-mode:multiply; opacity:.6;
}
.pagehead::after{
  content:''; position:absolute; inset:0; z-index:1;
  background:
    radial-gradient(1100px 700px at 88% 6%, transparent 0%, rgba(12,5,34,.4) 48%, rgba(12,5,34,.88) 100%),
    linear-gradient(180deg, rgba(12,5,34,.34) 0%, rgba(12,5,34,.62) 46%, var(--ink-deep) 92%);
}
.pagehead__grid{
  position:relative; z-index:2;
  display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);
  gap:clamp(var(--s7), 6vw, var(--s10)); align-items:center;
}
.pagehead .display{ max-width:18ch; }
.pagehead__aside{
  display:grid; gap:var(--s6);
  padding-top:var(--s5);
}
.pagehead__stat{ display:grid; gap:var(--s2); }
.pagehead__stat .odo{
  font-weight:700; font-size:clamp(1.75rem,2.6vw,2.375rem);
  line-height:1; letter-spacing:-.03em;
}
.pagehead__stat .tiny{ color:var(--on-ink-faint); }

/* ============================================================
   HISTORY TIMELINE
   Four firms converge into one. The drawing is authored at roughly
   the width it renders at, so a user unit is about a pixel and the
   type below is the same scale used everywhere else rather than a
   scaled up copy of it.
   ============================================================ */
.history-timeline{
  display:block; width:100%; height:auto;
  margin-bottom:clamp(var(--s8), 6vw, var(--s9));
}

/* Two firms merged and two were acquired. The dash already carries that
   split, so colour separates them by one step of the same ink ramp. The
   segment accents stay out of it: sky, coral and amber already mean
   corporate, wealth and funds on this site. */
.strand-merge{ stroke:var(--on-paper-muted); }
.strand-acq{ stroke:var(--on-paper-faint); }
.node-merge{ fill:var(--on-paper-muted); }
.node-acq{ fill:var(--on-paper-faint); }

.trunk{ stroke:var(--ink); }
.node-join{ fill:var(--ink); }

/* Two moments get the same marker: where the brand is formed, and where the
   line ends today, both marked the way the world map marks an office that is
   open. Nothing on the line between them is coloured. */
.node-now{ fill:var(--sky); }
/* fill-opacity, not opacity: the reveal below animates opacity, and the
   two would fight over the same property. */
.node-halo{ fill:var(--sky); fill-opacity:.16; }

/* Strands pass under several labels at these coordinates, so each label
   is knocked out of whatever crosses it rather than moved off the line. */
.tl-name,
.tl-year,
.tl-event{
  paint-order:stroke fill;
  stroke:var(--paper); stroke-width:5px; stroke-linejoin:round;
}
.tl-name{
  font-size:20px; font-weight:400; letter-spacing:-.017em;
  fill:var(--on-paper);
}
/* The wordmark and the FD mark are drawn in currentColor so they take the
   ink of the ground they sit on, the way white does in the logo file. The
   three accent dots keep the hexes the brand gives them. */
.tl-brand{ color:var(--on-paper); }
/* Founding years and junctions share the caption treatment used for every
   other small label on the site. */
.tl-year,
.tl-event{
  font-size:11px; font-weight:500; letter-spacing:.14em;
  text-transform:uppercase;
}
.tl-year{ fill:var(--on-paper-faint); }
.tl-event{ fill:var(--on-paper-muted); }

/* The three figures, set exactly like the hero figures on the home page,
   with the ink steps swapped for their light ground equivalents. */
.tl-figures{
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr));
  gap:clamp(var(--s6), 4vw, var(--s8));
  padding-top:clamp(var(--s6), 3vw, var(--s7));
  border-top:1px solid var(--line-paper);
}
.tl-figure{ display:grid; gap:var(--s4); align-content:start; }
.tl-figure__n{
  font-weight:300;
  font-size:clamp(2.25rem, 3.6vw, 3.25rem);
  line-height:.95;
  letter-spacing:-.045em;
  color:var(--on-paper);
}
/* The suffix is a qualifier, not part of the figure. Sky is too light to
   sit on paper, so it takes the darker cut of the same hue. */
.tl-figure__n .suffix{
  color:var(--sky-ink);
  font-weight:400;
  font-size:.52em;
  margin-left:.06em;
  letter-spacing:0;
}
.tl-figure__l{
  color:var(--on-paper-faint);
  font-size:.6875rem; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase;
  line-height:1.45;
  max-width:24ch;
}

/* The portrait diagram takes over below 768. It shares every class with the
   wide one, so the palette, type and reveal below apply to both. */
.history-timeline--portrait{ display:none; }


/* Reveal ----------------------------------------------------
   The diagram explains a sequence, so it is drawn rather than faded in:
   one steady left to right wipe over the strands and trunk, with every
   label and node fading in as the wipe reaches its own x. Firms surface
   in founding order, junctions in the order the deals happened. Linear
   on the wipe because a pen moves at a constant speed; the fades ease
   out, since they are elements arriving. */
.js .history-timeline[data-reveal]{
  /* Carries .in for the sequence below; it does not move itself. */
  opacity:1; transform:none; transition:none;
}
.js .tl-draw{ clip-path:inset(0 100% 0 0); }
.history-timeline.in .tl-draw{
  clip-path:inset(0 0 0 0);
  transition:clip-path 1300ms linear;
}
.js .tl-fade{ opacity:0; }
.history-timeline.in .tl-fade{
  opacity:1;
  transition:opacity .5s var(--ease-out-strong);
  transition-delay:var(--d,0ms);
}

/* Headless capture settles everything, so the sequence has to be over. */
.still .tl-draw{ clip-path:inset(0 0 0 0) !important; transition:none !important; }
.still .tl-fade{ opacity:1 !important; transition:none !important; }

/* Reduced motion: the drawing stops travelling and the diagram simply
   arrives. The global block already strips the wipe, so the end state is
   declared here instead. */
@media (prefers-reduced-motion: reduce){
  .js .tl-draw{ clip-path:none; }
  .history-timeline.in .tl-fade{ transition-delay:0ms; }
}
@media (max-width:767px){
  /* Landscape out, portrait in. */
  .history-timeline{ display:none; }
  .history-timeline--portrait{ display:block; max-width:420px; }

  /* The wipe follows the diagram: the wide one is drawn left to right,
     this one top to bottom, in the direction the trunk runs. */
  .js .history-timeline--portrait .tl-draw{ clip-path:inset(0 0 100% 0); }
  .history-timeline--portrait.in .tl-draw{ clip-path:inset(0 0 0 0); }

  /* Figure beside its label rather than above it: three short rows read
     more evenly on a narrow column than three tall stacks. The minimum
     width keeps the labels in one column when a suffix widens a figure.
     The group is sized to its content and centred, so it sits under the
     diagram rather than hard against the left gutter, and no rule is
     needed to separate it. */
  .tl-figures{
    grid-template-columns:1fr;
    gap:var(--s5);
    width:fit-content;
    margin-inline:auto;
    border-top:0;
    padding-top:0;
  }
  .tl-figure{
    grid-template-columns:auto 1fr;
    align-items:baseline; gap:var(--s5);
  }
  .tl-figure__n{ min-width:1.8em; }
  .tl-figure__l{ max-width:none; }
}
/* Hub grouping */
.teamgroup + .teamgroup{ margin-top:clamp(var(--s8), 7vw, var(--s10)); }
.teamgroup__head{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:var(--s4);
  padding-bottom:var(--s5); margin-bottom:var(--s7);
  border-bottom:1px solid var(--line-paper);
}
.teamgroup__head .h3{ margin-right:auto; }

.people{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:var(--s6) var(--s5);
}
/* Ends the partners row so the heads start on one of their own. Zero height:
   the grid row gap above and below it is what makes the break read. */
.people__break{ grid-column:1 / -1; }
.person{
  display:grid; gap:var(--s4); align-content:start;
  transition:transform 200ms var(--ease-out-strong);
}
.person__img{
  position:relative; overflow:hidden;
  border-radius:var(--r-lg);
  aspect-ratio:3/4;
  background:rgba(21,10,56,.06);
  box-shadow:var(--lift-1);
}
.person__img img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform 450ms var(--ease-out-strong);
}

/* Hover belongs to the photograph. Scale lives here and nowhere else,
   so it never has to share a transition with the entrance. */
@media (hover:hover) and (pointer:fine){
  .person:hover{ transform:translateY(-4px); }
  .person:hover .person__img img{ transform:scale(1.045); }
}
.person:focus-within{ transform:translateY(-4px); }
.person:focus-within .person__img img{ transform:scale(1.045); }

@media (prefers-reduced-motion: reduce){
  .person:hover .person__img img,
  .person:focus-within .person__img img{ transform:none; }
}
.person__body{ display:grid; gap:var(--s2); }
.person__name{
  font-weight:500; font-size:1rem; line-height:1.3; letter-spacing:-.012em;
}
.person__title{ color:var(--on-paper-muted); font-size:.875rem; }
.person__hub{
  display:flex; align-items:center; gap:var(--s2);
  color:var(--on-paper-faint); font-size:.8125rem;
}
.person__hub i{ width:6px; height:6px; border-radius:var(--r-full); background:var(--c,var(--sky)); flex:none; }

/* LinkedIn: a real target, sized for comfortable clicking */
.person__li{
  display:inline-flex; align-items:center; gap:var(--s2);
  margin-top:var(--s1); width:fit-content;
  font-size:.8125rem; font-weight:500; color:var(--on-paper-muted);
  padding:var(--s1) var(--s2); margin-left:calc(var(--s2) * -1);
  border-radius:var(--r-md);
  transition:color .22s var(--spring), background-color .22s var(--spring);
}
.person__li svg{ flex:none; }
.person__li:hover{ color:var(--ink); background:rgba(95,173,251,.16); }
.person__li:active{ background:rgba(95,173,251,.28); }

/* Stands in for a portrait that has not been shot yet, or one the data
   claims exists but that is not on disk. It carries no ground of its own,
   so it inherits whatever .person__img is given in the act it sits in and
   reads as an empty frame rather than a hole punched in the grid. */
.person__initials{
  width:100%; height:100%; display:grid; place-items:center;
  color:rgba(21,10,56,.42);
  font-size:clamp(1.5rem, 3.2vw, 2rem); font-weight:500; letter-spacing:.06em;
}

/* Built now, revealed when an address exists. Nothing in the data carries
   one yet, so every card renders this hidden. */
.person__email{
  font-size:.8125rem; color:var(--on-paper-muted);
  width:fit-content;
}
.person__email:hover{ color:var(--ink); }

/* Placeholder note above a grid awaiting real content */
.slotnote{
  display:flex; align-items:center; gap:var(--s3);
  padding:var(--s4) var(--s5); margin-bottom:var(--s7);
  border:1px dashed var(--line-paper); border-radius:var(--r-md);
  color:var(--on-paper-faint); font-size:.8125rem;
}

/* Careers */
.join{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(var(--s7), 6vw, var(--s10)); align-items:start;
}
.join__list{ display:grid; gap:var(--s5); padding-top:var(--s2); }
.join__list li{
  display:grid; grid-template-columns:5px 1fr; gap:var(--s4);
  font-size:.9375rem; line-height:1.55; color:var(--on-ink-muted);
}
.join__list li::before{
  content:''; width:5px; height:5px; border-radius:var(--r-full);
  margin-top:.42em;
  background:var(--sky);
}
.join__cta{ display:flex; flex-wrap:wrap; gap:var(--s4); margin-top:var(--s2); }

/* Closing call to action */
.cta{ display:grid; gap:var(--s6); justify-items:start; max-width:760px; }

@media (max-width:1080px){
  .people{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .pagehead__grid{ grid-template-columns:1fr; gap:var(--s7); align-items:start; }
}
@media (max-width:860px){
  .people{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .join{ grid-template-columns:1fr; gap:var(--s7); }
}
@media (max-width:560px){
  .people{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s5) var(--s4); }
  .person__role{ font-size:.875rem; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1080px){
  .pos{ grid-template-columns:1fr; gap:var(--s7); }
  .arts{ grid-template-columns:1fr; }
  .hubgrid{ grid-template-columns:1fr 1fr; }
  .promises{ grid-template-columns:1fr; }
  .contact{ grid-template-columns:1fr; }
  .contact__facts{ margin-top:0; }
  .foot__top{ grid-template-columns:1fr 1fr; }
  .inst__readouts{ grid-template-columns:1fr 1fr; }
  .inst__ro:nth-child(2){ border-right:0; }
  .inst__ro:nth-child(1),.inst__ro:nth-child(2){ border-bottom:1px solid var(--glass-line); }
  .constants{ grid-template-columns:1fr; }
  .constants__i{ border-right:0; border-bottom:1px solid var(--glass-line); }
  .constants__i:last-of-type{ border-bottom:0; }
}
@media (max-width:860px){
  .facts{ grid-template-columns:1fr 1fr; gap:var(--s6) var(--s5); }
  .hubgrid{ grid-template-columns:1fr; }
  .svc{ grid-template-columns:auto 1fr; gap:var(--s4) var(--s5); }
  .svc__c{ grid-column:2; }
  .form__row{ grid-template-columns:1fr; }
  .foot__top{ grid-template-columns:1fr; gap:var(--s6); }
  .inst__readouts{ grid-template-columns:1fr 1fr; }
  .inst__ro{ padding:var(--s6) var(--s5); }
  .inst__track-area{ padding:var(--s6) var(--s5) var(--s5); }
}
@media (max-width:560px){
  /* The panel is the point of the section, so it has to be readable
     in one view rather than scrolled through in pieces. Two columns
     of figures, tighter padding, and the constants on a single line
     each. */
  .inst__readouts{ grid-template-columns:1fr 1fr; }
  .inst__ro{ padding:var(--s4) var(--s4); gap:var(--s1); }
  .inst__ro:nth-child(odd){ border-right:1px solid var(--glass-line); }
  .inst__ro:nth-child(even){ border-right:0; }
  .inst__ro:nth-child(1),.inst__ro:nth-child(2){ border-bottom:1px solid var(--glass-line); }
  .inst__ro:nth-child(3),.inst__ro:nth-child(4){ border-bottom:0; }
  .inst__ro .odo{ font-size:1.75rem; }

  .inst__track-area{ padding:var(--s5) var(--s4); }
  .inst__track-head{ margin-bottom:var(--s3); }
  .track{ height:36px; }
  .track__rail,.track__fill{ top:17px; }
  .track__ticks{ top:12px; }
  .track__handle{ top:2px; }
  .track__scale{ font-size:.6875rem; margin-top:var(--s2); }

  /* Three constants across one row. Their descriptions are
     elaboration; the figure and its label carry the point, and
     stacking all three with body copy cost 420px on its own. */
  .constants{ grid-template-columns:repeat(3,1fr); }
  .constants__i{
    flex-direction:column; align-items:flex-start; gap:var(--s1);
    padding:var(--s4) var(--s3);
    border-right:1px solid var(--glass-line); border-bottom:0;
  }
  .constants__i:nth-of-type(3){ border-right:0; }
  .constants__n{ font-size:1.375rem; min-width:0; }
  .constants__t .h4{ font-size:.75rem; line-height:1.3; margin-bottom:0; }
  .constants__t p:not(.h4){ display:none; }

  .hero__cta .btn{ width:100%; justify-content:center; }
}

/* ============================================================
   ACCESSIBILITY PREFERENCES
   Reduced motion means a gentler equivalent, not no feedback.
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.16s !important;
    transition-property:opacity, background-color, border-color, color !important;
  }
  [data-reveal],.seq{ transform:none !important; }
  .hub__img img,.art__img img{ transition:none !important; }
  .hub:hover,.art:hover,.btn:hover{ transform:none !important; }
}
@media (prefers-reduced-transparency: reduce){
  .nav,.nav.scrolled{ background:var(--ink-deep); backdrop-filter:none; -webkit-backdrop-filter:none; }
  .hub__tag{ background:var(--ink-deep); backdrop-filter:none; -webkit-backdrop-filter:none; }
  /* Frostier and solid rather than translucent */
  .inst__track-area{ background:rgba(255,255,255,.05); }
  .grain{ display:none; }
}
@media (prefers-contrast: more){
  :root{
    --on-ink-muted:rgba(241,245,253,.86); --on-ink-faint:rgba(241,245,253,.7);
    --line-ink:rgba(241,245,253,.4);
    --on-paper-muted:rgba(21,10,56,.86); --on-paper-faint:rgba(21,10,56,.7);
    --line-paper:rgba(21,10,56,.4);
  }
  .grain{ display:none; }
}


/* ============================================================
   OFFICE NETWORK MAP
   Hub and spoke: Luxembourg at the centre, offices around it.
   The wires draw outward on reveal, then the offices arrive.
   ============================================================ */
.netmap{
  position:relative;
  isolation:isolate;
  width:100%;
  aspect-ratio:1200/560;
  margin-top:0;
}
/* A soft bloom centred on Luxembourg, so the network sits in
   atmosphere rather than on a flat field. */
.netmap::before{
  content:''; position:absolute; inset:-6% -4%; z-index:0; pointer-events:none;
  background:
    radial-gradient(42% 50% at 50% 48%, rgba(95,173,251,.15), transparent 70%),
    radial-gradient(26% 32% at 80% 64%, rgba(253,180,95,.07), transparent 72%);
  -webkit-mask-image:radial-gradient(70% 64% at 50% 50%, #000 50%, transparent 86%);
  mask-image:radial-gradient(70% 64% at 50% 50%, #000 50%, transparent 86%);
}
.netmap__wires{
  position:absolute; inset:0;
  width:100%; height:100%;
  overflow:visible;
}
.netmap__wires line{
  stroke:rgba(241,245,253,.20);
  stroke-width:1;
  vector-effect:non-scaling-stroke;
}
.netmap__spokes line.is-live{ stroke:rgba(95,173,251,.42); }
.netmap__ring line{
  stroke:rgba(241,245,253,.13);
  stroke-dasharray:3 6;
}

/* World map variant --------------------------------------------
   The canvas draws the land, the routes and the markers, including
   the office names. The nodes on top keep their hover cards but give
   up their own dot and label, so nothing is drawn twice. */
.netmap--world{
  aspect-ratio:auto;          /* height comes from the canvas */
  isolation:isolate;
}
.netmap__canvas{
  display:block; width:100%;
  aspect-ratio:360/131;       /* reserves height before the script sizes it */
  position:relative; z-index:1;
}
.netmap__labels{
  position:absolute; inset:0; z-index:2;
  pointer-events:none;
}
.netmap__labels .mlabel{
  position:absolute; top:0; left:0;
  font-size:.6875rem; font-weight:500; line-height:1;
  letter-spacing:.055em; text-transform:uppercase;
  color:var(--on-ink-faint);
  white-space:nowrap;
  opacity:0;
  transition:opacity .22s var(--ease-out-strong);
}
.netmap__labels .mlabel.is-open{ color:var(--on-ink-muted); }

/* The bloom follows the offices rather than the middle of the ocean */
.netmap--world::before{
  inset:0;
  background:
    radial-gradient(38% 54% at 46% 26%, rgba(95,173,251,.16), transparent 70%),
    radial-gradient(26% 34% at 62% 50%, rgba(255,92,74,.06), transparent 72%);
  -webkit-mask-image:none;
  mask-image:none;
}

/* Below 900 the map gives way to the office list, exactly as the hub
   and spoke diagram did, so the canvas and its labels come off and the
   nodes go back to being full rows. Every override that turns a node
   into a bare marker therefore has to stay above that breakpoint. */
@media (max-width:900px){
  .netmap__canvas,
  .netmap__labels{ display:none; }
  .netmap--world::before{ content:none; }
}

@media (min-width:901px){
  /* Nodes become hit areas and card anchors only */
  .netmap--world .netnode{
    --anchor:0px;
    --hit:38px;
    transform:translate(-50%, -50%) translate(var(--dx), var(--dy));
    z-index:3;
  }
  .netmap--world .netnode__hit{
    display:block; width:var(--hit); height:var(--hit); padding:0;
    border-radius:var(--r-full);
  }

  /* Luxembourg, Paris and Germany are genuinely about thirteen pixels
     apart at this scale, so full size targets would sit on top of each
     other and the later node in the source would swallow the earlier
     one's hover. They get smaller targets, nudged just far enough
     apart to stop overlapping while staying on their own marker. */
  .netmap--world .netnode[data-office="paris"]{ --dx:-16px; --hit:22px; }
  .netmap--world .netnode[data-office="luxembourg"]{ --hit:24px; }
  .netmap--world .netnode[data-office="germany"]{ --dx:16px; --hit:22px; }

  .netmap--world .netnode__dot,
  .netmap--world .netnode__name,
  .netmap--world .netnode__role,
  .netmap--world .netnode__brackets{ display:none; }
  .netmap--world .netnode__hit:hover{ transform:none; }
  .netmap--world .netnode__hit:active{ transform:scale(.94); }

  /* The cards hang from the marker, not from a label below it */
  .netmap--world .netnode__card{ top:calc(100% + 4px); }
  .netmap--world .netnode--up .netnode__card{ bottom:calc(100% + 4px); }
}

/* Nodes ---------------------------------------------------- */
.netnode{
  --anchor:18.5px;          /* 12px padding + half of a 13px dot */
  --dx:0px; --dy:0px;
  position:absolute;
  left:var(--x); top:var(--y);
  transform:translate(-50%, calc(var(--anchor) * -1)) translate(var(--dx), var(--dy));
}
.netnode--core{ --anchor:21.5px; }   /* the core dot is 19px */

.netnode__hit{
  position:relative;
  display:grid; justify-items:center; gap:var(--s2);
  background:none; border:0; padding:var(--s3);
  text-decoration:none; color:inherit;
  cursor:pointer;
  border-radius:var(--r-md);
  transition:transform .3s var(--spring);
}
.netnode__hit:hover{ transform:translateY(-2px); }
.netnode__hit:active{ transform:translateY(0) scale(.97); }

.netnode__dot{
  position:relative;
  width:13px; height:13px; border-radius:var(--r-full);
  background:var(--amber);
  transition:transform .32s var(--spring);
}
/* Soft bloom, so the dots read as lit rather than as flat discs */
.netnode__dot::before{
  content:''; position:absolute; inset:-12px; border-radius:var(--r-full);
  background:radial-gradient(circle, rgba(253,180,95,.40), transparent 66%);
  pointer-events:none;
}
.netnode--open .netnode__dot::before{
  background:radial-gradient(circle, rgba(95,173,251,.50), transparent 66%);
}

.netnode--core .netnode__dot{
  width:19px; height:19px;
  background:var(--sky);
}
.netnode--core .netnode__dot::before{
  inset:-22px;
  background:radial-gradient(circle, rgba(95,173,251,.55), transparent 64%);
}
/* The heart of the network, breathing slowly */
.netnode--core .netnode__dot::after{
  content:''; position:absolute; inset:-7px; border-radius:var(--r-full);
  border:1px solid rgba(95,173,251,.55);
  animation:core-ping 5.6s cubic-bezier(.22,1,.36,1) infinite;
  pointer-events:none;
}
@keyframes core-ping{
  0%   { transform:scale(.72); opacity:.7; }
  72%  { transform:scale(2.5); opacity:0; }
  100% { transform:scale(2.5); opacity:0; }
}

.netnode--open .netnode__dot{ background:var(--sky); }
.netnode__hit:hover .netnode__dot{ transform:scale(1.22); }

.netnode__hit:focus-visible{ outline:2px solid var(--sky); outline-offset:2px; }

.netnode__name{
  font-size:.6875rem; font-weight:500; letter-spacing:.14em;
  text-transform:uppercase; color:var(--on-ink);
  white-space:nowrap;
}
.netnode__role{
  font-size:.625rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--on-ink-faint); white-space:nowrap; margin-top:-4px;
}

/* Corner brackets on the centre, the way the reference frames its core */
.netnode__brackets{
  position:absolute; left:50%; top:calc(var(--s3) + 10px);
  width:54px; height:54px; margin-left:-27px; margin-top:-27px;
  pointer-events:none;
  background:
    linear-gradient(var(--sky),var(--sky)) 0 0/12px 1px no-repeat,
    linear-gradient(var(--sky),var(--sky)) 0 0/1px 12px no-repeat,
    linear-gradient(var(--sky),var(--sky)) 100% 0/12px 1px no-repeat,
    linear-gradient(var(--sky),var(--sky)) 100% 0/1px 12px no-repeat,
    linear-gradient(var(--sky),var(--sky)) 0 100%/12px 1px no-repeat,
    linear-gradient(var(--sky),var(--sky)) 0 100%/1px 12px no-repeat,
    linear-gradient(var(--sky),var(--sky)) 100% 100%/12px 1px no-repeat,
    linear-gradient(var(--sky),var(--sky)) 100% 100%/1px 12px no-repeat;
  opacity:.5;
  transition:opacity .3s var(--spring), transform .4s var(--spring);
}
.netnode--core .netnode__hit:hover .netnode__brackets{ opacity:.9; transform:scale(1.08); }

/* Hover card ----------------------------------------------- */
.netnode__card{
  position:absolute; top:calc(100% + 10px); left:50%;
  width:250px; margin-left:-125px;
  padding:var(--s5);
  border-radius:var(--r-lg);
  border:1px solid var(--glass-line-edge);
  border-top-color:rgba(255,255,255,.5);
  background:linear-gradient(155deg, rgba(255,255,255,.16), rgba(255,255,255,.07));
  backdrop-filter:blur(22px) saturate(160%) brightness(1.1);
  -webkit-backdrop-filter:blur(22px) saturate(160%) brightness(1.1);
  box-shadow:0 20px 50px -16px rgba(4,1,14,.7);
  display:grid; gap:var(--s2);
  text-align:left;
  opacity:0; visibility:hidden;
  transform:translateY(-6px) scale(.97);
  transform-origin:top center;
  transition:opacity .28s var(--spring), transform .28s var(--spring), visibility .28s;
  z-index:5;
}
.netnode--l .netnode__card{ left:auto; right:50%; margin-left:0; margin-right:-24px; transform-origin:top right; }
.netnode--r .netnode__card{ left:50%; margin-left:-24px; transform-origin:top left; }
.netnode:hover .netnode__card,
.netnode:focus-within .netnode__card{
  opacity:1; visibility:visible; transform:translateY(0) scale(1);
}
.netnode--up .netnode__card{
  top:auto; bottom:calc(100% - var(--anchor) + 20px);
  transform-origin:bottom center;
  transform:translateY(6px) scale(.97);
}
.netnode--up.netnode--l .netnode__card{ transform-origin:bottom right; }
.netnode--up.netnode--r .netnode__card{ transform-origin:bottom left; }
.netnode--up:hover .netnode__card,
.netnode--up:focus-within .netnode__card{ transform:translateY(0) scale(1); }
.netnode__place{
  font-size:.9375rem; font-weight:600; letter-spacing:-.01em; color:var(--on-ink);
}
.netnode__status{
  font-size:.625rem; font-weight:500; letter-spacing:.14em; text-transform:uppercase;
}
.netnode__status.is-open{ color:var(--sky); }
.netnode__status.is-next{ color:var(--amber); }
.netnode__stat{ font-size:1.5rem; font-weight:300; letter-spacing:-.02em; line-height:1.1; color:var(--on-ink); }
.netnode__stat b{ font-weight:700; }
.netnode__note{ font-size:.8125rem; line-height:1.5; color:var(--on-ink-faint); }
/* Dubai and Mauritius are partner firms, so their markers lead off site.
   The card names the destination rather than letting the click surprise. */
.netnode__ext{
  margin-top:var(--s2); font-size:.75rem; letter-spacing:.02em;
  color:var(--sky);
}


/* Unfolding ------------------------------------------------- */
.js .netmap__spokes line{ stroke-dashoffset:var(--len,600); }
.js .netmap__ring line{ opacity:0; }
.js .netnode{ opacity:0; }

.netmap.in .netmap__spokes line{
  transition:stroke-dashoffset .85s var(--spring);
  transition-delay:calc(var(--i) * 90ms);
  stroke-dashoffset:0;
}
.netmap.in .netmap__ring line{
  opacity:1;
  transition:opacity 1.2s var(--spring);
  transition-delay:640ms;
}
.netmap.in .netnode{
  opacity:1;
  transition:opacity .55s var(--spring);
  transition-delay:calc(120ms + var(--i) * 95ms);
}

/* Offices, phone form -------------------------------------- */
.offices-mobile{ display:none; }

.officegroup__name{
  color:var(--on-ink-faint);
  padding-bottom:var(--s3);
  border-bottom:1px solid var(--line-ink);
}
.officegroup__list{
  list-style:none; margin:var(--s5) 0 0; padding:0;
  display:grid; gap:var(--s6);
}

.office{
  display:grid; grid-template-columns:auto 1fr; gap:var(--s4);
  align-items:start;
}
.office__node{
  width:11px; height:11px; margin-top:6px; border-radius:var(--r-full);
  background:var(--on-ink-faint); flex:none;
}
/* The head office is marked the way the map marks it: sky, with the same
   soft ring around it. */
.office--hq .office__node{
  background:var(--sky);
  box-shadow:0 0 0 5px rgba(95,173,251,.18);
}

.office__body{ display:grid; gap:var(--s2); }
.office__name{
  font-size:1.125rem; font-weight:500; letter-spacing:-.015em;
  color:var(--on-ink);
}
.office__role{
  font-size:.6875rem; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--sky);
}
.office__note{
  font-size:.875rem; line-height:1.55; color:var(--on-ink-muted);
  max-width:38ch;
}
.office__link{
  display:inline-flex; align-items:center; gap:var(--s2);
  width:fit-content; margin-top:var(--s1);
  font-size:.8125rem; font-weight:500; color:var(--sky);
  padding:var(--s2) var(--s3); margin-left:calc(var(--s3) * -1);
  border-radius:var(--r-md);
  transition:background-color .22s var(--spring), transform .16s var(--ease-out-strong);
}
/* Pressed, not hovered: this only ever exists on a touch screen. */
.office__link:active{
  background:rgba(95,173,251,.16);
  transform:scale(.97);
}

/* Placed after the rules above so it actually overrides the default
   display:none rather than being cancelled by it. */
@media (max-width:900px){
  /* The map gives way to this list. Shrinking the map would put seven
     markers inside a few hundred pixels and turn the routes into noise,
     so the phone gets the same information down a column instead of
     across a picture. */
  .netmap{ display:none; }
  .offices-mobile{ display:grid; gap:var(--s8); margin-top:var(--s7); }
}



/* ============================================================
   SERVICE ACCORDIONS
   Built on <details> so the areas still open and close with no
   scripting; the height animation is progressive enhancement.
   ============================================================ */
.accs{ position:relative; display:grid; gap:var(--s4); }
.acc{
  position:relative;
  border-radius:var(--r-lg);
  border:1px solid rgba(255,255,255,.75);
  border-top-color:rgba(255,255,255,.95);
  background:linear-gradient(155deg,
    rgba(255,255,255,.78),
    rgba(255,255,255,.58) 55%,
    rgba(255,255,255,.70));
  backdrop-filter:blur(22px) saturate(180%);
  -webkit-backdrop-filter:blur(22px) saturate(180%);
  box-shadow:
    0 1px 2px rgba(21,10,56,.05),
    0 18px 44px -14px rgba(21,10,56,.20),
    inset 0 1px 0 rgba(255,255,255,.9);
  overflow:hidden;
  transition:box-shadow .38s var(--spring), border-color .38s var(--spring);
}
.acc[open]{
  border-color:rgba(255,255,255,1);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.55),
    0 22px 54px -16px rgba(21,10,56,.24),
    inset 0 1px 0 rgba(255,255,255,1);
}

.acc__head{
  display:flex; align-items:center; gap:var(--s5);
  padding:var(--s6);
  cursor:pointer;
  list-style:none;
  transition:background-color .3s var(--spring);
}
.acc__head::-webkit-details-marker{ display:none; }
.acc__head:hover{ background:rgba(255,255,255,.4); }
.acc__head:focus-visible{ outline:2px solid var(--sky); outline-offset:-3px; }
.acc__title{
  margin-right:auto;
  font-weight:400;
  font-size:clamp(1.125rem, 1.7vw, 1.375rem);
  letter-spacing:-.017em;
  color:var(--on-paper);
}
.acc__meta{ color:var(--on-paper-faint); flex:none; }

/* Plus that becomes a minus */
.acc__icon{
  position:relative; flex:none;
  width:22px; height:22px; border-radius:var(--r-full);
  border:1px solid var(--line-paper);
  transition:transform .4s var(--spring), border-color .3s var(--spring);
}
.acc__icon::before,
.acc__icon::after{
  content:''; position:absolute; left:50%; top:50%;
  width:9px; height:1.5px; margin:-.75px 0 0 -4.5px;
  border-radius:1px; background:var(--on-paper);
  transition:transform .4s var(--spring), opacity .3s var(--spring);
}
.acc__icon::after{ transform:rotate(90deg); }
.acc[open] .acc__icon{ transform:rotate(180deg); border-color:rgba(22,104,201,.4); }
.acc[open] .acc__icon::after{ opacity:0; transform:rotate(0deg); }

/* Height animation. The wrapper is the animated grid row; the inner
   div is what actually gets clipped. */
.acc__body{
  display:grid; grid-template-rows:1fr;
  transition:grid-template-rows .45s var(--spring);
}
.js .acc__body{ grid-template-rows:0fr; }
.js .acc[open] .acc__body{ grid-template-rows:1fr; }
.acc__inner{
  overflow:hidden;
  padding:0 var(--s6);
  transition:padding-bottom .45s var(--spring);
}
.acc[open] .acc__inner{ padding-bottom:var(--s6); }

.acc__lead{
  color:var(--on-paper); font-size:1rem; line-height:1.5;
  font-weight:300; letter-spacing:-.01em;
  padding-bottom:var(--s5);
  border-bottom:1px solid var(--line-paper);
}
.acc__item{ padding-top:var(--s5); }
.acc__item + .acc__item{
  margin-top:var(--s5);
  border-top:1px solid var(--line-paper);
}
.acc__name{
  font-weight:500; font-size:.9375rem; letter-spacing:.02em;
  text-transform:uppercase; color:var(--on-paper);
  margin-bottom:var(--s4);
}
.acc__item ul{ display:grid; gap:var(--s4); }
.acc__item li{
  display:grid; grid-template-columns:5px 1fr; gap:var(--s4);
  font-size:.9375rem; line-height:1.55; color:var(--on-paper-muted);
}
.acc__item li::before{
  content:''; width:5px; height:5px; border-radius:var(--r-full);
  margin-top:.42em;
  background:var(--sky);
}

@media (max-width:560px){
  .acc__head{ padding:var(--s5); gap:var(--s4); }
  .acc__inner{ padding:0 var(--s5); }
  .acc[open] .acc__inner{ padding-bottom:var(--s5); }
  .acc__meta{ display:none; }
}

/* ============================================================
   SERVICE AREAS, in the page hero
   Named as capsules so each one reads as a discrete area rather
   than as a run of words separated by punctuation.
   ============================================================ */
.areas{
  display:flex; flex-wrap:wrap;
  gap:var(--s3);
  margin-top:clamp(var(--s6), 4vw, var(--s7));
}
.areas li{
  padding:var(--s3) var(--s5);
  border:1px solid var(--glass-line-edge);
  border-radius:var(--r-full);
  background:rgba(255,255,255,.07);
  backdrop-filter:blur(14px) saturate(150%);
  -webkit-backdrop-filter:blur(14px) saturate(150%);
  font-size:clamp(.875rem, 1.05vw, .9375rem);
  font-weight:400; letter-spacing:-.006em; line-height:1.3;
  color:var(--on-ink);
  white-space:nowrap;
}
.areas__note{ margin-top:var(--s5); color:var(--on-ink-faint); }

@media (max-width:560px){
  /* Capsules wrap on their own, so no stacking rules are needed */
  .areas li{ white-space:normal; }
}


/* ============================================================
   PARTNER STACK
   One card in front, the firm's specialisms fanning out behind
   it. Transitions rather than keyframes so an interrupted scroll
   retargets instead of restarting, and nothing enters from
   scale(0) since nothing in the real world appears from nothing.
   ============================================================ */
.stack{
  position:relative;
  margin-top:clamp(var(--s7), 6vw, var(--s9));
  height:296px;
  max-width:340px;
}
/* The container fades, it does not travel: the cards inside carry
   the movement, and two stacked translations read as a wobble. */
.js [data-reveal].stack{ transform:none; }

.stack__card{
  position:absolute; left:0; right:0; bottom:0;
  display:flex; align-items:center; gap:var(--s3);
  padding:var(--s4) var(--s5);
  border-radius:var(--r-md);
  border:1px solid rgba(255,255,255,.75);
  background:linear-gradient(155deg, rgba(255,255,255,.82), rgba(255,255,255,.62));
  backdrop-filter:blur(14px) saturate(170%);
  -webkit-backdrop-filter:blur(14px) saturate(170%);
  box-shadow:0 10px 26px -12px rgba(21,10,56,.24);
  font-size:.875rem; line-height:1.3;
  color:var(--on-paper-muted);
  white-space:nowrap;
}
.stack__card--back{
  --ty:calc(var(--i) * -46px);
  --sc:calc(1 - var(--i) * 0.038);
  --op:calc(1 - var(--i) * 0.13);
  transform:translateY(var(--ty)) scale(var(--sc));
  opacity:var(--op);
}
.stack__card--front{
  font-size:.9375rem; font-weight:500;
  color:var(--on-paper);
  border-color:rgba(255,255,255,.95);
  box-shadow:0 14px 34px -14px rgba(21,10,56,.32);
}
.stack__dot{
  width:9px; height:9px; border-radius:var(--r-full);
  background:var(--sky); flex:none;
  box-shadow:0 0 0 4px rgba(95,173,251,.18);
}

/* Collapsed behind the front card, then fanning out and gathering
   again on a slow loop. One cycle every 10s: far longer than the
   ~5s oscillation that reads as a distracting pulse. */
.js .stack__card--back{
  opacity:0;
  transform:translateY(0) scale(.96);
}
.js .stack.in .stack__card--back{
  animation:stack-breathe 10s infinite;
  animation-delay:calc(var(--i) * 60ms);
}
@keyframes stack-breathe{
  /* gathered */
  0%{
    transform:translateY(0) scale(.96); opacity:0;
    animation-timing-function:var(--ease-out-strong);
  }
  /* fanned out, then held */
  16%, 60%{
    transform:translateY(var(--ty)) scale(var(--sc)); opacity:var(--op);
    animation-timing-function:cubic-bezier(.77,0,.175,1);
  }
  /* gathered again, then held before the next cycle */
  74%, 100%{
    transform:translateY(0) scale(.96); opacity:0;
  }
}

@media (max-width:1080px){
  .stack{ margin-top:var(--s7); }
}
@media (prefers-reduced-motion: reduce){
  /* The fan still resolves, it just does not travel */
  .js .stack__card--back,
  .js .stack.in .stack__card--back{
    animation:none;
    opacity:var(--op);
    transform:translateY(var(--ty)) scale(var(--sc));
  }
}

/* ============================================================
   ACT INVERSIONS
   The team and careers blocks were built for one ground each.
   These let them sit on the other without hardcoded colours
   leaking through.
   ============================================================ */

/* Portraits on ink: shot on near black, so they belong on the
   dark ground rather than floating on pale paper. */
.ink-act .teamgroup__head{ border-bottom-color:var(--line-ink); }
.ink-act .person__img{
  background:rgba(241,245,253,.05);
  border:1px solid var(--line-ink);
  box-shadow:var(--lift-ink);
}
.ink-act .person__initials{ color:rgba(241,245,253,.58); }
.ink-act .person__name{ color:var(--on-ink); }
.ink-act .person__title{ color:var(--on-ink-muted); }
.ink-act .person__hub{ color:var(--on-ink-faint); }
.ink-act .person__li{ color:var(--on-ink-muted); }
.ink-act .person__li:hover{ color:var(--on-ink); background:rgba(95,173,251,.20); }
.ink-act .person__li:active{ background:rgba(95,173,251,.30); }
.ink-act .slotnote{ border-color:var(--line-ink); color:var(--on-ink-faint); }

/* Careers on paper */
.paper-act .join__list li{ color:var(--on-paper-muted); }

/* The vision statement is the About page's heading. Sized between the
   display and a section heading: long enough that full display size
   would overwhelm the page, short enough to still lead it. */
.pagehead__vision{
  position:relative; z-index:2;
  font-weight:300;
  font-size:clamp(1.5rem, 3.1vw, 2.625rem);
  line-height:1.16;
  letter-spacing:-.028em;
  text-wrap:balance;
  max-width:30ch;
  color:var(--on-ink);
}

/* ============================================================
   CLIENT SEGMENTS
   The same accordion as the services page, carrying the brand
   triad so the colour still says which client it is.
   ============================================================ */
.acc--seg{ border-top:2px solid var(--c); }
.acc__dot{
  width:9px; height:9px; border-radius:var(--r-full);
  background:var(--c); flex:none;
}
.acc--seg[open] .acc__title{ color:var(--on-paper); }
.acc--seg .acc__name{ color:var(--c); }
/* Paragraph content, where the services accordions carry lists */
.acc__text{
  font-size:.9375rem; line-height:1.6; color:var(--on-paper-muted);
}
/* ============================================================
   ACCORDIONS ON INK
   The component was built for the pale ground. On dark it takes
   the same glass treatment as the instrument panel rather than a
   white film, which would read as a cut out rectangle.
   ============================================================ */
.ink-act .acc{
  border-color:var(--glass-line-edge);
  border-top-color:rgba(255,255,255,.4);
  background:linear-gradient(155deg,
    rgba(255,255,255,.11),
    rgba(255,255,255,.04) 55%,
    rgba(255,255,255,.08));
  backdrop-filter:blur(26px) saturate(150%) brightness(1.14);
  -webkit-backdrop-filter:blur(26px) saturate(150%) brightness(1.14);
  box-shadow:
    0 2px 10px rgba(4,1,14,.26),
    0 22px 60px -20px rgba(4,1,14,.5),
    inset 0 1px 0 rgba(255,255,255,.3);
}
.ink-act .acc[open]{
  border-color:rgba(255,255,255,.38);
  box-shadow:
    0 2px 10px rgba(4,1,14,.3),
    0 26px 70px -20px rgba(4,1,14,.58),
    inset 0 1px 0 rgba(255,255,255,.4);
}
.ink-act .acc__head:hover{ background:rgba(255,255,255,.06); }
.ink-act .acc__title{ color:var(--on-ink); }
.ink-act .acc[open] .acc__title{ color:var(--sky); }
.ink-act .acc__meta{ color:var(--on-ink-faint); }
.ink-act .acc__icon{ border-color:var(--glass-line-edge); }
.ink-act .acc__icon::before,
.ink-act .acc__icon::after{ background:var(--on-ink); }
.ink-act .acc[open] .acc__icon{ border-color:rgba(95,173,251,.5); }
.ink-act .acc__lead{ color:var(--on-ink); border-bottom-color:var(--glass-line); }
.ink-act .acc__item + .acc__item{ border-top-color:var(--glass-line); }
.ink-act .acc__name{ color:var(--sky); }
.ink-act .acc__item li{ color:var(--on-ink-muted); }
.ink-act .acc__text{ color:var(--on-ink-muted); }

/* ============================================================
   SERVICE LIST ON INK
   The rows were built for the pale ground; on dark the hairlines
   and the hover wash have to invert or they blow out.
   ============================================================ */
.ink-act .svcs{ border-top-color:var(--glass-line); }
.ink-act .svc{ border-bottom-color:var(--glass-line); }
.ink-act .svc:hover{ background:rgba(255,255,255,.06); }
.ink-act .svc__d{ background:var(--on-ink-faint); }
.ink-act .svc__t{ color:var(--on-ink); }
.ink-act .svc__c{ color:var(--on-ink-muted); }