/* ═══════════════════════════════════════════════════════════════
   TLD Style — Thoughtline Digital house style
   Extracted from the LinkedIn carousel (Spreadsheet-probleem, NL).
   Use in any TLD document: slides, carousels, one-pagers, reports,
   web pages. Import with:
       @import url('tld-style.css');
   Then wrap your document in a .tld element (or apply .tld-* classes
   directly). All tokens live under CSS custom properties so individual
   consumers can override without forking this file.
   ══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&family=Instrument+Serif:ital@0;1&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ─── Brand colors ─── */
  --tld-teal:       #34B4AC;  /* primary brand teal (logo) */
  --tld-teal-50:    #E8F6F5;
  --tld-teal-100:   #C9ECE9;
  --tld-teal-200:   #94DAD5;
  --tld-teal-300:   #5FC7C0;  /* highlight on dark bg */
  --tld-teal-400:   #34B4AC;
  --tld-teal-500:   #2AA29A;
  --tld-teal-600:   #218078;
  --tld-teal-700:   #195E58;  /* "ink teal" for eyebrows, serif italics */
  --tld-teal-800:   #103E3A;
  --tld-teal-900:   #082220;

  --tld-lime:       #A8C43B;  /* secondary accent — logo bubble green */
  --tld-lime-300:   #C2D86A;
  --tld-lime-500:   #8EA932;

  /* ─── Neutrals (slightly warm) ─── */
  --tld-ink:        #0F1414;  /* wordmark black */
  --tld-ink-900:    #0F1414;
  --tld-ink-800:    #1A2121;  /* secondary surface on dark */
  --tld-ink-700:    #2D3636;  /* primary body on light */
  --tld-ink-600:    #4A5454;
  --tld-ink-500:    #6B7575;  /* muted body / captions */
  --tld-ink-400:    #9099A0;  /* bubble dots, decorative */
  --tld-ink-300:    #C4CACA;
  --tld-ink-200:    #E1E5E4;  /* hairline borders */
  --tld-ink-100:    #EEF1F0;  /* row separators */
  --tld-ink-50:     #F6F8F7;
  --tld-paper:      #FBFBF9;  /* canvas / off-white */
  --tld-white:      #FFFFFF;

  /* ─── Semantic ─── */
  --tld-danger:     #C4473A;  /* "risk", "voor" (before), failure */
  --tld-warn:       #D9A441;
  --tld-success:    #2F8F5F;
  --tld-info:       var(--tld-teal-500);

  /* ─── Foreground / background roles (light surface) ─── */
  --tld-fg1: var(--tld-ink-900);   /* headlines */
  --tld-fg2: var(--tld-ink-700);   /* body */
  --tld-fg3: var(--tld-ink-500);   /* muted */
  --tld-fg4: var(--tld-ink-400);   /* decorative / disabled */
  --tld-bg1: var(--tld-paper);
  --tld-bg2: var(--tld-ink-50);
  --tld-bg3: var(--tld-ink-100);
  --tld-border-1: var(--tld-ink-200);
  --tld-border-2: var(--tld-ink-300);
  --tld-accent: var(--tld-teal-400);
  --tld-accent-ink: var(--tld-teal-700);
  --tld-accent-2: var(--tld-lime);

  /* ─── Type families ─── */
  --tld-font-sans:    'Outfit', 'Inter', system-ui, -apple-system, sans-serif;
  --tld-font-serif:   'Instrument Serif', 'Iowan Old Style', Georgia, serif;
  --tld-font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', monospace;
  --tld-font-display: var(--tld-font-sans);

  /* ─── Type scale (fluid) ─── */
  --tld-fs-display: clamp(3rem, 6vw + 1rem, 6.5rem);  /* hero / slide titles */
  --tld-fs-h1:      clamp(2.5rem, 3.5vw + 1rem, 4.5rem);
  --tld-fs-h2:      clamp(2rem, 2.5vw + 0.8rem, 3rem);
  --tld-fs-h3:      1.5rem;
  --tld-fs-h4:      1.25rem;
  --tld-fs-body-lg: 1.1875rem;
  --tld-fs-body:    1rem;
  --tld-fs-small:   0.875rem;
  --tld-fs-micro:   0.75rem;

  /* ─── Weights ─── */
  --tld-fw-light:    300;   /* default for display + h1/h2 */
  --tld-fw-regular:  400;
  --tld-fw-medium:   500;   /* CTAs, emphasis */
  --tld-fw-semibold: 600;
  --tld-fw-bold:     700;

  /* ─── Line heights / tracking ─── */
  --tld-lh-tight:   1.02;
  --tld-lh-snug:    1.2;
  --tld-lh-normal:  1.5;
  --tld-lh-relaxed: 1.6;
  --tld-tr-tight:   -0.025em;   /* display */
  --tld-tr-snug:    -0.01em;
  --tld-tr-normal:  0;
  --tld-tr-wide:    0.08em;
  --tld-tr-wider:   0.14em;     /* eyebrows, mono labels */
  --tld-tr-widest:  0.16em;

  /* ─── Spacing (8pt grid) ─── */
  --tld-sp-1:  4px;
  --tld-sp-2:  8px;
  --tld-sp-3:  12px;
  --tld-sp-4:  16px;
  --tld-sp-5:  24px;
  --tld-sp-6:  32px;
  --tld-sp-7:  48px;
  --tld-sp-8:  64px;
  --tld-sp-9:  96px;
  --tld-sp-10: 128px;

  /* ─── Radii (architecture: tight, almost-square; pills for CTAs) ─── */
  --tld-r-none: 0;
  --tld-r-xs:   2px;   /* cards, data tiles — carousel default */
  --tld-r-sm:   4px;   /* inputs, small surfaces */
  --tld-r-md:   8px;   /* buttons */
  --tld-r-lg:   14px;  /* hero imagery, feature panels */
  --tld-r-xl:   20px;
  --tld-r-pill: 999px; /* navigation CTA, chips */

  /* ─── Shadows (soft, layered — no harsh drop shadow) ─── */
  --tld-shadow-xs:  0 1px 2px rgba(15, 20, 20, 0.04);
  --tld-shadow-sm:  0 2px 6px rgba(15, 20, 20, 0.05), 0 1px 2px rgba(15, 20, 20, 0.04);
  --tld-shadow-md:  0 8px 24px -6px rgba(15, 20, 20, 0.08), 0 2px 6px rgba(15, 20, 20, 0.04);
  --tld-shadow-lg:  0 24px 60px -12px rgba(15, 20, 20, 0.14), 0 6px 16px rgba(15, 20, 20, 0.05);
  --tld-shadow-card:0 8px 22px -8px rgba(15, 20, 20, 0.18); /* used on carousel spreadsheet cards */
  --tld-shadow-glow-teal:   0 0 0 4px rgba(52, 180, 172, 0.18);
  --tld-shadow-glow-danger: 0 0 0 5px rgba(196, 71, 58, 0.14);
  --tld-shadow-glow-lime:   0 0 0 4px rgba(168, 196, 59, 0.25);

  /* ─── Motion ─── */
  --tld-ease-standard:    cubic-bezier(0.22, 0.61, 0.36, 1);
  --tld-ease-emphasized:  cubic-bezier(0.34, 1.56, 0.64, 1);
  --tld-ease-out:         cubic-bezier(0.16, 1, 0.3, 1);
  --tld-dur-fast:  120ms;
  --tld-dur-base:  220ms;
  --tld-dur-slow:  420ms;

  /* ─── Layout ─── */
  --tld-container-max:     1240px;
  --tld-container-reading: 680px;
  --tld-gutter:            clamp(20px, 4vw, 48px);

  /* ─── Slide format (carousel / print) ─── */
  --tld-slide-w: 1080px;
  --tld-slide-h: 1350px;
  --tld-slide-pad-x: 80px;
  --tld-slide-pad-y: 72px;
}

/* ═══════════════════════════════════════════════════════════════
   Base — apply on a root wrapper (e.g. <div class="tld">)
   ══════════════════════════════════════════════════════════════ */
.tld {
  font-family: var(--tld-font-sans);
  color: var(--tld-fg1);
  background: var(--tld-bg1);
  font-size: var(--tld-fs-body);
  line-height: var(--tld-lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ─── Display / headings ─── */
.tld-display {
  font-family: var(--tld-font-display);
  font-size: var(--tld-fs-display);
  font-weight: var(--tld-fw-light);
  line-height: var(--tld-lh-tight);
  letter-spacing: var(--tld-tr-tight);
  color: var(--tld-fg1);
  margin: 0;
  text-wrap: balance;
}
.tld-h1 {
  font-family: var(--tld-font-display);
  font-size: var(--tld-fs-h1);
  font-weight: var(--tld-fw-light);
  line-height: 1.05;
  letter-spacing: var(--tld-tr-tight);
  color: var(--tld-fg1);
  margin: 0;
  text-wrap: balance;
}
.tld-h2 {
  font-family: var(--tld-font-display);
  font-size: var(--tld-fs-h2);
  font-weight: var(--tld-fw-light);
  line-height: var(--tld-lh-snug);
  letter-spacing: var(--tld-tr-tight);
  color: var(--tld-fg1);
  margin: 0;
  text-wrap: balance;
}
.tld-h3 {
  font-size: var(--tld-fs-h3);
  font-weight: var(--tld-fw-medium);
  line-height: var(--tld-lh-snug);
  letter-spacing: var(--tld-tr-snug);
  margin: 0;
}
.tld-h4 {
  font-size: var(--tld-fs-h4);
  font-weight: var(--tld-fw-medium);
  line-height: var(--tld-lh-snug);
  margin: 0;
}

/* Signature treatment: serif italic highlight inside a sans display/headline.
   Use <em class="tld-accent-italic"> inside headings. This is the
   single most recognizable element of the TLD style. */
.tld-display em,
.tld-h1 em,
.tld-h2 em,
.tld-accent-italic {
  font-family: var(--tld-font-serif);
  font-style: italic;
  font-weight: var(--tld-fw-regular);
  color: var(--tld-accent-ink);
  letter-spacing: -0.01em;
}
/* On dark backgrounds swap to the light teal variant */
.tld-on-dark .tld-display em,
.tld-on-dark .tld-h1 em,
.tld-on-dark .tld-h2 em,
.tld-on-dark .tld-accent-italic {
  color: var(--tld-teal-300);
}
/* Risk / "before" variant — use for negative framings */
.tld-accent-italic.is-danger { color: var(--tld-danger); }

/* ─── Body ─── */
.tld p, .tld-p {
  font-size: var(--tld-fs-body);
  line-height: var(--tld-lh-relaxed);
  color: var(--tld-fg2);
  margin: 0 0 1em;
  text-wrap: pretty;
}
.tld-lead {
  font-size: var(--tld-fs-body-lg);
  line-height: 1.55;
  color: var(--tld-fg2);
  max-width: 54ch;
  margin: 0;
  text-wrap: pretty;
}
.tld-small { font-size: var(--tld-fs-small); color: var(--tld-fg3); }
.tld-micro { font-size: var(--tld-fs-micro); color: var(--tld-fg3); letter-spacing: 0.02em; }

/* ─── Mono label & eyebrow ─── */
.tld-mono-label {
  font-family: var(--tld-font-mono);
  font-size: 13px;
  color: var(--tld-accent-ink);
  letter-spacing: var(--tld-tr-wider);
  text-transform: uppercase;
  font-weight: var(--tld-fw-medium);
}
.tld-on-dark .tld-mono-label { color: var(--tld-teal-300); }

.tld-eyebrow {
  font-family: var(--tld-font-mono);
  font-size: 13px;
  font-weight: var(--tld-fw-medium);
  text-transform: uppercase;
  letter-spacing: var(--tld-tr-widest);
  color: var(--tld-accent-ink);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.tld-eyebrow::before {
  content: ""; width: 24px; height: 1px;
  background: var(--tld-teal-400);
  display: inline-block;
}
.tld-on-dark .tld-eyebrow { color: var(--tld-teal-300); }
.tld-on-dark .tld-eyebrow::before { background: var(--tld-teal-300); }

/* ─── Slide numbering (carousel footer) ─── */
.tld-slide-num {
  font-family: var(--tld-font-mono);
  font-size: 16px;
  letter-spacing: var(--tld-tr-wider);
  text-transform: uppercase;
  color: var(--tld-ink-500);
}
.tld-on-dark .tld-slide-num { color: rgba(255, 255, 255, 0.55); }

/* ─── Links ─── */
.tld a {
  color: var(--tld-accent-ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: var(--tld-teal-300);
  transition: color var(--tld-dur-fast) var(--tld-ease-standard),
              text-decoration-color var(--tld-dur-fast) var(--tld-ease-standard);
}
.tld a:hover {
  color: var(--tld-accent);
  text-decoration-color: var(--tld-accent);
}

/* ─── Selection & focus ─── */
.tld ::selection { background: var(--tld-teal-200); color: var(--tld-ink-900); }
.tld :focus-visible {
  outline: none;
  box-shadow: var(--tld-shadow-glow-teal);
  border-radius: var(--tld-r-sm);
}

/* ═══════════════════════════════════════════════════════════════
   Signature motifs
   ══════════════════════════════════════════════════════════════ */

/* Bubble trail — echoes the logo dots. Place at bottom of slides,
   as a footer rule, or next to CTAs. */
.tld-bubble-trail {
  display: inline-flex; gap: 10px; align-items: center;
}
.tld-bubble-trail span {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--tld-ink-400); display: block;
}
.tld-bubble-trail.is-teal span { background: var(--tld-teal); }
.tld-bubble-trail.is-lime span { background: var(--tld-lime); }
.tld-bubble-trail.is-light span { background: rgba(255, 255, 255, 0.85); }
/* Fading variant (like the logo descender) */
.tld-bubble-trail.is-fading span:nth-child(1) { opacity: 0.9; }
.tld-bubble-trail.is-fading span:nth-child(2) { opacity: 0.75; }
.tld-bubble-trail.is-fading span:nth-child(3) { opacity: 0.6; }
.tld-bubble-trail.is-fading span:nth-child(4) { opacity: 0.45; }
.tld-bubble-trail.is-fading span:nth-child(5) { opacity: 0.3; }
.tld-bubble-trail.is-fading span:nth-child(6) { opacity: 0.15; }

/* Hairline rule under eyebrows (alternative to the ::before dash) */
.tld-rule-teal {
  height: 1px; background: var(--tld-teal-400); width: 48px; display: block;
}

/* ═══════════════════════════════════════════════════════════════
   Components
   ══════════════════════════════════════════════════════════════ */

/* ─── Buttons ─── */
.tld-btn {
  font-family: inherit; font-size: 15px; font-weight: var(--tld-fw-medium);
  padding: 13px 22px; border-radius: var(--tld-r-md);
  border: 1px solid transparent; cursor: pointer;
  display: inline-flex; align-items: center; gap: 10px;
  text-decoration: none; white-space: nowrap;
  transition: all var(--tld-dur-base) var(--tld-ease-standard);
}
.tld-btn svg { width: 14px; height: 14px; }
.tld-btn-primary   { background: var(--tld-teal); color: #fff; box-shadow: var(--tld-shadow-xs); }
.tld-btn-primary:hover { background: var(--tld-teal-500); transform: translateY(-1px); box-shadow: var(--tld-shadow-sm); }
.tld-btn-secondary { background: var(--tld-white); color: var(--tld-fg1); border-color: var(--tld-border-2); }
.tld-btn-secondary:hover { border-color: var(--tld-ink-600); }
.tld-btn-ghost     { background: transparent; color: var(--tld-fg1); padding-inline: 6px; }
.tld-btn-ghost:hover { color: var(--tld-accent-ink); }
.tld-btn-dark      { background: var(--tld-ink-900); color: #fff; border-radius: var(--tld-r-pill); }
.tld-btn-dark:hover { background: var(--tld-accent-ink); }

/* ─── Cards / surfaces ─── */
.tld-card {
  background: var(--tld-white);
  border: 1px solid var(--tld-border-1);
  border-radius: var(--tld-r-xs);
  box-shadow: var(--tld-shadow-xs);
  padding: var(--tld-sp-6);
}
.tld-card-soft {
  background: var(--tld-teal-50);
  border-radius: var(--tld-r-xs);
  padding: var(--tld-sp-4);
}
.tld-card-dark {
  background: var(--tld-ink-800);
  color: #fff;
  border: 1px solid var(--tld-teal-300);
  border-radius: var(--tld-r-xs);
}

/* "Live" status badge (After/dashboard panels) */
.tld-badge-live {
  font-family: var(--tld-font-sans);
  background: var(--tld-teal);
  color: #fff;
  padding: 2px 8px;
  border-radius: 2px;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* Status dots with signature glow */
.tld-dot {
  width: 12px; height: 12px; border-radius: 50%;
  display: inline-block;
  background: var(--tld-ink-400);
}
.tld-dot.is-danger  { background: var(--tld-danger);  box-shadow: var(--tld-shadow-glow-danger); }
.tld-dot.is-accent  { background: var(--tld-teal);    box-shadow: var(--tld-shadow-glow-teal); }
.tld-dot.is-lime    { background: var(--tld-lime);    box-shadow: var(--tld-shadow-glow-lime); }

/* Arrow-bullet list (→ teal, with support for danger variant) */
.tld-arrow-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: var(--tld-sp-4);
  font-size: var(--tld-fs-body-lg); color: var(--tld-fg2); line-height: 1.45;
}
.tld-arrow-list > li {
  display: flex; gap: 12px; align-items: baseline;
}
.tld-arrow-list > li::before {
  content: "→"; color: var(--tld-teal); font-weight: 500;
  flex-shrink: 0; width: 20px;
}
.tld-arrow-list > li.is-danger { color: var(--tld-danger); }
.tld-arrow-list > li.is-danger::before { color: var(--tld-danger); }

/* Check-bullet list (used on "solution" slides) */
.tld-check-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: var(--tld-sp-3);
}
.tld-check-list > li {
  display: flex; align-items: center; gap: 20px;
  font-size: 1.25rem;
}
.tld-check-list > li::before {
  content: ""; flex-shrink: 0;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--tld-teal);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%230F1414' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M3 8l3 3 7-7'/></svg>");
  background-repeat: no-repeat; background-position: center;
}

/* ═══════════════════════════════════════════════════════════════
   Layout scaffolds
   ══════════════════════════════════════════════════════════════ */

.tld-container { max-width: var(--tld-container-max); margin: 0 auto; padding: 0 var(--tld-gutter); }

/* Slide frame — 1080×1350 (4:5) portrait canvas for carousels.
   Defaults to light paper; add .tld-on-dark for ink background. */
.tld-slide {
  width: var(--tld-slide-w); height: var(--tld-slide-h);
  background: var(--tld-paper); color: var(--tld-fg1);
  font-family: var(--tld-font-sans);
  padding: var(--tld-sp-7) var(--tld-sp-8);
  padding: var(--tld-slide-pad-y) var(--tld-slide-pad-x);
  display: flex; flex-direction: column;
  position: relative; overflow: hidden;
  box-sizing: border-box;
}
.tld-slide.tld-on-dark {
  background: var(--tld-ink);
  color: #fff;
}
.tld-slide.tld-on-dark .tld-display,
.tld-slide.tld-on-dark .tld-h1,
.tld-slide.tld-on-dark .tld-h2 { color: #fff; }
.tld-slide.tld-on-dark .tld-lead { color: rgba(255, 255, 255, 0.72); }

.tld-slide-head {
  display: flex; justify-content: space-between; align-items: flex-start;
}
.tld-slide-foot {
  margin-top: auto;
  display: flex; justify-content: space-between; align-items: flex-end;
}

/* Logo marks — set your <img src> to one of the project logos.
   On dark backgrounds, add .is-on-dark to invert the PNGs. */
.tld-logo { height: 34px; width: auto; display: block; }
.tld-logo.is-on-dark { filter: brightness(0) invert(1); }

/* ═══════════════════════════════════════════════════════════════
   Print — make any .tld-slide render edge-to-edge at 1080×1350
   ══════════════════════════════════════════════════════════════ */
@media print {
  @page { size: 1080px 1350px; margin: 0; }
  html, body { background: var(--tld-paper); }
  .tld-slide {
    page-break-after: always;
    break-after: page;
    box-shadow: none;
  }
  .tld-slide:last-child { page-break-after: auto; break-after: auto; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ═══════════════════════════════════════════════════════════════
   Usage guide (reference only — ignored by CSS)
   ───────────────────────────────────────────────────────────────
   1. Light slide with signature italic highlight:

        <article class="tld tld-slide">
          <div class="tld-slide-head">
            <span class="tld-eyebrow">Het probleem</span>
            <span class="tld-slide-num">02 / 08</span>
          </div>
          <h1 class="tld-h1">
            Uw bedrijf is <em class="tld-accent-italic">geen</em> spreadsheet.
          </h1>
          <p class="tld-lead">Stop met het zo te runnen.</p>
          <footer class="tld-slide-foot">
            <img class="tld-logo" src="assets/logo-primary.png" alt="Thoughtline Digital"/>
            <span class="tld-slide-num">02 / 08</span>
          </footer>
        </article>

   2. Dark/inverted slide:

        <article class="tld tld-slide tld-on-dark">
          <span class="tld-eyebrow">De oplossing</span>
          <h1 class="tld-display">
            Gebouwd rond <em>úw</em> werkprocessen.
          </h1>
          <ul class="tld-check-list">
            <li>Eén centrale werkplek</li>
            <li>Eén versie van de waarheid</li>
          </ul>
          <footer class="tld-slide-foot">
            <img class="tld-logo is-on-dark" src="assets/logo-primary.png" alt=""/>
            <span class="tld-slide-num">06 / 08</span>
          </footer>
        </article>

   3. CTA button with bubble trail:

        <a class="tld-btn tld-btn-primary" href="#">Start a conversation</a>
        <span class="tld-bubble-trail is-teal is-fading">
          <span></span><span></span><span></span><span></span><span></span><span></span>
        </span>

   ─── Rules of thumb ───
   • Headings use weight 300 (light). Resist bold.
   • One serif-italic highlight per headline. Never two.
   • Teal (#34B4AC) for accent; lime (#A8C43B) sparingly; danger (#C4473A)
     only for risk/"before" framing.
   • Cards are square-ish: radius 2–4px, never pillowy. Pills are for
     CTAs and status chips only.
   • Shadows are soft and layered — never a harsh black drop shadow.
   • Bubble trails and mono labels are the signature micro-details;
     include at least one per slide / landing page.
   ══════════════════════════════════════════════════════════════ */