/* Company pages (About, Leadership, Contact, Careers and their
   sub-pages). Loaded after main.css. */

:root{
  --sans:'IBM Plex Sans','Plex Sans Fallback',-apple-system,Segoe UI,Helvetica,Arial,sans-serif; 
  --mono:'IBM Plex Mono','Plex Mono Fallback',ui-monospace,SFMono-Regular,Menlo,monospace}
.cmp{font-size:14px;line-height:23px}
.cmp .eyebrow{font-size:11px;line-height:14px;letter-spacing:.16em;font-weight:600;text-transform:uppercase}
.cmp .tick{display:flex;align-items:center;gap:10px}
.cmp .tick::before{content:"";width:22px;height:2px;background:var(--cyan);flex:none}
.cmp .tick.dark::before{background:var(--blue)}
.cmp .band{padding:64px 40px}
.cmp .band.ink{background:var(--ink);color:#C9D0DE}
.cmp .band.mist{background:var(--mist)}
.cmp .band.paper{background:var(--paper)}
.cmp .band h2{font-size:34px;line-height:37px;letter-spacing:-.015em;font-weight:600;color:var(--ink);margin-bottom:14px}
.cmp .band.ink h2{color:var(--paper)}
/* h1 matches the band h2 it was promoted from, so the hero renders identically */
.cmp .band h1{font-size:34px;line-height:37px;letter-spacing:-.015em;font-weight:600;color:var(--ink);margin-bottom:14px}
.cmp .band.ink h1{color:var(--paper)}
.cmp .band h3{font-size:18px;line-height:24px;font-weight:600;color:var(--ink)}
.cmp .band.ink h3{color:var(--paper)}
.cmp .lead{font-weight:300;font-size:16px;line-height:26px;max-width:62ch}
.cmp .small{font-size:12px;line-height:19px}
.cmp .mono{font-family:var(--mono);font-size:13px;line-height:21px}
.cmp .btn{display:inline-block;font-size:14px;font-weight:500;padding:13px 26px;
  background:var(--signal);color:var(--paper);text-decoration:none}
.cmp .btn.ghost{background:transparent;color:var(--paper);box-shadow:inset 0 0 0 1px #4A5468}
.cmp .btn.ghost.dk{color:var(--ink);box-shadow:inset 0 0 0 1px var(--silver)}
.cmp .btns{display:flex;gap:12px;margin-top:32px;flex-wrap:wrap}
.cmp .grid{display:grid;gap:1px;background:var(--silver)}
.cmp .g4{grid-template-columns:repeat(4,1fr)}
.cmp .g3{grid-template-columns:repeat(3,1fr)}
.cmp .g2{grid-template-columns:repeat(2,1fr)}
.cmp .ph{background:var(--graphite);color:#6E7A92;display:flex;align-items:center;
  justify-content:center;font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-align:center;padding:8px}
.cmp .ph.lt{background:var(--mist);color:var(--steel);box-shadow:inset 0 0 0 1px var(--silver)}
.cmp .pill{font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--blue);
  background:var(--mist);padding:5px 10px;display:inline-block}
.cmp .pill.warn{color:#8a5a00;background:#FFF4DE}
.cmp .grid-tex{background-image:repeating-linear-gradient(45deg,
  rgba(72,226,226,.16) 0 2px, transparent 2px 30px)}
.cmp .hero-ink{position:relative;overflow:hidden}
.cmp .hero-ink .lay{position:absolute;inset:0}
.cmp .hero-ink > *:not(.plane){position:relative;z-index:1}
.cmp .cut-tone{background:linear-gradient(45deg, rgba(255,255,255,0) 0 56%, #0A1140 56% 100%)}
.cmp .cut-tex{background-image:repeating-linear-gradient(45deg, rgba(72,226,226,.16) 0 2px, transparent 2px 30px);
  -webkit-mask-image:linear-gradient(45deg, rgba(0,0,0,0) 0 56%, #000 56% 100%);
  mask-image:linear-gradient(45deg, rgba(0,0,0,0) 0 56%, #000 56% 100%);
  animation:drift 22s linear infinite}
@keyframes drift{from{background-position:0 0} to{background-position:42.43px 0}}
@keyframes cutIn{from{transform:translate3d(22%,0,0);opacity:0} to{transform:none;opacity:1}}
@keyframes riseIn{from{transform:translate3d(0,14px,0);opacity:0} to{transform:none;opacity:1}}
.cmp .hero-ink > .plane{position:absolute;inset:0;z-index:0;
  animation:cutIn 1.1s cubic-bezier(.2,.7,.2,1) both}
.cmp .hero-ink > *:not(.plane){animation:riseIn .7s cubic-bezier(.2,.7,.2,1) both}
.cmp .hero-ink > *:nth-child(2){animation-delay:.15s}
.cmp .hero-ink > *:nth-child(3){animation-delay:.25s}
.cmp .hero-ink > *:nth-child(4){animation-delay:.35s}
.cmp .hero-ink > *:nth-child(5){animation-delay:.45s}
/* About hero: the skyline sits behind a navy wash that stays solid on the text side */
.cmp .hero-ink.hero-photo::before{content:"";position:absolute;inset:0;z-index:0;
  background:var(--pg-hero,none) center/cover no-repeat;opacity:.55;
  animation:cutIn 1.1s cubic-bezier(.2,.7,.2,1) both}
.cmp .hero-ink.hero-photo::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(90deg,#03072C 0 34%,rgba(3,7,44,.78) 58%,rgba(3,7,44,.42) 100%),
  linear-gradient(180deg,rgba(3,7,44,.2),rgba(3,7,44,.55))}
@media(prefers-reduced-motion:reduce){.cmp .hero-ink.hero-photo::before{animation:none}}
/* Leadership tiles until the portraits arrive: navy, the hero's cyan hatch, initials in cyan */
.cmp .lead-ph{background:var(--ink);border-color:var(--ink)}
.cmp .lead-ph::before{background-image:repeating-linear-gradient(45deg,rgba(72,226,226,.16) 0 2px,transparent 2px 30px);opacity:1}
.cmp .lead-ph .lead-ph__label{position:absolute;inset:0;display:grid;place-items:center;z-index:1}
@media (prefers-reduced-motion: reduce){.cmp *,.cmp *::before,.cmp *::after{animation:none !important;transition:none !important}}
.cmp .chamfer{clip-path:polygon(0 0, calc(100% - 40px) 0, 100% 40px, 100% 100%, 0 100%)}
.cmp .fact{display:grid;grid-template-columns:110px 1fr;gap:24px;align-items:baseline;
  padding:16px 0;border-bottom:1px solid var(--silver)}
.cmp .fact:last-child{border-bottom:0}
.cmp .fact .mono{color:var(--steel);font-size:11px;letter-spacing:.16em;text-transform:uppercase}
.cmp .fact b{color:var(--ink);font-weight:400;font-size:14px;line-height:23px}
.cmp .pillars{border-top:1px solid #2A3350}
.cmp .pillar{display:grid;grid-template-columns:.9fr 1.1fr;gap:32px;align-items:baseline;
  padding:20px 0;border-bottom:1px solid #2A3350}
.cmp .pillar b{color:var(--paper);font-weight:600;font-size:18px;line-height:24px}
.cmp .pillar span{color:#9AA4BA;font-size:13px;line-height:21px}
.cmp .prow{display:grid;grid-template-columns:230px 1fr 200px;gap:0;align-items:stretch;
  border:1px solid var(--silver);background:var(--paper);margin-bottom:16px}
.cmp .prow .mark{border-right:1px solid var(--silver);padding:28px;display:flex;flex-direction:column;justify-content:space-between}
.cmp .prow .mark .nm{font-size:24px;line-height:29px;font-weight:600;color:var(--ink);letter-spacing:-.01em}
.cmp .prow .mid{padding:28px 32px}
.cmp .prow .side{border-left:1px solid var(--silver);background:var(--mist);padding:28px}
.cmp .closing{border:1px solid var(--silver);background:var(--paper);padding:32px 36px}
.cmp .closing h3{font-size:24px;line-height:29px;font-weight:600;color:var(--ink);margin-bottom:6px}
.cmp table{border-collapse:collapse;width:100%;margin-top:22px}
.cmp th,.cmp td{text-align:left;padding:11px 14px;font-size:12px;line-height:20px;border-bottom:1px solid var(--silver);vertical-align:top}
.cmp th{font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:var(--steel)}
.cmp td:first-child{color:var(--ink);font-weight:500;width:26%}
.cmp td:nth-child(2){width:44%}
@media(max-width:900px){.cmp .g4,.cmp .g3,.cmp .g2{grid-template-columns:1fr}.cmp .band{padding:40px 24px}}

/* align comp bands to the site container: full-bleed background,
   content on the same rhythm as every other section */
.cmp .band{padding-left:max(var(--gut),calc((100% - var(--max))/2 + var(--gut)));padding-right:max(var(--gut),calc((100% - var(--max))/2 + var(--gut)))}

/* mobile: the comps were laid out at desktop width only. Their multi-column
   grids are set as inline styles, so an !important override is the only way
   to collapse them; .prow's fixed 230/1fr/200 columns collapse with it. */
@media(max-width:900px){
  .cmp [style*="grid-template-columns"]{grid-template-columns:1fr!important;gap:26px!important}
  .cmp .prow{grid-template-columns:1fr}
  .cmp .prow .mark{border-right:none;border-bottom:1px solid var(--silver)}
  .cmp .prow .side{border-left:none;border-top:1px solid var(--silver)}
  .cmp .chamfer{clip-path:none}
}

/* --- stop the site stylesheet leaking into the comps --------------------
   The site CSS is unscoped, so its rules for class names the comps reuse
   (.dark, .lay, .ph, .pill) were setting properties the comps never
   declare, and therefore won by default:
     .dark{background:var(--ink)}      turned eyebrow ticks into navy bars
     .lay{background:var(--paper)}     painted the hero's 45-degree cut white
                                       instead of revealing the ink behind
     .ph{border;::before hatch}        added a border and hatch over the
                                       comps' own placeholder treatment
   Neutralise just those properties; the comps' scoped rules then govern. */
/* reset only the inherited background COLOUR - .cut-tone's gradient and
   .cut-tex's masked hatch are background-images and must survive */
.cmp .lay{background-color:transparent;padding:0}
.cmp .lay:hover{background-color:transparent}
.cmp .dark{background:none;color:inherit}
.cmp .dark h2,.cmp .dark h3{color:inherit}
.cmp .dark .eyebrow{color:inherit}
.cmp .ph{border:none}
.cmp .ph::before{content:none}
.cmp .ph .brief{position:static;padding:0}
/* A placeholder with a photograph: class="ph photo" and --img set inline.
   The brief stays in the markup as the shot list but is not shown. */
.cmp .ph.photo{background:var(--graphite) var(--img,none) center/cover no-repeat}
.cmp .ph.photo .brief{display:none}
.cmp .pill{cursor:auto}

/* --- clearance for the fixed nav ---------------------------------------
   In the comps the nav sat in flow at the top of the page, so each hero's
   top padding was measured from below it. Here the nav is fixed, so those
   paddings were being eaten by it: About kept 22px of clearance, Partners
   6px, and Events and Contact were 2px UNDER the nav. Restoring the 66px
   the nav occupies puts every hero back on its designed rhythm. */
body{padding-top:66px}

/* Tablets: four-up grids go two-up instead of one giant column. */
@media(min-width:601px) and (max-width:900px){.cmp .g4{grid-template-columns:repeat(2,1fr)}}

/* Careers values strip: side spacing lives here, logical so it mirrors in
   Arabic (it was inline padding-left/right per item). Stacked on tablets and
   phones, the items line up flush instead of stepping in. */
.cmp .vals>div{padding-inline:28px!important}
.cmp .vals>div:first-child{padding-inline-start:0!important}
.cmp .vals>div:last-child{padding-inline-end:0!important}
@media(max-width:900px){.cmp .vals>div{padding-inline:0!important}}