/* ==========================================================================
   RESET & BASE
   ========================================================================== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  /* matte sky blue, flat on purpose: --blue and --blue-deep are the SAME
     value, so every "gradient" button (linear-gradient(90deg, var(--blue),
     var(--blue-deep))) renders as one solid tone instead of a two-tone
     shine. Was #38bdf8 / #1d4ed8 (vivid neon cyan). */
  --blue: #4fc3f7;
  --blue-deep: #4fc3f7;
  --white: #ffffff;
  --gray: #a8b3c7;

  /* dark mode — black background instead of the cahier's navy default */
  --surface: #000000;
  --surface-soft: #0d0d0f;
  --text: #ffffff;
  --text-soft: #a8cdef;
  --accent: #4fc3f7;
  --border: #232426;
}

[data-theme="light"] {
  --surface: #ffffff;
  --surface-soft: #f0f4fa;
  --text: #0b1d3a;
  --text-soft: #4a6282;
  /* same flat sky blue as dark mode, per explicit request — note this is
     ~1.8:1 on white (well under the 4.5:1 WCAG AA floor from cahier §10)
     wherever it's used as small text/icon color rather than a button fill */
  --accent: #4fc3f7;
  --border: #d0ddef;
}

html, body {
  height: 100%;
}

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  background-color: #000000;
  font-family: 'Poppins', sans-serif;
}

/* motion tokens (impeccable/reference/motion-design.md) */
:root {
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ==========================================================================
   NAVBAR — fixed, glassy overlay on top of the hero; toggle drives the
   palette above (only chrome that exists sitewide right now)
   ========================================================================== */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  background: color-mix(in srgb, var(--surface) 45%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  transition: transform 0.35s var(--ease-out-quart), background 0.3s ease, border-color 0.3s ease;
}

.navbar.is-hidden {
  transform: translateY(-100%);
}

/* light mode: a translucent bar over a busy dark photo reads poorly —
   make it near-opaque with a visible shadow instead */
[data-theme="light"] .navbar {
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  border-bottom-color: var(--border);
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.1);
}

/* small tab that appears once the navbar is hidden, to bring it back */
.navbar-notch {
  position: fixed;
  top: 0;
  left: 50%;
  z-index: 21;
  width: 46px;
  height: 24px;
  transform: translateX(-50%) translateY(-100%);
  border: 1px solid var(--border);
  border-top: none;
  border-radius: 0 0 14px 14px;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.18);
  transition: transform 0.35s var(--ease-out-quart);
}

.navbar-notch.is-visible {
  transform: translateX(-50%) translateY(0);
}

.navbar-notch svg {
  width: 16px;
  height: 16px;
}

/* grid instead of flex space-between: the outer two columns can be any
   (different) width and .navbar-links still lands dead-center in the bar,
   rather than just floating wherever space-between happens to put it */
.navbar-inner {
  height: 58px;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 48px);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
}

.navbar-logo {
  display: flex;
  align-items: center;
  justify-self: start;
  text-decoration: none;
  white-space: nowrap;
}

.navbar-logo-img {
  display: none;
  height: clamp(30px, 4.2vh, 40px);
  width: auto;
}

/* default (before JS sets data-theme, and in dark mode): white logo, matching
   the rest of the site's dark-first default — see applyTheme in script.js */
.navbar-logo-img--dark {
  display: block;
}

[data-theme="light"] .navbar-logo-img--dark {
  display: none;
}

[data-theme="light"] .navbar-logo-img--light {
  display: block;
}

.navbar-links {
  display: flex;
  align-items: center;
  justify-self: center;
  gap: clamp(18px, 2.6vw, 34px);
}

.navbar-links a {
  position: relative;
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-soft);
  text-decoration: none;
  transition: color 0.2s ease;
}

.navbar-links a::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -6px;
  width: 0;
  height: 2px;
  border-radius: 999px;
  background: var(--accent);
  transition: width 0.25s var(--ease-out-quart), left 0.25s var(--ease-out-quart);
}

.navbar-links a:hover::after,
.navbar-links a.is-active::after {
  width: 100%;
  left: 0;
}

.navbar-links a:hover,
.navbar-links a.is-active,
.navbar-mobile a.is-active {
  color: var(--accent);
}

.navbar-actions {
  display: flex;
  align-items: center;
  justify-self: end;
  gap: 16px;
}

/* lang switch + theme toggle grouped as one "utility" cluster, set off
   from the primary CTA by a hairline divider so the button reads as the
   one action that actually matters */
.navbar-utility {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-right: 16px;
  border-right: 1px solid var(--border);
}

/* language picker — a plain globe icon button; clicking it opens a small
   dropdown menu (.lang-menu) with the two language options instead of the
   old always-visible FR/EN pill switch */
.lang-switch {
  position: relative;
}

.lang-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface-soft);
  color: var(--text-soft);
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.lang-toggle:hover,
.lang-switch.is-open .lang-toggle {
  color: var(--accent);
  border-color: var(--accent);
}

.lang-toggle svg {
  width: 17px;
  height: 17px;
}

.lang-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 130px;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
  z-index: 20;
}

.lang-switch.is-open .lang-menu {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.lang-option {
  display: block;
  width: 100%;
  text-align: left;
  font-family: 'Poppins', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-soft);
  background: transparent;
  border: none;
  border-radius: 8px;
  padding: 8px 10px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.lang-option:hover {
  background: var(--surface-soft);
  color: var(--text);
}

.lang-option.is-active {
  color: var(--accent);
  font-weight: 700;
}

/* light/dark toggle — plain icon button, single sun/moon icon swapped by
   aria-checked (mirrors the "activate light/dark" action in its aria-label) */
.theme-toggle {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface-soft);
  color: var(--text-soft);
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.theme-toggle:hover {
  color: var(--accent);
  border-color: var(--accent);
}

.theme-toggle-icon {
  position: absolute;
  width: 16px;
  height: 16px;
  opacity: 0;
  transform: scale(0.5) rotate(-90deg);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.theme-toggle[aria-checked="false"] .theme-toggle-icon--sun,
.theme-toggle[aria-checked="true"] .theme-toggle-icon--moon {
  opacity: 1;
  transform: scale(1) rotate(0deg);
}

/* navbar payment icon — same plain circular treatment as .theme-toggle,
   links out to paiement.html instead of toggling state */
.navbar-payment-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface-soft);
  color: var(--text-soft);
  transition: color 0.2s ease, border-color 0.2s ease;
}

.navbar-payment-link:hover,
.navbar-payment-link.is-active {
  color: var(--accent);
  border-color: var(--accent);
}

.navbar-payment-link svg {
  width: 16px;
  height: 16px;
}

.navbar-cta {
  font-family: 'Poppins', sans-serif;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: #ffffff;
  text-decoration: none;
  background: linear-gradient(90deg, var(--blue) 0%, var(--blue-deep) 100%);
  padding: 10px 20px;
  border-radius: 999px;
  white-space: nowrap;
  transition: transform 0.25s ease;
}

.navbar-cta:hover {
  transform: translateY(-1px);
}

/* burger — hidden on desktop, shown under the mobile breakpoint */
.navbar-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  background: transparent;
  border: none;
  cursor: pointer;
}

.navbar-burger span {
  display: block;
  height: 2px;
  width: 22px;
  margin: 0 auto;
  background: var(--text);
  border-radius: 2px;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.navbar-burger[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.navbar-burger[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.navbar-burger[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* mobile dropdown panel — collapsed by default, animated open/close */
.navbar-mobile {
  display: none;
  flex-direction: column;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  border-top: 1px solid var(--border);
  transition: max-height 0.35s ease, opacity 0.3s ease;
}

.navbar-mobile a {
  font-family: 'Poppins', sans-serif;
  font-size: 15px;
  font-weight: 500;
  color: var(--text-soft);
  text-decoration: none;
  padding: 14px clamp(20px, 6vw, 40px);
  min-height: 44px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
}

.navbar-mobile-cta {
  color: var(--accent) !important;
  font-weight: 700 !important;
}

.navbar-mobile.is-open {
  max-height: 400px;
  opacity: 1;
}

@media (max-width: 860px) {
  /* .navbar-links is display:none below, which pulls it out of the grid
     entirely — auto-placement then shifts .navbar-actions into the
     (empty) middle "auto" track instead of the right "1fr" one, leaving
     a big gap between it and the viewport edge. Switch to flex so the
     two remaining items (logo, actions) just land at the two ends. */
  .navbar-inner {
    display: flex;
    justify-content: space-between;
  }

  .navbar-links,
  .navbar-cta {
    display: none;
  }

  .navbar-burger {
    display: flex;
  }

  .navbar-mobile {
    display: flex;
  }
}

/* ==========================================================================
   HERO — interactive "MagicRings" WebGL background + real text on top
   ========================================================================== */
.hero {
  position: relative;
  width: 100vw;
  height: 100vh;
  max-height: 100vh;
  overflow: hidden;
  background-color: #000000;
}

.hero-galaxy {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  /* script.js drives a mouse-follow/hover/click reaction on this canvas —
     let mouse/touch reach it; .hero-content is pointer-events: none (below)
     except for the CTA button, so this never blocks the real UI */
  pointer-events: auto;
}

/* legibility overlay + brand glow on top of the Spline canvas — same
   edge/bottom-darkening idea as the source component's linear-gradients,
   adapted for our centered hero copy (their version vignettes for
   left-aligned text) plus our own blue "galaxy core" glow layered in */
/* preview only — swaps the WebGL canvas above for a static photo, same
   treatment as .page-banner-photo on the secondary pages; delete this
   rule (and the <img> in index.html) to revert to the canvas-only hero */
.hero-photo {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 32%;
  filter: brightness(0.8) contrast(1.05);
}

.hero-galaxy-glow {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(60% 55% at 50% 42%, rgba(79, 195, 247, 0.14) 0%, transparent 70%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.48) 35%, rgba(0, 0, 0, 0.48) 62%, rgba(0, 0, 0, 0.8) 100%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.5) 0%, transparent 25%, transparent 75%, rgba(0, 0, 0, 0.5) 100%);
  pointer-events: none;
}

/* ==========================================================================
   HEADER CONTENT
   ========================================================================== */
.hero-content {
  position: relative;
  z-index: 3;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  max-width: 900px;
  margin: 0 auto;
  padding: 58px 20px 0; /* keeps content clear of the fixed navbar on short viewports */
  /* click-through by default so dragging/orbiting the Spline scene still
     works everywhere in the hero, including the empty space around the
     copy — only the actual button opts back in below */
  pointer-events: none;
}

.hero-content .cta-button {
  pointer-events: auto;
}

/* staggered entrance once the preloader curtain lifts (or immediately if
   there was no preloader to wait for — see the "ines-events:ready" hookup
   in script.js) — each child fades/slides up in sequence */
.hero-content .hero-eyebrow,
.hero-content .hero-title,
.hero-content .hero-subtitle,
.hero-content .cta-button,
.hero-content .stats-badge {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 700ms var(--ease-out-quart), transform 700ms var(--ease-out-quart);
}

.hero-content.is-visible .hero-eyebrow { transition-delay: 0ms; }
.hero-content.is-visible .hero-title { transition-delay: 100ms; }
.hero-content.is-visible .hero-subtitle { transition-delay: 220ms; }
.hero-content.is-visible .cta-button { transition-delay: 340ms; }
.hero-content.is-visible .stats-badge { transition-delay: 460ms; }

.hero-content.is-visible .hero-eyebrow,
.hero-content.is-visible .hero-title,
.hero-content.is-visible .hero-subtitle,
.hero-content.is-visible .cta-button,
.hero-content.is-visible .stats-badge {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .hero-content .hero-eyebrow,
  .hero-content .hero-title,
  .hero-content .hero-subtitle,
  .hero-content .cta-button,
  .hero-content .stats-badge {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* small pill "eyebrow" tag above the headline, dot + label — matches the
   reference layout's badge-above-headline pattern */
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: clamp(16px, 3.4vh, 28px);
  padding: 7px 16px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: normal;
  color: var(--gray);
}

.hero-eyebrow-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--blue);
}

.hero-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  text-transform: none;
  font-size: clamp(37px, 7.5vh, 60px);
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--white);
  text-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

.hero-title-line {
  letter-spacing: -0.02em;
}

.hero-subtitle {
  margin-top: clamp(14px, 3vh, 22px);
  max-width: 480px;
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: clamp(15px, 2vh, 17px);
  line-height: 1.6;
  color: var(--gray);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9), 0 4px 16px rgba(0, 0, 0, 0.7);
}

/* ==========================================================================
   CTA BUTTON — blue gradient pill with a circular arrow badge
   ========================================================================== */
.cta-button {
  margin-top: clamp(20px, 4vh, 36px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  background: linear-gradient(90deg, var(--blue) 0%, var(--blue-deep) 100%);
  border: none;
  border-radius: 999px;
  padding: 12px 22px;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.cta-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.55);
}

.cta-text {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: normal;
  text-transform: none;
  color: var(--white);
}

/* ==========================================================================
   STATS BADGE — 5-star rating card, sits just below the CTA button
   ========================================================================== */
.stats-badge {
  margin-top: clamp(16px, 3.4vh, 28px);
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: rgba(20, 24, 34, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  padding: 8px 18px 8px 8px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.stats-avatars {
  display: flex;
  align-items: center;
}

.stats-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid var(--surface, #000);
  margin-left: -8px;
}

.stats-avatar:first-child {
  margin-left: 0;
}

.stats-avatar--1 {
  background: linear-gradient(135deg, #bae6fd, #4fc3f7);
}

.stats-avatar--2 {
  background: linear-gradient(135deg, #4fc3f7, #0288d1);
}

.stats-avatar--3 {
  background: linear-gradient(135deg, #0277bd, #01579b);
}

.stats-stars {
  color: var(--blue);
  font-size: 13px;
  letter-spacing: 1px;
  margin-right: 6px;
}

.stats-caption {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 13.6px;
  line-height: 1.4;
  color: var(--gray);
}

.stats-caption strong {
  font-weight: 700;
  color: var(--white);
}

/* ==========================================================================
   STATS SECTION — 2nd section of the home page, 3 counters that animate
   in and count up when scrolled into view (see script.js)
   ========================================================================== */
/* pinned to the hero's dark palette regardless of the light/dark toggle —
   same reasoning as .services-section: this section now carries the same
   animated canvas background as the hero, so its child rules (already
   written against var(--text)/var(--text-soft)/var(--accent)) need those
   custom properties overridden here rather than touched individually */
.stats-section {
  background: var(--surface);
  transition: background 0.3s ease;
  padding: clamp(56px, 10vh, 104px) 20px;
}

.stats-grid {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(28px, 5vw, 64px);
  text-align: center;
}

.stat-item {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 600ms var(--ease-out-quart), transform 600ms var(--ease-out-quart);
  transition-delay: calc(var(--i, 0) * 120ms);
}

.stat-item.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.stat-number {
  display: block;
  font-family: 'Anton', sans-serif;
  font-size: clamp(40px, 7vh, 72px);
  line-height: 1;
  color: var(--accent);
}

.stat-label {
  display: block;
  margin-top: 10px;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: clamp(13px, 1.6vh, 16px);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--text-soft);
}

@media (max-width: 640px) {
  .stats-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

/* respects vestibular/motion sensitivity — numbers still appear, just without
   the slide/fade choreography (see prefersReducedMotion check in script.js) */
@media (prefers-reduced-motion: reduce) {
  .stat-item {
    transition: opacity 200ms linear;
    transform: none;
  }
}

/* ==========================================================================
   TRUST SECTION — "Ils nous font confiance" logo wall. Fixed light
   background on purpose (independent of the dark/light toggle): almost
   every client mark here is a dark/colored logo that needs a light
   backdrop to read, exactly like the reference screenshot.
   ========================================================================== */
/* pinned to a light palette regardless of the dark/light toggle — the
   partner logos are designed for a white background, so this section
   never goes dark (see .trust-title's hardcoded dark text below) */
.trust-section {
  --text-soft: #4a6282;
  --accent: #4fc3f7;
  --border: #d0ddef;
  --surface-soft: #f0f4fa;
  background: #f7f8fa;
  padding: clamp(56px, 10vh, 104px) 20px;
}

.trust-header {
  text-align: center;
  margin-bottom: clamp(32px, 6vh, 56px);
}

.trust-title {
  display: block;
  margin-top: 14px;
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  text-transform: none;
  font-size: clamp(30px, 5.2vh, 52px);
  line-height: 1.15;
  letter-spacing: 0;
  color: #17181c;
}

.trust-logos {
  max-width: 1180px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: clamp(24px, 4vh, 40px);
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 600ms var(--ease-out-quart), transform 600ms var(--ease-out-quart);
}

.trust-logos.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.trust-logos-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(24px, 4vw, 52px);
}

.trust-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 52px;
  opacity: 0.8;
  filter: grayscale(0.2);
  transition: opacity 250ms var(--ease-out-quart), transform 250ms var(--ease-out-quart), filter 250ms ease;
}

.trust-logo:hover {
  opacity: 1;
  filter: grayscale(0);
  transform: translateY(-2px);
}

.trust-logo img {
  max-height: 100%;
  max-width: 150px;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* square-format marks read smaller at the same pixel height as a wordmark,
   so they get a deliberate size bump ("mets les grand un peu") */
.trust-logo.is-square {
  height: 78px;
}

.trust-logo.is-square img {
  max-width: 78px;
}

/* Decathlon and British American Tobacco read small next to the rest at
   the base height — bumped up on their own, same idea as .is-square */
.trust-logo.is-large {
  height: 72px;
}

.trust-logo.is-large img {
  max-width: 200px;
}

@media (max-width: 640px) {
  .trust-logo {
    height: 40px;
  }

  .trust-logo.is-square {
    height: 60px;
  }

  .trust-logo.is-square img {
    max-width: 60px;
  }

  .trust-logo.is-large {
    height: 56px;
  }

  .trust-logo.is-large img {
    max-width: 150px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .trust-logos {
    transition: opacity 200ms linear;
    transform: none;
  }
}

/* ==========================================================================
   SERVICES SECTION — "Notre Savoir-Faire", icon + title + description rows
   separated by thin dividers (layout borrowed from ser.PNG), reskinned in
   the site's own dark/blue palette so it follows the theme toggle
   ========================================================================== */
/* theme-aware again: plain white section in light mode, plain black in
   dark mode — no pinned palette, no canvas background */
.services-section {
  position: relative;
  overflow: hidden;
  background: var(--surface);
  transition: background 0.3s ease;
  padding: clamp(56px, 10vh, 104px) 20px;
}

.services-header,
.services-list {
  position: relative;
  z-index: 2;
}

.services-header {
  text-align: center;
  margin-bottom: clamp(40px, 7vh, 64px);
}

.services-header,
.catalog-header,
.process-header,
.portfolio-filters,
.trust-header,
.moments-header,
.testimonials-header,
.values-header,
.timeline-header {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 600ms var(--ease-out-quart), transform 600ms var(--ease-out-quart);
}

.services-header.is-visible,
.catalog-header.is-visible,
.process-header.is-visible,
.portfolio-filters.is-visible,
.trust-header.is-visible,
.moments-header.is-visible,
.testimonials-header.is-visible,
.values-header.is-visible,
.timeline-header.is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .services-header,
  .catalog-header,
  .process-header,
  .portfolio-filters,
  .trust-header,
  .moments-header,
  .testimonials-header,
  .values-header,
  .timeline-header {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

.services-title {
  display: block;
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  text-transform: none;
  font-size: clamp(30px, 5.2vh, 52px);
  line-height: 1.15;
  letter-spacing: 0;
  color: var(--text);
}

.services-list {
  max-width: 1040px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(20px, 3vw, 28px);
  align-items: stretch;
}

.service-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: clamp(28px, 4vh, 40px) clamp(24px, 3vw, 32px);
  border: 1px solid var(--border);
  border-radius: 22px;
  background: var(--surface-soft);
  color: inherit;
  text-decoration: none;
  opacity: 0;
  transform: translateY(28px) scale(0.97);
  transition: opacity 600ms var(--ease-out-quart), transform 600ms var(--ease-out-quart),
    background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
  transition-delay: calc(var(--i, 0) * 120ms);
}

.service-row.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* hover lift + accent glow — delay only applies to the entrance, not the
   hover response, so re-trigger the transition without it once visible */
.service-row.is-visible {
  transition-delay: 0ms;
}

.service-row:hover {
  transform: translateY(-8px) scale(1);
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.18);
}

.service-icon {
  flex-shrink: 0;
  width: clamp(48px, 6vh, 56px);
  height: clamp(48px, 6vh, 56px);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  color: var(--accent);
  margin-bottom: clamp(16px, 3vh, 22px);
  transition: transform 0.4s var(--ease-out-quart), background 0.3s ease, box-shadow 0.3s ease;
}

.service-row:hover .service-icon {
  transform: scale(1.12) rotate(-6deg);
  background: color-mix(in srgb, var(--accent) 26%, transparent);
}

.service-icon svg {
  width: 46%;
  height: 46%;
  transition: transform 0.4s var(--ease-out-quart);
}

.service-row:hover .service-icon svg {
  transform: scale(1.08);
}

.service-content {
  flex: 1;
  min-width: 0;
}

.service-name {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  text-transform: none;
  font-size: clamp(19px, 2.6vh, 26px);
  letter-spacing: 0;
  color: var(--text);
  transition: color 0.3s ease;
}

.service-row:hover .service-name {
  color: var(--accent);
}

.service-tagline {
  margin-top: 6px;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-style: normal;
  font-size: clamp(14px, 1.8vh, 17px);
  color: var(--accent);
}

.service-description {
  margin-top: 12px;
  max-width: 640px;
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  font-size: clamp(13px, 1.6vh, 15.5px);
  line-height: 1.7;
  color: var(--text-soft);
}

@media (max-width: 720px) {
  .services-list {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .service-row,
  .service-row:hover,
  .service-icon,
  .service-row:hover .service-icon,
  .service-icon svg,
  .service-row:hover .service-icon svg {
    transition: opacity 200ms linear;
    transform: none;
  }
}

/* ==========================================================================
   MOMENTS SECTION — "Des instants qui marquent", full-bleed photo strip
   (layout borrowed from projet.PNG: edge-to-edge row of large photos)
   ========================================================================== */
.moments-section {
  background: var(--surface);
  padding: clamp(56px, 10vh, 104px) 0;
  transition: background 0.3s ease;
  overflow: hidden;
}

.moments-header {
  text-align: center;
  margin-bottom: clamp(32px, 6vh, 56px);
  padding: 0 20px;
}

.moments-title {
  display: block;
  margin-top: 14px;
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  text-transform: none;
  font-size: clamp(30px, 5.2vh, 52px);
  line-height: 1.15;
  letter-spacing: 0;
  color: var(--text);
}

.moments-strip {
  /* full-bleed: escapes the section's own box so photos reach both edges */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  display: flex;
  align-items: stretch;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 700ms var(--ease-out-quart), transform 700ms var(--ease-out-quart);
}

.moments-strip.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.moment-photo {
  flex: 1 1 0;
  height: clamp(240px, 42vh, 420px);
  overflow: hidden;
  cursor: pointer;
}

.moment-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 400ms var(--ease-out-quart);
}

.moment-photo:hover img {
  transform: scale(1.06);
}

@media (max-width: 860px) {
  .moments-strip {
    flex-wrap: wrap;
  }

  .moment-photo {
    flex: 1 1 50%;
    height: clamp(200px, 34vh, 320px);
  }
}

@media (max-width: 500px) {
  .moment-photo {
    flex: 1 1 100%;
    height: clamp(220px, 40vh, 320px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .moments-strip {
    transition: opacity 200ms linear;
    transform: none;
  }

  .moment-photo img {
    transition: none;
  }
}

/* thumbnail filmstrip — the rest of the folder, auto-scrolling on a loop
   (same duplicated-content mechanic as .ticker-track: the list is rendered
   twice, second copy aria-hidden, so translateX(-50%) always lands on
   visually identical content and the loop never visibly seams) */
.moments-thumbs {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-top: 14px;
  padding: 0 0 10px;
  overflow: hidden;
  opacity: 0;
  transition: opacity 700ms var(--ease-out-quart);
}

.moments-thumbs.is-visible {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .moments-thumbs {
    transition: opacity 200ms linear;
  }
}

.moments-thumbs-track {
  display: flex;
  gap: 6px;
  width: max-content;
  animation: moments-thumbs-scroll 260s linear infinite;
}

.moments-thumbs:hover .moments-thumbs-track,
.moments-thumbs:focus-within .moments-thumbs-track {
  animation-play-state: paused;
}

@keyframes moments-thumbs-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .moments-thumbs-track {
    animation: none;
  }
}

.thumb {
  flex: 0 0 auto;
  width: 100px;
  height: 74px;
  overflow: hidden;
  border-radius: 0;
  opacity: 0.7;
  cursor: pointer;
  transition: opacity 200ms var(--ease-out-quart), transform 200ms var(--ease-out-quart);
}

.thumb:hover {
  opacity: 1;
  transform: translateY(-2px);
}

.thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (max-width: 640px) {
  .thumb {
    width: 76px;
    height: 56px;
  }
}

/* two-row auto-scrolling photo marquee (services page gallery teaser,
   separate from .moments-strip so the homepage's real gallery stays static
   and unaffected) — same duplicated-content-loop mechanic as .ticker-track:
   each row's tile set is duplicated once so translateX(-50%) always lands
   on visually identical content, giving a seamless infinite loop. The two
   rows share one keyframe but scroll opposite ways (row 2 plain = left,
   row 1 reversed = right) purely via animation-direction, no separate
   keyframes needed. */
.gallery-marquee {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 700ms var(--ease-out-quart), transform 700ms var(--ease-out-quart);
}

.gallery-marquee.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.gallery-marquee-row {
  display: flex;
  width: max-content;
  animation: gallery-marquee-scroll 38s linear infinite;
}

.gallery-marquee-row--reverse {
  animation-direction: reverse;
}

.gallery-marquee:hover .gallery-marquee-row,
.gallery-marquee:focus-within .gallery-marquee-row {
  animation-play-state: paused;
}

@keyframes gallery-marquee-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

.gallery-tile {
  flex: 0 0 auto;
  width: clamp(200px, 20vw, 300px);
  height: clamp(140px, 14vw, 200px);
  overflow: hidden;
}

.gallery-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 400ms var(--ease-out-quart);
}

.gallery-tile:hover img {
  transform: scale(1.06);
}

@media (max-width: 640px) {
  .gallery-tile {
    width: 150px;
    height: 112px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .gallery-marquee {
    transition: opacity 200ms linear;
    transform: none;
  }
}

/* quiet outline link under the .gallery-marquee teaser (services page)
   driving to the full portfolio — deliberately not .about-cta-button:
   that one's a bold filled pill reserved for the page's main "let's talk"
   CTAs, this is a secondary "see more" nudge, so it stays understated */
.moments-cta {
  display: flex;
  justify-content: center;
  margin-top: clamp(28px, 5vh, 44px);
}

.moments-cta-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 28px;
  border-radius: 999px;
  border: 1px solid var(--border);
  color: var(--text);
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  transition: border-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
}

.moments-cta-link svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  transition: transform 0.25s ease;
}

.moments-cta-link:hover {
  border-color: var(--accent);
  color: var(--accent);
  transform: translateY(-2px);
}

.moments-cta-link:hover svg {
  transform: translateX(3px);
}

@media (prefers-reduced-motion: reduce) {
  .moments-cta-link,
  .moments-cta-link svg {
    transition: none;
  }
}

/* ==========================================================================
   TESTIMONIALS — "Ce que disent nos clients", elegant single-card slider
   ========================================================================== */
/* theme-aware again: plain white section in light mode, plain black in
   dark mode — no pinned palette, no canvas background */
.testimonials-section {
  position: relative;
  overflow: hidden;
  background: var(--surface);
  transition: background 0.3s ease;
  padding: clamp(56px, 10vh, 104px) 20px;
}

.testimonials-header,
.testimonials-marquee,
.testimonials-cta {
  position: relative;
  z-index: 2;
}

.testimonials-header {
  text-align: center;
  margin-bottom: clamp(32px, 6vh, 56px);
}

.testimonials-title {
  display: block;
  margin-top: 14px;
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  text-transform: none;
  font-size: clamp(30px, 5.2vh, 52px);
  line-height: 1.15;
  letter-spacing: 0;
  color: var(--text);
}

/* full-bleed track that scrolls itself continuously — no buttons needed */
.testimonials-marquee {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  opacity: 0;
  transition: opacity 700ms var(--ease-out-quart);
}

.testimonials-marquee.is-visible {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .testimonials-marquee {
    transition: opacity 200ms linear;
  }
}

.testimonials-track {
  display: flex;
  width: max-content;
  gap: 24px;
  padding: 4px 20px;
  animation: testimonials-scroll 46s linear infinite;
}

.testimonials-marquee:hover .testimonials-track,
.testimonials-marquee:focus-within .testimonials-track {
  animation-play-state: paused;
}

@keyframes testimonials-scroll {
  from {
    transform: translateX(0);
  }
  to {
    /* the track holds the card set twice, so -50% is exactly one full loop */
    transform: translateX(-50%);
  }
}

.testimonial-card {
  flex: 0 0 340px;
  box-sizing: border-box;
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: clamp(20px, 4vh, 32px) clamp(18px, 3vw, 28px);
  text-align: center;
  transition: background 0.3s ease, border-color 0.3s ease;
}

.testimonial-quote {
  display: block;
  font-family: 'Anton', sans-serif;
  font-size: 64px;
  line-height: 1;
  color: var(--accent);
  opacity: 0.35;
}

.testimonial-stars {
  margin-top: -8px;
  color: #f5b400;
  font-size: 18px;
  letter-spacing: 3px;
}

.testimonial-message {
  margin-top: 18px;
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  font-style: italic;
  font-size: clamp(14px, 1.9vh, 18px);
  line-height: 1.75;
  color: var(--text-soft);
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}

.testimonial-author {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.testimonial-name {
  font-family: 'Baloo 2', sans-serif;
  font-weight: 700;
  font-size: 15px;
  color: var(--text);
}

.testimonial-source {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'Poppins', sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-soft);
}

.testimonial-source svg {
  width: 14px;
  height: 14px;
}

.testimonials-cta {
  margin-top: clamp(32px, 6vh, 48px);
  text-align: center;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 600ms var(--ease-out-quart), transform 600ms var(--ease-out-quart);
}

.testimonials-cta.is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .testimonials-cta {
    transition: opacity 200ms linear;
    transform: none;
  }
}

.google-review-button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 12px 24px;
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.google-review-button svg {
  width: 18px;
  height: 18px;
}

.google-review-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.16);
}

@media (max-width: 560px) {
  .testimonial-card {
    flex-basis: 280px;
  }

  .testimonial-quote {
    font-size: 48px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .testimonials-track {
    animation: none;
  }

  .testimonials-marquee {
    overflow-x: auto;
  }

  /* the duplicated set only exists to make the animated loop seamless;
     without animation it would just be a confusing second copy to scroll past */
  .testimonial-card[aria-hidden="true"] {
    display: none;
  }
}

/* ==========================================================================
   CONTACT SECTION — "Restons connectés": plain theme-aware background like
   every other content section (.services-section, .moments-section — black
   in dark mode, white in light mode), accent left un-pinned so it inherits
   the site's own blue (var(--accent)) like every other component
   ========================================================================== */
.contact-section {
  background: var(--surface);
  transition: background 0.3s ease;
  padding: clamp(64px, 12vh, 120px) 20px;
}

.contact-top {
  max-width: 600px;
  margin: 0 auto clamp(48px, 8vh, 80px);
  text-align: center;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 600ms var(--ease-out-quart), transform 600ms var(--ease-out-quart);
}

.contact-top.is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .contact-top {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

.contact-top-title {
  margin-top: 14px;
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: clamp(32px, 5.6vh, 52px);
  line-height: 1.15;
  color: var(--text);
}

.contact-top-subtitle {
  margin-top: 14px;
  font-family: 'Poppins', sans-serif;
  font-size: clamp(13.5px, 1.7vh, 15.5px);
  line-height: 1.7;
  color: var(--text-soft);
}

.contact-social-row {
  margin-top: clamp(24px, 4vh, 36px);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(24px, 4vw, 40px);
}

.contact-social-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-soft);
  transition: color 0.25s ease, transform 0.25s ease;
}

.contact-social-icon svg {
  width: 24px;
  height: 24px;
}

.contact-social-icon:hover {
  color: var(--accent);
  transform: translateY(-2px);
}

.contact-title {
  display: block;
  margin-top: 18px;
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  text-transform: none;
  font-size: clamp(30px, 5vh, 44px);
  line-height: 1.2;
  letter-spacing: 0;
  color: var(--text);
}

.contact-subtitle {
  margin-top: 16px;
  max-width: 420px;
  font-family: 'Poppins', sans-serif;
  font-size: clamp(13px, 1.6vh, 15px);
  line-height: 1.75;
  color: var(--text-soft);
}

.contact-checklist {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  list-style: none;
}

.contact-checklist li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-family: 'Poppins', sans-serif;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text-soft);
}

.contact-check-icon {
  flex-shrink: 0;
  margin-top: 1px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--blue) 0%, var(--blue-deep) 100%);
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.contact-inner {
  max-width: 1000px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(32px, 6vw, 72px);
  /* stretch (grid's default) instead of start: lets .contact-info-col match
     the taller form card's height, so the location-map-slot below has real
     empty space to center into / expand to fill */
  align-items: stretch;
}

.contact-info-col {
  display: flex;
  flex-direction: column;
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

/* honeypot — off-screen, not display:none, so field-presence checks in
   basic bots still "see" and fill it; real visitors never do */
.form-honeypot {
  position: absolute;
  left: -9999px;
  top: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-field label {
  font-family: 'Poppins', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--text-soft);
}

.form-field label .required {
  color: var(--accent);
}

/* simple bordered fields (no glow, no blur) */
.form-field input,
.form-field select,
.form-field textarea {
  font-family: 'Poppins', sans-serif;
  /* 16px minimum — anything smaller triggers an auto-zoom on focus in
     iOS Safari */
  font-size: 16px;
  color: var(--text);
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  outline: none;
  transition: border-color 0.2s ease;
}

.form-field input::placeholder,
.form-field textarea::placeholder {
  color: var(--text-soft);
  opacity: 0.7;
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  border-color: var(--accent);
}

.form-field select {
  cursor: pointer;
}

.form-field textarea {
  resize: vertical;
  min-height: 90px;
}

/* pill toggle used in place of a <select> for "Type d'événement" on the
   home page's contact section (contacts.html keeps the plain <select>) */
.event-type-toggle {
  display: flex;
  gap: 10px;
}

.event-type-btn {
  flex: 1;
  padding: 12px 16px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-soft);
  color: var(--text-soft);
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.event-type-btn.is-active {
  background: linear-gradient(90deg, var(--blue) 0%, var(--blue-deep) 100%);
  border-color: transparent;
  color: #ffffff;
}

@media (max-width: 480px) {
  .event-type-toggle {
    flex-direction: column;
  }
}

.form-submit {
  align-self: flex-start;
  margin-top: 8px;
  padding: 13px 32px;
  border: none;
  border-radius: 999px;
  background: var(--accent);
  color: #ffffff;
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  cursor: pointer;
  transition: transform 0.25s ease, background 0.25s ease;
}

/* mobile tap-target floor (cahier §4: 44px min) on the primary buttons a
   thumb actually taps — .navbar-mobile a / .navbar-mobile-cta already meet
   this via their own rule above, and .navbar-cta is hidden on mobile, so
   neither needs repeating here */
@media (max-width: 700px) {
  .form-submit,
  .cta-button,
  .about-cta-button,
  .portfolio-filter,
  .page-banner-cta {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

.form-submit:hover {
  transform: translateY(-2px);
  background: var(--blue-deep);
}

.form-submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

/* no boxed card on the home page's contact section — plain, airy fields
   sitting straight on the section background instead */
.contact-section .contact-form-card {
  background: none;
  border: none;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
}

.contact-section .contact-form-card .contact-form {
  margin-top: 0;
  gap: 28px;
}

/* underline fields instead of boxed inputs — the "basic and elegant"
   look the container-free version calls for */
.contact-section .form-field input,
.contact-section .form-field select,
.contact-section .form-field textarea {
  background: none;
  border: none;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  padding: 10px 2px;
}

.contact-section .form-field input:focus,
.contact-section .form-field select:focus,
.contact-section .form-field textarea:focus {
  border-bottom-color: var(--accent);
}

.contact-section .form-submit {
  width: 100%;
  align-self: stretch;
  text-transform: none;
  letter-spacing: normal;
  font-size: 15px;
  padding: 15px 32px;
  background: linear-gradient(90deg, var(--blue) 0%, var(--blue-deep) 100%);
}

.contact-section .form-submit:hover {
  background: linear-gradient(90deg, var(--blue-deep) 0%, var(--blue) 100%);
}

.form-status {
  min-height: 18px;
  font-family: 'Poppins', sans-serif;
  font-size: 13px;
  color: var(--accent);
}

.form-status.is-error {
  color: #f87171;
}

@media (max-width: 900px) {
  .contact-inner {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .form-row {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer {
  position: relative;
  overflow: hidden;
  background: var(--surface);
  border-top: 1px solid var(--border);
  padding: 56px 0 0;
  transition: background 0.3s ease;
}

.footer-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 40px;
}

.footer-logo {
  font-family: 'Baloo 2', sans-serif;
  font-weight: 800;
  font-size: 20px;
  color: var(--text);
  text-decoration: none;
}

.footer-logo span {
  color: var(--accent);
}

.footer-brand p {
  margin-top: 14px;
  max-width: 320px;
  font-family: 'Poppins', sans-serif;
  font-size: 13px;
  line-height: 1.7;
  color: var(--text-soft);
}

.footer-socials {
  margin-top: 18px;
  display: flex;
  gap: 10px;
}

.footer-socials a {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-soft);
  transition: color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.footer-socials a:hover {
  color: var(--accent);
  border-color: var(--accent);
  transform: translateY(-2px);
}

.footer-socials svg {
  width: 16px;
  height: 16px;
}

.footer-links h3,
.footer-contact h3 {
  font-family: 'Poppins', sans-serif;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text);
  margin-bottom: 14px;
}

.footer-links,
.footer-contact {
  display: flex;
  flex-direction: column;
}

.footer-links a,
.footer-contact a,
.footer-contact span {
  margin-bottom: 10px;
  font-family: 'Poppins', sans-serif;
  font-size: 13px;
  color: var(--text-soft);
  text-decoration: none;
}

.footer-links a:hover,
.footer-contact a:hover {
  color: var(--accent);
}

.footer-whatsapp {
  color: var(--accent) !important;
  font-weight: 600;
}

/* big outline wordmark, full-bleed across the footer — purely decorative,
   adapts to the theme via var(--text) instead of a hardcoded color.
   "INESEVENTS" — adapted from the React Bits "Stroke Text" component
   (reactbits.dev/text-animations/stroke-text): each letter's outline draws
   itself in (stroke-dasharray/-dashoffset) once scrolled into view,
   staggered; a white base with a blue-accent shimmer then follows the
   cursor, revealed through a radial-gradient mask centered on the
   pointer (script.js updates the mask's cx/cy on pointermove) */
.footer-hover-text {
  display: block;
  width: 100%;
  max-width: 34%;
  margin: 0 auto;
  line-height: 0;
  padding: 4px 0 0;
  user-select: none;
  cursor: default;
}

.footer-hover-text svg {
  display: block;
  width: 100%;
  height: auto;
}

/* the contour is the only part visible by default — it carries the white
   shimmer (animated gradient, see the <animate> tags on
   #footerHoverTextGradient in the markup) so the wordmark reads clearly as
   it draws itself in, in both themes. The fill (middle of the letters)
   stays hidden until the cursor moves over it — see .footer-hover-text-fill
   below for that spotlight effect */
.footer-hover-text-stroke {
  fill: none;
  stroke: url(#footerHoverTextGradient);
  stroke-width: 0.6px;
  stroke-linejoin: round;
  stroke-linecap: round;
  font-family: 'Poppins', sans-serif;
  font-weight: 800;
}

.footer-hover-text-stroke tspan {
  /* must be >= the longest letter's own outline length at font-size 160,
     or that letter's dash pattern wraps into a gap before finishing —
     520 was too short for wider letters (E, S, N…) and left them
     partially undrawn; the transition duration doesn't depend on this
     number, so oversizing it is free */
  stroke-dasharray: 1200;
  stroke-dashoffset: 1200;
  transition: stroke-dashoffset 2.2s var(--ease-out-quart);
  transition-delay: calc(var(--i, 0) * 110ms);
}

.footer-hover-text.is-visible .footer-hover-text-stroke tspan {
  stroke-dashoffset: 0;
}

.footer-hover-text-fill {
  fill: url(#footerHoverTextGradient);
  font-family: 'Poppins', sans-serif;
  font-weight: 800;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.footer-hover-text.is-hovering .footer-hover-text-fill {
  opacity: 1;
}

/* base tone follows var(--text) — reads white in dark mode (default view),
   dark navy in light mode, so the wordmark never disappears against
   .site-footer's own var(--surface) background either way; the accent-blue
   stop is only the highlight that sweeps through the middle, like light
   glinting across the letters (needs to differ from the base to stay
   visible as a moving shimmer, not just a static tint) */
.footer-hover-text-stop-a {
  stop-color: var(--text);
}

.footer-hover-text-stop-b {
  stop-color: var(--accent);
}

.footer-hover-text-stop-c {
  stop-color: var(--text);
}

@media (prefers-reduced-motion: reduce) {
  .footer-hover-text-stroke tspan {
    transition: none;
    stroke-dashoffset: 0;
  }
}

@media (hover: none) {
  .footer-hover-text-fill {
    display: none;
  }
}

.footer-bottom {
  position: relative;
  border-top: 1px solid var(--border);
  padding: 20px;
  text-align: center;
}

.footer-bottom p {
  font-family: 'Poppins', sans-serif;
  font-size: 12px;
  color: var(--text-soft);
}

@media (max-width: 700px) {
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .footer-hover-text {
    max-width: 54%;
  }
}

/* ==========================================================================
   ABOUT PAGE (a-propos.html)
   ========================================================================== */

/* ==========================================================================
   GRID TEXTURE — fine crossed-line pattern, radially masked so it fades
   toward the edges. Waitly-style ambient texture, theme-aware: the line
   color is derived from --text via color-mix so it's automatically light
   on dark surfaces and dark on light surfaces — no per-theme duplication.
   Apply by adding the class to any `position: relative` section.
   ========================================================================== */
.grid-texture {
  position: relative;
  /* own stacking context, isolated from the page — guarantees the ::before
     below always paints behind this section's content even once child
     reveal animations finish and drop the transform that would otherwise
     briefly create (then remove) their own stacking contexts */
  isolation: isolate;
}

.grid-texture::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(color-mix(in srgb, var(--text) 7%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--text) 7%, transparent) 1px, transparent 1px);
  background-size: 42px 42px;
  -webkit-mask-image: radial-gradient(ellipse 60% 60% at 50% 32%, #000 0%, transparent 72%);
  mask-image: radial-gradient(ellipse 60% 60% at 50% 32%, #000 0%, transparent 72%);
  pointer-events: none;
}

/* ==========================================================================
   SECTION EYEBROW BADGE + SUBTITLE — dot + label pill above a big section
   title, short sentence below it. Shared across every section header site-
   wide (trust, services, moments, testimonials, contact, values, timeline,
   portfolio, catalog, process) for one consistent, "professional" vocabulary
   ========================================================================== */
.eyebrow-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 16px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-soft);
  font-family: 'Poppins', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-soft);
}

.eyebrow-badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}

.section-subtitle {
  margin: 14px auto 0;
  max-width: 560px;
  font-family: 'Poppins', sans-serif;
  font-size: clamp(13.5px, 1.7vh, 15.5px);
  line-height: 1.7;
  color: var(--text-soft);
}

/* generic section header, reused by story/values/timeline for one
   consistent vocabulary across the whole about page */
.section-eyebrow {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--accent);
}

.section-title {
  margin-top: 10px;
  font-family: 'Baloo 2', sans-serif;
  font-weight: 800;
  font-size: clamp(24px, 4vh, 34px);
  line-height: 1.25;
  color: var(--text);
}

/* ---- story ---- */
.story-section {
  background: var(--surface-soft);
  padding: clamp(64px, 10vh, 120px) 20px;
  transition: background 0.3s ease;
}

.mission-vision-grid {
  max-width: 940px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 4vw, 48px);
}

.mission-vision-card {
  position: relative;
  overflow: hidden;
  text-align: center;
  padding: clamp(28px, 4vh, 40px) 24px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
  opacity: 0;
  transform: translateY(20px);
  /* plays automatically on load rather than on scroll-into-view: this is
     the very first content below the hero, and its scroll-triggered
     30%-visible threshold was rarely met on arrival (the hero fills most
     of the viewport), leaving the section looking empty until the visitor
     scrolled — same fix as .page-banner-title/.page-banner-subtitle */
  animation: page-fade-up 700ms var(--ease-out-quart) both;
  animation-delay: calc(var(--i, 0) * 150ms + 250ms);
  transition: border-color 0.25s ease, background 0.3s ease, box-shadow 0.3s ease;
}

.mission-vision-card:hover,
.mission-vision-card:focus-within {
  border-color: var(--accent);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.18);
}

.mission-vision-icon {
  width: 52px;
  height: 52px;
  margin: 0 auto 16px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  color: var(--accent);
}

.mission-vision-icon svg {
  width: 24px;
  height: 24px;
}

.story-paragraph {
  margin-top: 10px;
  font-family: 'Poppins', sans-serif;
  font-size: clamp(13px, 1.6vh, 15px);
  line-height: 1.8;
  color: var(--text-soft);
}

/* ---- values ---- */
.values-section {
  background: var(--surface);
  padding: clamp(64px, 10vh, 120px) 20px;
  transition: background 0.3s ease;
}

.values-header {
  text-align: center;
  margin-bottom: clamp(36px, 6vh, 56px);
}

.values-title {
  display: block;
  margin-top: 14px;
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  text-transform: none;
  font-size: clamp(30px, 5.2vh, 52px);
  line-height: 1.15;
  letter-spacing: 0;
  color: var(--text);
}

.values-grid {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.value-card {
  position: relative;
  overflow: hidden;
  text-align: center;
  padding: 32px 20px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface-soft);
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 600ms var(--ease-out-quart), transform 600ms var(--ease-out-quart),
    border-color 0.25s ease, background 0.3s ease, box-shadow 0.3s ease;
  transition-delay: calc(var(--i, 0) * 100ms);
}

.value-card.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.value-card:hover,
.value-card:focus-within {
  border-color: var(--accent);
  transform: translateY(-4px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.18);
}

.value-icon {
  width: 52px;
  height: 52px;
  margin: 0 auto;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  color: var(--accent);
}

.value-icon svg {
  width: 24px;
  height: 24px;
}

.value-title {
  margin-top: 18px;
  font-family: 'Baloo 2', sans-serif;
  font-weight: 800;
  font-size: 17px;
  color: var(--text);
}

.value-description {
  margin-top: 10px;
  font-family: 'Poppins', sans-serif;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-soft);
}

/* ---- timeline ---- */
.timeline-section {
  background: var(--surface-soft);
  padding: clamp(64px, 10vh, 120px) 20px;
  transition: background 0.3s ease;
}

.timeline-header {
  text-align: center;
  margin-bottom: clamp(36px, 6vh, 56px);
}

.timeline-header-title {
  display: block;
  margin-top: 14px;
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  text-transform: none;
  font-size: clamp(30px, 5.2vh, 52px);
  line-height: 1.15;
  letter-spacing: 0;
  color: var(--text);
}

.timeline {
  position: relative;
  max-width: 640px;
  margin: 0 auto;
  padding-left: 32px;
}

.timeline-line {
  position: absolute;
  left: 7px;
  top: 4px;
  bottom: 4px;
  width: 2px;
  background: var(--border);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 1.1s var(--ease-out-quint);
}

.timeline.is-visible .timeline-line {
  transform: scaleY(1);
}

.timeline-item {
  position: relative;
  padding-bottom: 40px;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 500ms var(--ease-out-quart), transform 500ms var(--ease-out-quart);
  transition-delay: calc(var(--i, 0) * 150ms);
}

.timeline.is-visible .timeline-item {
  opacity: 1;
  transform: translateY(0);
}

.timeline-item:last-child {
  padding-bottom: 0;
}

.timeline-dot {
  position: absolute;
  left: -32px;
  top: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--accent);
  border: 3px solid var(--surface-soft);
  box-shadow: 0 0 0 2px var(--border);
}

.timeline-marker {
  display: block;
  font-family: 'Anton', sans-serif;
  font-size: 24px;
  color: var(--accent);
}

.timeline-text {
  margin-top: 4px;
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-soft);
}

/* ---- final CTA — badge + rotating-word headline + two buttons, inspired
   by the 21st.dev "animated hero" block (framer-motion spring-in word
   carousel + outline/solid button pair), rebuilt here in vanilla CSS/JS:
   the word swap uses a CSS grid stack (each word shares the same cell, so
   the box always sizes to the longest one — no layout jump) plus a
   back-out easing curve standing in for the spring physics ---- */
/* waitlist-style: fine grid texture, bold oversized rotating headline, no
   card/blob — follows the site's light/dark toggle like every other
   section (the .grid-texture utility above already adapts automatically) */
.about-cta-section {
  position: relative;
  overflow: hidden;
  background: var(--surface);
  padding: clamp(88px, 15vh, 160px) 20px;
  text-align: center;
  transition: background 0.3s ease;
}

.about-cta-badge {
  position: relative;
  z-index: 1;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 500ms var(--ease-out-quart), transform 500ms var(--ease-out-quart);
}

.about-cta-section.is-visible .about-cta-badge {
  opacity: 1;
  transform: none;
}

/* two-tier headline, matching the reference: a plain lead line, then the
   rotating word on its own line, much bigger and in the accent color */
.about-cta-title {
  position: relative;
  z-index: 1;
  margin-top: 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 600ms var(--ease-out-quart) 80ms, transform 600ms var(--ease-out-quart) 80ms;
}

.about-cta-section.is-visible .about-cta-title {
  opacity: 1;
  transform: none;
}

.about-cta-title-lead {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: clamp(20px, 3.2vh, 28px);
  letter-spacing: -0.01em;
  color: var(--text);
}

.cta-rotator-line {
  display: block;
  width: 100%;
}

/* the rotating word: every .cta-rotator-word occupies the same grid cell,
   so the container's width is always the longest word's width — the
   others just fade/slide underneath, no reflow when the active one changes */
.cta-rotator {
  display: inline-grid;
  place-items: center;
  padding: 4px 0;
}

.cta-rotator-word {
  grid-area: 1 / 1;
  white-space: nowrap;
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: clamp(36px, 7vh, 68px);
  letter-spacing: -0.015em;
  color: var(--accent);
  opacity: 0;
  transform: translateY(55%);
  transition: transform 550ms cubic-bezier(0.34, 1.56, 0.64, 1), opacity 350ms ease;
  pointer-events: none;
}

.cta-rotator-word.is-active {
  opacity: 1;
  transform: translateY(0);
}

.cta-rotator-word.is-leaving {
  opacity: 0;
  transform: translateY(-55%);
}

.about-cta-subtitle {
  position: relative;
  z-index: 1;
  margin: 16px auto 0;
  max-width: 480px;
  font-family: 'Poppins', sans-serif;
  font-size: clamp(13.5px, 1.7vh, 16px);
  line-height: 1.7;
  color: var(--text-soft);
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 600ms var(--ease-out-quart) 160ms, transform 600ms var(--ease-out-quart) 160ms;
}

.about-cta-section.is-visible .about-cta-subtitle {
  opacity: 1;
  transform: none;
}

.about-cta-buttons {
  position: relative;
  z-index: 1;
  margin-top: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
}

.about-cta-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 15px 34px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--blue) 0%, var(--blue-deep) 100%);
  color: #ffffff;
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  text-decoration: none;
  border: 1px solid transparent;
  opacity: 0;
  /* opacity-only entrance (no transform) so it never fights the hover
     lift below on specificity */
  transition: opacity 500ms var(--ease-out-quart) 240ms, transform 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

.about-cta-section.is-visible .about-cta-button {
  opacity: 1;
}

/* .page-banner-cta reuses .about-cta-button outside any .about-cta-section
   (services-evenementiel.html's hero banner) — that entrance rule above
   never fires there, so force it visible directly instead */
.page-banner-cta.about-cta-button {
  opacity: 1;
  /* less horizontal breathing room than the base 34px — reads too loose
     next to the shorter hero titles on the secondary pages */
  padding: 15px 26px;
}

.about-cta-button:hover {
  transform: translateY(-2px);
}

/* secondary/outline button — the reference's second, quieter CTA */
.about-cta-button--ghost {
  background: transparent;
  border-color: var(--border);
  color: var(--text);
  box-shadow: none;
}

.about-cta-button--ghost:hover {
  border-color: var(--accent);
  color: var(--accent);
  box-shadow: none;
}

.about-cta-button svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

@media (prefers-reduced-motion: reduce) {
  .about-cta-badge,
  .about-cta-title,
  .about-cta-subtitle,
  .about-cta-button {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .cta-rotator-word {
    transition: opacity 200ms linear;
    transform: none;
  }
}

@media (max-width: 700px) {
  .mission-vision-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 900px) {
  .values-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .values-grid {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-banner-title,
  .page-banner-subtitle,
  .mission-vision-card {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .value-card,
  .timeline-item {
    transition: opacity 200ms linear;
    transform: none;
  }

  .timeline-line {
    transition: none;
    transform: scaleY(1);
  }
}

/* ==========================================================================
   CONTACT PAGE (contacts.html)
   ========================================================================== */

/* ---- hero banner: glow + rounded-bottom "card" cut into the section below ---- */
.page-banner {
  position: relative;
  overflow: hidden;
  background: var(--surface-soft);
  border-radius: 0 0 48px 48px;
  padding: clamp(120px, 18vh, 160px) 20px clamp(56px, 9vh, 88px);
  text-align: center;
  transition: background 0.3s ease;
}

/* shared backdrop photo (same striking night-festival shot across every
   secondary page for a consistent, cinematic sub-page identity) + a
   gradient scrim so the title/subtitle stay legible regardless of theme —
   mirrors the treatment on the homepage's own .hero */
.page-banner-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 32%;
  filter: brightness(0.8) contrast(1.05);
  z-index: 0;
}

.page-banner-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(2, 6, 20, 0.35) 0%, rgba(2, 6, 20, 0.55) 55%, rgba(2, 6, 20, 0.82) 100%);
  z-index: 0;
}

.page-banner-glow {
  position: absolute;
  top: 10%;
  left: 50%;
  width: min(50vw, 560px);
  height: min(50vw, 560px);
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(79, 195, 247, 0.35) 0%, transparent 70%);
  filter: blur(10px);
  pointer-events: none;
}

.page-banner-title {
  position: relative;
  z-index: 1;
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  text-transform: none;
  font-size: clamp(32px, 6vh, 56px);
  letter-spacing: 0;
  color: var(--white);
  text-shadow: 0 6px 28px rgba(0, 0, 0, 0.5);
  opacity: 0;
  transform: translateY(20px);
  animation: page-fade-up 700ms var(--ease-out-quart) both;
}

.page-banner-subtitle {
  position: relative;
  z-index: 1;
  margin: 14px auto 0;
  max-width: 480px;
  font-family: 'Poppins', sans-serif;
  font-size: clamp(13px, 1.7vh, 16px);
  line-height: 1.7;
  color: var(--gray);
  opacity: 0;
  transform: translateY(20px);
  animation: page-fade-up 700ms var(--ease-out-quart) both;
  animation-delay: 120ms;
}

/* full hero treatment (bolder/tighter-tracked title, eyebrow, CTA, scroll
   cue, floating orbs) — now shared by all four secondary pages, not just
   Services, so none of them reads as the "small" version */
.services-banner .page-banner-title,
.about-banner .page-banner-title,
.portfolio-banner .page-banner-title,
.contact-banner .page-banner-title,
.payment-banner .page-banner-title {
  font-size: clamp(36px, 7vh, 64px);
  letter-spacing: -0.02em;
}

.services-banner .page-banner-subtitle,
.about-banner .page-banner-subtitle,
.portfolio-banner .page-banner-subtitle,
.contact-banner .page-banner-subtitle,
.payment-banner .page-banner-subtitle {
  max-width: 520px;
}

@keyframes page-fade-up {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ---- contact intro — big title + bordered "spec sheet" info grid,
   after 21st.dev "Contact Page" (@sshahaider) ---- */
.contact-intro-section {
  background: var(--surface);
  padding: clamp(56px, 9vh, 96px) 20px;
  transition: background 0.3s ease;
}

.contact-intro-inner {
  max-width: 1100px;
  margin: 0 auto;
}

/* same eyebrow-badge + title convention as the homepage's own section
   headers (.moments-header/.moments-title, .testimonials-header/...) */
.contact-intro-header {
  text-align: center;
  margin-bottom: clamp(32px, 6vh, 56px);
  /* on-load animation, not scroll-gated — this is the first content below
     the hero, and the shared scroll-reveal threshold (30% visible) rarely
     fired on arrival since the hero above fills most of the viewport */
  opacity: 0;
  transform: translateY(20px);
  animation: page-fade-up 700ms var(--ease-out-quart) both;
  animation-delay: 250ms;
}

@media (prefers-reduced-motion: reduce) {
  .contact-intro-header {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

.contact-intro-title {
  display: block;
  margin-top: 14px;
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  text-transform: none;
  font-size: clamp(30px, 5.2vh, 52px);
  line-height: 1.15;
  letter-spacing: 0;
  color: var(--text);
}

.contact-spec-grid {
  margin-top: clamp(36px, 6vh, 56px);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
}

.contact-spec-col {
  padding: 18px 22px 22px;
  border-left: 1px solid var(--border);
}

.contact-spec-col:first-child {
  border-left: none;
}

.contact-spec-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 13px;
  color: var(--text);
}

.contact-spec-head svg {
  width: 16px;
  height: 16px;
  color: var(--accent);
  flex-shrink: 0;
}

.contact-spec-value {
  margin-top: 16px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.contact-spec-value span,
.contact-spec-value a {
  font-family: 'Poppins', sans-serif;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-soft);
}

.contact-spec-value a {
  text-decoration: none;
  transition: color 0.2s ease;
}

.contact-spec-value a:hover {
  color: var(--accent);
  text-decoration: underline;
}

.contact-spec-copy {
  flex-shrink: 0;
  position: relative;
  width: 26px;
  height: 26px;
  border: none;
  background: none;
  color: var(--text-soft);
  cursor: pointer;
  transition: color 0.2s ease;
}

.contact-spec-copy:hover {
  color: var(--accent);
}

.contact-spec-copy svg {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 15px;
  height: 15px;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.contact-spec-copy .icon-check {
  opacity: 0;
  transform: scale(0.6);
  color: #34d399;
}

.contact-spec-copy.is-copied .icon-copy {
  opacity: 0;
  transform: scale(0.6);
}

.contact-spec-copy.is-copied .icon-check {
  opacity: 1;
  transform: scale(1);
}

.contact-social-block {
  margin-top: 48px;
  text-align: center;
}

.contact-social-title {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: clamp(22px, 3vw, 30px);
  color: var(--text);
}

/* "Find us online" pill style — icon + label, one per network */
.contact-social-pills {
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.contact-social-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface-soft);
  color: var(--text);
  font-family: 'Poppins', sans-serif;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.contact-social-pill:hover {
  color: var(--accent);
  border-color: var(--accent);
  transform: translateY(-2px);
}

.contact-social-pill svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* ---- form card ---- */
.contact-form-card {
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: clamp(26px, 4vh, 40px);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.25);
  opacity: 0;
  transform: translateX(24px);
  transition: opacity 700ms var(--ease-out-quart), transform 700ms var(--ease-out-quart),
    background 0.3s ease, border-color 0.3s ease;
}

.contact-form-card.is-visible {
  opacity: 1;
  transform: translateX(0);
}

.contact-form-card .contact-form {
  margin-top: 22px;
}

.form-submit-gradient {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: linear-gradient(90deg, var(--blue) 0%, var(--blue-deep) 100%);
}

.form-submit-gradient:hover {
  background: linear-gradient(90deg, var(--blue-deep) 0%, var(--blue) 100%);
}

.form-submit-gradient svg {
  width: 16px;
  height: 16px;
}

/* ---- form (left) + compact "let's work together" (right) ---- */
.contact-split-section {
  background: var(--surface);
  padding: 0 20px clamp(56px, 9vh, 96px);
  transition: background 0.3s ease;
}

.contact-split-grid {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 4vw, 40px);
  align-items: stretch;
}

/* ---- elegant form — small, after 21st.dev "Form 1" (@prebuiltui) ---- */
.contact-form-elegant {
  text-align: center;
}

/* no boxed card here either — same borderless, background-free treatment
   as the compact "let's work together" column beside it and as the
   homepage's own .contact-section .contact-form-card */
.contact-split-section .contact-form-card {
  background: none;
  border: none;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
}

.contact-form-elegant-fields {
  text-align: left;
}

.elegant-field {
  margin-top: 16px;
}

.elegant-field label {
  display: block;
  margin-bottom: 6px;
  font-family: 'Poppins', sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-soft);
}

.elegant-input {
  position: relative;
}

.elegant-input svg {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: var(--text-soft);
  pointer-events: none;
}

.elegant-input input,
.elegant-input select {
  width: 100%;
  padding: 12px 16px 12px 42px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-family: 'Poppins', sans-serif;
  font-size: 13px;
  transition: border-color 0.2s ease;
}

.elegant-input input:focus,
.elegant-input select:focus {
  outline: none;
  border-color: var(--accent);
}

.elegant-field textarea {
  width: 100%;
  padding: 14px 16px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-family: 'Poppins', sans-serif;
  font-size: 13px;
  line-height: 1.6;
  resize: vertical;
  transition: border-color 0.2s ease;
}

.elegant-field textarea:focus {
  outline: none;
  border-color: var(--accent);
}

.contact-form-elegant-fields .form-submit {
  margin-top: 22px;
}

/* ---- compact "let's work together" — right column of .contact-split-grid,
   reuses .lets-work-section (see LET'S WORK TOGETHER further down) but at
   card scale instead of full-viewport-height hero scale. Overrides need
   higher specificity than that component's own min-width media queries
   (which key off the viewport, not this column) — a plain selector here
   beats those regardless of which breakpoint is active. ---- */
.lets-work-section--compact {
  min-height: auto;
  height: 100%;
  padding: clamp(28px, 4vh, 40px) 20px;
  box-sizing: border-box;
  transition: background 0.3s ease;
}

.lets-work-section--compact .lets-work-stage {
  gap: 24px;
}

.lets-work-section--compact .lets-work-title {
  font-size: clamp(22px, 2.6vw, 30px);
}

.lets-work-section--compact .lets-work-orb {
  width: 48px;
  height: 48px;
}

.lets-work-section--compact .lets-work-orb-arrow {
  width: 18px;
  height: 18px;
}

.lets-work-section--compact .lets-work-divider {
  width: 20px;
}

.lets-work-section--compact .lets-work-divider--left {
  left: -16px;
}

.lets-work-section--compact .lets-work-divider--right {
  right: -16px;
}

.lets-work-section--compact .lets-work-desc {
  max-width: 320px;
  font-size: 13px;
}

.lets-work-section--compact .lets-work-success-title {
  font-size: 26px;
}

.lets-work-section--compact .lets-work-book-pill {
  padding: 12px 22px;
  font-size: 13px;
}

/* ---- full-bleed map — real, interactive Google Maps embed ---- */
.contact-map-full {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  height: clamp(320px, 42vh, 440px);
}

.contact-map-full iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
  transition: filter 0.3s ease;
}

/* dark mode: invert the map to black instead of showing Google's bright
   default colors (light mode keeps the map's natural look) */
.contact-map-full iframe {
  filter: invert(1) grayscale(1) brightness(0.9) contrast(1.1);
}

[data-theme="light"] .contact-map-full iframe {
  filter: none;
}

@media (max-width: 860px) {
  .contact-spec-grid {
    grid-template-columns: 1fr;
  }

  .contact-spec-col {
    border-left: none;
    border-top: 1px solid var(--border);
  }

  .contact-spec-col:first-child {
    border-top: none;
  }

  .contact-split-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .form-row {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .contact-main-info,
  .contact-form-card {
    transition: opacity 200ms linear;
    transform: none;
  }
}

/* ==========================================================================
   PORTFOLIO PAGE (portfolio.html)
   ========================================================================== */
.portfolio-section {
  background: var(--surface);
  padding: clamp(56px, 9vh, 96px) 20px;
  transition: background 0.3s ease;
}

.portfolio-header {
  max-width: 640px;
  margin: 0 auto clamp(28px, 4.5vh, 40px);
  text-align: center;
  /* on-load animation, not scroll-gated — this is the first content below
     the hero, and the shared scroll-reveal threshold (30% visible) rarely
     fired on arrival since the hero above fills most of the viewport */
  opacity: 0;
  transform: translateY(20px);
  animation: page-fade-up 700ms var(--ease-out-quart) both;
  animation-delay: 250ms;
}

@media (prefers-reduced-motion: reduce) {
  .portfolio-header {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

.portfolio-title {
  margin-top: 14px;
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  text-transform: none;
  font-size: clamp(28px, 4.6vh, 44px);
  line-height: 1.2;
  color: var(--text);
}

.portfolio-filters {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: clamp(28px, 4.5vh, 40px);
  flex-wrap: wrap;
}

.portfolio-filter {
  padding: 10px 22px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: transparent;
  color: var(--text-soft);
  font-family: 'Poppins', sans-serif;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.portfolio-filter:hover {
  border-color: var(--accent);
  color: var(--text);
}

.portfolio-filter.is-active {
  background: var(--accent);
  border-color: var(--accent);
  color: #ffffff;
}

/* masonry via CSS Grid + a per-photo row-span (--rspan, inlined per item —
   computed from that photo's real aspect ratio so tall/wide photos take
   more/less vertical space instead of being force-cropped to one shape).
   grid-auto-flow fills row by row, left to right, top to bottom, so DOM
   order is what actually shows up first — unlike a CSS-columns masonry,
   which fills column by column and stacks "first" items down the left
   edge instead of across the top rows. */
.portfolio-grid {
  max-width: 1300px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 8px;
  gap: 14px;
}

.portfolio-item {
  grid-row: span var(--rspan, 30);
  cursor: pointer;
  border-radius: 0;
  overflow: hidden;
  transition: transform 400ms var(--ease-out-quart), opacity 300ms ease;
}

.portfolio-item.is-filtered-out {
  display: none;
}

.portfolio-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 500ms var(--ease-out-quart);
}

.portfolio-item:hover img {
  transform: scale(1.08);
}

@media (max-width: 1000px) {
  .portfolio-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 700px) {
  .portfolio-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .portfolio-item img {
    transition: none;
  }
}

/* ---- photo modal — small centered popup, not a full-viewport lightbox ---- */
.photo-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  background: rgba(0, 0, 0, 0.82);
  opacity: 0;
  visibility: hidden;
  transition: opacity 280ms ease, visibility 0s linear 280ms;
}

.photo-modal.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity 280ms ease, visibility 0s linear 0s;
}

.photo-modal-img {
  max-width: min(640px, 90vw);
  max-height: 80vh;
  width: auto;
  height: auto;
  border-radius: 4px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  transform: scale(0.94);
  transition: transform 280ms var(--ease-out-quart);
}

.photo-modal.is-open .photo-modal-img {
  transform: scale(1);
}

.photo-modal-close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.photo-modal-close:hover {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.5);
}

.photo-modal-close svg {
  width: 18px;
  height: 18px;
}

body.modal-open {
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .photo-modal,
  .photo-modal-img {
    transition: none;
  }
}

/* ==========================================================================
   SERVICES PAGE (services-evenementiel.html)
   ========================================================================== */

/* ---- hero: page-banner + floating glow orbs + scroll cue ---- */
.services-banner {
  overflow: hidden;
}

.services-banner-eyebrow {
  position: relative;
  z-index: 1;
}

.page-banner-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(40px);
  pointer-events: none;
  opacity: 0.6;
  animation: orb-float 9s ease-in-out infinite;
}

.page-banner-orb--1 {
  width: 220px;
  height: 220px;
  left: 8%;
  top: 22%;
  background: radial-gradient(circle, rgba(79, 195, 247, 0.55) 0%, transparent 70%);
}

.page-banner-orb--2 {
  width: 160px;
  height: 160px;
  right: 10%;
  top: 12%;
  background: radial-gradient(circle, rgba(79, 195, 247, 0.5) 0%, transparent 70%);
  animation-delay: 2s;
}

.page-banner-orb--3 {
  width: 130px;
  height: 130px;
  right: 20%;
  bottom: 8%;
  background: radial-gradient(circle, rgba(79, 195, 247, 0.4) 0%, transparent 70%);
  animation-delay: 4s;
}

@keyframes orb-float {
  0%, 100% {
    transform: translate(0, 0) scale(1);
  }
  50% {
    transform: translate(14px, -18px) scale(1.08);
  }
}

.page-banner-cta {
  position: relative;
  z-index: 1;
  margin-top: 30px;
}

.page-banner-scroll-cue {
  position: relative;
  z-index: 1;
  margin: 34px auto 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: fit-content;
  color: var(--gray);
  text-decoration: none;
  font-family: 'Poppins', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  transition: color 0.2s ease;
}

.page-banner-scroll-cue:hover {
  color: var(--accent);
}

.page-banner-scroll-cue svg {
  width: 18px;
  height: 18px;
  color: var(--accent);
  animation: scroll-cue-bounce 1.8s ease-in-out infinite;
}

@keyframes scroll-cue-bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(6px);
  }
}

/* ---- ticker — full-bleed scrolling strip of event types ---- */
.ticker-section {
  background: var(--surface-soft);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 18px 0;
  overflow: hidden;
  transition: background 0.3s ease, border-color 0.3s ease, opacity 700ms var(--ease-out-quart);
  opacity: 0;
}

.ticker-section.is-visible {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .ticker-section {
    transition: background 0.3s ease, border-color 0.3s ease, opacity 200ms linear;
  }
}

.ticker-track {
  display: flex;
  width: max-content;
  animation: ticker-scroll 30s linear infinite;
}

.ticker-section:hover .ticker-track,
.ticker-section:focus-within .ticker-track {
  animation-play-state: paused;
}

@keyframes ticker-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

.ticker-item {
  display: flex;
  align-items: center;
  padding: 0 24px;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--text-soft);
  white-space: nowrap;
}

.ticker-item::after {
  content: '\2726';
  margin-left: 24px;
  color: var(--accent);
}

/* ---- catalog — 6 service cards with tilt + spotlight + spinning glow ---- */
.catalog-section {
  background: var(--surface);
  padding: clamp(64px, 10vh, 120px) 20px;
  transition: background 0.3s ease;
}

.catalog-header {
  text-align: center;
  margin-bottom: clamp(40px, 6vh, 64px);
}

.catalog-title {
  display: block;
  margin-top: 14px;
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  text-transform: none;
  font-size: clamp(30px, 5.2vh, 52px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--text);
}

.catalog-grid {
  max-width: 880px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 44px 32px;
}

.catalog-card {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 600ms var(--ease-out-quart), transform 600ms var(--ease-out-quart);
  transition-delay: calc(var(--i, 0) * 90ms);
}

.catalog-card.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.catalog-card-inner {
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  --lift: 0px;
  position: relative;
  height: 100%;
  border-radius: 22px;
  background: var(--surface-soft);
  border: 1px solid var(--border);
  overflow: hidden;
  transform: perspective(900px) translateY(var(--lift)) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
  transition: transform 300ms var(--ease-out-quart), box-shadow 0.3s ease, border-color 0.3s ease, background 0.3s ease;
}

.catalog-card-inner:hover,
.catalog-card-inner:focus-within {
  --lift: -6px;
  border-color: var(--accent);
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.35);
}

.catalog-card-inner:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* cursor-following spotlight */
.catalog-card-inner::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: radial-gradient(320px circle at var(--glow-x, 50%) var(--glow-y, 50%), color-mix(in srgb, var(--accent) 22%, transparent) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.catalog-card-inner:hover::before,
.catalog-card-inner:focus-within::before {
  opacity: 1;
}

/* rotating gradient ring, revealed on hover */
.catalog-card-inner::after {
  content: '';
  position: absolute;
  inset: -1px;
  z-index: 1;
  border-radius: inherit;
  padding: 1px;
  background: conic-gradient(from 0deg, transparent 0%, var(--accent) 12%, transparent 28%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  animation: spin-border 3s linear infinite;
  animation-play-state: paused;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.catalog-card-inner:hover::after,
.catalog-card-inner:focus-within::after {
  opacity: 1;
  animation-play-state: running;
}

@keyframes spin-border {
  to {
    transform: rotate(360deg);
  }
}

.catalog-card-media {
  position: relative;
  height: 190px;
  overflow: hidden;
}

.catalog-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 500ms var(--ease-out-quart);
}

.catalog-card-inner:hover .catalog-card-media img {
  transform: scale(1.08);
}

.catalog-card-icon {
  position: relative;
  z-index: 2;
  width: 52px;
  height: 52px;
  margin-left: 24px;
  margin-top: -26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--accent);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
  transition: transform 0.3s var(--ease-out-quart), background 0.3s ease, border-color 0.3s ease;
}

.catalog-card-inner:hover .catalog-card-icon,
.catalog-card-inner:focus-within .catalog-card-icon {
  transform: scale(1.1) rotate(-8deg);
  border-color: var(--accent);
}

.catalog-card-icon svg {
  width: 24px;
  height: 24px;
}

.catalog-card-body {
  position: relative;
  z-index: 1;
  padding: 18px 24px 28px;
}

.catalog-card-title {
  font-family: 'Baloo 2', sans-serif;
  font-weight: 800;
  font-size: 18px;
  line-height: 1.3;
  color: var(--text);
}

.catalog-card-tagline {
  margin-top: 6px;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 13px;
  color: var(--accent);
}

.catalog-card-desc {
  margin-top: 10px;
  font-family: 'Poppins', sans-serif;
  font-size: 13px;
  line-height: 1.7;
  color: var(--text-soft);
}

.catalog-features {
  margin-top: 16px;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.catalog-features li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-family: 'Poppins', sans-serif;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-soft);
}

.catalog-feature-icon {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin-top: 1px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  color: var(--accent);
  font-size: 10px;
  font-weight: 700;
}

@media (max-width: 620px) {
  .catalog-grid {
    grid-template-columns: 1fr;
  }
}

/* ---- process — 4 steps, connecting line draws in once visible ---- */
.process-section {
  background: var(--surface-soft);
  padding: clamp(64px, 10vh, 120px) 20px;
  transition: background 0.3s ease;
}

.process-header {
  text-align: center;
  margin-bottom: clamp(48px, 7vh, 76px);
}

.process-title {
  display: block;
  margin-top: 14px;
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  text-transform: none;
  font-size: clamp(30px, 5.2vh, 52px);
  line-height: 1.15;
  letter-spacing: 0;
  color: var(--text);
}

.process-grid {
  position: relative;
  max-width: 1080px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}

.process-line {
  position: absolute;
  top: 25px;
  left: 12.5%;
  right: 12.5%;
  height: 2px;
  background: var(--border);
  overflow: hidden;
}

.process-line-fill {
  position: absolute;
  inset: 0;
  display: block;
  background: linear-gradient(90deg, var(--blue) 0%, var(--blue-deep) 100%);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.1s var(--ease-out-quint);
}

.process-grid.is-visible .process-line-fill {
  transform: scaleX(1);
}

.process-step {
  position: relative;
  text-align: center;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 500ms var(--ease-out-quart), transform 500ms var(--ease-out-quart);
  transition-delay: calc(var(--i, 0) * 150ms);
}

.process-grid.is-visible .process-step {
  opacity: 1;
  transform: translateY(0);
}

.process-step-number {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: var(--surface);
  border: 2px solid var(--accent);
  font-family: 'Anton', sans-serif;
  font-size: 20px;
  color: var(--accent);
}

.process-grid.is-visible .process-step-number {
  animation: pulse-ring 1.6s ease-out;
  animation-delay: calc(var(--i, 0) * 150ms + 250ms);
}

@keyframes pulse-ring {
  0% {
    box-shadow: 0 0 0 0 rgba(79, 195, 247, 0.55);
  }
  70% {
    box-shadow: 0 0 0 14px rgba(79, 195, 247, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(79, 195, 247, 0);
  }
}

.process-step-title {
  font-family: 'Baloo 2', sans-serif;
  font-weight: 800;
  font-size: 16px;
  color: var(--text);
}

.process-step-text {
  margin-top: 8px;
  font-family: 'Poppins', sans-serif;
  font-size: 13px;
  line-height: 1.65;
  color: var(--text-soft);
}

@media (max-width: 860px) {
  .process-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 44px 24px;
  }

  .process-line {
    display: none;
  }
}

@media (max-width: 560px) {
  .process-grid {
    grid-template-columns: 1fr;
  }
}

/* ---- stats: 4 counters here vs. 3 on the homepage, so this page needs
   its own column count (the shared .stats-grid stays repeat(3, 1fr)) ---- */
#servicesStats .stats-grid {
  grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 700px) {
  #servicesStats .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 420px) {
  #servicesStats .stats-grid {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-banner-orb,
  .page-banner-scroll-cue svg,
  .ticker-track,
  .gallery-marquee-row,
  .catalog-card-inner::after {
    animation: none;
  }

  .catalog-card,
  .catalog-card-inner,
  .catalog-card-media img,
  .process-step,
  .process-step-number,
  .process-line-fill {
    transition: opacity 200ms linear;
    transform: none;
    animation: none;
  }

  .process-grid.is-visible .process-line-fill {
    transform: none;
  }
}

/* ==========================================================================
   PRELOADER — full-screen loading curtain, present on every page (incl.
   when navigating from page to page, since each page is a full reload).
   Visible by default from first paint (body starts with .is-loading, set
   directly in the HTML — no JS/FOUC race); script.js only handles hiding
   it once the page has actually finished loading. Always the brand's dark
   neon look regardless of the site's light/dark toggle — a splash screen,
   not a themed page section — built in pure CSS (no image dependency) so
   it paints instantly.
   ========================================================================== */
/* html.is-loading is only ever added by the tiny blocking script in
   <head> (before first paint), and only when this page hasn't already
   shown the curtain this session — so it's hidden by default and never
   flashes on repeat page-to-page navigation. */
html.is-loading {
  overflow: hidden;
}

.preloader {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 200;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 30px;
  overflow: hidden;
  background: #000000;
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s linear 0s;
}

html.is-loading .preloader,
.preloader.is-hiding {
  display: flex;
}

.preloader.is-hiding {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s linear 0.7s;
}

.preloader-field {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60% 50% at 50% 38%, rgba(79, 195, 247, 0.10) 0%, transparent 70%),
    radial-gradient(45% 40% at 50% 100%, rgba(79, 195, 247, 0.07) 0%, transparent 70%);
  pointer-events: none;
}

.preloader-core {
  position: relative;
  z-index: 1;
  width: 110px;
  height: 110px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.preloader.is-hiding .preloader-core,
.preloader.is-hiding .preloader-bar {
  transform: scale(1.05);
  opacity: 0;
}

/* thin rotating glow arc, not a full ring — a single bright segment sweeps
   continuously around a barely-visible static track */
.preloader-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
}

.preloader-ring::before,
.preloader-ring::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
}

.preloader-ring::before {
  border: 1px solid rgba(79, 195, 247, 0.14);
}

.preloader-ring::after {
  background: conic-gradient(from 0deg, transparent 0%, #4fc3f7 8%, transparent 28%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2.5px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2.5px));
  filter: drop-shadow(0 0 6px rgba(79, 195, 247, 0.85));
  animation: preloader-ring-spin 1.7s linear infinite;
}

/* "IE" monogram — metallic shine sweeps across the gradient fill while a
   separate glow pulse breathes behind it */
.preloader-monogram {
  position: relative;
  z-index: 1;
  font-family: 'Anton', sans-serif;
  font-weight: 400;
  font-size: clamp(28px, 6vw, 40px);
  letter-spacing: 4px;
  line-height: 1;
  padding-left: 4px;
  background: linear-gradient(100deg, #4fc3f7 0%, #ffffff 45%, #4fc3f7 55%, #bae6fd 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: preloader-shine 2.8s ease-in-out infinite, preloader-glow-pulse 2.4s ease-in-out infinite;
}

.preloader-bar {
  position: relative;
  z-index: 1;
  width: min(180px, 50vw);
  height: 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  box-shadow: 0 0 10px rgba(79, 195, 247, 0.25);
  overflow: hidden;
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.preloader-bar::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, #4fc3f7, #bafcff, #4fc3f7, transparent);
  animation: preloader-bar-sweep 1.4s ease-in-out infinite;
}

@keyframes preloader-ring-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes preloader-shine {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: -220% 50%;
  }
}

@keyframes preloader-glow-pulse {
  0%, 100% {
    filter: drop-shadow(0 0 8px rgba(79, 195, 247, 0.55)) drop-shadow(0 0 18px rgba(79, 195, 247, 0.28));
  }
  50% {
    filter: drop-shadow(0 0 14px rgba(79, 195, 247, 0.9)) drop-shadow(0 0 34px rgba(79, 195, 247, 0.5));
  }
}

@keyframes preloader-bar-sweep {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .preloader-ring::after,
  .preloader-monogram,
  .preloader-bar::before {
    animation: none;
  }

  .preloader {
    transition: opacity 200ms linear, visibility 0s linear 0s;
  }

  .preloader.is-hiding {
    transition: opacity 200ms linear, visibility 0s linear 200ms;
  }

  .preloader-core,
  .preloader-bar {
    transition: opacity 200ms linear;
  }
}

@media (max-width: 420px) {
  .preloader-core {
    width: 92px;
    height: 92px;
  }
}

/* ==========================================================================
   CUSTOM CURSOR — bright core + soft trailing glow (neon blue), injected
   by script.js on fine-pointer desktops only. Grows on hoverable elements,
   hides over text inputs (native I-beam takes over), and pulses a thin
   ring outward on click for a bit of extra shine.
   ========================================================================== */
html.has-custom-cursor,
html.has-custom-cursor * {
  cursor: none;
}

html.has-custom-cursor input,
html.has-custom-cursor textarea,
html.has-custom-cursor select {
  cursor: auto;
}

.cursor-dot,
.cursor-ring {
  position: fixed;
  top: 0;
  left: 0;
  transform: translate(-50%, -50%);
  pointer-events: none;
  border-radius: 50%;
}

.cursor-dot {
  width: 8px;
  height: 8px;
  z-index: 9999;
  background: #4fc3f7;
  box-shadow: 0 0 6px rgba(79, 195, 247, 0.95), 0 0 14px rgba(79, 195, 247, 0.55);
  opacity: 0;
  transition: opacity 0.25s ease, width 0.25s cubic-bezier(0.16, 1, 0.3, 1), height 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

/* thin outlined ring, not a filled glow blob — a soft ambient shadow
   around the stroke is the only "glow" it has */
.cursor-ring {
  width: 40px;
  height: 40px;
  z-index: 9998;
  background: transparent;
  border: 1.5px solid rgba(79, 195, 247, 0.55);
  box-shadow: 0 0 16px rgba(79, 195, 247, 0.18), inset 0 0 10px rgba(79, 195, 247, 0.06);
  opacity: 0;
  transition: opacity 0.3s ease, width 0.3s cubic-bezier(0.16, 1, 0.3, 1), height 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease;
}

.cursor-dot.is-visible,
.cursor-ring.is-visible {
  opacity: 1;
}

.cursor-dot.is-hovering {
  width: 11px;
  height: 11px;
}

.cursor-ring.is-hovering {
  width: 58px;
  height: 58px;
  border-color: rgba(79, 195, 247, 0.8);
  box-shadow: 0 0 22px rgba(79, 195, 247, 0.3), inset 0 0 14px rgba(79, 195, 247, 0.1);
}

.cursor-ripple {
  position: fixed;
  top: 0;
  left: 0;
  width: 8px;
  height: 8px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1px solid rgba(79, 195, 247, 0.85);
  pointer-events: none;
  z-index: 9997;
  animation: cursor-ripple-out 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes cursor-ripple-out {
  to {
    width: 46px;
    height: 46px;
    opacity: 0;
  }
}

@media (hover: none), (pointer: coarse) {
  .cursor-dot,
  .cursor-ring,
  .cursor-ripple {
    display: none;
  }
}

/* ==========================================================================
   LET'S WORK TOGETHER — closing CTA (about + services), adapted from the
   community "Lets Work Section" component (21st.dev, by Jatin Yadav): a
   giant two-line headline that lifts on hover, then morphs into a WhatsApp
   panel on click. Structure/spacing/timing follow the source 1:1 — only the
   colors are mapped onto the site's own tokens (--surface/--text/--text-soft/
   --border/--accent) so it tracks the light/dark toggle like everything else.
   ========================================================================== */
.lets-work-section {
  position: relative;
  display: flex;
  min-height: 100vh;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: var(--surface);
  transition: background 0.3s ease;
}

.lets-work-stage {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
}

/* ---- success panel — absolute overlay, faded/scaled in on click ---- */
.lets-work-success {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 32px;
  opacity: 0;
  transform: translateY(20px) scale(0.95);
  pointer-events: none;
  transition: opacity 700ms cubic-bezier(0.16, 1, 0.3, 1), transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
}

.lets-work-success.is-active {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.lets-work-success-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.lets-work-success-eyebrow {
  font-family: 'Poppins', sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--text-soft);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 500ms ease, transform 500ms ease;
  transition-delay: 100ms;
}

.lets-work-success-title {
  font-family: 'Poppins', sans-serif;
  font-weight: 300;
  font-size: 30px;
  letter-spacing: -0.025em;
  color: var(--text);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 500ms ease, transform 500ms ease;
  transition-delay: 200ms;
}

@media (min-width: 640px) {
  .lets-work-success-title { font-size: 36px; }
}

.lets-work-success.is-active .lets-work-success-eyebrow,
.lets-work-success.is-active .lets-work-success-title {
  opacity: 1;
  transform: translateY(0);
}

.lets-work-book {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  opacity: 0;
  transform: translateY(15px);
  transition: opacity 500ms ease, transform 500ms ease;
  transition-delay: 150ms;
}

.lets-work-success.is-active .lets-work-book {
  opacity: 1;
  transform: translateY(0);
}

.lets-work-success.is-active .lets-work-book:hover {
  transform: translateY(0) scale(1.02);
}

.lets-work-book-pill {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  overflow: hidden;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: transparent;
  padding: 12px 24px;
  color: var(--text);
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.01em;
  white-space: nowrap;
  transition: border-color 500ms ease, background-color 500ms ease, box-shadow 500ms ease, color 500ms ease;
}

@media (min-width: 640px) {
  .lets-work-book-pill { padding: 16px 32px; font-size: 16px; }
}

.lets-work-book:hover .lets-work-book-pill {
  border-color: var(--accent);
  background: var(--accent);
  color: #ffffff;
}

.lets-work-book-icon,
.lets-work-book-arrow {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  transition: transform 500ms ease;
}

@media (min-width: 640px) {
  .lets-work-book-icon,
  .lets-work-book-arrow { width: 20px; height: 20px; }
}

.lets-work-book:hover .lets-work-book-arrow {
  transform: translate(3px, -3px) scale(1.1);
}

.lets-work-success-sub {
  font-family: 'Poppins', sans-serif;
  font-size: 12px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--text-soft) 70%, transparent);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 500ms ease, transform 500ms ease;
  transition-delay: 450ms;
}

.lets-work-success.is-active .lets-work-success-sub {
  opacity: 1;
  transform: translateY(0);
}

/* ---- availability badge ---- */
.lets-work-badge {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: opacity 500ms ease, transform 500ms ease;
}

.lets-work-stage.is-clicked .lets-work-badge {
  opacity: 0;
  transform: translateY(-20px);
  pointer-events: none;
}

.lets-work-ping {
  position: relative;
  display: inline-flex;
  width: 8px;
  height: 8px;
  flex-shrink: 0;
}

.lets-work-ping-wave {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: #34d399;
  opacity: 0.75;
  animation: lets-work-ping 1.8s cubic-bezier(0, 0, 0.2, 1) infinite;
}

.lets-work-ping-dot {
  position: relative;
  display: inline-flex;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #10b981;
}

@keyframes lets-work-ping {
  75%, 100% {
    transform: scale(2);
    opacity: 0;
  }
}

.lets-work-badge-text {
  font-family: 'Poppins', sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-soft);
}

/* ---- headline trigger ---- */
.lets-work-trigger {
  position: relative;
  z-index: 1;
  display: block;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font: inherit;
  color: inherit;
  transition: opacity 700ms cubic-bezier(0.16, 1, 0.3, 1), transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
}

.lets-work-stage.is-clicked .lets-work-trigger {
  pointer-events: none;
}

.lets-work-title-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

.lets-work-title {
  position: relative;
  text-align: center;
  font-family: 'Poppins', sans-serif;
  font-weight: 300;
  letter-spacing: -0.025em;
  color: var(--text);
  font-size: 34px;
  line-height: 1;
  opacity: 1;
  transform: translateY(0) scale(1);
  transition: opacity 700ms cubic-bezier(0.16, 1, 0.3, 1), transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
}

@media (min-width: 640px) { .lets-work-title { font-size: 42px; } }
@media (min-width: 768px) { .lets-work-title { font-size: 50px; } }
@media (min-width: 1024px) { .lets-work-title { font-size: 64px; } }

.lets-work-stage.is-clicked .lets-work-title {
  opacity: 0;
  transform: translateY(-40px) scale(0.95);
}

.lets-work-line-mask {
  display: block;
  overflow: hidden;
  /* line-height:1 on .lets-work-title clips descenders (g/j/p/y) against
     this mask's overflow:hidden — pad it open then pull the padding back
     with a negative margin so the vertical rhythm between the two lines
     doesn't change */
  padding-bottom: 0.22em;
  margin-bottom: -0.22em;
}

.lets-work-line {
  display: block;
  transition: transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
}

.lets-work-line-mask + .lets-work-line-mask .lets-work-line {
  transition-delay: 75ms;
}

.lets-work-line--muted {
  color: var(--accent);
}

.lets-work-trigger:hover .lets-work-line {
  transform: translateY(-8%);
}

.lets-work-orb {
  position: relative;
  margin-top: 16px;
  display: flex;
  width: 64px;
  height: 64px;
  align-items: center;
  justify-content: center;
}

@media (min-width: 640px) {
  .lets-work-orb { width: 80px; height: 80px; }
}

.lets-work-orb-ring {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: transparent;
  transform: scale(1);
  opacity: 1;
  transition: transform 500ms ease-out, background-color 500ms ease-out, border-color 500ms ease-out, opacity 500ms ease-out;
  pointer-events: none;
}

.lets-work-trigger:hover .lets-work-orb-ring {
  border-color: var(--accent);
  background: var(--accent);
  transform: scale(1.1);
}

.lets-work-orb-arrow {
  position: relative;
  width: 24px;
  height: 24px;
  color: var(--text);
  transition: transform 500ms cubic-bezier(0.16, 1, 0.3, 1), color 500ms cubic-bezier(0.16, 1, 0.3, 1), opacity 500ms cubic-bezier(0.16, 1, 0.3, 1);
}

@media (min-width: 640px) {
  .lets-work-orb-arrow { width: 28px; height: 28px; }
}

.lets-work-trigger:hover .lets-work-orb-arrow {
  transform: translate(2px, -2px);
  color: #ffffff;
}

.lets-work-stage.is-clicked .lets-work-orb-ring {
  transform: scale(3);
  opacity: 0;
  background: transparent;
  border-color: var(--border);
  transition-duration: 700ms;
}

.lets-work-stage.is-clicked .lets-work-orb-arrow {
  transform: translate(100px, -100px) scale(0.5);
  opacity: 0;
  color: var(--text);
  transition-duration: 600ms;
}

/* ---- side rule lines flanking the headline ---- */
.lets-work-divider {
  height: 1px;
  width: 32px;
  background: var(--border);
  opacity: 0.5;
  transition: transform 500ms ease, opacity 500ms ease;
}

@media (min-width: 640px) {
  .lets-work-divider { width: 48px; }
}

.lets-work-divider--side {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.lets-work-divider--left { left: -32px; }
.lets-work-divider--right { right: -32px; }

@media (min-width: 640px) {
  .lets-work-divider--left { left: -64px; }
  .lets-work-divider--right { right: -64px; }
}

.lets-work-trigger:hover .lets-work-divider--side {
  transform: translateY(-50%) scaleX(1.5);
  opacity: 1;
}

.lets-work-stage.is-clicked .lets-work-divider--left {
  transform: translateY(-50%) scaleX(0) translateX(-20px);
  opacity: 0;
}

.lets-work-stage.is-clicked .lets-work-divider--right {
  transform: translateY(-50%) scaleX(0) translateX(20px);
  opacity: 0;
}

/* ---- closing text block ---- */
.lets-work-footer {
  position: relative;
  z-index: 1;
  margin-top: 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
  transition: opacity 500ms ease, transform 500ms ease;
  transition-delay: 100ms;
}

.lets-work-stage.is-clicked .lets-work-footer {
  opacity: 0;
  transform: translateY(20px);
  pointer-events: none;
}

.lets-work-desc {
  max-width: 448px;
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-soft);
}

.lets-work-email {
  font-family: 'Poppins', sans-serif;
  font-size: 12px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--text-soft) 60%, transparent);
}

@media (prefers-reduced-motion: reduce) {
  .lets-work-success,
  .lets-work-success-eyebrow,
  .lets-work-success-title,
  .lets-work-book,
  .lets-work-success-sub,
  .lets-work-badge,
  .lets-work-trigger,
  .lets-work-title,
  .lets-work-line,
  .lets-work-orb-ring,
  .lets-work-orb-arrow,
  .lets-work-divider,
  .lets-work-footer {
    transition: none !important;
  }

  .lets-work-ping-wave {
    animation: none;
  }
}

/* ==========================================================================
   LOCATION MAP (home contact section) — adapted from the "Expand Map"
   component (21st.dev, by Jatin Yadav): a stylized location card that
   reveals an illustrative street diagram as it scrolls into view (same
   .is-visible convention used everywhere else in this file — see the
   IntersectionObserver in script.js). This is NOT a live map (no real
   tiles) — the streets/buildings are decorative SVG/CSS, exactly like the
   source; only the trigger (scroll instead of click) differs. Colors map
   onto the site's own tokens; the emerald "live" accent is kept as-is
   (same green semantics as the footer's own live/available indicators
   elsewhere on the site). Reuses the same --tilt-x/--tilt-y pointer-tilt
   convention as .catalog-card-inner (see script.js) instead of a new one.
   ========================================================================== */
/* fills whatever empty space is left in the column below the heading/
   checklist (see align-items: stretch on .contact-inner) */
.location-map-slot {
  flex: 1;
  min-height: 240px;
  margin-top: 24px;
  display: flex;
}

.location-map {
  position: relative;
  display: flex;
  width: 100%;
}

.location-map-card {
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100%;
  border-radius: 16px;
  background: var(--surface-soft);
  border: 1px solid var(--border);
  opacity: 0;
  transform: perspective(900px) translateY(16px) scale(0.97) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
  transition: opacity 450ms var(--ease-out-quart), transform 450ms var(--ease-out-quart),
    border-color 0.3s ease, background 0.3s ease;
}

.location-map.is-visible .location-map-card {
  opacity: 1;
  transform: perspective(900px) translateY(0) scale(1) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
}

.location-map:hover .location-map-card,
.location-map:focus-visible .location-map-card {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
}

.location-map-glow {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, color-mix(in srgb, var(--text-soft) 12%, transparent) 0%, transparent 55%, color-mix(in srgb, var(--text-soft) 18%, transparent) 100%);
  pointer-events: none;
}

.location-map-grid {
  position: absolute;
  inset: 0;
  color: var(--text);
  opacity: 0.05;
  transition: opacity 300ms ease;
  pointer-events: none;
}

.location-map.is-visible .location-map-grid {
  opacity: 0;
}

/* ---- street illustration — hidden until revealed ---- */
.location-map-streets {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 400ms ease 100ms;
  pointer-events: none;
}

.location-map.is-visible .location-map-streets {
  opacity: 1;
}

.location-map-streets-bg {
  position: absolute;
  inset: 0;
  background: var(--surface);
}

.location-map-streets-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.street {
  fill: none;
  stroke: var(--text);
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 700ms ease-out;
  transition-delay: var(--d, 0s);
}

.location-map.is-visible .street {
  stroke-dashoffset: 0;
}

.street--main {
  stroke-width: 4px;
  stroke-opacity: 0.25;
}

.street--main-v {
  stroke-width: 3px;
  stroke-opacity: 0.2;
}

.street--sub,
.street--sub-v {
  stroke-width: 1.5px;
  stroke-opacity: 0.1;
}

.location-map-building {
  position: absolute;
  border-radius: 2px;
  background: color-mix(in srgb, var(--text-soft) 28%, transparent);
  border: 1px solid color-mix(in srgb, var(--text-soft) 18%, transparent);
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 400ms ease, transform 400ms ease;
  transition-delay: calc(450ms + var(--i, 0) * 60ms);
}

.location-map.is-visible .location-map-building {
  opacity: 1;
  transform: scale(1);
}

.location-map-building-1 { top: 40%; left: 10%; width: 15%; height: 20%; }
.location-map-building-2 { top: 15%; left: 35%; width: 12%; height: 15%; }
.location-map-building-3 { top: 70%; left: 75%; width: 18%; height: 18%; }
.location-map-building-4 { top: 20%; right: 10%; width: 10%; height: 25%; }
.location-map-building-5 { top: 55%; left: 5%; width: 8%; height: 12%; }
.location-map-building-6 { top: 8%; left: 75%; width: 14%; height: 10%; }

.location-map-pin {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  display: flex;
  cursor: pointer;
  pointer-events: auto;
  transform: translate(-50%, -50%) scale(0);
  filter: drop-shadow(0 0 10px rgba(52, 211, 153, 0.5));
  transition: filter 250ms ease;
}

.location-map-pin:hover,
.location-map-pin:focus-visible {
  filter: drop-shadow(0 0 16px rgba(52, 211, 153, 0.85));
}

.location-map-pin circle {
  fill: var(--surface);
}

.location-map.is-visible .location-map-pin {
  animation: location-map-pin-drop 550ms cubic-bezier(0.34, 1.56, 0.64, 1) 300ms forwards;
}

@keyframes location-map-pin-drop {
  0% { transform: translate(-50%, -50%) translateY(-20px) scale(0); }
  60% { transform: translate(-50%, -50%) translateY(4px) scale(1.08); }
  100% { transform: translate(-50%, -50%) translateY(0) scale(1); }
}

/* continuous idle bob, on the svg rather than the anchor so it can layer
   cleanly on top of the one-shot drop-in animation above without the two
   fighting over the same transform */
.location-map-pin-svg {
  display: block;
  animation: location-map-pin-float 2.6s ease-in-out 850ms infinite;
}

.location-map-pin:hover .location-map-pin-svg,
.location-map-pin:focus-visible .location-map-pin-svg {
  --pin-hover-scale: 1.15;
}

@keyframes location-map-pin-float {
  0%, 100% { transform: translateY(0) scale(var(--pin-hover-scale, 1)); }
  50% { transform: translateY(-6px) scale(var(--pin-hover-scale, 1)); }
}

.location-map-fade {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, var(--surface-soft), transparent 60%);
  opacity: 0.6;
}

/* ---- foreground content: live pill, title, coordinates ---- */
.location-map-content {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 20px;
}

.location-map-top {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
}

.location-map-status {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--text) 5%, transparent);
  transition: background-color 200ms ease, transform 200ms ease;
}

.location-map:hover .location-map-status {
  background: color-mix(in srgb, var(--text) 8%, transparent);
  transform: scale(1.05);
}

.location-map-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: #34d399;
  flex-shrink: 0;
}

.location-map-status span:last-child {
  font-family: 'Poppins', sans-serif;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-soft);
}

.location-map-bottom {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.location-map-title {
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: 14px;
  letter-spacing: -0.01em;
  color: var(--text);
  transition: transform 250ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.location-map:hover .location-map-title {
  transform: translateX(4px);
}

.location-map-coords {
  font-family: 'Poppins', sans-serif;
  font-size: 11px;
  color: var(--text-soft);
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: opacity 250ms ease, max-height 250ms ease;
}

.location-map.is-visible .location-map-coords {
  opacity: 1;
  max-height: 20px;
}

/* real link to the INES Events Google Maps listing — only shown once
   revealed, alongside the coordinates */
.location-map-gmaps {
  display: block;
  margin-top: 4px;
  font-family: 'Poppins', sans-serif;
  font-size: 11px;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: opacity 250ms ease, max-height 250ms ease, color 0.2s ease;
}

.location-map-gmaps:hover {
  text-decoration: underline;
}

.location-map.is-visible .location-map-gmaps {
  opacity: 1;
  max-height: 20px;
}

.location-map-underline {
  display: block;
  height: 1px;
  width: 100%;
  background: linear-gradient(90deg, color-mix(in srgb, #34d399 50%, transparent), color-mix(in srgb, #34d399 30%, transparent), transparent);
  transform: scaleX(0.3);
  transform-origin: left;
  transition: transform 400ms ease-out;
}

.location-map:hover .location-map-underline,
.location-map.is-visible .location-map-underline {
  transform: scaleX(1);
}

@media (prefers-reduced-motion: reduce) {
  .location-map-card,
  .location-map-grid,
  .location-map-streets,
  .street,
  .location-map-building,
  .location-map-status,
  .location-map-title,
  .location-map-coords,
  .location-map-gmaps,
  .location-map-underline {
    transition: none !important;
  }

  .location-map-pin {
    animation: none !important;
    transition: none !important;
  }

  .location-map.is-visible .location-map-pin {
    transform: translate(-50%, -50%) scale(1);
  }

  .location-map-pin-svg {
    animation: none !important;
  }
}

@media (max-width: 700px) {
  /* .contact-inner stacks to a single column here, so the info column no
     longer stretches to match the form card's height — give the slot a
     concrete height of its own so .location-map-card's height: 100% has
     something real to resolve against */
  .location-map-slot {
    flex: none;
    height: 260px;
    padding: 8px 0;
  }
}

/* ==========================================================================
   PAIEMENT — paiement.html (Stripe, mode test). Réutilise les tokens/
   composants du formulaire de contact (.elegant-field/.elegant-input,
   .contact-form-card, .form-submit-gradient, .form-status) pour rester
   cohérent avec le reste du site.
   ========================================================================== */
.payment-section {
  background: var(--surface);
  padding: clamp(56px, 9vh, 96px) 20px;
  transition: background 0.3s ease;
}

.payment-grid {
  max-width: 640px;
  margin: 0 auto;
}

.payment-card {
  text-align: left;
}

.payment-card-head {
  text-align: center;
  margin-bottom: 22px;
}

.payment-card-title {
  margin-top: 12px;
  font-family: 'Poppins', sans-serif;
  font-size: clamp(22px, 3vh, 28px);
  font-weight: 700;
  color: var(--text);
}

.payment-card-head .section-subtitle {
  margin-top: 10px;
}

/* Stripe monte un iframe directement dans #card-element et lui ajoute
   lui-même les classes StripeElement / StripeElement--focus /
   StripeElement--invalid — on style ce conteneur comme un .elegant-input
   pour que la carte se fonde dans le reste du formulaire. */
#card-element {
  padding: 13px 16px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: var(--surface);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

#card-element.StripeElement--focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent);
}

#card-element.StripeElement--invalid {
  border-color: #f87171;
}

.payment-card-errors {
  min-height: 16px;
  margin-top: 6px;
  font-family: 'Poppins', sans-serif;
  font-size: 12px;
  color: #f87171;
}

.payment-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px dashed var(--border);
  font-family: 'Poppins', sans-serif;
}

.payment-summary span {
  font-size: 13px;
  color: var(--text-soft);
}

.payment-summary strong {
  font-size: 20px;
  color: var(--text);
}

.payment-submit {
  margin-top: 18px;
}

.payment-secure-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 12px;
  font-family: 'Poppins', sans-serif;
  font-size: 12px;
  text-align: center;
  color: var(--text-soft);
}

.payment-secure-note svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: var(--accent);
}

.payment-success {
  text-align: center;
  padding: 28px 8px 8px;
}

.payment-success svg {
  width: 52px;
  height: 52px;
  color: var(--accent);
  margin-bottom: 14px;
}

.payment-success h3 {
  font-family: 'Poppins', sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 8px;
}

.payment-success p {
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
  line-height: 1.7;
  color: var(--text-soft);
}

.payment-success p strong {
  color: var(--text);
}