html { scroll-behavior: smooth; }

  /* ── Text colour utility (used as bare class name) ───── */
  .cb-cyan { color: #36b8b5; }

  /* ── Glass morphism ──────────────────────────────────── */
  .glass {
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    background: rgba(255,255,255,.76);
    border: 1px solid rgba(0,0,0,.08);
  }
  .glass2 {
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    background: rgba(255,255,255,.62);
    border: 1px solid rgba(0,0,0,.08);
  }

  /* ── Grid overlay ────────────────────────────────────── */
  .grid-fade::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
      linear-gradient(rgba(10,10,15,.03) 1px, transparent 1px),
      linear-gradient(90deg, rgba(10,10,15,.03) 1px, transparent 1px);
    background-size: 34px 34px;
    mask-image: radial-gradient(circle at center, black 48%, transparent 84%);
    pointer-events: none;
  }

  /* ── Image overlays ──────────────────────────────────── */
  .hero-image::after,
  .image-overlay::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(10,10,15,.10), rgba(10,10,15,.48));
    border-radius: inherit;
  }
  .section-image::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, rgba(10,10,15,.68) 0%, rgba(42,20,88,.50) 42%, rgba(77,226,230,.12) 100%);
    border-radius: inherit;
  }
  .overlay-dark::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(10,10,15,.12) 0%, rgba(10,10,15,.65) 100%);
    border-radius: inherit;
  }

  /* ── Dark ink band ───────────────────────────────────── */
  .bg-ink-band {
    background: linear-gradient(135deg, #0A0A0F 0%, #121C4E 100%);
  }

  /* ── Reveal animation ────────────────────────────────── */
  .reveal {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity .75s ease, transform .75s ease;
  }
  .reveal.show {
    opacity: 1;
    transform: translateY(0);
  }

  /* ── Card hover lift ─────────────────────────────────── */
  .card-hover {
    transition: transform .25s ease, box-shadow .25s ease;
  }
  .card-hover:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 36px rgba(0,0,0,.10);
  }

  /* ── Service card line animation ─────────────────────── */
  .service-card:hover .service-line,
  .service-card:focus-within .service-line {
    width: 100%;
  }

  /* ── Filter chips (press-print uses .chip, digital uses .service-chip) */
  .chip.active,
  .service-chip.active {
    background: #0A0A0F;
    color: #fff;
    border-color: #0A0A0F;
  }

  /* ── Service tabs (brand-development) ────────────────── */
  .service-tab {
    transition: background .2s, color .2s;
  }
  .service-tab.active {
    background: #0A0A0F;
    color: #fff;
    border-color: #0A0A0F;
  }
  .service-panel {
    display: none;
  }
  .service-panel.active {
    display: block;
  }

  /* ── Phase card (events-management) ─────────────────── */
  .phase-card {
    transition: transform .25s ease, box-shadow .25s ease;
  }
  .phase-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 36px rgba(0,0,0,.09);
  }

  /* ── Carousel ────────────────────────────────────────── */
  .carousel-track {
    display: flex;
    transition: transform .7s cubic-bezier(.22,1,.36,1);
    width: 100%;
  }
  .carousel-slide {
    min-width: 100%;
  }
  .carousel-dot.active {
    background: #0A0A0F;
    transform: scale(1.08);
  }

  /* ── focus ring ──────────────────────────────────────── */
  .focusRing:focus-visible {
    outline: 2px solid #36b8b5;
    outline-offset: 2px;
  }
  .press:active {
    transform: scale(.95);
  }