/* =============================================================
   CONEY SOLUTIONS — DESIGN SYSTEM
   -------------------------------------------------------------
   One stylesheet for the whole site. Structure and rhythm follow
   apple.com (and the Conify site built on the same system): a thin
   translucent global nav, full-bleed tiles on the homepage, and
   service pages built from big quiet type, "renders" of the work
   we deliver, highlight galleries, feature cards that open into
   detail sheets, and a local nav that becomes a rail on wide screens.

   Colour, type and voice are Coney's own: navy and white grounds,
   red as the main accent, orange as the backup accent and the
   red-to-orange gradient as the signature. Montserrat for headings,
   IBM Plex Sans for body. Each service has one identity colour taken
   from that gradient (analytics coral, process orange, GRC red,
   academy amber), used in its renders, visuals and icons.

   Accent text is theme-aware: --p resolves to --p-lt on light
   grounds and to --p-dk on dark grounds, so red never sits as text
   on navy and orange never sits as text on white.

   Change a token here and it updates everywhere.

   CONTENTS
   01 Tokens
   02 Reset & base
   03 Themes (light / grey / dark / navy) + service colours
   04 Typography
   05 Layout
   06 Buttons & links
   07 Global nav + flyouts + mobile menu
   08 Local nav (service pages)
   09 Homepage tiles
   10 Page hero
   11 Device / renders
   12 Chapter nav
   13 Highlights gallery
   14 Scrub text, statement, quote
   15 Feature cards (bento) & icon row
   16 Stats
   17 Card rail + modal sheets
   18 Segmented control & tab panels
   19 Checklist, steps, split, cards, team
   20 Lineup (compare)
   21 Flow diagram
   22 Final CTA
   23 Forms
   24 Footer
   25 Motion
   26 Utilities
   27 Interactive visuals (shared shell)
   28 Coney components: client marquee, orgs, testimonial,
      principles, samenwerken panel, Conify band, pills
   29 Visual modules: population, conformance, monitor, partner,
      flex, transfer
   30 Scan (datavolwassenheid) + homepage teaser
   31 Text pages
   ============================================================= */

/* 01 TOKENS ------------------------------------------------- */
:root{
  /* Brand */
  --navy:#212c56;
  --navy-2:#2e3b73;
  --red:#b8131a;
  --red-2:#9a0f15;      /* hover on light */
  --red-3:#d0161f;      /* buttons on dark */
  --red-lt:#ff5d52;     /* red as text or line on dark */
  --orange:#f37837;
  --orange-2:#ff9152;
  --grad:linear-gradient(100deg,#b8131a 0%,#e0452b 45%,#f37837 100%);
  --grad-v:linear-gradient(180deg,#b8131a 0%,#f37837 100%);

  /* Ink & grounds */
  --ink:#141a33;
  --ink-2:#565c7a;
  --ink-3:#858aa3;
  --grey:#f4f5f8;
  --grey-2:#e9ebf1;
  --line:#d9dce5;
  --night:#0d1226;
  --night-2:#171d38;
  --night-3:#242b4d;

  /* Service identity colours (renders, visuals, icons) */
  --s-analytics:#e5482f;
  --s-process:#f37837;
  --s-grc:#b8131a;
  --s-academy:#f2a33a;
  --s-partner:#212c56;

  /* Theme-aware accent (see header note) */
  --p:#b8131a;
  --p-lt:#b8131a;
  --p-dk:#f37837;
  --accent:var(--red);

  /* Type */
  --font-head:'Montserrat',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-body:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  --fs-hero:clamp(2.75rem,6.6vw,5.25rem);
  --fs-headline:clamp(2.1rem,4.6vw,3.6rem);
  --fs-sub:clamp(1.65rem,3vw,2.4rem);
  --fs-card:clamp(1.35rem,2vw,1.75rem);
  --fs-intro:clamp(1.15rem,1.7vw,1.4rem);
  --fs-body:1.0625rem;
  --fs-small:.875rem;
  --fs-micro:.75rem;

  /* Layout */
  --gn-h:48px;
  --ln-h:52px;
  --gutter:clamp(20px,4.5vw,44px);
  --wrap:1024px;
  --wrap-wide:1320px;
  --radius:28px;
  --radius-sm:18px;

  /* Motion — the curve apple.com uses for most transitions */
  --ease:cubic-bezier(.28,.11,.32,1);
  --ease-out:cubic-bezier(.16,.84,.28,1);
}

/* 02 RESET & BASE ------------------------------------------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--ln-h) + 12px)}
body{
  font-family:var(--font-body);font-size:var(--fs-body);line-height:1.47;
  color:var(--ink);background:#fff;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;overflow-x:hidden;
}
img,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul,ol{list-style:none}
h1,h2,h3,h4{font-weight:600;font-family:var(--font-head);letter-spacing:-.015em;line-height:1.1}
strong,b{font-weight:600}
:focus-visible{outline:2px solid var(--accent,var(--red));outline-offset:3px;border-radius:6px}
.skip-link{position:absolute;left:12px;top:-60px;z-index:1000;background:var(--navy);color:#fff;padding:10px 16px;border-radius:10px}
.skip-link:focus{top:12px}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}


/* 03 THEMES -------------------------------------------------- */
/* Service colours come first, so a theme class on the same element
   (or on a section inside a service page) picks the right variant. */
.s-analytics{--p:#d23c24;--p-lt:#d23c24;--p-dk:#ff7059;--c:var(--s-analytics)}
.s-process{--p:#c85514;--p-lt:#c85514;--p-dk:#f7904f;--c:var(--s-process)}
.s-grc{--p:#b8131a;--p-lt:#b8131a;--p-dk:#ff5d52;--c:var(--s-grc)}
.s-academy{--p:#a86100;--p-lt:#a86100;--p-dk:#f7b65a;--c:var(--s-academy)}
.s-partner{--p:#b8131a;--p-lt:#b8131a;--p-dk:#f37837;--c:var(--navy)}

.theme-light,.theme-grey,.theme-dark,.theme-navy{background:var(--bg);color:var(--fg)}
.theme-light{
  --bg:#fff;--fg:var(--ink);--fg-2:var(--ink-2);--fg-3:var(--ink-3);
  --card:var(--grey);--card-2:#fff;--line-c:var(--line);
  --p:var(--p-lt);--accent:var(--red);
  --link:var(--red);--btn-bg:var(--red);--btn-fg:#fff;--btn-bg-h:var(--red-2);--ghost:var(--navy);
  --seg:var(--grey-2);--seg-thumb:#fff;--dot:#b9bdcc;--dot-track:#d6d9e2;
}
.theme-grey{
  --bg:var(--grey);--fg:var(--ink);--fg-2:var(--ink-2);--fg-3:var(--ink-3);
  --card:#fff;--card-2:var(--grey);--line-c:var(--line);
  --p:var(--p-lt);--accent:var(--red);
  --link:var(--red);--btn-bg:var(--red);--btn-fg:#fff;--btn-bg-h:var(--red-2);--ghost:var(--navy);
  --seg:var(--grey-2);--seg-thumb:#fff;--dot:#b9bdcc;--dot-track:#d6d9e2;
}
.theme-dark,.theme-navy{
  --bg:var(--night);--fg:#f5f6fa;--fg-2:#aab0c8;--fg-3:#7d84a3;
  --card:var(--night-2);--card-2:var(--night-3);--line-c:rgba(255,255,255,.13);
  --p:var(--p-dk);--accent:var(--orange);
  --link:var(--orange);--btn-bg:var(--red-3);--btn-fg:#fff;--btn-bg-h:#e3232b;--ghost:#fff;
  --seg:rgba(255,255,255,.1);--seg-thumb:rgba(255,255,255,.2);--dot:#5c6385;--dot-track:#3a4163;
}
.theme-navy{--bg:var(--navy);--card:rgba(255,255,255,.07);--card-2:rgba(255,255,255,.11);--fg-2:#b9bfd8;--fg-3:#8d94b5}

/* 04 TYPOGRAPHY --------------------------------------------- */
.t-hero{font-size:var(--fs-hero);line-height:1.04;letter-spacing:-.025em}
.t-headline{font-size:var(--fs-headline);line-height:1.07;letter-spacing:-.022em;text-wrap:balance}
.t-sub{font-size:var(--fs-sub);line-height:1.12;letter-spacing:-.018em}
.t-card{font-size:var(--fs-card);line-height:1.16;letter-spacing:-.012em}
.t-intro{font-size:var(--fs-intro);line-height:1.42;color:var(--fg-2,var(--ink-2));font-weight:400}
.t-intro strong{color:var(--fg,var(--ink));font-weight:600}
.t-eyebrow{display:block;font-family:var(--font-head);font-weight:600;font-size:clamp(1rem,1.5vw,1.3rem);letter-spacing:-.005em;color:var(--p);margin-bottom:.6rem}
.t-label{font-size:var(--fs-micro);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--fg-3,var(--ink-3))}
.t-muted{color:var(--fg-2,var(--ink-2))}
.t-small{font-size:var(--fs-small)}
.grad-text{background:linear-gradient(100deg,var(--p-dk) 0%,#f7904f 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.theme-light .grad-text,.theme-grey .grad-text{background:linear-gradient(100deg,var(--p-lt) 0%,#d9591c 100%);-webkit-background-clip:text;background-clip:text}
.brand-dot{color:var(--accent,var(--red))}
.prose p+p{margin-top:1em}
.prose a{color:var(--link);text-decoration:underline;text-underline-offset:3px}

/* 05 LAYOUT -------------------------------------------------- */
.wrap{max-width:calc(var(--wrap) + 2 * var(--gutter));margin-inline:auto;padding-inline:var(--gutter)}
.wrap-wide{max-width:calc(var(--wrap-wide) + 2 * var(--gutter));margin-inline:auto;padding-inline:var(--gutter)}
.wrap-text{max-width:calc(760px + 2 * var(--gutter));margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:clamp(84px,11vw,160px);position:relative}
.section--tight{padding-block:clamp(56px,7vw,96px)}
.section.theme-light + .section.theme-light,.section.theme-grey + .section.theme-grey{padding-top:0}
.sechead{margin-bottom:clamp(40px,5vw,72px)}
.sechead--center{text-align:center;margin-inline:auto;max-width:880px}
.sechead .t-intro{margin-top:1.1rem;max-width:40em}
.sechead--center .t-intro{margin-inline:auto}
.center{text-align:center}
.mt-1{margin-top:.75rem}.mt-2{margin-top:1.25rem}.mt-3{margin-top:2rem}.mt-4{margin-top:3rem}.mt-5{margin-top:clamp(56px,7vw,96px)}

/* 06 BUTTONS & LINKS ---------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.4em;
  min-height:44px;padding:0 22px;border-radius:980px;
  font-family:var(--font-body);font-size:1.0625rem;font-weight:500;line-height:1;letter-spacing:-.005em;white-space:nowrap;
  background:var(--btn-bg,var(--navy));color:var(--btn-fg,#fff);
  transition:background-color .25s var(--ease),color .25s var(--ease),box-shadow .25s var(--ease);
}
.btn:hover{background:var(--btn-bg-h,var(--navy-2))}
.btn--ghost{background:transparent;color:var(--ghost,var(--navy));box-shadow:inset 0 0 0 1px var(--ghost,var(--navy))}
.btn--ghost:hover{background:var(--ghost,var(--navy));color:var(--bg,#fff)}
.btn--sm{min-height:30px;padding:0 13px;font-size:.8125rem}
.btn svg{width:.9em;height:.9em;stroke:currentColor;fill:none;stroke-width:2.4}
.btn-row{display:flex;flex-wrap:wrap;gap:12px 16px;align-items:center}
.btn-row.center{justify-content:center}

.more{
  display:inline-flex;align-items:center;gap:.15em;color:var(--link,var(--navy));
  font-size:1.0625rem;font-weight:500;
}
.more::after{content:"";width:.5em;height:.5em;border-top:1.75px solid currentColor;border-right:1.75px solid currentColor;transform:rotate(45deg);margin-left:.3em;transition:transform .25s var(--ease)}
.more:hover{text-decoration:underline;text-underline-offset:3px}
.more:hover::after{transform:translateX(2px) rotate(45deg)}
.more--ext::after{transform:rotate(0);width:.55em;height:.55em;border:0;background:currentColor;clip-path:polygon(20% 0,100% 0,100% 80%,82% 80%,82% 31%,13% 100%,0 87%,69% 18%,20% 18%)}
.more--ext:hover::after{transform:translate(1px,-1px)}

.glyph{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* 07 GLOBAL NAV --------------------------------------------- */
.gn{position:sticky;top:0;z-index:100;height:var(--gn-h)}
.has-ln .gn{position:relative}
.gn__bar{
  position:relative;z-index:2;height:100%;
  display:flex;align-items:center;gap:8px;
  max-width:calc(1060px + 2 * var(--gutter));margin-inline:auto;padding-inline:var(--gutter);
}
.gn::before{
  content:"";position:absolute;inset:0;z-index:1;
  background:rgba(250,250,252,.82);
  -webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);
  transition:background-color .3s var(--ease);
}
.gn.is-open::before,.gn.is-menu::before{background:#fafafc}
.gn__logo{display:flex;align-items:center;height:100%;padding-right:12px;margin-right:auto}
.gn__logo img{height:22px;width:auto}
.gn__list{display:flex;align-items:center;height:100%;gap:2px}
.gn__item{height:100%;display:flex;align-items:center;position:static}
.gn__link{
  display:flex;align-items:center;height:100%;padding:0 12px;
  font-size:.8125rem;font-weight:500;letter-spacing:.005em;color:rgba(20,26,51,.8);
  transition:color .2s var(--ease);
}
.gn__link:hover,.gn__item.is-active .gn__link{color:var(--ink)}
.gn__item[data-current] .gn__link{color:var(--ink);box-shadow:inset 0 -2px 0 var(--red)}
.gn__cta{margin-left:14px}
.gn__cta .btn{background:var(--red);color:#fff}
.gn__cta .btn:hover{background:var(--red-2)}

/* Flyouts: open on hover or keyboard focus, like the apple.com menus. */
.gn__flyout{
  position:absolute;left:0;right:0;top:0;z-index:1;
  padding-top:var(--gn-h);
  background:#fafafc;
  clip-path:inset(0 0 100% 0);visibility:hidden;
  transition:clip-path .45s var(--ease),visibility 0s linear .45s;
}
.gn__flyout.is-open{clip-path:inset(0 0 0 0);visibility:visible;transition:clip-path .45s var(--ease),visibility 0s}
.gn__flyout-inner{
  display:flex;gap:clamp(40px,6vw,88px);
  max-width:calc(1060px + 2 * var(--gutter));margin-inline:auto;
  padding:38px var(--gutter) 72px calc(var(--gutter) + 150px);
}
.gn__col{opacity:0;transform:translateY(-6px);transition:opacity .3s var(--ease),transform .3s var(--ease)}
.gn__flyout.is-open .gn__col{opacity:1;transform:none;transition-delay:.12s}
.gn__flyout.is-open .gn__col:nth-child(2){transition-delay:.17s}
.gn__flyout.is-open .gn__col:nth-child(3){transition-delay:.22s}
.gn__col-title{font-family:var(--font-body);font-size:.75rem;font-weight:500;color:var(--ink-3);letter-spacing:0;margin-bottom:14px}
.gn__col li+li{margin-top:9px}
.gn__col a{font-size:.8125rem;font-weight:500;color:rgba(20,26,51,.85)}
.gn__col a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.gn__col--big li+li{margin-top:6px}
.gn__col--big a{font-family:var(--font-head);font-size:1.5rem;font-weight:600;letter-spacing:-.015em;color:var(--ink)}
.gn__col--big a:hover{text-decoration:none;color:var(--red)}
.gn__col--big a small{display:block;font-family:var(--font-body);font-size:.75rem;font-weight:400;color:var(--ink-3);letter-spacing:0;margin-top:1px}

.gn-scrim{
  position:fixed;inset:0;z-index:95;
  background:rgba(232,233,238,.4);
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
  opacity:0;visibility:hidden;transition:opacity .4s var(--ease),visibility 0s linear .4s;
}
.gn-scrim.is-on{opacity:1;visibility:visible;transition:opacity .4s var(--ease),visibility 0s}

/* Burger + mobile menu */
.gn__burger{display:none;position:relative;width:44px;height:var(--gn-h);margin-right:-12px}
.gn__burger span{position:absolute;left:14px;width:17px;height:1.5px;background:var(--ink);border-radius:2px;transition:transform .35s var(--ease)}
.gn__burger span:first-child{top:20px}
.gn__burger span:last-child{top:27px}
.gn.is-menu .gn__burger span:first-child{transform:translateY(3.5px) rotate(45deg)}
.gn.is-menu .gn__burger span:last-child{transform:translateY(-3.5px) rotate(-45deg)}

.gn-mobile{
  position:fixed;left:0;right:0;top:var(--gn-h);bottom:0;z-index:99;
  background:#fafafc;overflow:hidden;
  opacity:0;visibility:hidden;transition:opacity .3s var(--ease),visibility 0s linear .3s;
}
.gn-mobile.is-open{opacity:1;visibility:visible;transition:opacity .3s var(--ease),visibility 0s}
.gn-mobile__panel{
  position:absolute;inset:0;overflow-y:auto;padding:18px 48px 48px;
  transition:transform .45s var(--ease),opacity .3s var(--ease);
}
.gn-mobile__panel--sub{transform:translateX(100%);opacity:0}
.gn-mobile.is-sub .gn-mobile__panel--main{transform:translateX(-30%);opacity:0}
.gn-mobile.is-sub .gn-mobile__panel--sub.is-current{transform:none;opacity:1}
.gn-mobile__big a,.gn-mobile__big button{
  display:flex;align-items:center;justify-content:space-between;width:100%;
  font-family:var(--font-head);font-size:1.75rem;font-weight:600;letter-spacing:-.015em;
  padding:6px 0;text-align:left;color:var(--ink);
}
.gn-mobile__big .glyph{width:20px;height:20px;color:var(--ink-3)}
.gn-mobile__small{margin-top:28px}
.gn-mobile__small a{display:block;padding:6px 0;font-size:1.0625rem;font-weight:500;color:var(--ink-2)}
.gn-mobile__back{display:flex;align-items:center;gap:4px;margin:0 0 18px -6px;color:var(--ink-3);font-size:.9rem}
.gn-mobile__back .glyph{width:18px;height:18px}
.gn-mobile__label{font-size:.8rem;color:var(--ink-3);margin:22px 0 6px}
.gn-mobile .btn{margin-top:32px}
.menu-open{overflow:hidden}

@media (max-width:900px){
  .gn__list,.gn__cta{display:none}
  .gn__burger{display:block}
  .gn__flyout{display:none}
}

/* 08 LOCAL NAV ----------------------------------------------- */
.ln{position:sticky;top:0;z-index:90;height:var(--ln-h);margin-bottom:calc(-1 * var(--ln-h))}
.ln__bg{
  position:absolute;inset:0;
  background:rgba(255,255,255,.72);
  -webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);
  box-shadow:inset 0 -1px 0 rgba(20,26,51,.12);
  transition:background-color .4s var(--ease);
}
.ln.is-dark .ln__bg{background:rgba(22,27,51,.72);box-shadow:inset 0 -1px 0 rgba(255,255,255,.12)}
.ln__inner{
  position:relative;height:100%;display:flex;align-items:center;gap:22px;
  max-width:calc(1060px + 2 * var(--gutter));margin-inline:auto;padding-inline:var(--gutter);
}
.ln__title{margin-right:auto;display:flex;align-items:baseline;gap:10px;min-width:0}
.ln__title a{font-family:var(--font-head);font-size:1.3rem;font-weight:600;letter-spacing:-.015em;color:var(--ink);white-space:nowrap}
.ln__title .ln__parent{font-family:var(--font-body);font-size:.75rem;font-weight:500;color:var(--ink-3);letter-spacing:0}
.ln.is-dark .ln__title a{color:#fff}
.ln__menu{display:flex;align-items:center;gap:22px}
.ln__menu a{font-size:.75rem;color:rgba(20,26,51,.82);white-space:nowrap;transition:color .2s}
.ln__menu a:hover{color:var(--ink)}
.ln__menu a.is-current{color:var(--ink-3);pointer-events:none}
.ln.is-dark .ln__menu a{color:rgba(255,255,255,.82)}
.ln.is-dark .ln__menu a.is-current{color:rgba(255,255,255,.45)}
.ln__cta .btn{min-height:28px;padding:0 12px;font-size:.75rem;background:var(--red);color:#fff}
.ln.is-dark .ln__cta .btn{background:var(--red-3);color:#fff}
.ln__toggle{display:none;width:32px;height:32px;margin-left:-8px;color:var(--ink-2)}
.ln__toggle .glyph{width:16px;height:16px;margin:auto;transition:transform .35s var(--ease)}
.ln.is-dark .ln__toggle{color:#fff}
.ln-spacer{height:var(--ln-h)}

@media (max-width:833px){
  .ln__toggle{display:block;order:2}
  .ln__title{order:1}
  .ln__cta{order:3}
  .ln__menu{
    position:absolute;left:0;right:0;top:100%;
    flex-direction:column;align-items:stretch;gap:0;
    padding:6px var(--gutter) 18px;
    background:rgba(250,250,252,.96);
    -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
    box-shadow:0 20px 30px -24px rgba(12,16,36,.4);
    clip-path:inset(0 0 100% 0);visibility:hidden;
    transition:clip-path .4s var(--ease),visibility 0s linear .4s;
  }
  .ln.is-dark .ln__menu{background:rgba(22,27,51,.97)}
  .ln__menu a{font-size:1.0625rem;padding:12px 0;border-bottom:1px solid rgba(20,26,51,.08)}
  .ln.is-dark .ln__menu a{border-color:rgba(255,255,255,.08)}
  .ln.is-expanded .ln__menu{clip-path:inset(0 0 0 0);visibility:visible;transition:clip-path .4s var(--ease),visibility 0s}
  .ln.is-expanded .ln__toggle .glyph{transform:rotate(180deg)}
}

.ln__cta .btn .glyph{display:none}

/* Wide screens: the local nav becomes a slim rail on the left. Collapsed it
   shows the product colour, a dot per section (the current one stretched) and
   a contact button; on hover or keyboard focus it opens to show the labels. */
@media (min-width:1100px){
  .has-ln .gn{position:sticky}
  .phero{padding-top:clamp(56px,7vw,104px)}
  .ln{position:fixed;left:12px;top:50%;z-index:95;width:32px;height:auto;margin:0;transform:translateY(-50%);border-radius:18px;transition:width .42s var(--ease),opacity .35s var(--ease),visibility 0s}
  .ln.is-open{width:244px}
  .ln.is-away{opacity:0;visibility:hidden;transition:width .42s var(--ease),opacity .35s var(--ease),visibility 0s linear .35s}
  .ln__bg{border-radius:inherit;box-shadow:0 0 0 1px rgba(20,26,51,.10),0 14px 34px -16px rgba(12,16,36,.4)}
  .ln.is-dark .ln__bg{box-shadow:0 0 0 1px rgba(255,255,255,.14),0 14px 34px -16px rgba(0,0,0,.7)}
  .ln__inner{flex-direction:column;align-items:stretch;gap:0;max-width:none;margin:0;padding:12px 0;height:auto;overflow:hidden;border-radius:inherit}
  .ln__toggle{display:none}
  .ln__title{position:relative;margin:0 0 8px;padding:2px 14px 8px 36px;flex-direction:column;align-items:flex-start;gap:1px;white-space:nowrap}
  .ln__title::before{content:"";position:absolute;left:10px;top:6px;width:12px;height:12px;border-radius:4px;background:var(--p)}
  .ln__title a{font-size:1rem;line-height:1.25}
  .ln__title .ln__parent{font-size:.72rem}
  .ln__menu{flex-direction:column;align-items:stretch;gap:0}
  .ln__menu a{position:relative;display:block;padding:7px 16px 7px 36px;font-size:.8125rem;line-height:1.3;white-space:nowrap}
  .ln__menu a::before{content:"";position:absolute;left:12px;top:50%;width:8px;height:8px;margin-top:-4px;border-radius:4px;background:rgba(20,26,51,.22);transition:height .3s var(--ease),margin .3s var(--ease),background-color .3s}
  .ln.is-dark .ln__menu a::before{background:rgba(255,255,255,.3)}
  .ln__menu a:hover::before{background:rgba(20,26,51,.5)}
  .ln.is-dark .ln__menu a:hover::before{background:rgba(255,255,255,.6)}
  .ln__menu a.is-current{color:var(--ink);font-weight:600}
  .ln.is-dark .ln__menu a.is-current{color:#fff}
  .ln__menu a.is-current::before,.ln.is-dark .ln__menu a.is-current::before{height:20px;margin-top:-10px;background:var(--p)}
  .ln__cta{padding:10px 4px 0}
  .ln__cta .btn{display:flex;align-items:center;justify-content:center;gap:7px;width:24px;height:24px;min-height:0;padding:0;border-radius:12px;white-space:nowrap;overflow:hidden}
  .ln__cta .btn .glyph{display:block;width:13px;height:13px;flex:none;stroke-width:2.2}
  .ln__cta .btn span{display:none}
  /* collapsed: labels invisible but kept in place, so opening doesn't reflow */
  .ln:not(.is-open) .ln__title a,.ln:not(.is-open) .ln__menu a{color:transparent;transition:color .12s}
  .ln.is-open .ln__title a,.ln.is-open .ln__menu a{transition:color .25s .14s}
  .ln.is-open .ln__cta{padding:12px 14px 2px}
  .ln.is-open .ln__cta .btn{width:100%;height:32px;border-radius:16px;font-size:.8125rem}
  .ln.is-open .ln__cta .btn span{display:inline}
}

/* 09 HOMEPAGE TILES ------------------------------------------ */
.tiles{display:grid;gap:12px;padding:12px}
.tile{
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:clamp(40px,4.5vw,56px) var(--gutter) 0;
  min-height:clamp(560px,52vw,720px);
}
.tile__name{font-size:clamp(2.4rem,4.6vw,3.5rem);line-height:1.07;letter-spacing:-.022em}
.tile__name .tile__logo{height:.9em;width:auto;margin:0 auto}
.tile__sub{font-size:clamp(1.25rem,2.2vw,1.75rem);line-height:1.18;margin-top:.35rem;color:var(--fg);font-weight:400;max-width:26em}
.tile__eyebrow{font-family:var(--font-head);font-size:clamp(.95rem,1.3vw,1.1rem);font-weight:600;color:var(--p);margin-bottom:.35rem}
.tile .btn-row{justify-content:center;margin-top:1.1rem}
.tile__art{margin-top:auto;width:min(92%,1040px);padding-top:clamp(28px,4vw,48px);transform:translateY(8%)}
.tile--hero{min-height:clamp(600px,52vw,760px)}
/* Hero aura: four soft lights drifting behind the hero, plus a wide sheen that
   sweeps across it. Very low contrast, 45-70s loops, transform-only so it stays cheap. */
.tile--hero{isolation:isolate}
.tile--hero > :not(.aura){position:relative;z-index:1}
.aura{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.aura::before{content:"";position:absolute;inset:-20%;background-image:radial-gradient(rgba(255,255,255,.07) 1px,transparent 1px);background-size:30px 30px;mask-image:radial-gradient(70% 60% at 50% 45%,#000,transparent 75%);-webkit-mask-image:radial-gradient(70% 60% at 50% 45%,#000,transparent 75%);animation:gridpan 90s linear infinite}
.aura::after{content:"";position:absolute;inset:-30% -10%;background:radial-gradient(60% 45% at 50% 40%,rgba(255,255,255,.07),transparent 70%);animation:sheen 34s var(--ease) infinite}
.aura i{position:absolute;display:block;border-radius:50%;filter:blur(2px);will-change:transform}
.aura i:nth-child(1){width:46vw;height:46vw;left:-8vw;top:-14vw;background:radial-gradient(circle,rgba(226,52,40,.30),transparent 68%);animation:drift-a 38s ease-in-out infinite alternate}
.aura i:nth-child(2){width:52vw;height:52vw;right:-12vw;top:-6vw;background:radial-gradient(circle,rgba(86,116,214,.30),transparent 68%);animation:drift-b 46s ease-in-out infinite alternate}
.aura i:nth-child(3){width:40vw;height:40vw;left:22vw;bottom:-18vw;background:radial-gradient(circle,rgba(243,120,55,.20),transparent 70%);animation:drift-c 42s ease-in-out infinite alternate}
.aura i:nth-child(4){width:30vw;height:30vw;right:14vw;bottom:-10vw;background:radial-gradient(circle,rgba(243,120,55,.13),transparent 70%);animation:drift-d 36s ease-in-out infinite alternate}
@keyframes drift-a{from{transform:none}to{transform:translate3d(7vw,4vw,0) scale(1.15)}}
@keyframes drift-b{from{transform:none}to{transform:translate3d(-6vw,5vw,0) scale(1.1)}}
@keyframes drift-c{from{transform:none}to{transform:translate3d(5vw,-4vw,0) scale(1.18)}}
@keyframes drift-d{from{transform:none}to{transform:translate3d(-4vw,-3vw,0) scale(1.22)}}
@keyframes sheen{0%,100%{transform:translate3d(-16%,0,0)}50%{transform:translate3d(16%,4%,0)}}
@keyframes gridpan{from{transform:translate3d(0,0,0)}to{transform:translate3d(30px,30px,0)}}
.qa .aura i,.qa .aura::after,.qa .aura::before{animation:none}
@media (prefers-reduced-motion:reduce){.aura i,.aura::after,.aura::before{animation:none}}
.tile--hero .tile__name{font-size:clamp(2.35rem,5.4vw,4.25rem);text-wrap:balance;max-width:22ch}
.tile--hero .tile__sub{font-size:clamp(1.2rem,2vw,1.6rem);max-width:30em;color:var(--fg-2)}
/* Hero proof strip: stats plus partner badge slots. Placeholder until the
   real figures and badges are cleared with the vendors. */
.proof{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:14px 28px;margin-top:clamp(26px,3vw,38px);padding-top:clamp(18px,2.2vw,26px);border-top:1px solid color-mix(in srgb,var(--fg) 14%,transparent);width:min(100%,1040px)}
.proof__stat{display:flex;align-items:baseline;gap:7px;font-size:.9rem;color:var(--fg-3)}
.proof__stat b{font-family:var(--font-head);font-size:1.25rem;font-weight:600;letter-spacing:-.02em;color:var(--fg)}
.proof__logos{display:flex;flex-wrap:wrap;gap:10px}
.proof__slot{display:grid;place-items:center;height:34px;padding:0 14px;border-radius:8px;border:1px dashed color-mix(in srgb,var(--fg) 26%,transparent);font-size:.72rem;letter-spacing:.04em;text-transform:uppercase;color:var(--fg-3)}
@media (max-width:734px){
  .proof{gap:10px 18px;margin-top:26px;padding-top:18px}
  .proof__stat{font-size:.82rem}
  .proof__stat b{font-size:1.05rem}
  .proof__slot{height:30px;padding:0 10px;font-size:.66rem}
}
.tile-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.tile-grid .tile{min-height:clamp(520px,44vw,640px)}
.tile-grid .tile__name{font-size:clamp(2rem,3.4vw,2.6rem)}
.tile-grid .tile__sub{font-size:clamp(1.1rem,1.6vw,1.3rem)}
.tile-grid .tile__art{width:min(92%,640px)}
.tile--links .tile__links{display:grid;grid-template-columns:1fr 1fr;gap:12px;width:min(100%,560px);margin-block:auto;padding-block:clamp(28px,4vw,48px)}
.tile-link{
  display:flex;flex-direction:column;align-items:flex-start;gap:6px;text-align:left;
  padding:24px 22px 26px;border-radius:var(--radius-sm);background:var(--card);
  transition:background-color .3s var(--ease),transform .4s var(--ease);
}
.tile-link:hover{background:var(--card-2);transform:translateY(-2px)}
.tile-link .glyph{width:32px;height:32px;color:var(--accent);margin-bottom:14px;stroke-width:1.6}
.tile-link b{font-family:var(--font-head);font-size:1.15rem;letter-spacing:-.01em}
.tile-link span{font-size:.9375rem;color:var(--fg-2);line-height:1.35}
@media (max-width:480px){.tile--links .tile__links{grid-template-columns:1fr}}

/* Journey tile: steps on a red-to-orange track */
.tile--impl{min-height:0;padding-bottom:clamp(40px,4.5vw,56px)}
.journey{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.6vw,20px);width:min(100%,1100px);margin-top:clamp(40px,5vw,64px);counter-reset:step}
.journey::before{content:"";position:absolute;left:12.5%;right:12.5%;top:27px;height:2px;background:var(--grad);transform-origin:left;transition:transform 1.4s var(--ease-out) .2s}
.js .journey:not(.is-in)::before{transform:scaleX(0)}
.journey li{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;padding:0 6px;text-align:center}
.journey .glyph{box-sizing:content-box;width:24px;height:24px;padding:15px;border-radius:50%;background:#fff;color:var(--navy);box-shadow:0 0 0 2px var(--red),0 10px 24px -12px rgba(20,26,51,.35);margin-bottom:10px;stroke-width:1.7}
.journey li:last-child .glyph{background:var(--grad);color:#fff;box-shadow:0 10px 24px -12px rgba(184,19,26,.6)}
.journey b{font-family:var(--font-head);font-size:clamp(1rem,1.3vw,1.15rem);letter-spacing:-.01em}
.journey span{font-size:.9rem;color:var(--fg-2);line-height:1.35}
.js .journey:not(.is-in) li{opacity:0;transform:translateY(12px)}
.journey li{transition:opacity .6s var(--ease),transform .6s var(--ease-out)}
.journey li:nth-child(2){transition-delay:.15s}.journey li:nth-child(3){transition-delay:.3s}.journey li:nth-child(4){transition-delay:.45s}
.journey__note{margin-top:clamp(28px,3vw,40px);font-size:.9rem;color:var(--fg-3)}
@media (max-width:734px){
  .journey{grid-template-columns:1fr;gap:18px;width:min(100%,360px);text-align:left}
  .journey::before{left:27px;right:auto;top:28px;bottom:28px;width:2px;height:auto;background:linear-gradient(180deg,var(--red),var(--orange));transform-origin:top}
  .js .journey:not(.is-in)::before{transform:scaleY(0)}
  .journey li{display:grid;grid-template-columns:auto 1fr;column-gap:16px;align-items:center;text-align:left;padding:0}
  .journey .glyph{grid-row:span 2;margin:0}
  .journey b,.journey span{grid-column:2}
}

/* Training tile: a short course list */
.courses{display:grid;gap:10px;width:min(100%,460px);margin-block:auto;padding-block:clamp(28px,4vw,48px);text-align:left}
.courses li{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;padding:14px 18px;border-radius:16px;background:var(--card);transition:background-color .25s,transform .25s var(--ease)}
.courses li:hover{background:var(--card-2);transform:translateX(3px)}
.courses i{width:10px;height:10px;border-radius:50%;background:var(--c)}
.courses b{font-family:var(--font-head);font-size:1rem;letter-spacing:-.01em}
.courses span{font-size:.85rem;color:var(--fg-2)}
.js .courses:not(.is-in) li{opacity:0;transform:translateY(10px)}
.courses li{transition:opacity .5s var(--ease),transform .5s var(--ease-out),background-color .25s}
.courses li:nth-child(2){transition-delay:.08s}.courses li:nth-child(3){transition-delay:.16s}.courses li:nth-child(4){transition-delay:.24s}
@media (max-width:480px){.courses li{grid-template-columns:auto 1fr}.courses span{grid-column:2}}
.uc-visual{display:flex;flex-direction:column;align-items:center;gap:26px;padding-bottom:clamp(40px,6vw,72px)}
.uc-visual .glyph{width:clamp(120px,16vw,200px);height:clamp(120px,16vw,200px);stroke-width:.9;color:var(--p)}
@media (max-width:734px){
  .tile,.tile--hero,.tile-grid .tile{min-height:0}
  .tile .fan{margin-top:48px}
  .tiles{padding:0;gap:10px}
  .tile-grid{grid-template-columns:1fr;gap:10px}
  .tile__art{width:112%;transform:translateY(10%)}
  .tile-grid .tile__art{width:108%}
}

/* Featured tile ("Uitgelicht"): one subject in the spotlight, directly under the hero.
   Split layout (copy left, render bleeding off the right edge) so it reads
   differently from the centred product tiles below it. */
.tile--featured{
  display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);align-items:center;
  gap:clamp(24px,4vw,64px);text-align:left;
  min-height:clamp(500px,42vw,640px);padding:clamp(44px,5vw,80px) 0 0 clamp(28px,5.5vw,96px);
}
.tile--featured::before{
  content:"";position:absolute;right:-10%;top:50%;width:70%;aspect-ratio:1;transform:translateY(-50%);pointer-events:none;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--p) 26%,transparent),transparent 70%);
}
.feat__copy{position:relative;padding-bottom:clamp(44px,5vw,80px);align-self:center}
.feat__badge{
  display:inline-flex;align-items:center;gap:8px;height:30px;padding:0 13px;border-radius:30px;
  background:color-mix(in srgb,var(--p) 16%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--p) 40%,transparent);
  font-family:var(--font-head);font-size:.8125rem;font-weight:600;letter-spacing:.01em;color:var(--p);
}
.feat__badge i{width:7px;height:7px;border-radius:50%;background:var(--p);box-shadow:0 0 0 0 color-mix(in srgb,var(--p) 60%,transparent);animation:featPulse 2.4s var(--ease) infinite}
@keyframes featPulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--p) 55%,transparent)}70%,100%{box-shadow:0 0 0 9px transparent}}
.tile--featured .tile__name{font-size:clamp(2.6rem,5.2vw,4.4rem);margin-top:18px}
.tile--featured .tile__sub{margin-top:.7rem;color:var(--fg-2);font-size:clamp(1.1rem,1.6vw,1.35rem);line-height:1.4;max-width:30em}
.feat__points{display:grid;gap:10px;margin-top:1.5rem}
.feat__points li{display:flex;align-items:center;gap:10px;font-size:1rem;color:var(--fg)}
.feat__points .glyph{width:20px;height:20px;color:var(--p);stroke-width:2}
.tile--featured .btn-row{justify-content:flex-start;margin-top:1.8rem}
.feat__art{position:relative;align-self:end;width:112%;transform:translate(0,7%)}
.tile-grid > .tile:last-child:nth-child(odd){grid-column:1 / -1}
/* When a featured subject leaves the grid, the links tile goes full width: copy left, links right. */
@media (min-width:901px){
  .tile-grid > .tile--links:last-child:nth-child(odd){
    display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto auto 1fr;column-gap:clamp(32px,5vw,80px);
    align-items:start;text-align:left;min-height:0;padding:clamp(48px,5vw,80px) clamp(28px,5.5vw,96px);
  }
  .tile-grid > .tile--links:last-child:nth-child(odd) > :not(.tile__links){grid-column:1}
  .tile-grid > .tile--links:last-child:nth-child(odd) .tile__links{grid-column:2;grid-row:1 / span 3;align-self:center;margin:0;padding:0;width:100%}
}
@media (max-width:900px){
  .tile--featured{grid-template-columns:1fr;padding:clamp(40px,8vw,64px) var(--gutter) 0;text-align:left}
  .feat__copy{padding-bottom:0}
  .feat__art{width:108%;margin-left:4%}
  .tile--featured::before{right:-30%;top:auto;bottom:-10%;width:120%;transform:none}
}
@media (prefers-reduced-motion:reduce){.feat__badge i{animation:none}}

/* Fan of renders in the homepage hero tile. */
.fan{position:relative;width:min(100%,1180px);margin-top:auto;height:clamp(250px,34vw,470px)}
.fan .device{position:absolute;bottom:-6%;transition:transform 1.4s var(--ease-out),opacity 1.2s var(--ease)}
.fan .device:nth-child(1){width:38%;left:0;bottom:-2%;z-index:1}
.fan .device:nth-child(2){width:42%;left:13%;bottom:4%;z-index:2}
.fan .device:nth-child(3){width:50%;left:25%;bottom:-8%;z-index:4}
.fan .device:nth-child(4){width:42%;right:13%;bottom:4%;z-index:3}
.fan .device:nth-child(5){width:38%;right:0;bottom:-2%;z-index:2}
.js .fan:not(.is-in) .device{opacity:0;transform:translateY(18%)}
.js .fan .device:nth-child(1),.js .fan .device:nth-child(5){transition-delay:.25s}
.js .fan .device:nth-child(2),.js .fan .device:nth-child(4){transition-delay:.12s}
@media (max-width:734px){
  .fan{height:56vw}
  .fan .device:nth-child(1),.fan .device:nth-child(5){display:none}
  .fan .device:nth-child(2){width:62%;left:-8%}
  .fan .device:nth-child(4){width:62%;right:-8%}
  .fan .device:nth-child(3){width:76%;left:12%}
}

/* 10 PRODUCT HERO -------------------------------------------- */
.phero{padding-top:calc(var(--ln-h) + clamp(44px,6vw,88px));text-align:center;overflow:hidden}
.phero__name{font-family:var(--font-head);font-size:clamp(1.3rem,2.2vw,1.75rem);font-weight:600;letter-spacing:-.01em;margin-bottom:.5rem}
.phero__title{font-size:var(--fs-hero);line-height:1.04;letter-spacing:-.028em;max-width:18ch;margin-inline:auto;text-wrap:balance}
.phero__lead{margin:1.3rem auto 0;max-width:36em}
.phero .btn-row{justify-content:center;margin-top:1.8rem}
.phero__art{width:min(1120px,calc(100% - 2 * var(--gutter)));margin:clamp(48px,6vw,80px) auto 0;transform-origin:50% 0}
.js .phero__art{transform:scale(var(--hero-scale,1.06)) translateY(var(--hero-y,0))}
.phero__foot{margin-top:clamp(36px,5vw,64px);padding-bottom:clamp(64px,8vw,120px)}

/* Module row: Apple-style "choose your model" cards */
.modules{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin-top:clamp(48px,6vw,80px);text-align:left}
.modules--2{max-width:720px;margin-inline:auto}
.module{
  position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:8px;
  min-height:190px;padding:26px 24px 28px;border-radius:22px;background:var(--card);text-align:left;
  transition:transform .5s var(--ease),background-color .3s;
}
.module:hover{transform:translateY(-3px)}
.modules--3{grid-template-columns:repeat(3,1fr)}
@media (max-width:900px){.modules--3{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.modules--3{grid-template-columns:1fr}}
.module > .glyph{width:34px;height:34px;color:var(--p);stroke-width:1.6;margin-bottom:26px}
.module b{font-family:var(--font-head);font-size:1.15rem;line-height:1.2;letter-spacing:-.01em;padding-right:34px}
.module span{font-size:.9375rem;color:var(--fg-2);line-height:1.35;padding-right:34px}
.module .fcard__plus{width:30px;height:30px;right:16px;bottom:16px}
.module .fcard__plus .glyph{width:14px;height:14px}

/* 11 DEVICE / RENDERS ---------------------------------------- */
.device{container-type:inline-size;position:relative}
.device__screen{
  position:relative;overflow:hidden;border-radius:max(6px,1.25cqi);
  box-shadow:0 2.6cqi 7cqi -2.4cqi rgba(11,15,34,.42),0 0 0 1px rgba(11,15,34,.08);
  background:#fff;
}
.theme-dark .device__screen,.theme-navy .device__screen{box-shadow:0 3cqi 9cqi -2cqi rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.1)}
.device__screen svg{width:100%;height:auto}

/* Text inside renders */
.r{font-family:var(--font-body);fill:#141a33}
.r-title{font-size:13px;font-weight:500;fill:#5a6080}
.r-h{font-family:var(--font-head);font-size:15px;font-weight:600;fill:#141a33;letter-spacing:-.01em}
.r-h2{font-family:var(--font-head);font-size:22px;font-weight:600;fill:#141a33;letter-spacing:-.015em}
.r-t{font-size:12.5px;fill:#3b4160}
.r-s{font-size:11px;fill:#7a809c}
.r-n{font-family:var(--font-head);font-size:30px;font-weight:600;fill:#141a33;letter-spacing:-.02em}
.r-m{font-family:var(--font-mono);font-size:13px;fill:#cdd3ea}
.r-ms{font-family:var(--font-mono);font-size:11.5px;fill:#8d94b3}
.r-w{fill:#fff}
.r-dim{fill:#8d94b3}
.r-b{font-weight:600}

/* 12 CHAPTER NAV --------------------------------------------- */
.chapternav{padding:calc(var(--gn-h) * 0 + 22px) 0 16px;overflow-x:auto;scrollbar-width:none;border-bottom:1px solid var(--line-c,var(--line))}
.chapternav::-webkit-scrollbar{display:none}
.chapternav ul{display:flex;justify-content:center;gap:clamp(22px,3.4vw,44px);width:max-content;min-width:100%;padding-inline:var(--gutter)}
.chapternav a{display:flex;flex-direction:column;align-items:center;gap:8px;font-size:.75rem;font-weight:500;color:var(--fg);white-space:nowrap;transition:color .2s}
.chapternav a:hover{color:var(--navy-2)}
.chapternav .glyph{width:38px;height:38px;stroke-width:1.5;color:var(--c,var(--navy))}
.chapternav .new{font-size:.625rem;color:var(--orange);margin-top:-6px}

/* 13 HIGHLIGHTS GALLERY -------------------------------------- */
.gallery{position:relative}
.gallery__track{
  display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  scrollbar-width:none;padding:4px max(var(--gutter),calc((100vw - 1000px) / 2)) 8px;
  scroll-padding-inline:max(var(--gutter),calc((100vw - 1000px) / 2));
}
.gallery__track::-webkit-scrollbar{display:none}
.gallery__item{
  flex:0 0 min(1000px,calc(100vw - 2 * var(--gutter)));
  scroll-snap-align:center;scroll-snap-stop:always;
  position:relative;overflow:hidden;border-radius:var(--radius);
  background:var(--card);min-height:clamp(460px,50vw,600px);
  display:grid;grid-template-rows:auto 1fr;
  transition:opacity .6s var(--ease);
}
.gallery__caption{
  padding:clamp(30px,4vw,48px) clamp(28px,4.4vw,56px) 0;
  font-family:var(--font-head);font-size:clamp(1.3rem,2.3vw,1.85rem);line-height:1.2;font-weight:600;letter-spacing:-.015em;
  color:var(--fg-2);max-width:26em;
}
.gallery__caption strong{color:var(--fg)}
.gallery__visual{position:relative;display:grid;place-items:end center;padding:24px clamp(20px,4vw,48px) 0;overflow:hidden}
.gallery__controls{display:flex;justify-content:center;align-items:center;gap:14px;margin-top:28px}

/* Visuals that live inside gallery items and cards */
.zoomcrop{position:absolute;inset:0;overflow:hidden}
.zoomcrop .device{position:absolute;width:var(--zw,120%);left:var(--zx,8%);top:var(--zy,10%)}
.zoomcrop--flat{-webkit-mask-image:none;mask-image:none}

.miniui{width:min(600px,100%);background:var(--card-2);border-radius:20px 20px 0 0;padding:20px 24px 6px;box-shadow:0 -1px 0 var(--line-c) inset}
.miniui__head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.miniui__head b{font-family:var(--font-head);font-size:1rem;letter-spacing:-.01em}
.miniui__head span{font-size:.8rem;color:var(--fg-3)}
.miniui__row{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;padding:13px 0;border-top:1px solid var(--line-c);font-size:.95rem;text-align:left}
.miniui__row i{width:9px;height:9px;border-radius:50%;background:#3cb46e}
.miniui__row i.warn{background:var(--orange)}
.miniui__row i.idle{background:var(--fg-3)}
.miniui__row small{font-size:.8rem;color:var(--fg-3);font-family:var(--font-mono)}

.orbit{position:relative;width:min(620px,100%);aspect-ratio:1.75;align-self:end}
.orbit::before{content:"";position:absolute;left:50%;top:56%;width:74%;aspect-ratio:2;border:1px dashed var(--line-c);border-radius:50%;transform:translate(-50%,-50%)}
.orbit__core{position:absolute;left:50%;top:56%;transform:translate(-50%,-50%);width:clamp(72px,9vw,100px);aspect-ratio:1;border-radius:28%;background:var(--p);display:grid;place-items:center;color:#fff;box-shadow:0 20px 50px -18px color-mix(in srgb,var(--p) 70%,transparent)}
.orbit__core .glyph{width:48%;height:48%;stroke-width:1.9}
.orbit__chip{position:absolute;transform:translate(-50%,-50%);display:flex;align-items:center;gap:8px;padding:9px 14px;border-radius:14px;background:var(--card-2);font-size:.875rem;font-weight:500;white-space:nowrap;color:var(--fg)}
.orbit__chip .glyph{width:17px;height:17px;color:var(--p)}

.morph{display:flex;align-items:center;justify-content:center;gap:clamp(14px,3vw,36px);flex-wrap:wrap;padding:10px 0 clamp(36px,5vw,64px)}
.morph__col{display:grid;gap:10px}
.morph__item{display:flex;align-items:center;gap:10px;padding:12px 16px;border-radius:14px;background:var(--card-2);font-size:.9375rem;font-weight:500;white-space:nowrap}
.morph__item .glyph{width:20px;height:20px;color:var(--fg-3)}
.morph__item--on{background:color-mix(in srgb,var(--p) 18%,var(--card-2))}
.morph__item--on .glyph{color:var(--p)}
.morph__arrow{width:clamp(28px,5vw,64px);height:2px;background:var(--fg-3);position:relative}
.morph__arrow::after{content:"";position:absolute;right:-1px;top:50%;width:9px;height:9px;border-top:2px solid var(--fg-3);border-right:2px solid var(--fg-3);transform:translateY(-50%) rotate(45deg)}
@media (max-width:560px){.morph{flex-direction:column}.morph__arrow{transform:rotate(90deg)}}
.dotnav{display:flex;align-items:center;gap:12px;height:56px;padding:0 22px;border-radius:56px;background:var(--seg)}
.dotnav button{position:relative;width:8px;height:8px;border-radius:8px;background:var(--dot);overflow:hidden;transition:width .5s var(--ease),background-color .3s}
.dotnav button::after{content:"";position:absolute;inset:0;background:var(--fg);transform-origin:0 50%;transform:scaleX(var(--progress,0))}
.dotnav button.is-active{width:48px;background:var(--dot-track)}
.dotnav button:not(.is-active)::after{transform:scaleX(0)}
.playpause{width:56px;height:56px;border-radius:50%;background:var(--seg);display:grid;place-items:center;color:var(--fg);transition:background-color .2s}
.playpause:hover{background:var(--seg-thumb)}
.playpause .glyph{width:18px;height:18px;fill:currentColor;stroke:none}
.playpause .i-play{display:none}
.playpause.is-paused .i-play{display:block}
.playpause.is-paused .i-pause{display:none}

/* 14 SCRUB TEXT, STATEMENT, QUOTE ------------------------------ */
.scrub{
  font-family:var(--font-head);font-size:clamp(1.75rem,3.6vw,3rem);line-height:1.2;font-weight:600;letter-spacing:-.02em;
  max-width:22em;
}
.scrub .w{transition:color .35s var(--ease)}
.js .scrub .w{color:var(--scrub-off,#c7cad6)}
.js .theme-dark .scrub .w,.js .theme-navy .scrub .w{--scrub-off:#3b4263}
.js .scrub .w.on{color:var(--fg)}
.scrub .w.hl.on{color:var(--p)}

.statement{font-family:var(--font-head);font-weight:600;font-size:clamp(2.4rem,6vw,5rem);line-height:1.05;letter-spacing:-.03em;text-align:center;text-wrap:balance}
.statement span{display:block}

.bigquote{max-width:880px;margin-inline:auto;text-align:center}
.bigquote blockquote{font-family:var(--font-head);font-size:clamp(1.6rem,3.4vw,2.6rem);line-height:1.2;font-weight:600;letter-spacing:-.018em}
.bigquote figcaption{margin-top:1.4rem;color:var(--fg-2)}

/* 15 FEATURE CARDS (BENTO) & ICON ROW -------------------------- */
.bento{display:grid;grid-template-columns:repeat(6,1fr);gap:20px}
.bento__card{
  grid-column:span 2;position:relative;overflow:hidden;
  background:var(--card);border-radius:var(--radius);
  padding:clamp(28px,3.2vw,40px);min-height:300px;
  display:flex;flex-direction:column;
}
.bento__card--wide{grid-column:span 3}
.bento__card--full{grid-column:1 / -1}
.bento__card--tall{grid-row:span 2}
.bento__icon{width:44px;height:44px;color:var(--p);stroke-width:1.6}
.bento__title{font-size:var(--fs-card);line-height:1.16;margin-top:32px}
.bento__text{margin-top:.6rem;color:var(--fg-2)}
.bento__title,.fcard__title,.card h3,.lineup__name,.audience h3,.modal__title{overflow-wrap:break-word}
.bento__big{font-family:var(--font-head);font-size:clamp(1.3rem,2vw,1.7rem);line-height:1.2;font-weight:600;letter-spacing:-.015em;color:var(--fg-2)}
.bento__big strong{color:var(--fg)}
.bento__visual{margin-top:auto;padding-top:28px}
@media (max-width:1068px){.bento__card{grid-column:span 3}.bento__card--full{grid-column:1 / -1}}
@media (max-width:734px){.bento{gap:14px}.bento__card,.bento__card--wide{grid-column:1 / -1;min-height:0}.bento__title{margin-top:24px}}

.iconrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:36px 24px;text-align:center}
.iconrow li{display:flex;flex-direction:column;align-items:center;gap:14px}
.iconrow .glyph{width:44px;height:44px;color:var(--p);stroke-width:1.5}
.iconrow span{font-family:var(--font-head);font-weight:600;font-size:1.1rem;line-height:1.25;letter-spacing:-.01em;max-width:12em}

/* 16 STATS --------------------------------------------------- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:48px 40px}
.stat__num{font-family:var(--font-head);font-size:clamp(3.4rem,7vw,5.5rem);line-height:1;font-weight:600;letter-spacing:-.035em}
.stat__label{margin-top:.8rem;font-size:var(--fs-intro);line-height:1.35;color:var(--fg-2);max-width:18em}
.stat__label strong{color:var(--fg)}
.stat__note{margin-top:.5rem;font-size:var(--fs-micro);color:var(--fg-3)}

/* 17 CARD RAIL + MODAL SHEETS --------------------------------- */
.rail-wrap{position:relative}
.rail{
  display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  scrollbar-width:none;padding:4px max(var(--gutter),calc((100vw - var(--wrap)) / 2)) 24px;
  scroll-padding-inline:max(var(--gutter),calc((100vw - var(--wrap)) / 2));
}
.rail::-webkit-scrollbar{display:none}
.fcard{
  flex:0 0 clamp(290px,30vw,372px);scroll-snap-align:start;
  position:relative;overflow:hidden;text-align:left;
  min-height:clamp(440px,42vw,560px);
  background:var(--card);border-radius:var(--radius);
  padding:clamp(26px,2.6vw,34px);
  display:flex;flex-direction:column;
  transition:transform .5s var(--ease);
}
.fcard:hover{transform:scale(1.012)}
.fcard__eyebrow{font-size:.8125rem;font-weight:600;color:var(--fg-2);letter-spacing:0}
.fcard__title{font-family:var(--font-head);font-size:clamp(1.4rem,2.1vw,1.75rem);font-weight:600;line-height:1.16;letter-spacing:-.015em;margin-top:.45rem;color:var(--fg)}
.fcard__text{margin-top:.7rem;color:var(--fg-2);font-size:1rem}
.fcard__visual{margin-top:auto;display:grid;place-items:center;padding:26px 0 30px}
.fcard__visual .glyph{width:clamp(72px,8vw,104px);height:clamp(72px,8vw,104px);stroke-width:1.15;color:var(--p)}
.fcard__plus{
  position:absolute;right:18px;bottom:18px;width:36px;height:36px;border-radius:50%;
  display:grid;place-items:center;background:var(--fg);color:var(--bg);
  transition:transform .3s var(--ease),background-color .2s;
}
.fcard__plus .glyph{width:16px;height:16px;stroke-width:2.6}
.fcard:hover .fcard__plus{transform:scale(1.08)}
.uc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.uc-grid .fcard{min-height:clamp(300px,28vw,380px)}
@media (max-width:1068px){.uc-grid{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.uc-grid{grid-template-columns:1fr}}
.rail-nav{display:flex;justify-content:flex-end;gap:16px;padding:6px max(var(--gutter),calc((100vw - var(--wrap)) / 2)) 0}
.rail-nav button{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--seg);color:var(--fg);transition:opacity .2s,background-color .2s}
.rail-nav button:hover{background:var(--seg-thumb)}
.rail-nav button:disabled{opacity:.35;cursor:default}
.rail-nav .glyph{width:18px;height:18px;stroke-width:2.2}

.modal{
  position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;
  padding:0;border:0;background:transparent;overflow-y:auto;overscroll-behavior:contain;
}
.modal::backdrop{background:rgba(11,15,34,.55);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}
.modal[open]::backdrop{animation:fade .45s var(--ease)}
.modal__panel{
  position:relative;width:min(1000px,calc(100% - 2 * var(--gutter)));
  margin:clamp(40px,7vh,88px) auto;
  background:#fff;color:var(--ink);border-radius:30px;
  padding:clamp(40px,6.5vw,80px) clamp(26px,6.5vw,80px);
  --fg:var(--ink);--fg-2:var(--ink-2);--fg-3:var(--ink-3);--card:var(--grey);--card-2:#fff;--line-c:var(--line);--link:var(--red);--accent:var(--red);--p:var(--p-lt);--btn-bg:var(--red);--btn-fg:#fff;--btn-bg-h:var(--red-2);--ghost:var(--navy);--bg:#fff;
}
.modal[open] .modal__panel{animation:sheet .6s var(--ease-out)}
.modal__close{
  position:absolute;top:18px;right:18px;width:36px;height:36px;border-radius:50%;
  display:grid;place-items:center;background:var(--ink);color:#fff;transition:transform .2s
}
.modal__close:hover{transform:scale(1.06)}
.modal__close .glyph{width:16px;height:16px;stroke-width:2.6}
.modal__eyebrow{font-family:var(--font-head);font-weight:600;color:var(--p-lt);margin-bottom:.5rem}
.modal__title{font-size:clamp(2rem,4.4vw,3.2rem);line-height:1.07;letter-spacing:-.025em;max-width:16ch}
.modal__body{margin-top:clamp(28px,4vw,48px);display:grid;gap:14px}
.modal__block{background:var(--grey);border-radius:var(--radius-sm);padding:clamp(22px,3vw,34px)}
.modal__block h3{font-size:1.1rem;margin-bottom:.45rem;letter-spacing:-.01em}
.modal__block p{color:var(--ink-2);font-size:1.0625rem}
.modal__block ul{display:grid;gap:.4rem;margin-top:.4rem;color:var(--ink-2)}
.modal__block li{padding-left:1.1em;position:relative}
.modal__block li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;border-radius:50%;background:var(--p)}
.modal__foot{margin-top:clamp(28px,4vw,44px)}
@keyframes sheet{from{opacity:0;transform:translateY(60px) scale(.98)}to{opacity:1;transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}
.modal-open{overflow:hidden}

/* Use case list (homepage "Toepassingen"): an iOS-style grouped list.
   White rounded card, app-style colour icons, inset hairlines, chevrons. */
.uclist{background:var(--card);border-radius:var(--radius);overflow:hidden}
.uclist__row{
  --inset:clamp(18px,2.6vw,30px);
  position:relative;display:grid;grid-template-columns:44px minmax(0,1fr) auto 18px;align-items:center;gap:18px;
  padding:18px var(--inset);transition:background-color .25s var(--ease);
}
.uclist li + li .uclist__row::before{content:"";position:absolute;top:0;right:0;left:calc(var(--inset) + 62px);height:1px;background:var(--line-c)}
.uclist__row:hover{background:var(--card-2)}
.uclist__row:focus-visible{outline-offset:-3px;border-radius:0}
.uclist__icon{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:var(--c);color:#fff;box-shadow:inset 0 -8px 16px -10px rgba(0,0,0,.25)}
.uclist__icon .glyph{width:22px;height:22px;stroke-width:2}
.uclist__text{display:flex;flex-direction:column;min-width:0}
.uclist__name{font-family:var(--font-head);font-weight:600;font-size:clamp(1.05rem,1.4vw,1.25rem);line-height:1.25;letter-spacing:-.012em;color:var(--fg)}
.uclist__desc{margin-top:2px;font-size:.9375rem;color:var(--fg-2)}
.uclist__tags{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px}
.uclist__tags .chip{background:var(--card-2);font-size:.75rem;padding:5px 10px 5px 8px}
.uclist__row:hover .uclist__tags .chip{background:var(--card)}
.uclist__chev{width:18px;height:18px;color:var(--fg-3);stroke-width:2.2;transition:transform .25s var(--ease),color .25s}
.uclist__row:hover .uclist__chev{transform:translateX(3px);color:var(--fg)}
.uclist__foot{display:flex;justify-content:flex-end;margin-top:22px}
@media (max-width:734px){
  .uclist__row{grid-template-columns:40px minmax(0,1fr) 16px;column-gap:14px;row-gap:10px;padding-block:16px}
  .uclist li + li .uclist__row::before{left:calc(var(--inset) + 54px)}
  .uclist__icon{width:40px;height:40px;border-radius:11px;grid-row:1 / span 2;align-self:start}
  .uclist__tags{grid-column:2;grid-row:2;justify-content:flex-start}
  .uclist__chev{grid-column:3;grid-row:1 / span 2}
  .uclist__foot{justify-content:flex-start}
}

/* 18 SEGMENTED CONTROL & TAB PANELS ------------------------- */
.seg-wrap{display:flex;justify-content:center;margin-bottom:clamp(32px,4vw,52px);overflow-x:auto;scrollbar-width:none;padding-inline:var(--gutter)}
.seg-wrap::-webkit-scrollbar{display:none}
.seg{position:relative;display:inline-flex;gap:2px;padding:4px;border-radius:980px;background:var(--seg)}
.seg button{
  position:relative;z-index:1;padding:9px 18px;border-radius:980px;
  font-size:.9375rem;font-weight:500;color:var(--fg-2);white-space:nowrap;transition:color .3s var(--ease)
}
.seg button[aria-selected="true"]{color:var(--fg)}
.seg__thumb{
  position:absolute;z-index:0;top:4px;bottom:4px;left:0;width:0;border-radius:980px;
  background:var(--seg-thumb);box-shadow:0 2px 8px -2px rgba(11,15,34,.22);
  transition:transform .5s var(--ease),width .5s var(--ease);
}
.tabpanel[hidden]{display:none}
.tabpanel.is-in{animation:panel .6s var(--ease-out)}
@keyframes panel{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.audience{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:center;background:var(--card);border-radius:var(--radius);padding:clamp(30px,5vw,64px)}
.audience h3{font-size:var(--fs-sub);line-height:1.1}
.audience p{color:var(--fg-2);font-size:var(--fs-intro);line-height:1.45}
.audience .glyph{width:clamp(96px,14vw,168px);height:clamp(96px,14vw,168px);stroke-width:1;color:var(--p);margin-inline:auto}
@media (max-width:734px){.audience{grid-template-columns:1fr}.audience .glyph{display:none}}

/* 19 CHECKLIST, STEPS, SPLIT ----------------------------------- */
.checks{display:grid;gap:18px}
.checks li{display:grid;grid-template-columns:28px 1fr;gap:14px;align-items:start;font-size:1.1875rem;line-height:1.4;color:var(--fg)}
.checks .glyph{width:26px;height:26px;color:var(--link);stroke-width:2}
.checks--2{grid-template-columns:1fr 1fr;gap:22px 48px}
@media (max-width:734px){.checks--2{grid-template-columns:1fr}}

.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;counter-reset:step}
.step{position:relative;background:var(--card);border-radius:var(--radius-sm);padding:26px 24px 30px}
.step::before{counter-increment:step;content:counter(step,decimal-leading-zero);font-family:var(--font-mono);font-size:.8125rem;font-weight:500;color:var(--fg-3)}
.step h3{font-size:1.15rem;line-height:1.25;margin-top:1.2rem;letter-spacing:-.01em}
.step p{margin-top:.5rem;font-size:.97rem;color:var(--fg-2)}
@media (max-width:1068px){.steps{grid-template-columns:repeat(3,1fr)}}
@media (max-width:734px){.steps{grid-template-columns:1fr}}

.stack-cards{display:grid;gap:14px}
.stack-cards .card{padding:clamp(24px,2.6vw,32px)}
.stack-cards .card .more{padding-top:1rem}

/* Vertical timeline (e.g. implementation days) */
.timeline{position:relative;display:grid;gap:26px;padding-left:34px}
.timeline::before{content:"";position:absolute;left:7px;top:8px;bottom:8px;width:2px;background:var(--line-c)}
.timeline li{position:relative}
.timeline li::before{content:"";position:absolute;left:-34px;top:5px;width:16px;height:16px;border-radius:50%;background:var(--bg);box-shadow:inset 0 0 0 2px var(--p)}
.timeline li:last-child::before{background:var(--p)}
.timeline span{font-family:var(--font-mono);font-size:.8125rem;color:var(--p)}
.timeline h3{font-size:1.3rem;margin-top:.25rem;letter-spacing:-.01em}
.timeline p{color:var(--fg-2);margin-top:.25rem}

.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,6vw,96px);align-items:center}
.split--top{align-items:start}
@media (max-width:900px){.split{grid-template-columns:1fr}}

.cards-2{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.cards-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.card{background:var(--card);border-radius:var(--radius);padding:clamp(28px,3.4vw,44px);display:flex;flex-direction:column}
.card h3{font-size:var(--fs-card);line-height:1.16}
.card p{margin-top:.7rem;color:var(--fg-2)}
.card .more{margin-top:auto;padding-top:1.4rem}
.card .card__label{font-size:.8125rem;font-weight:600;color:var(--p);margin-bottom:.6rem;font-family:var(--font-head)}
/* Wide card that links to a sibling page, with a cropped render on the right */
.family-card{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:center;padding:0 0 0 clamp(28px,4vw,48px);overflow:hidden;min-height:300px;transition:transform .5s var(--ease)}
.family-card:hover{transform:translateY(-3px)}
.family-card > div:first-child{padding-block:clamp(28px,4vw,44px)}
.family-card .more{padding-top:1.2rem}
.family-card__art{align-self:end;position:relative;height:100%;min-height:260px}
.family-card__art .device{position:absolute;width:150%;left:0;top:14%}
@media (max-width:734px){.family-card{grid-template-columns:1fr;padding:0}.family-card > div:first-child{padding:28px 26px 0}.family-card__art{min-height:220px}}
.tile-card{min-height:340px;transition:background-color .3s var(--ease),transform .5s var(--ease)}
.tile-card:hover{background:var(--card-2);transform:translateY(-3px)}
.card ul.dots{margin-top:1rem;display:grid;gap:.45rem;color:var(--fg-2)}
.card ul.dots li{position:relative;padding-left:1.1em}
.card ul.dots li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;border-radius:50%;background:var(--p)}
@media (max-width:1068px){.cards-3{grid-template-columns:1fr 1fr}}
@media (max-width:734px){.cards-2,.cards-3{grid-template-columns:1fr}}

.team{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:40px 24px;text-align:center}
.team li{display:flex;flex-direction:column;align-items:center;gap:4px}
.team__avatar{width:112px;height:112px;border-radius:50%;display:grid;place-items:center;margin-bottom:14px;background:var(--grey);color:var(--navy);font-family:var(--font-head);font-size:1.6rem;font-weight:600;letter-spacing:.02em;box-shadow:inset 0 0 0 1px var(--line)}
.team b{font-family:var(--font-head);font-size:1.05rem;letter-spacing:-.01em}
.team li > span:last-child{font-size:.9375rem;color:var(--ink-2)}

/* 20 LINEUP ---------------------------------------------------- */
.lineup{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:48px 28px}
.lineup--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.lineup--3{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:clamp(28px,4vw,64px);row-gap:72px}
.lineup__item{display:flex;flex-direction:column;align-items:center;text-align:center}
.lineup__art{width:100%;aspect-ratio:10/8;display:flex;align-items:flex-end;justify-content:center;margin-bottom:26px}
.lineup__art .device{width:100%}
.lineup__name{font-size:1.5rem;letter-spacing:-.015em}
.lineup__desc{margin-top:.5rem;color:var(--fg-2);font-size:1rem}
.lineup__cta{display:flex;flex-direction:column;align-items:center;gap:12px;margin-top:1.2rem}
.lineup__specs{width:100%;margin-top:1.6rem;padding-top:1.6rem;border-top:1px solid var(--line-c);display:grid;gap:14px}
.lineup__specs li{display:flex;flex-direction:column;align-items:center;gap:8px;font-size:.9375rem;color:var(--fg-2);line-height:1.35}
.lineup__specs .glyph{width:30px;height:30px;color:var(--c,var(--navy));stroke-width:1.5}
.lineup--compact .lineup__specs{display:none}
.lineup__swatch{width:10px;height:10px;border-radius:50%;background:var(--c);margin:0 auto 12px}
/* Keep rows level across columns: descriptions and spec lines get room for their longest variant. */
@media (min-width:901px){
  .lineup__desc{min-height:6em}
  .lineup__specs li{min-height:5.6em;justify-content:flex-start}
}
@media (max-width:1180px){.lineup,.lineup--4{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:900px){.lineup,.lineup--4{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:20px;padding:0 var(--gutter) 12px;margin-inline:calc(-1 * var(--gutter));scrollbar-width:none}
  .lineup__item{flex:0 0 min(300px,74vw);scroll-snap-align:center}}

/* Event log → process map (process mining explainer) */
.eventlog__table{display:grid;grid-template-columns:auto 1fr auto;column-gap:18px;margin-top:12px;font-family:var(--font-mono);font-size:.8125rem;color:var(--fg)}
.eventlog__table span{padding:9px 0;border-top:1px solid var(--line-c)}
.eventlog__table span:nth-child(-n+3){border-top:0;color:var(--fg-3);font-size:.6875rem;letter-spacing:.06em;text-transform:uppercase}
.eventlog__arrow{display:grid;place-items:center;margin:16px 0 14px;color:var(--p)}
.eventlog__arrow .glyph{width:26px;height:26px;stroke-width:2.2}
.eventlog__map{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.eventlog__map span{padding:8px 13px;border-radius:40px;background:color-mix(in srgb,var(--p) 14%,#fff);color:color-mix(in srgb,var(--p) 65%,#000);font-size:.8125rem;font-weight:600;white-space:nowrap}
.eventlog__map i{width:16px;height:2px;background:var(--p)}
.eventlog__map i.slow{background:var(--red);height:3px}

/* 21 FLOW DIAGRAM ----------------------------------------------- */
.flow{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;position:relative}
.flow__stage{position:relative;background:var(--card);border-radius:var(--radius-sm);padding:26px 24px}
.flow__stage:not(:last-child)::after{
  content:"";position:absolute;right:-13px;top:50%;width:10px;height:10px;z-index:2;
  border-top:2px solid var(--fg-3);border-right:2px solid var(--fg-3);transform:translateY(-50%) rotate(45deg)
}
.flow__label{font-family:var(--font-mono);font-size:.75rem;letter-spacing:.04em;text-transform:uppercase;color:var(--fg-3)}
.flow__stage h3{font-size:1.3rem;margin-top:.7rem}
.flow__stage p{font-size:.95rem;color:var(--fg-2);margin-top:.4rem}
.flow__chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:1rem}
.chip{display:inline-flex;align-items:center;gap:6px;padding:6px 12px 6px 8px;border-radius:40px;background:var(--card-2);font-size:.8125rem;font-weight:500;color:var(--fg)}
.chip i{width:8px;height:8px;border-radius:50%;background:var(--c,var(--red))}
a.chip:hover{box-shadow:inset 0 0 0 1px var(--line-c)}
@media (max-width:900px){.flow{grid-template-columns:1fr 1fr}.flow__stage:nth-child(2)::after{display:none}}
@media (max-width:560px){.flow{grid-template-columns:1fr}.flow__stage::after{display:none}}

/* 22 FINAL CTA -------------------------------------------------- */
.final{position:relative;overflow:hidden;text-align:center;padding-block:clamp(110px,14vw,200px)}
.final__title{font-size:var(--fs-hero);line-height:1;letter-spacing:-.035em}
.final__text{margin:1.4rem auto 0;max-width:34em}
.final .btn-row{justify-content:center;margin-top:2rem}
.final__rings{position:absolute;left:50%;top:50%;width:min(1300px,160vw);aspect-ratio:1;transform:translate(-50%,-50%);pointer-events:none;opacity:.5}
.final__rings circle{fill:none;stroke:rgba(255,255,255,.06);stroke-width:1}
.final__rings .dot{fill:var(--orange);opacity:.12;stroke:none}
.final > .wrap{position:relative}

/* 23 FORMS ----------------------------------------------------- */
.form{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form .full{grid-column:1 / -1}
.field{position:relative}
.field input,.field textarea,.field select{
  width:100%;font:inherit;font-size:1.0625rem;color:var(--ink);
  background:#fff;border:1px solid #c9cdd9;border-radius:12px;
  padding:26px 16px 10px;min-height:58px;transition:border-color .2s,box-shadow .2s;
  -webkit-appearance:none;appearance:none;
}
.field textarea{min-height:150px;resize:vertical}
.field label{position:absolute;left:17px;top:18px;font-size:1.0625rem;color:var(--ink-3);pointer-events:none;transform-origin:0 0;transition:transform .2s var(--ease),color .2s}
.field input:focus,.field textarea:focus,.field select:focus{outline:0;border-color:var(--navy);box-shadow:0 0 0 3px rgba(33,44,86,.14)}
.field input:focus + label,.field input:not(:placeholder-shown) + label,
.field textarea:focus + label,.field textarea:not(:placeholder-shown) + label{transform:translateY(-10px) scale(.72)}
.radio-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.radio-row legend{width:100%;margin-bottom:8px;color:var(--ink-2)}
.radio-row label{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:40px;border:1px solid #c9cdd9;cursor:pointer}
.radio-row input{accent-color:var(--red)}
.form .btn{justify-self:start}
.form-note{font-size:var(--fs-small);color:var(--ink-3)}
@media (max-width:640px){.form{grid-template-columns:1fr}}
.radio-row{border:0}
.contact-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:start}
.contact-side{display:grid;gap:30px;padding-top:12px}
.contact-item{display:grid;grid-template-columns:28px 1fr;gap:16px}
.contact-item .glyph{width:26px;height:26px;color:var(--navy);margin-top:2px}
.contact-item h3{font-size:1.15rem;letter-spacing:-.01em}
.contact-item p{color:var(--ink-2);margin-top:.25rem}
.contact-item .more{margin-top:.5rem}
@media (max-width:900px){.contact-grid{grid-template-columns:1fr}}
.newsletter{display:flex;flex-wrap:wrap;gap:12px}
.newsletter input[type=email]{flex:1 1 240px;min-height:52px;padding:0 20px;border-radius:980px;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.08);color:#fff;font:inherit;font-size:1.0625rem}
.newsletter input::placeholder{color:#a9aec6}
.newsletter input:focus{outline:0;border-color:var(--orange)}
.newsletter .btn{min-height:52px}
.newsletter .form-status{flex-basis:100%}

/* 24 FOOTER ---------------------------------------------------- */
.gf{background:var(--grey);color:var(--ink-2);font-size:.75rem;line-height:1.4}
.gf__inner{max-width:calc(1024px + 2 * var(--gutter));margin-inline:auto;padding-inline:var(--gutter)}
.gf__notes{padding:18px 0 10px;border-bottom:1px solid var(--line);color:var(--ink-3)}
.gf__notes p{margin-bottom:.8em}
.gf__notes ol{list-style:decimal;padding-left:1.2em}
.gf__notes li{margin-bottom:.6em}
.gf__crumbs{display:flex;align-items:center;flex-wrap:wrap;gap:8px;padding:14px 0;border-bottom:1px solid var(--line)}
.gf__crumbs img{width:16px;height:16px}
.gf__crumbs a{color:var(--ink-2)}
.gf__crumbs a:hover{color:var(--ink);text-decoration:underline}
.gf__crumbs span{color:var(--ink)}
.gf__crumbs .sep{width:6px;height:6px;border-top:1px solid var(--ink-3);border-right:1px solid var(--ink-3);transform:rotate(45deg)}
.gf__dir{display:grid;grid-template-columns:repeat(5,1fr);gap:24px;padding:22px 0 30px}
.gf__col summary{list-style:none;font-weight:600;color:var(--ink);margin-bottom:10px;cursor:default}
.gf__col summary::-webkit-details-marker{display:none}
.gf__col li{margin-bottom:8px}
.gf__col a{color:var(--ink-2)}
.gf__col a:hover{color:var(--ink);text-decoration:underline}
.gf__more{padding-bottom:14px;border-bottom:1px solid var(--line)}
.gf__more a{color:var(--red);text-decoration:underline}
.gf__legal{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;padding:14px 0 26px}
.gf__legal ul{display:flex;flex-wrap:wrap}
.gf__legal li+li{border-left:1px solid var(--line);margin-left:9px;padding-left:9px}
.gf__legal a:hover{color:var(--ink);text-decoration:underline}
.gf__locale{margin-left:auto;color:var(--ink-2)}
@media (max-width:833px){
  .gf__dir{grid-template-columns:1fr;gap:0;padding:12px 0 18px}
  .gf__col{border-bottom:1px solid var(--line)}
  .gf__col summary{cursor:pointer;padding:12px 0;margin:0;display:flex;justify-content:space-between}
  .gf__col summary::after{content:"";width:7px;height:7px;border-right:1.5px solid var(--ink-3);border-bottom:1.5px solid var(--ink-3);transform:rotate(45deg);margin:3px 4px 0 0;transition:transform .3s var(--ease)}
  .gf__col[open] summary::after{transform:rotate(-135deg);margin-top:7px}
  .gf__col ul{padding:0 0 12px 12px}
  .gf__locale{margin-left:0}
}

/* 25 MOTION ------------------------------------------------------ */
.js [data-reveal]{opacity:0;transform:translateY(34px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.js [data-reveal="fade"]{transform:none}
.js [data-reveal].is-in{opacity:1;transform:none}
.js [data-reveal][data-delay="1"]{transition-delay:.1s}
.js [data-reveal][data-delay="2"]{transition-delay:.2s}
.js [data-reveal][data-delay="3"]{transition-delay:.3s}

/* Moving parts inside renders */
.flowline{stroke-dasharray:6 10;animation:dash 1.6s linear infinite}
@keyframes dash{to{stroke-dashoffset:-32}}
.pulse{animation:pulse 2.4s var(--ease) infinite;transform-box:fill-box;transform-origin:center}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}

.qa *,.qa *::before,.qa *::after{transition:none!important;animation:none!important}
.qa .phero__art{transform:none!important}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .js [data-reveal]{opacity:1;transform:none}
  .js .phero__art{transform:none}
  .js .fan:not(.is-in) .device{opacity:1;transform:none}
  .js .scrub .w{color:var(--fg)}
}

/* 26 UTILITIES --------------------------------------------------- */
.hide-sm{display:initial}
@media (max-width:734px){.hide-sm{display:none}}
.divider{height:1px;background:var(--line-c);border:0}
.footnote-ref{font-size:.6em;vertical-align:super;line-height:0;color:var(--fg-3);margin-left:1px}
@media print{.gn,.ln,.gn-mobile,.gn-scrim{display:none}}

/* 27 INTERACTIVE VISUALS ------------------------------------------ */
/* Shared shell for the product showcases driven by js/viz.js.
   Every visual renders its finished state under reduced motion or ?qa. */
.viz{position:relative;border-radius:var(--radius);background:var(--card);overflow:hidden;box-shadow:0 0 0 1px var(--line-c);color:var(--fg)}
.viz__bar{display:flex;align-items:center;flex-wrap:wrap;gap:10px;padding:14px 18px;border-bottom:1px solid var(--line-c)}
.viz__title{display:flex;align-items:center;gap:10px;margin-right:auto;font-family:var(--font-mono);font-size:.8125rem;color:var(--fg-2)}
.viz__title i{width:9px;height:9px;border-radius:50%;background:var(--p)}
.vbtn{display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 14px;border-radius:34px;background:var(--seg);color:var(--fg);font-size:.875rem;font-weight:500;white-space:nowrap;transition:background-color .2s,color .2s,opacity .2s,box-shadow .2s}
.vbtn:hover{background:var(--seg-thumb)}
.vbtn svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.vbtn--primary{background:var(--fg);color:var(--bg)}
.vbtn--primary:hover{background:var(--fg);box-shadow:0 0 0 4px color-mix(in srgb,var(--fg) 18%,transparent)}
.vbtn[aria-pressed="true"]{background:var(--fg);color:var(--bg)}
.vbtn:disabled{opacity:.4;pointer-events:none}
.viz__body{display:grid;grid-template-columns:minmax(0,1fr) 340px}
.viz__stage{position:relative;min-width:0}
.viz__side{display:flex;flex-direction:column;gap:10px;padding:22px;border-left:1px solid var(--line-c);min-width:0}
.viz__side h3{font-size:1.2rem;letter-spacing:-.01em}
.viz__hint{font-size:.8125rem;color:var(--fg-3);line-height:1.45}
.viz__note{margin-top:14px;font-size:.75rem;color:var(--fg-3);text-align:center}
.js-only{display:none}
.js .js-only{display:revert}
@media (max-width:900px){.viz__body{grid-template-columns:1fr}.viz__side{border-left:0;border-top:1px solid var(--line-c)}}
.viz__swipe{display:none}
@media (max-width:734px){
  .viz__scroll{overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none}
  .viz__scroll::-webkit-scrollbar{display:none}
  .viz__scroll > svg{min-width:var(--min,700px)}
  .viz__swipe{display:flex;align-items:center;justify-content:center;gap:8px;margin:0 0 12px;font-size:.75rem;color:var(--fg-3)}
  .viz__swipe::before,.viz__swipe::after{content:"";width:18px;height:1px;background:currentColor;opacity:.5}
  .kviz__stage{min-height:0}
  .er__src,.er__out{overflow-x:auto}
  .er .vtable{min-width:440px}
}

.vtable{width:100%;border-collapse:collapse;font-family:var(--font-mono);font-size:.75rem}
.vtable th{padding:6px 8px 7px 0;border-bottom:1px solid var(--line-c);text-align:left;font-weight:500;color:var(--fg-3);white-space:nowrap}
.vtable td{padding:8px 8px 8px 0;border-bottom:1px solid var(--line-c);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:150px}
.vtable td.num{text-align:right}
.vtable tr.in{animation:vrow .45s var(--ease-out) both}
.vtable tr.hit td{color:var(--orange)}
@keyframes vrow{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.vstat{display:flex;align-items:baseline;gap:8px}
.vstat b{font-family:var(--font-head);font-size:2rem;font-weight:600;letter-spacing:-.03em;line-height:1}
.vstat span{font-size:.8125rem;color:var(--fg-2)}


/* Accent text is theme-aware (see the header note). Eyebrows follow --p. */
.t-eyebrow,.tile__eyebrow{color:var(--p)}
.grad-brand{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.theme-dark .grad-brand,.theme-navy .grad-brand{background:linear-gradient(100deg,#ff5d52 0%,#f7904f 100%);-webkit-background-clip:text;background-clip:text}

/* =============================================================
   28 CONEY COMPONENTS
   ============================================================= */

/* Client marquee: drifts slowly in one direction, pauses on hover. */
.clients{padding:clamp(28px,3.4vw,44px) 0;background:#fff;overflow:hidden}
.clients__label{text-align:center;font-size:.8125rem;font-weight:500;color:var(--ink-3);margin-bottom:clamp(16px,2vw,24px)}
.marquee{position:relative;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.marquee__track{display:flex;width:max-content;animation:marquee 60s linear infinite}
.marquee:hover .marquee__track{animation-play-state:paused}
.marquee ul{display:flex;align-items:center;gap:clamp(40px,5vw,72px);padding-right:clamp(40px,5vw,72px)}
.marquee li{flex:none;display:flex;align-items:center}
.marquee img{height:clamp(26px,3vw,36px);width:auto;filter:grayscale(1);mix-blend-mode:multiply;opacity:.72;transition:filter .3s,opacity .3s}
.marquee img:hover{filter:none;opacity:1}
.marquee .word{font-family:var(--font-head);font-size:clamp(1rem,1.4vw,1.2rem);font-weight:600;letter-spacing:-.01em;color:#a3a8bd;white-space:nowrap}
.marquee .sep{width:6px;height:6px;border-radius:50%;background:var(--grad)}
@keyframes marquee{to{transform:translateX(-50%)}}
.qa .marquee__track{animation:none}
@media (prefers-reduced-motion:reduce){.marquee__track{animation:none}.marquee{-webkit-mask-image:none;mask-image:none}.marquee ul:nth-child(2){display:none}.marquee__track{width:auto;justify-content:center;flex-wrap:wrap}}

/* Homepage hero: brand gradient accent line under the title */
.tile--hero .tile__name .grad-brand{display:inline}
.hero-note{margin-top:1rem;font-size:.9rem;color:var(--fg-3)}

/* Pill under a service hero (like apple.com's small labels) */
.kt-pill{display:inline-flex;align-items:center;gap:8px;margin-top:1.1rem;padding:7px 14px 7px 10px;border-radius:40px;background:color-mix(in srgb,var(--orange) 10%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--orange) 45%,transparent);color:var(--fg);font-size:.875rem;font-weight:500;transition:background-color .2s}
.kt-pill:hover{background:color-mix(in srgb,var(--orange) 18%,transparent)}
.kt-pill .glyph{width:18px;height:18px;color:var(--red);stroke-width:2.2}
.theme-dark .kt-pill .glyph,.theme-navy .kt-pill .glyph{color:var(--orange)}

/* Two organisations: Coney advises, Conify supplies */
.orgs{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.org{position:relative;overflow:hidden;display:flex;flex-direction:column;gap:12px;padding:clamp(30px,4vw,52px);border-radius:var(--radius);background:var(--card)}
.org__brand{display:flex;align-items:center;gap:12px;height:34px}
.org__brand img{height:26px;width:auto}
.org__kicker{font-size:.8rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--fg-3)}
.org h3{font-size:var(--fs-card);line-height:1.15;margin-top:6px}
.org p{color:var(--fg-2)}
.org ul{display:grid;gap:9px;margin:6px 0 4px}
.org li{display:grid;grid-template-columns:22px 1fr;gap:10px;align-items:start;color:var(--fg)}
.org li .glyph{width:20px;height:20px;margin-top:2px;stroke-width:2}
.org .btn-row,.org .more{margin-top:auto;padding-top:14px}
.org--coney{background:var(--navy);color:#fff;--fg:#fff;--fg-2:#b9bfd8;--fg-3:#8d94b5;--link:var(--orange);--btn-bg:var(--red-3);--btn-bg-h:#e3232b;--btn-fg:#fff}
.org--coney::before{content:"";position:absolute;right:-18%;top:-40%;width:70%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(226,52,40,.35),transparent 65%);pointer-events:none}
.org--coney li .glyph{color:var(--orange)}
.org--conify li .glyph{color:#b98a00}
.org--conify .org__kicker i{display:inline-block;width:8px;height:8px;margin-right:6px;border-radius:50%;background:#fcc00a}
@media (max-width:820px){.orgs{grid-template-columns:1fr}}

/* Testimonial on a navy band with a red glow */
.glowband{position:relative;overflow:hidden;isolation:isolate}
.glowband::before,.glowband::after{content:"";position:absolute;z-index:-1;border-radius:50%;pointer-events:none}
.glowband::before{left:-12%;top:-30%;width:62%;aspect-ratio:1;background:radial-gradient(circle,rgba(226,52,40,.34),transparent 64%)}
.glowband::after{right:-14%;bottom:-40%;width:58%;aspect-ratio:1;background:radial-gradient(circle,rgba(243,120,55,.22),transparent 64%)}
.testimonial{max-width:900px;margin-inline:auto;text-align:center}
.testimonial__mark{display:block;width:54px;height:54px;margin:0 auto 22px;color:var(--orange)}
.testimonial blockquote{font-family:var(--font-head);font-size:clamp(1.45rem,3vw,2.3rem);line-height:1.25;font-weight:600;letter-spacing:-.018em;text-wrap:balance}
.testimonial figcaption{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:clamp(26px,3vw,36px);text-align:left}
.testimonial figcaption img{height:34px;width:auto;border-radius:4px}
.testimonial figcaption b{display:block;font-family:var(--font-head);font-size:1.05rem;letter-spacing:-.01em}
.testimonial figcaption span{font-size:.9375rem;color:var(--fg-2)}
.testimonial__lang{margin-top:14px;font-size:.8125rem;color:var(--fg-3)}

/* "Wat mag je verwachten": numbered principles with gradient numerals */
.principles{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2vw,24px);counter-reset:pr}
.principles li{position:relative;padding:clamp(28px,3.2vw,40px);border-radius:var(--radius);background:var(--card)}
.principles li::before{counter-increment:pr;content:counter(pr,decimal-leading-zero);display:block;margin-bottom:22px;font-family:var(--font-head);font-size:clamp(2.2rem,3.6vw,3rem);font-weight:700;line-height:1;letter-spacing:-.04em;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.theme-dark .principles li::before,.theme-navy .principles li::before{background:linear-gradient(100deg,#ff5d52,#f7904f);-webkit-background-clip:text;background-clip:text}
.principles h3{font-size:clamp(1.2rem,1.7vw,1.45rem);line-height:1.2;letter-spacing:-.012em}
.principles p{margin-top:.6rem;color:var(--fg-2)}
.principles li:last-child:nth-child(odd){grid-column:1 / -1}
.principles--3{grid-template-columns:repeat(3,1fr)}
.principles--3 li:last-child:nth-child(odd){grid-column:auto}
@media (max-width:980px){.principles--3{grid-template-columns:1fr}}
@media (max-width:734px){.principles{grid-template-columns:1fr}}

/* Samenwerken panel (every expertise page): three ways to work + Academy */
.together__panel{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:clamp(24px,3vw,40px);align-items:stretch;padding:clamp(32px,5vw,72px);border-radius:var(--radius);position:relative;overflow:hidden}
.together__panel::before{content:"";position:absolute;right:-14%;top:-45%;width:62%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(226,52,40,.26),transparent 64%);pointer-events:none}
.together__main,.together__academy{position:relative}
.together__badge{display:inline-flex;align-items:center;gap:8px;margin-bottom:18px;padding:6px 14px 6px 10px;border-radius:40px;background:var(--grad);color:#fff;font-size:.875rem;font-weight:600}
.together__badge .glyph{width:18px;height:18px;stroke-width:2.2}
.together__models{display:grid;gap:10px;margin:28px 0 30px}
.together__models a{display:grid;grid-template-columns:40px minmax(0,1fr) 18px;gap:14px;align-items:center;padding:14px 16px;border-radius:16px;background:rgba(255,255,255,.07);transition:background-color .25s,transform .25s var(--ease)}
.together__models a:hover{background:rgba(255,255,255,.12);transform:translateX(3px)}
.together__models .ico{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:rgba(255,255,255,.1);color:var(--orange)}
.together__models .ico .glyph{width:21px;height:21px;stroke-width:1.9}
.together__models b{display:block;font-family:var(--font-head);font-size:1.05rem;letter-spacing:-.01em}
.together__models span{font-size:.9rem;color:var(--fg-2);line-height:1.35}
.together__models .chev{width:16px;height:16px;color:var(--fg-3);stroke-width:2.2}
.together__academy{display:flex;flex-direction:column;gap:10px;padding:clamp(24px,3vw,36px);border-radius:calc(var(--radius) - 8px);background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.together__academy > .glyph{width:34px;height:34px;color:var(--s-academy);stroke-width:1.6;margin-bottom:6px}
.together__kicker{font-size:.8rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--s-academy)}
.together__academy h3{font-family:var(--font-head);font-size:clamp(1.35rem,2vw,1.7rem);letter-spacing:-.015em;line-height:1.15}
.together__academy p:not(.together__kicker){color:var(--fg-2);line-height:1.5}
.together__formats{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.together__formats li{padding:5px 12px;border-radius:20px;background:rgba(255,255,255,.08);font-size:.8125rem;color:var(--fg)}
.together__academy .more{margin-top:auto;padding-top:10px}
@media (max-width:900px){.together__panel{grid-template-columns:1fr}}

/* Conify band: "Software nodig?" */
.conify-band__inner{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:clamp(20px,3vw,40px);align-items:center;padding:clamp(24px,3vw,36px) clamp(24px,3.4vw,44px);border-radius:var(--radius);background:var(--card);box-shadow:inset 0 0 0 1px var(--line-c)}
.conify-band__logo{display:grid;place-items:center;width:clamp(92px,10vw,120px);height:64px;border-radius:16px;background:#fff;box-shadow:0 0 0 1px var(--line-c)}
.conify-band__logo img{width:74%;height:auto}
.conify-band h2{font-size:clamp(1.25rem,1.9vw,1.55rem);letter-spacing:-.015em;line-height:1.2}
.conify-band p{margin-top:.4rem;color:var(--fg-2);font-size:1rem}
.conify-band .btn{white-space:nowrap}
@media (max-width:820px){.conify-band__inner{grid-template-columns:1fr;text-align:left}.conify-band__logo{height:56px}}

/* Facts list (vacancies, cases) */
.facts{display:grid;grid-template-columns:auto 1fr;gap:10px 22px;font-size:1rem}
.facts dt{color:var(--fg-3)}
.facts dd{color:var(--fg)}

/* Audience chips on the homepage hero */
.audiences{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:1.2rem}
.audiences li{padding:6px 13px;border-radius:40px;background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);font-size:.875rem;color:var(--fg)}

/* Service tiles: the render sits on a soft glow in the service colour */
.tile[class*=" s-"] .tile__art{position:relative}
.tile[class*=" s-"] .tile__art::before{content:"";position:absolute;left:10%;right:10%;top:10%;bottom:-20%;z-index:-1;border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--c) 30%,transparent),transparent);filter:blur(10px)}
.tile{isolation:isolate}

/* Gradient rule, used sparingly under section heads */
.grad-rule{width:64px;height:4px;border-radius:4px;background:var(--grad);margin-bottom:22px}

/* Case cards: client logo slot + outcome line */
.case-meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}

/* =============================================================
   29 VISUAL MODULES (driven by js/viz.js)
   ============================================================= */
.viz__kpis{display:flex;flex-wrap:wrap;gap:12px 30px;padding:16px 22px;border-bottom:1px solid var(--line-c)}
.viz__kpis div{display:grid;gap:2px;min-width:74px}
.viz__kpis b{font-family:var(--font-head);font-size:1.4rem;font-weight:600;letter-spacing:-.02em;line-height:1.05}
.viz__kpis span{font-size:.72rem;color:var(--fg-3)}
.viz__kpis b.bad{color:var(--red)}
.viz__kpis b.good{color:#1f8a4c}
.viz__modes{display:flex;flex-wrap:wrap;gap:6px}
.vlist{display:grid;gap:6px}
.vlist button{width:100%;display:grid;grid-template-columns:10px minmax(0,1fr) auto;gap:10px;align-items:center;padding:10px 12px;border-radius:12px;background:var(--card-2);text-align:left;font-size:.86rem;line-height:1.3;transition:box-shadow .2s,opacity .3s,background-color .2s}
.vlist button:hover{box-shadow:inset 0 0 0 1px var(--line-c)}
.vlist button[aria-pressed="true"]{box-shadow:inset 0 0 0 2px var(--c,var(--red))}
.vlist button:disabled{opacity:.45;cursor:default}
.vlist i{width:10px;height:10px;border-radius:50%;background:var(--c,var(--red))}
.vlist b{font:500 .8rem var(--font-mono);color:var(--fg-2)}
.vdetail{margin-top:6px;padding:14px 16px;border-radius:14px;background:var(--card-2);font-size:.86rem;line-height:1.5;animation:vrow .4s var(--ease-out) both}
.vdetail h4{font-family:var(--font-head);font-size:.98rem;letter-spacing:-.01em;margin-bottom:4px}
.vdetail p{color:var(--fg-2)}
.vdetail dl{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;margin-top:10px;font-size:.8rem}
.vdetail dt{color:var(--fg-3)}

/* Population: steekproef vs volledige populatie ------------------- */
.pop__stage{padding:18px 20px 16px}
.pop__meta{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 16px;font:500 .78rem var(--font-mono);color:var(--fg-3);margin-bottom:12px}
.pop__meta b{color:var(--fg)}
.pop__svg{display:block;width:100%;height:auto}
.pop-dot{fill:color-mix(in srgb,var(--fg) 13%,transparent);transition:fill .35s,opacity .35s}
.pop-dot.is-ok{fill:#57b77e}
.pop-dot.is-hit{fill:var(--red)}
.pop-dot.is-dim{opacity:.18}
.pop-ring{fill:none;stroke:var(--fg);stroke-width:1.6;opacity:0;transition:opacity .3s}
.pop-ring.is-on{opacity:.9}
.pop-sweep{fill:color-mix(in srgb,var(--s-analytics) 22%,transparent);opacity:0}
.pop-sweep.is-on{opacity:1}
.pop__legend{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:12px;font-size:.75rem;color:var(--fg-3)}
.pop__legend span{display:inline-flex;align-items:center;gap:6px}
.pop__legend i{width:9px;height:9px;border-radius:50%;background:color-mix(in srgb,var(--fg) 13%,transparent)}
.pop__legend i.ok{background:#57b77e}
.pop__legend i.hit{background:var(--red)}
.pop__money{font-size:.84rem;color:var(--fg-2)}
.pop__money b{color:var(--fg)}

/* Conformance: designed vs actual process ------------------------ */
.cf__svg{display:block;width:100%;height:auto;padding:10px 12px 14px}
.cf-node rect{fill:var(--navy);transition:fill .3s,opacity .3s}
.cf-node text{font:600 12.5px var(--font-body);fill:#fff;text-anchor:middle}
.cf-node.extra rect{fill:var(--card-2);stroke:var(--s-process);stroke-width:1.5}
.cf-node.extra text{fill:color-mix(in srgb,var(--s-process) 75%,var(--fg))}
.cf-edge{fill:none;stroke:color-mix(in srgb,var(--navy) 35%,transparent);stroke-width:8;stroke-linecap:round;transition:stroke .3s,opacity .4s}
.theme-dark .cf-edge,.theme-navy .cf-edge{stroke:rgba(255,255,255,.25)}
.cf-dev{fill:none;stroke:color-mix(in srgb,var(--red) 70%,transparent);stroke-width:3.5;stroke-dasharray:6 6;stroke-linecap:round;transition:opacity .5s,stroke-width .2s}
.cf-dev.is-sel{stroke:var(--red);stroke-width:5;stroke-dasharray:none}
.cf-grp{transition:opacity .5s var(--ease)}
.cf-grp.is-off{opacity:0;pointer-events:none}
.cf-grp.is-dim{opacity:.16}
.cf-tok{fill:var(--navy)}
.theme-dark .cf-tok,.theme-navy .cf-tok{fill:#fff}
.cf-tok.dev{fill:var(--red)}
.cf-badge rect{fill:var(--red)}
.cf-badge text{font:600 11px var(--font-body);fill:#fff;text-anchor:middle}
.cf-lab{font:500 11px var(--font-mono);fill:var(--fg-3);text-anchor:middle}
.cf-sod{fill:none;stroke:var(--red);stroke-width:1.6;stroke-dasharray:3 4}

/* Monitor: periodic vs continuous --------------------------------- */
.mon__svg{display:block;width:100%;height:auto;padding:14px 14px 10px}
.mon-lane{fill:color-mix(in srgb,var(--fg) 5%,transparent)}
.mon-lab{font:500 12px var(--font-body);fill:var(--fg-2)}
.mon-axis{font:400 10.5px var(--font-mono);fill:var(--fg-3)}
.mon-grid{stroke:var(--line-c);stroke-width:1}
.mon-inc{fill:var(--red);transition:opacity .3s,transform .4s var(--ease-out);transform-box:fill-box;transform-origin:center}
.mon-inc.is-hidden{opacity:0;transform:scale(.3)}
.mon-exp{fill:color-mix(in srgb,var(--red) 30%,transparent);transition:width .15s linear}
.mon-det{fill:#1f8a4c;transition:opacity .3s}
.mon-det.is-hidden{opacity:0}
.mon-miss{font:600 10.5px var(--font-body);fill:var(--red)}
.mon-review{stroke:var(--fg);stroke-width:1.5;stroke-dasharray:4 4}
.mon-reviewlab{font:600 10.5px var(--font-body);fill:var(--fg)}
.mon-head{stroke:var(--s-grc);stroke-width:2}
.mon-headdot{fill:var(--s-grc)}
.mon__feed{display:grid;gap:8px;align-content:start;min-height:140px}
.mon__feed div{display:grid;grid-template-columns:auto 1fr;gap:10px;padding:10px 12px;border-radius:12px;background:var(--card-2);font-size:.82rem;line-height:1.4;animation:vrow .45s var(--ease-out) both}
.mon__feed div::before{content:"";width:8px;height:8px;margin-top:5px;border-radius:50%;background:#1f8a4c}
.mon__feed div.late::before{background:var(--red)}
.mon__feed small{display:block;font-family:var(--font-mono);color:var(--fg-3);font-size:.7rem}
.mon__empty{font-size:.84rem;color:var(--fg-3)}

/* Partner: losse projecten vs vaste adviespartner ------------------ */
.pt__svg{display:block;width:100%;height:auto;padding:16px 16px 8px}
.pt-grid{stroke:var(--line-c);stroke-width:1}
.pt-axis{font:400 10.5px var(--font-mono);fill:var(--fg-3)}
.pt-area{fill:url(#pt-grad);transition:opacity .4s}
.pt-line{fill:none;stroke:var(--red);stroke-width:3;stroke-linejoin:round;stroke-linecap:round}
.pt-proj{fill:color-mix(in srgb,var(--navy) 10%,transparent);transition:opacity .5s}
.theme-dark .pt-proj,.theme-navy .pt-proj{fill:rgba(255,255,255,.07)}
.pt-ramp{fill:color-mix(in srgb,var(--fg) 16%,transparent);transition:opacity .5s}
.pt-projlab{font:600 10.5px var(--font-body);fill:var(--fg-2);transition:opacity .5s}
.pt-sig{cursor:pointer;outline:none}
.pt-sig circle{fill:var(--orange);stroke:var(--card);stroke-width:3;transition:transform .2s var(--ease),opacity .4s;transform-box:fill-box;transform-origin:center}
.pt-sig:hover circle,.pt-sig:focus-visible circle,.pt-sig.is-sel circle{transform:scale(1.35)}
.pt-sig.is-off{opacity:0;pointer-events:none}
.is-off{transition:opacity .5s}

/* Flex: inzet per maand ------------------------------------------ */
.fx__chips{display:flex;flex-wrap:wrap;gap:8px;padding:16px 22px;border-bottom:1px solid var(--line-c)}
.fx__chips button{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 14px 0 10px;border-radius:34px;background:var(--seg);font-size:.86rem;font-weight:500;transition:background-color .2s,box-shadow .2s}
.fx__chips button i{width:10px;height:10px;border-radius:3px;background:var(--c)}
.fx__chips button[aria-pressed="true"]{background:var(--card-2);box-shadow:inset 0 0 0 2px var(--c)}
.fx__chips button:first-child{cursor:default}
.fx__svg{display:block;width:100%;height:auto;padding:14px 16px 8px}
.fx-bar{transition:height .6s var(--ease-out),y .6s var(--ease-out)}
.fx-axis{font:400 10.5px var(--font-mono);fill:var(--fg-3)}
.fx-grid{stroke:var(--line-c);stroke-width:1}
.fx-val{font:600 10.5px var(--font-mono);fill:var(--fg-2);text-anchor:middle;transition:y .6s var(--ease-out)}
.fx-line{fill:none;stroke:var(--navy);stroke-width:2.4;stroke-linejoin:round;transition:d .6s var(--ease-out)}
.theme-dark .fx-line,.theme-navy .fx-line{stroke:#fff}
.fx-pt{fill:var(--navy);transition:cy .6s var(--ease-out)}
.theme-dark .fx-pt,.theme-navy .fx-pt{fill:#fff}
.fx__legend{display:flex;flex-wrap:wrap;gap:8px 18px;padding:0 22px 16px;font-size:.75rem;color:var(--fg-3)}
.fx__legend span{display:inline-flex;align-items:center;gap:6px}
.fx__legend i{width:14px;height:3px;border-radius:2px;background:var(--navy)}
.fx__legend i.bar{height:10px;width:10px;border-radius:3px;background:var(--c)}

/* Transfer: kennisoverdracht over tijd --------------------------- */
.tr__controls{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px 26px;align-items:center;padding:18px 22px;border-bottom:1px solid var(--line-c)}
.tr__range{display:grid;gap:8px}
.tr__range label{display:flex;justify-content:space-between;font-size:.8125rem;color:var(--fg-2)}
.tr__range label b{color:var(--fg);font-weight:600}
.tr__range input{width:100%;accent-color:var(--red)}
.tr__svg{display:block;width:100%;height:auto;padding:14px 16px 10px}
.tr-zone{fill:color-mix(in srgb,var(--fg) 4%,transparent);stroke:var(--line-c);stroke-width:1.2}
.tr-zone.secure{stroke:color-mix(in srgb,var(--s-grc) 55%,transparent);stroke-dasharray:5 5}
.tr-zonelab{font:600 12px var(--font-body);fill:var(--fg-2)}
.tr-zonesub{font:400 10.5px var(--font-mono);fill:var(--fg-3)}
.tr-person{transition:transform .8s var(--ease-out),opacity .5s}
.tr-person circle,.tr-person path{transition:fill .5s}
.tr-work{transition:transform .8s var(--ease-out),opacity .5s}
.tr-flow{fill:none;stroke:var(--fg-3);stroke-width:1.6;stroke-dasharray:4 6;transition:opacity .5s}
.tr-flow.is-live{animation:dash 1.4s linear infinite}
.tr-area-c{fill:color-mix(in srgb,var(--red) 22%,transparent)}
.tr-line-c{fill:none;stroke:var(--red);stroke-width:2.6}
.tr-line-t{fill:none;stroke:var(--navy);stroke-width:2.6}
.theme-dark .tr-line-t,.theme-navy .tr-line-t{stroke:#fff}
.tr-head{stroke:var(--fg);stroke-width:1.5;stroke-dasharray:3 4}
.tr-phase{font:600 10.5px var(--font-body);fill:var(--fg-3)}
.tr-phase.is-on{fill:var(--fg)}
.tr-axis{font:400 10.5px var(--font-mono);fill:var(--fg-3)}

@media (max-width:720px){.tr__controls{grid-template-columns:1fr}}

/* =============================================================
   30 SCAN (datavolwassenheid) + homepage teaser
   ============================================================= */
.scan-page{min-height:calc(100vh - var(--gn-h));padding-block:clamp(56px,8vw,112px)}
.scan{max-width:880px;margin-inline:auto}
.scan__start{text-align:center}
.scan__start .t-intro{max-width:32em;margin-inline:auto}
.scan__meta{margin-top:14px;font-size:.875rem;color:var(--fg-3)}
.scan__dims{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 22px;margin-top:clamp(40px,5vw,64px);font-size:.875rem;color:var(--fg-2)}
.scan__dims li{display:flex;align-items:center;gap:8px}
.scan__dims .glyph{width:22px;height:22px;color:var(--c)}
.scan .is-entering{animation:matchIn .5s var(--ease-out) both}
@keyframes matchIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.scan__top{display:flex;align-items:center;justify-content:space-between;min-height:32px}
.scan__back{display:inline-flex;align-items:center;gap:4px;font-size:.9375rem;color:var(--link)}
.scan__back .glyph{width:16px;height:16px}
.scan__back[hidden]{display:none}
.scan__count{margin-left:auto;font-size:.875rem;color:var(--fg-3)}
.scan__progress{height:4px;margin-top:10px;border-radius:4px;background:var(--line-c);overflow:hidden}
.scan__progress span{display:block;height:100%;border-radius:inherit;background:var(--grad);transition:width .5s var(--ease-out)}
.scan__dim{margin-top:clamp(28px,4vw,44px);text-align:center;font-family:var(--font-head);font-size:.95rem;font-weight:600;color:var(--p)}
.scan__q{margin-top:8px;font-family:var(--font-head);font-size:clamp(1.8rem,3.6vw,2.7rem);font-weight:600;letter-spacing:-.022em;line-height:1.12;text-align:center;text-wrap:balance;outline:none}
.scan__hint{margin-top:10px;text-align:center;color:var(--fg-3)}
.scan__options{display:grid;gap:10px;margin-top:clamp(28px,4vw,44px)}
.scan__options--grid{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.scan__opt{position:relative;display:flex;align-items:center;gap:14px;min-height:62px;padding:15px 48px 15px 18px;border-radius:18px;background:#fff;box-shadow:inset 0 0 0 1.5px var(--line-c);color:var(--fg);font-size:1.0625rem;line-height:1.35;text-align:left;transition:box-shadow .2s,background-color .2s,transform .2s var(--ease)}
.scan__opt:hover{box-shadow:inset 0 0 0 1.5px var(--navy);transform:translateY(-1px)}
.scan__opt .lvl{flex:none;display:grid;grid-template-columns:repeat(4,6px);gap:3px;align-items:end;height:22px}
.scan__opt .lvl i{display:block;border-radius:2px;background:var(--line)}
.scan__opt .lvl i:nth-child(1){height:6px}.scan__opt .lvl i:nth-child(2){height:11px}.scan__opt .lvl i:nth-child(3){height:16px}.scan__opt .lvl i:nth-child(4){height:22px}
.scan__opt .lvl i.on{background:var(--grad-v)}
.scan__opt .glyph{width:26px;height:26px;color:var(--navy);flex:none}
.scan__opt::after{content:"";position:absolute;right:16px;top:50%;width:20px;height:20px;margin-top:-10px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--line-c);transition:background-color .2s,box-shadow .2s}
.scan__opt[aria-pressed="true"]{background:color-mix(in srgb,var(--orange) 8%,#fff);box-shadow:inset 0 0 0 2px var(--red)}
.scan__opt[aria-pressed="true"]::after{background:var(--red) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/12px no-repeat;box-shadow:none}
.scan__opt:disabled{opacity:.4;cursor:default;transform:none;box-shadow:inset 0 0 0 1.5px var(--line-c)}
.scan__next{display:flex;justify-content:center;margin-top:28px}
.scan__next .btn:disabled{opacity:.35;pointer-events:none}

.scan__result .t-eyebrow{color:var(--fg-3)}
.scan__head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,300px);gap:clamp(24px,4vw,56px);align-items:center}
.scan__level{font-family:var(--font-head);font-size:clamp(2.4rem,5vw,3.6rem);font-weight:600;letter-spacing:-.028em;line-height:1.02;outline:none}
.scan__level small{display:block;font-size:.95rem;font-weight:600;letter-spacing:0;color:var(--p);margin-bottom:6px}
.scan__line{margin-top:10px;font-size:clamp(1.05rem,1.6vw,1.25rem);color:var(--fg-2);line-height:1.45}
.scan__ladder{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:22px}
.scan__ladder li{display:grid;gap:6px;font-size:.75rem;color:var(--fg-3)}
.scan__ladder li::before{content:"";height:8px;border-radius:8px;background:var(--line-c)}
.scan__ladder li.on::before{background:var(--grad)}
.scan__ladder li.is-you{color:var(--fg);font-weight:600}
.radar{width:100%;height:auto;display:block}
.radar .ring{fill:none;stroke:var(--line-c)}
.radar .spoke{stroke:var(--line-c)}
.radar .shape{fill:color-mix(in srgb,var(--red) 18%,transparent);stroke:var(--red);stroke-width:2.2;stroke-linejoin:round;transform-origin:150px 150px;animation:radarIn .9s var(--ease-out) both}
.radar .pt{fill:var(--red)}
.radar text{font:500 11.5px var(--font-body);fill:var(--fg-2)}
@keyframes radarIn{from{transform:scale(.2);opacity:0}}
.scan__sub{margin-top:clamp(32px,4vw,44px);font-family:var(--font-head);font-size:1.15rem;font-weight:600;letter-spacing:-.01em}
.scan__bars{display:grid;gap:10px;margin-top:14px}
.scan__bars li{display:grid;grid-template-columns:130px 1fr 92px;gap:14px;align-items:center;font-size:.9375rem;color:var(--fg-2)}
.scan__bars i{display:block;height:10px;border-radius:10px;background:var(--line-c);overflow:hidden}
.scan__bars b{display:block;height:100%;border-radius:inherit;background:var(--grad);animation:matchBar .9s var(--ease-out) both}
.scan__bars em{font-style:normal;font-size:.8125rem;color:var(--fg-3)}
.scan__bars li.is-low{color:var(--fg);font-weight:600}
@keyframes matchBar{from{transform:scaleX(0);transform-origin:left}to{transform:none;transform-origin:left}}
.scan__advice{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:18px}
.scan__card{display:flex;flex-direction:column;gap:8px;padding:22px;border-radius:20px;background:var(--grey)}
.scan__card .glyph{width:28px;height:28px;color:var(--c,var(--red));stroke-width:1.7}
.scan__card small{font-size:.75rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--fg-3)}
.scan__card b{font-family:var(--font-head);font-size:1.2rem;letter-spacing:-.012em}
.scan__card p{color:var(--fg-2);font-size:.97rem;line-height:1.5}
.scan__card .more{margin-top:auto;padding-top:6px;font-size:.97rem}
.scan__steps{display:grid;gap:10px;margin-top:14px}
.scan__steps li{display:grid;grid-template-columns:26px 1fr;gap:12px;align-items:start;font-size:1.0625rem;color:var(--fg)}
.scan__steps li span:first-child{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--grad);color:#fff;font:600 .78rem var(--font-mono)}
.scan__again{display:inline-flex;align-items:center;gap:8px;font-size:.9375rem;color:var(--link)}
.scan__again .glyph{width:16px;height:16px}
.scan__note{margin-top:18px;font-size:.875rem;color:var(--fg-3)}
.qa .scan .is-entering,.qa .scan__bars b,.qa .radar .shape{animation:none}
@media (prefers-reduced-motion:reduce){.scan .is-entering,.scan__bars b,.radar .shape{animation:none}}
@media (max-width:760px){.scan__head{grid-template-columns:1fr}.scan__head .radar{max-width:300px;margin-inline:auto}.scan__advice{grid-template-columns:1fr}.scan__bars li{grid-template-columns:100px 1fr;}.scan__bars em{grid-column:2}}

/* Homepage teaser: a scan question as it appears in the test */
.tile--scan{min-height:0;padding-bottom:clamp(40px,4.5vw,56px)}
.scan-teaser{width:min(100%,600px);margin-top:clamp(32px,4vw,48px);padding:24px 24px 26px;border-radius:24px;background:#fff;box-shadow:0 30px 60px -30px rgba(20,26,51,.28),0 0 0 1px var(--line-c);text-align:left;color:var(--ink)}
.scan-teaser__top{display:flex;justify-content:space-between;font-size:.8125rem;color:var(--ink-3)}
.scan-teaser__bar{height:4px;margin-top:8px;border-radius:4px;background:var(--line);overflow:hidden}
.scan-teaser__bar span{display:block;width:43%;height:100%;background:var(--grad)}
.scan-teaser__dim{margin-top:18px;font-family:var(--font-head);font-size:.8rem;font-weight:600;color:var(--red)}
.scan-teaser__q{margin-top:4px;font-family:var(--font-head);font-size:1.3rem;font-weight:600;letter-spacing:-.015em}
.scan-teaser__opts{display:grid;gap:8px;margin-top:14px}
.scan-teaser__opts > span{display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:14px;box-shadow:inset 0 0 0 1.5px var(--line);font-size:.9rem}
.scan-teaser__opts .lvl{display:grid;grid-template-columns:repeat(4,5px);gap:2px;align-items:end;height:16px;flex:none}
.scan-teaser__opts .lvl i{display:block;border-radius:2px;background:var(--line)}
.scan-teaser__opts .lvl i:nth-child(1){height:4px}.scan-teaser__opts .lvl i:nth-child(2){height:8px}.scan-teaser__opts .lvl i:nth-child(3){height:12px}.scan-teaser__opts .lvl i:nth-child(4){height:16px}
.scan-teaser__opts .lvl i.on{background:var(--grad-v)}
.scan-teaser__opts > .is-on{background:color-mix(in srgb,var(--orange) 8%,#fff);box-shadow:inset 0 0 0 2px var(--red)}

/* =============================================================
   31 TEXT PAGES (privacy)
   ============================================================= */
.text-hero{padding-bottom:clamp(20px,3vw,36px)}
.text-body{padding-top:0}
.prose{font-size:1.0625rem;line-height:1.7;color:var(--fg-2);overflow-wrap:anywhere}
.prose > :first-child{margin-top:0}
.prose p,.prose ul,.prose ol,.prose table,.prose blockquote{margin-top:1em}
.prose h2,.prose h3,.prose h4{font-family:var(--font-head);font-weight:600;color:var(--fg);letter-spacing:-.012em;line-height:1.3;margin-top:2.1em}
.prose h2{font-size:clamp(1.4rem,2.2vw,1.7rem)}
.prose h3{font-size:clamp(1.2rem,1.8vw,1.4rem)}
.prose h2 + *,.prose h3 + *{margin-top:.5em}
.prose a{color:var(--link);text-decoration:underline;text-underline-offset:3px}
.prose strong,.prose b{color:var(--fg);font-weight:600}
.prose ul,.prose ol{padding-left:1.3em}
.prose ul{list-style:disc}
.prose ol{list-style:decimal}
.prose li + li{margin-top:.35em}
.prose li::marker{color:var(--fg-3)}
.prose table{width:100%;border-collapse:collapse;font-size:.95rem}
.prose th,.prose td{padding:10px 8px;border-bottom:1px solid var(--line-c);text-align:left;vertical-align:top}
.prose .todo{padding:2px 6px;border-radius:6px;background:color-mix(in srgb,var(--orange) 16%,transparent);color:var(--fg)}

/* Featured tile with a card instead of a render (the scan) */
.feat__art--card{width:auto;transform:none;align-self:center;display:flex;justify-content:center;padding:0 clamp(24px,5vw,80px) clamp(44px,5vw,80px) 0}
.feat__art--card .scan-teaser{margin-top:0;transform:rotate(-1.2deg);box-shadow:0 40px 80px -30px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.08)}
@media (max-width:900px){.feat__art--card{width:100%;margin:28px 0 0;padding:0 0 40px}.feat__art--card .scan-teaser{transform:none}}

/* Lineup item with an icon instead of a render (ways of working) */
.lineup__art--icon{aspect-ratio:10/6;align-items:center;border-radius:var(--radius);background:var(--card);position:relative;overflow:hidden;transition:transform .5s var(--ease)}
.lineup__art--icon::before{content:"";position:absolute;inset:auto -20% -60% -20%;height:120%;background:radial-gradient(closest-side,color-mix(in srgb,var(--orange) 22%,transparent),transparent);pointer-events:none}
.lineup__art--icon .glyph{position:relative;width:clamp(64px,7vw,88px);height:clamp(64px,7vw,88px);color:var(--p);stroke-width:1.15}
.lineup__art--icon:hover{transform:translateY(-3px)}

/* Local nav between the dropdown (≤833px) and the rail (≥1100px): tighter spacing */
@media (min-width:834px) and (max-width:1099px){.ln__menu{gap:16px}.ln__inner{gap:16px}.ln__title a{font-size:1.15rem}}

/* Select field with a floating label that always sits up */
.field--select select{padding:26px 44px 10px 16px;cursor:pointer;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23565c7a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 16px center/16px no-repeat}
.field--select label{transform:translateY(-10px) scale(.72)}

/* Small refinements */
.chapternav .new{color:var(--red)}
.team__avatar{border:2px solid transparent;background:linear-gradient(var(--grey),var(--grey)) padding-box,var(--grad) border-box;box-shadow:none}
.theme-dark .team__avatar,.theme-navy .team__avatar{background:linear-gradient(var(--night-2),var(--night-2)) padding-box,var(--grad) border-box;color:#fff}

/* Defaults outside a theme (mobile menu, plain cards): Coney red buttons and links */
body{--btn-bg:var(--red);--btn-bg-h:var(--red-2);--btn-fg:#fff;--link:var(--red);--ghost:var(--navy)}
.t-hero,.phero__title,.t-headline,.tile__name{overflow-wrap:break-word;hyphens:auto}