/* ============================================================================
   Sven Klimpel — Design Tokens & Semantic Styles
   ----------------------------------------------------------------------------
   Single source of truth for color, type, spacing, radius, elevation.
   The font stack prefers the real SF Pro on Apple platforms; on every other
   platform, Inter (Google Fonts variable) is the substitute. The substitution
   nudges baked into this file:
     - display letter-spacing tightened by an extra -0.01em
     - body line-height tightened by 0.03
   ========================================================================== */

:root {
  /* ── Color: Brand & Accent ─────────────────────────────────────────────── */
  --color-primary:           #0066cc;  /* Action Blue — single brand accent */
  --color-primary-focus:     #0071e3;  /* Focus Blue — keyboard outline */
  --color-primary-on-dark:   #2997ff;  /* Sky Link Blue — dark-tile inline links */
  --color-on-primary:        #ffffff;

  /* ── Color: Surface ────────────────────────────────────────────────────── */
  --color-canvas:            #ffffff;
  --color-canvas-parchment:  #f5f5f7;  /* signature off-white */
  --color-surface-pearl:     #fafafc;  /* ghost button fill */
  --color-surface-tile-1:    #272729;
  --color-surface-tile-2:    #2a2a2c;
  --color-surface-tile-3:    #252527;
  --color-surface-black:     #000000;  /* nav, video chrome */
  --color-surface-chip:      rgba(210, 210, 215, 0.64);

  /* ── Color: Text ───────────────────────────────────────────────────────── */
  --color-ink:               #1d1d1f;
  --color-body:              #1d1d1f;
  --color-body-on-dark:      #ffffff;
  --color-body-muted:        #cccccc;
  --color-ink-muted-80:      #333333;
  --color-ink-muted-48:      #7a7a7a;

  /* ── Color: Hairlines & Borders ────────────────────────────────────────── */
  --color-divider-soft:      #f0f0f0;
  --color-divider-rgba:      rgba(0, 0, 0, 0.04);
  --color-hairline:          #e0e0e0;
  --color-hairline-rgba:     rgba(0, 0, 0, 0.08);

  /* ── Font families ─────────────────────────────────────────────────────── */
  --font-display: "SF Pro Display", system-ui, -apple-system, BlinkMacSystemFont, "Inter", sans-serif;
  --font-text:    "SF Pro Text",    system-ui, -apple-system, BlinkMacSystemFont, "Inter", sans-serif;

  /* ── Type scale (size / weight / line-height / letter-spacing) ─────────── */
  --type-hero-display-size:   56px;
  --type-hero-display-weight: 600;
  --type-hero-display-lh:     1.07;
  --type-hero-display-ls:     -0.28px;

  --type-display-lg-size:   40px;
  --type-display-lg-weight: 600;
  --type-display-lg-lh:     1.10;
  --type-display-lg-ls:     0;

  --type-display-md-size:   34px;
  --type-display-md-weight: 600;
  --type-display-md-lh:     1.47;
  --type-display-md-ls:     -0.374px;

  --type-lead-size:   28px;
  --type-lead-weight: 400;
  --type-lead-lh:     1.14;
  --type-lead-ls:     0.196px;

  --type-lead-airy-size:   24px;
  --type-lead-airy-weight: 300;  /* the rare 300 */
  --type-lead-airy-lh:     1.5;
  --type-lead-airy-ls:     0;

  --type-tagline-size:   21px;
  --type-tagline-weight: 600;
  --type-tagline-lh:     1.19;
  --type-tagline-ls:     0.231px;

  --type-body-strong-size:   17px;
  --type-body-strong-weight: 600;
  --type-body-strong-lh:     1.24;
  --type-body-strong-ls:     -0.374px;

  --type-body-size:   17px;
  --type-body-weight: 400;
  --type-body-lh:     1.47;
  --type-body-ls:     -0.374px;

  --type-dense-link-size:   17px;
  --type-dense-link-weight: 400;
  --type-dense-link-lh:     2.41;  /* footer dense columns */
  --type-dense-link-ls:     0;

  --type-caption-size:   14px;
  --type-caption-weight: 400;
  --type-caption-lh:     1.43;
  --type-caption-ls:     -0.224px;

  --type-caption-strong-size:   14px;
  --type-caption-strong-weight: 600;
  --type-caption-strong-lh:     1.29;
  --type-caption-strong-ls:     -0.224px;

  --type-button-large-size:   18px;
  --type-button-large-weight: 300;  /* rare 300 */
  --type-button-large-lh:     1.0;
  --type-button-large-ls:     0;

  --type-button-utility-size:   14px;
  --type-button-utility-weight: 400;
  --type-button-utility-lh:     1.29;
  --type-button-utility-ls:     -0.224px;

  --type-fine-print-size:   12px;
  --type-fine-print-weight: 400;
  --type-fine-print-lh:     1.0;
  --type-fine-print-ls:     -0.12px;

  --type-micro-legal-size:   10px;
  --type-micro-legal-weight: 400;
  --type-micro-legal-lh:     1.3;
  --type-micro-legal-ls:     -0.08px;

  --type-nav-link-size:   12px;
  --type-nav-link-weight: 400;
  --type-nav-link-lh:     1.0;
  --type-nav-link-ls:     -0.12px;

  /* ── Spacing — base 8 ──────────────────────────────────────────────────── */
  --space-xxs:     4px;
  --space-xs:      8px;
  --space-sm:     12px;
  --space-md:     17px;
  --space-lg:     24px;
  --space-xl:     32px;
  --space-xxl:    48px;
  --space-section: 80px;

  /* ── Radius ────────────────────────────────────────────────────────────── */
  --radius-none: 0;
  --radius-xs:   5px;
  --radius-sm:   8px;
  --radius-md:  11px;
  --radius-lg:  18px;
  --radius-pill: 9999px;
  --radius-full: 50%;

  /* ── Elevation — exactly one drop-shadow in the system ─────────────────── */
  --shadow-product: rgba(0, 0, 0, 0.22) 3px 5px 30px 0;

  /* ── Backdrop blur recipe ──────────────────────────────────────────────── */
  --backdrop-frost: saturate(180%) blur(20px);

  /* ── Containers ────────────────────────────────────────────────────────── */
  --container-max:       1440px;
  --container-text:       980px;

  /* ── Motion ────────────────────────────────────────────────────────────── */
  --press-scale: 0.95;
  --press-ease:  cubic-bezier(0.4, 0, 0.6, 1);
}

/* ============================================================================
   Base + semantic classes
   ========================================================================== */

html, body {
  margin: 0;
  background: var(--color-canvas);
  color: var(--color-ink);
  font-family: var(--font-text);
  font-size: var(--type-body-size);
  line-height: var(--type-body-lh);
  letter-spacing: var(--type-body-ls);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Typography semantic classes ------------------------------------------------ */
.t-hero        { font-family: var(--font-display); font-size: var(--type-hero-display-size); font-weight: var(--type-hero-display-weight); line-height: var(--type-hero-display-lh); letter-spacing: var(--type-hero-display-ls); }
.t-display-lg  { font-family: var(--font-display); font-size: var(--type-display-lg-size);  font-weight: var(--type-display-lg-weight);  line-height: var(--type-display-lg-lh);  letter-spacing: var(--type-display-lg-ls); }
.t-display-md  { font-family: var(--font-text);    font-size: var(--type-display-md-size);  font-weight: var(--type-display-md-weight);  line-height: var(--type-display-md-lh);  letter-spacing: var(--type-display-md-ls); }
.t-lead        { font-family: var(--font-display); font-size: var(--type-lead-size);        font-weight: var(--type-lead-weight);        line-height: var(--type-lead-lh);        letter-spacing: var(--type-lead-ls); }
.t-lead-airy   { font-family: var(--font-display); font-size: var(--type-lead-airy-size);   font-weight: var(--type-lead-airy-weight);   line-height: var(--type-lead-airy-lh);   letter-spacing: var(--type-lead-airy-ls); }
.t-tagline     { font-family: var(--font-display); font-size: var(--type-tagline-size);     font-weight: var(--type-tagline-weight);     line-height: var(--type-tagline-lh);     letter-spacing: var(--type-tagline-ls); }
.t-body        { font-family: var(--font-text);    font-size: var(--type-body-size);        font-weight: var(--type-body-weight);        line-height: var(--type-body-lh);        letter-spacing: var(--type-body-ls); }
.t-body-strong { font-family: var(--font-text);    font-size: var(--type-body-strong-size); font-weight: var(--type-body-strong-weight); line-height: var(--type-body-strong-lh); letter-spacing: var(--type-body-strong-ls); }
.t-dense-link  { font-family: var(--font-text);    font-size: var(--type-dense-link-size);  font-weight: var(--type-dense-link-weight);  line-height: var(--type-dense-link-lh);  letter-spacing: var(--type-dense-link-ls); }
.t-caption     { font-family: var(--font-text);    font-size: var(--type-caption-size);     font-weight: var(--type-caption-weight);     line-height: var(--type-caption-lh);     letter-spacing: var(--type-caption-ls); }
.t-caption-strong { font-family: var(--font-text); font-size: var(--type-caption-strong-size); font-weight: var(--type-caption-strong-weight); line-height: var(--type-caption-strong-lh); letter-spacing: var(--type-caption-strong-ls); }
.t-button-large { font-family: var(--font-display); font-size: var(--type-button-large-size); font-weight: var(--type-button-large-weight); line-height: var(--type-button-large-lh); letter-spacing: var(--type-button-large-ls); }
.t-button-util { font-family: var(--font-text);    font-size: var(--type-button-utility-size); font-weight: var(--type-button-utility-weight); line-height: var(--type-button-utility-lh); letter-spacing: var(--type-button-utility-ls); }
.t-fine        { font-family: var(--font-text);    font-size: var(--type-fine-print-size);   font-weight: var(--type-fine-print-weight);   line-height: var(--type-fine-print-lh);   letter-spacing: var(--type-fine-print-ls); }
.t-micro       { font-family: var(--font-text);    font-size: var(--type-micro-legal-size);  font-weight: var(--type-micro-legal-weight);  line-height: var(--type-micro-legal-lh);  letter-spacing: var(--type-micro-legal-ls); }
.t-nav         { font-family: var(--font-text);    font-size: var(--type-nav-link-size);     font-weight: var(--type-nav-link-weight);     line-height: var(--type-nav-link-lh);     letter-spacing: var(--type-nav-link-ls); }

/* Default heading semantics (use the same ladder) -------------------------- */
h1, .h1 { font-family: var(--font-display); font-size: var(--type-hero-display-size); font-weight: 600; line-height: var(--type-hero-display-lh); letter-spacing: var(--type-hero-display-ls); margin: 0; }
h2, .h2 { font-family: var(--font-display); font-size: var(--type-display-lg-size);   font-weight: 600; line-height: var(--type-display-lg-lh);   letter-spacing: var(--type-display-lg-ls); margin: 0; }
h3, .h3 { font-family: var(--font-display); font-size: var(--type-tagline-size);      font-weight: 600; line-height: var(--type-tagline-lh);      letter-spacing: var(--type-tagline-ls); margin: 0; }
p,  .p  { font-family: var(--font-text);    font-size: var(--type-body-size);         font-weight: 400; line-height: var(--type-body-lh);         letter-spacing: var(--type-body-ls); margin: 0 0 var(--space-md) 0; }
strong  { font-weight: 600; }

a, .text-link {
  color: var(--color-primary);
  text-decoration: none;
}
a:hover, .text-link:hover { text-decoration: underline; }

.text-link-on-dark { color: var(--color-primary-on-dark); }

/* ============================================================================
   Components
   ========================================================================== */

/* Buttons ------------------------------------------------------------------- */
.btn-primary,
.btn-secondary-pill,
.btn-dark-utility,
.btn-pearl-capsule,
.btn-store-hero {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  cursor: pointer;
  transition: transform 120ms var(--press-ease), background-color 120ms ease, color 120ms ease;
  -webkit-tap-highlight-color: transparent;
}
.btn-primary:active,
.btn-secondary-pill:active,
.btn-dark-utility:active,
.btn-pearl-capsule:active,
.btn-store-hero:active { transform: scale(var(--press-scale)); }

.btn-primary {
  background: var(--color-primary);
  color: var(--color-on-primary);
  font-family: var(--font-text);
  font-size: var(--type-body-size);
  font-weight: 400;
  letter-spacing: var(--type-body-ls);
  border-radius: var(--radius-pill);
  padding: 11px 22px;
  min-height: 44px;
}
.btn-primary:focus-visible {
  outline: 2px solid var(--color-primary-focus);
  outline-offset: 4px;
}

.btn-secondary-pill {
  background: transparent;
  color: var(--color-primary);
  border: 1px solid var(--color-primary);
  font-family: var(--font-text);
  font-size: var(--type-body-size);
  font-weight: 400;
  border-radius: var(--radius-pill);
  padding: 10px 21px;
  min-height: 44px;
}

.btn-dark-utility {
  background: var(--color-ink);
  color: var(--color-on-primary);
  font-family: var(--font-text);
  font-size: var(--type-button-utility-size);
  letter-spacing: var(--type-button-utility-ls);
  border-radius: var(--radius-sm);
  padding: 8px 15px;
}

.btn-pearl-capsule {
  background: var(--color-surface-pearl);
  color: var(--color-ink-muted-80);
  border: 3px solid var(--color-divider-soft);
  font-family: var(--font-text);
  font-size: var(--type-caption-size);
  border-radius: var(--radius-md);
  padding: 8px 14px;
}

.btn-store-hero {
  background: var(--color-primary);
  color: var(--color-on-primary);
  font-family: var(--font-display);
  font-size: var(--type-button-large-size);
  font-weight: var(--type-button-large-weight);
  border-radius: var(--radius-pill);
  padding: 14px 28px;
}

.btn-icon-circular {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  cursor: pointer;
  background: var(--color-surface-chip);
  color: var(--color-ink);
  border-radius: var(--radius-full);
  transition: transform 120ms var(--press-ease);
}
.btn-icon-circular:active { transform: scale(var(--press-scale)); }

/* Cards & tiles ------------------------------------------------------------- */
.product-tile {
  padding: var(--space-section) var(--space-xl);
  text-align: center;
  border-radius: var(--radius-none);
}
.product-tile-light     { background: var(--color-canvas);            color: var(--color-ink); }
.product-tile-parchment { background: var(--color-canvas-parchment);  color: var(--color-ink); }
.product-tile-dark      { background: var(--color-surface-tile-1);    color: var(--color-body-on-dark); }
.product-tile-dark-2    { background: var(--color-surface-tile-2);    color: var(--color-body-on-dark); }
.product-tile-dark-3    { background: var(--color-surface-tile-3);    color: var(--color-body-on-dark); }

.product-shadow { box-shadow: var(--shadow-product); }

.store-utility-card {
  background: var(--color-canvas);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
}

.configurator-chip {
  background: var(--color-canvas);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-pill);
  padding: 12px 16px;
  font-family: var(--font-text);
  font-size: var(--type-caption-size);
  color: var(--color-ink);
  cursor: pointer;
  transition: transform 120ms var(--press-ease), border-color 120ms ease;
}
.configurator-chip:active { transform: scale(var(--press-scale)); }
.configurator-chip-selected { border: 2px solid var(--color-primary-focus); padding: 11px 15px; }

/* Nav bars ------------------------------------------------------------------ */
.global-nav {
  background: var(--color-surface-black);
  color: var(--color-on-primary);
  height: 44px;
  display: flex;
  align-items: center;
  padding: 0 var(--space-lg);
  font-family: var(--font-text);
  font-size: var(--type-nav-link-size);
  letter-spacing: var(--type-nav-link-ls);
}

.sub-nav-frosted {
  background: color-mix(in srgb, var(--color-canvas-parchment) 80%, transparent);
  backdrop-filter: var(--backdrop-frost);
  -webkit-backdrop-filter: var(--backdrop-frost);
  height: 52px;
  display: flex;
  align-items: center;
  padding: 0 var(--space-lg);
  border-bottom: 1px solid var(--color-hairline-rgba);
}

.floating-sticky-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 64px;
  background: color-mix(in srgb, var(--color-canvas-parchment) 80%, transparent);
  backdrop-filter: var(--backdrop-frost);
  -webkit-backdrop-filter: var(--backdrop-frost);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 32px;
  border-top: 1px solid var(--color-hairline-rgba);
}

/* Search input -------------------------------------------------------------- */
.search-input {
  background: var(--color-canvas);
  color: var(--color-ink);
  font-family: var(--font-text);
  font-size: var(--type-body-size);
  border: 1px solid var(--color-hairline-rgba);
  border-radius: var(--radius-pill);
  padding: 12px 20px;
  height: 44px;
  box-sizing: border-box;
  outline: none;
}
.search-input:focus { border-color: var(--color-primary-focus); }

/* Footer -------------------------------------------------------------------- */
.footer {
  background: var(--color-canvas-parchment);
  color: var(--color-ink-muted-80);
  padding: 64px var(--space-lg);
  font-family: var(--font-text);
  font-size: var(--type-dense-link-size);
  line-height: var(--type-dense-link-lh);
}
.footer .col-head {
  font-size: var(--type-caption-strong-size);
  font-weight: var(--type-caption-strong-weight);
  line-height: var(--type-caption-strong-lh);
  letter-spacing: var(--type-caption-strong-ls);
  color: var(--color-ink);
  margin-bottom: var(--space-sm);
}
.footer .legal {
  font-size: var(--type-fine-print-size);
  line-height: var(--type-fine-print-lh);
  letter-spacing: var(--type-fine-print-ls);
  color: var(--color-ink-muted-48);
  margin-top: var(--space-xxl);
}

/* ============================================================================
   Sven Klimpel Portfolio — page styles
   Built on design/colors_and_type.css tokens.
   ========================================================================== */

/* ── DARK THEME: token overrides ─────────────────────────────────────────── */
:root {
  --color-canvas-parchment: #08080a;            /* page background */
  --color-canvas:           #141417;            /* card surface */
  --color-ink:              #f3f1f8;            /* primary text (light) */
  --color-body:             #f3f1f8;
  --color-ink-muted-80:     #b6b3c2;
  --color-ink-muted-48:     #817e90;
  --color-hairline:         rgba(255,255,255,0.10);
  --color-divider-soft:     rgba(255,255,255,0.08);
  --color-primary:          #c7c9cf;            /* silver accent */
  --color-primary-focus:    #e2e4e9;
  --color-primary-deep:     #9a9ca4;            /* filled-button silver */
  --color-on-primary:       #14141a;
}

/* Entrance animations ----------------------------------------------------- */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes blurIn {
  from { opacity: 0; filter: blur(8px); transform: translateY(16px); }
  to   { opacity: 1; filter: blur(0);  transform: translateY(0); }
}

.topbar       { animation: fadeIn 700ms ease-out both; }

.hero h1      { animation: blurIn 1100ms cubic-bezier(0.2, 0.7, 0.2, 1) both; animation-delay: 80ms; }
.hero-lede    { animation: fadeUp 800ms cubic-bezier(0.2,0.7,0.2,1) both; animation-delay: 320ms; }
.hero-actions { animation: fadeUp 800ms cubic-bezier(0.2,0.7,0.2,1) both; animation-delay: 420ms; }
.hero-visual  { animation: fadeUp 900ms cubic-bezier(0.2,0.7,0.2,1) both; animation-delay: 540ms; }
.cta-row      { animation: fadeUp 800ms cubic-bezier(0.2, 0.7, 0.2, 1) both; animation-delay: 480ms; }

.bento .card  { animation: fadeUp 800ms cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.bento .card:nth-child(1) { animation-delay: 360ms; }
.bento .card:nth-child(2) { animation-delay: 460ms; }
.bento .card:nth-child(3) { animation-delay: 560ms; }
.bento .card:nth-child(4) { animation-delay: 640ms; }
.bento .card:nth-child(5) { animation-delay: 720ms; }
.bento .card:nth-child(6) { animation-delay: 800ms; }
.bento .card:nth-child(7) { animation-delay: 880ms; }

.site-footer  { animation: fadeIn 700ms ease-out both; animation-delay: 950ms; }

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  .topbar, .hero h1, .cta-row, .bento .card, .site-footer { animation: none !important; }
}

html, body { background: var(--color-canvas-parchment); }
body {
  background:
    radial-gradient(1100px 620px at 8% -12%, #24242a 0%, transparent 58%),
    radial-gradient(1000px 560px at 112% 6%, #1c1c22 0%, transparent 55%),
    radial-gradient(900px 700px at 50% 120%, #17171c 0%, transparent 60%),
    var(--color-canvas-parchment);
  background-attachment: fixed;
  min-height: 100vh;
}

* { box-sizing: border-box; }

button { font: inherit; }

/* Layout container --------------------------------------------------------- */
.page {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px 80px;
}

/* Top bar ------------------------------------------------------------------ */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 0 56px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 14px;
}
.brand-logo {
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
}
.brand-logo-img {
  height: 30px;
  width: auto;
  display: block;
  margin: -8px 0;
}
.brand-email {
  font-family: var(--font-text);
  font-size: 16px;
  font-weight: 500;
  color: var(--color-ink);
  text-decoration: none;
  border-bottom: 1.5px solid var(--color-ink);
  padding-bottom: 2px;
  letter-spacing: -0.2px;
}
.brand-email:hover { text-decoration: none; }
.menu-btn {
  width: 48px; height: 48px;
  border-radius: 999px;
  background: var(--color-canvas);
  border: 1px solid var(--color-hairline);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  color: var(--color-ink);
  transition: transform 120ms var(--press-ease);
}
.menu-btn:active { transform: scale(var(--press-scale)); }

/* Hero --------------------------------------------------------------------- */
.hero {
  margin: 0 0 56px;
}
.hero h1 {
  font-family: var(--font-display);
  font-size: clamp(40px, 6.4vw, 88px);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.03em;
  color: var(--color-ink);
  margin: 0;
  max-width: 1100px;
}
.hero h1 .muted {
  color: #6f6c7e;
  font-weight: 700;
}
.hero h1 .accent {
  background: linear-gradient(115deg, #8a8c93 0%, #f4f5f7 22%, #b9bbc2 42%, #ffffff 58%, #9799a1 78%, #e6e7eb 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 700;
  animation: silverShine 7s ease-in-out infinite;
}
.portrait-chip {
  display: inline-block;
  vertical-align: middle;
  width: clamp(56px, 9vw, 110px);
  height: clamp(56px, 9vw, 110px);
  border-radius: 28px;
  overflow: hidden;
  margin: 0 8px;
  transform: translateY(-6px);
  box-shadow: 0 4px 18px rgba(0,0,0,0.12);
}
.portrait-chip image-slot {
  width: 100%; height: 100%;
  display: block;
  --slot-radius: 28px;
}

/* Status pill (Open to work) ---------------------------------------------- */
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 18px 9px 14px;
  border-radius: 9999px;
  background: var(--color-canvas);
  border: 1px solid var(--color-hairline);
  font-family: var(--font-text);
  font-size: 17px;
  font-weight: 500;
  color: var(--color-ink);
  vertical-align: middle;
  margin: 0 6px;
  letter-spacing: -0.2px;
}
.status-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: #eab308;
  position: relative;
}
.status-dot::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: #eab308;
  opacity: 0.35;
  animation: pulse 1.8s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { transform: scale(1);   opacity: 0.35; }
  50%      { transform: scale(1.4); opacity: 0;    }
}

/* CTA row ------------------------------------------------------------------ */
.cta-row {
  display: flex;
  align-items: center;
  gap: 28px;
  margin-top: 40px;
  flex-wrap: wrap;
}
.cta-dark {
  background: linear-gradient(135deg, #f4f5f7 0%, #d5d7dc 100%);
  color: #101014;
  border: 0;
  border-radius: 9999px;
  padding: 0 32px;
  height: 60px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-text);
  font-size: 18px;
  font-weight: 500;
  cursor: pointer;
  letter-spacing: -0.2px;
  line-height: 1;
  transition: transform 120ms var(--press-ease), background-color 120ms ease;
}
.cta-dark:hover { background: linear-gradient(135deg, #ffffff 0%, #e2e4e9 100%); }
.cta-dark:active { transform: scale(var(--press-scale)); }
.cta-aside {
  font-family: var(--font-text);
  font-size: 17px;
  color: var(--color-ink-muted-80);
  max-width: 360px;
  line-height: 1.4;
  letter-spacing: -0.2px;
}

/* Clients row --------------------------------------------------------------- */
.clients-row {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-top: 40px;
  flex-wrap: wrap;
}
.clients-label {
  font-family: var(--font-text);
  font-size: 13px;
  font-weight: 500;
  color: var(--color-ink-muted-48);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.client-chip {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 8px 18px 8px 8px;
  border-radius: 9999px;
  background: var(--color-canvas);
  border: 1px solid var(--color-hairline);
  text-decoration: none;
  color: inherit;
  transition: transform 120ms var(--press-ease), border-color 150ms ease;
}
.client-chip:hover {
  text-decoration: none;
  border-color: var(--color-primary-focus);
}
.client-chip:active { transform: scale(var(--press-scale)); }
.client-avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--color-canvas-parchment);
}
.client-avatar image-slot {
  width: 100%; height: 100%;
  display: block;
  --slot-radius: 50%;
}
.client-info {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}
.client-name {
  font-family: var(--font-text);
  font-size: 14px;
  font-weight: 600;
  color: var(--color-ink);
  letter-spacing: -0.15px;
}
.client-meta {
  font-family: var(--font-text);
  font-size: 12px;
  color: var(--color-ink-muted-48);
  letter-spacing: -0.05px;
}
.clients-more {
  font-family: var(--font-text);
  font-size: 14px;
  font-style: italic;
  color: var(--color-ink-muted-48);
}
.stat-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0 28px;
  height: 60px;
  border-radius: 9999px;
  background: var(--color-canvas);
  border: 1px solid var(--color-hairline);
  font-family: var(--font-text);
  line-height: 1;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}
.stat-pill .stat-num {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.2px;
  color: var(--color-ink);
}
.stat-pill .stat-label {
  font-family: var(--font-text);
  font-size: 18px;
  font-weight: 500;
  color: var(--color-ink-muted-80);
  letter-spacing: -0.2px;
  text-transform: none;
}

/* Bento grid --------------------------------------------------------------- */
.bento {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 20px;
  margin-top: 64px;
}
.card {
  background: var(--color-canvas);
  border: 1px solid var(--color-hairline);
  border-radius: 28px;
  padding: 28px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0,0,0,0.4), 0 12px 40px rgba(0,0,0,0.35);
}
.card-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--color-hairline);
  border-radius: 9999px;
  padding: 6px 14px;
  font-family: var(--font-text);
  font-size: 14px;
  font-weight: 500;
  color: var(--color-ink);
  letter-spacing: -0.15px;
}
.card-tag-inset {
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 3;
}

/* Card size variants */
.col-4  { grid-column: span 4; }.col-5  { grid-column: span 5; }
.col-6  { grid-column: span 6; }
.col-7  { grid-column: span 7; }
.col-8  { grid-column: span 8; }
.col-12 { grid-column: span 12; }

.more-works {
  text-align: center;
  font-family: var(--font-display);
  font-size: clamp(20px, 2.2vw, 28px);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--color-ink);
  padding: 8px 24px;
  text-wrap: balance;
}

/* Showreel card ----------------------------------------------------------- */
.reel {
  padding: 0;
  aspect-ratio: 16 / 9;
  background: #000;
}
.reel-thumb {
  position: relative;
  width: 100%; height: 100%;
  cursor: pointer;
  overflow: hidden;
  display: block;
  color: inherit;
  text-decoration: none;
}
.reel-thumb:hover { text-decoration: none; }
.reel-thumb img,
.reel-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 600ms cubic-bezier(0.2, 0, 0, 1);
  background: #000;
  border: 0;
  display: block;
}
.reel-thumb:hover img { transform: scale(1.03); }
.reel-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(0,0,0,0.55) 100%);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 28px 32px;
  color: #fff;
  pointer-events: none;
}
.reel-title {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.4px;
  margin: 0;
}
.reel-sub {
  font-family: var(--font-text);
  font-size: 14px;
  color: rgba(255,255,255,0.7);
  letter-spacing: -0.1px;
  margin-top: 4px;
}
.play-btn {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 1;
  transition: opacity 250ms ease;
}
.play-btn span {
  width: 88px; height: 88px;
  border-radius: 50%;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(10px);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 32px rgba(0,0,0,0.35);
  transition: transform 200ms var(--press-ease);
}
.reel-thumb:hover .play-btn span { transform: scale(1.08); }
.play-btn svg { color: var(--color-ink); margin-left: 6px; }
.reel-tag {
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 3;
  background: rgba(255,255,255,0.18);
  border: 1px solid rgba(255,255,255,0.25);
  color: #fff;
  backdrop-filter: blur(10px);
}
.reel iframe {
  width: 100%; height: 100%;
  border: 0;
}

/* About / bio card -------------------------------------------------------- */
.about {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
}
.about-body {
  font-family: var(--font-text);
  font-size: 17px;
  line-height: 1.42;
  color: var(--color-ink);
  letter-spacing: -0.25px;
  margin: 18px 0 0;
}
.about-foot {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-top: 18px;
  border-top: 1px solid var(--color-divider-soft);
}
.about-foot .label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-ink-muted-48);
}
.about-foot .value {
  font-size: 17px;
  font-weight: 600;
  color: var(--color-ink);
  letter-spacing: -0.3px;
}
.about-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  padding-top: 18px;
  border-top: 1px solid var(--color-divider-soft);
}

/* Tools card -------------------------------------------------------------- */
.tools-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 20px;
}
.tool-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px;
  border-radius: 16px;
  background: rgba(255,255,255,0.04);
}
.tool-icon {
  width: 44px; height: 44px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  color: #fff;
  flex-shrink: 0;
}
.tool-logo {
  width: 48px; height: 48px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid var(--color-hairline);
  display: flex; align-items: center; justify-content: center;
  padding: 6px;
  flex-shrink: 0;
}
.tool-logo img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}
.tool-icon.ae   { background: linear-gradient(135deg, #2A1E5C 0%, #9999FF 100%); }
.tool-icon.ue   { background: #0E0E10; border: 1px solid #232325; }
.tool-icon.c4d  { background: linear-gradient(135deg, #011A6A 0%, #1167F4 100%); }
.tool-icon.ps   { background: linear-gradient(135deg, #001E36 0%, #31A8FF 100%); }
.tool-name {
  font-family: var(--font-text);
  font-size: 16px;
  font-weight: 600;
  color: var(--color-ink);
  letter-spacing: -0.25px;
}
.tool-role {
  font-family: var(--font-text);
  font-size: 13px;
  color: var(--color-ink-muted-48);
  letter-spacing: -0.1px;
}

/* Project cards ---------------------------------------------------------- */
.project {
  padding: 0;
  display: flex;
  flex-direction: column;
  min-height: 480px;
}
.project-media {
  position: relative;
  flex: 1;
  min-height: 280px;
  overflow: hidden;
  display: block;
  cursor: pointer;
  color: inherit;
  text-decoration: none;
}
.project-media:hover { text-decoration: none; }
.project-meta {
  padding: 24px 28px 28px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--color-canvas);
}
.project-meta-toggle {
  width: 100%;
  text-align: left;
  border: none;
  background: var(--color-canvas);
  cursor: pointer;
  font: inherit;
  padding: 24px 28px 28px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: background 150ms ease;
}
.project-meta-toggle:hover { background: rgba(255,255,255,0.03); }
.project-meta-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.project-chevron {
  flex-shrink: 0;
  font-size: 20px;
  line-height: 1;
  color: var(--color-ink-muted-48);
  transform: rotate(180deg);
  transition: transform 220ms var(--press-ease);
  margin-top: 2px;
}
.project-chevron.open { transform: rotate(0deg); }
.project-desc {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 320ms var(--press-ease), opacity 220ms ease, margin-top 320ms var(--press-ease);
}
.project-desc.open {
  max-height: 400px;
  opacity: 1;
  margin-top: 12px;
}
.project-desc p {
  font-family: var(--font-text);
  font-size: 14px;
  line-height: 1.55;
  color: var(--color-ink-muted-80);
  letter-spacing: -0.1px;
}
.project-title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  color: var(--color-ink);
  letter-spacing: -0.4px;
}
.project-sub {
  font-family: var(--font-text);
  font-size: 15px;
  color: var(--color-ink-muted-48);
  letter-spacing: -0.15px;
}
.project-chips {
  display: flex; gap: 8px;
  margin-top: 12px;
  flex-wrap: wrap;
}
.chip-soft {
  background: rgba(255,255,255,0.06);
  border-radius: 9999px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 500;
  color: var(--color-ink-muted-80);
  letter-spacing: -0.1px;
}

/* Falkventures map visual */
.map-visual {
  position: absolute; inset: 0;
  background: #06140d;
  color: #5fb98a;
  overflow: hidden;
}
.map-visual svg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
}
.reel-loop {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  border: 0;
  pointer-events: none;
  background: #000;
  display: block;
}
.map-pin {
  position: absolute;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: #f5f5f7;
  box-shadow: 0 0 0 4px rgba(245,245,247,0.25), 0 4px 12px rgba(0,0,0,0.4);
}
.map-pin.start { top: 28%; left: 24%; }
.map-pin.end   { top: 62%; right: 22%; background: #ff5b3a; box-shadow: 0 0 0 4px rgba(255,91,58,0.3), 0 4px 12px rgba(0,0,0,0.4); }
.map-pin.end::after {
  content: "RIO";
  position: absolute;
  top: -28px; left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-text);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: #ff5b3a;
  font-weight: 600;
}
.map-coords {
  position: absolute;
  bottom: 16px; left: 20px;
  font-family: "Menlo", "SF Mono", monospace;
  font-size: 11px;
  color: rgba(255,255,255,0.85);
  letter-spacing: 0.1em;
  text-shadow: 0 1px 8px rgba(0,0,0,0.6);
  z-index: 2;
}

/* Tua & RIN visual */
.lyric-visual {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 30% 50%, #2a1438 0%, #0a0414 70%);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lyric-word {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(60px, 10vw, 140px);
  letter-spacing: -0.04em;
  color: #fff;
  text-transform: lowercase;
  line-height: 0.9;
  text-shadow: 0 8px 60px rgba(180, 70, 255, 0.5);
  position: relative;
  z-index: 2;
}
.lyric-word::before {
  content: "geld";
  position: absolute;
  inset: 0;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255,255,255,0.25);
  transform: translate(4px, 4px);
  z-index: -1;
}
.lyric-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(180, 70, 255, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(180, 70, 255, 0.08) 1px, transparent 1px);
  background-size: 40px 40px;
  transform: perspective(600px) rotateX(60deg) translateY(40%);
  transform-origin: center bottom;
  opacity: 0.6;
}
.lyric-glow {
  position: absolute;
  bottom: -20%; left: 50%;
  transform: translateX(-50%);
  width: 80%; height: 60%;
  background: radial-gradient(ellipse, rgba(180, 70, 255, 0.4) 0%, transparent 60%);
  filter: blur(40px);
}

/* Process / How I work ---------------------------------------------------- */
.process {
  padding: 28px;
}
.process-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 20px;
}
.step {
  background: rgba(255,255,255,0.04);
  border-radius: 16px;
  padding: 18px;
  cursor: pointer;
  transition: background-color 200ms ease, transform 200ms var(--press-ease);
  border: 1px solid transparent;
  text-align: left;
  font: inherit;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 110px;
}
.step:hover { background: rgba(255,255,255,0.06); }
.step:active { transform: scale(0.985); }
.step.active {
  background: var(--color-primary-deep);
  color: #fff;
  border-color: var(--color-primary-deep);
}
.step-num {
  font-family: var(--font-text);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--color-ink-muted-48);
}
.step.active .step-num { color: rgba(255,255,255,0.6); }
.step-title {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.3px;
  color: var(--color-ink-muted-48);
  transition: color 200ms ease;
}
.step.active .step-title { color: #fff; }
.process-detail {
  margin-top: 22px;
  padding: 22px;
  background: rgba(255,255,255,0.04);
  border-radius: 18px;
  min-height: 96px;
}
.process-detail p {
  margin: 0;
  font-family: var(--font-text);
  font-size: 16px;
  line-height: 1.5;
  color: var(--color-ink);
  letter-spacing: -0.2px;
}

/* Contact ----------------------------------------------------------------- */
.contact-card {
  padding: 40px;
  min-height: 480px;
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 56px;
  position: relative;
  overflow: hidden;
}
.contact-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(115deg, transparent 46%, rgba(199,201,207,0.16) 49.5%, rgba(255,255,255,0.22) 50%, rgba(199,201,207,0.16) 50.5%, transparent 54%);
  background-size: 500% 500%;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: contactSweep 12s linear infinite;
  pointer-events: none;
}
@keyframes contactSweep {
  0% { background-position: 0% 0%; }
  100% { background-position: -300% 0%; }
}
@media (prefers-reduced-motion: reduce) {
  .contact-card::before { animation: none; }
}
.contact-left h2 {
  font-family: var(--font-display);
  font-size: clamp(32px, 3.4vw, 48px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--color-ink);
  margin: 0;
}
.contact-left h2 .accent {
  background: linear-gradient(115deg, #8a8c93 0%, #f4f5f7 22%, #b9bbc2 42%, #ffffff 58%, #9799a1 78%, #e6e7eb 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: silverShine 7s ease-in-out infinite;
}
@keyframes silverShine {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
.contact-left p {
  font-family: var(--font-text);
  font-size: 16px;
  line-height: 1.5;
  color: var(--color-ink-muted-80);
  max-width: 320px;
  margin-top: 18px;
  letter-spacing: -0.2px;
}
.contact-meta {
  margin-top: 32px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.contact-meta-row {
  display: flex; align-items: center; gap: 14px;
  font-family: var(--font-text);
  font-size: 15px;
  color: var(--color-ink);
  letter-spacing: -0.2px;
}
.contact-meta-row svg {
  color: var(--color-ink-muted-48);
  flex-shrink: 0;
}

/* Form -------------------------------------------------------------------- */
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.form-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.form-field.full { grid-column: span 2; }
.form-label {
  font-family: var(--font-text);
  font-size: 13px;
  font-weight: 500;
  color: var(--color-ink-muted-48);
  letter-spacing: -0.1px;
  padding-left: 4px;
}
.req-star { color: var(--color-primary); }
.input, .textarea, .select {
  font-family: var(--font-text);
  font-size: 16px;
  color: var(--color-ink);
  background: rgba(255,255,255,0.05);
  border: 1.5px solid transparent;
  border-radius: 14px;
  padding: 14px 16px;
  outline: none;
  transition: border-color 150ms ease, background-color 150ms ease;
  letter-spacing: -0.2px;
  width: 100%;
}
.input:focus, .textarea:focus, .select:focus {
  border-color: var(--color-primary);
  background: rgba(255,255,255,0.08);
}
.textarea {
  min-height: 110px;
  resize: vertical;
  font-family: var(--font-text);
}
.select {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23f3f1f8' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 18px center;
  padding-right: 44px;
}
.select.placeholder-value { color: var(--color-ink-muted-48); }
.select option { color: var(--color-ink); background: var(--color-canvas); }
.input::placeholder, .textarea::placeholder { color: var(--color-ink-muted-48); opacity: 1; }
.form-submit-row {
  grid-column: span 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 8px;
}
.submit-btn {
  background: linear-gradient(135deg, #f4f5f7 0%, #d5d7dc 100%);
  color: #101014;
  border: 0;
  border-radius: 9999px;
  padding: 16px 28px;
  font-family: var(--font-text);
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 10px;
  letter-spacing: -0.2px;
  transition: transform 120ms var(--press-ease), background-color 120ms ease;
}
.submit-btn:hover { background: linear-gradient(135deg, #ffffff 0%, #e2e4e9 100%); }
.submit-btn:active { transform: scale(var(--press-scale)); }
.submit-btn:disabled {
  background: #6a6a6e;
  cursor: progress;
  transform: none;
}
.form-error {
  color: #c0392b;
  font-weight: 500;
}
.submit-aside {
  font-family: var(--font-text);
  font-size: 13px;
  color: var(--color-ink-muted-48);
  letter-spacing: -0.1px;
}

/* Form sent state */
.form-sent {
  grid-column: span 2;
  background: rgba(255,255,255,0.04);
  border-radius: 16px;
  padding: 32px;
  text-align: center;
  font-family: var(--font-text);
}
.form-sent .check {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--color-primary);
  color: var(--color-on-primary);
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 16px;
}
.form-sent h3 {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  margin: 0 0 6px;
  letter-spacing: -0.4px;
}
.form-sent p {
  font-size: 15px;
  color: var(--color-ink-muted-80);
  margin: 0;
  letter-spacing: -0.2px;
}

/* Footer ------------------------------------------------------------------ */
.site-footer {
  margin-top: 56px;
  padding: 32px 0 0;
  border-top: 1px solid var(--color-hairline);
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
  font-family: var(--font-text);
  font-size: 13px;
  color: var(--color-ink-muted-48);
  letter-spacing: -0.1px;
}
.site-footer .socials {
  display: flex; gap: 8px;
}
.footer-right {
  display: flex;
  align-items: center;
  gap: 20px;
}
.imprint-link {
  background: transparent;
  border: 0;
  font-family: var(--font-text);
  font-size: 13px;
  color: var(--color-ink-muted-48);
  letter-spacing: -0.1px;
  cursor: pointer;
  padding: 4px 0;
  border-bottom: 1px solid transparent;
  transition: color 120ms ease, border-color 120ms ease;
}
.imprint-link:hover {
  color: var(--color-ink);
  border-bottom-color: var(--color-ink);
}

/* Imprint modal */
.imprint-modal {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.4);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 24px;
  animation: fadeIn 200ms ease-out;
}
.imprint-sheet {
  background: var(--color-canvas);
  border-radius: 24px;
  padding: 36px 36px 32px;
  max-width: 420px;
  width: 100%;
  position: relative;
  box-shadow: 0 20px 60px rgba(0,0,0,0.25);
  animation: fadeUp 280ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.privacy-sheet {
  max-width: 560px;
  max-height: 80vh;
  overflow-y: auto;
}
.imprint-sheet h4 {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  margin: 0 0 18px;
  letter-spacing: -0.4px;
  color: var(--color-ink);
}
.imprint-sheet p {
  font-family: var(--font-text);
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-ink);
  letter-spacing: -0.2px;
  margin: 0 0 16px;
}
.imprint-sheet .imprint-contact {
  padding-top: 12px;
  border-top: 1px solid var(--color-divider-soft);
  margin-bottom: 0;
}
.imprint-sheet .imprint-contact a {
  color: var(--color-ink);
  border-bottom: 1px solid var(--color-ink);
  text-decoration: none;
}
.imprint-close {
  position: absolute;
  top: 14px; right: 16px;
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 0;
  background: transparent;
  font-size: 24px;
  line-height: 1;
  color: var(--color-ink-muted-48);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 120ms ease, color 120ms ease;
}
.imprint-close:hover {
  background: var(--color-canvas-parchment);
  color: var(--color-ink);
}
.social-btn {
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid var(--color-hairline);
  background: var(--color-canvas);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  color: var(--color-ink);
  transition: transform 120ms var(--press-ease), background-color 120ms ease;
}
.social-btn:hover { background: var(--color-canvas-parchment); }
.social-btn:active { transform: scale(var(--press-scale)); }

/* Responsive --------------------------------------------------------------- */
@media (max-width: 1000px) {
  .col-4, .col-5, .col-6, .col-7, .col-8 { grid-column: span 12; }
  .col-4.col-md-6 { grid-column: span 6; }
  .contact-card { grid-template-columns: 1fr; gap: 32px; padding: 28px; }
  .process-steps { grid-template-columns: repeat(2, 1fr); }
}
/* ── Projects teaser card (home) ─────────────────────────────────────────── */
.projects-teaser {
  display: block;
  padding: 0;
  aspect-ratio: 16 / 7;
  min-height: 300px;
  position: relative;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
}
.projects-teaser:hover { text-decoration: none; }
.teaser-bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 600ms cubic-bezier(0.2, 0, 0, 1);
  display: block;
}
.projects-teaser:hover .teaser-bg { transform: scale(1.03); }
.teaser-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,0.6) 100%);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  padding: 28px 32px;
  color: #fff;
}
.teaser-title {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.4px;
  margin: 0;
}
.teaser-sub {
  font-family: var(--font-text);
  font-size: 14px;
  color: rgba(255,255,255,0.7);
  letter-spacing: -0.1px;
  margin: 4px 0 0;
}
.teaser-arrow {
  width: 48px; height: 48px;
  flex-shrink: 0;
  border-radius: 50%;
  background: rgba(255,255,255,0.92);
  color: #101014;
  display: inline-flex; align-items: center; justify-content: center;
  transition: transform 200ms var(--press-ease);
}
.projects-teaser:hover .teaser-arrow { transform: translateX(4px); }

/* ── Top nav links ───────────────────────────────────────────────────────── */
.topnav { display: flex; align-items: center; gap: 26px; }
.topnav-link {
  font-family: var(--font-text);
  font-size: 16px;
  font-weight: 500;
  color: var(--color-ink);
  text-decoration: none;
  letter-spacing: -0.2px;
  border-bottom: 1.5px solid transparent;
  padding-bottom: 2px;
  transition: border-color 120ms ease;
}
.topnav-link:hover { text-decoration: none; border-bottom-color: var(--color-ink); }

/* ── Projects subsite ────────────────────────────────────────────────────── */
.projects-head { margin: 4px 0 48px; text-align: center; animation: blurIn 1100ms cubic-bezier(0.2, 0.7, 0.2, 1) both; animation-delay: 80ms; }
.projects-title {
  font-family: var(--font-display);
  font-size: clamp(48px, 7vw, 96px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--color-ink);
  margin: 0;
  background: linear-gradient(115deg, #8a8c93 0%, #f4f5f7 22%, #b9bbc2 42%, #ffffff 58%, #9799a1 78%, #e6e7eb 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: silverShine 7s ease-in-out infinite;
  display: inline-block;
}
.projects-sub {
  font-family: var(--font-text);
  font-size: 18px;
  color: var(--color-ink-muted-80);
  letter-spacing: -0.2px;
  margin: 14px 0 0;
}
.plist {
  display: flex;
  flex-direction: column;
  gap: 28px;
  max-width: 1000px;
  margin: 0 auto;
}
.plist > * { animation: fadeUp 800ms cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.plist > *:nth-child(1) { animation-delay: 300ms; }
.plist > *:nth-child(2) { animation-delay: 420ms; }
.plist > *:nth-child(3) { animation-delay: 540ms; }
.plist > *:nth-child(4) { animation-delay: 640ms; }
.plist > *:nth-child(5) { animation-delay: 720ms; }
@media (prefers-reduced-motion: reduce) {
  .projects-head, .plist > * { animation: none !important; }
}
.ptile { min-height: 0; }
.ptile .project-media {
  flex: none;
  aspect-ratio: 16 / 9;
  min-height: 0;
}
.ptile-reel { aspect-ratio: 16 / 9; }
.ptile-tag {
  background: rgba(255,255,255,0.18);
  border: 1px solid rgba(255,255,255,0.25);
  color: #fff;
  backdrop-filter: blur(8px);
}
.cta-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  padding: 56px 32px;
  border-radius: 28px;
  border: 1.5px dashed var(--color-hairline);
  text-decoration: none;
  color: inherit;
  text-align: center;
  transition: border-color 150ms ease, background-color 150ms ease;
}
.cta-tile:hover {
  text-decoration: none;
  border-color: var(--color-primary-focus);
  background: rgba(255,255,255,0.03);
}
.cta-tile-text {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.4vw, 44px);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--color-ink);
}
.cta-tile-plus { color: var(--color-ink-muted-48); font-weight: 600; margin-right: 4px; }
.plist .more-works { padding-top: 24px; }

@media (max-width: 640px) {
  .projects-sub { font-size: 16px; }
  .cta-tile { padding: 40px 20px; }
  .clients-row { flex-direction: column; align-items: flex-start; gap: 14px; }
  .client-chip { width: 100%; }
  .page { padding: 0 16px 60px; }
  .topbar { padding: 16px 0 32px; }
  .brand-email { font-size: 14px; }
  .cta-aside { font-size: 15px; }
  .form-grid { grid-template-columns: 1fr; }
  .form-field.full, .form-submit-row, .form-sent { grid-column: span 1; }
  .process-steps { grid-template-columns: repeat(2, 1fr); }
  .card { padding: 22px; border-radius: 22px; }
  .reel { border-radius: 22px; }
}

/* ══ Primer-style sectional structure ═════════════════════════════════════ */
.section{padding:104px 0;border-top:1px solid var(--color-divider-soft);scroll-margin-top:104px}
.teaser-title,.teaser-sub{display:block}
.section:first-of-type{border-top:0}
.sec-eyebrow{display:inline-block;font-family:var(--font-text);font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--color-ink-muted-48);margin:0 0 20px}
.sec-title{font-family:var(--font-display);font-size:clamp(28px,3.6vw,52px);font-weight:700;line-height:1.1;letter-spacing:-.028em;color:var(--color-ink);margin:0;max-width:20ch;text-wrap:pretty}
.sec-lede{font-family:var(--font-text);font-size:19px;line-height:1.5;color:var(--color-ink-muted-80);margin:20px 0 0;max-width:60ch;text-wrap:pretty}

/* Buttons */
.btn-primary{display:inline-flex;align-items:center;gap:8px;padding:14px 24px;border-radius:999px;background:var(--color-ink);color:#0b0b0e;font-family:var(--font-text);font-size:16px;font-weight:600;letter-spacing:-.2px;text-decoration:none;border:0;cursor:pointer;transition:transform 140ms var(--press-ease),opacity 140ms ease}
.btn-primary:hover{text-decoration:none;opacity:.88}
.btn-primary:active{transform:scale(.97)}
.btn-sm{padding:10px 18px;font-size:15px}
.btn-ghost{display:inline-flex;align-items:center;gap:8px;padding:14px 24px;border-radius:999px;border:1px solid var(--color-hairline);color:var(--color-ink);font-family:var(--font-text);font-size:16px;font-weight:500;text-decoration:none;transition:border-color 140ms ease,background-color 140ms ease}
.btn-ghost:hover{text-decoration:none;border-color:var(--color-primary-focus);background:rgba(255,255,255,.04)}
.link-arrow{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-text);font-size:16px;font-weight:600;color:var(--color-ink);text-decoration:none;border-bottom:1.5px solid var(--color-hairline);padding-bottom:3px;transition:border-color 140ms ease}
.link-arrow:hover{text-decoration:none;border-bottom-color:var(--color-ink)}

/* Sticky header */
.topbar{position:sticky;top:0;z-index:40;padding:16px 0;background:rgba(8,8,10,.72);backdrop-filter:blur(16px);border-bottom:1px solid var(--color-divider-soft);margin-bottom:56px}
.topnav{display:flex;align-items:center;gap:26px}

/* Hero */
.hero{margin:0 0 8px;padding-bottom:24px}
.hero-lede{font-family:var(--font-text);font-size:20px;line-height:1.5;color:var(--color-ink-muted-80);margin:24px 0 0;max-width:56ch;text-wrap:pretty}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin:34px 0 0}
.hero-visual{display:block;position:relative;margin:56px 0 0;border-radius:24px;overflow:hidden;border:1px solid var(--color-hairline);aspect-ratio:16/7}
.hero-visual img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 700ms cubic-bezier(.2,0,0,1)}
.hero-visual:hover img{transform:scale(1.03)}
.hero-visual-play{position:absolute;inset:0;margin:auto;width:84px;height:84px;border-radius:999px;background:rgba(255,255,255,.92);color:#101014;display:flex;align-items:center;justify-content:center;transition:transform 200ms var(--press-ease)}
.hero-visual:hover .hero-visual-play{transform:scale(1.06)}

/* Trusted band */
.band{padding:36px 0;border-top:1px solid var(--color-divider-soft);border-bottom:1px solid var(--color-divider-soft);display:flex;align-items:center;gap:28px;flex-wrap:wrap}
.trusted-band .clients-row{margin:0;flex:1}

/* Stats */
.stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin:48px 0 0;background:var(--color-divider-soft);border:1px solid var(--color-divider-soft);border-radius:20px;overflow:hidden}
.stat{background:var(--color-canvas);padding:36px 32px}
.stat-value{font-family:var(--font-display);font-size:clamp(36px,4vw,56px);font-weight:700;letter-spacing:-.03em;color:var(--color-ink);line-height:1}
.stat-label{font-family:var(--font-text);font-size:15px;color:var(--color-ink-muted-80);margin-top:10px}

/* Problem */
.problem-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;margin:56px 0 0;background:var(--color-divider-soft);border:1px solid var(--color-divider-soft);border-radius:20px;overflow:hidden}
.problem-item{background:var(--color-canvas);padding:36px 34px 40px}
.problem-num{font-family:var(--font-text);font-size:13px;font-weight:600;letter-spacing:.1em;color:var(--color-ink-muted-48)}
.problem-item h3{font-family:var(--font-display);font-size:22px;font-weight:600;letter-spacing:-.02em;color:var(--color-ink);margin:16px 0 10px;text-wrap:pretty}
.problem-item p{font-family:var(--font-text);font-size:16px;line-height:1.55;color:var(--color-ink-muted-80);margin:0;text-wrap:pretty}

/* Services */
.svc-tabs{display:flex;gap:10px;flex-wrap:wrap;margin:40px 0 24px}
.svc-tab{padding:11px 20px;border-radius:999px;background:transparent;border:1px solid var(--color-hairline);color:var(--color-ink-muted-80);font-family:var(--font-text);font-size:15px;font-weight:500;cursor:pointer;transition:all 140ms ease}
.svc-tab:hover{border-color:var(--color-primary-focus);color:var(--color-ink)}
.svc-tab.active{background:var(--color-ink);color:#0b0b0e;border-color:var(--color-ink);font-weight:600}
.svc-panel{display:grid;grid-template-columns:1fr 1.1fr;gap:32px;align-items:center;background:var(--color-canvas);border:1px solid var(--color-hairline);border-radius:24px;padding:40px;overflow:hidden}
.svc-copy h3{font-family:var(--font-display);font-size:clamp(22px,2.4vw,32px);font-weight:600;letter-spacing:-.024em;color:var(--color-ink);margin:0 0 14px;text-wrap:pretty}
.svc-copy p{font-family:var(--font-text);font-size:17px;line-height:1.55;color:var(--color-ink-muted-80);margin:0 0 24px;text-wrap:pretty}
.svc-list{list-style:none;padding:0;margin:0 0 28px;display:grid;gap:12px}
.svc-list li{display:flex;align-items:center;gap:10px;font-family:var(--font-text);font-size:16px;color:var(--color-ink)}
.svc-list svg{width:18px;height:18px;flex:none;color:var(--color-ink-muted-48)}
.svc-visual{border-radius:16px;overflow:hidden;aspect-ratio:16/10;border:1px solid var(--color-hairline)}
.svc-visual img{width:100%;height:100%;object-fit:cover;display:block}

/* Process section */
.process-split{display:grid;grid-template-columns:1fr 1.2fr;gap:32px;margin:48px 0 0;background:var(--color-canvas);border:1px solid var(--color-hairline);border-radius:24px;padding:36px}
.process-split .process-steps{display:grid;gap:8px;grid-template-columns:1fr}
.process-split .process-detail{display:flex;align-items:center}

/* Projects teaser */
.projects-teaser{margin-top:44px}

/* About */
.about-split{display:grid;grid-template-columns:1.3fr 1fr;gap:48px;align-items:start}
.about-split .sec-title{max-width:26ch}
.about-side p{font-family:var(--font-text);font-size:17px;line-height:1.6;color:var(--color-ink-muted-80);margin:0 0 28px;text-wrap:pretty}

/* Contact section */
.contact-section{padding-bottom:24px}
.contact-section .contact-card{width:100%}

@media (max-width:900px){
  .section{padding:72px 0}
  .stats-grid,.problem-grid,.svc-panel,.process-split,.about-split{grid-template-columns:1fr}
  .svc-panel{padding:28px}
  .hero-visual{aspect-ratio:16/10}
  .topnav{gap:10px}
}

/* ══ LIQUID CHROME BUTTONS ════════════════════════════════════════════════
   Black page. Controls = polished chrome with prismatic edge fringing
   ═════════════════════════════════════════════════════════════════════════ */
:root{
  /* brushed silver fill: bright crown, dark waist, reflected floor + faint prism tint */
  --lm-face:
    linear-gradient(96deg,rgba(120,170,255,.05),transparent 20%,transparent 80%,rgba(255,150,215,.05)),
    linear-gradient(180deg,rgba(255,255,255,.26) 0%,rgba(255,255,255,.12) 18%,rgba(255,255,255,.04) 46%,
      rgba(255,255,255,.02) 58%,rgba(255,255,255,.09) 84%,rgba(255,255,255,.18) 100%),
    linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.02) 48%,rgba(255,255,255,.06));
  --lm-face-hi:
    linear-gradient(96deg,rgba(120,170,255,.08),transparent 20%,transparent 80%,rgba(255,150,215,.08)),
    linear-gradient(180deg,rgba(255,255,255,.4) 0%,rgba(255,255,255,.18) 18%,rgba(255,255,255,.06) 46%,
      rgba(255,255,255,.03) 58%,rgba(255,255,255,.14) 84%,rgba(255,255,255,.3) 100%),
    linear-gradient(180deg,rgba(255,255,255,.15),rgba(255,255,255,.04) 48%,rgba(255,255,255,.11));
  --lm-lift:inset 0 1px 0 rgba(255,255,255,.5),inset 0 -1px 2px rgba(0,0,0,.6),0 10px 26px -12px rgba(0,0,0,.85),
    0 0 14px -2px rgba(226,233,245,.22),0 0 34px -6px rgba(200,214,235,.16);
  --lm-lift-hi:inset 0 1px 0 rgba(255,255,255,.75),inset 0 -1px 3px rgba(0,0,0,.55),0 14px 34px -14px rgba(0,0,0,.9),
    0 0 20px -2px rgba(232,238,248,.34),0 0 48px -6px rgba(205,219,240,.24);
}
.btn-primary,.btn-ghost,.submit-btn,.cta-dark,.chip-soft,.status-pill,.teaser-arrow,.social-btn,.imprint-close{
  position:relative;isolation:isolate;background:var(--lm-face);
  backdrop-filter:blur(26px) saturate(1.5) brightness(1.15);border:0;box-shadow:var(--lm-lift);
  color:#f4f5f8;-webkit-text-fill-color:currentColor;text-shadow:0 1px 1px rgba(0,0,0,.7),0 0 12px rgba(255,255,255,.14);
  transition:box-shadow 220ms ease,background 220ms ease,transform 150ms var(--press-ease)}
/* the chrome rim itself — a 1.5px ring of the prismatic gradient */
.btn-primary::before,.btn-ghost::before,.submit-btn::before,.cta-dark::before,
.chip-soft::before,.status-pill::before,.teaser-arrow::before,.social-btn::before,.imprint-close::before{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;pointer-events:none;z-index:2;
  background:repeating-linear-gradient(112deg,
    #ffffff 0px,#eef0f4 12px,#a8adb6 28px,#63676f 44px,#c3c8d0 62px,
    #ffffff 78px,#e4e7ec 96px,#9298a1 118px,#5f636b 136px,#d5d9e0 156px,#ffffff 180px);
  background-size:auto;
  -webkit-mask:linear-gradient(#000,#000) content-box,linear-gradient(#000,#000);
  mask:linear-gradient(#000,#000) content-box,linear-gradient(#000,#000);
  -webkit-mask-composite:xor;mask-composite:exclude;
  opacity:.92;filter:saturate(0) contrast(1.12) brightness(1.04);
  animation:rimSlide 18s linear infinite}
@keyframes rimSlide{from{background-position:0 0}to{background-position:180px 0}}
@media(prefers-reduced-motion:reduce){
  .btn-primary::before,.btn-ghost::before,.submit-btn::before,.cta-dark::before,.step::before,.svc-tab::before,
    .chip-soft::before,.status-pill::before,.teaser-arrow::before,.social-btn::before,.imprint-close::before{animation:none}
  .step,.step.active{animation:none}
}
/* soft colour bleed just outside the rim = chromatic aberration */
.btn-primary::after,.btn-ghost::after,.submit-btn::after,.cta-dark::after,.teaser-arrow::after{
  content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;z-index:1;
  box-shadow:-1px 0 3px -1px rgba(120,170,255,.22),1px 0 3px -1px rgba(255,150,215,.18),
             0 0 8px -2px rgba(255,255,255,.3);
  opacity:.75;transition:opacity 220ms ease}
.btn-primary:hover,.btn-ghost:hover,.submit-btn:hover,.cta-dark:hover{background:var(--lm-face-hi);box-shadow:var(--lm-lift-hi)}
.btn-primary:hover::before,.btn-ghost:hover::before,.submit-btn:hover::before,.cta-dark:hover::before{opacity:1;filter:saturate(0) contrast(1.34) brightness(1.2);animation-duration:2.6s}
.btn-primary:hover::after,.btn-ghost:hover::after,.submit-btn:hover::after,.cta-dark:hover::after{opacity:1}
.btn-primary:active,.submit-btn:active,.cta-dark:active{transform:scale(.975)}
.submit-btn{border-radius:999px;padding:15px 28px}

.chip-soft::before,.status-pill::before{opacity:.6}
.teaser-arrow{color:#f4f5f7}
.projects-teaser:hover .teaser-arrow{background:var(--lm-face-hi);box-shadow:var(--lm-lift-hi)}
.projects-teaser:hover .teaser-arrow::before{opacity:1;filter:saturate(0) contrast(1.34) brightness(1.2);animation-duration:9s}

/* Process steps: flat, compact, no metal */
.process-split{grid-template-columns:.85fr 1.15fr;align-items:start;padding:28px}
.process-split .process-steps{gap:6px}
.process-split .step{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;text-align:left;gap:12px;width:100%;min-height:0;height:auto;padding:11px 14px;border-radius:12px;
  background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.07);box-shadow:none;backdrop-filter:none;
  color:var(--color-ink-muted-80);text-shadow:none;cursor:pointer;transition:background 140ms ease,border-color 140ms ease}
.process-split .step::before,.process-split .step::after{content:none;display:none}
.process-split .step:hover{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.13)}
.process-split .step.active{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.22);box-shadow:none}
.process-split .step-num{font-family:var(--font-text);font-size:12px;font-weight:600;letter-spacing:.08em;color:var(--color-ink-muted-48)}
.process-split .step.active .step-num{color:#c9ccd3}
.process-split .step-title{font-family:var(--font-text);font-size:15px;font-weight:500;letter-spacing:-.1px}
.process-split .step.active .step-title{color:#fff}
.process-split .process-detail{align-self:start;display:block;padding:14px 18px;border-radius:12px;
  background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07)}
.process-split .process-detail p{font-family:var(--font-text);font-size:15.5px;line-height:1.6;color:var(--color-ink-muted-80);margin:0;text-wrap:pretty}
@media(max-width:900px){.process-split{grid-template-columns:1fr}}

/* Process: scroll-revealed flow, no container box */
.process-flow{display:flex;flex-direction:column;gap:0;margin:44px 0 0;max-width:820px}
.flow-step{display:grid;grid-template-columns:64px 1fr;gap:24px;padding:26px 0;position:relative;
  opacity:0;transform:translateY(22px);filter:blur(6px);
  transition:opacity 700ms cubic-bezier(.2,.7,.2,1),transform 700ms cubic-bezier(.2,.7,.2,1),filter 700ms ease}
.flow-step.revealed{opacity:1;transform:none;filter:none}
.flow-step+.flow-step::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,rgba(255,255,255,.16),rgba(255,255,255,.05) 60%,transparent)}
.flow-num{font-family:var(--font-text);font-size:13px;font-weight:600;letter-spacing:.1em;color:var(--color-ink-muted-48);padding-top:5px}
.flow-title{font-family:var(--font-display);font-size:clamp(20px,2.1vw,26px);font-weight:600;letter-spacing:-.02em;color:var(--color-ink);margin:0 0 8px}
.flow-text{font-family:var(--font-text);font-size:16.5px;line-height:1.6;color:var(--color-ink-muted-80);margin:0;text-wrap:pretty;max-width:62ch}
@media(prefers-reduced-motion:reduce){.flow-step{opacity:1;transform:none;filter:none;transition:none}}
@media(max-width:640px){.flow-step{grid-template-columns:1fr;gap:8px}}

/* Instagram button in the footer: static, no shimmering rim */
.social-btn::before{animation:none}

/* Static-site adjustments (no React) */
.view[hidden]{display:none}
.client-avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block}
.form-sent[hidden]{display:none}
.imprint-modal[hidden]{display:none}

/* project description sits outside the toggle button now */
.card.project>.project-desc{display:block;flex:0 0 auto;padding:0 22px}
.card.project>.project-desc.open{padding-bottom:20px}

/* Trust comparison */
.compare{margin:48px 0 0;max-width:1000px}
.compare-head,.compare-row{display:grid;grid-template-columns:150px 1fr 1fr;gap:24px;align-items:start}
.compare-head{padding-bottom:14px}
.compare-head .compare-col{font-family:var(--font-text);font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase}
.compare-head .compare-them{color:var(--color-ink-muted-48)}
.compare-head .compare-me{color:#fff}
.compare-row{padding:26px 0;position:relative;opacity:0;transform:translateY(20px);filter:blur(6px);transition:opacity 700ms cubic-bezier(.2,.7,.2,1),transform 700ms cubic-bezier(.2,.7,.2,1),filter 700ms ease}
.compare-row.revealed{opacity:1;transform:none;filter:none}
.compare-row::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,rgba(255,255,255,.16),rgba(255,255,255,.05) 60%,transparent)}
.compare-label{font-family:var(--font-text);font-size:14px;font-weight:600;letter-spacing:-.1px;color:var(--color-ink);padding-top:2px}
.compare-col p{font-family:var(--font-text);font-size:16.5px;line-height:1.6;margin:0;text-wrap:pretty}
.compare-them p{color:var(--color-ink-muted-48)}
.compare-me p{color:var(--color-ink)}
.compare-row .compare-me{position:relative;padding-left:18px}
.compare-row .compare-me::before{content:"";position:absolute;left:0;top:4px;bottom:4px;width:2px;border-radius:2px;background:linear-gradient(180deg,rgba(255,255,255,.75),rgba(255,255,255,.15))}
@media(prefers-reduced-motion:reduce){.compare-row{opacity:1;transform:none;filter:none;transition:none}}
@media(max-width:820px){
.compare-head{display:none}
.compare-row{grid-template-columns:1fr;gap:14px}
.compare-them p::before{content:"Random freelancer";display:block;font-size:12px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--color-ink-muted-48);margin-bottom:6px}
.compare-me p::before{content:"Working with me";display:block;font-size:12px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:#fff;margin-bottom:6px}
}

/* Hero: copy left, feathered photo right */
.hero{position:relative;z-index:1}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:32px;align-items:center}
.hero-copy{min-width:0;position:relative;z-index:2}
.hero-photo{position:relative;z-index:0;min-width:0;margin:-70px -4% -60px 0;animation:fadeUp 1100ms cubic-bezier(.2,.7,.2,1) both;animation-delay:260ms}
.hero-photo{overflow:hidden}
.hero-photo img{width:114%;max-width:none;height:auto;display:block;margin-left:-7%;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.04) 6%,rgba(0,0,0,.14) 11%,rgba(0,0,0,.32) 16%,rgba(0,0,0,.56) 21%,rgba(0,0,0,.8) 26%,#000 32%,#000 68%,rgba(0,0,0,.8) 74%,rgba(0,0,0,.56) 79%,rgba(0,0,0,.32) 84%,rgba(0,0,0,.14) 89%,rgba(0,0,0,.04) 94%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.04) 6%,rgba(0,0,0,.14) 11%,rgba(0,0,0,.32) 16%,rgba(0,0,0,.56) 21%,rgba(0,0,0,.8) 26%,#000 32%,#000 68%,rgba(0,0,0,.8) 74%,rgba(0,0,0,.56) 79%,rgba(0,0,0,.32) 84%,rgba(0,0,0,.14) 89%,rgba(0,0,0,.04) 94%,transparent 100%)}
/* trusted-by band floats above the photo, on solid black */
.trusted-band{position:relative;z-index:3;background:#08080a;border-radius:20px}
@media(max-width:900px){
.hero-grid{grid-template-columns:1fr;gap:20px}
.hero-photo{order:-1;max-width:520px;margin:-30px auto -50px}
.hero-photo img{width:100%;margin-left:0}
}

/* Contact form: label-free, rounder, interactive fields */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.contact-card .input,.contact-card .textarea,.contact-card .select{border-radius:18px;padding:17px 20px;font-size:16px;
  transition:box-shadow 480ms cubic-bezier(.22,.61,.36,1),background-color 480ms cubic-bezier(.22,.61,.36,1),transform 520ms cubic-bezier(.22,.61,.36,1),padding 480ms cubic-bezier(.22,.61,.36,1)}
.contact-card .textarea{border-radius:22px;min-height:132px}
.contact-card .input::placeholder,.contact-card .textarea::placeholder{color:var(--color-ink-muted-48)}
.contact-card .input:hover,.contact-card .textarea:hover,.contact-card .select:hover{background:rgba(255,255,255,.06)}
.contact-card .input:focus,.contact-card .textarea:focus,.contact-card .select:focus{
  background:rgba(255,255,255,.08);transform:scale(1.012);padding-left:22px;padding-right:22px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.42),inset 0 2px 6px rgba(0,0,0,.45),0 0 0 4px rgba(255,255,255,.06),0 12px 30px -14px rgba(0,0,0,.9)}
.contact-card .textarea:focus{transform:scale(1.008)}
@media(prefers-reduced-motion:reduce){.contact-card .input:focus,.contact-card .textarea:focus,.contact-card .select:focus{transform:none}}

/* Contact: portrait card, centred */
.contact-section{display:flex;justify-content:center}
.contact-card{display:block;width:100%;max-width:560px;padding:44px 40px}
.contact-card .contact-left{max-width:none;margin-bottom:32px;text-align:center}
.contact-card .contact-left h2{margin:0 auto}
.contact-card .contact-meta{align-items:center;justify-content:center}
.contact-card .form-grid{width:100%;max-width:none;grid-template-columns:1fr}
.contact-card .form-field,.contact-card .form-field.full{grid-column:1/-1}
.contact-card .form-submit-row{flex-direction:column;align-items:stretch;gap:12px;text-align:center}
.contact-card .submit-btn{justify-content:center;width:100%}
@media(max-width:640px){.contact-card{padding:32px 22px}}

/* perf hints */
.flow-step,.compare-row{will-change:opacity,transform,filter}
.flow-step.revealed,.compare-row.revealed{will-change:auto}
.hero-photo img{content-visibility:auto}
#view-projects{contain:layout paint}
.client-avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block}

/* client row: static, centred, no label */
.trusted-band{justify-content:center}
.trusted-band .clients-row{flex:0 1 auto;justify-content:center;margin:0}
.client-chip{pointer-events:none;transition:none}
.client-chip:hover{box-shadow:0 0 0 1px rgba(255,255,255,.22),inset 0 1px 0 rgba(255,255,255,.42),inset 0 -1px 2px rgba(0,0,0,.5)}

.trusted-band .clients-row{gap:38px;row-gap:20px}
@media(max-width:640px){.trusted-band .clients-row{gap:22px}}

.topbar{background:#000;backdrop-filter:none;box-shadow:none;border-bottom:1px solid rgba(255,255,255,.08)}

/* full-bleed black header bar */
.topbar{position:sticky;left:0;right:0;width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);padding-left:max(24px,calc(50vw - 620px));padding-right:max(24px,calc(50vw - 620px))}

/* silver hairline under the header */
.topbar{border-bottom:0;position:sticky}
.topbar::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.10) 8%,rgba(255,255,255,.42) 34%,rgba(255,255,255,.62) 50%,rgba(255,255,255,.42) 66%,rgba(255,255,255,.10) 92%,transparent)}

.brand-home{display:flex;align-items:center;line-height:0}

/* simple contact button on the projects view */
.projects-cta-row{display:flex;justify-content:center;margin:8px 0 0}
/* perf: containment for the offscreen views */
#view-howiwork,#view-projects{contain:layout paint}
.brand-home{display:flex;align-items:center;line-height:0}

/* ── Silver restored (no green) ───────────────────────────────────────────── */
:root{--color-accent:#e8e9ee;--color-accent-dim:rgba(232,233,238,.16)}
.sec-eyebrow{color:var(--color-ink-muted-48)}
.flow-num,.problem-num{color:#d8dae1}
.compare-row .compare-me::before{background:linear-gradient(180deg,rgba(244,245,247,.75),rgba(180,183,192,.2))}
.compare-head .compare-me{color:#f4f5f7}
.status-dot,.status-dot::after{background:#dfe1e7}
.form-sent .check{color:#f4f5f7;border-color:rgba(244,245,247,.18)}
a{color:#e3e4ea}
a:hover{color:#ffffff}
.topnav-link,.brand-home,.client-chip,.project-media,.btn-primary,.btn-sm,.cta-tile{color:inherit}
.topnav-link:hover{color:#ffffff}
.imprint-contact a,.imprint-sheet a{color:#e3e4ea}
.contact-card .input:focus,.contact-card .textarea:focus,.contact-card .select:focus{
  box-shadow:inset 0 0 0 1px rgba(244,245,247,.5),inset 0 2px 6px rgba(0,0,0,.45),0 0 0 4px rgba(232,233,238,.1),0 12px 30px -14px rgba(0,0,0,.9)}
.imprint-link:hover{color:#ffffff}
.hero h1 .dot{color:#c8c8cc}
.chip-soft{box-shadow:inset 0 0 0 1px rgba(232,233,238,.22)}
.project-chevron{color:#d8dae1}
.card-tag,.ptile-tag{color:#e6e7eb;border-color:rgba(232,233,238,.3)}
.more-works{color:var(--color-ink-muted-80)}
.more-works strong{color:#f4f5f7}
.about-stats .label{color:#d8dae1}
.contact-meta-row svg{color:#d8dae1}
.btn-primary:hover svg,.submit-btn:hover svg,.projects-cta-row .btn-primary svg{color:#ffffff}
#cookie-consent-bar #cc-accept{background:rgba(240,241,245,.14)!important;box-shadow:inset 0 0 0 1px rgba(240,241,245,.5)!important;color:#f4f5f7!important}
#cookie-consent-bar .cc-link{color:#e3e4ea!important}
.form-sent h3{color:#f4f5f7}
.submit-aside.form-error{color:#ff8f8f}

/* silver metal tokens */
:root{
  --lm-face:
    linear-gradient(96deg,rgba(255,255,255,.06),transparent 22%,transparent 78%,rgba(255,255,255,.06)),
    linear-gradient(180deg,rgba(255,255,255,.20) 0%,rgba(214,216,222,.11) 18%,rgba(70,72,80,.30) 46%,
      rgba(28,29,34,.42) 58%,rgba(120,123,132,.20) 84%,rgba(240,241,245,.16) 100%),
    linear-gradient(180deg,rgba(58,60,68,.55),rgba(26,27,32,.42) 48%,rgba(58,60,68,.5));
  --lm-face-hi:
    linear-gradient(96deg,rgba(255,255,255,.10),transparent 22%,transparent 78%,rgba(255,255,255,.10)),
    linear-gradient(180deg,rgba(255,255,255,.32) 0%,rgba(226,228,234,.18) 18%,rgba(84,86,95,.34) 46%,
      rgba(34,35,41,.44) 58%,rgba(146,149,158,.26) 84%,rgba(248,249,252,.26) 100%),
    linear-gradient(180deg,rgba(72,74,83,.6),rgba(32,33,39,.44) 48%,rgba(72,74,83,.55));
  --lm-lift:inset 0 1px 0 rgba(255,255,255,.42),inset 0 -1px 2px rgba(0,0,0,.62),0 10px 26px -12px rgba(0,0,0,.85),
    0 0 14px -2px rgba(255,255,255,.16),0 0 34px -6px rgba(150,153,163,.4);
  --lm-lift-hi:inset 0 1px 0 rgba(255,255,255,.66),inset 0 -1px 3px rgba(0,0,0,.55),0 14px 34px -14px rgba(0,0,0,.9),
    0 0 20px -2px rgba(255,255,255,.28),0 0 48px -6px rgba(255,255,255,.18);
}
.btn-primary::after,.btn-ghost::after,.submit-btn::after,.cta-dark::after,.teaser-arrow::after{
  box-shadow:-1px 0 3px -1px rgba(255,255,255,.24),1px 0 3px -1px rgba(60,62,70,.5),0 0 8px -2px rgba(255,255,255,.26)}
.btn-primary,.btn-ghost,.submit-btn,.cta-dark,.chip-soft,.status-pill,.teaser-arrow,.social-btn,.imprint-close{
  color:#f4f5f7;text-shadow:0 1px 1px rgba(0,0,0,.7),0 0 12px rgba(255,255,255,.14)}
.btn-primary:hover,.submit-btn:hover,.btn-sm:hover{box-shadow:var(--lm-lift-hi)}
.projects-title{
  background:linear-gradient(115deg,#8a8c93 0%,#f4f5f7 22%,#b9bbc2 42%,#ffffff 58%,#9799a1 78%,#e6e7eb 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.compare-row::before,.flow-step+.flow-step::before{
  background:linear-gradient(90deg,rgba(255,255,255,.2),rgba(255,255,255,.06) 60%,transparent)}
.topbar::after{background:linear-gradient(90deg,transparent,rgba(255,255,255,.1) 8%,rgba(214,216,222,.4) 34%,rgba(255,255,255,.6) 50%,rgba(214,216,222,.4) 66%,rgba(255,255,255,.1) 92%,transparent)}
.hero h1 .accent,.contact-left h2,.contact-left h2 .accent{background:none;-webkit-background-clip:border-box;background-clip:border-box;color:#FAFAFA;-webkit-text-fill-color:#FAFAFA;animation:none}

/* Project tile with looping video */
.ptile-video{display:block;width:100%;height:auto;border-radius:inherit;object-fit:cover}
.ptile .project-media{position:relative;display:block;border-radius:16px;overflow:hidden}
.project-static-desc{font-family:var(--font-text);font-size:16px;line-height:1.6;color:var(--color-ink-muted-80);margin:14px 0 0;text-wrap:pretty;max-width:70ch}

/* compact project grid: four tiles in the space of one */
.plist{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;align-items:start}
.plist .more-works,.plist .projects-cta-row{grid-column:1/-1}
.ptile{padding:0;overflow:hidden}
.ptile .project-media{border-radius:16px 16px 0 0}
.ptile .project-meta{padding:14px 18px 16px}
.ptile .project-title{font-family:var(--font-display);font-size:18px;font-weight:600;letter-spacing:-.02em;color:var(--color-ink);margin:0}
.ptile-tag{font-size:11px}
@media(max-width:720px){.plist{grid-template-columns:1fr}}

.ptile .project-title-sub{font-family:var(--font-text);font-size:14px;font-weight:400;letter-spacing:-.1px;color:var(--color-ink-muted-48)}

/* buttons: plain outline instead of the travelling metal rim, glow kept */
.btn-primary::before,.btn-ghost::before,.submit-btn::before,.cta-dark::before,
.chip-soft::before,.status-pill::before,.teaser-arrow::before,.social-btn::before,.imprint-close::before{
  background:rgba(248,249,252,.34);animation:none;filter:none;opacity:1}
.btn-primary:hover::before,.btn-ghost:hover::before,.submit-btn:hover::before,.cta-dark:hover::before,
.projects-teaser:hover .teaser-arrow::before{background:rgba(255,255,255,.6);filter:none;animation:none}
.chip-soft::before,.status-pill::before{background:rgba(248,249,252,.22)}

.projects-head{margin:4px 0 72px;overflow:visible}
.projects-title{line-height:1.18;padding-bottom:.12em;display:inline-block}

/* Link Up sits on its own row below the 2x2 grid, shown uncropped */
.ptile[data-screen-label="Link Up"],.ptile[data-screen-label="LHDMedia"]{width:225px;justify-self:start;background:none;box-shadow:none;border:0;padding:0}
.ptile[data-screen-label="Link Up"]{grid-column:1}
.ptile[data-screen-label="LHDMedia"]{grid-column:2;justify-self:start;margin-left:calc(-100% + 225px + 4px)}
.ptile[data-screen-label="Link Up"] .project-media{position:relative;display:block;width:225px;height:400px;aspect-ratio:auto;background:#0b0b0d;border-radius:16px;overflow:hidden;padding:0}
.ptile[data-screen-label="Link Up"] .ptile-video{width:225px;height:400px;object-fit:cover;border-radius:16px;display:block}
.ptile[data-screen-label="Link Up"] .ptile-tag{position:absolute;top:10px;left:10px;z-index:2}
.ptile[data-screen-label="Link Up"]{overflow:visible}
.ptile[data-screen-label="Link Up"] .project-meta{padding:12px 2px 0;overflow:visible}
.ptile[data-screen-label="Link Up"] .project-title{white-space:normal;line-height:1.35;padding-bottom:2px}

/* LHDMedia matches the Link Up portrait card, side by side */
.ptile[data-screen-label="LHDMedia"]{overflow:visible}
.ptile[data-screen-label="LHDMedia"] .project-media{position:relative;display:block;width:225px;height:400px;aspect-ratio:auto;background:#0b0b0d;border-radius:16px;overflow:hidden;padding:0}
.ptile[data-screen-label="LHDMedia"] .ptile-video{width:225px;height:400px;object-fit:cover;border-radius:16px;display:block}
.ptile[data-screen-label="LHDMedia"] .ptile-tag{position:absolute;top:10px;left:10px;z-index:2}
.ptile[data-screen-label="LHDMedia"] .project-meta{padding:12px 2px 0;overflow:visible}
.ptile[data-screen-label="LHDMedia"] .project-title{white-space:normal;line-height:1.35;padding-bottom:2px}

/* empty slot, same footprint as a 16:9 project tile */
.ptile-intro{background:none;box-shadow:none;border:0;padding:0;overflow:visible}
.ptile-intro .project-media{aspect-ratio:16/9;display:grid;place-items:start;background:none;box-shadow:none;border-radius:0;padding:0 12px 8px 2px}
.ptile-intro-text{margin:0;max-width:26ch;font-family:var(--font-display);font-size:clamp(24px,2.4vw,34px);font-weight:500;letter-spacing:-.02em;line-height:1.28;color:var(--color-ink-muted-80);text-align:left;text-wrap:balance}
.ptile-intro-text strong{color:#FAFAFA;font-weight:600}
.ptile-intro-text strong{color:#f4f5f7;font-weight:600}

/* ── Mobile: keep the tabs visible ───────────────────────────────────────── */
@media(max-width:900px){
  .topbar{flex-wrap:wrap;row-gap:10px;padding-top:12px;padding-bottom:10px}
  .brand{flex:0 0 auto}
  .topnav{display:flex;flex:1 1 100%;align-items:center;justify-content:flex-start;gap:8px;
    overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:2px}
  .topnav::-webkit-scrollbar{display:none}
  .topnav .topnav-link{display:inline-flex;align-items:center;flex:0 0 auto;min-height:40px;
    padding:8px 14px;font-size:15px;border-bottom:0;border-radius:999px;
    background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);color:var(--color-ink)}
  .topnav .topnav-link:hover{background:rgba(255,255,255,.1)}
  .topnav .btn-sm{flex:0 0 auto;margin-left:auto;min-height:40px}
}
@media(max-width:560px){
  .brand-logo-img{height:26px}
  .topnav .topnav-link{padding:8px 12px;font-size:14px}
  .topnav .btn-sm{margin-left:6px}
}
/* portrait tiles stack cleanly on narrow screens */
@media(max-width:720px){
  .ptile[data-screen-label="LHDMedia"]{grid-column:1;margin-left:0}
  .ptile[data-screen-label="Link Up"],.ptile[data-screen-label="LHDMedia"]{justify-self:center}
}

/* mobile tabs: always on screen, never clipped */
@media(max-width:900px){
  .topbar{flex-wrap:wrap!important;overflow:visible!important;padding:12px 0 14px!important}
  .topnav{display:flex!important;flex:1 1 100%!important;max-width:100%;overflow-x:auto;overflow-y:hidden}
  .topnav .topnav-link{display:inline-flex!important}
}

@media(max-width:900px){.topbar .brand{display:none}.topnav{flex:1 1 100%}}

/* mobile: clients run past as a looping marquee */
@media(max-width:900px){
  .trusted-band{overflow:hidden}
  .clients-row.clients-marquee{display:flex;flex-wrap:nowrap;justify-content:flex-start;gap:0;width:max-content;
    animation:clientsMarquee 26s linear infinite;will-change:transform}
  .clients-track{display:flex;flex-wrap:nowrap;align-items:center;gap:38px;padding-right:38px;flex:0 0 auto}
  .clients-marquee .client-chip{width:auto;flex:0 0 auto;white-space:nowrap}
}
@keyframes clientsMarquee{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
@media(prefers-reduced-motion:reduce){.clients-row.clients-marquee{animation:none}}

/* marquee structure exists at all widths; only the motion is mobile-only */
.clients-row.clients-marquee{display:flex;flex-wrap:wrap;justify-content:center}
.clients-track{display:contents}
.clients-track-clone{display:none}
@media(max-width:900px){
  .clients-row.clients-marquee{flex-wrap:nowrap;justify-content:flex-start;gap:0;width:max-content}
  .clients-marquee .clients-track{display:flex}
  .clients-marquee .clients-track-clone{display:flex}
}

@media(max-width:900px){
  .trusted-band .clients-row.clients-marquee{flex-direction:row!important;align-items:center;flex-wrap:nowrap!important;gap:0!important;width:max-content;margin:0}
  .clients-marquee .clients-track{flex-direction:row;flex-wrap:nowrap;align-items:center;gap:22px;padding-right:22px}
  .clients-marquee .client-chip{width:auto!important;flex:0 0 auto;white-space:nowrap}
}

/* seamless loop: three identical tracks, shift by exactly one */
@media(max-width:900px){
  .trusted-band{justify-content:flex-start;overflow:hidden}
  .clients-row.clients-marquee{animation:clientsMarquee 30s linear infinite}
}
@keyframes clientsMarquee{from{transform:translate3d(0,0,0)}to{transform:translate3d(-33.3333%,0,0)}}