/* Dcycle site footer.
   Shared by the homepage and the work page, so the two cannot drift. The
   homepage adds the scroll reveal by wrapping its content in #pagewrap; any
   page without that wrapper gets an ordinary footer at the end of the flow. */
/* ── footer: the page slides off it, so it is revealed rather than scrolled to ─ */
#pagewrap{position:relative;z-index:1;background:#FFFFFF}
.ftx{background:#0A0A0A;color:#FFFFFF;position:relative;z-index:0;overflow:hidden}
/* the mobile sticky CTA bar would otherwise sit on top of the wordmark.
   Measured at 75.5px tall at 390px wide, so 74px left it grazing the
   wordmark's last pixels — 84 gives it real clearance. */
@media(max-width:767px){.ftx{padding-bottom:84px}}
html.ftx-reveal .ftx{position:fixed;left:0;right:0;bottom:0}

.ftx-in{max-width:1280px;margin:0 auto;padding:56px 24px 0}
@media(min-width:1024px){.ftx-in{padding:56px 40px 0}}

.ftx-k{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.22em;
  text-transform:uppercase;color:rgba(255,255,255,.42)}

/* say hello */
.ftx-top{display:flex;flex-direction:column;gap:26px;padding-bottom:32px}
@media(min-width:900px){.ftx-top{flex-direction:row;align-items:flex-end;justify-content:space-between;gap:48px}}
.ftx-say{font-family:'Archivo',sans-serif;font-weight:800;letter-spacing:-.045em;line-height:1.02;
  font-size:clamp(2.1rem,4.6vw,3.3rem);margin-top:14px}
.ftx-say em{font-family:'Instrument Serif',serif;font-style:italic;font-weight:400;
  color:rgba(255,255,255,.72)}
.ftx-mail{display:inline-flex;align-items:center;gap:14px;flex:none;
  border:1px solid rgba(255,255,255,.22);border-radius:100px;padding:15px 16px 15px 26px;
  font-family:'Archivo',sans-serif;font-weight:600;font-size:clamp(14px,1.5vw,16.5px);
  color:#fff;transition:background .3s ease,color .3s ease,border-color .3s ease}
.ftx-mail svg{width:17px;height:17px;flex:none;transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.ftx-mail:hover{background:#EFC63F;border-color:#EFC63F;color:#0A0A0A}
.ftx-mail:hover svg{transform:translateX(4px)}

/* link columns */
.ftx-cols{display:grid;grid-template-columns:1fr 1fr;gap:36px 24px;
  border-top:1px solid rgba(255,255,255,.12);padding:26px 0}
@media(min-width:760px){.ftx-cols{grid-template-columns:repeat(4,1fr);gap:32px}}
.ftx-h{font-family:'Archivo',sans-serif;font-weight:700;font-size:12.5px;
  letter-spacing:.02em;margin-bottom:18px}
.ftx-list{display:flex;flex-direction:column;gap:11px}
.ftx-list a{font-size:13.5px;color:rgba(255,255,255,.56);
  background-image:linear-gradient(#fff,#fff);background-size:0% 1px;background-repeat:no-repeat;
  background-position:left 100%;transition:background-size .3s ease,color .3s ease}
.ftx-list a:hover{color:#fff;background-size:100% 1px}

/* markets, as flags */
.ftx-markets{border-top:1px solid rgba(255,255,255,.12);padding:18px 0;
  display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px}
.ftx-markets ul{display:flex;flex-wrap:wrap;gap:10px}
.ftx-markets li{position:relative;display:flex}
.ftx-markets img{width:30px;height:22px;border-radius:3px;object-fit:cover;
  box-shadow:0 0 0 1px rgba(255,255,255,.22);
  transition:transform .25s ease,box-shadow .25s ease}
.ftx-markets li:hover img,.ftx-markets li:focus-within img{transform:translateY(-3px);
  box-shadow:0 0 0 1px rgba(255,255,255,.5),0 8px 16px rgba(0,0,0,.5)}
.ftx-flag-t{position:absolute;bottom:calc(100% + 9px);left:50%;transform:translateX(-50%);
  white-space:nowrap;background:#fff;color:#0A0A0A;border-radius:6px;
  font-size:11.5px;font-weight:600;padding:5px 9px;pointer-events:none;
  opacity:0;transition:opacity .2s ease;z-index:5}
.ftx-flag-t b{margin-left:7px;opacity:.5;font-variant-numeric:tabular-nums}
.ftx-markets li:hover .ftx-flag-t,.ftx-markets li:focus-within .ftx-flag-t{opacity:1}

/* base line */
.ftx-base{border-top:1px solid rgba(255,255,255,.12);padding:18px 0 20px;
  display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;
  font-size:12.5px;color:rgba(255,255,255,.45)}
@media(min-width:900px){.ftx-base{flex-direction:row;justify-content:space-between;text-align:left}}
.ftx-brand{display:flex;align-items:center;gap:8px;color:#fff}
.ftx-brand svg{height:26px;width:auto}
.ftx-brand svg path{fill:#fff}
.ftx-brand .wordmark{font-size:17px;line-height:1}
.ftx-legal{display:flex;gap:20px}
.ftx-legal a{transition:color .25s ease}
.ftx-legal a:hover{color:#fff}

/* the wordmark, oversized and clipped by the bottom edge of the page */
/* The giant wordmark.
   The size is set by script (see the fit routine in the footer script), not by
   a vw number: a fixed vw was calibrated against one font, so as soon as
   Archivo actually loaded the word grew past the right edge. The vw value
   below is only the no-JS fallback and is deliberately conservative.
   width:max-content + margin:auto centres the word on its own ink, and the
   padding-right gives back the trailing letter-space that the negative
   tracking removes after the final glyph — without it the word sits half a
   letter-space right of centre. */
.ftx-huge{overflow:hidden;line-height:0;padding:0 12px;height:min(15vw,175px);
  -webkit-user-select:none;user-select:none}
@media(min-width:1024px){.ftx-huge{padding:0 24px}}
.ftx-huge span{display:block;width:max-content;max-width:none;margin:0 auto;
  white-space:nowrap;padding-right:.055em;
  font-family:'Archivo',sans-serif;font-weight:900;
  letter-spacing:-.055em;font-size:26vw;line-height:.7;text-align:center;
  color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.2);
  transition:color .6s ease,-webkit-text-stroke-color .6s ease}
.ftx:hover .ftx-huge span{color:rgba(255,255,255,.07);-webkit-text-stroke-color:rgba(255,255,255,.38)}
@supports not ((-webkit-text-stroke:1px #000)){.ftx-huge span{color:rgba(255,255,255,.09)}}
@media(prefers-reduced-motion:reduce){
  .ftx-huge span,.ftx-mail,.ftx-mail svg,.ftx-markets img,.ftx-flag-t{transition:none}
}

/* a page with no #pagewrap wrapper never reveals: keep it in the flow */
.ftx-static{position:relative!important}