html { scroll-behavior: smooth; }
body { font-family: 'Newsreader', Georgia, serif; -webkit-font-smoothing: antialiased; }

/* Link with an underline that overshoots the text, as on Pictet */
.lnk { position: relative; display: inline-block; padding-bottom: 4px; }
.lnk::after {
  content: ''; position: absolute; left: 0; bottom: 0;
  width: calc(100% + 14px); height: 1px; background: currentColor;
  transition: width .35s ease;
}
.lnk:hover::after { width: calc(100% + 30px); }

/* Hairline rows that carry an arrow */
.row-lnk .arw { transition: transform .35s ease; }
.row-lnk:hover .arw { transform: translateX(6px); }

/* Whole summary block is clickable; the arrow answers on hover */
.card-lnk .arw { transition: transform .35s ease; }
.card-lnk:hover .arw { transform: translateX(6px); }

/* Hero: slow cinematic push on the still, so it reads as motion
   until a real video is dropped into assets/hero.mp4 */
.hero-still {
  animation: kenburns 28s ease-in-out infinite alternate;
  transform-origin: 52% 58%;
}
@keyframes kenburns {
  from { transform: scale(1.0); }
  to   { transform: scale(1.11); }
}

/* The mark surfaces over the hero, holds, and recedes.
   With a video it is driven by the playhead (see site.js) and appears in the
   closing seconds, like a title card. With only the still, hover drives it. */
.hero-scrim {
  background: radial-gradient(58% 68% at 50% 50%, rgba(6,14,24,.62) 0%, rgba(6,14,24,.30) 55%, rgba(6,14,24,0) 100%);
  opacity: 0;
  transition: opacity 1.8s ease;          /* leaving: shades away slowly */
}
.hero-mark {
  opacity: 0;
  transform: scale(1.07);
  filter: drop-shadow(0 6px 26px rgba(0,0,0,.55));
  transition: opacity 1.8s ease, transform 2.4s cubic-bezier(.22,.61,.36,1);
}

/* arriving: a touch quicker than the exit, so it answers what it responds to */
.hero-media.is-revealed .hero-scrim,
.hero-media:not(.has-video):hover .hero-scrim { opacity: 1; transition-duration: 1.3s; }

.hero-media.is-revealed .hero-mark,
.hero-media:not(.has-video):hover .hero-mark {
  opacity: .92; transform: scale(1);
  transition: opacity 1.3s ease, transform 2s cubic-bezier(.22,.61,.36,1);
}

/* Touch devices have no cursor; with no video there is nothing to trigger it. */
@media (hover: none) {
  .hero-media:not(.has-video) .hero-scrim { opacity: 1; }
  .hero-media:not(.has-video) .hero-mark  { opacity: .92; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-scrim, .hero-mark { transition: none; }
}

.fade-up { opacity: 0; transform: translateY(18px); transition: opacity .9s ease, transform .9s ease; }
.fade-up.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .fade-up { opacity: 1; transform: none; transition: none; }
  .hero-still { animation: none; }
}


/* ---------------------------------------------------------------------------
   Hero cover: the mark as flat geometry, not a 3D object. A filled plane and a
   hairline contour of the same S, arriving from opposite sides and coming into
   register. Precise, architectural, runs once.
--------------------------------------------------------------------------- */
.cover {
  background:
    radial-gradient(110% 80% at 74% 42%, #e6eef7 0%, rgba(230,238,247,0) 62%),
    linear-gradient(180deg, #f7fafc 0%, #ffffff 100%);
}
/* The mark belongs to the text it sits beside, so its field is the same measure
   as .shell, not the full width of the slab. Past 1440px the panel keeps
   growing but the S stays locked to the content, instead of sliding off toward
   a 27" screen's right edge and leaving the headline stranded. */
.cover-forms {
  position: absolute; inset: 0;
  max-width: 1440px; margin-inline: auto;
  pointer-events: none; overflow: hidden;
}
.cover-forms img { position: absolute; width: auto; will-change: transform, opacity; }

/* the filled plane */
.orb-1 {
  height: 104%; top: -2%; right: 6%;
  opacity: 0;
  animation: lockA 2.1s cubic-bezier(.16,1,.3,1) .15s forwards;
}
/* the contour, offset, so the two read as one mark in register */
.orb-2 {
  height: 104%; top: -2%; right: 6%;
  opacity: 0;
  animation: lockB 2.1s cubic-bezier(.16,1,.3,1) .5s forwards;
}
.orb-3, .orb-4 { display: none; }

@keyframes lockA {
  from { opacity: 0;   transform: translate3d(17%,2%,0)  scale(1.06); }
  to   { opacity: .65; transform: translate3d(0,0,0)   scale(1); }
}
@keyframes lockB {
  from { opacity: 0;   transform: translate3d(-15%,6%,0) scale(.97); }
  to   { opacity: .50; transform: translate3d(0,0,0) scale(1); }
}

@media (max-width: 1023px) {
  .orb-1 { height: 86%; top: 26%; right: -16%; }
  .orb-2 { height: 86%; top: 22%; right: -20%; }
}

@media (prefers-reduced-motion: reduce) {
  .cover-forms img { animation-duration: .01s; animation-delay: 0s; }
}

/* ---------------------------------------------------------------------------
   Menu: frosted glass dropping out of the header, rows arriving in sequence.
--------------------------------------------------------------------------- */
#mobileMenu {
  position: absolute;
  left: 0; right: 0; top: 100%;
  background: #ffffff;
  border-top: 1px solid var(--rule, #dcdcdc);
  box-shadow: 0 30px 60px -34px rgba(20,38,60,.42);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: opacity .45s ease,
              transform .6s cubic-bezier(.22,.61,.36,1),
              visibility 0s linear .5s;
}
#mobileMenu.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity .4s ease,
              transform .6s cubic-bezier(.22,.61,.36,1),
              visibility 0s;
}

/* each row lifts in just after the panel, one after another */
#mobileMenu nav > * {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .5s ease, transform .6s cubic-bezier(.22,.61,.36,1);
}
#mobileMenu.is-open nav > * { opacity: 1; transform: none; }
#mobileMenu.is-open nav > *:nth-child(1) { transition-delay: .10s; }
#mobileMenu.is-open nav > *:nth-child(2) { transition-delay: .15s; }
#mobileMenu.is-open nav > *:nth-child(3) { transition-delay: .20s; }
#mobileMenu.is-open nav > *:nth-child(4) { transition-delay: .25s; }
#mobileMenu.is-open nav > *:nth-child(5) { transition-delay: .30s; }
#mobileMenu.is-open nav > *:nth-child(6) { transition-delay: .35s; }
#mobileMenu.is-open nav > *:nth-child(7) { transition-delay: .40s; }
#mobileMenu.is-open nav > *:nth-child(8) { transition-delay: .45s; }
#mobileMenu.is-open nav > *:nth-child(9) { transition-delay: .50s; }

/* rows step aside slightly on hover */
#mobileMenu nav a { transition: color .25s ease, padding-left .35s cubic-bezier(.22,.61,.36,1),
                                opacity .5s ease, transform .6s cubic-bezier(.22,.61,.36,1); }
#mobileMenu nav a:hover { color: #335170; padding-left: 10px; }

/* the burger strokes cross into a close mark */
#menuBtn span { transition: transform .45s cubic-bezier(.22,.61,.36,1); }
#menuBtn.is-open span:first-of-type { transform: translateY(3.5px) rotate(45deg); }
#menuBtn.is-open span:last-of-type  { transform: translateY(-3.5px) rotate(-45deg); }

@media (prefers-reduced-motion: reduce) {
  #mobileMenu, #mobileMenu nav > *, #menuBtn span { transition-duration: .01s; }
}




/* Cover text arrives in sequence behind the marks, so the page assembles
   rather than simply appearing. */
.cover-in,
.cover-h1 > span {
  opacity: 0;
  transform: translateY(16px);
  animation: coverIn 1.15s cubic-bezier(.16,1,.3,1) forwards;
}
.cover-h1 > span { display: block; }

.cover-h1 > span:nth-child(1) { animation-delay: .14s; }   /* first line */
.cover-h1 > span:nth-child(2) { animation-delay: .30s; }   /* second line */
.cover p.cover-in             { animation-delay: .52s; }   /* intro sentence */
.cover a.cover-in             { animation-delay: .74s; }   /* find out more */

@keyframes coverIn {
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .cover-in, .cover-h1 > span { animation-duration: .01s; animation-delay: 0s; }
}


/* ---------------------------------------------------------------------------
   Cover variant: the puzzle photograph, full bleed. The image carries the idea
   (a piece arriving into place) so the mark is not needed here. Text sits over
   the dark left side, where the picture is already quiet.
   To go back to the S cover: drop .cover--photo from the section in index.html.
--------------------------------------------------------------------------- */
.cover--photo { background: #0e1a27; }

.cover--photo .cover-photo {
  position: absolute; inset: 0; overflow: hidden;
}
.cover--photo .cover-photo img {
  width: 100%; height: 100%; object-fit: cover; object-position: 62% 52%;
  transform: scale(1.04);
  animation: coverPush 26s ease-out forwards;
}
@keyframes coverPush { to { transform: scale(1.13); } }

/* a gradient so the headline always has ground under it, whatever the crop */
.cover--photo .cover-veil {
  position: absolute; inset: 0;
  background:
    linear-gradient(100deg, rgba(8,17,27,.90) 0%, rgba(8,17,27,.72) 34%,
                            rgba(8,17,27,.30) 62%, rgba(8,17,27,.10) 100%);
}

.cover--photo .cover-eyebrow { color: rgba(255,255,255,.62); }
.cover--photo h1             { color: #eaf1f8; }
.cover--photo .cover-cta     { color: #e2c078; }
.cover--photo .cover-cta:hover { color: #f0d9a6; }

@media (prefers-reduced-motion: reduce) {
  .cover--photo .cover-photo img { animation: none; transform: none; }
}


/* ---------------------------------------------------------------------------
   Investment framework page: the three parts are numbered chapters on a rail,
   with a sticky index that tracks where you are. Enumerable things (sectors,
   collateral, security) become chips so they scan instead of reading as prose.
--------------------------------------------------------------------------- */
.fw-index { position: sticky; top: 70px; z-index: 30;
  background: rgba(255,255,255,.92);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1px solid #dcdcdc; }
.fw-index a { color: #6b6b6b; transition: color .3s ease; position: relative; }
.fw-index a::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px;
  height: 1px; background: #335170; transform: scaleX(0); transform-origin: left;
  transition: transform .45s cubic-bezier(.22,.61,.36,1); }
.fw-index a:hover { color: #335170; }
.fw-index a.is-current { color: #335170; }
.fw-index a.is-current::after { transform: scaleX(1); }

/* the chapter numeral, sitting on its own rule */
.fw-num { font-size: 13px; letter-spacing: .12em; color: #335170; }
.fw-rail { border-top: 1px solid #335170; }

/* chips: for lists of things, not sentences */
.chip { display: inline-flex; align-items: center; padding: 7px 14px;
  border: 1px solid #dcdcdc; border-radius: 999px;
  font-size: 14px; line-height: 1; color: #2f2f2f; white-space: nowrap;
  transition: border-color .3s ease, color .3s ease; }
.chip:hover { border-color: #335170; color: #335170; }

.chip-row { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 8px; }


/* ---------------------------------------------------------------------------
   Framework page motion. Nothing is hidden to achieve it - no carousel, no
   accordion. Everything is on the page; the motion only paces how it arrives.
--------------------------------------------------------------------------- */

/* a hairline that fills as you move down the page */
#scrollProgress { position: fixed; top: 70px; left: 0; right: 0; height: 2px;
  background: #335170; transform: scaleX(0); transform-origin: left;
  z-index: 40; will-change: transform; }

/* the chapter marker draws itself, then the number arrives */
/* section 1 runs across nine columns rather than five, so its rule is held to
   the length the five-column sections give theirs */
.fw-line--short { max-width: 55.6%; }
.fw-line { display: block; height: 1px; background: #335170;
  transform: scaleX(0); transform-origin: left;
  transition: transform 1.1s cubic-bezier(.16,1,.3,1); }
.fade-up.in .fw-line { transform: scaleX(1); }
.fw-num { display: inline-block; font-size: 13px; letter-spacing: .12em; color: #335170;
  opacity: 0; transform: translateY(6px);
  transition: opacity .7s ease .25s, transform .7s cubic-bezier(.16,1,.3,1) .25s; }
.fade-up.in .fw-num { opacity: 1; transform: none; }

/* topic cards rise in sequence, and their rule draws with them */
.fw-card { opacity: 0; transform: translateY(14px);
  transition: opacity .7s ease, transform .8s cubic-bezier(.16,1,.3,1); }
.fade-up.in .fw-card { opacity: 1; transform: none; }
.fade-up.in .fw-card:nth-child(1) { transition-delay: .12s; }
.fade-up.in .fw-card:nth-child(2) { transition-delay: .22s; }
.fade-up.in .fw-card:nth-child(3) { transition-delay: .32s; }
.fade-up.in .fw-card:nth-child(4) { transition-delay: .42s; }
.fw-card { border-top: 1px solid transparent; background-image: linear-gradient(#dcdcdc,#dcdcdc);
  background-size: 0% 1px; background-repeat: no-repeat; background-position: left top;
  transition: opacity .7s ease, transform .8s cubic-bezier(.16,1,.3,1),
              background-size 1s cubic-bezier(.16,1,.3,1); }
.fade-up.in .fw-card { background-size: 100% 1px; }
.fw-card:hover { background-image: linear-gradient(#335170,#335170); }

/* chips flicker in one after another */
.chip { opacity: 0; transform: translateY(8px) scale(.97);
  transition: opacity .5s ease, transform .6s cubic-bezier(.16,1,.3,1),
              border-color .3s ease, color .3s ease; }
.fade-up.in .chip { opacity: 1; transform: none; }
.fade-up.in .chip:nth-of-type(1) { transition-delay: .40s; }
.fade-up.in .chip:nth-of-type(2) { transition-delay: .48s; }
.fade-up.in .chip:nth-of-type(3) { transition-delay: .56s; }
.fade-up.in .chip:nth-of-type(4) { transition-delay: .64s; }
.fade-up.in .chip:nth-of-type(5) { transition-delay: .72s; }

@media (prefers-reduced-motion: reduce) {
  #scrollProgress { display: none; }
  .fw-line, .fw-num, .fw-card, .chip { transition: none; opacity: 1; transform: none;
    background-size: 100% 1px; }
}


/* ---------------------------------------------------------------------------
   Framework: three tabbed chapters, each with a sliding rail of topic cards.
   Every panel is in the DOM and visible without JS - the tabs only pace it.
--------------------------------------------------------------------------- */
.fw-tabs { display: flex; gap: 34px; position: relative; }
.fw-tab { position: relative; padding: 0 0 18px; text-align: left; cursor: pointer;
  background: none; border: 0; color: #6b6b6b; transition: color .35s ease; }
.fw-tab:hover { color: #335170; }
.fw-tab[aria-selected="true"] { color: #335170; }
.fw-tab .t-num { display: block; font-size: 12px; letter-spacing: .14em; opacity: .65; }
.fw-tab .t-lab { display: block; margin-top: 8px; font-size: 19px; line-height: 1.2; }
.fw-tabrail { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: #dcdcdc; }
.fw-tabline { position: absolute; bottom: 0; height: 2px; background: #335170;
  transition: transform .55s cubic-bezier(.16,1,.3,1), width .55s cubic-bezier(.16,1,.3,1); }

/* panels: only one shown once JS takes over */
.fw-has-js .fw-panel[hidden] { display: none; }
.fw-panel { animation: panelIn .6s cubic-bezier(.16,1,.3,1) both; }
@keyframes panelIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* the rail of topic cards */
.fw-slider { position: relative; }
.fw-track { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory;
  scroll-behavior: smooth; padding-bottom: 4px;
  scrollbar-width: none; -ms-overflow-style: none; }
.fw-track::-webkit-scrollbar { display: none; }
.fw-slide { flex: 0 0 300px; scroll-snap-align: start; border-top: 1px solid #dcdcdc;
  padding-top: 22px; }

/* on a wide screen every rail divides evenly: three across, or four if there
   are four cards. No card is ever cut in half. */
@media (min-width: 1024px) {
  .fw-slide { flex: 0 0 calc((100% - 40px) / 3); }
  .fw-track:has(> .fw-slide:nth-child(4)) .fw-slide { flex-basis: calc((100% - 60px) / 4); }
  .fw-track:has(> .fw-slide:nth-child(5)) .fw-slide { flex-basis: calc((100% - 80px) / 5); }
}

/* where it does scroll (narrow screens), the edge fades instead of chopping */
.fw-slider:not(.is-static) .fw-track {
  -webkit-mask-image: linear-gradient(to right, #000 0, #000 88%, transparent 100%);
          mask-image: linear-gradient(to right, #000 0, #000 88%, transparent 100%);
}

.fw-arrows { display: flex; gap: 10px; }
.fw-arrow { width: 42px; height: 42px; border: 1px solid #dcdcdc; background: #fff;
  color: #335170; display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; transition: border-color .3s ease, background .3s ease, opacity .3s ease; }
.fw-arrow:hover:not(:disabled) { border-color: #335170; background: #eef2f6; }
.fw-arrow:disabled { opacity: .3; cursor: default; }

.fw-bar { position: relative; height: 1px; background: #dcdcdc; flex: 1; }
.fw-bar span { position: absolute; left: 0; top: 0; height: 1px; background: #335170;
  transition: width .3s ease, transform .3s ease; }

@media (prefers-reduced-motion: reduce) {
  .fw-panel { animation: none; }
  .fw-track { scroll-behavior: auto; }
  .fw-tabline { transition: none; }
}


/* a rail whose cards already fit has nothing to slide: drop its controls */
.fw-slider.is-static .fw-arrows,
.fw-slider.is-static .fw-progress { display: none; }


/* any block introduced by a rule above it answers the cursor the same way */
.fw-top { transition: border-color .35s ease; }
.fw-top:hover { border-color: #335170; }


/* ---------------------------------------------------------------------------
   Chapter marker, taken from the deck: a small numbered label in letterspaced
   a small label with a rule beneath it, then the theme set in italic.
--------------------------------------------------------------------------- */
.fw-sec {
  display: block;
  font-size: 13px;
  letter-spacing: .04em;
  color: #335170;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .6s ease .1s, transform .7s cubic-bezier(.16,1,.3,1) .1s;
}
.fade-up.in .fw-sec { opacity: 1; transform: none; }

.fw-title {
  font-style: italic;
  letter-spacing: -.005em;
  color: #335170;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .7s ease .3s, transform .8s cubic-bezier(.16,1,.3,1) .3s;
}
.fade-up.in .fw-title { opacity: 1; transform: none; }

/* cards lift a little when the cursor is on them */
.fw-slide, .fw-top { transition: border-color .35s ease, transform .45s cubic-bezier(.16,1,.3,1); }
.fw-slide:hover, .fw-top:hover { transform: translateY(-3px); }


/* Alternating ground: white, then a quiet grey. Slightly cooler than neutral
   so it sits with the blue rather than looking dirty next to it. */
.band { background: #f4f6f9; }


/* "Exit realized" as a small sticker rather than a bullet and a caption */
/* The one outcome a card can carry is folded into its top corner like the tab
   on a file, rather than floating in the copy as a badge. It is the only solid
   mark on the card - every tag below it is a light fill or a hairline. */
.pf-flag {
  position: absolute;
  top: 0; right: 0;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 10px 7px 9px;
  /* square to the card's own corner, tucked in at the inner one */
  border-radius: 0 4px 0 12px;
  background: #335170;
  color: #fff;
  font-size: 9.5px; font-weight: 500;
  letter-spacing: .07em; text-transform: uppercase; line-height: 1;
  white-space: nowrap;
  transition: background .3s ease;
}
.pf-flag svg { width: 10px; height: 10px; flex: none; }
.group:hover .pf-flag { background: #24405c; }


/* ---------------------------------------------------------------------------
   Portfolio card tags. Three kinds, so a glance tells you which is which
   without reading: who the company sells to (solid), what it does (outlined),
   and what the facility is secured on (a dot, then the collateral).
--------------------------------------------------------------------------- */
.tag {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: 999px;
  font-size: 10.5px; letter-spacing: .05em; line-height: 1.5;
  white-space: nowrap;
  transition: background .3s ease, border-color .3s ease, color .3s ease;
}
/* what they do - leads the row, so it carries the weight */
.tag--sector { background: #e7eef7; color: #2c4966; }
/* who they sell to - a light stamp after it, not a second heavy block */
.tag--model  {
  border: 1px solid #d3dde8; color: #738699;
  padding: 2px 8px; font-size: 9.5px; letter-spacing: .13em;
}
/* what we lend against */
.tag--coll   { background: #eef2f6; color: #56687d; padding-left: 7px; }
.tag--coll::before {
  content: ''; width: 4px; height: 4px; border-radius: 999px;
  background: #97a8bb; flex: none;
}
.group:hover .tag--sector { background: #dbe6f2; color: #24405c; }
.group:hover .tag--model  { border-color: #aebdcf; color: #335170; }
.group:hover .tag--coll   { background: #e2eaf3; color: #3f5a76; }

.tag-row { display: flex; flex-wrap: wrap; gap: 5px; }


/* Portfolio cards: lifted off the grey band rather than boxed into it.
   A hairline border makes a card look stuck to the page; a soft shadow and a
   little travel on hover make it float. */
.pf-card {
  position: relative;                     /* anchors the corner tab */
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 1px 1px rgba(20,38,60,.035),
              0 10px 26px -16px rgba(20,38,60,.20);
  transition: transform .5s cubic-bezier(.16,1,.3,1),
              box-shadow .5s cubic-bezier(.16,1,.3,1);
}

/* only the flagged cards give up logo width, so the rest stay full size */
.pf-card:has(.pf-flag) .pf-logo { padding-right: 88px; }
a.pf-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 2px 4px rgba(20,38,60,.05),
              0 26px 46px -22px rgba(20,38,60,.30);
}
@media (prefers-reduced-motion: reduce) {
  a.pf-card:hover { transform: none; }
}


/* ---------------------------------------------------------------------------
   The two destination cards. The image is the card: text sits on it, over a
   gradient that deepens on hover while the picture pushes in behind it.
--------------------------------------------------------------------------- */
.dest {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 20px;
  background: #16273a;
  box-shadow: 0 1px 1px rgba(20,38,60,.04), 0 12px 30px -18px rgba(20,38,60,.24);
  transition: transform .55s cubic-bezier(.16,1,.3,1), box-shadow .55s ease;
}
.dest:hover { transform: translateY(-5px);
  box-shadow: 0 2px 5px rgba(20,38,60,.06), 0 30px 52px -24px rgba(20,38,60,.32); }

.dest img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.2s cubic-bezier(.16,1,.3,1);
}
.dest:hover img { transform: scale(1.06); }

.dest-veil {
  position: absolute; inset: 0;
  background: linear-gradient(to top,
    rgba(8,18,30,.90) 0%, rgba(8,18,30,.62) 38%, rgba(8,18,30,.18) 68%, rgba(8,18,30,.06) 100%);
  transition: opacity .55s ease;
}
.dest:hover .dest-veil { opacity: .92; }

/* a hairline that runs out under the label as the cursor arrives */
.dest-rule { display:block; height:1px; width:36px; background:rgba(255,255,255,.55);
  transition: width .6s cubic-bezier(.16,1,.3,1), background .4s ease; }
.dest:hover .dest-rule { width: 76px; background: #fff; }

.dest .arw { transition: transform .5s cubic-bezier(.16,1,.3,1); }
.dest:hover .arw { transform: translateX(7px); }

/* Three across, the copy is bottom-anchored, so a title that wraps to two
   lines pushes its whole block up and the row loses its baseline. Reserving
   the tallest case for the title and the blurb keeps the eyebrow, heading,
   text and link level from card to card. Lengths are in em, so this holds if
   the type scale changes. */
@media (min-width: 1024px) {
  .dest-title { min-height: 2.4em; }   /* two lines at 1.2 leading */
  .dest-copy  { min-height: 4.5em; }   /* three lines at 1.5 leading */
}

@media (prefers-reduced-motion: reduce) {
  .dest:hover { transform: none; }
  .dest:hover img { transform: none; }
}


/* Portfolio teaser: a single row that drifts continuously, so the selection
   reads as a sample of something larger. site.js clones the card list once and
   shifts the track by exactly one copy, so the loop is seamless
   and no card ever fades or blurs - it simply leaves at one edge and returns
   at the other. --pf-shift and --pf-dur are measured by site.js. */
.pf-teaser { overflow: hidden; }

.pf-teaser.is-live .pf-teaser-track {
  animation: pf-drift var(--pf-dur, 60s) linear infinite;
  will-change: transform;
}
@keyframes pf-drift {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(calc(-1 * var(--pf-shift, 0px)), 0, 0); }
}

/* hold still while someone is reading a card or tabbing through the row, and
   while the section is off screen */
.pf-teaser:hover .pf-teaser-track,
.pf-teaser:focus-within .pf-teaser-track,
.pf-teaser.is-paused .pf-teaser-track { animation-play-state: paused; }

/* before site.js has measured, and wherever motion is unwelcome, the row falls
   back to a plain scrollable strip showing the same cards */
.pf-teaser:not(.is-live) { overflow-x: auto; scrollbar-width: none; }
.pf-teaser:not(.is-live)::-webkit-scrollbar { display: none; }

@media (prefers-reduced-motion: reduce) {
  .pf-teaser-track { animation: none; }
  .pf-teaser { overflow-x: auto; }
}


/* ---------------------------------------------------------------------------
   Relief. The page is built from stacked bands; giving each edge a highlight
   above and a shadow below makes them read as planes with thickness rather
   than as flat colour changes, and lets one glide over the next.
--------------------------------------------------------------------------- */
.band {
  position: relative;
  border-radius: 34px;                    /* soft slab, no ruled edge */
  box-shadow: inset 0 1px 0 rgba(255,255,255,.75);
}
/* a soft falloff just inside the top of every grey band */
.band::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 40px;
  border-radius: 34px 34px 0 0;
  background: linear-gradient(to bottom, rgba(20,38,60,.022), rgba(20,38,60,0));
  pointer-events: none;
}
/* and the reverse under the white sections that follow one */

main > section:not(.cover) { position: relative; }

/* the cover sits above the first band, so its lower edge carries the shadow */
.cover { border-radius: 0 0 34px 34px; }
.cover-forms {
  -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 58%, rgba(0,0,0,.35) 84%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 0, #000 58%, rgba(0,0,0,.35) 84%, transparent 100%);
}


/* ---------------------------------------------------------------------------
   Slab layout. The page itself is a soft tinted ground; every section sits on
   it as a rounded panel with a gap between. Nothing is separated by a rule -
   separation comes from tone, radius and the ground showing through.
--------------------------------------------------------------------------- */
body { background: #e9edf2; }

/* ---------------------------------------------------------------------------
   The measure. Slabs stay full width - that is the whole look - but what sits
   on them stops growing at the width of a 13" laptop, which is the size the
   type, the grids and the photographs were drawn for. Past that the page gains
   margin, not scale, so a 27" screen shows the same page rather than an
   inflated one. Every horizontal container on the site carries .shell.
--------------------------------------------------------------------------- */
.shell {
  max-width: 1440px;        /* border-box, so 1328px of content inside px-14 */
  margin-left: auto;
  margin-right: auto;
}

main { padding: 0 10px 10px; }
main > section {
  border-radius: 26px;
  overflow: hidden;
  margin-bottom: 10px;
  background: #ffffff;
}
main > section:last-child { margin-bottom: 0; }

/* the alternating grey panel */
.band { background: #f4f6f9; border-radius: 26px; }
.band::before { border-radius: 26px 26px 0 0; }

/* the cover is a panel too, so the mark is contained by a soft corner */
.cover { border-radius: 26px; }

/* footer sits on the ground as its own panel */
footer { margin: 0 10px 10px; border-radius: 26px; background: #fff; overflow: hidden; }

/* controls take the same rounding */
header a[href^="mailto"], .newsletter-btn, #newsletterForm button { border-radius: 999px; }
#newsletterForm input { border-radius: 999px; }

@media (max-width: 640px) {
  main { padding: 0 6px 6px; }
  main > section, footer, .band, .cover { border-radius: 18px; }
  footer { margin: 0 6px 6px; }
}


/* .page-mark lives further down, with the rest of the page-opener rules. */


/* ---------------------------------------------------------------------------
   "Two ways to lend": each column is a card that answers the cursor. The Fost
   side sits a little forward by default so the comparison has a favourite.
--------------------------------------------------------------------------- */
.cmp-card {
  background: #f6f8fb;
  border-radius: 20px;
  padding: 22px 24px 6px;
  transition: transform .5s cubic-bezier(.16,1,.3,1),
              box-shadow .5s cubic-bezier(.16,1,.3,1),
              background .4s ease;
}
.cmp-card:hover {
  background: #fff;
  transform: translateY(-4px);
  box-shadow: 0 2px 4px rgba(20,38,60,.05), 0 24px 44px -24px rgba(20,38,60,.28);
}
.cmp-card--fost { background: #eff4f9; }
.cmp-card--fost:hover { box-shadow: 0 2px 4px rgba(51,81,112,.07), 0 26px 48px -24px rgba(51,81,112,.34); }

/* the accent bar that replaces the old top rule */
.cmp-rule {
  display: block; height: 3px; width: 44px; border-radius: 3px;
  background: #d3dae2; margin-bottom: 20px;
  transition: width .55s cubic-bezier(.16,1,.3,1), background .4s ease;
}
.cmp-card--fost .cmp-rule { background: #335170; }
.cmp-card:hover .cmp-rule { width: 84px; }

/* the rows inside lose their hard rules for something quieter */
.cmp-card .py-5 { border-color: rgba(20,38,60,.09); }

/* One side carries more words than the other, so left alone the two cards end
   at different heights. Stretch both to the taller one and give each card three
   equal rows, so "Lends against", "Sized on" and "Recovery rests on" also line
   up straight across the pair. */
.cmp-col  { display: flex; flex-direction: column; height: 100%; }
/* the "With Fost" badge above the card keeps its own width */
.cmp-col > span:first-child { align-self: flex-start; }
.cmp-col > .cmp-card { flex: 1; display: flex; flex-direction: column; }
.cmp-rows { flex: 1; display: grid; grid-auto-rows: 1fr; }

@media (prefers-reduced-motion: reduce) { .cmp-card:hover { transform: none; } }


/* --- strategy page: one shell, one card ---------------------------------
   Each block was arriving with its own grid, heading size and item treatment,
   which made the page read as five unrelated pages stacked up. They now share
   a single frame: heading and lead in a four-column rail on the left, content
   in the eight columns opposite, and every item the same card. Only the key on
   the left of a card changes - a step number, a rank, or a label.
---------------------------------------------------------------------------- */
.sec-h    { font-size: 25px; line-height: 1.3; font-weight: 500; color: #335170; }
.sec-lead { margin-top: 18px; font-size: 17px; line-height: 1.5; color: #3f3f3f; max-width: 40ch; }
@media (max-width: 1023px) { .sec-h { font-size: 22px; } }

.stack { display: flex; flex-direction: column; gap: 10px; }

.scard {
  position: relative;
  display: grid; grid-template-columns: 122px 1fr; gap: 22px; align-items: start;
  background: #f6f8fb; border-radius: 18px; padding: 22px 26px;
  transition: background .4s ease,
              transform .5s cubic-bezier(.16,1,.3,1),
              box-shadow .5s cubic-bezier(.16,1,.3,1);
}
.scard:hover {
  background: #fff; transform: translateY(-3px);
  box-shadow: 0 2px 4px rgba(20,38,60,.05), 0 20px 38px -22px rgba(20,38,60,.26);
}
.band .scard { background: #ffffff; }
.band .scard:hover { box-shadow: 0 2px 4px rgba(20,38,60,.04), 0 20px 38px -22px rgba(20,38,60,.22); }

.scard-k {
  padding-top: 3px;
  font-size: 13px; letter-spacing: .06em; text-transform: uppercase;
  color: #335170; font-variant-numeric: tabular-nums;
}
.scard-t { font-size: 19px; line-height: 1.3; color: #2f2f2f; }
.scard-b { margin-top: 8px; font-size: 16px; line-height: 1.5; color: #3f3f3f; }

/* a ranked row: the number leads in a narrow rail so the order is the first
   thing read, and the instruments sit as chips rather than as a list, which
   keeps four segments to a screen instead of a page */
.scard--rank { grid-template-columns: 34px 1fr; gap: 20px; padding: 20px 26px 22px; }
.scard--rank .scard-k { padding-top: 4px; font-size: 15px; }
@media (max-width: 639px) {
  .scard--rank { grid-template-columns: 1fr; gap: 6px; }
}


@media (max-width: 639px) {
  .scard { grid-template-columns: 1fr; gap: 10px; }
}
@media (prefers-reduced-motion: reduce) { .scard:hover { transform: none; } }


/* ---------------------------------------------------------------------------
   The argument of the page. By this point the reader has passed a comparison
   and a list of segments and is about to meet a process, so this block earns
   its weight from type and space rather than from another set of cards: the
   statement runs large down the left, and the three tests sit to the right
   separated by hairlines alone. Nothing here is boxed and nothing is numbered.
--------------------------------------------------------------------------- */

.feat-list > div { padding: 26px 0; border-top: 1px solid #dcdcdc; }
.feat-list > div:first-child { padding-top: 0; border-top: 0; }
.feat-list > div:last-child  { padding-bottom: 0; }

/* ---------------------------------------------------------------------------
   Relief. The page is built from stacked bands; giving each edge a highlight
   above and a shadow below makes them read as planes with thickness rather
   than as flat colour changes, and lets one glide over the next.
--------------------------------------------------------------------------- */
.band {
  position: relative;
  border-radius: 34px;                    /* soft slab, no ruled edge */
  box-shadow: inset 0 1px 0 rgba(255,255,255,.75);
}
/* a soft falloff just inside the top of every grey band */
.band::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 40px;
  border-radius: 34px 34px 0 0;
  background: linear-gradient(to bottom, rgba(20,38,60,.022), rgba(20,38,60,0));
  pointer-events: none;
}
/* and the reverse under the white sections that follow one */

main > section:not(.cover) { position: relative; }

/* the cover sits above the first band, so its lower edge carries the shadow */
.cover { border-radius: 0 0 34px 34px; }
.cover-forms {
  -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 58%, rgba(0,0,0,.35) 84%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 0, #000 58%, rgba(0,0,0,.35) 84%, transparent 100%);
}


/* ---------------------------------------------------------------------------
   Slab layout. The page itself is a soft tinted ground; every section sits on
   it as a rounded panel with a gap between. Nothing is separated by a rule -
   separation comes from tone, radius and the ground showing through.
--------------------------------------------------------------------------- */
body { background: #e9edf2; }

/* ---------------------------------------------------------------------------
   The measure. Slabs stay full width - that is the whole look - but what sits
   on them stops growing at the width of a 13" laptop, which is the size the
   type, the grids and the photographs were drawn for. Past that the page gains
   margin, not scale, so a 27" screen shows the same page rather than an
   inflated one. Every horizontal container on the site carries .shell.
--------------------------------------------------------------------------- */
.shell {
  max-width: 1440px;        /* border-box, so 1328px of content inside px-14 */
  margin-left: auto;
  margin-right: auto;
}

main { padding: 0 10px 10px; }
main > section {
  border-radius: 26px;
  overflow: hidden;
  margin-bottom: 10px;
  background: #ffffff;
}
main > section:last-child { margin-bottom: 0; }

/* the alternating grey panel */
.band { background: #f4f6f9; border-radius: 26px; }
.band::before { border-radius: 26px 26px 0 0; }

/* the cover is a panel too, so the mark is contained by a soft corner */
.cover { border-radius: 26px; }

/* footer sits on the ground as its own panel */
footer { margin: 0 10px 10px; border-radius: 26px; background: #fff; overflow: hidden; }

/* controls take the same rounding */
header a[href^="mailto"], .newsletter-btn, #newsletterForm button { border-radius: 999px; }
#newsletterForm input { border-radius: 999px; }

@media (max-width: 640px) {
  main { padding: 0 6px 6px; }
  main > section, footer, .band, .cover { border-radius: 18px; }
  footer { margin: 0 6px 6px; }
}


/* Page opener: the mark on a soft field, in place of stock photography */
.page-mark {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 22px;
  background:
    radial-gradient(120% 90% at 68% 34%, #e3ecf6 0%, rgba(227,236,246,0) 66%),
    linear-gradient(165deg, #f6f9fc 0%, #ffffff 100%);
}
.page-mark img {
  position: absolute;
  height: 82%; width: auto;
  right: -12%; top: 9%;
  opacity: .72;
}

/* A 4/3 frame costs .75 of height per pixel of width instead of 1.25, so the
   photograph can now fill its column without towering over the prose beside
   it. The old 420px cap was there to stop a 4/5 frame growing tall; with a
   landscape ratio it only left a dead strip between the text and the picture,
   so the frame tracks the grid and stops at the measure. */
@media (min-width: 1024px) {
  .page-mark {
    max-width: 660px;
    margin-left: auto;
  }
}

/* the same frame, carrying a photograph instead of the mark */
.page-mark--photo { background: #dbe4ee; }
.page-mark--photo img {
  inset: 0; right: auto; top: auto;
  width: 100%; height: 100%; object-fit: cover; opacity: 1;
}


/* ---------------------------------------------------------------------------
   "Two ways to lend": each column is a card that answers the cursor. The Fost
   side sits a little forward by default so the comparison has a favourite.
--------------------------------------------------------------------------- */
.cmp-card {
  background: #f6f8fb;
  border-radius: 20px;
  padding: 22px 24px 6px;
  transition: transform .5s cubic-bezier(.16,1,.3,1),
              box-shadow .5s cubic-bezier(.16,1,.3,1),
              background .4s ease;
}
.cmp-card:hover {
  background: #fff;
  transform: translateY(-4px);
  box-shadow: 0 2px 4px rgba(20,38,60,.05), 0 24px 44px -24px rgba(20,38,60,.28);
}
.cmp-card--fost { background: #eff4f9; }
.cmp-card--fost:hover { box-shadow: 0 2px 4px rgba(51,81,112,.07), 0 26px 48px -24px rgba(51,81,112,.34); }

/* the accent bar that replaces the old top rule */
.cmp-rule {
  display: block; height: 3px; width: 44px; border-radius: 3px;
  background: #d3dae2; margin-bottom: 20px;
  transition: width .55s cubic-bezier(.16,1,.3,1), background .4s ease;
}
.cmp-card--fost .cmp-rule { background: #335170; }
.cmp-card:hover .cmp-rule { width: 84px; }

/* the rows inside lose their hard rules for something quieter */
.cmp-card .py-5 { border-color: rgba(20,38,60,.09); }

/* One side carries more words than the other, so left alone the two cards end
   at different heights. Stretch both to the taller one and give each card three
   equal rows, so "Lends against", "Sized on" and "Recovery rests on" also line
   up straight across the pair. */
.cmp-col  { display: flex; flex-direction: column; height: 100%; }
/* the "With Fost" badge above the card keeps its own width */
.cmp-col > span:first-child { align-self: flex-start; }
.cmp-col > .cmp-card { flex: 1; display: flex; flex-direction: column; }
.cmp-rows { flex: 1; display: grid; grid-auto-rows: 1fr; }

@media (prefers-reduced-motion: reduce) { .cmp-card:hover { transform: none; } }

/* On a grey band the neutral card sits two values off the ground and all but
   vanishes, so the pair inverts the way .scard does: white for the plain side,
   the blue tint kept for the Fost side so the comparison still has a favourite. */
.band .cmp-card { background: #ffffff; }
.band .cmp-card--fost { background: #eff4f9; }


/* --- strategy page: one shell, one card ---------------------------------
   Each block was arriving with its own grid, heading size and item treatment,
   which made the page read as five unrelated pages stacked up. They now share
   a single frame: heading and lead in a four-column rail on the left, content
   in the eight columns opposite, and every item the same card. Only the key on
   the left of a card changes - a step number, a rank, or a label.
---------------------------------------------------------------------------- */
/* A short rule in the brand blue sits above each landing-page section
   heading, so the eye catches where one block ends and the next begins
   without needing a band of colour behind it. */
/* A hairline mark above each section heading on the strategy page. Drawn in
   the same stroke weight as the rules elsewhere, so it reads as part of the
   ruling rather than as an icon set bolted on. */
/* the mark sits above the heading, its own top flush with the top of the
   content alongside it, so every block starts on the same line */
.sec-ico { display: block; margin-bottom: 14px; color: #335170; line-height: 0; }
.sec-ico svg {
  width: 24px; height: 24px; display: block;
  stroke: currentColor; stroke-width: 1.25;
  stroke-linecap: round; stroke-linejoin: round;
}

.sec-mark { position: relative; padding-top: 20px; }
.sec-mark::before {
  content: ''; position: absolute; top: 0; left: 0;
  width: 40px; height: 3px; border-radius: 3px; background: #335170;
  transform: scaleX(0); transform-origin: left;
  transition: transform .7s cubic-bezier(.16,1,.3,1);
}
.fade-up.in .sec-mark::before,
.fade-up .sec-mark::before { transform: scaleX(1); }

.sec-h    { font-size: 25px; line-height: 1.3; font-weight: 500; color: #335170; }
.sec-lead { margin-top: 18px; font-size: 17px; line-height: 1.5; color: #3f3f3f; max-width: 40ch; }
@media (max-width: 1023px) { .sec-h { font-size: 22px; } }

.stack { display: flex; flex-direction: column; gap: 10px; }

.scard {
  position: relative;
  display: grid; grid-template-columns: 122px 1fr; gap: 22px; align-items: start;
  background: #f6f8fb; border-radius: 18px; padding: 22px 26px;
  transition: background .4s ease,
              transform .5s cubic-bezier(.16,1,.3,1),
              box-shadow .5s cubic-bezier(.16,1,.3,1);
}
.scard:hover {
  background: #fff; transform: translateY(-3px);
  box-shadow: 0 2px 4px rgba(20,38,60,.05), 0 20px 38px -22px rgba(20,38,60,.26);
}
.band .scard { background: #ffffff; }
.band .scard:hover { box-shadow: 0 2px 4px rgba(20,38,60,.04), 0 20px 38px -22px rgba(20,38,60,.22); }

/* Same inversion for the comparison pair. On white the cards are tinted and the
   Fost side is tinted a touch more; on a band that reading would collapse -
   #f6f8fb on #f4f6f9 is invisible - so both lift off the ground instead, with
   the Fost side kept brightest so it still sits forward. */
.band .cmp-card { background: #fafbfd; }
.band .cmp-card--fost { background: #ffffff; }

.scard-k {
  padding-top: 3px;
  font-size: 13px; letter-spacing: .06em; text-transform: uppercase;
  color: #335170; font-variant-numeric: tabular-nums;
}
.scard-t { font-size: 19px; line-height: 1.3; color: #2f2f2f; }
.scard-b { margin-top: 8px; font-size: 16px; line-height: 1.5; color: #3f3f3f; }

/* a ranked row: the number leads in a narrow rail so the order is the first
   thing read, and the instruments sit as chips rather than as a list, which
   keeps four segments to a screen instead of a page */
.scard--rank { grid-template-columns: 34px 1fr; gap: 20px; padding: 20px 26px 22px; }
.scard--rank .scard-k { padding-top: 4px; font-size: 15px; }
@media (max-width: 639px) {
  .scard--rank { grid-template-columns: 1fr; gap: 6px; }
}


@media (max-width: 639px) {
  .scard { grid-template-columns: 1fr; gap: 10px; }
}
@media (prefers-reduced-motion: reduce) { .scard:hover { transform: none; } }


/* ---------------------------------------------------------------------------
   The argument of the page. By this point the reader has passed a comparison
   and a list of segments and is about to meet a process, so this block earns
   its weight from type and space rather than from another set of cards: the
   statement runs large down the left, and the three tests sit to the right
   separated by hairlines alone. Nothing here is boxed and nothing is numbered.
--------------------------------------------------------------------------- */

.feat-list > div { padding: 26px 0; border-top: 1px solid #dcdcdc; }
.feat-list > div:first-child { padding-top: 0; border-top: 0; }
.feat-list > div:last-child  { padding-bottom: 0; }

/* ---------------------------------------------------------------------------
   The coda. Every block above it is a shape of its own, so the page needs to
   land rather than present one more of them: this one is centred, unboxed and
   short. Three capabilities divided by hairlines, nothing enclosed, and the
   only centred block on the page - which is what makes it read as an ending.
--------------------------------------------------------------------------- */
.coda { max-width: 1040px; margin: 0 auto; text-align: center; }
.coda-h { font-size: 30px; line-height: 1.25; letter-spacing: -.01em;
          font-weight: 400; color: #335170; }
.coda-lead { margin: 18px auto 0; max-width: 62ch;
             font-size: 17px; line-height: 1.6; color: #3f3f3f; }

.coda-row { margin-top: 54px; display: grid; grid-template-columns: repeat(3, 1fr);
            gap: 0 44px; }
.coda-row > div { position: relative; }
/* a hairline between them, never around them */
.coda-row > div + div::before {
  content: ''; position: absolute; left: -22px; top: 2px; bottom: 2px;
  width: 1px; background: #dcdcdc;
}
.coda-k { display: block; font-size: 12px; letter-spacing: .13em;
          text-transform: uppercase; color: #6b6b6b; }
.coda-t { margin-top: 12px; font-size: 17px; line-height: 1.45; color: #2f2f2f; }

@media (max-width: 1023px) {
  .coda-h { font-size: 24px; }
  .coda-row { margin-top: 38px; grid-template-columns: 1fr; gap: 26px 0; }
  .coda-row > div + div::before {
    left: 0; right: 0; top: -13px; bottom: auto; width: auto; height: 1px;
  }
}

@media (max-width: 1023px) {
  .feat-list > div { padding: 22px 0; }
}


/* --- framework page, brought onto the site's own card language ----------
   It used to run its own system: italic caps themes, horizontal rails with
   arrows and progress bars, hard ruled lists. It now uses the same eyebrow,
   heading and soft card as every other page.
--------------------------------------------------------------------------- */
.eyebrow { font-size: 13px; letter-spacing: .03em; color: #6b6b6b; }

/* the strategy page's card, without the key column - the title carries it */
.scard--plain { grid-template-columns: 1fr; }
.scard--plain .scard-t { font-size: 19px; }

.scard--plain ul { margin-top: 15px; }
.scard--plain li {
  display: flex; align-items: baseline; gap: 10px;
  padding: 9px 0; border-top: 1px solid rgba(20,38,60,.09);
  font-size: 15px; line-height: 1.45; color: #3f3f3f;
}
.scard--plain li::before {
  content: ''; align-self: flex-start; margin-top: 8px;
  width: 4px; height: 4px; border-radius: 999px; background: #a9b7c6; flex: none;
}
.scard--plain .chip-row { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 8px; }


/* --- pill button ------------------------------------------------------- */
.pill {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 7px 8px 7px 16px; border-radius: 999px;
  background: #eef2f6; color: #335170;
  font-size: 13px; letter-spacing: .02em; white-space: nowrap;
  transition: background .35s ease, color .35s ease;
}
.pill .pill-go {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 999px;
  background: #335170; color: #fff; font-size: 12px;
  transition: transform .45s cubic-bezier(.16,1,.3,1);
}
.pill:hover { background: #335170; color: #fff; }
.pill:hover .pill-go { background: #fff; color: #335170; transform: translateX(3px); }
.on-dark .pill { background: rgba(255,255,255,.10); color: #fff; }
.on-dark .pill:hover { background: #fff; color: #14273b; }
.on-dark .pill .pill-go { background: #fff; color: #14273b; }
.on-dark .pill:hover .pill-go { background: #14273b; color: #fff; }


/* the language switch as a small pill */
.lang-pill {
  display: inline-flex; align-items: center; justify-content: center;
  height: 30px; min-width: 42px; padding: 0 12px; border-radius: 999px;
  border: 1px solid #dcdcdc; background: transparent;
  font-family: 'DM Mono', ui-monospace, monospace;
  font-size: 12px; letter-spacing: .08em; color: #6b6b6b;
  transition: border-color .3s ease, color .3s ease, background .3s ease;
}
.lang-pill:hover { border-color: #335170; background: #335170; color: #fff; }
header .pill { padding: 6px 6px 6px 15px; font-size: 13px; }
header .pill .pill-go { width: 22px; height: 22px; }