/* ==========================================================================
   NexPro Labs — style.css
   "Editorial Studio": warm paper, ink black, one electric-cobalt accent.
   No gradients. Big type. Hairline rules. Light + dramatic dark sections.

   1) Tokens   2) Reset/base   3) Layout primitives   4) Buttons
   5) Header   6) Hero   7) Marquee   8) Services index
   9) Work     10) Process     11) About spec   12) FAQ
   13) Contact 14) Footer      15) Floating     16) Animations
   17) Responsive   18) Legal pages   19) Reduced motion
   ========================================================================== */

/* ============ 1. TOKENS ============ */
:root {
  /* Light "paper" world */
  --paper:    #eae6dc;   /* warm off-white canvas */
  --paper-2:  #e1dccf;   /* slightly deeper, for insets */
  --ink:      #16140d;   /* warm near-black ink */
  --ink-2:    #4a463b;   /* secondary text */
  --ink-3:    #8a8576;   /* muted / meta */
  --line:     rgba(22, 20, 13, 0.16);
  --line-2:   rgba(22, 20, 13, 0.30);
  --accent:   #d83a17;   /* vermillion / orange-red */
  --accent-ink: #ffffff;

  /* Dark world (applied via .section--dark, which re-maps the vars above) */
  --night:      #14130e;
  --night-soft: #1c1b15;

  /* Type */
  --font-display: "Bricolage Grotesque", system-ui, sans-serif;
  --font-body:    "Inter", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;

  /* Layout */
  --maxw: 1240px;
  --gutter: clamp(1.15rem, 4vw, 3rem);
  --section-y: clamp(4.5rem, 9vw, 8.5rem);
  --header-h: 72px;        /* matches .header-inner min-height; used for full-height hero */

  /* Motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --t: 0.5s var(--ease);
}

/* Dark sections re-map the same tokens so every component just works */
.section--dark {
  --paper: var(--night);
  --paper-2: var(--night-soft);
  --ink: #f0ece1;
  --ink-2: #b7b2a2;
  --ink-3: #807b6c;
  --line: rgba(240, 236, 225, 0.16);
  --line-2: rgba(240, 236, 225, 0.34);
  --accent: #ff7a4d;       /* lighter vermillion for contrast on black */
  --accent-ink: #14130e;
  background: var(--night);
  color: var(--ink);
}

/* ============ 2. RESET / BASE ============ */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 90px;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  background: var(--paper);
  color: var(--ink);
  line-height: 1.6;
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

/* subtle paper grain over the whole page */
body::after {
  content: "";
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  opacity: 0.04; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

img { max-width: 100%; display: block; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; border: none; background: none; }
ul, ol, dl { list-style: none; padding: 0; margin: 0; }

h1, h2, h3 {
  font-family: var(--font-display);
  line-height: 1.04;
  font-weight: 700;
  letter-spacing: -0.02em;
}

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }
::selection { background: var(--accent); color: #fff; }

.skip-link {
  position: fixed; top: 0; left: 50%; translate: -50% -120%;
  background: var(--ink); color: var(--paper);
  padding: 0.6rem 1.1rem; border-radius: 0 0 8px 8px;
  z-index: 200; font-weight: 600; transition: translate 0.2s var(--ease);
}
.skip-link:focus { translate: -50% 0; }

/* ============ 3. LAYOUT PRIMITIVES ============ */
.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }

.section { padding-block: var(--section-y); position: relative; z-index: 2; }
.section-line { border-top: 1px solid var(--line); }

/* Kicker / eyebrow label — tracked, technical */
.kicker {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--font-body);
  font-size: 0.74rem; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--ink-2);
  margin-bottom: 1.4rem;
}
.kicker::before {
  content: ""; width: 26px; height: 1px; background: var(--accent);
}

.section-head { max-width: 720px; margin-bottom: clamp(2.6rem, 5vw, 4.5rem); }
.section-title {
  font-size: clamp(2.1rem, 1.1rem + 4vw, 4rem);
  letter-spacing: -0.035em;
}
.section-lead {
  margin-top: 1.3rem; color: var(--ink-2);
  font-size: clamp(1.05rem, 1rem + 0.4vw, 1.2rem); max-width: 54ch;
}

/* ============ 4. BUTTONS ============ */
.btn {
  --pad-y: 0.8rem; --pad-x: 1.4rem;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
  padding: var(--pad-y) var(--pad-x);
  font-family: var(--font-display);
  font-weight: 600; font-size: 0.98rem; line-height: 1;
  border-radius: 999px; white-space: nowrap;
  transition: transform 0.25s var(--ease), background-color 0.25s, color 0.25s, border-color 0.25s;
}
.btn .arrow { width: 17px; height: 17px; transition: transform 0.25s var(--ease); }
.btn:hover .arrow { transform: translate(2px, -2px); }
.btn-lg { --pad-y: 1rem; --pad-x: 1.7rem; font-size: 1.04rem; }
.btn-block { width: 100%; }

.btn-primary { background: var(--ink); color: var(--paper); }
.btn-primary:hover { transform: translateY(-2px); background: var(--accent); color: #fff; }

.btn-light { background: var(--paper); color: var(--night); }
.btn-light:hover { transform: translateY(-2px); background: var(--accent); color: #fff; }

.btn-text {
  padding-inline: 0.4rem; border-radius: 0;
  border-bottom: 2px solid var(--line-2);
  color: var(--ink); gap: 0.3rem;
}
.btn-text:hover { border-color: var(--accent); color: var(--accent); }

/* ============ 5. HEADER ============ */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: color-mix(in srgb, var(--paper) 82%, transparent);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--t), background-color var(--t);
}
.site-header.scrolled { border-bottom-color: var(--line); background: color-mix(in srgb, var(--paper) 92%, transparent); }
.header-inner { display: flex; align-items: center; gap: 1.2rem; min-height: 72px; }

.brand { display: inline-flex; align-items: center; }
/* wordmark PNG is white → make it ink-black on the paper header */
.brand img { width: auto; height: 22px; filter: brightness(0); }

.nav { display: flex; gap: 0.2rem; margin-left: auto; }
.nav a {
  position: relative; padding: 0.5rem 0.9rem;
  font-size: 0.9rem; font-weight: 500; white-space: nowrap; color: var(--ink-2);
  transition: color 0.2s;
}
.nav a::after {
  content: ""; position: absolute; left: 0.9rem; right: 0.9rem; bottom: 0.35rem; height: 1.5px;
  background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform 0.25s var(--ease);
}
.nav a:hover { color: var(--ink); }
.nav a:hover::after { transform: scaleX(1); }

.header-actions { display: flex; align-items: center; gap: 0.7rem; }

.lang { display: inline-flex; border: 1px solid var(--line-2); border-radius: 999px; padding: 2px; }
.lang-btn {
  display: inline-flex;
  align-items: center;
  gap: 0;
  padding: 0.34rem 0.6rem; font-family: var(--font-display);
  font-size: 0.76rem; font-weight: 600; color: var(--ink-3);
  border-radius: 999px; transition: color 0.2s, background-color 0.2s, gap 0.25s var(--ease), padding 0.25s var(--ease);
}
.lang-btn:hover { color: var(--ink); }
.lang-btn[aria-pressed="true"] { background: var(--ink); color: var(--paper); gap: 6px; padding-inline: 0.7rem 0.6rem; }
.lang-btn .flag-icon {
  width: 0;
  height: 11px;
  border-radius: 1px;
  overflow: hidden;
  opacity: 0;
  transition: width 0.25s var(--ease), opacity 0.2s var(--ease);
  flex-shrink: 0;
}
.lang-btn[aria-pressed="true"] .flag-icon {
  width: 16.5px;
  opacity: 1;
}

.header-cta { --pad-y: 0.6rem; --pad-x: 1.1rem; font-size: 0.9rem; }

.menu-toggle {
  display: none; width: 44px; height: 44px; border-radius: 999px;
  border: 1px solid var(--line-2);
  flex-direction: column; align-items: center; justify-content: center; gap: 5px;
}
.menu-toggle span { width: 18px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform 0.3s var(--ease), opacity 0.2s; }
.menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(3.5px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:nth-child(2) { transform: translateY(-3.5px) rotate(-45deg); }

.hero {
  position: sticky;
  top: 0;
  z-index: 1;
  height: 100vh;
  height: 100dvh;                       /* dvh wins where supported, vh fallback */
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background-color: var(--paper);
  background-image: radial-gradient(
    circle 700px at var(--mouse-x, 50%) var(--mouse-y, 50%),
    rgba(255, 255, 255, 0.7) 0%,
    rgba(255, 253, 245, 0.3) 30%,
    rgba(255, 250, 240, 0.08) 55%,
    transparent 75%
  );
}

/* Decorative 3D particle sphere canvas — hero only */
#nexpro-sphere { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }

.hero .container {
  position: relative; z-index: 1;
  flex: 1;                                   /* fill vertical space so trusted-strip sits at bottom */
  display: flex;
  flex-direction: column;
  justify-content: center;                   /* vertically center the hero copy */
  padding-block: clamp(2rem, 4vw, 3.5rem);   /* breathing room top/bottom */
}

/* Trusted-strip pinned to the bottom of the sticky hero */
.hero > .trusted-strip {
  flex-shrink: 0;                            /* never compress the logo bar */
  width: 100%;
}

/* Rising sheet — opaque card that scrolls UP and OVER the pinned hero */
.reveal-sheet {
  position: relative;
  z-index: 2;
  background: var(--paper);                  /* opaque: permanently masks the pinned hero */
  border-radius: 20px 20px 0 0;              /* card top edge */
  box-shadow: 0 -10px 40px rgba(0,0,0,0.08); /* the "lift off the hero" shadow */
}

/* Tighten the gap at the top of the reveal-sheet before the kicker */
.reveal-sheet > .section:first-of-type {
  padding-top: clamp(1.8rem, 4.5vw, 3rem);
  border-top: none;
}

/* Custom style and micro-animation only for the Services section kicker */
#services .kicker {
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: 0.12em;
  opacity: 0;
  transition: opacity 1s var(--ease) 0.1s, letter-spacing 1.2s var(--ease) 0.1s;
}

#services .kicker::before {
  width: 0;
  transition: width 1.2s var(--ease) 0.2s;
}

#services .section-head.in .kicker {
  opacity: 1;
  letter-spacing: 0.24em;
}

#services .section-head.in .kicker::before {
  width: 32px;
}


.hero-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.85rem;
  font-size: 0.76rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-2); margin-bottom: clamp(1.8rem, 4vw, 3rem);
}
.status { display: inline-flex; align-items: center; gap: 0.5rem; }
.status-dot {
  width: 8px; height: 8px; border-radius: 50%; background: #18b364;
  box-shadow: 0 0 0 3px rgba(24, 179, 100, 0.22); animation: blink 2.4s ease-in-out infinite;
}
.hero-meta-sep { color: var(--ink-3); }

.hero-title {
  font-size: clamp(2.6rem, 0.9rem + 7.4vw, 7.2rem);
  font-weight: 800; letter-spacing: -0.045em; line-height: 0.98;
  max-width: 16ch; text-wrap: balance;
}

/* ---- Liquid morph keyword ---- */
.liquid-lead {
  display: block;
  color: var(--ink);                      /* fixed first line, always crisp */
}
.liquid-wrap {
  display: grid;                          /* stack the two words in one cell */
}
.liquid-wrap.is-morphing {
  filter: url(#liquid-threshold);         /* gooey merge ONLY while morphing */
}
.liquid-text {
  grid-area: 1 / 1;                       /* both words overlap in the same cell */
  display: block;
  color: var(--accent);                   /* highlight the changing keyword */
  will-change: filter, opacity;
}
.liquid-text--b { opacity: 0; }           /* hidden until JS drives the morph */

/* Visually hidden — screen-reader fallback */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.hero-bottom {
  display: grid; grid-template-columns: 1.1fr 1fr; gap: 2rem;
  align-items: end; margin-top: clamp(2rem, 5vw, 3.5rem);
}
.hero-subtitle { color: var(--ink-2); font-size: clamp(1.1rem, 1rem + 0.55vw, 1.35rem); max-width: 46ch; }
/* ---- Typewriter subtitle ---- */
.tw-stack { display: grid; }                 /* ghost + typed layer share one cell */
.tw-stack > .tw-ghost,
.tw-stack > .tw-text { grid-area: 1 / 1; margin: 0; }
.tw-ghost { opacity: 0; pointer-events: none; } /* reserves full height → no layout shift */
.tw-text.is-typing::after {                   /* blinking caret, only while typing */
  content: ""; display: inline-block;
  width: 2px; height: 1.05em; margin-left: 0.08em; vertical-align: -0.15em;
  background: var(--accent);
  animation: tw-caret 0.7s steps(1) infinite;
}
@keyframes tw-caret { 50% { opacity: 0; } }
.hero-cta { display: flex; flex-wrap: wrap; gap: 0.9rem; justify-content: flex-start; }

.hero-trust {
  margin-top: clamp(2.5rem, 5vw, 4rem); padding-top: 1.6rem; border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.6rem 1.4rem;
}
.hero-trust-label { font-size: 0.74rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3); }
.hero-trust-names {
  font-family: var(--font-display); font-weight: 600; font-size: clamp(1.05rem, 1rem + 0.7vw, 1.5rem);
  letter-spacing: -0.01em; color: var(--ink);
}
.hero-trust-names em { color: var(--ink-3); font-style: normal; padding-inline: 0.2rem; }

/* ============ 7. MARQUEE ============ */
.marquee { overflow: hidden; padding-block: 1.1rem; border-block: 1px solid var(--line); position: relative; z-index: 2; }
.marquee-track {
  display: flex; align-items: center; gap: 2.4rem; width: max-content;
  font-family: var(--font-display); font-weight: 600; font-size: clamp(1.1rem, 1rem + 1vw, 1.9rem);
  letter-spacing: -0.01em; white-space: nowrap;
  animation: scroll-x 32s linear infinite;
}
.marquee-track i { color: var(--accent); font-style: normal; font-size: 0.8em; }
.marquee:hover .marquee-track { animation-play-state: paused; }

/* ============ 7b. TRUSTED-BY STRIP (logo marquee) ============ */
.trusted-strip {
  /* mobile-first defaults (≤768px) */
  --ts-gap: 48px;
  --ts-logo-h: 32px;
  --ts-logo-w: 120px;
  --marquee-duration: 40s;
  position: relative; z-index: 1;
  border-top: 1px solid var(--line);            /* divider from hero content */
  padding-block: clamp(1.1rem, 3.2vw, 1.7rem);  /* minimal vertical padding */
  overflow: hidden;                             /* clip the scroll */
}
.trusted-label {
  margin: 0 0 clamp(.9rem, 2vw, 1.15rem);
  text-align: center;
  font-family: var(--font-body);
  font-size: .72rem; font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--ink-3);                          /* existing muted text color */
}
.trusted-label span { display: none; }
html[lang="en"] .trusted-label span[lang="en"] { display: inline; }
html[lang="fr"] .trusted-label span[lang="fr"] { display: inline; }
html[lang="de"] .trusted-label span[lang="de"] { display: inline; }
.ts-viewport {
  overflow: hidden;                             /* clip the scroll */
  /* fade left & right edges so the loop feels infinite */
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 11%, #000 89%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 11%, #000 89%, transparent 100%);
}
.ts-track {
  display: flex; align-items: center; width: max-content;
  animation: ts-marquee var(--marquee-duration) linear infinite;
  will-change: transform;                       /* GPU compositing */
}
.ts-track:hover { animation-play-state: paused; }
.ts-logo {
  flex: 0 0 auto;
  margin-right: var(--ts-gap);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--ts-logo-w);
  height: var(--ts-logo-h);
}
.ts-logo img {
  max-height: 100%;
  max-width: 100%;
  width: auto;
  height: auto;
  display: block;
  filter: grayscale(100%); opacity: .45;
  transition: filter .4s ease, opacity .4s ease;
}
.ts-logo img:hover { filter: grayscale(0); opacity: 1; }
@keyframes ts-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }           /* exactly one set width */
}
/* desktop (≥769px) — larger logos, wider gaps, faster loop */
@media (min-width: 769px) {
  .trusted-strip { --ts-gap: 64px; --ts-logo-h: 40px; --ts-logo-w: 160px; --marquee-duration: 28s; }
}
@media (prefers-reduced-motion: reduce) {
  .ts-track { animation-play-state: paused; }    /* pause the marquee */
}

/* ============ 7b. SERVICES — STORY SCROLL (stacked rotating panels) ============ */
.flow-art { position: relative; width: 100%; overflow-x: clip; }
.flow-section {
  position: relative;
  min-height: 100vh; min-height: 100svh;
  width: 100%;
  overflow: hidden;                 /* clips the tilted panel as it rotates in */
}
.flow-inner {
  min-height: 100vh; min-height: 100svh;
  width: 100%;
  display: flex; flex-direction: column; justify-content: space-between;
  gap: clamp(1rem, 3vw, 2.4rem);
  padding: clamp(5.5rem, 9vw, 7rem) var(--gutter) var(--gutter);
  background: var(--bg); color: var(--fg);
  transform-origin: bottom left;    /* pivot matches the GSAP rotation */
  will-change: transform;
  backface-visibility: hidden;
}
.flow-kicker {
  display: flex; align-items: baseline; gap: 0.9rem;
  font-family: var(--font-body); font-weight: 700;
  font-size: 0.76rem; letter-spacing: 0.22em; text-transform: uppercase;
}
.flow-num { font-size: 1rem; letter-spacing: 0.1em; }
.flow-count { opacity: 0.6; }
.flow-tint { color: var(--tint); }
.flow-rule { border: none; border-top: 1px solid var(--rule); width: 100%; }
.flow-title {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(2.6rem, 9vw, 8rem); line-height: 0.9;
  letter-spacing: -0.03em; text-transform: uppercase;
  max-width: 18ch;
}
.flow-title--intro { text-transform: none; letter-spacing: -0.045em; }
.flow-foot {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: 1.4rem 3rem;
}
.flow-desc {
  max-width: 46ch;
  font-size: clamp(1.05rem, 1rem + 0.6vw, 1.6rem); line-height: 1.4;
}
.flow-cta {
  display: inline-flex; align-items: center; gap: 0.5rem; flex-shrink: 0;
  font-family: var(--font-body); font-weight: 600; font-size: 0.95rem;
  letter-spacing: 0.02em; color: var(--fg);
  padding-bottom: 0.2rem; border-bottom: 1.5px solid currentColor;
  transition: gap 0.3s var(--ease), opacity 0.3s var(--ease);
}
.flow-cta:hover { gap: 0.85rem; opacity: 0.75; }
/* service-panel extras */
.flow-sub {
  max-width: 42ch; opacity: 0.85; line-height: 1.4;
  font-size: clamp(1rem, 0.95rem + 0.45vw, 1.5rem);
}
.flow-list {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.6rem 2.2rem; max-width: 44ch;
  font-size: clamp(0.95rem, 0.9rem + 0.35vw, 1.2rem);
}
.flow-list li { position: relative; padding-left: 1.4rem; line-height: 1.3; }
.flow-list li::before { content: "\2192"; position: absolute; left: 0; color: var(--tint); font-weight: 700; }
.flow-meta { display: flex; flex-direction: column; align-items: flex-start; gap: 0.9rem; flex-shrink: 0; }
.flow-meta-label { display: block; text-transform: uppercase; letter-spacing: 0.16em; font-size: 0.68rem; font-weight: 700; opacity: 0.65; margin-bottom: 0.25rem; }
.flow-timeline { font-size: clamp(1rem, 0.95rem + 0.3vw, 1.25rem); font-weight: 600; }

/* Mobile tuning — smaller tilt feel, tighter type, single-column lists */
@media (max-width: 768px) {
  .flow-inner { padding: clamp(4.75rem, 17vw, 6rem) 1.15rem 1.5rem; gap: 1rem; }
  .flow-title { font-size: clamp(2.3rem, 12.5vw, 4.2rem); max-width: 100%; }
  .flow-list { grid-template-columns: 1fr; gap: 0.45rem; max-width: 100%; }
  .flow-foot { gap: 1.2rem; }
  .flow-desc, .flow-sub { max-width: 100%; }
}

/* ============ 8. SERVICES (index list) ============ */
.index-list { border-top: 1px solid var(--line-2); }
.index-row {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: clamp(1rem, 3vw, 3rem);
  padding: clamp(1.5rem, 3vw, 2.4rem) clamp(0.5rem, 1.5vw, 1.4rem);
  border-bottom: 1px solid var(--line-2);
  transition: background-color 0.35s var(--ease), padding-inline 0.35s var(--ease), color 0.35s;
}
.index-num {
  font-family: var(--font-display); font-weight: 600; font-size: 0.95rem;
  color: var(--ink-3); transition: color 0.35s; align-self: start; padding-top: 0.4rem;
}
.index-main { display: grid; gap: 0.4rem; }
.index-title { font-size: clamp(1.5rem, 1rem + 2.2vw, 2.6rem); letter-spacing: -0.03em; transition: transform 0.35s var(--ease); }
.index-desc { color: var(--ink-2); font-size: 1rem; max-width: 60ch; transition: color 0.35s; }
.index-arrow {
  font-size: 1.7rem; color: var(--ink-3); line-height: 1;
  transition: transform 0.35s var(--ease), color 0.35s; align-self: start; padding-top: 0.5rem;
}
/* invert-on-hover — the editorial signature move */
.index-row:hover { background: var(--ink); color: var(--paper); padding-inline: clamp(1rem, 2.5vw, 2.2rem); }
.index-row:hover .index-title { color: var(--paper); transform: translateX(6px); }
.index-row:hover .index-desc { color: color-mix(in srgb, var(--paper) 78%, transparent); }
.index-row:hover .index-num { color: var(--accent); }
.index-row:hover .index-arrow { color: var(--accent); transform: translate(6px, -6px); }

/* ============ 9. WORK (capabilities showcase) ============ */
.horizontal-section {
  background: var(--paper);
  padding-bottom: 5rem;
  overflow: hidden;
}

@media (min-width: 769px) {
  .horizontal-section {
    height: 100vh;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-top: clamp(0.75rem, 2vh, 2rem);
    padding-bottom: clamp(0.5rem, 1.5vh, 1.5rem);
    box-sizing: border-box;
  }
  .horizontal-stage {
    display: contents;
  }
  .horizontal-section .section-head {
    margin-bottom: 0;
  }
  .horizontal-wrap {
    flex-grow: 1;
    display: flex;
    align-items: center;
    padding-bottom: 0;
    min-height: 0;
  }
  .track {
    align-items: stretch;
  }
  .cap-scroll-card {
    width: 280px;
  }
  .cap-link {
    padding: 1rem 1.2rem;
  }
  .cap-media {
    aspect-ratio: 3 / 2;
    margin-bottom: 0.6rem;
  }
  .cap-top {
    margin-bottom: 0.5rem;
  }
  .cap-body {
    flex: 1 1 auto;
    min-height: 0;
  }
  .cap-title {
    font-size: 1.15rem;
    margin-top: 0.1rem;
  }
  .cap-desc {
    font-size: 0.82rem;
    line-height: 1.38;
    margin-top: 0.35rem;
  }
  .cap-tags {
    margin-top: 0.65rem;
    gap: 0.3rem;
  }
  .cap-tag {
    font-size: 0.65rem;
    padding: 0.18rem 0.5rem;
  }
  .cap-cta {
    margin-top: 0.65rem;
    font-size: 0.82rem;
  }
  .horizontal-progress-container {
    margin-top: 0;
  }
}

/* Horizontal Scroll wrapper */
.horizontal-wrap {
  position: relative;
  width: 100%;
  padding-bottom: 2.5rem;
  overflow: hidden;
}

/* Reduced-motion fallback: no scroll-jacking, so let the cards be swiped
   natively (the only case where a horizontal scrollbar is shown). */
.horizontal-wrap.is-static-scroll {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.horizontal-wrap.is-static-scroll .cap-scroll-card {
  scroll-snap-align: start;
}

/* Flex track containing the compact cards */
.track {
  display: flex;
  flex-wrap: nowrap;
  gap: 2.5rem;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
  width: max-content;
  will-change: transform;
}

/* Individual capability card */
.cap-scroll-card {
  width: 320px;
  flex-shrink: 0;
  display: flex;
  height: auto;
}

.cap-link {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 1.6rem 1.8rem;
  background: #ffffff; /* Clean off-white card stock */
  border: 1px solid var(--line-2);
  border-radius: 8px;
  transition: transform 0.4s var(--ease), border-color 0.35s, box-shadow 0.4s var(--ease);
}
.cap-scroll-card:hover .cap-link {
  transform: translate(-2px, -2px);
  border-color: var(--ink);
  box-shadow: 8px 8px 0 0 var(--accent);
}

.cap-line {
  position: absolute; top: 0; left: 0; right: 0; height: 3.5px; background: var(--accent);
  transform: scaleX(0); transform-origin: left; transition: transform 0.45s var(--ease);
}
.cap-scroll-card:hover .cap-line { transform: scaleX(1); }

.cap-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
  flex-shrink: 0;
}
.cap-index { font-family: var(--font-display); font-weight: 600; font-size: 0.84rem; color: var(--ink-3); transition: color 0.3s; }
.cap-domain {
  font-family: var(--font-body); font-size: 0.66rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-3); border: 1px solid var(--line-2); border-radius: 999px; padding: 0.22rem 0.62rem; transition: color 0.3s, border-color 0.3s;
}
.cap-scroll-card:hover .cap-index { color: var(--accent); }
.cap-scroll-card:hover .cap-domain { color: var(--ink); }

.cap-media {
  width: 100%;
  aspect-ratio: 16 / 10;
  background: var(--paper-2);
  border-radius: 6px;
  margin-bottom: 1rem;
  overflow: hidden;
  border: 1px solid var(--line);
  flex-shrink: 0;
}
.cap-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease);
}
.cap-scroll-card:hover .cap-img {
  transform: scale(1.04);
}

.cap-body {
  display: block;
  flex: 1 1 auto;
  flex-shrink: 0;
}
.cap-title { font-size: 1.4rem; letter-spacing: -0.02em; color: var(--ink); transition: transform 0.35s var(--ease); margin-top: 0.3rem; }
.cap-scroll-card:hover .cap-title { transform: translateX(3px); }
.cap-desc { margin-top: 0.65rem; color: var(--ink-2); font-size: 0.96rem; line-height: 1.5; }

.cap-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 1.2rem;
  flex-shrink: 0;
}
.cap-tag {
  font-family: var(--font-body); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.03em; color: var(--ink-2);
  background: var(--paper-2); border-radius: 999px; padding: 0.28rem 0.62rem; transition: background-color 0.3s, color 0.3s;
}
.cap-scroll-card:hover .cap-tag { background: color-mix(in srgb, var(--accent) 15%, var(--paper-2)); color: var(--ink); }

.cap-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 1.4rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--ink);
  transition: color 0.3s;
  flex-shrink: 0;
}
.cap-cta .cap-arrow { width: 16px; height: 16px; transition: transform 0.3s var(--ease); }
.cap-scroll-card:hover .cap-cta { color: var(--accent); }
.cap-scroll-card:hover .cap-cta .cap-arrow { transform: translate(3px, -3px); }

/* Navigation Arrows */
.cap-nav {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}
.cap-nav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1.5px solid var(--line-2);
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
  transition: all 0.3s var(--ease);
  flex-shrink: 0;
}
.cap-nav-btn:hover:not(:disabled) {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.cap-nav-btn:disabled {
  opacity: 0.3;
  cursor: default;
}
.cap-nav-counter {
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--ink-3);
  min-width: 3rem;
  text-align: center;
}

/* Progress Bar */
.horizontal-progress-container {
  margin-top: 2rem;
}
.horizontal-progress-bar {
  width: 100%;
  height: 5px;
  background: var(--line-2);
  border-radius: 99px;
  overflow: hidden;
}
.horizontal-progress-fill {
  width: 0%;
  height: 100%;
  background: var(--accent);
  transition: width 0.1s linear;
}

/* Mobile: vertical scroll pans the cards horizontally (pinned card stage). */
@media (max-width: 768px) {
  .horizontal-section {
    padding-bottom: 3rem;
  }
  /* The stage gets pinned while you scroll, so it fills the screen and
     centres the cards. No native horizontal scrollbar — the track is moved
     by transform and clipped by the wrapper's overflow:hidden. */
  .horizontal-stage {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1rem;
    min-height: 100svh;
  }
  .horizontal-wrap {
    overflow: hidden;
    padding-bottom: 0;
  }
  .track {
    gap: 1.25rem;
    padding-left: var(--gutter);
    padding-right: var(--gutter);
  }
  .cap-scroll-card {
    width: 82vw; /* Responsive card width on mobile */
    max-width: 320px;
    height: auto;
  }
  .cap-link {
    padding: 1.25rem 1.4rem;
  }
  .cap-title {
    font-size: 1.2rem;
  }
  .cap-desc {
    font-size: 0.88rem;
    line-height: 1.45;
  }
  .cap-nav {
    justify-content: center;
    gap: 1rem;
    margin-bottom: 0.75rem;
  }
  .cap-nav-btn {
    width: 36px;
    height: 36px;
  }
  .cap-nav-counter {
    font-size: 0.78rem;
  }
  .horizontal-progress-container {
    margin-top: 0;
  }
}

/* ============ 10. PROCESS (dark) ============ */
.process-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1.6rem, 3vw, 2.6rem); }
.proc { padding-top: 1.6rem; border-top: 2px solid var(--line-2); }
.proc-num {
  font-family: var(--font-display); font-weight: 800; font-size: clamp(2.4rem, 1.5rem + 3vw, 4rem);
  letter-spacing: -0.04em; color: var(--accent); display: block; margin-bottom: 1rem; line-height: 1;
}
.proc-title { font-size: 1.3rem; margin-bottom: 0.55rem; }
.proc-desc { color: var(--ink-2); font-size: 0.98rem; }

/* ============ 11. ABOUT (spec sheet) ============ */
.about-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(2.5rem, 6vw, 6rem); align-items: start; }
.about-statement .btn { margin-top: 2rem; }
.spec { border-top: 2px solid var(--line-2); }
.spec-row {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.5rem 1.5rem;
  padding: 1.4rem 0; border-bottom: 1px solid var(--line);
}
.spec-row dt { font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
.spec-row dd {
  font-family: var(--font-display); font-weight: 600; font-size: clamp(1.2rem, 1rem + 1vw, 1.7rem);
  letter-spacing: -0.02em; color: var(--ink); text-align: right;
}
.spec-row dd a { transition: color 0.2s; }
.spec-row dd a:hover { color: var(--accent); }

/* ============ 12. FAQ ============ */
.faq-list { border-top: 2px solid var(--line-2); }
.faq-item { border-bottom: 1px solid var(--line-2); }
.faq-item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding: 1.5rem 0.2rem; cursor: pointer; list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-q { display: flex; align-items: baseline; gap: 1rem; font-family: var(--font-display); font-weight: 600; font-size: clamp(1.15rem, 1rem + 1vw, 1.6rem); letter-spacing: -0.02em; }
.faq-n { font-size: 0.8rem; color: var(--accent); flex: none; }
.faq-item summary:hover { color: var(--accent); }
.faq-icon { position: relative; width: 20px; height: 20px; flex: none; }
.faq-icon::before, .faq-icon::after { content: ""; position: absolute; top: 50%; left: 50%; translate: -50% -50%; background: currentColor; transition: transform 0.3s var(--ease); }
.faq-icon::before { width: 16px; height: 2px; }
.faq-icon::after { width: 2px; height: 16px; }
.faq-item[open] .faq-icon::after { transform: scaleY(0); }
.faq-answer { padding: 0 0.2rem 1.6rem; }
.faq-answer p { color: var(--ink-2); max-width: 65ch; padding-left: calc(0.8rem + 1rem); font-size: 1.05rem; }

/* ============ 12b. SOCIAL PROOF (homepage testimonials) ============ */
.proof-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1rem, 2.5vw, 1.6rem); }
.proof-card {
  display: grid; gap: 1.1rem; align-content: start;
  padding: clamp(1.5rem, 3vw, 2.2rem);
  border: 1px solid var(--line-2); border-radius: 18px; background: var(--paper-2);
  transition: transform 0.35s var(--ease), border-color 0.3s;
}
.proof-card:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--accent) 45%, var(--line-2)); }
.proof-stars { color: var(--accent); letter-spacing: 0.12em; font-size: 1rem; }
.proof-card blockquote {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(1.1rem, 1rem + 0.6vw, 1.4rem); letter-spacing: -0.01em; line-height: 1.4; color: var(--ink);
}
.proof-by { display: flex; align-items: center; gap: 0.8rem; margin-top: auto; }
.proof-avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--ink); color: var(--paper); display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; flex: none; }
.proof-meta { display: grid; }
.proof-name { font-family: var(--font-display); font-weight: 600; font-size: 0.98rem; color: var(--ink); }
.proof-role { font-size: 0.8rem; color: var(--ink-3); }
@media (max-width: 720px) { .proof-grid { grid-template-columns: 1fr; } }

/* ============ 13. CONTACT (dark) ============ */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2.5rem, 6vw, 6rem); align-items: start; }
.contact-title { font-size: clamp(2.4rem, 1.4rem + 4.5vw, 5rem); letter-spacing: -0.04em; }
.contact-spec { margin-top: 2.5rem; border-top: 2px solid var(--line-2); }

.contact-form { display: grid; gap: 1.3rem; }
.field { display: grid; gap: 0.5rem; }
.field label { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.field input, .field textarea {
  width: 100%; padding: 0.9rem 0; font: inherit; font-size: 1.05rem;
  background: transparent; color: var(--ink);
  border: none; border-bottom: 2px solid var(--line-2);
  transition: border-color 0.2s;
}
.field input::placeholder, .field textarea::placeholder { color: var(--ink-3); }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--accent); }
.field textarea { resize: vertical; min-height: 110px; }
.form-note { font-size: 0.82rem; color: var(--ink-3); }

/* ---- Form validation, success state & honeypot (shared by both forms) ---- */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.field.is-invalid input,
.field.is-invalid textarea,
.field.is-invalid select { border-color: #e5484d; }
.field-error { color: #e5484d; font-size: 0.8rem; font-weight: 500; margin-top: 0.2rem; }
.field.is-invalid .field-error { color: #e5484d; }
.form-success {
  display: grid; gap: 0.7rem; justify-items: start;
  padding: clamp(1.6rem, 3vw, 2.3rem);
  border: 1px solid color-mix(in srgb, #18b364 45%, var(--line-2));
  border-radius: 16px;
  background: color-mix(in srgb, #18b364 10%, var(--paper-2));
  animation: form-success-in 0.5s var(--ease);
}
.form-success[hidden] { display: none; }
.form-success-icon { width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; background: #18b364; color: #fff; }
.form-success-icon svg { width: 26px; height: 26px; }
.form-success-title { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.3rem, 1.1rem + 1vw, 1.7rem); letter-spacing: -0.02em; color: var(--ink); }
.form-success-text { color: var(--ink-2); max-width: 48ch; }
.form-success:focus { outline: none; }
@keyframes form-success-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* ============ 14. FOOTER (dark) ============ */
.site-footer { padding-block: clamp(3rem, 5vw, 4.5rem) 1.8rem; border-top: 1px solid var(--line); }
.footer-top { display: grid; grid-template-columns: 1.4fr 1fr; gap: 2.5rem; padding-bottom: clamp(2rem, 5vw, 3.5rem); }
.footer-tagline { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.3rem, 1rem + 1.4vw, 2rem); letter-spacing: -0.02em; max-width: 22ch; }
.footer-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
.footer-nav { display: grid; gap: 0.7rem; align-content: start; }
.footer-heading { font-size: 0.74rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 0.5rem; font-family: var(--font-body); font-weight: 600; }
.footer-nav a { color: var(--ink-2); font-size: 0.98rem; width: fit-content; transition: color 0.2s; }
.footer-nav a:hover { color: var(--accent); }

/* oversized wordmark signature */
.footer-wordmark { display: block; margin-block: clamp(1rem, 3vw, 2.5rem); }
.footer-wordmark img { width: 100%; height: auto; opacity: 0.96; }

.footer-bottom { display: flex; flex-wrap: wrap; gap: 0.6rem 1.5rem; justify-content: space-between; align-items: center; padding-top: 1.6rem; border-top: 1px solid var(--line); }
.footer-bottom p { color: var(--ink-3); font-size: 0.84rem; }
.footer-status { font-family: var(--font-display); letter-spacing: 0.1em; }

/* ============ 15. FLOATING ============ */
.fab {
  position: fixed; z-index: 90; width: 54px; height: 54px; border-radius: 50%;
  display: grid; place-items: center; box-shadow: 0 12px 30px -10px rgba(0,0,0,0.45);
  transition: transform 0.25s var(--ease);
}
.fab svg { width: 26px; height: 26px; }
.fab:hover { transform: translateY(-3px) scale(1.05); }
.fab-whatsapp { right: clamp(1rem, 3vw, 1.6rem); bottom: clamp(1rem, 3vw, 1.6rem); background: #25d366; color: #fff; }
.fab-whatsapp::after { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 0 rgba(37,211,102,0.5); animation: pulse 2.6s infinite; }
.fab-top { right: clamp(1rem, 3vw, 1.6rem); bottom: calc(clamp(1rem, 3vw, 1.6rem) + 66px); width: 46px; height: 46px; background: var(--ink); color: var(--paper); }
.fab-top[hidden] { display: none; }
.fab-top svg { width: 20px; height: 20px; }

/* ============ 15b. COOKIE / GDPR CONSENT BANNER ============ */
.cookie-banner {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 120;
  background: var(--night); color: #f0ece1;
  border-top: 1px solid rgba(240, 236, 225, 0.16);
  box-shadow: 0 -18px 44px -22px rgba(0, 0, 0, 0.65);
  transform: translateY(110%);
  transition: transform 0.5s var(--ease);
}
.cookie-banner.is-visible { transform: none; }
.cookie-inner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 0.9rem 2rem; padding-block: 1rem 1.1rem;
}
.cookie-text { max-width: 66ch; display: grid; gap: 0.25rem; }
.cookie-text strong { font-family: var(--font-display); font-weight: 700; font-size: 1.02rem; letter-spacing: -0.01em; }
.cookie-text p { color: color-mix(in srgb, #f0ece1 76%, transparent); font-size: 0.9rem; line-height: 1.5; }
.cookie-text a { color: #ff7a4d; text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }
.cookie-text a:hover { color: #fff; }
.cookie-actions { display: flex; gap: 0.7rem; flex-shrink: 0; }
.cookie-btn {
  padding: 0.62rem 1.35rem; border-radius: 999px;
  font-family: var(--font-display); font-weight: 600; font-size: 0.92rem; white-space: nowrap;
  transition: transform 0.2s var(--ease), background-color 0.2s, color 0.2s, border-color 0.2s;
}
.cookie-accept { background: #eae6dc; color: #14130e; }
.cookie-accept:hover { background: #ff7a4d; color: #14130e; transform: translateY(-2px); }
.cookie-reject { background: transparent; color: #f0ece1; border: 1px solid rgba(240, 236, 225, 0.4); }
.cookie-reject:hover { border-color: #ff7a4d; color: #ff7a4d; }
@media (max-width: 620px) {
  .cookie-inner { flex-direction: column; align-items: stretch; }
  .cookie-actions { justify-content: stretch; }
  .cookie-actions .cookie-btn { flex: 1 1 auto; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  .cookie-banner { transition: none; }
}

/* ============ 16. ANIMATIONS ============ */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.reveal.in { opacity: 1; transform: none; }

/* No-JS rescue — consent.js tags <html class="js"> synchronously in <head>.
   If scripts are blocked or fail, no JS-driven hidden state may hide content. */
html:not(.js) .reveal,
html:not(.js) .reveal-blur,
html:not(.js) .reveal-clip, html:not(.js) .reveal-clip--left, html:not(.js) .reveal-clip--top,
html:not(.js) .reveal-iris,
html:not(.js) .reveal-stagger > *,
html:not(.js) [data-stagger] > *,
html:not(.js) .page-hero-title > span,
html:not(.js) .section-head .section-title,
html:not(.js) .section-head .section-lead,
html:not(.js) .tl-step .tl-body {
  opacity: 1 !important; transform: none !important; filter: none !important; clip-path: none !important;
}

/* Section headings: layered text entrance — the head rises (base .reveal),
   then the title blur-clears, then the lead follows. Pure CSS, i18n-proof. */
@media (prefers-reduced-motion: no-preference) {
  .js .section-head.reveal .section-title {
    opacity: 0; transform: translateY(18px); filter: blur(5px);
    transition: opacity 0.7s var(--ease) 0.08s, transform 0.7s var(--ease) 0.08s, filter 0.7s var(--ease) 0.08s;
  }
  .js .section-head.reveal .section-lead {
    opacity: 0; transform: translateY(14px);
    transition: opacity 0.6s var(--ease) 0.2s, transform 0.6s var(--ease) 0.2s;
  }
  .section-head.reveal.in .section-title,
  .section-head.reveal.in .section-lead { opacity: 1; transform: none; filter: blur(0); }
}

@keyframes scroll-x { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(37,211,102,0.45); } 70% { box-shadow: 0 0 0 16px rgba(37,211,102,0); } 100% { box-shadow: 0 0 0 0 rgba(37,211,102,0); } }

/* ============ 16b. ANIMATION UTILITIES (shared with animations.js) ============
   Initial-hidden states live inside `no-preference` only, so when motion is
   reduced these selectors don't exist and content renders fully visible — no
   JS fallback required. The global reduced-motion block (§19) is the backstop. */
@media (prefers-reduced-motion: no-preference) {
  /* blur-in reveal */
  .reveal-blur { opacity: 0; filter: blur(12px); transform: scale(1.04); transition: opacity 0.9s var(--ease), filter 0.9s var(--ease), transform 0.9s var(--ease); }
  .reveal-blur.in { opacity: 1; filter: blur(0); transform: none; }

  /* clip-path wipe reveals */
  .reveal-clip { clip-path: inset(0 100% 0 0); transition: clip-path 1s cubic-bezier(0.76, 0, 0.24, 1); }
  .reveal-clip.in { clip-path: inset(0 0% 0 0); }
  .reveal-clip--left { clip-path: inset(0 0 0 100%); transition: clip-path 1s cubic-bezier(0.76, 0, 0.24, 1); }
  .reveal-clip--left.in { clip-path: inset(0 0 0 0%); }
  .reveal-clip--top { clip-path: inset(100% 0 0 0); transition: clip-path 1s cubic-bezier(0.76, 0, 0.24, 1); }
  .reveal-clip--top.in { clip-path: inset(0% 0 0 0); }

  /* iris (circular) reveal — opens to full coverage so rounded corners survive */
  .reveal-iris { clip-path: circle(0% at 50% 50%); transition: clip-path 1s var(--ease); }
  .reveal-iris.in { clip-path: circle(150% at 50% 50%); }

  /* staggered children entrance — JS sets --i on each child */
  .reveal-stagger > * { opacity: 0; transform: translateX(-24px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); transition-delay: calc(var(--i, 0) * 80ms); }
  .reveal-stagger.in > * { opacity: 1; transform: none; }

  /* split-text scaffolding (charCascade / line reveals) */
  .anim-char { display: inline-block; will-change: transform, opacity; }
  .line-mask { display: block; overflow: hidden; }
  .line-mask > span { display: inline-block; }

  /* gradient shimmer text (e.g. award names on hover) */
  .text-shimmer { background: linear-gradient(90deg, var(--ink), var(--accent), var(--ink)); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: shimmer-sweep 3s linear infinite; }
  @keyframes shimmer-sweep { to { background-position: -200% 0; } }

  /* magnetic targets just hint the compositor; smoothing uses the element's own transform transition */
  .magnetic-target { will-change: transform; }

  /* Services index rows: stagger the existing .reveal entrance (--i set by JS) */
  .index-list .index-row.reveal { transition-delay: calc(var(--i, 0) * 80ms); }

  /* Process steps: draw an accent line across each step's top border on reveal.
     The layout is a horizontal grid, so the line draws left→right (not a vertical
     timeline). --i (set by JS on [data-stagger]) staggers the draw. */
  .proc { position: relative; }
  .proc::before {
    content: ""; position: absolute; top: -2px; left: 0; height: 2px; width: 100%;
    background: var(--accent); transform: scaleX(0); transform-origin: left center;
    transition: transform 0.8s var(--ease); transition-delay: calc(var(--i, 0) * 0.12s);
  }
  .proc.in::before { transform: scaleX(1); }

  /* Capability cards: smooth the cursor-aware 3D tilt return ([data-tilt]).
     The existing child-level hover micro-interactions are untouched. */
  .cap-scroll-card[data-tilt] { transition: transform 0.4s var(--ease); transform-style: preserve-3d; will-change: transform; }
}

/* Scroll-progress ring layered onto the existing #backToTop FAB. It is a
   navigation control (not decoration) so it renders regardless of motion pref. */
.fab-top { position: fixed; }
.fab-top .fab-ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); pointer-events: none; overflow: visible; }
.fab-top .fab-ring circle { fill: none; stroke-width: 3; }
.fab-top .fab-ring .track { stroke: rgba(234, 230, 220, 0.22); }
.fab-top .fab-ring .progress { stroke: var(--accent); stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 0.1s linear; }

/* ============ 16c. 3D FLIP TRANSITION (process → about bridge) ============
   The dark .front page rotates on a top hinge to flip away and reveal the
   paper .back page behind it. Perspective lives on the STAGE (not the pages);
   backface-visibility hides each page once it turns past 90deg, so we never
   need to juggle z-index mid-flip. JS (inline in index.html) scrubs the flip
   on scroll; reduced motion / no-GSAP falls back to the .is-static cross-fade. */
.flip-stage {
  position: relative;
  height: 100vh;                       /* one viewport tall while pinned */
  overflow: hidden;
  perspective: 1200px;                 /* depth applied here, on the stage */
  background: var(--night);            /* safe base; both pages cover it fully */
}
.flip-viewport {
  position: absolute; inset: 0;
  transform-style: preserve-3d;        /* lets the stage perspective reach the pages */
}
.flip-stage .page {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  padding: var(--gutter);
  transform-origin: top center;        /* hinge along the top edge */
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  will-change: transform, opacity;     /* set during the flip; cheap to composite */
}
.flip-stage .page.back  { z-index: 1; background: var(--paper); color: var(--ink); }
.flip-stage .page.front { z-index: 2; background: var(--night); color: var(--paper); }

.flip-content { max-width: 24ch; text-align: center; display: grid; gap: 1rem; justify-items: center; }
.flip-kicker {
  font-size: 0.8rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--accent);
}
.flip-title {
  font-family: var(--font-display); font-weight: 800; letter-spacing: -0.03em; line-height: 1.04;
  font-size: clamp(2rem, 1.2rem + 4vw, 4.4rem); text-wrap: balance;
}
.flip-hint {
  margin-top: 0.4rem; font-size: 0.76rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: color-mix(in srgb, var(--paper) 64%, transparent);
  display: inline-flex; align-items: center; gap: 0.45rem;
}
.flip-hint::after { content: "\2193"; font-size: 1.15em; }

/* Fallback (reduced motion OR no GSAP): no pin, no rotation — a calm opacity
   cross-fade from the front (process) page to the back (about) page. */
.flip-stage.is-static { height: auto; min-height: 68vh; }
.flip-stage.is-static .page.front { transition: opacity 0.8s var(--ease); }
.flip-stage.is-static.in .page.front { opacity: 0; }
/* Hard guarantee: a reduced-motion user never gets a rotated page, even if the
   script hasn't toggled .is-static yet. */
@media (prefers-reduced-motion: reduce) {
  .flip-stage .page.front { transform: none !important; }
}

@media (max-width: 980px) {
  .hero-bottom { grid-template-columns: 1fr; gap: 1.8rem; align-items: start; }
  .about-grid { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
  .process-row { grid-template-columns: repeat(2, 1fr); gap: 2rem 2.4rem; }
  .footer-top { grid-template-columns: 1fr; gap: 2rem; }
}



@media (max-width: 860px) {
  .menu-toggle { display: flex; }
  .header-cta { display: none; }
  .nav {
    position: fixed; inset: 72px 0 auto 0; flex-direction: column; gap: 0;
    background: var(--paper); border-bottom: 1px solid var(--line);
    box-shadow: 0 24px 40px -24px rgba(0,0,0,0.4);
    padding: 0.4rem var(--gutter) 1rem;
    transform: translateY(-12px); opacity: 0; visibility: hidden; pointer-events: none;
    transition: transform 0.3s var(--ease), opacity 0.3s, visibility 0.3s;
  }
  .nav.open { transform: none; opacity: 1; visibility: visible; pointer-events: auto; }
  .nav a { padding: 1rem 0.4rem; font-size: 1.1rem; border-bottom: 1px solid var(--line); }
  .nav a::after { display: none; }
  .nav a:last-child { border-bottom: none; }

}

@media (max-width: 560px) {
  :root { --section-y: 4rem; }
  .hero-cta { width: 100%; }
  .hero-cta .btn-primary { flex: 1 1 auto; }
  .process-row { grid-template-columns: 1fr; }
  .index-row { grid-template-columns: auto 1fr; }
  .index-arrow { display: none; }
  .index-row:hover { padding-inline: 0.8rem; }
  .spec-row { flex-direction: column; align-items: flex-start; }
  .spec-row dd { text-align: left; }
  .spec-row--whatsapp { align-items: center; text-align: center; }
  .spec-row--whatsapp dd { text-align: center; }
  .faq-answer p { padding-left: 0; }
}

/* ============ 18. LEGAL PAGES ============ */
.legal-simple-header .header-inner { justify-content: space-between; }
.legal-main { padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(3rem, 7vw, 5.5rem); position: relative; z-index: 2; }
.legal-narrow { max-width: 780px; margin-inline: auto; }
.legal-back { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--ink-2); font-size: 0.92rem; font-weight: 500; margin-bottom: 2rem; transition: color 0.2s, gap 0.2s; }
.legal-back:hover { color: var(--accent); gap: 0.6rem; }
.legal-back svg { width: 16px; height: 16px; }
.legal-header { margin-bottom: 2.6rem; }
.legal-header h1 { font-size: clamp(2rem, 1.3rem + 3vw, 3.2rem); letter-spacing: -0.03em; margin-bottom: 0.7rem; }
.legal-header p { color: var(--ink-2); }
.legal-updated { font-size: 0.85rem; color: var(--ink-3); margin-top: 0.6rem; }
.legal-body h2 { font-size: 1.4rem; margin: 2.6rem 0 0.8rem; padding-top: 1.9rem; border-top: 1px solid var(--line); letter-spacing: -0.02em; }
.legal-body h2:first-of-type { border-top: none; padding-top: 0; margin-top: 0; }
.legal-body p, .legal-body li { color: var(--ink-2); }
.legal-body p { margin-bottom: 1rem; }
/* ink text + vermillion underline keeps links high-contrast (AA) yet on-brand */
.legal-body a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.legal-body a:hover { color: var(--accent); }
.legal-body ul { list-style: disc; padding-left: 1.4rem; margin-bottom: 1rem; display: grid; gap: 0.4rem; }
.legal-card { border: 1px solid var(--line-2); border-radius: 4px; padding: 1.4rem 1.6rem; margin-bottom: 1.5rem; background: var(--paper-2); }
.legal-card p { margin-bottom: 0.35rem; }
.legal-note { display: block; margin-top: 0.6rem; padding: 0.7rem 0.9rem; background: color-mix(in srgb, var(--accent) 8%, transparent); border: 1px dashed var(--accent); border-radius: 4px; font-size: 0.85rem; color: var(--ink-2); }

/* ============ 19. REDUCED MOTION ============ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
  .reveal { opacity: 1; transform: none; }
  .marquee-track { animation: none; }
  .hero { background-image: none; }
  .liquid-wrap.is-morphing { filter: none; }
  .liquid-text--b { display: none; }
}