/* =============================================================
   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: conformance, monitor
   30 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 0;max-width:2000px;margin-inline:auto}
/* No strip between the nav and the homepage hero. */
main > .tiles:first-child{padding-top:0}
.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(480px,44vw,620px);
}
.tile__name{font-size:clamp(2.2rem,4vw,3rem);line-height:1.07;letter-spacing:-.022em}
.tile__name .tile__logo{height:.9em;width:auto;margin:0 auto}
/* 1.18 was display leading on a paragraph: fine for a one-liner, cramped as
   soon as a subtitle runs to two or three lines. */
.tile__sub{font-size:clamp(1.15rem,1.9vw,1.5rem);line-height:1.3;margin-top:.45rem;color:var(--fg);font-weight:400;max-width:26em;text-wrap:balance}
.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}
/* The render sits inside the tile with room under it, instead of being
   pushed off the bottom edge. */
.tile__art{margin-top:auto;width:min(78%,760px);padding:clamp(24px,3vw,40px) 0 clamp(30px,3.6vw,48px)}
/* The hero carries copy only, so it is shorter than a tile with a render in
   it and the copy sits in the middle. Same proportions as conify.nl. */
.tile--hero{justify-content:center;min-height:clamp(460px,44vw,600px);padding-bottom:clamp(44px,5vw,64px)}
/* 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)}
.tile-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.tile-grid .tile{min-height:clamp(460px,38vw,540px)}
.tile-grid .tile__name{font-size:clamp(1.85rem,2.9vw,2.25rem)}
.tile-grid .tile__sub{font-size:clamp(1.05rem,1.4vw,1.2rem)}
.tile-grid .tile__art{width:min(86%,500px)}
.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}
  .tiles{padding:0;gap:10px}
  .tile-grid{grid-template-columns:1fr;gap:10px}
  .tile__art{width:112%;padding-bottom:clamp(26px,6vw,40px)}
  .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:center;
  min-height:clamp(460px,38vw,560px);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}
/* The label reads as a kicker, not as a chip: the site's own label idiom
   preceded by a short accent rule. Quiet enough to sit above the title
   without competing with it, and it stretches to a campaign line
   ("Webinar . 8 oktober") without turning into a box. */
.feat__badge{
  display:flex;align-items:center;justify-content:center;gap:clamp(10px,1vw,14px);
  font-family:var(--font-head);font-size:var(--fs-micro);font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--fg-2);
  margin-bottom:clamp(18px,2vw,26px);
}
.feat__badge i{width:clamp(20px,2.4vw,34px);height:2px;flex:none;border-radius:2px;background:var(--p)}
.tile--featured .tile__eyebrow{margin-bottom:.15rem}
/* Smaller than a product name would need: what Coney puts in the spotlight is
   a sentence ("Hoe datagedreven is jouw team?"), and at the product size it
   hyphenated inside the narrow copy column. */
.tile--featured .tile__name{font-size:clamp(2.1rem,3.8vw,3.4rem);margin-top:0}
.tile--featured .tile__sub{margin-top:.7rem;margin-inline:auto;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;justify-content: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:center;margin-top:1.8rem}
.feat__art{position:relative;align-self:end;width:112%;margin-bottom:clamp(34px,4.2vw,56px)}
.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}
  .feat__copy{padding-bottom:0}
  .feat__art{width:108%;margin-left:4%;margin-bottom:clamp(26px,5vw,40px)}
  .tile--featured::before{right:-30%;top:auto;bottom:-10%;width:120%;transform:none}
}

/* 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 - 860px) / 2)) 8px;
  scroll-padding-inline:max(var(--gutter),calc((100vw - 860px) / 2));
}
.gallery__track::-webkit-scrollbar{display:none}
.gallery__item{
  flex:0 0 min(860px,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(400px,42vw,500px);
  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)}

/* Hero marquee: two rows of case names drifting past, so the page says what
   it holds before you scroll. Each track carries its items twice and travels
   exactly half its width, which is why the chips use margin-right instead of
   gap - a flex gap would leave the loop half a gap off. */
.ucmq{
  --mq-dur:70s;margin-top:clamp(34px,4.5vw,60px);display:grid;gap:14px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
}
.ucmq__row{display:flex;overflow:hidden}
.ucmq__track{display:flex;flex:none;animation:ucmq var(--mq-dur) linear infinite}
.ucmq__row--b .ucmq__track{--mq-dur:86s;animation-direction:reverse}
.ucmq span{
  flex:none;margin-right:14px;padding:11px 20px;border-radius:40px;white-space:nowrap;
  background:var(--card);box-shadow:inset 0 0 0 1px var(--line-c);
  font-family:var(--font-head);font-size:clamp(.875rem,1.1vw,1rem);font-weight:500;color:var(--fg-2);
}
@keyframes ucmq{to{transform:translateX(-50%)}}
@media (max-width:734px){
  .ucmq{--mq-dur:52s;gap:10px}
  .ucmq__row--b .ucmq__track{--mq-dur:62s}
  .ucmq span{margin-right:10px;padding:9px 15px;font-size:.8125rem}
}
.qa .ucmq__track{animation:none}
@media (prefers-reduced-motion:reduce){.ucmq__track{animation:none}}

.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 ------------------------- */
/* Centred while it fits, scrollable from the first tab when it does not:
   justify-content:center would park the overflow out of reach on the left. */
.seg-wrap{display:flex;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;margin-inline:auto;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}
/* The tick is positioned, not a grid cell: a grid item would turn every inline
   <a>, <strong> or <sup> in the text into a cell of its own and break the row. */
.checks li{position:relative;padding-left:42px;font-size:1.1875rem;line-height:1.4;color:var(--fg)}
.checks .glyph{position:absolute;left:0;top:1px;width:26px;height:26px;color:var(--link);stroke-width:2}
/* The site has no default inline-link style, so a link inside a check would
   read as plain text. An accent underline marks it without shouting. */
.checks a{color:inherit;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px;text-decoration-color:color-mix(in srgb,var(--link) 55%,transparent);transition:text-decoration-color .2s var(--ease)}
.checks a:hover{text-decoration-color:var(--link)}
.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)}
/* Bulleted list in the page's own accent. Used inside cards and in body copy. */
ul.dots{margin-top:1rem;display:grid;gap:.45rem;color:var(--fg-2)}
ul.dots li{position:relative;padding-left:1.1em}
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(16px,1.8vw,24px);row-gap:clamp(16px,1.8vw,24px)}
/* Each item is a card, so the row reads as a set of options rather than as
   three columns of loose text. */
.lineup__item{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  background:var(--card);border-radius:var(--radius);
  padding:clamp(22px,2.4vw,34px) clamp(18px,2vw,30px) clamp(26px,2.8vw,38px);
}
.lineup__art{width:100%;aspect-ratio:10/7;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:grid;grid-template-columns:20px minmax(0,1fr);align-items:start;gap:12px;font-size:.9375rem;color:var(--fg-2);line-height:1.35;text-align:left}
.lineup__specs .glyph{width:20px;height:20px;margin-top:1px;color:var(--c,var(--navy));stroke-width:1.8}
.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:5em}
  .lineup__specs li{min-height:3.8em}
}
@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 .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}}

/* A booked slot is worth more than a form submission, so the contact page leads
   with the agenda. The band carries the brand red at full strength; white on
   #b8131a is 6.7:1, and the button turns white so it still reads on top of it. */
.planband{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;
  gap:clamp(16px,2.4vw,32px);
  background:var(--red);color:#fff;
  border-radius:var(--radius);padding:clamp(24px,3vw,36px) clamp(24px,3.4vw,44px);
  --btn-bg:#fff;--btn-fg:var(--red);--btn-bg-h:#ffe9e7;
}
.planband > .glyph{width:clamp(30px,3vw,40px);height:clamp(30px,3vw,40px);stroke-width:1.6}
.planband h2{font-size:var(--fs-card);line-height:1.15;letter-spacing:-.015em}
.planband p{margin-top:.35rem;color:rgba(255,255,255,.82);font-size:1.0625rem;line-height:1.45}
@media (max-width:734px){
  .planband{grid-template-columns:1fr;row-gap:16px}
  .planband .btn{justify-self:start;margin-top:4px}
}

/* Microsoft Bookings, embedded on the appointment page. The booking flow
   scrolls inside the frame and never reports its height, so the frame gets a
   fixed one instead of growing with its content. Framing is refused over
   http, so the local preview always shows the standby layer: that is the
   fallback working, not a bug. */
.booking{position:relative;border-radius:var(--radius);overflow:hidden;background:#fff;box-shadow:0 20px 60px -24px rgba(11,15,34,.45);color:var(--ink);--fg-2:var(--ink-2);--btn-bg:var(--red);--btn-fg:#fff;--btn-bg-h:var(--red-2)}
.booking__standby{position:absolute;inset:0;display:grid;align-content:center;justify-items:center;gap:18px;padding:var(--gutter);text-align:center;color:var(--ink-2)}
/* No background on the frame itself: the Bookings page brings its own white and
   covers the standby layer, while a blocked frame leaves it showing. */
.booking iframe{position:relative;z-index:1;display:block;width:100%;height:clamp(720px,88vh,1040px);border:0}
.booking__note{margin-top:1.2rem;color:var(--fg-2);font-size:.9375rem;line-height:1.5}
.booking__note a{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1.5px;text-decoration-color:color-mix(in srgb,var(--link) 55%,transparent)}
.booking__note a:hover{text-decoration-color:var(--link)}

/* Vendor logo above a product hero, and in the software lineup. Each logo sits
   on its own white plate so the vendor keeps its own colours on any ground. */
.vendor{display:inline-flex;align-items:center;justify-content:center;height:clamp(58px,6vw,76px);padding:0 clamp(18px,2.4vw,28px);border-radius:16px;background:#fff;box-shadow:0 0 0 1px var(--line-c)}
.vendor img{display:block;width:auto;height:clamp(24px,2.6vw,34px)}
.phero .vendor{margin-bottom:clamp(18px,2.2vw,28px)}

/* Photo card: the live site's use-case and resource tiles, which lead with a
   photo. A link card, so the whole thing is clickable. */
.photogrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,26px)}
.photogrid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:980px){.photogrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.photogrid,.photogrid--2{grid-template-columns:1fr}}
.photocard{
  display:flex;flex-direction:column;overflow:hidden;border-radius:var(--radius);
  background:var(--card);box-shadow:inset 0 0 0 1px var(--line-c);
  transition:transform .5s var(--ease),box-shadow .3s var(--ease);
}
.photocard:hover{transform:translateY(-3px);box-shadow:inset 0 0 0 1px var(--line-c),0 18px 40px -22px rgba(11,15,34,.45)}
.photocard__art{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--card-2)}
.photocard__art img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s var(--ease)}
.photocard:hover .photocard__art img{transform:scale(1.04)}
/* A thin brand bar ties the photo to the page it belongs to. */
.photocard__art::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;background:var(--grad)}
/* Without a photo the card keeps its identity from a brand rule along the top. */
.photocard--text{position:relative;padding-top:4px;background-image:var(--grad);background-repeat:no-repeat;background-size:100% 4px}
/* Icon art instead of a photo: the house illustration for a download or a link. */
.photocard__art--icon{display:grid;place-items:center;aspect-ratio:16/7;background:var(--card-2)}
.photocard__art--icon::before{content:"";position:absolute;inset:auto -10% -70% -10%;height:140%;background:radial-gradient(closest-side,color-mix(in srgb,var(--orange) 24%,transparent),transparent);pointer-events:none}
.photocard__art--icon .glyph{position:relative;width:clamp(44px,5vw,60px);height:clamp(44px,5vw,60px);color:var(--p);stroke-width:1.3}
.photocard__body{display:flex;flex-direction:column;gap:6px;padding:clamp(18px,2vw,24px) clamp(18px,2vw,24px) clamp(20px,2.2vw,26px)}
.photocard__eyebrow{font-family:var(--font-head);font-size:var(--fs-micro);font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--p)}
.photocard h3{font-size:1.2rem;line-height:1.25;letter-spacing:-.01em}
.photocard p{font-size:.9375rem;line-height:1.45;color:var(--fg-2)}
.photocard__more{display:flex;align-items:center;gap:7px;margin-top:auto;padding-top:14px;font-family:var(--font-head);font-size:.9375rem;font-weight:600;color:var(--link)}
.photocard__more .glyph{width:16px;height:16px;stroke-width:2.4;transition:transform .25s var(--ease)}
.photocard:hover .photocard__more .glyph{transform:translateX(3px)}

/* Three cleared logos is too few to drift convincingly, so the live site's own
   logo row stays a row: same styling, no animation. */
.clients__row{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:clamp(34px,6vw,86px);padding-inline:var(--gutter)}
.clients__row img{height:clamp(28px,3.4vw,42px);width:auto;filter:grayscale(1);mix-blend-mode:multiply;opacity:.72;transition:filter .3s,opacity .3s}
.clients__row img:hover{filter:none;opacity:1}

/* 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)}

/* 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)}

/* =============================================================
   30 TEXT PAGES (privacy, algemene voorwaarden)
   ============================================================= */
.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;margin-bottom:0;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 a vendor logo instead of a render (the software page) */
.lineup__art--logo{aspect-ratio:10/5;align-items:center;justify-content:center;padding:clamp(16px,2vw,26px);border-radius:var(--radius);background:#fff;box-shadow:inset 0 0 0 1px var(--line-c);transition:transform .5s var(--ease)}
.lineup__art--logo img{max-width:74%;max-height:100%;width:auto;height:auto;object-fit:contain}
.lineup__art--logo:hover{transform:translateY(-3px)}
/* A spec line that is a link to the module's own page. */
.lineup__specs a{color:inherit;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px;text-decoration-color:color-mix(in srgb,var(--link) 55%,transparent);transition:text-decoration-color .2s var(--ease)}
.lineup__specs a:hover{text-decoration-color:var(--link)}

/* 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}