:root{--nx-mesh:url("/delivered/4c2ae7c9095f03cd.jpg")}
/* ==========================================================================
   THE ROSTER
   Twelve portraits shot in twelve different places: a night street, a hillside,
   a warm hotel lobby, four white studio walls. Colour makes that grid look like
   twelve pasted images. Greyscale makes it look like one team, and it is also
   the site's own monochrome plus ember language, so the default state here is
   mono and colour is what hover BUYS you.
   ========================================================================== */
.tm-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:34px 24px;margin-top:54px}
@media(max-width:1120px){.tm-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:720px){.tm-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 16px}}

.tm{position:relative;display:block;text-decoration:none;color:inherit}
.tm-ph{position:relative;aspect-ratio:1/1;overflow:hidden;border-radius:14px;
  background:#e9e6e2;isolation:isolate;
  box-shadow:0 1px 0 rgba(18,18,18,.05);
  transition:box-shadow .45s var(--ease),transform .45s var(--ease)}

/* The portrait itself. Resting: mono, framed a touch wide. Hover: colour, and
   the frame closes in and rises, so the person appears to have shifted rather
   than the image simply having been scaled. */
.tm-ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:50% 18%;
  transform:scale(1.015);
  filter:grayscale(1) contrast(1.05) brightness(1.02);
  transition:transform .85s var(--ease),filter .5s var(--ease),opacity .45s var(--ease);
  will-change:transform}
.tm:hover .tm-ph img,.tm:focus-visible .tm-ph img{
  transform:scale(1.13) translateY(-2.2%);
  filter:grayscale(0) contrast(1.02) brightness(1)}
.tm:hover .tm-ph,.tm:focus-visible .tm-ph{
  box-shadow:0 22px 44px -26px rgba(18,18,18,.42);transform:translateY(-4px)}

/* TWO PHOTO PATH, dormant until a second portrait exists.
   Give a person a second image and the card cross fades between them the way
   the IDEO page does. Nothing else has to change: with no .tm-b in the card
   these two rules never match anything. */
.tm-ph img.tm-b{opacity:0}
.tm:hover .tm-ph img.tm-b,.tm:focus-visible .tm-ph img.tm-b{opacity:1}
.tm-ph:has(img.tm-b) img.tm-a{transition:transform .85s var(--ease),
  filter .5s var(--ease),opacity .45s var(--ease)}
.tm:hover .tm-ph:has(img.tm-b) img.tm-a,
.tm:focus-visible .tm-ph:has(img.tm-b) img.tm-a{opacity:0}

/* A wash that lifts off as the colour arrives, so the transition has a middle
   rather than being a straight filter flip. */
.tm-ph::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,rgba(21,38,71,.10) 0%,rgba(21,38,71,.30) 100%);
  opacity:1;transition:opacity .5s var(--ease)}
.tm:hover .tm-ph::after,.tm:focus-visible .tm-ph::after{opacity:0}

.tm-name{font-family:var(--display);font-size:17px;font-weight:500;
  letter-spacing:-.016em;line-height:1.25;margin-top:17px}
.tm-role{font-size:13px;line-height:1.5;color:var(--txt);opacity:.72;margin-top:5px}
.tm-unit{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--warm);margin-top:8px}

/* the rule under each card draws itself in ember on hover */
.tm-rule{position:relative;height:1px;background:var(--line);margin-top:15px}
.tm-rule::after{content:"";position:absolute;left:0;top:0;height:1px;width:0;
  background:var(--ember-ramp,linear-gradient(90deg,#c8102e,#e8944b));
  transition:width .55s var(--ease)}
.tm:hover .tm-rule::after,.tm:focus-visible .tm-rule::after{width:100%}

.tm:focus-visible{outline:none}
.tm:focus-visible .tm-ph{outline:2px solid var(--warm);outline-offset:3px}

/* The band on this page is a full width section rather than one sitting in a
   content column, so it needs the section padding the grid pages got from
   .sv-sub. Everything else about it, the navy, the photograph, the scrim, the
   glass cards and the cursor light, is the inherited rule. */
.tm-band{margin:0}
.tm-band .at-wrap{position:relative;z-index:1}
.tm-ucs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:44px}
@media(max-width:1000px){.tm-ucs{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.tm-ucs{grid-template-columns:1fr}}

/* The secondary action uses .at-link, the design system's own standalone text
   link: underline, sliding arrow, and an ember hover already scoped to .at-sec,
   which is the section it sits in. It is fully styled in the inherited sheet
   and no built page had used it yet. Both button variants are solid red, so a
   second button here would have read as a duplicate of the first. All this rule
   does is centre it, because .at-link is inline-flex. */
.tm-alt{text-align:center}

@media(prefers-reduced-motion:reduce){
  .tm-ph img{transition:filter .3s linear}
  .tm:hover .tm-ph img,.tm:focus-visible .tm-ph img{transform:scale(1.015) translateY(0)}
  .tm:hover .tm-ph,.tm:focus-visible .tm-ph{transform:none}
}

/* touch: no hover to give, so an in view card gets the colour anyway */
.tm.is-lit .tm-ph img{transform:scale(1.04);filter:grayscale(0) brightness(1)}
.tm.is-lit .tm-ph::after{opacity:0}
.tm.is-lit .tm-rule::after{width:100%}

/* ==========================================================================
   THE LEADERSHIP BAND
   Built to the reference rather than to the page's usual container. Measured
   off on.energy at a 1440 viewport: the grid runs full bleed at 100vw, four
   across, cards 330 wide on a four by five frame with a sixteen pixel radius,
   sixteen between columns and sixty between rows, on a near black ground with
   light type. The earlier version sat in the standard 1180 wrap at five across,
   which is why the cards came out half the size.

   Ten people across four columns leaves a short final row of two. That is
   accepted here rather than fought, because it is the reference's own
   behaviour: seventeen people across four columns leaves it a final row of one.
   ========================================================================== */
.tm-band-dark{background:#0b1220;padding:88px 0 96px;position:relative}
.tm-band-dark .at-kicker{color:#e0563b}
.tm-band-dark .at-kicker::before{background:#e0563b;opacity:.85}
.tm-band-dark .at-h2{color:#f2f4f8}
/* .at-em paints the ember ramp behind the glyphs and sets the text itself to
   transparent, so it must not be handed an opaque colour. Restated here so a
   later band rule cannot quietly erase it again. */
.tm-band-dark .at-h2 .at-em{background:var(--ember-ramp);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.tm-band-dark .at-lede{color:rgba(242,244,248,.62)}
.tm-band-dark .at-head{margin-bottom:46px}

/* full bleed. The section's own wrap is left in place for the heading, and the
   grid steps outside it, which keeps the type on the page's measure while the
   portraits run the full width the reference gives them. */
.tm-wrap{--accent:#1b355c;--accent-lift:#3f548d;--accent-hot:#e0563b;
  position:relative;width:100%;padding:0 26px}
@media(max-width:720px){.tm-wrap{padding:0 16px}}

.tm-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:60px 16px;margin-top:0}
@media(max-width:1100px){.tm-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:44px 14px}}
@media(max-width:720px){.tm-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:34px 12px}}

/* ---- the card ---------------------------------------------------------- */
.tm{opacity:0;transform:translateY(26px);
  /* the stagger is written into the entrance transitions themselves. Using the
     transition-delay shorthand instead would leave the delay on the element
     for every later change, so the last card would sit for most of a second
     before reacting to a hover. */
  transition:opacity .8s var(--ease) calc(var(--d) * 70ms),
             transform .9s var(--ease) calc(var(--d) * 70ms)}
.tm.tm-in{opacity:1;transform:none;
  /* once it has arrived, it answers at once */
  transition:opacity .34s var(--ease),filter .34s var(--ease)}

.tm-ph{position:relative;aspect-ratio:4/5;overflow:hidden;border-radius:16px;
  background:#161b24;isolation:isolate;
  box-shadow:0 2px 10px -6px rgba(0,0,0,.6);
  transition:transform .55s var(--ease),box-shadow .55s var(--ease)}
.tm-ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:50% 50%;transform:scale(1.06);
  filter:grayscale(1) contrast(1.04);
  transition:transform .85s var(--ease),filter .5s var(--ease)}
.tm.tm-in .tm-ph img{transform:scale(1)}

.tm:hover .tm-ph,.tm:focus-within .tm-ph{
  transform:translateY(-14px) scale(1.035);
  box-shadow:0 46px 70px -30px rgba(224,86,59,.40),
             0 0 0 3px var(--accent-hot),
             0 22px 40px -24px rgba(0,0,0,.75)}
.tm:hover .tm-ph img,.tm:focus-within .tm-ph img{
  transform:scale(1.05);filter:grayscale(0) contrast(1.02)}

/* the scrim that lifts as the colour arrives */
.tm-ph::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,rgba(11,18,32,.16) 0%,rgba(11,18,32,.42) 100%);
  opacity:1;transition:opacity .5s var(--ease)}
.tm:hover .tm-ph::after,.tm:focus-within .tm-ph::after{opacity:0}

/* the accent wash. Reads as a tint over the frame here. It becomes the ground
   itself the moment the portraits are shot on the accent, which is what the
   reference did and what SHOT_ON_ACCENT is for. */
.tm-wash{position:absolute;inset:0;z-index:3;pointer-events:none;
  background:var(--accent-hot);mix-blend-mode:multiply;opacity:0;
  transition:opacity .5s var(--ease)}
.tm:hover .tm-wash,.tm:focus-within .tm-wash{opacity:.09}

/* ---- the badge, which opens the profile -------------------------------- */
.tm-badge{position:absolute;right:12px;bottom:12px;z-index:5;width:40px;height:40px;
  border:0;border-radius:12px;cursor:pointer;padding:0;
  background:rgba(8,12,20,.66);backdrop-filter:blur(6px);
  display:grid;place-items:center;
  transition:background .4s var(--ease),transform .4s var(--ease)}
.tm-badge::before,.tm-badge::after{content:"";position:absolute;background:#fff;
  transition:background .4s var(--ease)}
.tm-badge::before{width:15px;height:2px}
.tm-badge::after{width:2px;height:15px}
.tm:hover .tm-badge,.tm-badge:focus-visible{background:var(--accent-hot);transform:scale(1.08)}
.tm-badge:focus-visible{outline:2px solid var(--accent-hot);outline-offset:3px}

/* ---- the caption ------------------------------------------------------- */
.tm-rule{display:none}
.tm-name{font-family:var(--display);font-size:16px;font-weight:500;letter-spacing:-.012em;
  line-height:1.3;margin-top:16px;color:#eeeeee}
.tm-role{font-size:14px;line-height:1.45;color:rgba(238,238,238,.55);margin-top:3px}
.tm-unit{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent-hot);margin-top:9px}

/* ==========================================================================
   THE PROFILE PANEL
   Opened from the badge. Deliberately plain: the portrait large and in colour,
   the name, the role, and two or three lines. Nothing else, because nothing
   else has been supplied and a panel padded out with invented biography is
   worse than a short one.
   ========================================================================== */
.pf{--accent:#1b355c;--accent-lift:#3f548d;--accent-hot:#e0563b;
  position:fixed;inset:0;z-index:9000;display:grid;place-items:center;padding:26px;
  opacity:0;visibility:hidden;transition:opacity .34s var(--ease),visibility .34s}
.pf.is-open{opacity:1;visibility:visible}
.pf-sc{position:absolute;inset:0;background:rgba(6,10,18,.76);backdrop-filter:blur(5px)}
.pf-p{position:relative;width:min(1290px,100%);max-height:calc(100dvh - 52px);overflow:auto;
  background:#12161d;color:#fff;border-radius:24px;padding:26px;
  display:grid;grid-template-columns:minmax(0,450px) minmax(0,1fr);gap:38px;
  align-items:start;
  transform:translateY(18px) scale(.97);opacity:0;
  transition:transform .42s var(--ease),opacity .42s var(--ease);
  /* no native bar across the design. Wheel and keyboard still scroll. */
  scrollbar-width:none;-ms-overflow-style:none}
.pf-p::-webkit-scrollbar{width:0;height:0;display:none}
@media(max-width:700px){
  .pf-p{grid-template-columns:1fr;gap:18px;width:min(560px,100%)}
}
.pf.is-open .pf-p{transform:none;opacity:1}
.pf-im{position:relative;aspect-ratio:4/5;max-height:calc(100dvh - 104px);
  border-radius:18px;overflow:hidden;background:var(--accent)}
.pf-im img{object-position:50% 12%}   /* if it ever crops, crop off the feet */
.pf-t{min-width:0}
.pf-im img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pf-nm{font-family:var(--display);font-size:34px;font-weight:500;letter-spacing:-.024em;
  margin:6px 0 0;padding-right:56px}
.pf-rl{font-size:19px;color:rgba(255,255,255,.62);margin:6px 0 0}
.pf-un{display:inline-block;font-family:var(--mono);font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent-hot);margin-top:15px;font-size:11px}
.pf-bio{font-size:17px;line-height:1.68;color:rgba(255,255,255,.8);margin:20px 0 0;
  max-width:56ch}
.pf-bio.is-missing{color:#ffb4a2}
.pf-x{position:absolute;top:26px;right:26px;z-index:2;width:46px;height:46px;border:0;padding:0;
  border-radius:11px;background:rgba(255,255,255,.14);cursor:pointer;
  display:grid;place-items:center;transition:background .3s var(--ease)}
.pf-x:hover{background:var(--accent-hot)}
.pf-x::before,.pf-x::after{content:"";position:absolute;width:15px;height:2px;background:#fff}
.pf-x::before{transform:rotate(45deg)}
.pf-x::after{transform:rotate(-45deg)}
body.pf-lock{overflow:hidden}

/* ==========================================================================
   THE HOVER STATE
   The card lifts straight up and grows very slightly. It used to bend
   towards whichever corner the pointer was in, driven by two custom
   properties written on pointermove. That was removed: the frame is flat
   now and moves only on one axis, so nothing about the portrait skews.
   ========================================================================== */
.tm:hover .tm-ph,.tm:focus-within .tm-ph{
  transform:translateY(-14px) scale(1.035)}

/* ---- everything else recedes -------------------------------------------
   Scoped to .tm-in so a card that has not been revealed yet is not dragged
   up to a dimmed state before its own entrance has run. */
.tm-grid:has(.tm:hover) .tm.tm-in:not(:hover),
.tm-grid:has(.tm:focus-within) .tm.tm-in:not(:focus-within){
  opacity:.42;filter:saturate(.55);
  transition:opacity .45s var(--ease),filter .45s var(--ease)}

/* ---- the index ---------------------------------------------------------- */
.tm-num{position:absolute;left:14px;top:13px;z-index:5;pointer-events:none;
  font-family:var(--mono);font-size:10px;letter-spacing:.16em;
  color:rgba(238,238,238,.5);transition:color .4s var(--ease)}
.tm:hover .tm-num,.tm:focus-within .tm-num{color:var(--accent-hot)}

/* ==========================================================================
   THE GROUND
   Flat dark reads as a void. The band takes the same mesh every other page on
   this site carries, held well back and drifting slowly against the scroll, and
   a fine grain over the top so the darkness has a surface.
   ========================================================================== */
.tm-band-dark{overflow:hidden}
.tm-mesh{position:absolute;left:0;right:0;top:-14%;height:128%;z-index:0;
  background:var(--nx-mesh) center/cover no-repeat;
  opacity:.34;filter:saturate(.75);
  will-change:transform;pointer-events:none}
.tm-band-dark::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  opacity:.16;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}
.tm-band-dark>.at-wrap,.tm-band-dark>.tm-wrap{position:relative;z-index:1}

/* ---- moving between people without closing ------------------------------ */
.pf-li{display:none;margin-top:22px;width:44px;height:44px;border-radius:11px;
  overflow:hidden;line-height:0;
  transition:transform .32s var(--ease),box-shadow .32s var(--ease)}
.pf-li.is-on{display:block}
.pf-li svg{width:100%;height:100%;display:block}
.pf-li:hover,.pf-li:focus-visible{transform:translateY(-2px) scale(1.06);
  box-shadow:0 12px 22px -10px rgba(10,102,194,.75)}
.pf-li:focus-visible{outline:2px solid #0A66C2;outline-offset:3px}

.pf-nav{display:flex;gap:12px;margin-top:30px;align-items:center}
.pf-nav button{width:50px;height:50px;border:0;padding:0;border-radius:15px;cursor:pointer;
  background:rgba(255,255,255,.12);position:relative;
  transition:background .3s var(--ease)}
.pf-nav button:hover{background:var(--accent-hot)}
.pf-nav button::before{content:"";position:absolute;left:50%;top:50%;width:9px;height:9px;
  border-left:2px solid #fff;border-bottom:2px solid #fff}
.pf-prev::before{transform:translate(-40%,-50%) rotate(45deg)}
.pf-next::before{transform:translate(-60%,-50%) rotate(-135deg)}
.pf-count{font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  color:rgba(255,255,255,.45);margin-left:8px;font-size:13px}

@media(prefers-reduced-motion:reduce){
  .tm:hover .tm-ph,.tm:focus-within .tm-ph{transform:none}
  .tm-mesh{transform:none !important}
}

/* ==========================================================================
   NEXY, DOCKED IN THE CORNER
   The pill and the panel are the real component. The only thing written here
   is where they sit. The seat carries its own ground, the navy scrim over the
   site mesh, exactly as the rail's seat does, because without it the panel
   draws its contents onto nothing.
   ========================================================================== */
.tm-nexy{position:fixed;right:24px;bottom:24px;z-index:8000;
  display:flex;flex-direction:column;align-items:flex-end;gap:12px}

/* the pill returns to the corner it was designed for. Everything about how it
   looks is already in the component stylesheet. */
.tm-pill{position:static;width:auto;max-width:330px;opacity:1;transform:none;
  pointer-events:auto;transition:opacity .3s var(--ease),transform .3s var(--ease)}
.tm-nexy.is-open .tm-pill{opacity:0;pointer-events:none;transform:translateY(8px) scale(.96)}

/* the seat, on the rail's numbers */
#tmNexy{position:relative;width:344px;height:min(566px,calc(100dvh - 132px));
  border-radius:16px;pointer-events:auto;overflow:hidden;
  background-image:linear-gradient(rgba(9,22,42,.52),rgba(9,22,42,.52)),
    var(--nx-mesh,linear-gradient(#152647,#152647));
  background-size:cover,cover;background-position:50% 50%,72% 26%;
  box-shadow:0 30px 70px -34px rgba(0,0,0,.62)}
#tmNexy[hidden]{display:none}

.tm-nx-x{position:absolute;top:-13px;right:-7px;z-index:3;width:34px;height:34px;
  border:0;padding:0;border-radius:50%;background:#12161d;cursor:pointer;display:none;
  box-shadow:0 8px 18px -8px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.14)}
.tm-nexy.is-open .tm-nx-x{display:block}
.tm-nx-x::before,.tm-nx-x::after{content:"";position:absolute;left:50%;top:50%;
  width:13px;height:2px;background:#fff;margin:-1px 0 0 -6.5px}
.tm-nx-x::before{transform:rotate(45deg)}
.tm-nx-x::after{transform:rotate(-45deg)}

@media(max-width:1119px){
  .tm-nexy{right:16px;bottom:16px}
  #tmNexy{width:min(344px,calc(100vw - 32px))}
}

@media(prefers-reduced-motion:reduce){
  .tm{opacity:1;transform:none;transition:none}
  .tm .tm-ph img,.tm.tm-in .tm-ph img{transform:scale(1)}
  .tm:hover .tm-ph,.tm:focus-within .tm-ph{transform:none}
  .pf-p{transition:opacity .2s linear;transform:none}
}

/* ==========================================================================
   OUR TEAMS BAND — WHITE FIELD, NAVY MESH CARDS
   The band inverts: the full-bleed navy layer behind the section is switched
   off so the section sits on the page white like #start does, and the mesh
   moves into the four cards instead. Everything else about the band, the
   grid, the padding, the hover lift, the cursor pool and the ember hairline,
   is left exactly as it was. Scoped on .tm-band so the shared .sv-sub--band
   recipe used elsewhere is untouched.
   ========================================================================== */
.tm-band.sv-sub--band::before{display:none}
.tm-band.sv-sub--band .at-kicker{color:#000;opacity:1}
.tm-band.sv-sub--band .at-kicker::before{background:#000;opacity:1}
.tm-band.sv-sub--band .at-h2{color:#000}
.tm-band.sv-sub--band .at-lede{color:#000;opacity:1}

/* Card field: the mesh photograph under a flat navy scrim, the same pairing
   the footer uses, so the white type inside keeps its contrast wherever the
   mesh happens to be light. background-color is the fallback if the mesh
   variable is ever missing. Backdrop blur is dropped, the surface is opaque
   now and blurring behind it would only cost paint. */
.tm-band.sv-sub--band .sv-uc{
  background-color:#152647;
  background-image:linear-gradient(rgba(9,22,42,.58),rgba(9,22,42,.58)),var(--nx-mesh,none);
  background-size:cover;background-position:50% 50%;background-repeat:no-repeat;
  border-color:rgba(255,255,255,.14);
  backdrop-filter:none;-webkit-backdrop-filter:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10), 0 18px 40px -28px rgba(11,18,32,.55)}

/* The base hover is a background shorthand, so the image has to be restated
   here or it would blank on hover. The scrim lightens a touch instead. */
.tm-band.sv-sub--band .sv-uc:hover{
  background-color:#1a2e54;
  background-image:linear-gradient(rgba(9,22,42,.46),rgba(9,22,42,.46)),var(--nx-mesh,none);
  border-color:rgba(255,255,255,.26);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16), 0 26px 54px -26px rgba(11,18,32,.60)}

/* ==========================================================================
   LEADERSHIP BAND — WHITE GROUND
   The band drops its navy, and with it the two layers that only existed to
   give that navy a surface: the drifting mesh and the grain over the top.
   Everything the portraits do is untouched, the 4/5 frames, the greyscale
   that lifts on hover, the ember ring, the wash, the dim on the rest of the
   grid. Only the type sitting directly on the ground is re-set for a light
   field; the index numeral and the badge stay white because they sit on the
   photograph, not on the section.
   ========================================================================== */
.tm-band-dark{background:#fff}
.tm-band-dark .tm-mesh{display:none}
.tm-band-dark::after{display:none}
.tm-band-dark .at-kicker{color:#000}
.tm-band-dark .at-kicker::before{background:#000;opacity:1}
.tm-band-dark .at-h2{color:#000}
.tm-band-dark .at-lede{color:rgba(10,10,10,.62)}
.tm-band-dark .tm-name{color:#0a0a0a}
.tm-band-dark .tm-role{color:rgba(10,10,10,.58)}