/* ==========================================================================
   Flexengo design system
   Based on the Focus Design brand manual (Flexengo_presentatie_v1.1.pdf).
   Single source of truth for both sites and the styleguide.
   Token names map 1:1 onto the future Tailwind theme.

   Contents
     1. Tokens            7. Header and mobile navigation
     2. Base              8. Footer
     3. Typography        9. Blocks
     4. Layout           10. Motion primitives
     5. Logo and motif   11. Reduced motion
     6. Buttons, forms   12. Concept banner
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Font
   Outfit, self-hosted. Two files cover every weight — it is a variable font.
   No request to Google, so no visitor IP leaves for a third party, and no
   flash of fallback text reflowing the navigation on every page load.

   font-display: swap is deliberately absent: these files are same-origin and
   render-blocking for a few milliseconds at most. Letting them block avoids
   the swap entirely.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 100 900;
  src: url('fonts/outfit-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 100 900;
  src: url('fonts/outfit-latin-ext.woff2') format('woff2');
  /* Polish needs this subset: ą ć ę ł ń ś ź ż all live above U+0100. */
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Brand — straight from the manual */
  --fx-blue:        #169FDB;  /* C75 M20 Y0 K0  · R22 G159 B219 */
  --fx-ink:         #3C3C3B;  /* C0 M0 Y0 K90   · R60 G60 B59  */

  /* Derived. --fx-blue on white is only 3.0:1, enough for large text and UI
     shapes but not for body copy. --fx-blue-ink is the darkened variant for
     small text on light backgrounds (5.6:1). */
  --fx-blue-ink:    #0C6F9B;
  --fx-blue-dark:   #0F7FB0;
  --fx-blue-tint:   #E7F4FB;
  --fx-ink-2:       #5A5A58;
  --fx-ink-soft:    #C2C4C3;  /* body copy on --fx-ink, 6.3:1 */
  --fx-sand:        #F4F6F7;
  --fx-line:        #E4E8EA;
  --fx-line-dark:   rgba(255,255,255,.14);
  --fx-white:       #FFFFFF;

  /* Spacing */
  --fx-1: 4px;  --fx-2: 8px;  --fx-3: 12px; --fx-4: 16px;
  --fx-5: 24px; --fx-6: 32px; --fx-7: 48px; --fx-8: 64px;
  --fx-9: 80px; --fx-10: 112px;

  /* Radius */
  --fx-r-sm: 4px;
  --fx-r-md: 6px;

  /* Elevation */
  --fx-sh-sm: 0 2px 8px rgba(0,0,0,.06);
  --fx-sh-md: 0 6px 22px rgba(0,0,0,.10);
  --fx-sh-lg: 0 14px 44px rgba(0,0,0,.14);

  /* Layout */
  --fx-container: 1200px;
  --fx-gutter: 20px;
  --fx-header-h: 62px;

  /* Motion. Two curves only: --fx-ease for state changes the user caused,
     --fx-ease-out for things that arrive on their own. */
  --fx-ease:     cubic-bezier(.22, .61, .36, 1);
  --fx-ease-out: cubic-bezier(.16, 1, .3, 1);
  --fx-t-1: 150ms;   /* hover, focus */
  --fx-t-2: 280ms;   /* small movement */
  --fx-t-3: 520ms;   /* entrance */
  --fx-t-4: 760ms;   /* large entrance, image scale */
  --fx-stagger: 70ms;
}

@media (min-width: 700px)  { :root { --fx-gutter: 32px; --fx-header-h: 76px; } }
@media (min-width: 1000px) { :root { --fx-gutter: 40px; } }

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--fx-header-h) + var(--fx-4));
}

/* Smooth scrolling is for anchors clicked inside a page, never for the jump
   the browser makes when a URL with a fragment is opened. Without this split,
   navigating to contact.html#zoekopdracht makes the new page visibly scroll
   itself from the top — which reads as a glitch, not as polish. The class is
   set by the script one frame after load, when that initial jump is done. */
html.fx-ready { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 16px;
  line-height: 1.68;
  color: var(--fx-ink);
  background: var(--fx-white);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;      /* the hero's off-canvas diamonds must never scroll the page */
}

body.fx-locked { overflow: hidden; }

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }

:focus-visible {
  outline: 3px solid var(--fx-blue);
  outline-offset: 2px;
  border-radius: 2px;
}
.fx-header :focus-visible,
.fx-hero   :focus-visible { outline-color: var(--fx-white); }

.fx-skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--fx-white); color: var(--fx-blue-ink);
  padding: var(--fx-3) var(--fx-5); font-weight: 700;
}
.fx-skip:focus { left: var(--fx-3); top: var(--fx-3); }

.fx-visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* --------------------------------------------------------------------------
   3. Typography
   Every size is fluid. The listed values are the desktop maximum.
   -------------------------------------------------------------------------- */
.fx-display,
.fx-h1 {
  font-size: clamp(32px, 5.6vw, 58px);
  font-weight: 800; line-height: 1.04; letter-spacing: -.028em;
  margin: 0 0 var(--fx-5);
  text-wrap: balance;
}
.fx-h2 {
  font-size: clamp(25px, 3.6vw, 36px);
  font-weight: 700; line-height: 1.14; letter-spacing: -.025em;
  margin: 0 0 var(--fx-4);
  text-wrap: balance;
}
.fx-h3 { font-size: clamp(20px, 2.4vw, 24px); font-weight: 700; line-height: 1.22; margin: 0 0 var(--fx-3); }
.fx-h4 { font-size: clamp(17px, 1.6vw, 18px); font-weight: 700; line-height: 1.32; margin: 0 0 var(--fx-2); }

.fx-lead  { font-size: clamp(16.5px, 1.8vw, 19px); line-height: 1.58; margin: 0 0 var(--fx-6); text-wrap: pretty; }
.fx-body  { font-size: clamp(15.5px, 1.4vw, 16px); line-height: 1.68; color: var(--fx-ink-2); max-width: 62ch; margin: 0 0 var(--fx-4); text-wrap: pretty; }
.fx-small { font-size: 14.5px; line-height: 1.6; color: var(--fx-ink-2); }

.fx-label {
  font-size: clamp(11px, 1.1vw, 12px);
  letter-spacing: .2em; text-transform: uppercase; font-weight: 700;
  color: var(--fx-blue-ink); margin: 0 0 var(--fx-3); display: block;
}

.fx-on-dark .fx-label,
.fx-on-blue .fx-label { color: rgba(255,255,255,.78); }
.fx-on-dark .fx-body,
.fx-on-dark .fx-small { color: var(--fx-ink-soft); }
.fx-on-blue .fx-body,
.fx-on-blue .fx-lead  { color: rgba(255,255,255,.92); }
.fx-on-dark, .fx-on-blue { color: var(--fx-white); }

/* --------------------------------------------------------------------------
   4. Layout
   -------------------------------------------------------------------------- */
.fx-container { max-width: var(--fx-container); margin: 0 auto; padding: 0 var(--fx-gutter); }

.fx-section { padding: var(--fx-9) 0; scroll-margin-top: var(--fx-header-h); }
@media (max-width: 699px) { .fx-section { padding: var(--fx-8) 0; } }

.fx-section--sand { background: var(--fx-sand); }
.fx-section--ink  { background: var(--fx-ink); }
.fx-section--blue { background: var(--fx-blue); }

.fx-center { text-align: center; }
.fx-center .fx-body,
.fx-center .fx-lead { margin-left: auto; margin-right: auto; }

.fx-intro { max-width: 62ch; }
.fx-center .fx-intro { margin: 0 auto; }

/* --------------------------------------------------------------------------
   5. Logo and the diamond motif
   Logo files are extracted as vector straight from the brand manual
   (Flexengo_presentatie_v1.1.pdf, page 4). Never redraw them in CSS.

     flexengo-logo.svg          full lockup incl. payoff — from 360px wide
     flexengo-logo-compact.svg  mark + wordmark          — from 120px wide
     flexengo-mark.svg          mark only                — from 24px wide
   Add -inverse for the diapositive versions on dark or blue surfaces.

   The diamond below is not the logo. It is a motif derived from it.
   -------------------------------------------------------------------------- */
.fx-diamond { clip-path: polygon(0 50%, 50% 0, 100% 50%, 50% 100%); }

.fx-logo { display: inline-flex; align-items: center; flex: none; }
.fx-logo__img { display: block; height: 30px; width: auto; }
@media (min-width: 700px) { .fx-logo__img { height: 34px; } }
.fx-logo--sm .fx-logo__img { height: 28px; }

/* --------------------------------------------------------------------------
   6. Buttons and forms
   -------------------------------------------------------------------------- */
.fx-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--fx-2);
  font-family: inherit; font-size: 16px; font-weight: 700; line-height: 1;
  padding: 15px 28px; border-radius: var(--fx-r-sm); border: 1.5px solid transparent;
  cursor: pointer; text-align: center; min-height: 48px;
  transition: background-color var(--fx-t-1) var(--fx-ease),
              color var(--fx-t-1) var(--fx-ease),
              border-color var(--fx-t-1) var(--fx-ease),
              transform var(--fx-t-1) var(--fx-ease),
              box-shadow var(--fx-t-2) var(--fx-ease);
}
.fx-btn--sm { font-size: 14px; padding: 10px 18px; min-height: 42px; }

.fx-btn--primary { background: var(--fx-blue); color: var(--fx-white); }
.fx-btn--primary:hover { background: var(--fx-blue-dark); box-shadow: 0 8px 22px rgba(22,159,219,.32); }

.fx-btn--outline { background: transparent; color: var(--fx-blue-ink); border-color: var(--fx-blue); }
.fx-btn--outline:hover { background: var(--fx-blue-tint); }

.fx-btn--white { background: var(--fx-white); color: var(--fx-blue-ink); box-shadow: var(--fx-sh-md); }
.fx-btn--white:hover { background: #F2FAFE; box-shadow: 0 12px 30px rgba(0,0,0,.2); }

.fx-btn--ghost { background: transparent; color: var(--fx-white); border-color: rgba(255,255,255,.5); }
.fx-btn--ghost:hover { background: rgba(255,255,255,.14); border-color: var(--fx-white); }

.fx-btn--block { display: flex; width: 100%; }
.fx-btn[aria-disabled="true"] { opacity: .45; pointer-events: none; }

/* Lift on hover, settle on press. */
.fx-btn:hover  { transform: translateY(-2px); }
.fx-btn:active { transform: translateY(0); transition-duration: 60ms; }

/* Optional trailing arrow that nudges forward. */
.fx-btn--arrow::after {
  content: '→'; font-size: 1.05em; line-height: 1;
  transition: transform var(--fx-t-2) var(--fx-ease-out);
}
.fx-btn--arrow:hover::after { transform: translateX(4px); }

.fx-link {
  font-weight: 600; color: var(--fx-blue-ink); position: relative;
  transition: color var(--fx-t-1) var(--fx-ease);
}
.fx-link::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px;
  background: var(--fx-blue); transform-origin: right; transform: scaleX(1);
  transition: transform var(--fx-t-2) var(--fx-ease-out);
}
.fx-link:hover { color: var(--fx-blue); }
.fx-link:hover::after { transform-origin: left; transform: scaleX(1.001); }

/* ---- forms ---- */
.fx-field { margin-bottom: var(--fx-4); }

.fx-field label,
.fx-label-form {
  display: block; font-size: 13px; font-weight: 600;
  color: var(--fx-ink); margin-bottom: var(--fx-2);
}
.fx-optional { font-weight: 400; color: var(--fx-ink-2); }

.fx-input, .fx-select, .fx-textarea {
  width: 100%; font-family: inherit; font-size: 16px; color: var(--fx-ink);
  background: #FAFBFB; border: 1px solid var(--fx-line); border-radius: var(--fx-r-sm);
  padding: 0 14px; height: 48px;
  transition: border-color var(--fx-t-1) var(--fx-ease), box-shadow var(--fx-t-1) var(--fx-ease),
              background-color var(--fx-t-1) var(--fx-ease);
}
.fx-textarea { height: auto; min-height: 112px; padding: 13px 14px; line-height: 1.6; resize: vertical; }
.fx-select { appearance: none; padding-right: 40px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%235A5A58' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 12px; }

.fx-input:hover, .fx-select:hover, .fx-textarea:hover { border-color: #CFD8DC; }
.fx-input:focus, .fx-select:focus, .fx-textarea:focus {
  outline: none; border-color: var(--fx-blue); background: var(--fx-white);
  box-shadow: 0 0 0 3px rgba(22,159,219,.18);
}
.fx-input::placeholder, .fx-textarea::placeholder { color: #A8AFB2; }

.fx-field--error .fx-input,
.fx-field--error .fx-select,
.fx-field--error .fx-textarea { border-color: #C0392B; background: #FDF6F5; }
.fx-error { display: block; font-size: 12.5px; font-weight: 600; color: #B03325; margin-top: var(--fx-2); }
.fx-help  { display: block; font-size: 12.5px; color: var(--fx-ink-2); margin-top: var(--fx-2); }

.fx-file {
  display: block; border: 1.5px dashed var(--fx-line); border-radius: var(--fx-r-sm);
  background: #FAFBFB; padding: var(--fx-5); text-align: center; cursor: pointer;
  transition: border-color var(--fx-t-2) var(--fx-ease), background-color var(--fx-t-2) var(--fx-ease);
}
.fx-file:hover { border-color: var(--fx-blue); background: var(--fx-blue-tint); }
.fx-file strong { display: block; font-size: 15px; color: var(--fx-blue-ink); margin-bottom: var(--fx-1); }
.fx-file span   { font-size: 12.5px; color: var(--fx-ink-2); }
.fx-file:focus-within { border-color: var(--fx-blue); box-shadow: 0 0 0 3px rgba(22,159,219,.18); }

.fx-check { display: flex; gap: var(--fx-3); align-items: flex-start; font-size: 13.5px;
            line-height: 1.55; cursor: pointer; padding: var(--fx-1) 0; }
.fx-check input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--fx-blue); flex: none; }

.fx-row { display: grid; gap: var(--fx-3); }
@media (min-width: 560px) { .fx-row--2 { grid-template-columns: 1fr 1fr; } }

.fx-formcard {
  background: var(--fx-white); border-radius: var(--fx-r-md);
  padding: var(--fx-6); box-shadow: var(--fx-sh-lg);
}
@media (max-width: 559px) { .fx-formcard { padding: var(--fx-5) var(--fx-4); } }

.fx-formnote { font-size: 12px; color: var(--fx-ink-2); line-height: 1.5; margin: var(--fx-3) 0 0; text-align: center; }

/* --------------------------------------------------------------------------
   7. Header and mobile navigation
   One <nav>. On desktop it is a row; below 1024px the same element becomes a
   full-height panel. No duplicated markup, so the links can never drift apart.
   -------------------------------------------------------------------------- */
.fx-header {
  background: var(--fx-ink); color: var(--fx-white);
  position: sticky; top: 0; z-index: 100;
  transition: box-shadow var(--fx-t-2) var(--fx-ease), background-color var(--fx-t-2) var(--fx-ease);
}
.fx-header.is-stuck { box-shadow: 0 6px 26px rgba(0,0,0,.28); }
.fx-header > .fx-container {
  display: flex; align-items: center; justify-content: space-between; gap: var(--fx-4);
  min-height: var(--fx-header-h);
}

.fx-nav { display: flex; align-items: center; gap: var(--fx-6); }
.fx-nav__links { display: flex; align-items: center; gap: var(--fx-6); list-style: none; margin: 0; padding: 0; }
.fx-nav__links a {
  position: relative; display: block; font-size: 15px; font-weight: 500;
  color: rgba(255,255,255,.85); padding: var(--fx-2) 0;
  transition: color var(--fx-t-1) var(--fx-ease);
}
.fx-nav__links a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--fx-blue); transform: scaleX(0); transform-origin: right;
  transition: transform var(--fx-t-2) var(--fx-ease-out);
}
.fx-nav__links a:hover { color: var(--fx-white); }
.fx-nav__links a:hover::after,
.fx-nav__links a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }

.fx-nav__lang {
  font-size: 13px; font-weight: 600; color: rgba(255,255,255,.6);
  border-left: 1px solid var(--fx-line-dark); padding: var(--fx-2) 0 var(--fx-2) var(--fx-5);
  transition: color var(--fx-t-1) var(--fx-ease);
}
.fx-nav__lang:hover { color: var(--fx-white); }

/* ---- burger ---- */
.fx-burger {
  display: none; position: relative; width: 48px; height: 48px; margin-right: -12px;
  background: none; border: 0; padding: 0; cursor: pointer; color: var(--fx-white);
}
.fx-burger__bar, .fx-burger__bar::before, .fx-burger__bar::after {
  position: absolute; left: 50%; width: 24px; height: 2px; margin-left: -12px;
  background: currentColor; border-radius: 2px;
  transition: transform var(--fx-t-2) var(--fx-ease), opacity var(--fx-t-1) var(--fx-ease);
}
.fx-burger__bar { top: 50%; margin-top: -1px; }
.fx-burger__bar::before { content: ''; margin-left: -12px; transform: translateY(-7px); }
.fx-burger__bar::after  { content: ''; margin-left: -12px; transform: translateY(7px); }

.fx-burger[aria-expanded="true"] .fx-burger__bar { transform: rotate(45deg); }
.fx-burger[aria-expanded="true"] .fx-burger__bar::before { transform: translateY(0) rotate(-90deg); }
.fx-burger[aria-expanded="true"] .fx-burger__bar::after  { opacity: 0; transform: translateY(0); }

/* ---- the panel ---- */
@media (max-width: 1023px) {
  .fx-burger { display: block; }

  .fx-nav {
    position: fixed; inset: var(--fx-header-h) 0 0 0; z-index: 90;
    display: block; overflow-y: auto; overscroll-behavior: contain;
    background: var(--fx-ink);
    padding: var(--fx-6) 0 var(--fx-8);
    opacity: 0; visibility: hidden; transform: translateY(-10px);
    transition: opacity var(--fx-t-2) var(--fx-ease),
                transform var(--fx-t-2) var(--fx-ease),
                visibility 0s linear var(--fx-t-2);
  }
  .fx-nav.is-open {
    opacity: 1; visibility: visible; transform: none;
    transition: opacity var(--fx-t-2) var(--fx-ease),
                transform var(--fx-t-3) var(--fx-ease-out),
                visibility 0s;
  }

  .fx-nav > * { padding-left: var(--fx-gutter); padding-right: var(--fx-gutter); }

  .fx-nav__links { display: block; margin-bottom: var(--fx-5); }
  .fx-nav__links li { border-bottom: 1px solid var(--fx-line-dark); }
  .fx-nav__links a {
    font-size: 20px; font-weight: 600; color: var(--fx-white);
    padding: var(--fx-4) 0; min-height: 56px; display: flex; align-items: center;
  }
  .fx-nav__links a::after { display: none; }

  /* Links slide in one after the other, but only while the panel opens. */
  .fx-nav.is-open .fx-nav__links li,
  .fx-nav.is-open .fx-nav__cta,
  .fx-nav.is-open .fx-nav__lang {
    animation: fx-menu-in var(--fx-t-3) var(--fx-ease-out) both;
    animation-delay: calc(60ms + var(--i, 0) * var(--fx-stagger));
  }

  .fx-nav__cta { display: flex; width: calc(100% - var(--fx-gutter) * 2); margin: 0 var(--fx-gutter); }
  .fx-nav__lang {
    display: inline-block; border-left: 0; padding: var(--fx-5) 0 0;
    font-size: 15px; color: rgba(255,255,255,.7);
  }
}

@keyframes fx-menu-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   8. Footer
   -------------------------------------------------------------------------- */
.fx-footer { background: #2E2E2D; color: var(--fx-ink-soft); padding: var(--fx-8) 0 0; }
.fx-footer__grid { display: grid; gap: var(--fx-6); padding-bottom: var(--fx-7); }
@media (min-width: 700px)  { .fx-footer__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .fx-footer__grid { grid-template-columns: 1.6fr 1fr 1fr 1.3fr; } }

.fx-footer h2 { font-size: 13px; font-weight: 700; color: var(--fx-white); margin: 0 0 var(--fx-4); letter-spacing: .02em; }
.fx-footer p, .fx-footer a { font-size: 14.5px; line-height: 1.9; color: var(--fx-ink-soft); }
.fx-footer a { display: block; transition: color var(--fx-t-1) var(--fx-ease); }
.fx-footer a:hover { color: var(--fx-white); }

.fx-footer__bottom {
  border-top: 1px solid var(--fx-line-dark); padding: var(--fx-4) 0;
  display: flex; flex-wrap: wrap; gap: var(--fx-2) var(--fx-5);
  justify-content: space-between; font-size: 12.5px; color: rgba(255,255,255,.45);
}
.fx-footer__accent { height: 5px; background: var(--fx-blue); }

.fx-cross {
  background: rgba(22,159,219,.16); border: 1px solid rgba(22,159,219,.45);
  border-radius: var(--fx-r-md); padding: var(--fx-4); margin-top: var(--fx-3);
  transition: background-color var(--fx-t-2) var(--fx-ease), border-color var(--fx-t-2) var(--fx-ease),
              transform var(--fx-t-2) var(--fx-ease);
}
.fx-cross:hover { background: rgba(22,159,219,.26); border-color: var(--fx-blue); transform: translateY(-2px); }
.fx-cross strong { display: block; color: var(--fx-white); font-size: 14.5px; font-weight: 600; margin-bottom: 2px; }
.fx-cross span { font-size: 13.5px; line-height: 1.5; }

/* --------------------------------------------------------------------------
   9. Blocks
   -------------------------------------------------------------------------- */

/* ---- hero ---- */
.fx-hero {
  background: var(--fx-blue); color: var(--fx-white); position: relative;
  overflow: hidden; padding: var(--fx-10) 0; text-align: center;
}
@media (max-width: 699px) { .fx-hero { padding: var(--fx-8) 0 var(--fx-9); } }

.fx-hero::before, .fx-hero::after {
  content: ''; position: absolute; pointer-events: none;
  clip-path: polygon(0 50%, 50% 0, 100% 50%, 50% 100%);
  will-change: transform;
}
.fx-hero::before {
  top: -110px; right: -140px; width: 460px; height: 460px; background: rgba(255,255,255,.07);
  animation: fx-drift 15s var(--fx-ease) infinite;
}
.fx-hero::after {
  bottom: -180px; left: -120px; width: 380px; height: 380px; background: rgba(0,0,0,.05);
  animation: fx-drift 19s var(--fx-ease) infinite reverse;
}
@media (max-width: 699px) {
  .fx-hero::before { width: 300px; height: 300px; top: -80px; right: -110px; }
  .fx-hero::after  { width: 240px; height: 240px; bottom: -120px; left: -90px; }
}
@keyframes fx-drift {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  50%      { transform: translate3d(0, -22px, 0) rotate(4deg); }
}

.fx-hero .fx-container { position: relative; z-index: 1; }

/* Hero with photo: the same duotone as fx-figure, but darker, so white type keeps
   its contrast over any photo. The drifting diamonds stay on top of the image. */
.fx-hero__media { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
/* The photo is a texture under the blue, not the subject: it sinks into the brand
   surface so the diamonds stay the loudest shape in the hero. */
.fx-hero__media img {
  width: 100%; height: 100%; object-fit: cover; opacity: .34;
  filter: grayscale(1) contrast(.9) brightness(1.1);
}
/* Multiply at full strength: the result is never lighter than the plain blue hero,
   so white type keeps exactly the same contrast ratio no matter which photo lands here. */
.fx-hero__media::after {
  content: ''; position: absolute; inset: 0;
  background: var(--fx-blue); mix-blend-mode: multiply;
}
/* Over a photo the default diamonds disappear, so they get more weight and an edge. */
.fx-hero--photo::before, .fx-hero--photo::after { z-index: 1; }
.fx-hero--photo::before { background: rgba(255,255,255,.14); }
.fx-hero--photo::after  { background: rgba(0,0,0,.10); }
.fx-hero--photo .fx-container { z-index: 2; }
.fx-hero--photo { text-shadow: 0 1px 2px rgba(0,0,0,.18); }
.fx-hero__actions { display: flex; flex-wrap: wrap; gap: var(--fx-3); justify-content: center; }
@media (max-width: 439px) { .fx-hero__actions .fx-btn { width: 100%; } }

/* Subpage hero: same surface, less weight, so the homepage keeps its impact. */
.fx-hero--compact { padding: var(--fx-8) 0; }
.fx-hero--compact .fx-h1 { font-size: clamp(28px, 4.4vw, 44px); }
.fx-hero--compact::before { width: 320px; height: 320px; top: -90px; right: -110px; }
.fx-hero--compact::after  { width: 260px; height: 260px; bottom: -130px; left: -90px; }

/* Legal pages and 404: no colour field, just a heading over a rule. */
.fx-hero--plain {
  background: var(--fx-white); color: var(--fx-ink);
  border-bottom: 1px solid var(--fx-line);
  padding: var(--fx-8) 0 var(--fx-7); text-align: left;
}
.fx-hero--plain::before, .fx-hero--plain::after { display: none; }
.fx-hero--plain .fx-h1 { font-size: clamp(28px, 4.4vw, 44px); }
.fx-hero--plain .fx-lead { color: var(--fx-ink-2); max-width: 62ch !important;
                           margin-left: 0 !important; margin-right: 0 !important; }
.fx-hero--plain .fx-hero__actions { justify-content: flex-start; }

/* ---- stats ---- */
.fx-stats { display: grid; border-bottom: 1px solid var(--fx-line); }
@media (min-width: 700px) { .fx-stats { grid-template-columns: repeat(3, 1fr); } }
.fx-stat { padding: var(--fx-5) var(--fx-4); text-align: center; border-bottom: 1px solid var(--fx-line); }
@media (min-width: 700px) {
  .fx-stat { padding: var(--fx-6) var(--fx-4); border-bottom: 0; border-right: 1px solid var(--fx-line); }
  .fx-stat:last-child { border-right: 0; }
}
.fx-stat__value {
  font-size: clamp(32px, 4.4vw, 44px); font-weight: 800; color: var(--fx-blue-ink);
  line-height: 1; letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;   /* stops the counter from jittering */
}
.fx-stat__label { font-size: 13.5px; font-weight: 500; color: var(--fx-ink-2); margin-top: var(--fx-2); }

/* ---- cards ---- */
.fx-cards { display: grid; gap: var(--fx-5); margin-top: var(--fx-7); }
@media (min-width: 700px)  { .fx-cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .fx-cards { grid-template-columns: repeat(3, 1fr); } }

.fx-card {
  background: var(--fx-white); border: 1px solid var(--fx-line);
  border-radius: var(--fx-r-md); padding: var(--fx-6) var(--fx-5);
  transition: transform var(--fx-t-2) var(--fx-ease), box-shadow var(--fx-t-2) var(--fx-ease),
              border-color var(--fx-t-2) var(--fx-ease);
}
.fx-card:hover { transform: translateY(-4px); box-shadow: var(--fx-sh-md); border-color: #D3DBDF; }

.fx-card__icon {
  width: 46px; height: 46px; background: var(--fx-blue-tint);
  border-radius: var(--fx-r-sm); position: relative; margin-bottom: var(--fx-4);
  transition: background-color var(--fx-t-2) var(--fx-ease);
}
.fx-card__icon::after {
  content: ''; position: absolute; inset: 13px; background: var(--fx-blue);
  clip-path: polygon(0 50%, 50% 0, 100% 50%, 50% 100%);
  transition: transform var(--fx-t-3) var(--fx-ease-out);
}
/* The diamond turns a quarter — the logo shape acknowledging the pointer. */
.fx-card:hover .fx-card__icon::after { transform: rotate(90deg); }
.fx-card p { margin: 0; font-size: 14.5px; line-height: 1.62; color: var(--fx-ink-2); }

/* ---- steps ---- */
.fx-steps { display: grid; gap: var(--fx-6); margin-top: var(--fx-7); }
@media (min-width: 700px) { .fx-steps { grid-template-columns: repeat(3, 1fr); } }
.fx-step { text-align: center; }
.fx-step__num {
  width: 56px; height: 56px; background: var(--fx-blue); color: var(--fx-white);
  font-size: 22px; font-weight: 800; display: grid; place-items: center;
  margin: 0 auto var(--fx-4); clip-path: polygon(0 50%, 50% 0, 100% 50%, 50% 100%);
  transition: transform var(--fx-t-3) var(--fx-ease-out), background-color var(--fx-t-2) var(--fx-ease);
}
/* The diamond turns, the digit does not — same gesture as the card icon. */
.fx-step__num span { display: block; transition: transform var(--fx-t-3) var(--fx-ease-out); }
.fx-step:hover .fx-step__num { transform: rotate(90deg); background: var(--fx-blue-dark); }
.fx-step:hover .fx-step__num span { transform: rotate(-90deg); }
.fx-step h3 { transition: color var(--fx-t-1) var(--fx-ease); }
.fx-step:hover h3 { color: var(--fx-blue-ink); }
.fx-step p { margin: 0; font-size: 14.5px; line-height: 1.62; color: var(--fx-ink-2); }

/* Rail variant: four or more steps read as one vertical axis instead of a grid
   with a half-empty last row. Numbers, headings and body all share one edge. */
.fx-steps--rail { gap: 0; max-width: 660px; margin: var(--fx-7) auto 0; }
@media (min-width: 700px) { .fx-steps--rail { grid-template-columns: 1fr; } }
.fx-steps--rail .fx-step {
  text-align: left; position: relative;
  display: grid; grid-template-columns: 56px 1fr; column-gap: var(--fx-5);
  padding-bottom: var(--fx-6);
}
.fx-steps--rail .fx-step:last-child { padding-bottom: 0; }
.fx-steps--rail .fx-step__num { margin: 0; grid-row: 1 / span 2; align-self: start; }
/* The heading sits optically level with the middle of the diamond, the body
   follows straight underneath — one text column, no floating gap. */
.fx-steps--rail .fx-step h3 { margin: var(--fx-3) 0 var(--fx-2); }
.fx-steps--rail .fx-step p { max-width: none; }

/* The connector between two diamonds, drawn top-down as each step arrives. */
.fx-steps--rail .fx-step:not(:last-child)::before {
  content: ''; position: absolute; left: 27px; top: 60px; bottom: 8px; width: 2px;
  background: linear-gradient(var(--fx-blue) 0%, #BEE0F2 100%);
  transform: scaleY(0); transform-origin: top;
  transition: transform var(--fx-t-4) var(--fx-ease-out);
  transition-delay: calc(var(--i, 0) * var(--fx-stagger) + 160ms);
}
.fx-steps--rail .fx-step.is-visible::before { transform: scaleY(1); }
.fx-steps--rail .fx-step.is-instant::before { transition: none; transition-delay: 0s; }

/* Each diamond pops in a touch behind its own text. */
.js .fx-steps--rail .fx-step__num { opacity: 0; transform: scale(.7); }
.js .fx-steps--rail .fx-step.is-visible .fx-step__num { opacity: 1; transform: none; }
.js .fx-steps--rail .fx-step.is-instant .fx-step__num { transition: none; }
.js .fx-steps--rail .fx-step.is-visible:hover .fx-step__num { transform: rotate(90deg); }

/* ---- media_text ---- */
.fx-media { display: grid; }
@media (min-width: 900px) { .fx-media { grid-template-columns: 1fr 1fr; } }
.fx-media__text {
  padding: var(--fx-8) var(--fx-gutter);
  display: flex; flex-direction: column; justify-content: center;
}
@media (min-width: 1200px) { .fx-media__text { padding: var(--fx-9) var(--fx-8); } }
@media (min-width: 900px)  { .fx-media--reverse .fx-media__figure { order: 2; } }

/* Duotone: greyscale photo multiplied with brand blue, mirroring the cover of
   the brand manual. Keeps mixed stock photography looking like one brand. */
.fx-figure {
  position: relative; min-height: 260px; overflow: hidden;
  background: linear-gradient(150deg, #7E939E, #40525C);
}
@media (min-width: 900px) { .fx-figure { min-height: 440px; } }
.fx-figure img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(1) contrast(1.05);
  transition: transform var(--fx-t-4) var(--fx-ease-out);
}
.fx-media:hover .fx-figure img { transform: scale(1.045); }
.fx-figure::after {
  content: ''; position: absolute; inset: 0; background: var(--fx-blue);
  mix-blend-mode: multiply; opacity: .55;
}
.fx-figure__note {
  position: absolute; inset: 0; z-index: 2; display: grid; place-items: center;
  color: rgba(255,255,255,.55); font-size: 12px; letter-spacing: .18em; text-transform: uppercase;
}

/* ---- checklist ---- */
.fx-checklist { list-style: none; padding: 0; margin: var(--fx-5) 0 0; }
.fx-checklist li {
  position: relative; padding: var(--fx-3) 0 var(--fx-3) var(--fx-6);
  font-size: clamp(15px, 1.4vw, 15.5px); line-height: 1.5; border-bottom: 1px solid var(--fx-line);
}
.fx-checklist li:last-child { border-bottom: 0; }
.fx-checklist li::before {
  content: ''; position: absolute; left: 2px; top: 18px; width: 12px; height: 12px;
  background: var(--fx-blue); clip-path: polygon(0 50%, 50% 0, 100% 50%, 50% 100%);
}
.fx-on-dark .fx-checklist li { border-color: var(--fx-line-dark); color: var(--fx-white); }

/* ---- form block ---- */
.fx-formblock { display: grid; gap: var(--fx-7); align-items: start; }
@media (min-width: 900px) { .fx-formblock { grid-template-columns: 1fr 1.1fr; gap: var(--fx-8); } }

/* ---- cta_band ---- */
.fx-band { background: var(--fx-blue); color: var(--fx-white); padding: var(--fx-8) 0; text-align: center; }
.fx-band .fx-h2 { color: var(--fx-white); }

/* ---- faq ---- */
.fx-faq { max-width: 800px; margin: var(--fx-7) auto 0; }
.fx-faq details { border-bottom: 1px solid var(--fx-line); }
.fx-faq summary {
  list-style: none; cursor: pointer; position: relative;
  padding: var(--fx-5) var(--fx-7) var(--fx-5) 0;
  font-size: clamp(16px, 1.7vw, 17px); font-weight: 600; min-height: 56px;
  transition: color var(--fx-t-1) var(--fx-ease);
}
.fx-faq summary::-webkit-details-marker { display: none; }
.fx-faq summary:hover { color: var(--fx-blue-ink); }
.fx-faq summary::after {
  content: ''; position: absolute; right: 6px; top: 50%; width: 12px; height: 12px;
  margin-top: -6px; background: var(--fx-blue);
  clip-path: polygon(0 50%, 50% 0, 100% 50%, 50% 100%);
  transition: transform var(--fx-t-2) var(--fx-ease-out);
}
.fx-faq details[open] > summary::after { transform: rotate(180deg) scale(.78); }

/* Height animation. <details> cannot animate on its own, so the answer sits in
   a grid wrapper that goes from 0fr to 1fr. JS holds the element open while the
   closing transition runs. */
.fx-faq__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--fx-t-2) var(--fx-ease); }
.fx-faq details[open] .fx-faq__panel { grid-template-rows: 1fr; }
.fx-faq__inner { overflow: hidden; }
.fx-faq p { margin: 0 0 var(--fx-5); font-size: 15.5px; line-height: 1.68; color: var(--fx-ink-2); max-width: 70ch; }

/* ---- prose ---- */
.fx-prose { max-width: 70ch; }
.fx-prose h2 { font-size: clamp(22px, 2.6vw, 26px); font-weight: 700; margin: var(--fx-7) 0 var(--fx-3); letter-spacing: -.02em; }
.fx-prose h3 { font-size: clamp(18px, 2vw, 20px); font-weight: 700; margin: var(--fx-6) 0 var(--fx-2); }
.fx-prose p, .fx-prose li { font-size: 16px; line-height: 1.72; color: var(--fx-ink-2); }
.fx-prose ul { padding-left: var(--fx-5); }
.fx-prose > :first-child { margin-top: 0; }

/* ---- contact ---- */
.fx-contact { display: grid; gap: var(--fx-6); align-items: center; }
@media (min-width: 900px) { .fx-contact { grid-template-columns: 1fr 1fr; gap: var(--fx-8); } }
.fx-contact__list { list-style: none; padding: 0; margin: var(--fx-5) 0 0; }
.fx-contact__list li { display: flex; flex-wrap: wrap; gap: var(--fx-2) var(--fx-3); padding: var(--fx-3) 0; font-size: 15.5px; }
.fx-contact__list strong { min-width: 96px; font-weight: 600; }

/* ---- logos ---- */
.fx-logos { display: flex; flex-wrap: wrap; gap: var(--fx-5); justify-content: center; align-items: center; margin-top: var(--fx-6); }
.fx-logos__item {
  width: 128px; height: 62px; background: var(--fx-white);
  border: 1px solid var(--fx-line); border-radius: var(--fx-r-sm);
  display: grid; place-items: center; font-size: 11px; color: #A8AFB2;
  letter-spacing: .1em; text-transform: uppercase;
  transition: transform var(--fx-t-2) var(--fx-ease), border-color var(--fx-t-2) var(--fx-ease);
}
.fx-logos__item:hover { transform: translateY(-3px); border-color: #D3DBDF; }

/* --------------------------------------------------------------------------
   10. Motion primitives
   Scroll reveal. The hidden state only applies once JS has confirmed it can
   reveal again — without JS every element stays visible.
   -------------------------------------------------------------------------- */
.js [data-reveal] {
  opacity: 0; transform: translateY(20px);
  transition: opacity var(--fx-t-3) var(--fx-ease-out),
              transform var(--fx-t-3) var(--fx-ease-out);
  transition-delay: calc(var(--i, 0) * var(--fx-stagger));
  will-change: opacity, transform;
}
.js [data-reveal].is-visible { opacity: 1; transform: none; will-change: auto; }

/* Anything already on screen when the page opens is shown at once, without a
   transition. Animating the hero on every page load turns navigation into a
   flicker: you would see an empty header for a frame or two, on every click.
   Motion is for content the visitor scrolls to, not for content that is
   simply there. */
.js [data-reveal].is-instant { transition: none; transition-delay: 0s; }

/* A quieter variant for large surfaces: fade only, no movement. */
.js [data-reveal="fade"] { transform: none; }

/* --------------------------------------------------------------------------
   11. Reduced motion
   Everything above is decoration. If the visitor asks for less, they get the
   finished state immediately — never a broken or invisible one.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .js [data-reveal] { opacity: 1 !important; transform: none !important; }
  .js .fx-steps--rail .fx-step__num { opacity: 1 !important; transform: none !important; }
  .fx-steps--rail .fx-step::before { transform: scaleY(1) !important; }
  .fx-step:hover .fx-step__num, .fx-step:hover .fx-step__num span { transform: none !important; }
  .fx-btn:hover, .fx-card:hover, .fx-cross:hover, .fx-logos__item:hover { transform: none; }
  .fx-media:hover .fx-figure img { transform: none; }
}

/* --------------------------------------------------------------------------
   12. Concept control centre
   Marks these files as design concepts and switches between the two sites, the
   overview and the styleguide. A <details> so it works without JavaScript; the
   pill keeps the concept status visible, the panel holds the detail. It floats
   instead of taking a bar of height, and sits below the sticky header so it
   never covers the navigation. Delete this rule and the matching markup when
   the pages go live.
   -------------------------------------------------------------------------- */
/* Glued to the right edge of the window: a tab, not a floating card. */
.fx-cc {
  position: fixed; z-index: 85;
  top: calc(var(--fx-header-h) + 10px); right: 0;
}
.fx-cc__pill {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 7px;
  background: #FFF3D6; border: 1px solid #EBD69C; border-right: 0; color: #6B5714;
  border-radius: 999px 0 0 999px; padding: 5px 14px 5px 12px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  box-shadow: var(--fx-sh-sm);
  transition: background-color var(--fx-t-1) var(--fx-ease), box-shadow var(--fx-t-1) var(--fx-ease);
}
.fx-cc__pill::-webkit-details-marker { display: none; }
.fx-cc__pill:hover { background: #FFEBBC; box-shadow: var(--fx-sh-md); }
.fx-cc[open] .fx-cc__pill { background: #FFEBBC; }

/* Brand diamond as the status light. */
.fx-cc__dot {
  width: 8px; height: 8px; flex: none; background: #D9A21B;
  clip-path: polygon(0 50%, 50% 0, 100% 50%, 50% 100%);
  transition: transform var(--fx-t-2) var(--fx-ease-out);
}
.fx-cc[open] .fx-cc__dot { transform: rotate(90deg); }

.fx-cc__panel {
  position: absolute; top: calc(100% + 8px); right: 0; width: min(280px, calc(100vw - 24px));
  background: var(--fx-white); border: 1px solid var(--fx-line); border-right: 0;
  border-radius: var(--fx-r-md) 0 0 var(--fx-r-md);
  box-shadow: var(--fx-sh-lg); padding: 14px 8px 8px;
  animation: fx-cc-in var(--fx-t-2) var(--fx-ease-out);
}
/* Slides out of the window edge, not down from nowhere. */
@keyframes fx-cc-in {
  from { opacity: 0; transform: translateX(10px); }
  to   { opacity: 1; transform: none; }
}
.fx-cc__note {
  margin: 0 8px 12px; font-size: 12px; line-height: 1.5; color: var(--fx-ink-2);
}
.fx-cc__note strong { color: var(--fx-ink); }
.fx-cc__label {
  display: block; margin: 0 8px 6px; font-size: 9.5px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--fx-blue-ink);
}
.fx-cc__links { list-style: none; margin: 0; padding: 0; }
.fx-cc__links a {
  display: flex; align-items: center; gap: 8px; padding: 7px 8px;
  border-radius: var(--fx-r-sm); font-size: 13px; font-weight: 600;
  transition: background-color var(--fx-t-1) var(--fx-ease), padding-left var(--fx-t-1) var(--fx-ease);
}
.fx-cc__links a:hover { background: var(--fx-sand); padding-left: 12px; }
.fx-cc__links a::before {
  content: ''; width: 8px; height: 8px; flex: none; background: var(--fx-line);
  clip-path: polygon(0 50%, 50% 0, 100% 50%, 50% 100%);
  transition: background-color var(--fx-t-1) var(--fx-ease);
}
.fx-cc__links a:hover::before { background: var(--fx-blue); }
.fx-cc__links a[aria-current] { color: var(--fx-blue-ink); background: var(--fx-blue-tint); }
.fx-cc__links a[aria-current]::before { background: var(--fx-blue); }
.fx-cc__links span { margin-left: auto; font-size: 11px; font-weight: 500; color: var(--fx-ink-2); }