/* ===== Synaptek UX — Poster Typographic (AA only) — uses tokens.css ===== */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;  color:var(--color-neutral-text);
  font: 400 calc(var(--typography-body-size) * 1px)/var(--typography-body-lineHeight) var(--typography-body-family);
background:var(--color-neutral-bg);}
.container{ max-width: calc(var(--layout-container-xl) * 1px); margin:0 auto; padding: 0 24px; }

/* Accessibility core */
a{ color: var(--interactive-link-default); text-decoration: underline; text-underline-offset: 2px; }
a:hover{ color: var(--interactive-link-hover); }
a:focus-visible, button:focus-visible, .btn:focus-visible{
  outline: 3px solid var(--interactive-focusRing-outline); outline-offset: calc(var(--interactive-focusRing-offset) * 1px);
}
.nav-link, .btn, button{ min-height:44px; min-width:44px; display:inline-flex; align-items:center; cursor:pointer; }

.skip-link{ position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; }
.skip-link:focus{ position:fixed; left:16px; top:16px; width:auto; height:auto; padding:10px 12px; background:#fff; color:#000; border:2px solid var(--interactive-focusRing-outline); border-radius:10px; z-index:1000; }

/* Header */
header.site{ position:sticky; top:0; background:rgba(255,255,255,.92); backdrop-filter:saturate(120%) blur(8px);
  border-bottom:1px solid var(--color-neutral-border); z-index: var(--zIndex-sticky); }
header .bar{ display:flex; gap:16px; align-items:center; justify-content:space-between; padding: 16px 0; }
.brand{ font-weight:900; letter-spacing:.02em; }
.nav{ display:flex; gap:18px; align-items:center; }
.nav a{ text-decoration:none; color: var(--color-neutral-text); padding:8px 6px; }
.nav a:hover{ text-decoration:underline; }

/* Burger */
.nav-toggle{display:none;margin-left:auto;align-items:center;gap:8px;padding:10px 12px;border-radius:16px;border:2px solid var(--border);background:#fff;box-shadow:0 6px 16px rgba(0,0,0,.08)}
.nav-toggle__bars{width:20px;height:14px;position:relative;display:inline-block}
.nav-toggle__bars:before,.nav-toggle__bars:after{content:"";position:absolute;left:0;right:0;height:2px;background:currentColor;border-radius:2px}
.nav-toggle__bars:before{top:0;box-shadow:0 6px 0 0 currentColor}
.nav-toggle__bars:after{bottom:0}
.nav-toggle__label{font-weight:700}
@media (max-width:1023px){
  .nav-desktop{display:none}
  .cta{display:none}
  .nav-toggle{display:flex}
}

/* Mobile panel */
.mobile-nav{position:fixed;inset:72px 12px auto 12px;border:1px solid var(--border);border-radius:16px;box-shadow:0 24px 36px rgba(0,0,0,.18);padding:20px;display:flex;flex-direction:column;gap:16px;z-index:60background:var(--color-neutral-surface);}
.mobile-nav .nav{flex-direction:column;gap:10px}
.mobile-cta{margin-top:8px}
[hidden]{display:none !important}
body.menu-open{overflow:hidden}

/* Buttons */
.btn{ padding:10px 16px; border-radius: calc(var(--radius-md) * 1px); border:1px solid var(--color-neutral-text);
  background:transparent; color: var(--color-neutral-text); font-weight:600; }
.btn:hover{ background: var(--color-neutral-text); color:#fff; }
.btn-primary{ border-color: var(--interactive-buttonPrimary-bg); background: var(--interactive-buttonPrimary-bg); color: var(--interactive-buttonPrimary-text); }
.btn-primary:hover{ background: var(--interactive-buttonPrimary-hoverBg); border-color: var(--interactive-buttonPrimary-hoverBg); }
.btn-primary:disabled{ background: var(--interactive-buttonPrimary-disabledBg); color:#6b6b6b; border-color: var(--interactive-buttonPrimary-disabledBg); }

/* Hero section */
.hero{ padding: 96px 0 64px; border-bottom: 6px solid var(--color-neutral-text); }
.hero .grid{ display:grid; grid-template-columns: 2.2fr 1fr; gap: 48px; align-items:end; }
@media (max-width: 980px){ .hero .grid{ grid-template-columns: 1fr; gap: 24px; } }
.hero h1{ font-size: clamp(52px, 6.2vw, calc(var(--typography-heading-scale-h1) * 1px)); line-height:.94; letter-spacing: -.01em; margin:0; }
.hero .sub{ color: var(--color-neutral-mutedText); margin: 16px 0 0; max-width: 68ch; }
.hero .rule-vert{ width:6px; height: 100%; background: var(--color-neutral-text); border-radius: 3px; }
.hero .right{ display:grid; gap: 16px; }
.hero .tagline{ font-size: clamp(26px, 2.0vw, calc(var(--typography-heading-scale-h2) * 1px)); font-weight:800; line-height:1.1; }
.hero .cta-wrap{ display:flex; gap:12px; flex-wrap:wrap; }

/* Sections */
.section{ padding: 64px 0; position:relative; }
.section .stripe{ position:absolute; left:0; top:0; bottom:0; width:6px; background: linear-gradient(180deg, var(--color-accent-400), var(--color-primary-500)); border-radius: 0 3px 3px 0; }
.head{ display:grid; gap: 12px; margin-bottom: 24px; }
.kicker{ font-weight:800; text-transform:uppercase; letter-spacing:.16em; font-size:12px; color: var(--color-neutral-mutedText); }
h2{ font-size: clamp(36px, 3.4vw, calc(var(--typography-heading-scale-h2) * 1px)); line-height:1.05; margin:0; }
h3{ font-size: clamp(20px, 1.2vw, calc(var(--typography-heading-scale-h3) * 1px)); margin:0 0 12px; }

/* Layout helpers */
.cols-2{ display:grid; grid-template-columns: 1.2fr 1fr; gap: 48px; }
@media (max-width:980px){ .cols-2{ grid-template-columns: 1fr; } }

/* Intent */
.intent-quote{ font-size: clamp(26px, 2.0vw, calc(var(--typography-heading-scale-h2) * 1px)); font-weight:800; line-height:1.15; }
.intent-note{ color: var(--color-neutral-mutedText); }

/* Services / Pillars */
.services-list{ display:grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 32px; }
@media (max-width:980px){ .services-list{ grid-template-columns: 1fr 1fr; } }
@media (max-width:640px){ .services-list{ grid-template-columns: 1fr; } }
.service{ border-top: 6px solid var(--color-primary-500); padding-top: 16px; }
.service p{ color: var(--color-neutral-mutedText); margin:0; }

/* Proof */
.facts{ display:grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 48px; }
@media (max-width:980px){ .facts{ grid-template-columns: 1fr 1fr;  gap: 32px;} }
@media (max-width:640px){ .facts{ grid-template-columns: 1fr;  gap: 24px;} }
.fact{ display:grid; gap: 12px; }
.fact .num{ font-weight:900; font-size: clamp(44px, 4.4vw, 72px); color: var(--color-primary-500); line-height: .95; }
.fact .label{ color: var(--color-neutral-mutedText); }

/* Contact */
.contact{ background: var(--color-dark-bg); color: var(--color-dark-text); padding: 64px 0; }
.contact .grid{ display:grid; grid-template-columns: 1.4fr 1fr; gap: 48px; align-items:end; }
@media (max-width:980px){ .contact .grid{ grid-template-columns: 1fr; } }
.contact h2{ color: var(--color-dark-text); }
.contact p{ color: var(--color-dark-mutedText); }

footer.site{ border-top:1px solid #222; background: var(--color-dark-bg); color:#aaa; padding: 24px 0; font-size:14px; }
footer a{ color:#fff; text-decoration: underline; }



/* === Cards (UI Patterns) === */
.cards{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:24px; }
@media (max-width: 980px){ .cards{ grid-template-columns: repeat(2, minmax(0,1fr)); gap:20px; } }
@media (max-width: 640px){ .cards{ grid-template-columns: 1fr; gap:16px; } }

.card{
  border: 1px solid var(--color-neutral-border);
  background: var(--color-neutral-surface);
  color: var(--color-neutral-text);
  border-radius: var(--radius-md, 8px);
  padding: 16px;
  display:flex; flex-direction:column; gap:8px;
  min-height: 160px;
}
.card h3{ font-size: 1.125rem; line-height: 1.3; margin: 0; }
.card p{ margin: 0; }
.card .card-link{ font-weight: 600; text-decoration: none; }
.card--icon .card-icon{ font-size: 1.8rem; line-height:1; }
.card--stat .num{ font-size: 2rem; font-weight: 700; }
.card--stat .label{ opacity: var(--opacity-muted, .72); }
.card--quote blockquote{ margin:0; padding-left: 12px; border-left: 2px solid var(--color-neutral-border); }
.card--quote cite{ display:block; margin-top: 8px; font-style: normal; opacity: var(--opacity-muted, .72); }
.card--tagged .tags{ display:flex; gap:8px; flex-wrap:wrap; }
.tag{ display:inline-flex; align-items:center; min-height: 24px; padding: 0 8px; border-radius: 999px;
      border: 1px solid var(--color-neutral-border); background: var(--color-neutral-bg); }
.card--cta{ align-items:flex-start; gap:12px; }
.card--cta .btn{ margin-top: 4px; }
.card a:focus{ outline: var(--interactive-focusRing-outline, 2px auto); outline-offset: var(--interactive-focusRing-offset, 2px); }

.cards{ align-items:stretch; }
.card{ transition: box-shadow .18s cubic-bezier(0.2,0,0,1), transform .18s cubic-bezier(0.2,0,0,1); min-height: 160px; }
.card:hover{ box-shadow: var(--shadow-sm, 0 2px 10px rgba(0,0,0,.06)); transform: translateY(-1px); }


/* === Variations (Peps) — no new colors, token-based === */

/* Alternating section background using neutral tokens */
.section.alt{ background: var(--color-neutral-bg); }
.section{ padding: 64px 0; }
@media (max-width:980px){ .section{ padding: 48px 0; } }
@media (max-width:640px){ .section{ padding: 40px 0; } }

/* Make the decorative stripe more visible but subtle */
.section .stripe{ height: 2px; background: linear-gradient(90deg, var(--color-primary-700), var(--color-primary-500)); margin-bottom: 24px; }

/* Cards: primary top accent + gentle elevation */
.card{ border-top: 3px solid var(--color-primary-500); }
.card:hover{ box-shadow: var(--shadow-sm, 0 4px 18px rgba(0,0,0,.08)); transform: translateY(-2px); }

/* Better link affordance */
.card .card-link{ text-decoration: none; }
.card .card-link:hover{ text-decoration-thickness: 2px; }

/* Typo polish and hyphenation for long headings */
.card h3, .card p{ hyphens: auto; overflow-wrap: anywhere; }

/* Hero intro/intent lead */
.intent-note p{ font-size: 1.125rem; line-height: 1.6; }

/* Facts: underline numbers with primary to energize without extra colors */
.facts .num{ position: relative; display:inline-block; }
.facts .num::after{
  content:""; position:absolute; left:0; right:0; bottom:-6px; height:2px;
  background: var(--color-primary-600);
}


/* === Proof visual enhancements === */
.section{ position: relative; } /* allow positioned rail */
.section .rail{
  position:absolute; left:0; top:0; bottom:0; width:8px;
  background: linear-gradient(180deg, var(--color-primary-700), var(--color-primary-500));
  border-radius: 0 4px 4px 0;
  opacity: .95;
}
#proof.section{
  background: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 0%,
    color-mix(in srgb, var(--color-primary-500), transparent 88%) 0%,
    color-mix(in srgb, var(--color-primary-500), transparent 94%) 100%);
  /* Fallback for browsers without color-mix */
  background: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 0%,
    rgba(98, 0, 234, 0.06) 0%, rgba(98, 0, 234, 0.02) 100%);
}
#proof .facts .num{ color: var(--color-primary-700); } /* stay AA on light bg */

#proof{ position: relative; }
#proof .rail{
  position:absolute; left:0; top:0; bottom:0; width:12px;
  background: linear-gradient(180deg, var(--color-primary-700), var(--color-primary-500));
  border-radius: 0 8px 8px 0;
}


/* === Proof flush-left gradient + rail === */
#proof{ position: relative;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--color-primary-500), transparent 92%) 0%,
    color-mix(in srgb, var(--color-primary-500), transparent 97%) 100%);
  /* Fallback */
  background: linear-gradient(90deg, rgba(98,0,234,.06) 0%, rgba(98,0,234,.02) 100%);
  border-radius: 0 10px 10px 0;
}
#proof .rail{
  position:absolute; left:0; top:0; bottom:0; width:12px;
  background: linear-gradient(180deg, var(--color-primary-700), var(--color-primary-500));
  border-radius: 0 8px 8px 0;
  z-index: 1;
}
/* Keep content above gradient but below header/footer */
#proof > .container{ position: relative; z-index: 2; }

#proof > .container{ background: transparent !important; }


/* === Proof full-width gradient (flush-left) & rail === */
#proof{ position: relative;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--color-primary-500), transparent 92%) 0%,
    color-mix(in srgb, var(--color-primary-500), transparent 97%) 100%);
  /* Fallback */
  background: linear-gradient(90deg, rgba(98,0,234,.06) 0%, rgba(98,0,234,.02) 100%);
  border-radius: 0 10px 10px 0;
}
#proof .rail{
  position:absolute; left:0; top:0; bottom:0; width:12px;
  background: linear-gradient(180deg, var(--color-primary-700), var(--color-primary-500));
  border-radius: 0 8px 8px 0;
}

.facts .label{ color: var(--color-neutral-mutedText); }

/* === Global site rail (full-height, fixed) === */
.site-rail{ position: fixed; left:0; top:0; width:8px; height:100vh; pointer-events:none; z-index:1000; border-radius:0 6px 6px 0; 
  position: fixed; left: 0; top: 0; width: 8px; height: 100vh;
  
  border-radius: 0 6px 6px 0;
  z-index: 1202; pointer-events: none;
}
/* Avoid horizontal scrollbars due to transforms or rounding */
html, body{ overflow-x: clip; background:var(--color-neutral-bg);}


/* === Global rail shimmer (very slow, motion-safe) === */
.site-rail::before{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg,
    #6A00F4 0%,
    #8A00F6 20%,
    #B000F2 40%,
    #D0009E 60%,
    #E4007C 80%,
    #B000F2 100%);
  background-size: 100% 300%;
  animation: railShift 18s ease-in-out infinite alternate; animation: railShift 18s ease-in-out infinite alternate, railPulse 3.6s ease-in-out infinite;
  border-radius: inherit;
 box-shadow: none !important; }
@keyframes railShift{
  0%{ background-position: 50% 0%; }
  100%{ background-position: 50% 100%; }
}
@media (prefers-reduced-motion: reduce){
  .site-rail::before{ animation: none; }
}

/* Pulse adds a gentle luminous breathing to the rail */
@keyframes railPulse{ 0%,100%{ opacity:.95; } 50%{ opacity:1; } }
  50%{ opacity: 1; box-shadow: 0 0 14px 0 color-mix(in srgb, var(--color-primary-500), transparent 70%); }
}
@media (prefers-reduced-motion: reduce){
  .site-rail::before{ animation: none; }
}


/* === Header/Menu Polish (grid layout & spacing) === */
header.site .bar{
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 24px;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
  min-height: 72px;
}

/* Brand logo sizing */
header.site .brand img{ height: 32px; width: auto; display: block; }
@media (max-width: 980px){ header.site .brand img{ height: 28px; } }

/* Center nav between brand and CTA, with air near the logo */
header.site .nav{
  display: flex; align-items: center; justify-content: center;
  gap: 32px; margin-left: 32px;
}
@media (max-width: 980px){
  header.site .nav{ gap: 20px; margin-left: 16px; flex-wrap: wrap; justify-content: center; }
}

/* Menu links: tappable targets + focus ring */
header.site .nav a{
  text-decoration: none;
  padding: 8px 4px; /* ↑ hit area >= 44px when combined with line-height */
  line-height: 1.4;
  outline-offset: var(--interactive-focusRing-offset, 2px);
}
header.site .nav a:focus-visible{
  outline: var(--interactive-focusRing-outline, 2px auto Highlight);
}

/* CTA: visually lighter than bar height */
header.site .cta{ justify-self: end; }
header.site .cta .btn,
header.site .cta a.btn{
  font-size: 16px; line-height: 1.1;
  padding: 10px 16px;
  border-radius: 16px;
  text-decoration: none;
}

/* Ensure no edge collision on tiny screens */
@media (max-width: 480px){
  header.site .bar{ padding-left: 16px; padding-right: 16px; }
}

/* Keep previous header spacing fixes as fallback */
header.site .bar > .container{ max-width: 1280px; margin: 0 auto; padding: 0 24px; }


/* === Certification block (NN/g) === */
.cert{ display:grid; grid-template-columns: auto 1fr; align-items:center; gap: 24px; }
.cert-media img{ display:block; max-width: 220px; width: 100%; height: auto; }
.cert-content .kicker{ letter-spacing:.08em; text-transform: uppercase; }
@media (max-width: 980px){ .cert{ grid-template-columns: 1fr; text-align: center; } .cert-media{ order: -1; } }

/* Readability for impact numbers: break before 'to' */
#proof .facts .num br { content: ""; }

.section .stripe{ display:none !important; }

/* Improve contrast/readability for 'to' in impact numbers */
#proof .facts .num .num-to{
  color: var(--color-neutral-mutedText);
  font-weight: 600;
}

.site-rail{ filter:none !important; }

/* Neutralize any section-level .rail blocks (keeps global .site-rail) */
.section .rail, #proof .rail{ display:none !important; width:0 !important; }

/* Pillars subtitle */
#pillars .subtitle{
  margin-top: 8px;
  color: var(--color-neutral-mutedText);
  font-weight: 600;
}

/* Pillars intro text under the section kicker */


/* Pillars intro styled as display h2 */
#pillars .pillars-intro{
  margin-top: 8px;
  margin-bottom: 8px;
  font-weight: 800; /* same visual weight as main headings */
  line-height: 1.05;
}

/* === Patch v3: container centering and rail offset === */
:root{
  --container: 1280px;
  --space: 24px;
  --rail: 16px;
}
.container{
  max-width: var(--container);
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: calc(var(--space) + var(--rail));
  padding-right: var(--space);
}
@media (min-width: 1200px){
  :root{ --space: 32px; --rail: 20px; }
}


/* === Enhancements batch === */

/* Rail compensation per breakpoint */
:root{ --rail: 14px; }
@media (min-width: 640px){ :root{ --rail: 16px; } }
@media (min-width: 1024px){ :root{ --rail: 18px; } }
@media (min-width: 1280px){ :root{ --rail: 20px; } }

/* Hero vertical rhythm on mobile */
@media (max-width: 640px){
  .hero h1{ line-height: 1.04; margin-bottom: 0.5em; }
  .hero .tagline{ margin-top: 0.25rem; margin-bottom: 0.75rem; }
  .hero .sub{ margin-top: 0.25rem; }
  .hero .cta-wrap{ margin-top: 1rem; }
}

/* Clients list: two columns on wide screens */
.client-lines{
  list-style: disc;
  padding-left: 1.25rem;
}
@media (min-width: 1280px){
  .client-lines{
    column-count: 2;
    column-gap: 3rem;
  }
  .client-lines li{ break-inside: avoid; padding-right: 1rem; }
}

/* Proof spacing: give more separation between facts */
.facts{ display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 2.5rem 3rem; }
@media (max-width: 1024px){
  .facts{ grid-template-columns: repeat(2, minmax(0,1fr)); gap: 2rem; }
}
@media (max-width: 640px){
  .facts{ grid-template-columns: 1fr; gap: 1.5rem; }
}

/* Ensure 'to' remains muted and on new line */
.num .num-to{ color: #666; opacity: .9; display: block; line-height: 1; }


/* Credentials grid */
.cred-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 3rem 4rem;
}
@media (max-width: 1200px){
  .cred-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 640px){
  .cred-grid{ grid-template-columns: 1fr; }
}
.cred-col .rule{
  height: 8px;
  background: linear-gradient(90deg, #6418ff 0%, #7a20ff 100%);
  border-radius: 8px;
  margin-bottom: 1.25rem;
}
.cred-col h3{ margin: 0 0 .5rem 0; }
.cred-col p.muted{ margin: 0; }

/* Proof numbers: place 'to' with the second number, on a new line */
.fact .num{ font-weight: 800; }
.fact .num-line1{ font-size: clamp(1.5rem, 3.75vw, 3.75rem); line-height: .95; }
.fact .num-line2{ font-size: clamp(1.5rem, 3.75vw, 3.75rem); line-height: .95; }
.fact .num-line2 .num-to{ color:#666; margin-right:.35em; }
.fact .label{ margin-top: .75rem; color:#4b4b53; font-size: clamp(1rem, 1.2vw, 1.25rem); }


/* --- Proof: 'to' before second number, reduced size and baseline aligned --- */
.fact .num-line2{
  display: inline-flex;
  align-items: baseline;
  gap: .25em;
}
.fact .num-line2 .num-to{
  font-size: .75em;        /* 25% smaller than the line font-size */
  color: #666;             /* AA-muted */
  font-weight: 700;
  line-height: 1;
  transform: translateY(.05em); /* nudge onto baseline */
}


/* tighten spacing to prevent visual right-shift */
.fact .num{ text-align: left; }
.fact .num-line2{ gap: .2em; }


/* --- Proof numbers: simple markup with <br> and .num-to before second value --- */
.fact .num{
  font-weight: 800;
  font-size: clamp(1.5rem, 3.75vw, 3.75rem); /* 25% smaller than original */
  line-height: .95;
  text-align: left;
  white-space: nowrap; /* keep 'to +35%' together */
}
.fact .num br{ line-height: .9; }
.fact .num .num-to{
  font-size: .75em;      /* 25% smaller */
  color: #666;
  font-weight: 700;
  vertical-align: baseline;
  margin-right: .15em;
}


/* --- Keep 'to' glued to the following number --- */
.fact .num{ white-space: nowrap; }
.fact .num .num-to{ display:inline; margin-right: 0; }
.fact .num .num-to::after{ content: "\00A0"; } /* non-breaking space */

/* harmonize proof spacing after shrink */
.facts{ gap: 2rem 2.5rem; }
@media (max-width: 1024px){ .facts{ gap: 1.5rem 2rem; } }
@media (max-width: 640px){ .facts{ gap: 1.25rem 1.5rem; } }


/* === Kicker color AA === */
:root{
  --kicker: #3b24cc; /* deep violet, AA on white */
}
.kicker{ color: var(--kicker); }

/* === Intent spacing tighten === */
#intent .head + p{ margin-top: .5rem; }
#intent h2{ margin-bottom: .5rem; }

/* === Hero spacing (headline / punchline / sub) === */
.hero h1{ margin-bottom: .35em; }
.hero .punchline{ margin-top: .3em; margin-bottom: .35em; }
.hero .sub{ margin-top: .35em; }
@media (max-width: 768px){
  .hero h1{ margin-bottom: .4em; }
  .hero .punchline{ margin-top: .4em; }
}
/* Ensure hero CTA is solid primary */
.hero a.btn{ text-decoration: none; }
.hero a.btn.btn--solid{
  background: var(--accent, #7a20ff);
  color: var(--accent-ink, #fff);
  box-shadow: 0 2px 8px rgba(59,36,204,.25);
}
.hero a.btn.btn--solid:hover{
  background: var(--accent-hover, #631cf0);
}


/* === INTENT: tighten title-to-paragraph spacing === */
#intent .head{ margin-bottom: .35rem !important; }
#intent .head .kicker{ margin-bottom: .35rem !important; }
#intent h2{ margin-bottom: .25rem !important; }
#intent .head + p,
#intent h2 + p{ margin-top: .35rem !important; }
@media (max-width: 768px){
  #intent .head{ margin-bottom: .3rem !important; }
  #intent h2{ margin-bottom: .2rem !important; }
  #intent .head + p,
  #intent h2 + p{ margin-top: .3rem !important; }
}


/* === Section proximity tuning (Intent→Services & Cert→Pillars) === */
section[id*="intent"]{ padding-bottom: 2.25rem !important; margin-bottom: 0 !important; }
section[id*="service"]{ padding-top: 2.25rem !important; margin-top: 0 !important; }

section[id*="cert"]{ padding-bottom: 2rem !important; margin-bottom: 0 !important; }
section[id*="pillar"]{ padding-top: 2rem !important; margin-top: 0 !important; }

/* Tighten top header stacks to avoid double spacing */
.section .head{ margin-bottom: .65rem; }
.section .head .kicker{ margin-bottom: .35rem; }
.section h2{ margin-top: 0; }
@media (max-width: 768px){
  section[id*="intent"]{ padding-bottom: 1.5rem !important; }
  section[id*="service"]{ padding-top: 1.5rem !important; }
  section[id*="cert"]{ padding-bottom: 1.25rem !important; }
  section[id*="pillar"]{ padding-top: 1.25rem !important; }
}


/* === Certification: reduce top gap & align badge === */
section[id*="service"]{ padding-bottom: 1rem !important; }
section[id*="cert"]{ padding-top: .6rem !important; margin-top:0 !important; }
#certification .head{ margin-top:0 !important; }
/* NNg badge nudge down a touch */
section[id*="cert"] img[src*="nng"]{ margin-top:.4rem; display:block; }
/* If certification layout uses a two-column row, center align items */
section[id*="cert"] .row, 
section[id*="cert"] .grid, 
section[id*="cert"] .split{ align-items:center; }


/* === v12: Global refinements ===================================== */

/* 1) Certification spacing even tighter + badge nudge */
section[id*="cert"]{ padding-top: .25rem !important; margin-top:0 !important; }
section[id*="cert"] img[src*="nng"]{ margin-top:.75rem !important; display:block; }
section[id*="cert"] .row, 
section[id*="cert"] .grid, 
section[id*="cert"] .split{ align-items:center; }

/* 2) Hero CTA responsive: ghost on mobile, solid on desktop */
@media (max-width: 768px){
  a.btn.btn--solid{ 
    background: transparent !important; 
    color: var(--ink, #111) !important; 
    border: 2px solid currentColor !important; 
    box-shadow: none !important; 
  }
}
@media (min-width: 769px){
  a.btn.btn--solid{ 
    background: var(--accent, #7a20ff) !important; 
    color: #fff !important; 
    border: none !important; 
    box-shadow: 0 2px 8px rgba(122,32,255,.25) !important; 
  }
}

/* 3) Impact at a glance: tighter grid rhythm + stable baseline */
section[id*="impact"], section[id*="proof"], section[id*="result"]{
  --impact-colgap: clamp(2rem, 4vw, 4rem);
  --impact-rowgap: clamp(1.5rem, 3vw, 2.5rem);
}
section[id*="impact"] .metrics, 
section[id*="proof"] .metrics, 
section[id*="result"] .metrics{
  display: grid;
  grid-template-columns: repeat(3, minmax(240px, 1fr));
  gap: var(--impact-rowgap) var(--impact-colgap);
  align-items: start;
}
@media (max-width: 980px){
  section[id*="impact"] .metrics, 
  section[id*="proof"] .metrics, 
  section[id*="result"] .metrics{
    grid-template-columns: repeat(2, minmax(220px, 1fr));
  }
}
@media (max-width: 640px){
  section[id*="impact"] .metrics, 
  section[id*="proof"] .metrics, 
  section[id*="result"] .metrics{
    grid-template-columns: 1fr;
  }
}
/* numbers & 'to' alignment */
.num{ line-height: .9; }
.num .num-to{ 
  font-size: .75em; 
  font-weight: 700; 
  color: #666; 
  display: inline-block; 
  transform: translateY(-6%); 
  margin-right: .2em;
}

/* 4) Kickers: unified style (accessible violet) */
:root{
  --kicker: #4a2cd9; /* darker violet for AA */
}
.kicker{
  color: var(--kicker);
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 700;
  font-size: .875rem;
  margin-bottom: .5rem;
}


/* === v13: Responsive burger menu =============================== */
#site-header{ position: sticky; top:0; z-index:1000;  ;border-bottom:1px solid var(--color-neutral-200);background:var(--color-neutral-surface);border-bottom:1px solid var(--color-border, var(--color-neutral-surface));}
.nav-desktop nav{ display:flex; gap: clamp(1rem, 3vw, 3rem); align-items:center; }
.nav-toggle{
  display:none;
  align-items:center;
  gap:.5rem;
  border:2px solid var(--ink, #111);
  background:#fff;
  color:var(--ink, #111);
  border-radius: 999px;
  padding:.625rem .9rem;
  font-weight:700;
  cursor:pointer;
  box-shadow: 0 2px 10px rgba(0,0,0,.06);
}
.nav-toggle:focus{ outline: var(--focus-outline, 2px solid #6c4bff); outline-offset:2px; }
.nav-toggle__bars{
  width:20px; height:14px; position:relative; display:inline-block;
}
.nav-toggle__bars::before, .nav-toggle__bars::after, .nav-toggle__bars{
  background: currentColor; border-radius:2px;
}
.nav-toggle__bars::before, .nav-toggle__bars::after{
  content:""; position:absolute; left:0; right:0; height:2px;
}
.nav-toggle__bars{ height:2px; display:block; }
.nav-toggle__bars::before{ top:-6px; }
.nav-toggle__bars::after{ top:6px; }

.mobile-nav{
  position: fixed; inset: 64px 0 0 0; /* under header */
  
  backdrop-filter: blur(4px);
  padding: 1.25rem clamp(1rem, 6vw, 2rem) 2rem;
  display:flex; flex-direction:column; gap:1rem;
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
background:var(--color-neutral-surface);}
.mobile-nav nav{ display:flex; flex-direction:column; gap:1rem; }
.mobile-nav .nav__link{ font-size:1.125rem; font-weight:700; color:#111; }
.mobile-nav .mobile-cta{ align-self:flex-start; margin-top:.5rem; }

/* Visibility rules */
@media (max-width: 1024px){
  .nav-desktop{ display:none; }
  .nav-toggle{ display:inline-flex; position:absolute; right: clamp(1rem, 3vw, 2rem); top: .75rem; z-index:1001; }
}
@media (min-width: 1025px){
  #mobile-nav{ display:none !important; }
}

/* Open state */
#site-header.is-open .nav-toggle{ color:#fff; background: var(--accent, #6c4bff); border-color:transparent; }
#site-header.is-open .mobile-nav{ display:flex; background:var(--color-neutral-surface);}



/* === Burger / mobile-nav patch (full overlay, centered, scroll lock) === */
[hidden]{display:none!important;}
@media (max-width:1024px){
  .nav-desktop{display:none;}
  .nav-toggle{
    display:inline-flex;align-items:center;gap:.5rem;
    padding:.5rem .9rem;border:2px solid var(--ink,#111);
    border-radius:999px;background:#fff;position:fixed;right:1rem;top:1rem;
    z-index:1002;box-shadow:0 10px 24px rgba(0,0,0,.12);font-weight:700;
  }
  .nav-toggle__bars{width:22px;height:2px;background:currentColor;position:relative;display:inline-block;}
  .nav-toggle__bars::before,.nav-toggle__bars::after{content:"";position:absolute;left:0;width:100%;height:100%;background:currentColor;transition:transform .25s ease,top .25s ease;}
  .nav-toggle__bars::before{top:-6px;}
  .nav-toggle__bars::after{top:6px;}
  .nav-toggle[aria-expanded="true"] .nav-toggle__bars{background:transparent;}
  .nav-toggle[aria-expanded="true"] .nav-toggle__bars::before{top:0;transform:rotate(45deg);}
  .nav-toggle[aria-expanded="true"] .nav-toggle__bars::after{top:0;transform:rotate(-45deg);}

  .mobile-nav{
    position:fixed;inset:0;z-index:1100;
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:1rem;padding:0 1.25rem;
    opacity:0;visibility:hidden;transform:translateY(-6px);
    transition:opacity .2s ease,transform .2s ease,visibility .2s;
  background:var(--color-neutral-surface);}
  .mobile-nav.is-open{opacity:1;visibility:visible;transform:none;}
  .mobile-nav .nav{display:flex;flex-direction:column;align-items:center;gap:.9rem;}
  .mobile-nav .nav__link{font-size:clamp(22px,5vw,28px);font-weight:800;text-decoration:none;color:var(--ink,#111);}
  .mobile-cta{margin-top:.75rem;}
  body.menu-open{overflow:hidden;height:100%;}
  html.menu-open,body.menu-open{position:fixed;width:100%;}
}


/* === Alternance rules added automatically === */
.section.alt-a {
  background: var(--color-neutral-bg);
}
.section.alt-b {
  background: var(--color-neutral-surface);
}

av .nav__link{font-size:clamp(22px,5vw,28px);font-weight:800;text-decoration:none;color:var(--ink,#111);}
  .mobile-cta{margin-top:.75rem;}
  body.menu-open{overflow:hidden;height:100%;}
  html.menu-open,body.menu-open{position:fixed;width:100%;}
}


/* === Alternance rules added automatically === */
.section.alt-a {
  background: var(--color-neutral-bg);
}
.section.alt-b {
  background: var(--color-neutral-surface);
}




/* === Services subnav (sticky under header) === */
:root{
  --header-h: 64px;
  --subnav-h: 48px;
  --subnav-bg: var(--color-neutral-surface, #fff);
  --subnav-border: var(--color-neutral-border, #e2e2e2);
  --subnav-text: var(--color-neutral-text, #3b3b3b);
  --subnav-muted: #dcdcdc;
}

.services-subnav{
  position: sticky;
  top: var(--header-h);
  z-index: 900;
  background: var(--subnav-bg);
  height: var(--subnav-h);
  border-bottom: 1px solid var(--subnav-border);
 border-top: 1px solid var(--subnav-border, #e2e2e2); }

.services-subnav__track{ max-width: var(--container-max, 1200px); margin: 0 auto; justify-content: flex-start; 
  display: flex;
  align-items: center;
  gap: 16px;
  height: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  padding: 0 16px;
  
 padding-left: 24px; scroll-padding-left: 16px; scroll-snap-type: x proximity;  overflow-x:auto !important; flex-wrap:nowrap; scrollbar-gutter: stable both-edges; }



.services-subnav__item{
  flex: 0 0 auto;
  scroll-snap-align: center;
  font-weight:400;
  line-height: 1;
  padding: 8px 4px;
  color: var(--subnav-text);
  text-decoration: none;
  white-space:nowrap;
 scroll-snap-align: start;  scroll-snap-align: start;  white-space:nowrap; flex-shrink: 0; scroll-snap-align: start;  pointer-events:auto; position:relative; z-index:1;}



.services-subnav__item:focus,
.services-subnav__item:hover{ text-decoration: underline; outline: none; }

.services-subnav__sep{
  flex: 0 0 auto;
  color: var(--subnav-muted);
  user-select:none;
 opacity:.5;}

@media (max-width: 768px){
  :root{ --header-h: 56px; --subnav-h: 52px; }
  .services-subnav__track{ max-width: var(--container-max, 1200px); margin: 0 auto; justify-content: flex-start;  gap: 12px; padding: 0 12px;  overflow-x:auto !important; flex-wrap:nowrap; scrollbar-gutter: stable both-edges; }

  .services-subnav__item{ font-size: 16px; }
}

html.dark .services-subnav{
  background: var(--color-dark-surface, #1f1f1f);
  border-bottom-color: var(--color-dark-border, #3b3b3b);
}
html.dark .services-subnav__item{ color: var(--color-dark-text, #eee); }
html.dark .services-subnav__sep{ color: #555; }



/* Scroll indicator (right fade) */
.services-subnav {
  position: sticky;
  overflow: visible;
}
.services-subnav__track{
  position: relative;
 overflow-x:auto !important; flex-wrap:nowrap; scrollbar-gutter: stable both-edges; }

.services-subnav__track::after{
  content: "";
  position: sticky;
  right: 0;
  top: 0;
  width: 28px;
  height: var(--subnav-h, 48px);
  pointer-events: none;
  background: linear-gradient(to right, rgba(0,0,0,0) 0%, var(--subnav-bg, #fff) 60%);
  margin-left: -28px; /* keep inside scroll flow */
}
@media (max-width: 768px){
  .services-subnav__track::after{
    height: var(--subnav-h, 52px);
  }
}



@media (max-width: 768px){
  .services-subnav{ overflow: visible; }
  .services-subnav__track{
    padding-left: 24px;
    scroll-padding-left: 16px !important;
    /*-webkit-mask-image:*/ none !important;
    mask-image: none !important;
   overflow-x:auto !important; flex-wrap:nowrap; scrollbar-gutter: stable both-edges; }

}



/* === Services subnav — overrides de fiabilité (prod) === */
.services-subnav{ position:sticky; top:var(--header-h,56px); z-index:1100; background:var(--subnav-bg,#fff);
  border-top:1px solid var(--subnav-border,#e2e2e2); border-bottom:1px solid var(--subnav-border,#e2e2e2); overflow:visible; }
.services-subnav__track{ position:relative; display:flex; align-items:center; gap:16px; height:var(--subnav-h,52px);
  overflow-x:auto; -webkit-overflow-scrolling:touch; scroll-snap-type:x mandatory; max-width:var(--container-max,1200px);
  margin-inline:auto; justify-content: flex-start; padding-inline:16px; padding-inline-start:24px !important;
  scroll-padding-inline-start:24px !important; /*-webkit-mask-image:*/none !important; mask-image:none !important;  overflow-x:auto !important; flex-wrap:nowrap; scrollbar-gutter: stable both-edges; }

.services-subnav__item{ flex:0 0 auto; font-weight:400; white-space:nowrap; text-decoration:none; color:var(--subnav-text,#3b3b3b);
  padding:8px 4px; scroll-snap-align:start; }
.services-subnav__track::after{ content:""; position:sticky; right:0; top:0; width:28px; height:100%; pointer-events:none;
  background:linear-gradient(to right, rgba(0,0,0,0) 0%, var(--subnav-bg,#fff) 65%); }
@media (max-width:768px){
  .services-subnav{ overflow:visible; }
  .services-subnav__track{ padding-inline-start:24px !important; scroll-padding-inline-start:24px !important;
    /*-webkit-mask-image:*/none !important; mask-image:none !important;  overflow-x:auto !important; flex-wrap:nowrap; scrollbar-gutter: stable both-edges; }

}

/* Anchor offset for sticky header+subnav */
[id]{
  scroll-margin-top: calc(var(--header-h, 56px) + var(--subnav-h, 52px) + 12px);
}

.services-subnav__track > li{
  flex: 0 0 auto;
  display: block;
}

/* Separators generated in CSS */
.services-subnav__track > li + li .services-subnav__item::before{
  content: "|";
  opacity: .5;
  margin: 0 .5rem 0 .25rem;
}

@media (max-width: 768px){ :root{ --header-h:72px; } .services-subnav{ top:var(--header-h); } }

.link-mail{ text-decoration: underline; }

.service-grid{display:grid;grid-template-columns:1fr;gap:24px}
@media(min-width:960px){.service-grid{grid-template-columns:1fr 1fr}}
.service-col{display:flex;flex-direction:column;gap:12px}