/* ============ fonts for the hero (embedded) ============ */
  @font-face {
    font-family: "Outfit";
    font-style: normal;
    font-weight: 300 800;
    font-display: swap;
    src: url(/outfit.woff2) format("woff2");
  }
  @font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url(/inter.woff2) format("woff2");
  }

  @font-face {
    font-family: "Eczar";
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url(/eczar.woff2) format("woff2");
  }

  /* ============ site design tokens (original dark+color theme) ============ */
  :root {
    /* brand orange (from the user's logo) */
    --brand-orange-light: #FFB86B;
    --brand-orange: #F5821F;
    --brand-orange-deep: #E8620C;
    --bg: #12141a;
    --surface: #1a1d24;
    --surface-2: #20242d;
    --ink: #eef0f2;
    --ink-muted: #9aa1ab;
    --line: #2b2f38;
    --accent: #e2a63c;
    --accent-strong: #f0ba57;
    --accent-ink: #191307;
    --steel: #6fb6d9;
    --good: #6fcf97;
    --neon: #9d7bff;
    --neon-2: #4fd8ff;

    --font-display: "Bahnschrift", "DIN Alternate", "Arial Narrow", "Segoe UI", sans-serif;
    --font-body: Georgia, "Iowan Old Style", "Palatino Linotype", "Book Antiqua", serif;
    --font-mono: "Cascadia Code", Consolas, "SF Mono", ui-monospace, "Courier New", monospace;

    /* hero-scoped tokens (from the user's design spec) */
    --hs-bg: #030305;
    --hs-text: #FFFFFF;
    --hs-text-2: #d5d5d5;
    --hs-accent: #F5821F;
    --hs-success: #00FF88;
    --hs-glass-bg: rgba(20, 20, 25, 0.4);
    --hs-glass-border: rgba(255, 255, 255, 0.08);
    --hs-accent-gradient: linear-gradient(135deg, #F5821F 0%, #E8620C 100%);
    --hs-accent-gradient-hover: linear-gradient(135deg, #FFA94D 0%, #F5821F 100%);
    --hs-accent-text-gradient: linear-gradient(90deg, #E8620C 0%, #FFB86B 100%);
    --hs-font-primary: "Outfit", system-ui, -apple-system, sans-serif;
    --hs-font-secondary: "Inter", system-ui, -apple-system, sans-serif;

    color-scheme: dark;
  }

  * { box-sizing: border-box; }

  html { scroll-behavior: smooth; }

  body {
    margin: 0;
    position: relative;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
  }

  body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background-image:
      linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
    background-size: 48px 48px;
    -webkit-mask-image: radial-gradient(ellipse 80% 55% at 50% 0%, black, transparent 72%);
    mask-image: radial-gradient(ellipse 80% 55% at 50% 0%, black, transparent 72%);
  }

  body::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background:
      radial-gradient(ellipse 55% 40% at 82% 8%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 60%),
      radial-gradient(ellipse 50% 38% at 8% 30%, color-mix(in srgb, var(--steel) 12%, transparent), transparent 60%),
      radial-gradient(ellipse 60% 30% at 50% 100%, color-mix(in srgb, var(--neon) 10%, transparent), transparent 65%);
  }

  main, footer.site-footer, .hero-section { position: relative; z-index: 1; }

  h1, h2, h3 { text-wrap: balance; margin: 0; font-family: var(--font-display); font-weight: 700; letter-spacing: 0.01em; }

  p { margin: 0; }

  a { color: inherit; }

  .wrap {
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 clamp(1.25rem, 4vw, 2.5rem);
  }

  .eyebrow {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--steel);
  }

  /* ---------- reveal-on-scroll ---------- */
  .reveal { opacity: 0; transform: translateY(18px); transition: opacity 700ms ease, transform 700ms ease; }
  .reveal.is-visible { opacity: 1; transform: translateY(0); }

  /* ---------- mark ---------- */
  .mark { display: block; flex-shrink: 0; }
  .mark circle { fill: none; stroke: currentColor; stroke-width: 2; }
  .mark line { stroke: currentColor; stroke-width: 2; stroke-linecap: square; }
  .mark .center { fill: currentColor; stroke: none; }

  /* scroll-margin keeps a jump-to-section landing clear of the fixed navbar */
  section.page {
    padding-block: clamp(3.5rem, 7vw, 6rem);
    scroll-margin-top: calc(var(--nav-h, 6.5rem) + 1rem);
  }

  /* ============ HERO SECTION (user's design spec, self-contained) ============ */
  .hero-section {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    /* top padding stands in for the now-fixed navbar, so the hero content sits
       exactly where it did and the hero stays 100vh (the video fills the hero,
       so any height change rescales it and misaligns #screenCanvas) */
    padding: var(--nav-h, 6.5rem) 4rem 2rem;
    background: var(--hs-bg);
    color: var(--hs-text);
    font-family: var(--hs-font-primary);
  }

  .video-container {
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    background: var(--hs-bg);
  }
  .video-container video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .video-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(5, 5, 8, 0.95) 0%, rgba(29, 29, 53, 0.182) 40%, rgba(5, 5, 8, 0.4) 100%);
  }
  /* live overlay for the right monitor's 3D viewport in the frozen last frame */
  #screenCanvas {
    position: absolute;
    opacity: 0;
    transition: opacity 1400ms ease;
    border-radius: 3px;
    pointer-events: none;
  }
  #screenCanvas.is-live { opacity: 1; }

  .hero-section .btn, .navbar .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.9rem 2rem;
    border-radius: 8px;
    font-family: var(--hs-font-secondary);
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
  }
  .hero-section .btn-primary, .navbar .btn-primary {
    background: var(--hs-accent-gradient);
    color: #fff;
    box-shadow: 0 8px 24px rgba(245, 130, 31, 0.25);
  }
  .hero-section .btn-primary:hover, .navbar .btn-primary:hover {
    background: var(--hs-accent-gradient-hover);
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(245, 130, 31, 0.4);
  }
  .hero-section .btn-outline, .navbar .btn-outline {
    background: transparent;
    color: var(--hs-text);
    border: 1px solid var(--hs-glass-border);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }
  .hero-section .btn-outline:hover, .navbar .btn-outline:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
  }

  /* ---- navbar ---- */
  .navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* Fixed, and a direct child of <body>: .hero-section, main and .site-footer
       all carry z-index:1, so a nav left inside the hero would be trapped in the
       hero's stacking context and painted underneath main once you scrolled.
       Being fixed it takes no space, so the hero holds its place with a
       padding-top of var(--nav-h), measured from this bar by the script. */
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 60;
    padding: 2rem 4rem;
    border-bottom: 1px solid transparent;
    transition: background 260ms ease, border-color 260ms ease;
  }
  /* only once the visitor has left the hero, so the bar stays invisible over it */
  .navbar.is-stuck {
    background: rgba(8, 8, 13, 0.82);
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    border-bottom-color: var(--hs-glass-border);
  }
  .logo {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-family: "Eczar", Georgia, serif;
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-decoration: none;
    color: var(--hs-text);
  }
  .logo .dot { color: var(--brand-orange); }
  .logo svg {
    width: 1.8rem; height: 1.8rem;
    color: var(--brand-orange);
    filter:
      drop-shadow(0 0 4px color-mix(in srgb, var(--brand-orange) 90%, transparent))
      drop-shadow(0 0 12px color-mix(in srgb, var(--brand-orange) 55%, transparent));
  }
  .logo .mark circle { stroke-width: 2.5; }
  .logo .mark line { stroke-width: 2.5; }

  .nav-links { display: flex; gap: 2.5rem; }
  .nav-links a {
    position: relative;
    font-family: var(--hs-font-secondary);
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--hs-text-2);
    transition: color 0.3s ease;
  }
  .nav-links a:hover, .nav-links a.active { color: var(--hs-text); }
  .nav-links a.active::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: -6px;
    height: 2px;
    background: var(--hs-accent-gradient);
  }
  .nav-actions { display: flex; align-items: center; gap: 1rem; }
  .nav-actions .btn { padding: 0.7rem 1.5rem; font-size: 0.78rem; }
  .nav-side { display: flex; align-items: center; gap: 0.6rem; }

  /* social buttons: same shell as .mobile-menu-toggle so the nav stays one system */
  .social-btn {
    display: grid; place-items: center;
    width: 36px; height: 36px;
    border-radius: 8px;
    border: 1px solid var(--hs-glass-border);
    color: var(--hs-text-2);
    background: transparent;
    transition: color 200ms ease, border-color 200ms ease, background 200ms ease, transform 200ms ease;
  }
  .social-btn svg { width: 17px; height: 17px; display: block; }
  .social-btn:hover {
    color: var(--brand-orange-light);
    border-color: var(--brand-orange);
    background: color-mix(in srgb, var(--brand-orange) 12%, transparent);
    transform: translateY(-1px);
  }
  .social-btn:focus-visible { outline: 2px solid var(--brand-orange-light); outline-offset: 2px; }
  /* below 480px the bar is tight: keep the menu and language switch, drop these
     (they are still in the footer) */
  @media (max-width: 480px) { .nav-side .social-btn { display: none; } }

  .mobile-menu-toggle {
    display: none;
    background: transparent;
    border: 1px solid var(--hs-glass-border);
    border-radius: 8px;
    color: var(--hs-text);
    padding: 0.5rem 0.7rem;
    cursor: pointer;
  }
  .mobile-menu-toggle svg { display: block; width: 1.4rem; height: 1.4rem; }

  /* ---- hero content ---- */
  .hero-content {
    flex: 1;
    display: flex;
    align-items: center;
    padding: 2rem 0;
  }
  .text-wrapper { max-width: 800px; }

  .greeting {
    font-size: 1.1rem;
    font-weight: 500;
    letter-spacing: 2px;
    color: var(--hs-accent);
    text-transform: uppercase;
    margin-bottom: 1rem;
    font-family: var(--hs-font-secondary);
  }
  .main-title {
    font-family: var(--hs-font-primary);
    font-size: 4.5rem;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -1px;
    color: var(--hs-text);
    margin-bottom: 1rem;
  }
  /* each initial fades dark→bright orange, left to right, inside the letter itself */
  .main-title .cap,
  .grad-cap {
    font-weight: 800;
    background: linear-gradient(90deg, var(--brand-orange-deep) 0%, var(--brand-orange) 55%, var(--brand-orange-light) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
  .sub-title {
    font-family: var(--hs-font-primary);
    font-size: 1.8rem;
    font-weight: 500;
    margin-bottom: 2rem;
    background: var(--hs-accent-text-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
  .description {
    font-size: 1.05rem;
    color: var(--hs-text-2);
    max-width: 54ch;
    margin-bottom: 3rem;
  }
  .cta-group { display: flex; gap: 1rem; }

  /* ---- hero footer ---- */
  .hero-footer {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 2rem;
    padding-top: 2rem;
  }
  .footer-left { display: flex; align-items: flex-end; gap: 2.5rem; flex-wrap: wrap; }

  .glass-panel {
    background: var(--hs-glass-bg);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--hs-glass-border);
    border-radius: 16px;
    padding: 1.5rem 2rem;
    max-width: 320px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
  }
  .availability-card { display: flex; align-items: flex-start; gap: 0.9rem; }
  .availability-card strong { display: block; font-size: 0.95rem; font-weight: 600; margin-bottom: 0.2rem; font-family: var(--hs-font-primary); }
  .availability-card span.sub { display: block; font-size: 0.8rem; color: var(--hs-text-2); line-height: 1.5; font-family: var(--hs-font-secondary); }

  .pulse-dot {
    position: relative;
    flex-shrink: 0;
    width: 10px; height: 10px;
    margin-top: 5px;
    border-radius: 50%;
    background: var(--hs-success);
  }
  .pulse-dot::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: var(--hs-success);
    animation: status-pulse 2s ease-out infinite;
  }
  @keyframes status-pulse {
    0% { transform: scale(1); opacity: 0.8; }
    100% { transform: scale(2.5); opacity: 0; }
  }

  .stats-group { display: flex; align-items: center; gap: 1.75rem; }
  .stat { display: flex; flex-direction: column; }
  .stat-num { font-size: 1.6rem; font-weight: 700; line-height: 1.2; font-family: var(--hs-font-primary); }
  .stat-label { font-family: var(--hs-font-secondary); font-size: 0.72rem; letter-spacing: 0.5px; text-transform: uppercase; color: var(--hs-text-2); }
  .stat-line { width: 1px; height: 2.4rem; background: var(--hs-glass-border); }

  .scroll-indicator {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    color: var(--hs-text-2);
    font-family: var(--hs-font-secondary);
    font-size: 0.65rem;
    letter-spacing: 2px;
  }
  .mouse {
    width: 24px; height: 38px;
    border: 1.5px solid rgba(255, 255, 255, 0.3);
    border-radius: 12px;
    display: flex;
    justify-content: center;
    padding-top: 6px;
  }
  .wheel {
    width: 3px; height: 7px;
    border-radius: 2px;
    background: var(--hs-text-2);
    animation: wheel-scroll 2s ease-out infinite;
  }
  @keyframes wheel-scroll {
    0% { transform: translateY(0); opacity: 1; }
    100% { transform: translateY(15px); opacity: 0; }
  }

  /* ---- hero load animations ---- */
  .animate-fade-up {
    opacity: 0;
    transform: translateY(30px);
    animation: fade-up 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  }
  .delay-1 { animation-delay: 0.1s; }
  .delay-2 { animation-delay: 0.2s; }
  .delay-3 { animation-delay: 0.3s; }
  .delay-4 { animation-delay: 0.5s; }
  @keyframes fade-up {
    to { opacity: 1; transform: translateY(0); }
  }

  /* ============ ORIGINAL PAGE SECTIONS ============ */

  /* ---------- what it does ---------- */
  .offer-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
  @media (max-width: 720px) { .offer-grid { grid-template-columns: 1fr; } }
  .offer-item { background: var(--surface); padding: clamp(1.5rem, 3vw, 2.25rem); display: flex; flex-direction: column; gap: 0.75rem; transition: background 180ms ease, transform 180ms ease, box-shadow 180ms ease; position: relative; }
  .offer-item:hover { background: var(--surface-2); transform: translateY(-3px); box-shadow: inset 3px 0 0 var(--neon-2), 0 10px 32px color-mix(in srgb, var(--neon-2) 10%, transparent); }
  .offer-index { font-family: var(--font-mono); font-size: 0.85rem; color: var(--accent-strong); }
  .offer-item h3 { font-size: 1.15rem; }
  .offer-item p { color: var(--ink-muted); font-size: 0.98rem; }

  /* ---------- footer / contact ---------- */
  .contact-panel { border: 1px solid var(--line); background: var(--surface); padding: clamp(2rem, 5vw, 3.5rem); display: flex; flex-direction: column; align-items: flex-start; gap: 1.5rem; }
  .contact-panel h2 { font-size: clamp(1.4rem, 3vw, 2rem); max-width: 24ch; }
  .contact-fine { font-family: var(--font-mono); font-size: 0.78rem; color: var(--ink-muted); }

  footer.site-footer { padding: 2.5rem 0 3.5rem; color: var(--ink-muted); font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.04em; }
  footer.site-footer .wrap { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; }

  /* ============ RESPONSIVE (hero per spec) ============ */
  @media (max-width: 1200px) {
    .hero-section { padding: var(--nav-h, 6.5rem) 2rem 2rem; }
    .navbar { padding: 2rem; }
  }
  @media (max-width: 1024px) {
    .nav-links, .nav-actions { display: none; }
    .mobile-menu-toggle { display: block; }
    /* The desktop scrim is a left-to-right gradient because the hero copy sits
       in the left third. Below 1024px the copy runs full width and lands on the
       bright middle of the video, so darken the whole frame instead. */
    .video-overlay {
      background: linear-gradient(180deg,
        rgba(5, 5, 8, 0.88) 0%,
        rgba(5, 5, 8, 0.72) 45%,
        rgba(5, 5, 8, 0.9) 100%);
    }
    .hero-footer { flex-direction: column; align-items: stretch; gap: 3rem; }
    .scroll-indicator { display: none; }
    .footer-left { flex-direction: row; justify-content: space-between; }
    .glass-panel { max-width: 100%; }
    .navbar.menu-open .nav-links {
      display: flex;
      /* the navbar is the positioned ancestor now that it is fixed, so hang the
         dropdown off its own bottom edge rather than off fixed page offsets */
      position: absolute;
      top: 100%; left: 0; right: 0;
      flex-direction: column;
      gap: 1.25rem;
      background: rgba(10, 10, 16, 0.92);
      backdrop-filter: blur(16px);
      border: 1px solid var(--hs-glass-border);
      border-radius: 16px;
      padding: 1.5rem 2rem;
      z-index: 20;
    }
  }
  @media (max-width: 768px) {
    .hero-section { padding: var(--nav-h, 5.5rem) 1.5rem 1.5rem; }
    .navbar { padding: 1.25rem 1.5rem; }
    .main-title { font-size: 3.5rem; }
    .sub-title { font-size: 1.4rem; }
    .cta-group { flex-direction: column; align-items: stretch; }
    .footer-left { flex-direction: column; align-items: flex-start; }
    .stats-group { flex-wrap: wrap; }
    .stat-line { display: none; }
  }
  @media (max-width: 480px) {
    .main-title { font-size: 2.8rem; }
    .sub-title { font-size: 1.2rem; }
  }

  @media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; }
    .animate-fade-up { opacity: 1; transform: none; }
    .reveal { opacity: 1; transform: none; }
  }

  /* ============ buttons outside the hero ============
     The spec's .btn rules are scoped to .hero-section; mirror them for the page body
     so buttons in main (demo replay, contact) match the hero exactly. */
  main .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.9rem 2rem;
    border-radius: 8px;
    font-family: var(--hs-font-secondary);
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
  }
  main .btn-primary {
    background: var(--hs-accent-gradient);
    color: #fff;
    box-shadow: 0 8px 24px rgba(245, 130, 31, 0.25);
  }
  main .btn-primary:hover {
    background: var(--hs-accent-gradient-hover);
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(245, 130, 31, 0.4);
  }
  main .btn-outline {
    background: transparent;
    color: var(--ink);
    border: 1px solid var(--line);
  }
  main .btn-outline:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: var(--brand-orange);
    color: var(--hs-text);
  }
  main .btn[disabled] { opacity: 0.45; pointer-events: none; }

  /* ============ bilingual: English default, Dutch when body.lang-nl ============ */
  body.lang-nl .l-en,
  body:not(.lang-nl) .l-nl { display: none !important; }

  .lang-toggle {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--hs-glass-border);
    border-radius: 8px;
    overflow: hidden;
    background: rgba(255,255,255,0.03);
  }
  .lang-toggle button {
    appearance: none;
    background: transparent;
    border: 0;
    cursor: pointer;
    padding: 0.5rem 0.75rem;
    font-family: var(--hs-font-secondary);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 1px;
    color: var(--hs-text-2);
    transition: color 200ms ease, background 200ms ease;
  }
  .lang-toggle button:hover { color: var(--hs-text); }
  .lang-toggle button[aria-pressed="true"] {
    background: var(--hs-accent-gradient);
    color: #fff;
  }

  /* ============ section intro ============ */
  .section-lead { color: var(--ink-muted); max-width: 60ch; margin-bottom: 2rem; font-size: 1.02rem; }

  /* ============ three buckets ============
     Top accent border, flex column, hover lift, and the .contact-method icon
     tile, so it reads as part of the existing system. */
  .buckets { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.25rem, 2.5vw, 1.75rem); }
  @media (max-width: 900px) { .buckets { grid-template-columns: 1fr; } }
  .bucket {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    padding: 1.75rem clamp(1.25rem, 2.5vw, 1.75rem);
    background: var(--surface);
    border: 1px solid var(--line);
    border-top: 2px solid var(--b-accent, var(--brand-orange));
    border-radius: 12px;
    transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
  }
  .bucket:hover {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--b-accent) 45%, var(--line));
    border-top-color: var(--b-accent);
    box-shadow: 0 12px 32px color-mix(in srgb, var(--b-accent) 12%, transparent);
  }
  .bucket .ic {
    width: 38px; height: 38px;
    border-radius: 10px;
    display: grid; place-items: center;
    background: color-mix(in srgb, var(--b-accent) 16%, transparent);
    color: var(--b-accent);
    margin-bottom: 0.15rem;
  }
  .bucket .ic svg { width: 19px; height: 19px; display: block; }
  .bucket h3 { font-size: 1.18rem; }
  /* keep the three cards' bodies aligned when one title wraps to two lines */
  @media (min-width: 901px) { .bucket h3 { min-height: 3.2em; } }
  .bucket-summary { color: var(--ink); font-size: 1rem; }
  .bucket-body { color: var(--ink-muted); font-size: 0.95rem; }
  .bucket-examples {
    list-style: none;
    margin: 0.4rem 0 0;
    padding: 1rem 0 0;
    border-top: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
  }
  .bucket-examples li {
    position: relative;
    padding-left: 1.2rem;
    color: var(--ink-muted);
    font-size: 0.92rem;
    line-height: 1.6;
  }
  .bucket-examples li::before {
    content: "";
    position: absolute;
    left: 0; top: 0.58em;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--b-accent);
  }
  .buckets-closing { margin-top: clamp(1.5rem, 3vw, 2.25rem); }
  .buckets-closing h3 { font-size: clamp(1.3rem, 2.6vw, 1.8rem); max-width: 24ch; }
  .buckets-closing p { color: var(--ink-muted); max-width: 58ch; }

  .offer-cta { margin-bottom: 2rem; }

  /* closing note under the automation cards */
  .offer-note {
    grid-column: 1 / -1;
    background: var(--surface);
    padding: clamp(1.35rem, 2.5vw, 1.75rem) clamp(1.5rem, 3vw, 2.25rem);
    display: flex;
    align-items: center;
    gap: 0.9rem;
    color: var(--ink);
    font-family: var(--hs-font-secondary);
    font-size: 0.98rem;
  }
  .offer-note .plus {
    flex-shrink: 0;
    width: 28px; height: 28px;
    border-radius: 50%;
    display: grid; place-items: center;
    background: color-mix(in srgb, var(--brand-orange) 16%, transparent);
    color: var(--brand-orange);
    font-size: 1.1rem; line-height: 1;
  }

  /* ============ expandable automation cards ============ */
  .offer-item { cursor: pointer; }
  .offer-item:focus-visible { outline: 2px solid var(--brand-orange); outline-offset: -2px; }
  .offer-item h3 { padding-right: 1rem; }
  .offer-more {
    margin-top: auto;
    padding-top: 0.9rem;
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    font-family: var(--hs-font-secondary);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--brand-orange);
    transition: color 180ms ease;
  }
  .offer-item:hover .offer-more { color: var(--brand-orange-light); }
  .offer-more .chev {
    width: 20px; height: 20px;
    border: 1px solid var(--line);
    border-radius: 50%;
    display: grid; place-items: center;
    font-size: 0.85rem; line-height: 1;
    transition: transform 250ms ease, border-color 180ms ease, background 180ms ease;
  }
  .offer-item:hover .offer-more .chev { border-color: var(--brand-orange); }
  .offer-item.open .offer-more .chev {
    transform: rotate(45deg);
    border-color: var(--brand-orange);
    background: color-mix(in srgb, var(--brand-orange) 18%, transparent);
  }
  .offer-why {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 280ms ease;
  }
  .offer-item.open .offer-why { grid-template-rows: 1fr; }
  .offer-why > div { overflow: hidden; }
  .offer-why p {
    margin-top: 0.9rem;
    padding-top: 0.9rem;
    border-top: 1px solid var(--line);
    color: var(--ink-muted);
    font-size: 0.95rem;
  }

  /* ============ FAQ ============ */
  .faq-list { display: flex; flex-direction: column; gap: 0.75rem; max-width: 68ch; }
  .faq-item { border: 1px solid var(--line); background: var(--surface); border-radius: 12px; overflow: hidden; }
  .faq-q {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    text-align: left;
    appearance: none;
    background: transparent;
    border: 0;
    cursor: pointer;
    padding: 1.15rem 1.35rem;
    color: var(--ink);
    font-family: var(--font-display);
    font-size: 1.02rem;
    font-weight: 700;
    transition: color 180ms ease;
  }
  .faq-q:hover { color: var(--brand-orange-light); }
  .faq-q .chev {
    flex-shrink: 0;
    width: 22px; height: 22px;
    border-radius: 50%;
    display: grid; place-items: center;
    color: var(--brand-orange);
    border: 1px solid var(--line);
    font-size: 0.9rem; line-height: 1;
    transition: transform 250ms ease, border-color 180ms ease;
  }
  .faq-item.open .faq-q .chev { transform: rotate(45deg); border-color: var(--brand-orange); }
  .faq-a {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 260ms ease;
  }
  .faq-item.open .faq-a { grid-template-rows: 1fr; }
  .faq-a > div { overflow: hidden; }
  .faq-a p {
    padding: 0 1.35rem 1.25rem;
    color: var(--ink-muted);
    font-size: 0.98rem;
  }

  /* ============ contact methods ============ */
  .contact-methods {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 1rem;
    width: 100%;
    margin-top: 0.5rem;
  }
  .contact-method {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 1.1rem 1.25rem;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--surface-2);
    text-decoration: none;
    transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
  }
  .contact-method:hover {
    transform: translateY(-3px);
    border-color: var(--brand-orange);
    box-shadow: 0 12px 30px color-mix(in srgb, var(--brand-orange) 18%, transparent);
  }
  .contact-method .ic {
    flex-shrink: 0;
    width: 38px; height: 38px;
    border-radius: 10px;
    display: grid; place-items: center;
    background: color-mix(in srgb, var(--brand-orange) 16%, transparent);
    color: var(--brand-orange-light);
  }
  .contact-method .ic svg { width: 19px; height: 19px; }
  .contact-method .k {
    display: block;
    font-family: var(--hs-font-secondary);
    font-size: 0.68rem;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--ink-muted);
    margin-bottom: 0.15rem;
  }
  .contact-method .v {
    display: block;
    font-family: var(--hs-font-secondary);
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--ink);
    word-break: break-word;
  }
  /* on a narrow phone the email was breaking mid-domain
     ("joshwakv@aimaintenance" / ".nl"); buy it the width to stay on one line */
  @media (max-width: 480px) {
    .contact-method { padding: 1rem; gap: 0.7rem; }
    .contact-method .ic { width: 34px; height: 34px; }
    .contact-method .v { font-size: 0.82rem; }
  }

  /* ============ about ============ */
  .about-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
  @media (max-width: 860px) { .about-grid { grid-template-columns: 1fr; } }
  .about-copy p { color: var(--ink-muted); font-size: 1.05rem; margin: 0 0 1.1rem; max-width: 60ch; }
  .about-copy p:last-child { margin-bottom: 0; }
  .about-copy strong { color: var(--ink); font-weight: 600; }
  .about-card {
    border: 1px solid var(--line);
    background: var(--surface);
    border-radius: 14px;
    padding: clamp(1.5rem, 3vw, 2rem);
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
  }
  .about-who { display: flex; align-items: center; gap: 0.9rem; }
  /* initials rather than a photo: reads as deliberate while there isn't one */
  .about-avatar {
    flex-shrink: 0;
    width: 54px; height: 54px;
    border-radius: 50%;
    display: grid; place-items: center;
    background: color-mix(in srgb, var(--brand-orange) 16%, transparent);
    border: 1px solid color-mix(in srgb, var(--brand-orange) 35%, transparent);
    color: var(--brand-orange-light);
    font-family: var(--hs-font-secondary);
    font-weight: 700; font-size: 1.05rem; letter-spacing: 0.5px;
  }
  .about-name { font-family: var(--hs-font-secondary); font-weight: 700; color: var(--ink); }
  .about-role { font-size: 0.85rem; color: var(--ink-muted); }
  .about-facts { list-style: none; margin: 0; padding: 1.1rem 0 0; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 0.7rem; }
  .about-facts li { font-size: 0.92rem; color: var(--ink-muted); display: flex; gap: 0.55rem; }
  .about-facts .dot-ac { color: var(--brand-orange); }

  /* ============ contact page + form ============
     Shared stylesheet, so these rules also serve /contact, which has no hero. */
  /* a page without the hero has nothing under the fixed navbar, so give the bar a
     background from the start and push the content clear of it */
  body.page-plain .navbar {
    background: rgba(8, 8, 13, 0.92);
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    border-bottom-color: var(--hs-glass-border);
  }
  .plain-main { padding-top: var(--nav-h, 6.5rem); }
  .page-head { max-width: 62ch; }
  .page-head h1 {
    font-family: var(--hs-font-primary);
    font-size: clamp(1.9rem, 4vw, 2.9rem);
    line-height: 1.15;
    margin: 0.6rem 0 1rem;
  }
  .page-head p { color: var(--ink-muted); font-size: 1.05rem; }

  .contact-layout { display: grid; grid-template-columns: 1.25fr 1fr; gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
  @media (max-width: 900px) { .contact-layout { grid-template-columns: 1fr; } }

  .contact-form { display: flex; flex-direction: column; gap: 1.1rem; }
  .field { display: flex; flex-direction: column; gap: 0.45rem; }
  .field label {
    font-family: var(--hs-font-secondary);
    font-size: 0.75rem; letter-spacing: 1px; text-transform: uppercase;
    color: var(--ink-muted);
  }
  .field .req { color: var(--brand-orange); }
  .field input, .field textarea {
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--ink);
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 0.85rem 1rem;
    width: 100%;
    box-sizing: border-box;
    transition: border-color 180ms ease, box-shadow 180ms ease;
  }
  .field textarea { min-height: 8.5rem; resize: vertical; }
  .field input:focus, .field textarea:focus {
    outline: none;
    border-color: var(--brand-orange);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-orange) 18%, transparent);
  }
  .form-note { font-size: 0.82rem; color: var(--ink-muted); line-height: 1.7; }
  .form-note a, .form-note button {
    color: var(--brand-orange-light);
    background: none; border: 0; padding: 0; font: inherit; cursor: pointer;
    text-decoration: underline; text-underline-offset: 3px;
  }
  .form-status { display: none; border-radius: 10px; padding: 0.95rem 1.1rem; font-size: 0.95rem; line-height: 1.6; }
  .form-status.show { display: block; }
  .form-status.ok {
    background: color-mix(in srgb, var(--good) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--good) 45%, transparent);
  }
  .form-status.err {
    background: color-mix(in srgb, var(--brand-orange) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--brand-orange) 50%, transparent);
  }
  .contact-aside { display: flex; flex-direction: column; gap: 1rem; }
  .contact-aside .contact-method { width: 100%; box-sizing: border-box; }
  .aside-title {
    font-family: var(--hs-font-secondary);
    font-size: 0.75rem; letter-spacing: 1px; text-transform: uppercase;
    color: var(--steel); margin: 0 0 0.25rem;
  }
  /* loud on purpose: a form with no key silently swallows every enquiry */
  .form-keywarn {
    background: color-mix(in srgb, var(--brand-orange) 16%, transparent);
    border: 1px dashed var(--brand-orange);
    border-radius: 10px; padding: 0.9rem 1.1rem;
    font-size: 0.9rem; color: var(--brand-orange-light);
  }

  /* ============ legal dialog ============ */
  .footer-socials { display: flex; gap: 0.5rem; margin-top: 1rem; }
  .footer-links { display: flex; flex-wrap: wrap; gap: 0.35rem 1rem; margin-top: 0.5rem; }
  .footer-links button {
    appearance: none; background: none; border: 0; padding: 0;
    font: inherit; color: var(--ink-muted); cursor: pointer;
    text-decoration: underline; text-underline-offset: 3px;
  }
  .footer-links button:hover { color: var(--brand-orange-light); }
  .legal-dialog {
    width: min(760px, calc(100vw - 2rem));
    max-height: min(85vh, 900px);
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--surface);
    color: var(--ink);
    overflow: auto;
  }
  .legal-dialog::backdrop { background: rgba(3, 3, 6, 0.74); }
  .legal-head {
    position: sticky; top: 0; z-index: 1;
    display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
    padding: 1.5rem clamp(1.25rem, 3vw, 2rem) 1rem;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
  }
  .legal-head h2 { font-size: clamp(1.15rem, 2.5vw, 1.5rem); margin: 0; }
  .legal-updated { font-family: var(--font-mono); font-size: 0.72rem; color: var(--ink-muted); margin: 0.35rem 0 0; }
  .legal-close {
    flex-shrink: 0;
    appearance: none; cursor: pointer;
    width: 34px; height: 34px; border-radius: 9px;
    background: var(--surface-2); border: 1px solid var(--line); color: var(--ink);
    font-size: 1.1rem; line-height: 1;
  }
  .legal-close:hover { border-color: var(--brand-orange); color: var(--brand-orange-light); }
  .legal-body { padding: 1.25rem clamp(1.25rem, 3vw, 2rem) 2rem; }
  .legal-body h3 {
    font-family: var(--hs-font-secondary);
    font-size: 0.78rem; letter-spacing: 1.2px; text-transform: uppercase;
    color: var(--steel); margin: 1.75rem 0 0.6rem;
  }
  .legal-body h3:first-child { margin-top: 0; }
  .legal-body p { color: var(--ink-muted); font-size: 0.95rem; line-height: 1.75; margin: 0 0 0.75rem; }
  .legal-body ul { margin: 0 0 0.75rem; padding-left: 1.1rem; }
  .legal-body li { color: var(--ink-muted); font-size: 0.95rem; line-height: 1.75; margin-bottom: 0.35rem; }
  .legal-body a { color: var(--brand-orange-light); }
  /* deliberately loud: these must not ship as placeholders */
  .legal-todo {
    color: var(--brand-orange-light);
    background: color-mix(in srgb, var(--brand-orange) 14%, transparent);
    border: 1px dashed color-mix(in srgb, var(--brand-orange) 45%, transparent);
    border-radius: 4px; padding: 0 0.35rem;
  }

  /* ============ footer ============ */
  .footer-grid {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 1.5rem;
    width: 100%;
  }
  .footer-legal { color: var(--ink-muted); font-size: 0.72rem; line-height: 1.8; }