/* ==========================================================================
   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; }
.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%);
}
.fx-step p { margin: 0; font-size: 14.5px; line-height: 1.62; color: var(--fx-ink-2); }

/* ---- 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; }
  .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 banner
   Marks these files as design concepts. Delete this rule and the matching
   markup when the pages go live.
   -------------------------------------------------------------------------- */
.fx-concept {
  background: #FFF3D6; border-bottom: 1px solid #EBD69C; color: #6B5714;
  font-size: 13px; line-height: 1.5; padding: 10px var(--fx-gutter); text-align: center;
}
.fx-concept strong { color: #4E3F0B; }