/* ==========================================================================
   TAKTFABRIK — DESIGN SYSTEM
   Paper + Marine · v2.0
   --------------------------------------------------------------------------
   1. Tokens
   2. Reset & Base
   3. Typography
   4. Layout primitives
   5. Atmosphere (grain, grid, glow, spotlight)
   6. Components (buttons, chapter, cards, pills, tables, forms)
   7. Header & Navigation
   8. Footer
   9. Motion & reveal states
   10. Utilities
   ========================================================================== */

/* ==========================================================================
   1. TOKENS
   ========================================================================== */

:root {
  /* ---- Colour: paper & structure --------------------------------------- */
  --tf-void:        #FFFFFF;   /* page base                                  */
  --tf-obsidian:    #FFFFFF;   /* default section background                 */
  --tf-canvas:      #F1F6FC;   /* tinted alternate section (rhythm)          */
  --tf-surface:     #F7FAFE;   /* raised card                                */
  --tf-surface-2:   #FFFFFF;   /* raised card, hover / nested                */
  --tf-line:        #DCE6F2;   /* hairline                                   */
  --tf-line-soft:   #EDF3FA;   /* barely-there hairline (rule grid)          */

  /* ---- Colour: ink ------------------------------------------------------ */
  --tf-ink:         #0C1B2E;   /* deep navy — the "black" of this system     */
  --tf-text:        #0C1B2E;   /* primary text                               */
  --tf-text-2:      #45596F;   /* secondary text — 7.2:1 on paper            */
  --tf-muted:       #5B7085;   /* tertiary / captions — 5.1:1, still AA at
                                  12px. Do not lighten: this token carries
                                  labels, captions and diagram body text.    */

  /* ---- Colour: marine + pastel ------------------------------------------ */
  --tf-accent:        #1B4E8F; /* marine — CTAs, links, key marks            */
  --tf-accent-dim:    #143B6E; /* pressed / deeper                           */
  --tf-accent-soft:   #A9CBEC; /* pastel blue — oversized type, fills        */
  --tf-accent-pale:   #DCEAF8; /* palest tint — chips, rails                 */
  --tf-on-accent:     #FFFFFF; /* text sitting ON a marine surface           */
  --tf-accent-glow:   rgba(126, 174, 224, 0.38);
  --tf-accent-veil:   rgba(27, 78, 143, 0.055);

  /* Bare channels so borders and glows can vary alpha without hardcoding the
     hue. Recolouring the whole site is these two lines plus the hexes above. */
  --tf-accent-rgb:  27, 78, 143;
  --tf-ink-rgb:     12, 27, 46;

  /* Second, warmer gradient tone so blooms are not monochrome */
  --tf-warm-glow:     rgba(224, 176, 168, 0.30);

  --tf-danger:      #C0392B;
  --tf-ok:          #1E7A4C;

  /* ---- Typography ------------------------------------------------------ */
  --tf-font-ui:      "Inter Tight", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --tf-font-display: "Inter Tight", "Inter", -apple-system, sans-serif;
  --tf-font-serif:   "Instrument Serif", "Times New Roman", Georgia, serif;
  --tf-font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Fluid scale — 390px → 1600px viewport */
  --fs-mega:    clamp(3.75rem, 14.5vw, 15rem);   /* overflow wordmarks        */
  --fs-display: clamp(2.5rem, 5.1vw, 4.75rem);   /* hero headline             */
  --fs-h1:      clamp(2.25rem, 4.4vw, 3.875rem);
  --fs-h2:      clamp(1.875rem, 3.5vw, 3rem);
  --fs-h3:      clamp(1.5rem, 2.5vw, 2.125rem);
  --fs-h4:      clamp(1.25rem, 1.7vw, 1.5rem);
  --fs-lead:    clamp(1.0625rem, 1.35vw, 1.3125rem);
  --fs-body:    1.0625rem;
  --fs-sm:      0.9375rem;
  --fs-xs:      0.8125rem;
  --fs-label:   0.75rem;

  --lh-mega:    0.82;
  --lh-display: 0.94;
  --lh-head:    1.04;
  --lh-body:    1.62;

  --ls-mega:    -0.055em;
  --ls-display: -0.038em;
  --ls-head:    -0.028em;
  --ls-label:    0.16em;

  /* ---- Space (4px base) ------------------------------------------------ */
  --sp-1: 0.25rem;  --sp-2: 0.5rem;   --sp-3: 0.75rem;  --sp-4: 1rem;
  --sp-5: 1.5rem;   --sp-6: 2rem;     --sp-7: 2.5rem;   --sp-8: 3rem;
  --sp-9: 4rem;     --sp-10: 5rem;    --sp-11: 6.5rem;  --sp-12: 8rem;

  --sp-section:    clamp(5.5rem, 9.5vw, 10.5rem);
  --sp-section-sm: clamp(3.5rem, 6vw, 6.5rem);

  /* ---- Layout ---------------------------------------------------------- */
  --tf-container: 1360px;
  --tf-narrow:    880px;
  --tf-gutter:    clamp(1.25rem, 4vw, 3.5rem);
  --tf-header-h:  76px;

  /* ---- Radius / border ------------------------------------------------- */
  --r-xs: 4px;  --r-sm: 8px;  --r-md: 14px;  --r-lg: 22px;  --r-xl: 32px;
  --r-pill: 999px;

  /* ---- Motion ---------------------------------------------------------- */
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-soft:  cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:   180ms;
  --dur-base:   340ms;
  --dur-slow:   680ms;
  --dur-cine:   1100ms;

  /* ---- Elevation ------------------------------------------------------- */
  --sh-sm: 0 1px 2px rgba(12,27,46,.06);
  --sh-md: 0 14px 40px -18px rgba(12,27,46,.16);
  --sh-lg: 0 40px 90px -40px rgba(12,27,46,.20);
  --sh-accent: 0 0 0 1px rgba(27,78,143,.18), 0 18px 50px -22px rgba(27,78,143,.30);

  --z-grain: 9000;
  --z-header: 800;
  --z-cursor: 9500;
}

/* Inverted context — put on any section that should read as a deep navy
   block. Everything inside re-resolves against the dark ground, so no
   component needs a variant of its own. Use sparingly: one or two per page. */
.tf-on-ink,
.tf-ink-section,
.tf-cta-band {
  --tf-obsidian:  var(--tf-ink);
  --tf-void:      #071322;
  --tf-canvas:    #12263D;
  --tf-surface:   #142A44;
  --tf-surface-2: #1A3350;
  --tf-line:      #274363;
  --tf-line-soft: #16293F;
  --tf-text:      #F2F7FC;
  --tf-text-2:    #B4C6D9;
  --tf-muted:     #8296AC;
  --tf-accent:      var(--tf-accent-soft);
  --tf-accent-dim:  #7FB0DC;
  --tf-on-accent:   var(--tf-ink);
  --tf-accent-glow: rgba(169, 203, 236, 0.22);
  --tf-accent-veil: rgba(169, 203, 236, 0.10);
  --tf-accent-rgb:  169, 203, 236;
  --tf-ink-rgb:     242, 247, 252;
  --sh-md: 0 14px 40px -16px rgba(0,0,0,.5);
  --sh-lg: 0 40px 90px -34px rgba(0,0,0,.6);
  color: var(--tf-text);
}
/* .tf-cta-band paints its own gradient background, so only the token flip
   above applies to it. */
.tf-on-ink,
.tf-ink-section { background: var(--tf-obsidian); }

/* On ink, the primary button inverts to paper so it still reads as the
   strongest element in the block. */
.tf-cta-band .tf-btn--primary {
  --btn-bg: #FFFFFF;
  --btn-fg: var(--tf-ink);
  --btn-bd: #FFFFFF;
}
.tf-cta-band .tf-btn--primary::before { background: var(--tf-accent-soft); }
.tf-cta-band .tf-btn--primary:hover { color: var(--tf-ink); border-color: var(--tf-accent-soft); }

/* ==========================================================================
   2. RESET & BASE
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--tf-header-h) + 24px);
}

body {
  margin: 0;
  background: var(--tf-void);
  color: var(--tf-text);
  font-family: var(--tf-font-ui);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: 400;
  font-feature-settings: "ss01" 1, "cv05" 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

body.tf-nav-open { overflow: hidden; }

img, svg, video, canvas { display: block; max-width: 100%; height: auto; }

/* Author-level `display` (e.g. .tf-btn { display: inline-flex }) beats the UA's
   [hidden] rule, so JS toggling `.hidden = true` would silently do nothing. */
[hidden] { display: none !important; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }

a { color: inherit; text-decoration: none; }

::selection { background: var(--tf-accent); color: var(--tf-on-accent); }

:focus-visible {
  outline: 2px solid var(--tf-accent);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}

.tf-skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--tf-accent); color: var(--tf-on-accent);
  padding: var(--sp-3) var(--sp-5); z-index: 9999; font-weight: 600;
}
.tf-skip:focus { left: var(--sp-4); top: var(--sp-4); }

/* ==========================================================================
   3. TYPOGRAPHY
   ========================================================================== */

h1, h2, h3, h4, h5 {
  margin: 0;
  font-family: var(--tf-font-display);
  font-weight: 600;
  line-height: var(--lh-head);
  letter-spacing: var(--ls-head);
  text-wrap: balance;
  /* German compounds ("Personaladministration") are wider than a phone at
     display sizes — let them break rather than push the page sideways. */
  overflow-wrap: break-word;
}
/* Word spans injected by the line-reveal splitter are inline-block, which
   would otherwise make them unbreakable. */
.tf-w { overflow-wrap: break-word; max-width: 100%; }

@media (max-width: 720px) {
  h1, h2, h3, .tf-mega, .tf-display, .tf-w { hyphens: auto; -webkit-hyphens: auto; }
}

p { margin: 0 0 var(--sp-5); }
p:last-child { margin-bottom: 0; }

.tf-mega {
  font-size: var(--fs-mega);
  line-height: var(--lh-mega);
  letter-spacing: var(--ls-mega);
  font-weight: 650;
  text-transform: uppercase;
  margin: 0;
}

.tf-display {
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  font-weight: 600;
}

.tf-h1 { font-size: var(--fs-h1); }
.tf-h2 { font-size: var(--fs-h2); }
.tf-h3 { font-size: var(--fs-h3); }
.tf-h4 { font-size: var(--fs-h4); letter-spacing: -0.018em; }

/* The one editorial flourish: Instrument Serif italic */
.tf-serif {
  font-family: var(--tf-font-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.012em;
}
.tf-serif-accent { color: var(--tf-accent); }

.tf-lead {
  font-size: var(--fs-lead);
  line-height: 1.58;
  color: var(--tf-text-2);
  letter-spacing: -0.011em;
  text-wrap: pretty;
}

.tf-body   { color: var(--tf-text-2); text-wrap: pretty; }
.tf-muted  { color: var(--tf-muted); }
.tf-sm     { font-size: var(--fs-sm); }
.tf-xs     { font-size: var(--fs-xs); }

/* Mono eyebrow / label — the "Fabrik" voice */
.tf-label {
  font-family: var(--tf-font-mono);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--tf-muted);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  margin: 0;
}
.tf-label--accent { color: var(--tf-accent); }
.tf-label::before {
  content: "";
  width: 20px; height: 1px;
  background: currentColor;
  opacity: .5;
  flex: none;
}
.tf-label--bare::before { display: none; }

.tf-mono { font-family: var(--tf-font-mono); letter-spacing: -0.01em; }

.tf-num {
  font-family: var(--tf-font-display);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  letter-spacing: -0.04em;
}

/* Outline numerals — chapter / step markers */
.tf-outline {
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 1px var(--tf-line);
  color: transparent;
}
.tf-outline--accent { -webkit-text-stroke-color: var(--tf-accent); }

/* Inline accent underline */
.tf-mark {
  background-image: linear-gradient(var(--tf-accent), var(--tf-accent));
  background-repeat: no-repeat;
  background-position: 0 88%;
  background-size: 100% 2px;
  padding-bottom: 1px;
}

/* Gradient-fade text for long-form intros */
.tf-fade-in-text {
  background: linear-gradient(180deg, var(--tf-text) 0%, var(--tf-muted) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ==========================================================================
   4. LAYOUT PRIMITIVES
   ========================================================================== */

.tf-section {
  position: relative;
  padding: var(--sp-section) 0;
  background: var(--tf-obsidian);
  color: var(--tf-text);
  isolation: isolate;
}

/* Vertical rule grid across every section — the editorial scaffold that
   holds the white space together. `isolation: isolate` makes this a stacking
   context, so a z-index:-1 pseudo paints above the section background but
   below its content. */
.tf-section::after,
.tf-hero::after,
.tf-pagehero::after {
  content: "";
  position: absolute; inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: repeating-linear-gradient(
    to right,
    var(--tf-line-soft) 0 1px,
    transparent 1px calc(100% / 7)
  );
}
.tf-section--norules::after { display: none; }
.tf-section--sm   { padding: var(--sp-section-sm) 0; }
.tf-section--flush-top    { padding-top: 0; }
.tf-section--flush-bottom { padding-bottom: 0; }

.tf-container {
  width: 100%;
  max-width: var(--tf-container);
  margin-inline: auto;
  padding-inline: var(--tf-gutter);
}
.tf-container--wide   { max-width: 1600px; }
.tf-container--narrow { max-width: var(--tf-narrow); }
.tf-container--fluid  { max-width: none; }

.tf-grid { display: grid; gap: var(--sp-6); }
.tf-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tf-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tf-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tf-grid--12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
.tf-grid--split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 6vw, 6rem); }
.tf-grid--split-even { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2rem, 6vw, 6rem); }

.tf-stack { display: flex; flex-direction: column; }
.tf-stack--2 { gap: var(--sp-2); } .tf-stack--3 { gap: var(--sp-3); }
.tf-stack--4 { gap: var(--sp-4); } .tf-stack--5 { gap: var(--sp-5); }
.tf-stack--6 { gap: var(--sp-6); } .tf-stack--8 { gap: var(--sp-8); }

.tf-row { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; }
.tf-row--between { justify-content: space-between; }
.tf-row--end { justify-content: flex-end; }

.tf-hairline { height: 1px; background: var(--tf-line); border: 0; margin: 0; }

/* Vertical hairline grid backdrop — the "Fabrik" scaffold */
.tf-ruled::before {
  content: "";
  position: absolute; inset: 0;
  background-image: repeating-linear-gradient(
    to right,
    var(--tf-line-soft) 0 1px,
    transparent 1px calc(100% / 6)
  );
  opacity: .8;
  pointer-events: none;
  z-index: -1;
}

/* ==========================================================================
   5. ATMOSPHERE
   ========================================================================== */

/* Film grain — fixed, above everything, never intercepts pointer */
.tf-grain {
  position: fixed; inset: -120px;
  z-index: var(--z-grain);
  pointer-events: none;
  /* Much lighter than on a dark ground — on paper, noise reads as dirt fast. */
  opacity: .019;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: tf-grain-shift 620ms steps(3) infinite;
  will-change: transform;
}
@keyframes tf-grain-shift {
  0%   { transform: translate(0, 0); }
  33%  { transform: translate(-14px, 8px); }
  66%  { transform: translate(9px, -12px); }
  100% { transform: translate(0, 0); }
}

/* Soft gradient bloom — two overlapping tones so the wash reads as light,
   not as a flat tint. Sits inside a positioned, overflow-hidden parent. */
.tf-bloom {
  position: absolute;
  width: 62vw; aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 38% 42%, var(--tf-accent-glow) 0%, transparent 62%),
    radial-gradient(circle at 66% 60%, var(--tf-warm-glow) 0%, transparent 58%);
  filter: blur(52px);
  pointer-events: none;
  z-index: -1;
}
.tf-bloom--tl { top: -22vw; left: -18vw; }
.tf-bloom--tr { top: -26vw; right: -20vw; }
.tf-bloom--bl { bottom: -24vw; left: -16vw; }
.tf-bloom--br { bottom: -24vw; right: -18vw; }
.tf-bloom--c  { top: 50%; left: 50%; transform: translate(-50%, -50%); }
/* Cool-only variant where the warm tone would clash */
.tf-bloom--cool {
  background: radial-gradient(circle, var(--tf-accent-glow) 0%, transparent 64%);
}

/* Spotlight that follows the cursor (JS sets --mx / --my) */
.tf-spotlight {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: -1;
  background: radial-gradient(
    460px circle at var(--mx, 50%) var(--my, 40%),
    var(--tf-accent-veil) 0%,
    transparent 62%
  );
  transition: opacity var(--dur-base) var(--ease-soft);
}

/* Top / bottom cinematic vignette on dark sections */
.tf-vignette::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none; z-index: -1;
  background:
    linear-gradient(180deg, rgba(255,255,255,.94) 0%, transparent 22%),
    linear-gradient(0deg,  rgba(255,255,255,.94) 0%, transparent 22%);
}

/* Custom cursor */
.tf-cursor {
  position: fixed; top: 0; left: 0;
  width: 34px; height: 34px;
  border: 1px solid var(--tf-accent);
  border-radius: 50%;
  pointer-events: none;
  z-index: var(--z-cursor);
  transform: translate(-50%, -50%);
  transition: width var(--dur-base) var(--ease-out),
              height var(--dur-base) var(--ease-out),
              background-color var(--dur-base) var(--ease-out),
              opacity var(--dur-base) linear;
  /* No difference-blend on a light ground — it would invert the ring to a
     muddy orange over white. Plain marine reads cleanly on both. */
  opacity: 0;
}
.tf-cursor.is-live { opacity: 1; }
.tf-cursor.is-hot  {
  width: 62px; height: 62px;
  background: var(--tf-accent-veil);
  border-color: var(--tf-accent);
}
.tf-cursor__dot {
  position: fixed; top: 0; left: 0;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--tf-accent);
  pointer-events: none; z-index: var(--z-cursor);
  transform: translate(-50%, -50%);
  opacity: 0;
}
.tf-cursor__dot.is-live { opacity: 1; }
@media (hover: none), (pointer: coarse) {
  .tf-cursor, .tf-cursor__dot { display: none; }
}

/* Scroll progress rail */
.tf-progress {
  position: fixed; top: 0; left: 0; right: 0;
  height: 2px; z-index: calc(var(--z-header) + 10);
  background: transparent; pointer-events: none;
}
.tf-progress__bar {
  height: 100%; width: 0%;
  background: var(--tf-accent);
  box-shadow: none;
  transition: width 90ms linear;
}

/* ==========================================================================
   6. COMPONENTS
   ========================================================================== */

/* ---- 6.1 Logo ---------------------------------------------------------- */

.tf-logo {
  display: inline-flex; align-items: center; gap: 11px;
  font-family: var(--tf-font-display);
  font-weight: 650;
  font-size: 1.0625rem;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--tf-text);
  line-height: 1;
  white-space: nowrap;
}
/* Mark: three rounded squares stepping up a diagonal, corners touching.
   Abstract — reads as sequence and progression rather than as an equaliser —
   and each square can still fire its own beat on hover. */
.tf-logo__mark { width: 26px; height: 26px; flex: none; overflow: visible; }
.tf-logo__mark rect {
  fill: currentColor;
  transform-box: fill-box;
  transform-origin: 50% 50%;
}
.tf-logo__mark .tf-logo__beat { fill: var(--tf-accent); }
.tf-logo:hover .tf-logo__mark rect { animation: tf-beat 780ms var(--ease-out); }
.tf-logo__mark rect:nth-child(2) { animation-delay: 95ms !important; }
.tf-logo__mark rect:nth-child(3) { animation-delay: 190ms !important; }
@keyframes tf-beat {
  0%, 100% { transform: scale(1)    rotate(0deg); }
  42%      { transform: scale(1.32) rotate(12deg); }
}
.tf-logo__wordmark strong { font-weight: 650; }
.tf-logo__wordmark span { font-weight: 350; color: var(--tf-muted); }

/* ---- 6.2 Buttons ------------------------------------------------------- */

.tf-btn {
  --btn-bg: transparent;
  --btn-fg: var(--tf-text);
  --btn-bd: var(--tf-line);
  position: relative;
  display: inline-flex; align-items: center; gap: var(--sp-3);
  padding: 0.9375rem 1.75rem;
  border: 1px solid var(--btn-bd);
  border-radius: var(--r-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: var(--fs-sm);
  font-weight: 550;
  letter-spacing: -0.008em;
  line-height: 1;
  overflow: hidden;
  isolation: isolate;
  transition: color var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
  cursor: pointer;
}
/* Fill-expand: the accent wipes in from the left edge on hover.
   clip-path (not scaleX) so the pill's rounded ends never distort. */
.tf-btn::before {
  content: "";
  position: absolute; z-index: -1;
  inset: 0;
  border-radius: inherit;
  background: var(--tf-accent);
  clip-path: inset(0 100% 0 0 round var(--r-pill));
  transition: clip-path var(--dur-base) var(--ease-out);
}
.tf-btn:hover { color: var(--tf-on-accent); border-color: var(--tf-accent); }
.tf-btn:hover::before { clip-path: inset(0 0 0 0 round var(--r-pill)); }
.tf-btn:active { transform: scale(.978); }

.tf-btn--primary {
  --btn-bg: var(--tf-accent);
  --btn-fg: var(--tf-on-accent);
  --btn-bd: var(--tf-accent);
  font-weight: 600;
}
/* Primary is already marine, so its hover wipe deepens to ink instead. */
.tf-btn--primary::before { background: var(--tf-ink); }
.tf-btn--primary:hover { color: var(--tf-on-accent); border-color: var(--tf-ink); }
.tf-on-ink .tf-btn--primary::before { background: #FFFFFF; }
.tf-on-ink .tf-btn--primary:hover { color: var(--tf-ink); }

.tf-btn--ghost { --btn-bd: transparent; padding-inline: var(--sp-4); }
.tf-btn--ghost::before { display: none; }
.tf-btn--ghost:hover { color: var(--tf-accent); border-color: transparent; }

.tf-btn--lg { padding: 1.125rem 2.125rem; font-size: var(--fs-body); }
.tf-btn--sm { padding: 0.6875rem 1.25rem; font-size: var(--fs-xs); }
.tf-btn--block { display: flex; width: 100%; justify-content: center; }

.tf-btn__icon { width: 15px; height: 15px; flex: none; transition: transform var(--dur-base) var(--ease-out); }
.tf-btn:hover .tf-btn__icon { transform: translateX(4px); }

/* Text link with sliding rule */
.tf-link {
  position: relative;
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-weight: 550;
  color: var(--tf-text);
  padding-bottom: 2px;
}
.tf-link::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: right;
  transition: transform var(--dur-base) var(--ease-out);
}
.tf-link:hover { color: var(--tf-accent); }
.tf-link:hover::after { transform: scaleX(1); transform-origin: left; }

/* ---- 6.3 Pill / badge -------------------------------------------------- */

.tf-pill {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: 0.4375rem 0.875rem;
  border: 1px solid var(--tf-line);
  border-radius: var(--r-pill);
  background: var(--tf-surface);
  font-family: var(--tf-font-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tf-text-2);
  line-height: 1;
}
.tf-pill--accent { border-color: rgba(var(--tf-accent-rgb), .35); background: var(--tf-accent-veil); color: var(--tf-accent); }
.tf-pill__dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--tf-accent); flex: none;
  box-shadow: 0 0 0 0 var(--tf-accent);
  animation: tf-ping 2.4s var(--ease-out) infinite;
}
@keyframes tf-ping {
  0%   { box-shadow: 0 0 0 0 rgba(var(--tf-accent-rgb), .55); }
  70%  { box-shadow: 0 0 0 9px rgba(var(--tf-accent-rgb), 0); }
  100% { box-shadow: 0 0 0 0 rgba(var(--tf-accent-rgb), 0); }
}

/* ---- 6.4 Chapter header (the "dossier" device) ------------------------- */

.tf-chapter {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--sp-6);
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--tf-line);
  margin-bottom: var(--sp-9);
}
.tf-chapter__num {
  font-family: var(--tf-font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  color: var(--tf-muted);
  flex: none;
}
.tf-chapter__title { flex: 1 1 auto; }

/* Section intro block */
.tf-intro { max-width: 60ch; }
.tf-intro > * + * { margin-top: var(--sp-5); }

/* ---- 6.5 Cards --------------------------------------------------------- */

.tf-card {
  position: relative;
  display: flex; flex-direction: column;
  gap: var(--sp-4);
  padding: clamp(1.5rem, 2.4vw, 2.25rem);
  background: var(--tf-surface);
  border: 1px solid var(--tf-line);
  border-radius: var(--r-lg);
  overflow: hidden;
  isolation: isolate;
  transition: border-color var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out),
              background-color var(--dur-base) var(--ease-out);
}
.tf-card::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), var(--tf-accent-veil), transparent 70%);
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-soft);
}
.tf-card:hover { border-color: rgba(var(--tf-accent-rgb), .32); transform: translateY(-3px); }
.tf-card:hover::before { opacity: 1; }

/* Card whose whole surface is a link */
.tf-card--link::after {
  content: ""; position: absolute; inset: 0; z-index: 2;
}

/* Full colour-inversion card (crafto move) */
.tf-card--invert { background: var(--tf-surface); }
.tf-card--invert .tf-card__overlay {
  position: absolute; inset: 0; z-index: -1;
  background: var(--tf-accent);
  opacity: 0;
  transition: opacity 420ms cubic-bezier(.5,1,.89,1);
}
.tf-card--invert:hover { border-color: var(--tf-accent); }
.tf-card--invert:hover .tf-card__overlay { opacity: 1; }
.tf-card--invert:hover,
.tf-card--invert:hover .tf-label,
.tf-card--invert:hover .tf-body,
.tf-card--invert:hover .tf-muted,
.tf-card--invert:hover .tf-card__num,
.tf-card--invert:hover .tf-card__title,
.tf-card--invert:hover .tf-sm { color: var(--tf-on-accent); }
.tf-card--invert:hover .tf-outline { -webkit-text-stroke-color: rgba(255,255,255,.45); }
.tf-card--invert:hover .tf-icon {
  border-color: rgba(255,255,255,.34);
  background: rgba(255,255,255,.12);
  color: var(--tf-on-accent);
}

.tf-card__num {
  font-family: var(--tf-font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  color: var(--tf-muted);
}
.tf-card__title { font-size: var(--fs-h4); font-weight: 600; }
.tf-card__foot { margin-top: auto; padding-top: var(--sp-4); }

/* Bordered "table" card grid — hairlines instead of gaps */
.tf-cardgrid {
  display: grid;
  gap: 1px;
  background: var(--tf-line);
  border: 1px solid var(--tf-line);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.tf-cardgrid > * {
  background: var(--tf-obsidian);
  border: 0; border-radius: 0;
  padding: clamp(1.5rem, 2.6vw, 2.5rem);
}
.tf-cardgrid--2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.tf-cardgrid--3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.tf-cardgrid--4 { grid-template-columns: repeat(4, minmax(0,1fr)); }

/* ---- 6.6 Icon frame ---------------------------------------------------- */

.tf-icon {
  width: 46px; height: 46px; flex: none;
  display: grid; place-items: center;
  border: 1px solid var(--tf-line);
  border-radius: var(--r-md);
  color: var(--tf-accent);
  background: var(--tf-accent-veil);
  transition: border-color var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out);
}
.tf-icon svg { width: 21px; height: 21px; stroke: currentColor; fill: none; stroke-width: 1.6; }
.tf-icon--lg { width: 60px; height: 60px; border-radius: var(--r-lg); }
.tf-icon--lg svg { width: 27px; height: 27px; }

/* ---- 6.7 Stat / metric ------------------------------------------------- */

.tf-stat { display: flex; flex-direction: column; gap: var(--sp-2); }
.tf-stat__value {
  font-family: var(--tf-font-display);
  font-size: clamp(2.75rem, 5.2vw, 4.25rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.045em;
  font-variant-numeric: tabular-nums;
  color: var(--tf-text);
  display: flex; align-items: baseline; gap: 2px;
}
.tf-stat__suffix { color: var(--tf-accent); font-size: .55em; font-weight: 550; }
.tf-stat__label { font-size: var(--fs-sm); color: var(--tf-muted); max-width: 30ch; }

/* ---- 6.8 Record table (credentials, comparisons) ----------------------- */

.tf-records { display: flex; flex-direction: column; }
.tf-record {
  display: grid;
  grid-template-columns: 5.5rem minmax(0,1fr) auto;
  align-items: center;
  gap: var(--sp-5);
  padding: var(--sp-5) 0;
  border-top: 1px solid var(--tf-line);
  transition: background-color var(--dur-base) var(--ease-soft),
              padding-inline var(--dur-base) var(--ease-out);
}
.tf-record:last-child { border-bottom: 1px solid var(--tf-line); }
.tf-record:hover { background: var(--tf-accent-veil); padding-inline: var(--sp-4); }
.tf-record__key { font-family: var(--tf-font-mono); font-size: var(--fs-label); letter-spacing: var(--ls-label); color: var(--tf-muted); }
.tf-record__val { font-size: var(--fs-h4); font-weight: 550; letter-spacing: -0.02em; }
.tf-record__meta { font-size: var(--fs-sm); color: var(--tf-muted); text-align: right; }

/* ---- 6.9 Accordion (FAQ) ---------------------------------------------- */

.tf-acc { border-top: 1px solid var(--tf-line); }
.tf-acc__item { border-bottom: 1px solid var(--tf-line); }
.tf-acc__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-5);
  width: 100%; text-align: left;
  padding: var(--sp-6) 0;
  font-size: var(--fs-h4);
  font-weight: 550;
  letter-spacing: -0.02em;
  color: var(--tf-text);
  transition: color var(--dur-base) var(--ease-out);
}
.tf-acc__head:hover { color: var(--tf-accent); }
.tf-acc__sign { position: relative; width: 16px; height: 16px; flex: none; }
.tf-acc__sign::before, .tf-acc__sign::after {
  content: ""; position: absolute; inset: 50% 0 auto 0;
  height: 1.5px; background: currentColor;
  transition: transform var(--dur-base) var(--ease-out);
}
.tf-acc__sign::after { transform: rotate(90deg); }
.tf-acc__item.is-open .tf-acc__sign::after { transform: rotate(0deg); }
.tf-acc__item.is-open .tf-acc__head { color: var(--tf-accent); }
.tf-acc__panel {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-slow) var(--ease-out);
}
.tf-acc__item.is-open .tf-acc__panel { grid-template-rows: 1fr; }
.tf-acc__inner { overflow: hidden; }
.tf-acc__body { padding-bottom: var(--sp-6); max-width: 68ch; color: var(--tf-text-2); }

/* ---- 6.10 Forms -------------------------------------------------------- */

.tf-field { display: flex; flex-direction: column; gap: var(--sp-2); }
.tf-field__label {
  font-family: var(--tf-font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--tf-muted);
}
.tf-field__req { color: var(--tf-accent); }

.tf-input, .tf-select, .tf-textarea {
  width: 100%;
  padding: 0.9375rem 1.125rem;
  background: var(--tf-surface);
  border: 1px solid var(--tf-line);
  border-radius: var(--r-md);
  color: var(--tf-text);
  font-size: var(--fs-body);
  transition: border-color var(--dur-base) var(--ease-out),
              background-color var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
  appearance: none;
}
.tf-input::placeholder, .tf-textarea::placeholder { color: var(--tf-muted); opacity: .75; }
.tf-input:focus, .tf-select:focus, .tf-textarea:focus {
  outline: none;
  border-color: var(--tf-accent);
  background: var(--tf-surface-2);
  box-shadow: 0 0 0 3px var(--tf-accent-veil);
}
.tf-textarea { min-height: 148px; resize: vertical; line-height: 1.6; }
.tf-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%238A8F94' stroke-width='1.6'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1.125rem center;
  padding-right: 2.75rem;
  cursor: pointer;
}
.tf-select option { background: var(--tf-surface); color: var(--tf-text); }

.tf-check {
  display: flex; align-items: flex-start; gap: var(--sp-3);
  font-size: var(--fs-sm); color: var(--tf-text-2);
  cursor: pointer;
}
.tf-check input { position: absolute; opacity: 0; width: 0; height: 0; }
.tf-check__box {
  width: 20px; height: 20px; flex: none; margin-top: 2px;
  border: 1px solid var(--tf-line);
  border-radius: var(--r-xs);
  background: var(--tf-surface);
  display: grid; place-items: center;
  transition: all var(--dur-fast) var(--ease-out);
}
.tf-check__box::after {
  content: ""; width: 9px; height: 5px;
  border-left: 1.8px solid var(--tf-on-accent);
  border-bottom: 1.8px solid var(--tf-on-accent);
  transform: rotate(-45deg) scale(0);
  transition: transform var(--dur-fast) var(--ease-out);
  margin-top: -2px;
}
.tf-check input:checked + .tf-check__box { background: var(--tf-accent); border-color: var(--tf-accent); }
.tf-check input:checked + .tf-check__box::after { transform: rotate(-45deg) scale(1); }
.tf-check input:focus-visible + .tf-check__box { outline: 2px solid var(--tf-accent); outline-offset: 2px; }

.tf-form__status {
  display: none;
  padding: var(--sp-5);
  border-radius: var(--r-md);
  font-size: var(--fs-sm);
}
.tf-form__status.is-ok   { display: block; background: rgba(107,229,138,.09); border: 1px solid rgba(107,229,138,.35); color: var(--tf-ok); }
.tf-form__status.is-err  { display: block; background: rgba(255,92,77,.09);  border: 1px solid rgba(255,92,77,.35);  color: var(--tf-danger); }

.tf-honeypot { position: absolute; left: -9999px; opacity: 0; pointer-events: none; }

/* ==========================================================================
   7. HEADER & NAVIGATION
   ========================================================================== */

.tf-header {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: var(--z-header);
  height: var(--tf-header-h);
  display: flex; align-items: center;
  transition: background-color var(--dur-base) var(--ease-soft),
              border-color var(--dur-base) var(--ease-soft),
              backdrop-filter var(--dur-base) var(--ease-soft),
              transform var(--dur-slow) var(--ease-out);
  border-bottom: 1px solid transparent;
}
.tf-header.is-stuck {
  background: rgba(255,255,255,.78);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-bottom-color: var(--tf-line);
}
.tf-header.is-hidden { transform: translateY(-100%); }

.tf-header__inner {
  width: 100%; max-width: 1600px; margin-inline: auto;
  padding-inline: var(--tf-gutter);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-6);
}

.tf-nav { display: flex; align-items: center; gap: var(--sp-2); }
.tf-nav__item { position: relative; }
.tf-nav__link {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 0.5rem 0.875rem;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--tf-text-2);
  border-radius: var(--r-pill);
  transition: color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.tf-nav__link:hover, .tf-nav__link[aria-current="page"] { color: var(--tf-text); background: var(--tf-accent-veil); }
.tf-nav__caret { width: 9px; height: 9px; transition: transform var(--dur-fast) var(--ease-out); }
.tf-nav__item:hover .tf-nav__caret { transform: rotate(180deg); }

/* Mega dropdown */
.tf-mega-menu {
  position: absolute; top: calc(100% + 12px); left: 50%;
  transform: translate(-50%, 8px);
  width: min(680px, 88vw);
  padding: var(--sp-4);
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  border: 1px solid var(--tf-line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-lg);
  display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 4px;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out),
              visibility var(--dur-base);
}
/* The 12px offset above leaves a dead strip between the trigger and the panel:
   the pointer leaves .tf-nav__item before it reaches the menu and the whole
   thing closes. This invisible bridge spans the gap so the hover never breaks. */
.tf-mega-menu::before {
  content: "";
  position: absolute;
  left: 0; right: 0;
  /* Exactly the 12px offset, not a pixel more: any taller and the bridge would
     overlay the bottom of the trigger link and swallow clicks on it. */
  top: -12px; height: 12px;
}
.tf-nav__item:hover .tf-mega-menu,
.tf-nav__item:focus-within .tf-mega-menu {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translate(-50%, 0);
}
.tf-mega-menu__link {
  display: flex; gap: var(--sp-3); align-items: flex-start;
  padding: var(--sp-4);
  border-radius: var(--r-md);
  transition: background-color var(--dur-fast) var(--ease-out);
}
.tf-mega-menu__link:hover { background: var(--tf-surface-2); }
.tf-mega-menu__title { font-size: var(--fs-sm); font-weight: 600; color: var(--tf-text); margin-bottom: 2px; }
.tf-mega-menu__desc  { font-size: var(--fs-xs); color: var(--tf-muted); line-height: 1.45; }

/* Burger */
.tf-burger {
  display: none;
  width: 44px; height: 44px;
  border: 1px solid var(--tf-line);
  border-radius: var(--r-pill);
  position: relative;
}
.tf-burger span {
  position: absolute; left: 13px; width: 18px; height: 1.5px;
  background: var(--tf-text);
  transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-fast) linear;
}
.tf-burger span:nth-child(1) { top: 18px; }
.tf-burger span:nth-child(2) { top: 24px; }
.tf-burger.is-open span:nth-child(1) { transform: translateY(3px) rotate(45deg); }
.tf-burger.is-open span:nth-child(2) { transform: translateY(-3px) rotate(-45deg); }

/* Mobile drawer */
.tf-drawer {
  position: fixed; inset: 0;
  z-index: calc(var(--z-header) - 1);
  background: var(--tf-obsidian);
  padding: calc(var(--tf-header-h) + var(--sp-6)) var(--tf-gutter) var(--sp-8);
  display: flex; flex-direction: column; gap: var(--sp-6);
  overflow-y: auto;
  opacity: 0; visibility: hidden;
  transform: translateY(-12px);
  transition: opacity var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out),
              visibility var(--dur-base);
}
.tf-drawer.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
.tf-drawer__link {
  display: flex; align-items: baseline; gap: var(--sp-4);
  padding: var(--sp-4) 0;
  border-bottom: 1px solid var(--tf-line);
  font-size: clamp(1.5rem, 6vw, 2rem);
  font-weight: 550;
  letter-spacing: -0.03em;
}
.tf-drawer__link span { font-family: var(--tf-font-mono); font-size: var(--fs-label); color: var(--tf-muted); }

/* ==========================================================================
   8. FOOTER
   ========================================================================== */

.tf-footer { position: relative; background: var(--tf-void); padding-top: var(--sp-11); overflow: hidden; }
.tf-footer__top { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: var(--sp-8); padding-bottom: var(--sp-10); }
.tf-footer__col h4 {
  font-family: var(--tf-font-mono);
  font-size: var(--fs-label); letter-spacing: var(--ls-label);
  text-transform: uppercase; color: var(--tf-muted);
  font-weight: 500; margin-bottom: var(--sp-5);
}
.tf-footer__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-3); }
.tf-footer__list a { font-size: var(--fs-sm); color: var(--tf-text-2); transition: color var(--dur-fast) var(--ease-out); }
.tf-footer__list a:hover { color: var(--tf-accent); }
.tf-footer__bottom {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-5); flex-wrap: wrap;
  padding: var(--sp-5) 0 var(--sp-7);
  border-top: 1px solid var(--tf-line);
  font-size: var(--fs-xs); color: var(--tf-muted);
}
/* Giant footer wordmark bleeding off both edges */
.tf-footer__wordmark {
  font-size: clamp(4rem, 19vw, 19rem);
  line-height: .78;
  font-weight: 650;
  letter-spacing: -0.06em;
  text-transform: uppercase;
  color: transparent;
  -webkit-text-stroke: 1px var(--tf-line);
  white-space: nowrap;
  text-align: center;
  padding-bottom: var(--sp-4);
  user-select: none;
  pointer-events: none;
}

/* ==========================================================================
   9. MOTION & REVEAL
   ========================================================================== */

/* The hidden start state is gated behind .tf-js, which an inline snippet in
   <head> sets. Without JS — or before it runs — every element is simply
   visible, so the page is never blank. */
.tf-js [data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity var(--dur-cine) var(--ease-out),
              transform var(--dur-cine) var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
.tf-js [data-reveal].is-in { opacity: 1; transform: none; }

.tf-js [data-reveal="fade"]  { transform: none; }
.tf-js [data-reveal="left"]  { transform: translateX(-32px); }
.tf-js [data-reveal="right"] { transform: translateX(32px); }
.tf-js [data-reveal="scale"] { transform: scale(.955); }
.tf-js [data-reveal="clip"]  { opacity: 1; transform: none; clip-path: inset(0 0 100% 0); transition: clip-path var(--dur-cine) var(--ease-out); }
.tf-js [data-reveal="clip"].is-in { clip-path: inset(0 0 0 0); }

/* Line-by-line headline reveal (JS wraps lines in .tf-line > .tf-line__i) */
.tf-line { display: block; overflow: hidden; }
.tf-line__i {
  display: block;
  transform: translateY(105%);
  transition: transform 1000ms var(--ease-out);
  transition-delay: var(--line-delay, 0ms);
}
.is-in .tf-line__i, .tf-lines.is-in .tf-line__i { transform: translateY(0); }

/* Marquee */
.tf-marquee { display: flex; overflow: hidden; user-select: none; gap: var(--marquee-gap, 3rem); }
.tf-marquee__track {
  display: flex; align-items: center; gap: var(--marquee-gap, 3rem);
  flex: none; min-width: 100%;
  animation: tf-marquee var(--marquee-dur, 34s) linear infinite;
}
.tf-marquee:hover .tf-marquee__track { animation-play-state: paused; }
@keyframes tf-marquee { to { transform: translateX(calc(-100% - var(--marquee-gap, 3rem))); } }

/* Overflow wordmark that drifts on scroll (JS sets --drift) */
.tf-overflow-word {
  position: relative;
  font-size: var(--fs-mega);
  line-height: .8;
  font-weight: 650;
  letter-spacing: -0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--tf-accent);
  user-select: none;
  pointer-events: none;
  transform: translate3d(var(--drift, 0px), 0, 0);
  will-change: transform;
}
.tf-overflow-word--left  { margin-left: -6vw; }
.tf-overflow-word--right { margin-right: -8vw; text-align: right; }
.tf-overflow-word--outline { color: transparent; -webkit-text-stroke: 1px var(--tf-line); }

/* Parallax hook (JS sets --py) */
[data-parallax] { transform: translate3d(0, var(--py, 0px), 0); will-change: transform; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  [data-reveal] { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  .tf-line__i { transform: none !important; }
  .tf-grain { animation: none; }
}

/* ==========================================================================
   10. UTILITIES
   ========================================================================== */

/* Section rhythm: plain sections are paper white, .tf-void-section is the
   tinted alternate, .tf-ink-section (= .tf-on-ink) is the rare navy block. */
.tf-void-section { background: var(--tf-canvas); }

.tf-relative { position: relative; }
.tf-overflow-hidden { overflow: hidden; }
.tf-center { text-align: center; }
.tf-center-x { margin-inline: auto; }
.tf-max-50 { max-width: 50ch; }
.tf-max-60 { max-width: 60ch; }
.tf-max-70 { max-width: 70ch; }

.tf-accent  { color: var(--tf-accent); }
.tf-white { color: var(--tf-text); }

.tf-mt-1 { margin-top: var(--sp-1); }   .tf-mt-2  { margin-top: var(--sp-2); }
.tf-mt-3 { margin-top: var(--sp-3); }   .tf-mt-4  { margin-top: var(--sp-4); }
.tf-mt-5 { margin-top: var(--sp-5); }   .tf-mt-6  { margin-top: var(--sp-6); }
.tf-mt-7 { margin-top: var(--sp-7); }   .tf-mt-8  { margin-top: var(--sp-8); }
.tf-mt-9 { margin-top: var(--sp-9); }   .tf-mt-10 { margin-top: var(--sp-10); }
.tf-mt-11 { margin-top: var(--sp-11); }

.tf-mb-1 { margin-bottom: var(--sp-1); }  .tf-mb-2  { margin-bottom: var(--sp-2); }
.tf-mb-3 { margin-bottom: var(--sp-3); }  .tf-mb-4  { margin-bottom: var(--sp-4); }
.tf-mb-5 { margin-bottom: var(--sp-5); }  .tf-mb-6  { margin-bottom: var(--sp-6); }
.tf-mb-7 { margin-bottom: var(--sp-7); }  .tf-mb-8  { margin-bottom: var(--sp-8); }
.tf-mb-9 { margin-bottom: var(--sp-9); }  .tf-mb-10 { margin-bottom: var(--sp-10); }

.tf-sr {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 1200px) {
  .tf-footer__top { grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--sp-7); }
  .tf-cardgrid--4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

@media (max-width: 992px) {
  :root { --tf-header-h: 68px; }
  .tf-nav, .tf-header__cta { display: none; }
  .tf-burger { display: block; }
  .tf-grid--split, .tf-grid--split-even, .tf-grid--2 { grid-template-columns: minmax(0, 1fr); }
  .tf-grid--3, .tf-grid--4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .tf-cardgrid--3 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .tf-chapter { flex-direction: column; align-items: flex-start; gap: var(--sp-3); }
}

@media (max-width: 720px) {
  .tf-grid--3, .tf-grid--4 { grid-template-columns: minmax(0, 1fr); }
  .tf-cardgrid--2, .tf-cardgrid--3, .tf-cardgrid--4 { grid-template-columns: minmax(0,1fr); }
  .tf-footer__top { grid-template-columns: minmax(0,1fr); }
  .tf-record { grid-template-columns: minmax(0,1fr); gap: var(--sp-2); }
  .tf-record__meta { text-align: left; }
  .tf-btn--block-sm { display: flex; width: 100%; justify-content: center; }
}