/* ===== Dicken AI — design tokens ===== */
:root{
  /* Couleurs — terre du Sahel × indigo malien */
  --bg:            #f3ede0;          /* sable cru */
  --bg-2:          #ebe2cf;          /* sable plus chaud */
  --ink:           #1a1410;          /* terre brûlée presque noire */
  --ink-soft:      #3d2f24;
  --paper:         #faf6ec;          /* blanc cassé chaud */
  --indigo:        #1d2856;          /* indigo malien profond */
  --indigo-2:      #0f1838;
  --ocre:          #c2541d;          /* terracotta */
  --ocre-2:        #e07a3c;
  --gold:          #d6a635;          /* ocre jaune */
  --bogolan:       #6b1f12;          /* rouge bogolan */
  --line:          rgba(26,20,16,.18);
  --line-strong:   rgba(26,20,16,.45);

  --serif: "Instrument Serif", "Cormorant Garamond", Georgia, serif;
  --sans:  "Geist", "Inter", system-ui, -apple-system, sans-serif;
  --mono:  "JetBrains Mono", ui-monospace, "SF Mono", monospace;

  --r-sm: 6px;
  --r-md: 14px;
  --r-lg: 22px;

  --w: 1320px;

  --ease-out: cubic-bezier(.2,.7,.2,1);
  --ease-in-out: cubic-bezier(.7,0,.2,1);
}

*{ box-sizing: border-box; }
html, body{ margin:0; padding:0; }
html{ scroll-behavior: smooth; }
body{
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg{ display:block; max-width:100%; }

::selection{ background: var(--ocre); color: var(--paper); }

/* ===== Typography ===== */
.eyebrow{
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  display:inline-flex; align-items:center; gap: 10px;
}
.eyebrow::before{
  content:""; width:24px; height:1px; background: currentColor; opacity:.5;
}
h1, h2, h3, h4{ font-family: var(--serif); font-weight: 400; letter-spacing:-.01em; line-height:1.02; margin:0; }
h1{ font-size: clamp(56px, 9vw, 156px); }
h2{ font-size: clamp(40px, 6vw, 92px); }
h3{ font-size: clamp(28px, 3vw, 44px); }
h4{ font-size: clamp(22px, 2vw, 28px); }
p{ margin: 0; }
a{ color: inherit; text-decoration: none; }

.italic{ font-style: italic; }
.serif{ font-family: var(--serif); }
.mono{ font-family: var(--mono); }
.muted{ color: var(--ink-soft); }

/* ===== Layout ===== */
.wrap{ max-width: var(--w); margin: 0 auto; padding: 0 32px; }
.section{ position: relative; padding: 140px 0; }
.section.tight{ padding: 96px 0; }

/* ===== Floating pill nav ===== */
.nav{
  position: fixed;
  top: 22px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 6px 6px 6px 18px;
  border-radius: 999px;
  width: fit-content;
  max-width: calc(100vw - 32px);

  /* Default = on dark hero (white-tinted glass) */
  background: linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,0));
  -webkit-backdrop-filter: blur(20px) saturate(140%);
          backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow:
    0 2.8px  2.2px rgba(0,0,0,.034),
    0 6.7px  5.3px rgba(0,0,0,.048),
    0 12.5px 10px  rgba(0,0,0,.060),
    0 22.3px 17.9px rgba(0,0,0,.072),
    0 41.8px 33.4px rgba(0,0,0,.086),
    0 100px  80px  rgba(0,0,0,.120);
  color: var(--paper);
  transition:
    background .35s var(--ease-out),
    border-color .35s var(--ease-out),
    box-shadow .35s var(--ease-out),
    color .35s var(--ease-out);
}
.nav:hover{
  border-color: rgba(255,255,255,.20);
  box-shadow:
    0 2.8px  2.2px rgba(0,0,0,.034),
    0 6.7px  5.3px rgba(0,0,0,.048),
    0 12.5px 10px  rgba(214,166,53,.10),
    0 22.3px 17.9px rgba(214,166,53,.06),
    0 41.8px 33.4px rgba(0,0,0,.086),
    0 100px  80px  rgba(0,0,0,.120);
}

.brand{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--serif);
  position: relative;
  color: inherit;
}
.brand-glow{
  position: absolute;
  width: 30px; height: 30px;
  left: -3px; top: 50%;
  transform: translateY(-50%);
  background: radial-gradient(circle, rgba(214,166,53,.55), rgba(214,166,53,0) 70%);
  filter: blur(8px);
  pointer-events: none;
  z-index: -1;
  opacity: .9;
}
.brand-glyph{ width: 22px; height: 22px; position: relative; z-index: 1; }
.brand-glyph-img{
  display: block;
  width: 28px; height: 28px;
  object-fit: contain;
  filter: drop-shadow(0 2px 6px rgba(214,166,53,.18));
  transition: transform .35s var(--ease-out);
}
.brand:hover .brand-glyph-img{ transform: rotate(-3deg) scale(1.05); }

/* Logo complet (icone + wordmark) dans la nav */
.brand-logo-img{
  display: block;
  height: 52px;
  width: auto;
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 2px 6px rgba(214,166,53,.18));
  transition: transform .35s var(--ease-out), opacity .35s;
}
.brand:hover .brand-logo-img{ transform: translateY(-1px); opacity: .92; }
@media (max-width: 900px){
  .brand-logo-img{ height: 44px; }
}
@media (max-width: 600px){
  .brand-logo-img{ height: 38px; }
}
.brand-mark{
  font-style: italic;
  letter-spacing: -.02em;
  font-size: 16px;
  font-weight: 400;
}
.brand-mark sup{
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .12em;
  vertical-align: super;
  margin-left: 4px;
  font-style: normal;
  opacity: .8;
}

.nav-links{
  display: flex;
  align-items: center;
  gap: 24px;
}
.nav-links a{
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .005em;
  color: rgba(250,246,236,.55);
  transition: color .25s var(--ease-out);
  white-space: nowrap;
}
.nav-links a:hover{ color: var(--paper); }

.nav-cta{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--paper);
  color: var(--ink);
  padding: 8px 14px 8px 16px;
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .005em;
  white-space: nowrap;
  transition: background .25s var(--ease-out), color .25s var(--ease-out);
}
.nav-cta svg{
  width: 13px; height: 13px;
  transition: transform .25s var(--ease-out);
}
.nav-cta:hover{ background: var(--ocre); color: var(--paper); }
.nav-cta:hover svg{ transform: translateX(2px); }

@media (max-width: 768px){
  .nav-links{ display: none; }
  .nav{ gap: 14px; padding: 5px 5px 5px 14px; }
  .brand-mark{ font-size: 14px; }
}

/* ===== Marquee ===== */
.marquee{
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--ink);
  color: var(--paper);
}
.marquee-track{
  display: flex; gap: 64px; padding: 22px 0;
  animation: marq 36s linear infinite;
  white-space: nowrap;
  width: max-content;
}
.marquee-item{
  font-family: var(--serif); font-style: italic; font-size: 36px;
  display:inline-flex; align-items:center; gap: 64px;
}
.marquee-item .star{ width: 24px; height: 24px; color: var(--ocre-2); }
@keyframes marq{ to{ transform: translateX(-50%); } }

/* ===== Hero — Card-in-card ===== */
.hero{
  position: relative;
  background: var(--bg);
  padding: 96px 18px 24px;
  overflow: hidden;
}
@media (min-width: 768px){ .hero{ padding: 110px 24px 32px; } }

/* Outer card (gradient border via padding trick) */
.hero-card{
  position: relative;
  border-radius: 32px;
  padding: 1px;
  background:
    linear-gradient(135deg,
      rgba(214,166,53,.45) 0%,
      rgba(255,255,255,.10) 25%,
      rgba(194,84,29,.20) 60%,
      rgba(255,255,255,.05) 100%);
  overflow: hidden;
  box-shadow:
    0 4px 12px rgba(26,20,16,.06),
    0 24px 60px rgba(26,20,16,.10),
    0 60px 140px rgba(26,20,16,.18);
}

.hero-card-inner{
  position: relative;
  background: var(--ink);
  border-radius: 31px;
  overflow: hidden;
  min-height: clamp(560px, 78vh, 880px);
  display: flex;
  flex-direction: column;
  color: var(--paper);
}

/* Spline + overlays */
.spline-bg{
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.spline-bg iframe{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  filter: saturate(1.1) brightness(.95);
}

.hero-veil{
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(180deg,
      rgba(26,20,16,.55) 0%,
      rgba(26,20,16,.05) 20%,
      rgba(26,20,16,0) 50%,
      rgba(26,20,16,.5) 82%,
      rgba(26,20,16,.95) 100%),
    radial-gradient(ellipse at 78% 30%, rgba(194,84,29,.18) 0%, rgba(194,84,29,0) 55%),
    radial-gradient(ellipse at 22% 75%, rgba(29,40,86,.25) 0%, rgba(29,40,86,0) 60%);
}
.hero-bg{
  position: absolute; inset: 0; z-index: 2;
  pointer-events: none; opacity: .85;
}
.hero-bg svg{ width: 100%; height: 100%; }
.hero-grain{
  position: absolute; inset:0; z-index: 2; pointer-events:none;
  opacity:.18; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence baseFrequency='.9' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='.35'/></svg>");
}

/* Content layer */
.hero-content{
  position: relative;
  z-index: 3;
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 28px 28px 36px;
  gap: 0;
}
@media (min-width: 768px){ .hero-content{ padding: 40px 56px 48px; } }
@media (min-width: 1280px){ .hero-content{ padding: 44px 72px 56px; } }

/* Top meta */
.hero-meta-top{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  flex-wrap: wrap;
}
.hero-meta-top .meta-col{ display: flex; flex-direction: column; gap: 4px; }
.hero-meta-top .meta-col.right{ text-align: right; align-items: flex-end; }
.hero-meta-top .meta-eyebrow{
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(250,246,236,.75);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.hero-meta-top .meta-sub{
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .1em;
  color: rgba(250,246,236,.40);
}
.dot-pulse{
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 0 rgba(214,166,53,.7);
  animation: dotpulse 2s infinite;
}
@keyframes dotpulse{
  0%{ box-shadow: 0 0 0 0 rgba(214,166,53,.6); }
  100%{ box-shadow: 0 0 0 8px rgba(214,166,53,0); }
}

/* Massive headline with arrow pills (centered) */
.hero-headline-pills{
  margin: auto 0;
  padding: 60px 0;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(48px, 9vw, 156px);
  line-height: .96;
  letter-spacing: -.04em;
  color: var(--paper);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(8px, 1vw, 16px);
}
.hero-headline-pills .line{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(14px, 2.2vw, 36px);
  flex-wrap: wrap;
}
.hero-headline-pills .word{
  display: inline-block;
  vertical-align: middle;
  position: relative;
  opacity: 0;
  transform: translateY(40px);
  transition: opacity .9s var(--ease-out), transform .9s var(--ease-out);
}
.hero-headline-pills .pill{
  opacity: 0;
  transform: translateY(40px) rotate(0deg);
}
/* Reveal state (added via JS) */
.hero-headline-pills.revealed .word,
.hero-headline-pills.revealed .pill{
  opacity: 1;
  transform: translateY(0);
}
.hero-headline-pills.revealed .w-1{ transition-delay: .15s; }
.hero-headline-pills.revealed .line:first-child .pill{ transition-delay: .28s; transition: opacity .9s var(--ease-out) .28s, transform .9s var(--ease-out) .28s; }
.hero-headline-pills.revealed .w-2{ transition-delay: .42s; }
.hero-headline-pills.revealed .w-3{ transition-delay: .56s; }
.hero-headline-pills.revealed .line:nth-child(2) .pill{ transition-delay: .70s; transition: opacity .9s var(--ease-out) .70s, transform .9s var(--ease-out) .70s; }
.hero-headline-pills.revealed .w-4{ transition-delay: .84s; }
.hero-headline-pills .pill{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(44px, 5.6vw, 84px);
  height: clamp(44px, 5.6vw, 84px);
  background: var(--gold);
  border-radius: 999px;
  font-style: normal;
  flex-shrink: 0;
  box-shadow:
    0 4px 12px rgba(214,166,53,.30),
    inset 0 1px 0 rgba(255,255,255,.20);
  transition: transform .35s var(--ease-out), background .25s var(--ease-out);
}
.hero-headline-pills .pill:hover{ transform: rotate(-12deg) scale(1.08); background: var(--ocre-2); }
.hero-headline-pills .pill svg{
  width: 55%; height: 55%;
  color: var(--ink);
}

/* Subtitle + CTAs */
.hero-cta-row{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  text-align: center;
  margin-top: auto;
  padding-top: 24px;
}
@media (min-width: 768px){
  .hero-cta-row{ flex-direction: row; justify-content: space-between; text-align: left; gap: 48px; align-items: flex-end; }
}
.hero-subtitle{
  font-family: var(--serif);
  font-size: clamp(16px, 1.4vw, 22px);
  line-height: 1.4;
  color: rgba(250,246,236,.85);
  max-width: 580px;
  margin: 0;
}
.hero-subtitle .muted-line{
  display: inline-block;
  margin-top: 4px;
  color: rgba(250,246,236,.55);
  font-style: italic;
  font-size: .88em;
}
.hero-buttons{
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.btn-hero{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 22px;
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -.005em;
  white-space: nowrap;
  text-decoration: none;
  transition: background .25s var(--ease-out), color .25s var(--ease-out), transform .25s var(--ease-out);
}
.btn-hero svg{ width: 14px; height: 14px; transition: transform .25s var(--ease-out); }
.btn-hero:hover svg{ transform: translateX(3px); }

.btn-hero-primary{
  background: var(--paper);
  color: var(--ink);
  box-shadow:
    0 4px 14px rgba(250,246,236,.20),
    inset 0 1px 0 rgba(255,255,255,.30);
}
.btn-hero-primary:hover{ background: var(--gold); color: var(--ink); }

.btn-hero-secondary{
  background: rgba(250,246,236,.08);
  color: var(--paper);
  border: 1px solid rgba(250,246,236,.18);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
}
.btn-hero-secondary:hover{ background: rgba(250,246,236,.14); border-color: rgba(250,246,236,.30); }

/* Scroll indicator (inside card, bottom-right) */
.hero-scroll{
  position: absolute;
  bottom: 24px; right: 24px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(250,246,236,.55);
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 4;
}
.hero-scroll .line{
  width: 50px; height: 1px;
  background: rgba(250,246,236,.25);
  position: relative;
  overflow: hidden;
}
.hero-scroll .line::after{
  content:""; position: absolute; left:-30%; top:0; width:30%; height:100%;
  background: var(--gold);
  animation: scrollLine 2.4s infinite var(--ease-in-out);
}
@keyframes scrollLine{ 0%{ left:-30%; } 100%{ left: 100%; } }
@media (max-width: 640px){ .hero-scroll{ display: none; } }

/* Floating sub-card (live status badge, between hero-card and features-strip) */
.hero-sub-card{
  position: relative;
  max-width: 720px;
  margin: -32px auto 32px;
  z-index: 5;
  padding: 0 8px;
}
.hero-sub-card::before{
  content: "";
  position: absolute;
  top: 6px; left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 48px);
  height: 70%;
  background: rgba(214,166,53,.18);
  border-radius: 20px;
  filter: blur(20px);
  z-index: -1;
}
.sub-card-content{
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 20px;
  background: linear-gradient(135deg, var(--ocre) 0%, var(--bogolan) 100%);
  color: var(--paper);
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.15);
  box-shadow:
    0 8px 24px rgba(194,84,29,.30),
    inset 0 1px 0 rgba(255,255,255,.25);
}
.sub-card-content::before{
  content:""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,.18) 0%, rgba(255,255,255,0) 50%);
  border-radius: 18px;
}
.sub-icon{
  flex-shrink: 0;
  width: 38px; height: 38px;
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(26,20,16,.95), rgba(26,20,16,.75));
  border: 1px solid rgba(255,255,255,.12);
  display: flex; align-items: center; justify-content: center;
}
.sub-icon svg{ width: 18px; height: 18px; color: var(--paper); }
.sub-body{ flex: 1; min-width: 0; }
.sub-title{
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  color: var(--paper);
  letter-spacing: -.005em;
}
.sub-desc{
  margin-top: 4px;
  font-size: 13px;
  line-height: 1.45;
  color: rgba(250,246,236,.92);
}
.sub-desc strong{ color: var(--paper); font-weight: 500; }
.sub-time{
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(250,246,236,.85);
  flex-shrink: 0;
  margin-top: 2px;
}

/* 4 micro-feature cards strip */
.hero-features-strip{
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  max-width: none;
}
@media (min-width: 640px){
  .hero-features-strip{ grid-template-columns: repeat(2, 1fr); gap: 16px; }
}
@media (min-width: 1024px){
  .hero-features-strip{ grid-template-columns: repeat(4, 1fr); }
}

.feature-card{
  position: relative;
  border-radius: 18px;
  padding: 18px;
  min-height: 140px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 14px;
  transition: border-color .3s var(--ease-out), transform .3s var(--ease-out), box-shadow .3s var(--ease-out);
  overflow: hidden;
}
.feature-card:hover{ transform: translateY(-2px); }

.feature-dark{
  background: var(--ink);
  color: var(--paper);
  border: 1px solid rgba(250,246,236,.10);
  box-shadow: 0 4px 12px rgba(26,20,16,.10);
}
.feature-dark:hover{ border-color: rgba(214,166,53,.35); box-shadow: 0 8px 24px rgba(26,20,16,.18); }

.feature-light{
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--line);
  box-shadow: 0 2px 8px rgba(26,20,16,.04);
}
.feature-light:hover{ border-color: rgba(194,84,29,.40); box-shadow: 0 8px 24px rgba(26,20,16,.10); }

.fc-head{
  display: flex; justify-content: space-between; align-items: center;
}
.fc-label{
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.feature-dark .fc-label{ color: rgba(250,246,236,.45); }
.fc-icon{
  width: 18px; height: 18px;
  color: var(--gold);
}
.fc-live{
  display: flex; align-items: center; gap: 6px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(250,246,236,.55);
}
.fc-live .dot{
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 8px rgba(214,166,53,.6);
  animation: dotpulse 2s infinite;
}

/* Card 1 — Terminal */
.fc-terminal{
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.7;
  color: rgba(250,246,236,.85);
  margin-top: auto;
}
.fc-terminal .prompt{ color: rgba(250,246,236,.30); margin-right: 8px; }
.fc-terminal .str{ color: var(--gold); }
.fc-terminal .ok{ color: #6fdc8c; }

/* Card 2 — Pipeline steps */
.fc-steps{
  display: flex;
  flex-direction: column;
  margin-top: 4px;
}
.step{ display: flex; align-items: center; gap: 12px; padding: 4px 0; }
.step span{
  font-family: var(--sans);
  font-size: 13px;
  color: var(--ink-soft);
}
.step.done span{ color: var(--ink); }
.step.active span{ color: var(--ink); font-weight: 500; }
.step-dot{
  width: 22px; height: 22px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.step.done .step-dot{
  background: rgba(111, 220, 140, .15);
  color: #2d8c4d;
}
.step.done .step-dot svg{ width: 12px; height: 12px; }
.step.active .step-dot{
  border: 2px solid var(--ocre);
  background: rgba(194,84,29,.12);
}
.step.active .step-dot .dot-inner{
  width: 6px; height: 6px;
  background: var(--ocre);
  border-radius: 50%;
  animation: dotpulse 2s infinite;
}
.step-dot.empty{
  border: 1.5px solid var(--line-strong);
  background: transparent;
}
.step-line{
  width: 1.5px; height: 8px;
  background: rgba(111,220,140,.35);
  margin-left: 10px;
}
.step-line.muted{ background: var(--line-strong); }

/* Card 3 — Formations */
.fc-metric{
  display: flex; flex-direction: column; gap: 2px;
  margin-top: 4px;
}
.fc-metric .num{
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(28px, 3vw, 40px);
  line-height: .9;
  letter-spacing: -.02em;
  color: var(--ink);
}
.fc-metric .num sup{ font-size: .55em; color: var(--ocre); margin-left: 2px; }
.fc-metric .lbl{
  font-family: var(--sans);
  font-size: 12px;
  color: var(--ink-soft);
}
.fc-tags{
  display: flex; gap: 6px; flex-wrap: wrap;
}
.fc-tags span{
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(26,20,16,.05);
  border: 1px solid var(--line);
  color: var(--ink-soft);
}

/* Card 4 — Big metric */
.feature-metric .fc-metric.big .num{
  font-size: clamp(38px, 4vw, 56px);
}
.fc-trend{
  display: flex; align-items: center; gap: 8px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .08em;
  color: var(--gold);
}
.fc-trend svg{ width: 13px; height: 13px; }

/* ===== Buttons ===== */
.btn{
  display:inline-flex; align-items:center; gap: 12px;
  background: var(--ink); color: var(--paper);
  padding: 16px 26px;
  border-radius: 999px;
  font-size: 15px;
  border: 1px solid var(--ink);
  transition: all .35s var(--ease-out);
  position: relative; overflow: hidden;
}
.btn .arrow{ width: 16px; height: 16px; transition: transform .4s var(--ease-out); }
.btn:hover{ background: var(--ocre); border-color: var(--ocre); color: var(--paper); }
.btn:hover .arrow{ transform: translate(2px, -2px); }
.btn-ghost{
  background: transparent; color: var(--ink); border-color: var(--ink);
}
.btn-ghost:hover{ background: var(--ink); color: var(--paper); }

/* ===== Stamp button (sticker / neobrutalist tilt) ===== */
.btn-stamp{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.4;
  letter-spacing: -.005em;
  color: var(--ink);
  background: var(--gold);
  border: 0;
  border-radius: 0;
  padding: 14px 28px;
  cursor: pointer;
  user-select: none;
  text-decoration: none;
  transform: rotate(-2deg);
  transition: filter .2s var(--ease-out), transform .25s var(--ease-out);
  max-width: 22rem;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.btn-stamp > *{ position: relative; z-index: 1; }
.btn-stamp::after{
  content: "";
  position: absolute;
  bottom: 5px;
  left: 5px;
  width: calc(100% - 1px);
  height: calc(100% - 1px);
  border: 1px solid var(--ink);
  z-index: 0;
  pointer-events: none;
  transition: bottom .2s var(--ease-out), left .2s var(--ease-out);
}
.btn-stamp:hover{ filter: brightness(.96); }
.btn-stamp:hover::after{ bottom: 2px; left: 2px; }
.btn-stamp:active{ filter: brightness(.90); transform: rotate(-2deg) scale(.98); }

/* Dark variant — for use on .ink/.contact backgrounds */
.btn-stamp.on-dark::after{ border-color: var(--paper); }

/* Wrapper for reveal animation (so r-fade's translateY doesn't fight with stamp rotation) */
.stamp-wrap{ display: block; padding: 8px 0 12px; }

@media (min-width: 768px){
  .btn-stamp{ font-size: 20px; padding: 16px 48px; }
}

/* ===== Services · Bento ===== */
.services{ background: var(--bg-2); position: relative; overflow: hidden; }

/* Outer card wrapper */
.services-card{
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 28px;
  padding: 24px;
  position: relative;
  overflow: hidden;
  box-shadow:
    0 1px 1px rgba(26,20,16,.04),
    0 4px 12px rgba(26,20,16,.04),
    0 24px 60px rgba(26,20,16,.08);
}
@media (min-width: 640px){ .services-card{ padding: 36px; } }
@media (min-width: 1024px){ .services-card{ padding: 44px; } }

/* Subtle ocre halo top-right */
.services-card::before{
  content: "";
  position: absolute;
  top: -120px; right: -120px;
  width: 380px; height: 380px;
  background: radial-gradient(circle, rgba(214,166,53,.12) 0%, rgba(214,166,53,0) 60%);
  pointer-events: none;
  z-index: 0;
}
.services-card > *{ position: relative; z-index: 1; }

/* Header */
.srv-head{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: end;
  margin-bottom: 32px;
}
@media (max-width: 768px){
  .srv-head{ grid-template-columns: 1fr; gap: 20px; }
}
.srv-eyebrow{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.srv-eyebrow svg{ width: 13px; height: 13px; color: var(--ocre); }
.srv-title{
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(40px, 6.4vw, 96px);
  line-height: .95;
  letter-spacing: -.03em;
  color: var(--ink);
  margin: 18px 0 0;
}
.srv-title .italic{ color: var(--ocre); }
.srv-sub{
  font-family: var(--serif);
  font-size: clamp(15px, 1.3vw, 19px);
  line-height: 1.45;
  color: var(--ink-soft);
  max-width: 460px;
  margin: 0;
}

/* Bento grid (gap-px trick — line color shows through gaps) */
.bento-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: rgba(26,20,16,.10);
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid rgba(26,20,16,.10);
}
@media (max-width: 900px){
  .bento-grid{ grid-template-columns: 1fr; }
}

.bento-card{
  background: var(--paper);
  padding: 24px;
  min-height: 340px;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  transition: background .35s var(--ease-out);
}
.bento-card:hover{ background: var(--bg); }
.bento-wide{ grid-column: span 2; }
@media (max-width: 900px){ .bento-wide{ grid-column: span 1; } }

/* Card content (top section) */
.bc-content{ display: flex; flex-direction: column; gap: 10px; position: relative; z-index: 2; }
.bc-head{ display: flex; justify-content: space-between; align-items: center; }
.bc-icon{
  width: 36px; height: 36px;
  border-radius: 10px;
  background: rgba(214,166,53,.12);
  border: 1px solid rgba(214,166,53,.25);
  display: flex; align-items: center; justify-content: center;
  color: var(--ocre);
  transition: background .25s var(--ease-out), color .25s var(--ease-out), transform .25s var(--ease-out);
}
.bento-card:hover .bc-icon{ background: var(--ocre); color: var(--paper); transform: rotate(-6deg); }
.bc-icon svg{ width: 16px; height: 16px; }
.bc-num{
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.bc-title{
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(20px, 1.7vw, 28px);
  line-height: 1.15;
  letter-spacing: -.015em;
  color: var(--ink);
  margin: 4px 0 0;
}
.bc-title .italic{ color: var(--ocre); }
.bc-desc{
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0;
  max-width: 480px;
}
.bc-tags{
  display: flex; flex-wrap: wrap; gap: 5px;
  margin-top: 4px;
}
.bc-tags span{
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(26,20,16,.04);
  border: 1px solid var(--line);
  color: var(--ink-soft);
}

/* Visual area */
.bc-visual{
  flex: 1;
  position: relative;
  margin-top: 18px;
  min-height: 140px;
  display: flex; align-items: center; justify-content: center;
}
.vis-bg-glyph{
  position: absolute;
  inset: 0;
  display: flex; align-items: center; justify-content: center;
  opacity: .07;
  z-index: 0;
  color: var(--ink);
}
.vis-bg-glyph svg{ width: 70%; height: 70%; max-width: 200px; max-height: 200px; }

/* Card 1 — Floating mockups */
.bc-visual-floating{ min-height: 220px; position: relative; }
.float-card{
  position: absolute;
  background: var(--paper);
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  padding: 11px 12px;
  box-shadow: 0 6px 18px rgba(26,20,16,.08), 0 1px 0 rgba(255,255,255,.5) inset;
  transition: transform .45s var(--ease-out), box-shadow .35s var(--ease-out);
  z-index: 1;
}
.fc-1{ top: 4%; right: 4%; width: 220px; transform: rotate(5deg); }
.fc-2{ top: 36%; left: 4%; width: 200px; transform: rotate(-7deg); }
.fc-3{ bottom: 6%; right: 22%; width: 200px; transform: rotate(-3deg); }
.bento-card:hover .fc-1{ transform: rotate(2deg) translateY(-3px); }
.bento-card:hover .fc-2{ transform: rotate(-3deg) translateY(-3px) translateX(4px); }
.bento-card:hover .fc-3{ transform: rotate(0deg) translateY(-3px); }

.fc-mini-head{
  display: flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: 9px;
  color: var(--ink-soft);
  margin-bottom: 6px;
}
.fc-dot{
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 6px rgba(214,166,53,.6);
}
.fc-meta{ letter-spacing: .04em; }
.fc-bubble{
  font-family: var(--serif);
  font-style: italic;
  font-size: 12px;
  line-height: 1.3;
  color: var(--ink);
  margin: 0;
}

.fc-2.dark{
  background: var(--ink);
  color: var(--paper);
  border-color: rgba(250,246,236,.15);
  box-shadow: 0 6px 18px rgba(26,20,16,.18), 0 1px 0 rgba(255,255,255,.05) inset;
}
.fc-code{
  display: flex; flex-direction: column;
  font-family: var(--mono);
  font-size: 10px;
  line-height: 1.55;
  color: rgba(250,246,236,.75);
}
.fc-code .indent{ padding-left: 12px; }
.fc-code .op{ color: var(--ocre-2); }
.fc-code .str{ color: var(--gold); }
.fc-status{
  margin-top: 6px;
  font-family: var(--mono); font-size: 9px;
  color: rgba(250,246,236,.55);
}
.fc-tick{ color: #6fdc8c; margin-right: 4px; }

.fc-flow{
  display: flex; align-items: center; gap: 4px;
  margin-bottom: 6px;
}
.fc-flow .node{
  width: 10px; height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.fc-flow .node.done{ background: #6fdc8c; }
.fc-flow .node.active{ background: var(--ocre); box-shadow: 0 0 0 3px rgba(194,84,29,.18); }
.fc-flow .node.pending{ background: transparent; border: 1.5px solid var(--line-strong); }
.fc-flow .line{
  flex: 1; height: 1.5px;
  background: linear-gradient(90deg, #6fdc8c, var(--ocre));
}
.fc-flow .line.muted{ background: var(--line-strong); }
.fc-flow-meta{
  font-family: var(--mono); font-size: 9px;
  color: var(--ink-soft);
}

/* Card 2 — Hex cluster */
.bc-visual-cluster{
  position: relative;
  height: 160px;
  width: 100%;
}
.hex-lines{
  position: absolute;
  width: 100%; height: 100%;
  z-index: 0;
}
.hex-center{
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 56px; height: 56px;
  background: var(--ink);
  color: var(--gold);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  z-index: 2;
  box-shadow: 0 6px 16px rgba(26,20,16,.20);
  border: 3px solid var(--paper);
}
.hex-center svg{ width: 36px; height: 36px; }
.hex-sat{
  position: absolute;
  width: 14px; height: 14px;
  background: var(--paper);
  border: 1.5px solid var(--ocre);
  border-radius: 50%;
  z-index: 1;
  transition: transform .35s var(--ease-out), background .25s var(--ease-out);
}
.bento-card:hover .hex-sat{ background: var(--ocre); }
.hs-1{ top: 8%; left: 50%; transform: translateX(-50%); }
.hs-2{ top: 28%; right: 12%; }
.hs-3{ bottom: 28%; right: 12%; }
.hs-4{ bottom: 8%; left: 50%; transform: translateX(-50%); }
.hs-5{ bottom: 28%; left: 12%; }
.hs-6{ top: 28%; left: 12%; }

/* Card 3 — Search mock */
.bc-visual-search{ position: relative; align-items: stretch; padding: 8px 0; }
.search-mock{
  position: relative;
  z-index: 1;
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  padding: 10px;
  display: flex; flex-direction: column; gap: 8px;
  box-shadow: 0 4px 12px rgba(26,20,16,.06);
}
.search-bar{
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 8px;
}
.search-bar svg{ width: 13px; height: 13px; color: var(--ink-soft); }
.search-text{
  flex: 1;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink);
}
.search-tld{
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ocre);
  font-weight: 500;
  letter-spacing: .04em;
}
.search-list{ display: flex; flex-direction: column; gap: 4px; }
.search-item{
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 10px;
  background: var(--paper);
  border-radius: 6px;
  border: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink);
  transition: border-color .25s var(--ease-out);
}
.bento-card:hover .search-item:not(.dim){ border-color: var(--ocre); }
.search-item .ok{ color: #4caf50; font-weight: 500; }
.search-item.dim{ opacity: .55; }
.search-item .dim-tag{
  font-size: 9px;
  background: rgba(26,20,16,.06);
  padding: 2px 6px;
  border-radius: 4px;
  color: var(--ink-soft);
  letter-spacing: .04em;
  text-transform: lowercase;
}

/* Card 4 — Lang tags */
.bc-visual-tags{ position: relative; height: 160px; width: 100%; }
.lang-tags{
  position: absolute;
  inset: 0;
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  z-index: 1;
  padding-bottom: 24px;
}
.lang-tag{
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .08em;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--paper);
  border: 1px solid var(--line-strong);
  color: var(--ink);
  transition: transform .35s var(--ease-out);
}
.lang-tag.accent{ background: var(--ocre); color: var(--paper); border-color: var(--ocre); }
.lang-tag.accent2{ background: var(--bogolan); color: var(--paper); border-color: var(--bogolan); }
.bento-card:hover .lang-tag{ transform: translateY(-3px); }
.bento-card:hover .lt-1{ transition-delay: 0s; }
.bento-card:hover .lt-2{ transition-delay: .06s; }
.bento-card:hover .lt-3{ transition-delay: .12s; }
.bento-card:hover .lt-4{ transition-delay: .18s; }
.bento-card:hover .lt-5{ transition-delay: .24s; }

.waveform{
  position: absolute;
  bottom: 0; left: 50%;
  transform: translateX(-50%);
  display: flex; align-items: flex-end;
  gap: 2px;
  height: 18px;
  z-index: 0;
}
.waveform span{
  display: block;
  width: 2px;
  background: var(--ocre);
  border-radius: 2px;
  opacity: .6;
  animation: wave 1.4s ease-in-out infinite;
}
.waveform span:nth-child(1){ height: 30%; animation-delay: 0s; }
.waveform span:nth-child(2){ height: 60%; animation-delay: .08s; }
.waveform span:nth-child(3){ height: 90%; animation-delay: .16s; }
.waveform span:nth-child(4){ height: 50%; animation-delay: .24s; }
.waveform span:nth-child(5){ height: 80%; animation-delay: .32s; }
.waveform span:nth-child(6){ height: 100%; animation-delay: .4s; }
.waveform span:nth-child(7){ height: 70%; animation-delay: .48s; }
.waveform span:nth-child(8){ height: 40%; animation-delay: .56s; }
.waveform span:nth-child(9){ height: 65%; animation-delay: .64s; }
.waveform span:nth-child(10){ height: 85%; animation-delay: .72s; }
.waveform span:nth-child(11){ height: 50%; animation-delay: .8s; }
.waveform span:nth-child(12){ height: 30%; animation-delay: .88s; }
@keyframes wave{
  0%, 100%{ transform: scaleY(.4); }
  50%{ transform: scaleY(1); }
}

/* Card 5 — Centered glyph + radial rings */
.bc-visual-glyph{
  position: relative;
  height: 160px;
  width: 100%;
}
.centered-glyph{
  position: absolute;
  inset: 0;
  display: flex; align-items: center; justify-content: center;
  z-index: 2;
  color: var(--ink);
}
.centered-glyph svg{ width: 84px; height: 84px; }
.radial-rings{
  position: absolute;
  inset: 0;
  display: flex; align-items: center; justify-content: center;
  z-index: 1;
}
.radial-rings::before, .radial-rings::after{
  content: "";
  position: absolute;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  animation: ringpulse 3s ease-in-out infinite;
}
.radial-rings::before{ width: 110px; height: 110px; }
.radial-rings::after{ width: 145px; height: 145px; animation-delay: .5s; opacity: .5; }
@keyframes ringpulse{
  0%, 100%{ opacity: .3; transform: scale(1); }
  50%{ opacity: .8; transform: scale(1.06); }
}

/* Card footer (metric / pill) */
.bc-footer{
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  display: flex; align-items: center;
}
.bc-metric{
  font-family: var(--sans);
  font-size: 12px;
  color: var(--ink-soft);
}
.bc-metric strong{
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 22px;
  color: var(--ink);
  margin-right: 6px;
}
.bc-metric strong sup{
  color: var(--ocre);
  font-size: .55em;
  margin-left: 1px;
}
.bc-pill{
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 6px 11px;
  border-radius: 999px;
  background: rgba(26,20,16,.04);
  border: 1px solid var(--line);
  color: var(--ink-soft);
}
.bc-pill .dot{
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--gold);
}
.bc-pill .dot.pulse{ animation: dotpulse 2s infinite; }
.bc-pill-live{
  background: rgba(111,220,140,.10);
  border-color: rgba(111,220,140,.35);
  color: #2d8c4d;
}
.bc-pill-live .dot{ background: #6fdc8c; box-shadow: 0 0 8px rgba(111,220,140,.6); }
.bc-pill-mali{
  background: rgba(214,166,53,.12);
  border-color: rgba(214,166,53,.30);
  color: var(--ink);
}
.bc-pill-alpha{
  background: rgba(194,84,29,.10);
  border-color: rgba(194,84,29,.30);
  color: var(--ocre);
}
.bc-pill-alpha .dot{ background: var(--ocre); }

/* Process timeline */
.services-process{
  margin-top: 32px;
  padding: 22px 24px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--paper);
}
.process-head{
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 18px;
  flex-wrap: wrap;
  gap: 12px;
}
.process-label{
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.process-label svg{ width: 13px; height: 13px; color: var(--ocre); }
.process-meta{
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.process-steps{
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  position: relative;
}
.process-steps::before{
  content: "";
  position: absolute;
  top: 7px;
  left: 7%; right: 7%;
  height: 1px;
  background: linear-gradient(90deg, var(--ocre) 0%, var(--ocre) 35%, var(--line-strong) 50%, var(--line) 100%);
  z-index: 0;
}
.proc-step{
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  position: relative;
  z-index: 1;
}
.proc-dot{
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--paper);
  border: 1.5px solid var(--line-strong);
}
.proc-step.done .proc-dot{
  background: var(--ocre);
  border-color: var(--ocre);
}
.proc-step.done span{ color: var(--ink); }
.proc-step.active .proc-dot{
  background: var(--gold);
  border-color: var(--gold);
  box-shadow: 0 0 0 4px rgba(214,166,53,.20);
}
.proc-step.active span{ color: var(--ink); font-weight: 500; }
@media (max-width: 640px){
  .process-steps{ grid-template-columns: repeat(2, 1fr); gap: 16px 12px; }
  .process-steps::before{ display: none; }
}

/* ===== Comment ça marche · Sticky stacking parallax ===== */
.howit{
  background: var(--bg);
  position: relative;
  overflow: visible;
}

/* Header */
.howit-head{
  text-align: center;
  max-width: 720px;
  margin: 0 auto 80px;
}
.howit-eyebrow{
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 18px;
}
.howit-eyebrow svg{ width: 13px; height: 13px; color: var(--ocre); }
.howit-title{
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(48px, 7vw, 104px);
  line-height: .95;
  letter-spacing: -.03em;
  color: var(--ink);
  margin: 0 0 16px;
}
.howit-title .dot{ color: var(--ocre); font-style: normal; }
.howit-sub{
  font-family: var(--serif);
  font-size: clamp(15px, 1.3vw, 19px);
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0;
  max-width: 580px;
  margin: 0 auto;
}

/* Sticky stack */
.howit-stack{
  position: relative;
  max-width: 1100px;
  margin: 0 auto;
}

.how-step{
  position: sticky;
  top: 100px;
  margin-bottom: 28vh;
  border-radius: 28px;
  background: var(--ink);
  color: var(--paper);
  border: 1px solid rgba(250,246,236,.10);
  box-shadow:
    0 4px 12px rgba(0,0,0,.10),
    0 30px 60px rgba(0,0,0,.20);
  overflow: hidden;
  transition: transform .5s var(--ease-out);
}
.how-step:last-child{ margin-bottom: 0; }

/* Stair-step offset for visual depth (each card slightly lower) */
.how-step[data-step="1"]{ top: 100px; }
.how-step[data-step="2"]{ top: 110px; }
.how-step[data-step="3"]{ top: 120px; }
.how-step[data-step="4"]{ top: 130px; }
.how-step[data-step="5"]{ top: 140px; }

/* Halo gold per card (subtle variation) */
.how-step::before{
  content: "";
  position: absolute;
  top: -100px; right: -100px;
  width: 360px; height: 360px;
  background: radial-gradient(circle, rgba(214,166,53,.10) 0%, rgba(214,166,53,0) 60%);
  pointer-events: none;
  z-index: 0;
}
.how-step[data-step="2"]::before{ background: radial-gradient(circle, rgba(194,84,29,.10) 0%, rgba(194,84,29,0) 60%); }
.how-step[data-step="3"]::before{ background: radial-gradient(circle, rgba(29,40,86,.18) 0%, rgba(29,40,86,0) 60%); }
.how-step[data-step="4"]::before{ background: radial-gradient(circle, rgba(111,220,140,.12) 0%, rgba(111,220,140,0) 60%); }
.how-step[data-step="5"]::before{ background: radial-gradient(circle, rgba(214,166,53,.14) 0%, rgba(214,166,53,0) 60%); }

/* Grid layout inside each card */
.step-grid{
  display: grid;
  grid-template-columns: 200px 1fr 1fr;
  gap: 24px;
  padding: 36px;
  position: relative;
  z-index: 1;
  align-items: center;
  min-height: 380px;
}
@media (max-width: 900px){
  .step-grid{ grid-template-columns: 1fr; padding: 28px; gap: 16px; min-height: auto; }
}

/* Big number watermark */
.step-num{
  display: flex;
  align-items: center;
  justify-content: center;
}
.step-num span{
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(120px, 12vw, 200px);
  line-height: 1;
  letter-spacing: -.04em;
  color: rgba(250,246,236,.06);
  -webkit-text-stroke: 0.5px rgba(250,246,236,.15);
  user-select: none;
}
@media (max-width: 900px){
  .step-num{ justify-content: flex-start; }
  .step-num span{ font-size: 80px; }
}

/* Content middle column */
.step-content{ display: flex; flex-direction: column; gap: 12px; }
.step-tag{
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .12em;
  color: rgba(250,246,236,.45);
}
.step-title{
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(28px, 3vw, 42px);
  line-height: 1;
  letter-spacing: -.025em;
  color: var(--paper);
  margin: 0;
}
.step-title .italic{ color: var(--gold); }
.step-desc{
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.55;
  color: rgba(250,246,236,.70);
  margin: 0;
}
.step-desc strong{ color: var(--paper); font-weight: 500; }

.step-pills{ display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.step-pill{
  display: inline-flex; align-items: center; gap: 10px;
  background: rgba(250,246,236,.04);
  border: 1px solid rgba(250,246,236,.10);
  border-radius: 12px;
  padding: 10px 14px;
  font-family: var(--sans);
  font-size: 13px;
  color: var(--paper);
  box-shadow: inset 0 -8px 16px rgba(0,0,0,.20), inset 0 1px 0 rgba(255,255,255,.04);
}
.step-pill svg{
  width: 16px; height: 16px;
  color: var(--gold);
  flex-shrink: 0;
}

/* Visual demo column — shared base */
.step-visual{
  display: flex;
  align-items: center;
  justify-content: center;
}
.vc{
  width: 100%;
  background: linear-gradient(135deg, rgba(250,246,236,.06), rgba(250,246,236,.02));
  border: 1px solid rgba(250,246,236,.10);
  border-radius: 16px;
  padding: 16px;
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  box-shadow: 0 8px 24px rgba(0,0,0,.20);
}
.vc-head{
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 14px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .1em;
}
.vc-status{
  display: inline-flex; align-items: center; gap: 6px;
  color: rgba(250,246,236,.85);
  font-weight: 500;
}
.vc-status .dot{
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--gold);
}
.vc-status .dot.pulse{ animation: dotpulse 2s infinite; }
.vc-status .dot.ocre{ background: var(--ocre); }
.vc-status .dot.ok{ background: #6fdc8c; box-shadow: 0 0 8px rgba(111,220,140,.6); }
.vc-meta{
  color: rgba(250,246,236,.40);
  text-transform: uppercase;
  font-size: 9px;
}

/* Visual 1 — Call card */
.vc-call-body{
  display: flex; align-items: center; gap: 12px;
  margin: 12px 0;
}
.vc-avatar{
  width: 44px; height: 44px;
  border-radius: 12px;
  overflow: hidden;
  flex-shrink: 0;
  border: 1px solid rgba(250,246,236,.15);
}
.vc-info{ flex: 1; min-width: 0; }
.vc-info .vc-name{
  font-family: var(--serif);
  font-style: italic;
  font-size: 16px;
  color: var(--paper);
  margin: 0;
  line-height: 1;
}
.vc-info .vc-role{
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .08em;
  color: rgba(250,246,236,.55);
  margin: 4px 0 0;
  text-transform: uppercase;
}
.vc-timer{
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 500;
  color: var(--paper);
  flex-shrink: 0;
}
.vc-timer .timer-num{ color: var(--gold); }
.vc-bars{
  display: flex; align-items: center; gap: 3px;
  height: 22px;
  margin-top: 8px;
}
.vc-bars span{
  flex: 1;
  background: var(--ocre);
  border-radius: 2px;
  opacity: .7;
  animation: wave 1.4s ease-in-out infinite;
}
.vc-bars span:nth-child(1){ height: 30%; animation-delay: 0s; }
.vc-bars span:nth-child(2){ height: 60%; animation-delay: .08s; }
.vc-bars span:nth-child(3){ height: 90%; animation-delay: .16s; }
.vc-bars span:nth-child(4){ height: 50%; animation-delay: .24s; }
.vc-bars span:nth-child(5){ height: 80%; animation-delay: .32s; }
.vc-bars span:nth-child(6){ height: 100%; animation-delay: .4s; }
.vc-bars span:nth-child(7){ height: 70%; animation-delay: .48s; }
.vc-bars span:nth-child(8){ height: 40%; animation-delay: .56s; }
.vc-bars span:nth-child(9){ height: 65%; animation-delay: .64s; }
.vc-bars span:nth-child(10){ height: 85%; animation-delay: .72s; }
.vc-bars span:nth-child(11){ height: 50%; animation-delay: .8s; }
.vc-bars span:nth-child(12){ height: 30%; animation-delay: .88s; }

/* Visual 2 — Doc */
.vc-doc-list{
  display: flex; flex-direction: column;
  gap: 8px;
  padding: 6px 0;
}
.doc-item{
  display: flex; align-items: center; gap: 10px;
  font-family: var(--mono);
  font-size: 11px;
  color: rgba(250,246,236,.75);
}
.doc-item .check{
  width: 18px; height: 18px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  font-size: 10px;
  flex-shrink: 0;
}
.doc-item.done .check{ background: rgba(111,220,140,.15); color: #6fdc8c; }
.doc-item.active .check{ background: rgba(214,166,53,.20); color: var(--gold); }
.doc-item.pending .check{ background: rgba(250,246,236,.05); color: rgba(250,246,236,.30); }
.doc-item .line{
  flex: 1;
  height: 6px;
  background: linear-gradient(90deg, rgba(250,246,236,.20), rgba(250,246,236,.05));
  border-radius: 3px;
}
.doc-item .line.w-80{ max-width: 80%; }
.doc-item .line.w-70{ max-width: 70%; }
.doc-item .line.w-60{ max-width: 60%; }
.doc-item .line.w-50{ max-width: 50%; }
.doc-item .amt{
  font-size: 10px;
  color: var(--gold);
  font-weight: 500;
  letter-spacing: .04em;
}
.doc-item .amt.amt-mute{ color: rgba(250,246,236,.30); }
.vc-doc-foot{
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 12px;
  margin-top: 8px;
  border-top: 1px solid rgba(250,246,236,.10);
  font-family: var(--mono);
  font-size: 11px;
  color: rgba(250,246,236,.55);
}
.vc-doc-foot .total{
  color: var(--paper);
  font-weight: 500;
  font-size: 13px;
}

/* Visual 3 — Sprint */
.vc-sprint-body{
  display: flex; flex-direction: column;
  gap: 10px;
  padding: 4px 0;
}
.sprint-row{
  display: grid;
  grid-template-columns: 1fr 1.4fr 36px;
  align-items: center;
  gap: 10px;
}
.sr-label{
  font-family: var(--sans);
  font-size: 12px;
  color: rgba(250,246,236,.85);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sr-bar{
  height: 6px;
  background: rgba(250,246,236,.06);
  border-radius: 3px;
  overflow: hidden;
}
.sr-fill{
  height: 100%;
  width: 0;
  border-radius: 3px;
  transition: width 1.4s var(--ease-out);
}
.how-step.is-visible .sr-fill[data-w="92"]{ width: 92%; transition-delay: .2s; }
.how-step.is-visible .sr-fill[data-w="74"]{ width: 74%; transition-delay: .4s; }
.how-step.is-visible .sr-fill[data-w="48"]{ width: 48%; transition-delay: .6s; }
.how-step.is-visible .sr-fill[data-w="20"]{ width: 20%; transition-delay: .8s; }
.sr-fill.ocre{ background: var(--ocre); box-shadow: 0 0 8px rgba(194,84,29,.5); }
.sr-fill.gold{ background: var(--gold); box-shadow: 0 0 8px rgba(214,166,53,.5); }
.sr-fill.mute{ background: rgba(250,246,236,.30); }
.sr-pct{
  font-family: var(--mono);
  font-size: 10px;
  color: rgba(250,246,236,.65);
  text-align: right;
}

/* Visual 4 — Deploy */
.vc-deploy-body{
  display: flex; flex-direction: column; align-items: center;
  gap: 12px;
  padding: 16px 0;
  position: relative;
}
.deploy-check{
  width: 60px; height: 60px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(111,220,140,.30), rgba(111,220,140,.05));
  border: 2px solid rgba(111,220,140,.40);
  color: #6fdc8c;
  display: flex; align-items: center; justify-content: center;
  position: relative;
  z-index: 2;
  animation: deployScale 1.2s ease-out;
}
.deploy-check svg{ width: 28px; height: 28px; }
.deploy-rays{
  position: absolute;
  top: 16px; left: 50%;
  transform: translateX(-50%);
  width: 60px; height: 60px;
  border-radius: 50%;
  z-index: 1;
}
.deploy-rays::before, .deploy-rays::after{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(111,220,140,.30);
  animation: ringpulse 2.5s ease-in-out infinite;
}
.deploy-rays::after{ animation-delay: .6s; }
.deploy-text{
  font-family: var(--serif);
  font-style: italic;
  font-size: 18px;
  color: var(--paper);
  margin: 4px 0 0;
}
.deploy-meta{
  display: flex; gap: 16px;
  font-family: var(--mono);
  font-size: 10px;
  color: rgba(250,246,236,.55);
}
.deploy-meta strong{ color: var(--paper); font-weight: 500; }

@keyframes deployScale{
  0%{ transform: scale(.5); opacity: 0; }
  60%{ transform: scale(1.15); opacity: 1; }
  100%{ transform: scale(1); opacity: 1; }
}

/* Visual 5 — Monitor */
.vc-monitor-body{
  padding: 12px 0;
}
.heartbeat{
  width: 100%;
  height: 56px;
  color: #6fdc8c;
  margin-bottom: 14px;
}
.hb-line{
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  filter: drop-shadow(0 0 4px rgba(111,220,140,.5));
}
.how-step.is-visible .hb-line{
  animation: drawLine 2.5s ease-out forwards;
}
@keyframes drawLine{
  to{ stroke-dashoffset: 0; }
}
.monitor-stats{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(250,246,236,.10);
}
.ms-item{ display: flex; flex-direction: column; gap: 2px; }
.ms-label{
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(250,246,236,.55);
}
.ms-val{
  font-family: var(--serif);
  font-style: italic;
  font-size: 18px;
  color: var(--paper);
  line-height: 1;
}
.ms-val .ms-unit{
  font-size: 11px;
  color: var(--gold);
  margin-left: 1px;
}

/* ===== Stats ===== */
.stats{ background: var(--ink); color: var(--paper); position: relative; overflow:hidden; padding-bottom: 0; }
.stats .pat-bg{
  position: absolute; inset:0; opacity:.07; pointer-events:none;
}
.stats-grid{
  display:grid; grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid rgba(250,246,236,.18);
}
@media (max-width:900px){ .stats-grid{ grid-template-columns: repeat(2,1fr); } }
.stat{
  padding: 56px 32px;
  border-right: 1px solid rgba(250,246,236,.18);
  border-bottom: 1px solid rgba(250,246,236,.18);
  position: relative;
}
.stat:last-child{ border-right: none; }
@media (max-width:900px){
  .stat:nth-child(2){ border-right: none; }
  .stat{ border-right: 1px solid rgba(250,246,236,.18); }
}
.stat .num{ font-family: var(--serif); font-size: clamp(64px, 7vw, 120px); line-height: 1; letter-spacing:-.02em; }
.stat .num .it{ font-style: italic; color: var(--ocre-2); }
.stat .lbl{ font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; opacity: .7; margin-top: 12px; }

.stats-head{
  display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: end;
  padding-bottom: 120px;
}
@media (max-width:900px){ .stats-head{ grid-template-columns: 1fr; } }
.stats-head .eyebrow{ color: var(--paper); opacity: .7; }
.stats-head h2{ color: var(--paper); }
.stats-head p{ font-family: var(--serif); font-size: 22px; line-height: 1.35; max-width: 460px; opacity: .8; }

/* ===== Cases · Results card ===== */
.cases{ background: var(--bg); }

.results-card{
  background: var(--ink);
  color: var(--paper);
  border: 1px solid rgba(250,246,236,.10);
  border-radius: 28px;
  padding: 28px;
  position: relative;
  overflow: hidden;
}
@media (min-width: 640px){ .results-card{ padding: 40px; } }

/* Subtle adinkra glow in card corner */
.results-card::before{
  content: "";
  position: absolute;
  top: -100px; right: -100px;
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(214,166,53,.10) 0%, rgba(214,166,53,0) 60%);
  pointer-events: none;
  z-index: 0;
}
.results-card > *{ position: relative; z-index: 1; }

.results-eyebrow{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(250,246,236,.55);
}
.results-eyebrow svg{ width: 14px; height: 14px; color: var(--gold); }

.results-title{ margin-top: 14px; margin-bottom: 36px; }
.results-title h2{
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(48px, 8vw, 128px);
  line-height: .9;
  letter-spacing: -.035em;
  color: var(--paper);
  margin: 0;
}
.results-title h2 .dot{ color: var(--ocre); font-style: normal; }
.results-title .results-sub{
  margin-top: 6px;
  font-family: var(--sans);
  font-size: 15px;
  color: rgba(250,246,236,.55);
}

/* === Cas clients · CTA simple ============================================ */
.cases-cta{
  text-align: center;
  padding: 64px 28px;
}
@media (min-width: 640px){ .cases-cta{ padding: 96px 48px; } }
@media (min-width: 1024px){ .cases-cta{ padding: 128px 64px; } }

.cases-cta-eye{
  display: inline-block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(250,246,236,.55);
  margin-bottom: 24px;
}
.cases-cta-title{
  font-family: var(--serif);
  font-size: clamp(44px, 7vw, 88px);
  line-height: .98;
  letter-spacing: -.02em;
  color: var(--paper);
  margin: 0 0 20px;
}
.cases-cta-title .dot{ color: var(--ocre); font-style: normal; }
.cases-cta-lead{
  font-family: var(--sans);
  font-size: clamp(16px, 1.6vw, 19px);
  line-height: 1.55;
  color: rgba(250,246,236,.72);
  max-width: 540px;
  margin: 0 auto 36px;
}
.cases-cta-lead em{
  font-family: var(--serif);
  font-style: italic;
  color: var(--gold);
  font-weight: 400;
}
.cases-cta-btn{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 28px;
  background: var(--paper);
  color: var(--ink);
  border-radius: 999px;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 15px;
  text-decoration: none;
  transition: transform .25s var(--ease-out), background .25s var(--ease-out);
}
.cases-cta-btn:hover{
  background: var(--gold);
  transform: translateY(-2px);
}
.cases-cta-btn svg{ width: 16px; height: 16px; }

/* Grid */
.results-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
@media (min-width: 640px){
  .results-grid{ grid-template-columns: 1fr 1fr; gap: 16px; }
}
@media (min-width: 1280px){
  .results-grid{ grid-template-columns: repeat(4, 1fr); }
}

/* Shared card surface */
.res-metric, .res-mini, .res-quote{
  background: rgba(250,246,236,.035);
  border: 1px solid rgba(250,246,236,.10);
  border-radius: 20px;
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  transition: border-color .3s var(--ease-out), background .3s var(--ease-out), transform .35s var(--ease-out);
}
.res-metric:hover, .res-mini:hover, .res-quote:hover{
  border-color: rgba(214,166,53,.30);
  background: rgba(250,246,236,.05);
}

/* Metric column */
.res-metric{
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 22px;
  min-height: 420px;
}
@media (min-width: 640px){ .res-metric{ padding: 26px; } }
.res-metric-body{ display: flex; flex-direction: column; gap: 18px; }
.res-metric-num{ display: flex; align-items: flex-end; gap: 8px; }
.res-metric-num .num{
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(56px, 6vw, 84px);
  line-height: .85;
  letter-spacing: -.03em;
  color: var(--paper);
}
.res-metric-num .unit{
  color: rgba(250,246,236,.55);
  font-size: 18px;
  margin-bottom: 12px;
  font-family: var(--mono);
}
.res-metric-desc{
  font-size: 14px;
  line-height: 1.55;
  color: rgba(250,246,236,.75);
}
.res-metric-desc strong{ color: var(--paper); font-weight: 500; }
.res-metric-brand{
  font-family: var(--serif);
  font-style: italic;
  font-size: 15px;
  color: var(--paper);
}
.res-metric-brand sup{
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .12em;
  vertical-align: super;
  margin-left: 3px;
  font-style: normal;
  color: var(--gold);
}
.res-metric-icons{ display: flex; align-items: center; }
.res-metric-icons .icon-bubble{
  width: 28px; height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(250,246,236,.10), rgba(250,246,236,.03));
  border: 1px solid rgba(250,246,236,.15);
  display: flex; align-items: center; justify-content: center;
  color: rgba(250,246,236,.85);
  margin-left: -8px;
}
.res-metric-icons .icon-bubble:first-child{ margin-left: 0; }
.res-metric-icons .icon-bubble svg{ width: 13px; height: 13px; }
.res-metric-icons .pill{
  display: inline-flex; align-items: center;
  height: 28px; padding: 0 12px;
  background: var(--paper);
  color: var(--ink);
  border-radius: 999px;
  font-size: 11px; font-weight: 500;
  font-family: var(--mono);
  letter-spacing: .04em;
  margin-left: 4px;
}
.res-metric-trend{
  display: flex; align-items: center; gap: 8px;
  color: var(--gold);
}
.res-metric-trend svg{ width: 14px; height: 14px; flex-shrink: 0; }
.res-metric-trend .trend-label{
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .08em;
  color: rgba(250,246,236,.55);
  line-height: 1.3;
}
.res-metric-cta{
  margin-top: 24px;
  height: 46px; width: 100%;
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  border: 0;
  cursor: pointer;
  transition: background .25s var(--ease-out), color .25s var(--ease-out);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  text-decoration: none;
}
.res-metric-cta:hover{ background: var(--ocre); color: var(--paper); }

/* Col 1 — CTA simple (remplace l'ancien .res-metric) */
.res-cta{
  background: rgba(250,246,236,.035);
  border: 1px solid rgba(250,246,236,.10);
  border-radius: 20px;
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 26px;
  min-height: 420px;
  transition: border-color .3s var(--ease-out), background .3s var(--ease-out);
}
.res-cta:hover{
  border-color: rgba(214,166,53,.30);
  background: rgba(250,246,236,.05);
}
.res-cta-body{ display: flex; flex-direction: column; gap: 16px; }
.res-cta-eye{
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(250,246,236,.55);
}
.res-cta-title{
  font-family: var(--serif);
  font-size: clamp(28px, 3vw, 38px);
  line-height: 1.05;
  letter-spacing: -.02em;
  color: var(--paper);
  margin: 0;
}
.res-cta-title em{
  font-style: italic;
  color: var(--gold);
  font-weight: 400;
}
.res-cta-desc{
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.5;
  color: rgba(250,246,236,.7);
  margin: 0;
}
.res-cta-btn{
  margin-top: 24px;
  height: 46px; width: 100%;
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  border: 0;
  cursor: pointer;
  transition: background .25s var(--ease-out), color .25s var(--ease-out);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  text-decoration: none;
}
.res-cta-btn:hover{ background: var(--ocre); color: var(--paper); }
.res-cta-btn svg{ width: 16px; height: 16px; }

/* Stacked column variants */
.res-col{ display: grid; gap: 14px; }
@media (min-width: 640px){ .res-col{ gap: 16px; } }
.res-col.col-tall{ grid-template-rows: auto 1fr; }
.res-col.col-tall-rev{ grid-template-rows: 1fr auto; }

/* Mini author card */
.res-mini{
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px;
}
.res-mini-author{ display: flex; align-items: center; gap: 12px; }
.res-mini-avatar{
  width: 38px; height: 38px;
  border-radius: 8px;
  border: 1px solid rgba(250,246,236,.15);
  background-color: var(--ocre);
  background-size: cover; background-position: center;
  flex-shrink: 0;
  overflow: hidden;
}
.res-mini-avatar svg{ width: 100%; height: 100%; display: block; }
.res-mini-name{
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -.005em;
  color: var(--paper);
  margin: 0;
  line-height: 1.2;
}
.res-mini-role{
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .08em;
  color: rgba(250,246,236,.55);
  margin: 4px 0 0;
  text-transform: uppercase;
}
.plus-icon{
  width: 16px; height: 16px;
  color: rgba(250,246,236,.30);
  flex-shrink: 0;
  transition: color .25s var(--ease-out), transform .35s var(--ease-out);
}
.res-mini:hover .plus-icon, .res-quote:hover .plus-icon{
  color: var(--gold);
  transform: rotate(90deg);
}

/* Quote card */
.res-quote{
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 22px;
  min-height: 420px;
  gap: 24px;
}
@media (min-width: 640px){ .res-quote{ padding: 26px; } }
.res-quote-header{
  display: flex; justify-content: space-between; align-items: center;
}
.res-quote-stars{
  display: flex; gap: 2px;
  color: var(--gold);
}
.res-quote-stars svg{ width: 16px; height: 16px; }
.res-quote-cat{
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(250,246,236,.55);
}
.res-quote-text{
  font-family: var(--serif);
  font-size: clamp(20px, 1.7vw, 28px);
  line-height: 1.2;
  letter-spacing: -.018em;
  color: var(--paper);
  text-align: left;
  margin: 0;
}
.res-quote-text em{
  font-style: italic;
  color: var(--gold);
  font-weight: 400;
}
.res-quote.center .res-quote-text{ text-align: left; }
.res-quote-text .hl{
  background: linear-gradient(180deg, transparent 65%, rgba(214,166,53,.35) 65%);
  padding: 0 2px;
}

/* ===== Produits · Featured + Bento ===== */
.produits{ background: var(--paper); position: relative; overflow: hidden; }

/* Header */
.prod-head{
  text-align: center;
  max-width: 760px;
  margin: 0 auto 64px;
}
.prod-eyebrow{
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 16px;
}
.prod-eyebrow svg{ width: 13px; height: 13px; color: var(--ocre); }
.prod-title{
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(40px, 6.4vw, 96px);
  line-height: .95;
  letter-spacing: -.03em;
  color: var(--ink);
  margin: 0 0 16px;
}
.prod-title .italic{ color: var(--ocre); }
.prod-sub{
  font-family: var(--serif);
  font-size: clamp(15px, 1.3vw, 19px);
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0 auto;
  max-width: 540px;
}

/* === Featured product (ZeroName) === */
.prod-featured{
  position: relative;
  background: var(--ink);
  color: var(--paper);
  border: 1px solid rgba(250,246,236,.10);
  border-radius: 32px;
  padding: 32px;
  margin-bottom: 24px;
  overflow: hidden;
  box-shadow:
    0 1px 1px rgba(0,0,0,.06),
    0 6px 16px rgba(0,0,0,.10),
    0 30px 60px rgba(0,0,0,.18);
}
@media (min-width: 768px){ .prod-featured{ padding: 48px; } }
@media (min-width: 1024px){ .prod-featured{ padding: 64px; } }

.pf-halo{
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(800px 400px at 100% 0%, rgba(214,166,53,.20), transparent 60%),
    radial-gradient(600px 400px at 0% 100%, rgba(29,40,86,.30), transparent 60%);
  z-index: 0;
}

.pf-grid{
  display: grid;
  grid-template-columns: 5fr 6fr;
  gap: 48px;
  align-items: center;
  position: relative;
  z-index: 1;
}
@media (max-width: 900px){
  .pf-grid{ grid-template-columns: 1fr; gap: 40px; }
}

/* Featured content */
.pf-content{ display: flex; flex-direction: column; gap: 20px; }
.pf-header{
  display: flex; justify-content: space-between; align-items: center;
}
.pf-status{
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(250,246,236,.85);
}
.pf-status .dot{
  width: 8px; height: 8px; border-radius: 50%;
  background: #6fdc8c;
  box-shadow: 0 0 12px rgba(111,220,140,.6);
}
.pf-status .dot.pulse{ animation: dotpulse 2s infinite; }
.pf-num{
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .14em;
  color: rgba(250,246,236,.45);
  text-transform: uppercase;
}

.pf-name{
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(48px, 6vw, 88px);
  line-height: .95;
  letter-spacing: -.03em;
  color: var(--paper);
  margin: 0;
}
.pf-name .dot{ color: var(--ocre); font-style: normal; }
.pf-name .ext{ color: var(--gold); font-style: italic; }

.pf-tagline{
  font-family: var(--serif);
  font-size: clamp(18px, 1.6vw, 24px);
  line-height: 1.3;
  color: rgba(250,246,236,.85);
  margin: 0;
  max-width: 460px;
}
.pf-desc{
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.55;
  color: rgba(250,246,236,.65);
  margin: 0;
  max-width: 480px;
}
.pf-desc .hl{
  font-family: var(--mono);
  font-size: 12px;
  background: rgba(214,166,53,.15);
  border: 1px solid rgba(214,166,53,.30);
  color: var(--gold);
  padding: 1px 6px;
  border-radius: 4px;
  margin: 0 1px;
}

.pf-stats{
  display: flex; gap: 28px;
  padding: 20px 0;
  border-top: 1px solid rgba(250,246,236,.10);
  border-bottom: 1px solid rgba(250,246,236,.10);
}
.pf-stat{ display: flex; flex-direction: column; gap: 4px; }
.pf-stat strong{
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(28px, 3vw, 40px);
  color: var(--paper);
  line-height: 1;
}
.pf-stat span{
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(250,246,236,.55);
}

.pf-tags{
  display: flex; flex-wrap: wrap; gap: 6px;
}
.pf-tags span{
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(250,246,236,.05);
  border: 1px solid rgba(250,246,236,.12);
  color: rgba(250,246,236,.75);
}

.pf-ctas{ display: flex; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.pf-cta{
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 20px;
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -.005em;
  text-decoration: none;
  transition: background .25s var(--ease-out), color .25s var(--ease-out), transform .15s var(--ease-out);
}
.pf-cta svg{ width: 14px; height: 14px; transition: transform .25s var(--ease-out); }
.pf-cta.primary{
  background: var(--gold);
  color: var(--ink);
  box-shadow: 0 4px 16px rgba(214,166,53,.30);
}
.pf-cta.primary:hover{ background: var(--paper); }
.pf-cta.primary:hover svg{ transform: translate(2px, -2px); }
.pf-cta.ghost{
  background: rgba(250,246,236,.06);
  color: var(--paper);
  border: 1px solid rgba(250,246,236,.18);
}
.pf-cta.ghost:hover{ background: rgba(250,246,236,.12); border-color: rgba(250,246,236,.30); }

/* === Featured mockup (ZeroName UI) === */
.pf-mockup-wrap{
  position: relative;
  display: flex; align-items: center; justify-content: center;
  perspective: 1200px;
}
.pf-mockup{
  width: 100%;
  max-width: 520px;
  background: linear-gradient(180deg, #14181f 0%, #0d1015 100%);
  border: 1px solid rgba(250,246,236,.12);
  border-radius: 14px;
  overflow: hidden;
  box-shadow:
    0 10px 30px rgba(0,0,0,.30),
    0 30px 80px rgba(0,0,0,.40),
    inset 0 1px 0 rgba(255,255,255,.08);
  transform: rotateY(-3deg) rotateX(2deg);
  transition: transform .6s var(--ease-out);
}
.pf-mockup:hover{ transform: rotateY(0) rotateX(0) translateY(-4px); }

.zn-bar{
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px;
  background: rgba(250,246,236,.04);
  border-bottom: 1px solid rgba(250,246,236,.08);
}
.zn-dots{ display: flex; gap: 5px; }
.zd{
  width: 10px; height: 10px; border-radius: 50%;
}
.zd.red{ background: #ff5f56; }
.zd.yellow{ background: #ffbd2e; }
.zd.green{ background: #27c93f; }
.zn-url{
  flex: 1;
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono);
  font-size: 11px;
  color: rgba(250,246,236,.65);
  background: rgba(250,246,236,.04);
  border: 1px solid rgba(250,246,236,.06);
  padding: 4px 10px;
  border-radius: 6px;
  justify-content: center;
}
.zn-url svg{ width: 11px; height: 11px; opacity: .55; }
.zn-credit{
  font-family: var(--mono);
  font-size: 10px;
  color: rgba(250,246,236,.55);
  background: rgba(214,166,53,.12);
  padding: 4px 9px;
  border-radius: 999px;
  border: 1px solid rgba(214,166,53,.25);
}
.zn-credit .cr-num{ color: var(--gold); font-weight: 600; }

.zn-body{
  padding: 24px 22px;
  display: flex; flex-direction: column; gap: 18px;
}
.zn-greeting .zn-eyebrow{
  display: block;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--gold);
  letter-spacing: .08em;
  margin-bottom: 8px;
}
.zn-h4{
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 24px;
  line-height: 1.1;
  color: var(--paper);
  margin: 0;
  letter-spacing: -.02em;
}
.zn-h4 em{ color: var(--gold); }

.zn-prompt{
  display: flex; align-items: center; gap: 10px;
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(250,246,236,.10);
  border-radius: 10px;
  padding: 8px 8px 8px 14px;
}
.zn-icon{
  color: var(--gold);
  display: flex;
}
.zn-icon svg{ width: 14px; height: 14px; }
.zn-text{
  flex: 1;
  font-family: var(--mono);
  font-size: 12px;
  color: rgba(250,246,236,.85);
}
.zn-btn{
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--gold);
  color: var(--ink);
  border: 0;
  padding: 7px 12px;
  border-radius: 7px;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  letter-spacing: -.005em;
}
.zn-btn svg{ width: 11px; height: 11px; }

.zn-tlds{ display: flex; gap: 6px; flex-wrap: wrap; }
.zn-tlds span{
  font-family: var(--mono);
  font-size: 10px;
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(250,246,236,.04);
  border: 1px solid rgba(250,246,236,.08);
  color: rgba(250,246,236,.55);
  letter-spacing: .04em;
}
.zn-tlds span.active{
  background: var(--ocre);
  border-color: var(--ocre);
  color: var(--paper);
}

.zn-results{ display: flex; flex-direction: column; gap: 6px; }
.zn-result{
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px;
  background: rgba(250,246,236,.03);
  border: 1px solid rgba(250,246,236,.08);
  border-radius: 8px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .5s var(--ease-out), transform .5s var(--ease-out);
}
.prod-featured.is-visible .zn-result[data-i="0"]{ opacity: 1; transform: translateY(0); transition-delay: .3s; }
.prod-featured.is-visible .zn-result[data-i="1"]{ opacity: 1; transform: translateY(0); transition-delay: .45s; }
.prod-featured.is-visible .zn-result[data-i="2"]{ opacity: 1; transform: translateY(0); transition-delay: .6s; }
.prod-featured.is-visible .zn-result[data-i="3"]{ opacity: 1; transform: translateY(0); transition-delay: .75s; }
.zn-result.featured{
  background: rgba(214,166,53,.10);
  border-color: rgba(214,166,53,.30);
}
.zr-name{
  font-family: var(--serif);
  font-style: italic;
  font-size: 14px;
  color: var(--paper);
  flex: 1;
}
.zr-ext{
  font-family: var(--mono);
  font-size: 11px;
  color: var(--gold);
  font-weight: 500;
}
.zr-status{
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .04em;
}
.zr-status.ok{ color: #6fdc8c; }
.zr-badge{
  font-family: var(--mono);
  font-size: 10px;
  background: var(--gold);
  color: var(--ink);
  padding: 3px 7px;
  border-radius: 4px;
  font-weight: 600;
  letter-spacing: .04em;
}

.pf-accent{
  position: absolute;
  bottom: -40px; right: -40px;
  width: 180px; height: 180px;
  opacity: .15;
  pointer-events: none;
  z-index: 0;
  color: var(--gold);
}
.pf-accent svg{ width: 100%; height: 100%; }

/* === Bento grid: 5 other products === */
.prod-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 24px;
}
@media (max-width: 900px){
  .prod-grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px){
  .prod-grid{ grid-template-columns: 1fr; }
}

.prod-card{
  position: relative;
  background: var(--ink);
  color: var(--paper);
  border: 1px solid rgba(250,246,236,.10);
  border-radius: 22px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow: hidden;
  transition:
    transform .35s var(--ease-out),
    border-color .35s var(--ease-out),
    box-shadow .35s var(--ease-out);
  min-height: 360px;
}
.prod-card:hover{
  transform: translateY(-6px);
  border-color: rgba(var(--accent), .50);
  box-shadow:
    0 24px 48px rgba(0,0,0,.20),
    0 0 24px rgba(var(--accent), .25);
}
.prod-card--wide{ grid-column: span 2; }
@media (max-width: 900px){ .prod-card--wide{ grid-column: span 2; } }
@media (max-width: 600px){ .prod-card--wide{ grid-column: span 1; } }

.pc-halo{
  position: absolute;
  top: -80px; right: -80px;
  width: 240px; height: 240px;
  background: radial-gradient(circle, rgba(var(--accent), .18) 0%, rgba(var(--accent), 0) 60%);
  pointer-events: none;
  z-index: 0;
}
.prod-card > *{ position: relative; z-index: 1; }

.pc-head{
  display: flex; justify-content: space-between; align-items: flex-start;
}
.pc-icon{
  width: 40px; height: 40px;
  border-radius: 10px;
  background: rgba(var(--accent), .15);
  border: 1px solid rgba(var(--accent), .30);
  overflow: hidden;
}
.pc-icon svg{ width: 100%; height: 100%; display: block; }
.pc-status{
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(250,246,236,.65);
  padding: 4px 9px;
  background: rgba(250,246,236,.04);
  border-radius: 999px;
  border: 1px solid rgba(250,246,236,.08);
}
.pc-status .dot{
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--gold);
}
.pc-status .dot.pulse{ animation: dotpulse 2s infinite; }
.pc-status .dot.ocre{ background: var(--ocre); }
.pc-status .dot.ok{ background: #6fdc8c; box-shadow: 0 0 6px rgba(111,220,140,.5); }

.pc-name{
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(24px, 2.4vw, 32px);
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--paper);
  margin: 0;
}
.pc-name .ext{
  color: var(--gold);
  font-size: .65em;
  margin-left: 1px;
}
.pc-desc{
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.5;
  color: rgba(250,246,236,.65);
  margin: 0;
  max-width: 380px;
}

.pc-mockup{
  flex: 1;
  background: linear-gradient(180deg, rgba(0,0,0,.30), rgba(0,0,0,.15));
  border: 1px solid rgba(250,246,236,.06);
  border-radius: 12px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 130px;
}

.pc-tags{ display: flex; flex-wrap: wrap; gap: 5px; margin-top: auto; }
.pc-tags span{
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(250,246,236,.04);
  border: 1px solid rgba(250,246,236,.10);
  color: rgba(250,246,236,.65);
}

/* Mockup variants */

/* Inside AI — Dashboard */
.mockup-dashboard .md-row{
  display: flex; align-items: center; gap: 8px;
}
.mockup-dashboard .md-bar{
  height: 8px;
  background: linear-gradient(90deg, rgba(214,166,53,.40), rgba(214,166,53,.10));
  border-radius: 4px;
  flex: 1;
}
.mockup-dashboard .md-bar.w-80{ max-width: 80%; }
.mockup-dashboard .md-bar.w-60{ max-width: 60%; }
.mockup-dashboard .md-bar.w-40{ max-width: 40%; }
.mockup-dashboard .md-val{
  font-family: var(--mono);
  font-size: 10px;
  color: rgba(250,246,236,.85);
  width: 36px; text-align: right;
}
.mockup-dashboard .md-trend{
  display: flex; align-items: center; gap: 6px;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--gold);
  margin-top: auto;
  padding-top: 6px;
  border-top: 1px solid rgba(250,246,236,.08);
}
.mockup-dashboard .md-trend svg{ width: 12px; height: 12px; }

/* Bokari — Search */
.mockup-search .ms-bar{
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px;
  background: rgba(250,246,236,.05);
  border: 1px solid rgba(250,246,236,.08);
  border-radius: 6px;
  font-family: var(--mono);
  font-size: 10px;
  color: rgba(250,246,236,.65);
}
.mockup-search .ms-bar svg{ width: 11px; height: 11px; }
.mockup-search .ms-result{
  display: flex; flex-direction: column; gap: 4px;
}
.mockup-search .ms-line{
  height: 5px;
  background: linear-gradient(90deg, rgba(111,220,140,.35), rgba(111,220,140,.10));
  border-radius: 3px;
  display: block;
}
.mockup-search .ms-line.w-90{ width: 90%; }
.mockup-search .ms-line.w-80{ width: 80%; }
.mockup-search .ms-line.w-70{ width: 70%; }
.mockup-search .ms-line.w-60{ width: 60%; }
.mockup-search .ms-meta{
  font-family: var(--mono);
  font-size: 9px;
  color: rgba(111,220,140,.85);
  letter-spacing: .04em;
  margin-top: 2px;
}

/* Floo — Chat */
.mockup-chat{ gap: 6px; }
.mc-bubble{
  font-family: var(--sans);
  font-size: 11px;
  padding: 6px 10px;
  border-radius: 10px;
  max-width: 80%;
  line-height: 1.3;
}
.mc-bubble.in{
  background: rgba(37,211,102,.15);
  border: 1px solid rgba(37,211,102,.30);
  color: rgba(250,246,236,.95);
  border-bottom-left-radius: 2px;
  align-self: flex-start;
}
.mc-bubble.out{
  background: rgba(250,246,236,.08);
  color: rgba(250,246,236,.85);
  border-bottom-right-radius: 2px;
  align-self: flex-end;
}
.mc-typing{ display: inline-flex; gap: 3px; align-items: center; padding: 2px 0; }
.mc-typing span{
  width: 5px; height: 5px;
  border-radius: 50%;
  background: rgba(250,246,236,.5);
  animation: typingDot 1.2s infinite;
}
.mc-typing span:nth-child(2){ animation-delay: .2s; }
.mc-typing span:nth-child(3){ animation-delay: .4s; }
@keyframes typingDot{
  0%, 60%, 100%{ transform: translateY(0); opacity: .4; }
  30%{ transform: translateY(-3px); opacity: 1; }
}

/* Ambaga — Mobile phone */
.mockup-mobile{
  align-items: center; justify-content: center;
  padding: 10px 14px;
}
.mm-phone{
  width: 100%;
  max-width: 160px;
  background: linear-gradient(180deg, rgba(107,31,18,.20), rgba(107,31,18,.05));
  border: 1px solid rgba(107,31,18,.30);
  border-radius: 14px;
  padding: 12px;
  display: flex; flex-direction: column; gap: 6px;
}
.mm-q{
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .08em;
  color: rgba(250,246,236,.55);
  text-transform: uppercase;
}
.mm-text{
  font-family: var(--serif);
  font-style: italic;
  font-size: 13px;
  color: var(--paper);
  line-height: 1.2;
  margin-bottom: 4px;
}
.mm-opts{ display: flex; flex-direction: column; gap: 4px; }
.mm-opt{
  font-family: var(--sans);
  font-size: 10px;
  padding: 5px 9px;
  background: rgba(250,246,236,.05);
  border: 1px solid rgba(250,246,236,.10);
  border-radius: 6px;
  color: rgba(250,246,236,.75);
}
.mm-opt.active{
  background: rgba(214,166,53,.20);
  border-color: var(--gold);
  color: var(--paper);
}

/* TheGoatAI — Coach */
.mockup-coach{ gap: 8px; }
.mco-msg{
  font-family: var(--sans);
  font-size: 11px;
  padding: 8px 10px;
  border-radius: 10px;
  line-height: 1.4;
}
.mco-msg.user{
  background: rgba(250,246,236,.05);
  color: rgba(250,246,236,.85);
  border: 1px solid rgba(250,246,236,.08);
  border-bottom-right-radius: 2px;
  align-self: flex-end;
  max-width: 70%;
}
.mco-msg.ai{
  background: rgba(214,166,53,.08);
  border: 1px solid rgba(214,166,53,.25);
  color: rgba(250,246,236,.95);
  border-bottom-left-radius: 2px;
  display: flex; flex-direction: column; gap: 6px;
}
.mco-msg.ai p{ margin: 0; }
.mco-tag{
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .1em;
  color: var(--gold);
  text-transform: uppercase;
}
.mco-plan{ display: flex; flex-direction: column; gap: 4px; margin-top: 2px; }
.mco-step{
  font-family: var(--mono);
  font-size: 10px;
  padding: 4px 8px;
  background: rgba(250,246,236,.04);
  border-radius: 6px;
  border-left: 2px solid rgba(250,246,236,.20);
  color: rgba(250,246,236,.65);
}
.mco-step.done{ border-left-color: #6fdc8c; color: rgba(250,246,236,.85); }
.mco-step.active{ border-left-color: var(--gold); background: rgba(214,166,53,.10); color: var(--paper); }

/* ===== About / Team ===== */
.about{ background: var(--bg); }

/* Outer team card (dark, matches Results card DNA) */
.team-card{
  background: var(--ink);
  color: var(--paper);
  border: 1px solid rgba(250,246,236,.10);
  border-radius: 28px;
  padding: 28px;
  position: relative;
  overflow: hidden;
}
@media (min-width: 640px){ .team-card{ padding: 40px; } }
@media (min-width: 1024px){ .team-card{ padding: 56px; } }

/* Subtle background dividers (gradient lines) */
.team-bg{ position: absolute; inset: 0; pointer-events: none; opacity: .18; }
.team-bg .bg-h{
  position: absolute;
  left: 0; right: 0;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(250,246,236,.45), transparent);
}
.team-bg .h1{ top: 25%; }
.team-bg .h2{ top: 75%; }
.team-bg .bg-v{
  position: absolute;
  top: 0; bottom: 0;
  width: 1px;
  background: linear-gradient(to bottom, transparent, rgba(250,246,236,.45), transparent);
}
.team-bg .v1{ left: 33.33%; }
.team-bg .v2{ right: 33.33%; }

/* Halo gold corner */
.team-card::before{
  content: "";
  position: absolute;
  bottom: -120px; right: -120px;
  width: 460px; height: 460px;
  background: radial-gradient(circle, rgba(214,166,53,.12) 0%, rgba(214,166,53,0) 60%);
  pointer-events: none;
  z-index: 0;
}

/* Grid */
.team-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  position: relative;
  z-index: 1;
  align-items: center;
}
@media (max-width: 900px){
  .team-grid{ grid-template-columns: 1fr; gap: 56px; }
}

/* Left copy */
.team-copy{ display: flex; flex-direction: column; gap: 28px; }
.team-eyebrow{
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(250,246,236,.55);
}
.team-eyebrow .te-dot{
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 0 rgba(214,166,53,.7);
  animation: dotpulse 2s infinite;
}
.team-title{
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(36px, 5.4vw, 80px);
  line-height: .95;
  letter-spacing: -.025em;
  color: var(--paper);
  margin: 0;
}
.team-title .italic{ color: var(--gold); }

/* Plus markers row */
.team-markers{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  padding: 18px 0;
  border-top: 1px solid rgba(250,246,236,.08);
  border-bottom: 1px solid rgba(250,246,236,.08);
}
@media (max-width: 600px){
  .team-markers{ grid-template-columns: 1fr; gap: 10px; }
}
.t-marker{
  display: flex; align-items: center; gap: 8px;
  font-family: var(--sans);
  font-size: 13px;
  color: rgba(250,246,236,.65);
}
.t-marker svg{
  width: 14px; height: 14px;
  color: var(--gold);
  flex-shrink: 0;
}

/* Explainer 2-col with vertical divider */
.team-explainer{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  margin-top: 4px;
}
@media (max-width: 768px){
  .team-explainer{ grid-template-columns: 1fr; gap: 24px; }
}
.te-eyebrow{
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--paper);
  margin: 0 0 6px;
  letter-spacing: -.005em;
}
.te-desc{
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.55;
  color: rgba(250,246,236,.55);
  margin: 0 0 18px;
}
.te-cta{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--paper);
  color: var(--ink);
  padding: 10px 16px;
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  transition: background .25s var(--ease-out);
}
.te-cta:hover{ background: var(--gold); }
.te-cta .dot{
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--ink);
}
.te-right{ position: relative; padding-left: 28px; }
.te-right::before{
  content: "";
  position: absolute;
  left: 0; top: 4px; bottom: 4px;
  width: 1px;
  background: linear-gradient(to bottom, transparent, rgba(250,246,236,.25), transparent);
}
.te-quote{
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.5;
  color: rgba(250,246,236,.75);
  margin: 0;
}
.te-quote .hl{
  color: var(--paper);
  font-style: italic;
  background: linear-gradient(180deg, transparent 65%, rgba(214,166,53,.30) 65%);
  padding: 0 3px;
}

/* === Team marquee (scrolling cards) === */
.team-marquee-wrap{
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow: hidden;
}

.tm-meta{
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.tm-label{
  color: rgba(250,246,236,.65);
  display: inline-flex; align-items: center; gap: 8px;
}
.tm-label::before{
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 0 rgba(214,166,53,.7);
  animation: dotpulse 2s infinite;
}
.tm-hint{
  color: rgba(250,246,236,.30);
  font-style: italic;
}

.team-marquee{
  position: relative;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
}

.team-track{
  display: flex;
  gap: 14px;
  padding: 8px 0;
  width: max-content;
  animation: teamScroll 55s linear infinite;
}
.team-track-rev{ animation: teamScrollRev 55s linear infinite; }
.team-marquee:hover .team-track,
.team-marquee:hover .team-track-rev{ animation-play-state: paused; }

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

/* Trading-card style team member */
.team-mem-card{
  width: 200px;
  height: 270px;
  flex-shrink: 0;
  border-radius: 18px;
  border: 1px solid rgba(250,246,236,.10);
  background: var(--ink);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition:
    transform .35s var(--ease-out),
    border-color .35s var(--ease-out),
    box-shadow .35s var(--ease-out);
  cursor: pointer;
}
@media (max-width: 640px){
  .team-mem-card{ width: 170px; height: 230px; }
}
.team-mem-card:hover{
  transform: translateY(-6px);
  border-color: var(--gold);
  box-shadow:
    0 24px 48px rgba(0,0,0,.30),
    0 0 24px rgba(214,166,53,.20);
}

.tmc-num{
  position: absolute;
  top: 12px; right: 14px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .14em;
  color: rgba(250,246,236,.55);
  z-index: 3;
  background: rgba(0,0,0,.35);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  padding: 3px 8px;
  border-radius: 999px;
}

.tmc-avatar{
  flex: 1;
  width: 100%;
  position: relative;
  overflow: hidden;
}
.tmc-avatar svg{
  width: 100%; height: 100%;
  display: block;
  transition: transform .5s var(--ease-out);
}
.team-mem-card:hover .tmc-avatar svg{ transform: scale(1.06); }

.tmc-meta{
  padding: 12px 14px 14px;
  background: rgba(0,0,0,.45);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  border-top: 1px solid rgba(250,246,236,.08);
  position: relative;
  z-index: 2;
}
.tmc-name{
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 22px;
  letter-spacing: -.015em;
  color: var(--paper);
  margin: 0;
  line-height: 1;
}
.tmc-role{
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(250,246,236,.55);
  margin: 6px 0 0;
}

/* Founder badge */
.team-mem-card.founder{
  border-color: var(--gold);
  box-shadow: 0 0 20px rgba(214,166,53,.25);
}
.team-mem-card.founder::before{
  content: "★ Founder";
  position: absolute;
  top: 12px; left: 12px;
  background: var(--gold);
  color: var(--ink);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 4px 9px;
  z-index: 3;
  box-shadow: 0 0 12px rgba(214,166,53,.5);
}

/* ===== Insights (chef d'œuvre magazine) ===== */
.insights{ background: var(--paper); position: relative; overflow: hidden; }
.insights::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(800px 400px at 90% 10%, rgba(214,140,69,.06), transparent 60%),
    radial-gradient(700px 500px at 5% 90%, rgba(46,58,89,.05), transparent 65%);
}
.insights .wrap{ position:relative; z-index:1; }

/* Header */
.ins-head{
  display:grid; grid-template-columns: 1.1fr 1fr; gap: 64px;
  padding-bottom: 72px; margin-bottom: 56px;
  border-bottom: 1px solid var(--line);
}
.ins-head-l{ display:flex; flex-direction:column; gap: 20px; }
.ins-title{
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(48px, 6vw, 88px); line-height: .95;
  letter-spacing: -0.03em; color: var(--ink);
}
.ins-title em{ font-style: italic; color: var(--accent); }
.ins-head-r{ display:flex; flex-direction:column; gap: 28px; justify-content:flex-end; }
.ins-sub{
  font-size: 18px; line-height: 1.55; color: var(--ink-soft);
  max-width: 480px;
}
.ins-filters{ display:flex; flex-wrap:wrap; gap: 8px; }
.ins-chip{
  font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  padding: 10px 16px; border-radius: 999px;
  background: transparent; color: var(--ink-soft);
  border: 1px solid var(--line-strong); cursor: pointer;
  transition: all .25s ease;
}
.ins-chip:hover{ color: var(--ink); border-color: var(--ink); }
.ins-chip.is-on{
  background: var(--ink); color: var(--paper); border-color: var(--ink);
}
@media (max-width: 900px){
  .ins-head{ grid-template-columns: 1fr; gap: 32px; padding-bottom: 48px; margin-bottom: 40px; }
}

/* Featured */
.ins-featured{
  display:grid; grid-template-columns: 1.1fr 1fr; gap: 0;
  background: var(--ink); color: var(--paper);
  border-radius: 24px; overflow: hidden;
  margin-bottom: 56px;
  box-shadow:
    0 1px 0 rgba(255,255,255,.04) inset,
    0 30px 60px -20px rgba(46,58,89,.35),
    0 10px 30px -10px rgba(0,0,0,.2);
  transition: transform .5s cubic-bezier(.2,.7,.2,1), box-shadow .5s;
  text-decoration: none;
}
.ins-featured:hover{
  transform: translateY(-4px);
  box-shadow:
    0 1px 0 rgba(255,255,255,.06) inset,
    0 40px 80px -20px rgba(46,58,89,.45),
    0 14px 36px -10px rgba(0,0,0,.28);
}

.ins-feat-cover{
  position: relative; min-height: 520px;
  overflow: hidden;
}
.ins-cover-bg{ position:absolute; inset:0; }
.ins-cover-bg[data-cover="featured"]{
  background:
    radial-gradient(circle at 30% 30%, rgba(214,140,69,.35), transparent 55%),
    linear-gradient(135deg, var(--bogolan-red) 0%, #6e1f15 60%, #4a1410 100%);
}
.ins-cover-bg[data-cover="card2"]{
  background:
    radial-gradient(circle at 70% 70%, rgba(214,140,69,.28), transparent 55%),
    linear-gradient(135deg, var(--indigo) 0%, #1f2a45 60%, #14182b 100%);
}
.ins-cover-bg[data-cover="card3"]{
  background:
    radial-gradient(circle at 30% 80%, rgba(255,255,255,.12), transparent 55%),
    linear-gradient(135deg, #1d6f4a 0%, #114a32 60%, #0a2e1f 100%);
}
.ins-cover-bg[data-cover="card4"]{
  background:
    radial-gradient(circle at 50% 30%, rgba(255,255,255,.18), transparent 60%),
    linear-gradient(135deg, var(--ocre) 0%, #b06b30 55%, #7a4720 100%);
}

/* Cover bogolan tape (top edge) */
.ins-cover-tape{
  position:absolute; top:0; left:0; right:0; height: 14px;
  display:grid; grid-template-columns: repeat(4, 1fr); gap: 2px;
  background: rgba(0,0,0,.4); padding: 2px;
}
.ins-cover-tape span{
  background: repeating-linear-gradient(45deg,
    rgba(255,255,255,.18) 0 4px,
    transparent 4px 8px);
}

/* Cover stamp (top right) */
.ins-cover-stamp{
  position:absolute; top: 36px; right: 36px;
  display: grid; gap: 2px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .15em; text-transform: uppercase;
  color: rgba(255,255,255,.85);
  background: rgba(0,0,0,.25);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 12px;
  padding: 12px 16px;
  text-align: right;
  backdrop-filter: blur(6px);
}
.ins-cover-stamp .s2{
  font-family: var(--serif); font-size: 32px; font-style: italic;
  letter-spacing: -.01em; color: var(--gold); line-height: 1;
}
.ins-cover-stamp .s1, .ins-cover-stamp .s3{ opacity: .9; }

/* Cover badge (bottom left) */
.ins-cover-badge{
  position:absolute; bottom: 32px; left: 32px;
  display: inline-flex; align-items:center; gap: 8px;
  padding: 10px 16px;
  background: rgba(255,255,255,.95); color: var(--ink);
  border-radius: 999px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  font-weight: 600;
}
.ins-cover-badge .dot{
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--bogolan-red);
  box-shadow: 0 0 0 4px rgba(196,42,28,.18);
  animation: dotpulse 2s ease infinite;
}

/* Cover SVG injection (adinkra glyph) */
.ins-cover-bg svg{
  position:absolute; inset:0; width:100%; height:100%;
  opacity: .2;
}

.ins-feat-content{
  padding: 56px 52px;
  display:flex; flex-direction:column; gap: 24px;
  background: var(--ink);
}
.ins-feat-meta{
  display:flex; align-items:center; gap: 12px; flex-wrap:wrap;
  font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(255,255,255,.6);
}
.ins-cat{
  padding: 6px 12px; border-radius: 999px;
  font-family: var(--mono); font-size: 10px; letter-spacing: .14em;
  font-weight: 600;
}
.ins-cat-terrain{ background: var(--bogolan-red, #6b1f12); color: #fff; }
.ins-cat-produit{ background: var(--indigo); color: #fff; }
.ins-cat-strat{ background: #1d6f4a; color: #fff; }
.ins-cat-form{ background: var(--ocre); color: var(--ink); }
.ins-cat-fondamentaux{ background: #1d2856; color: #fff; }
.ins-cat-emploi{ background: #d6a635; color: var(--ink); }
.ins-cat-business{ background: #1d6f4a; color: #fff; }
.ins-dot{ opacity: .4; }

.ins-feat-title{
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(32px, 3.4vw, 48px); line-height: 1.05;
  letter-spacing: -0.02em; color: var(--paper);
}
.ins-feat-title em{ font-style: italic; color: var(--gold); }
.ins-feat-excerpt{
  font-size: 16px; line-height: 1.65;
  color: rgba(255,255,255,.72);
}
.ins-feat-foot{
  display:flex; align-items:center; justify-content:space-between;
  margin-top: auto; padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,.1);
}
.ins-author{ display:flex; align-items:center; gap: 14px; }
.ins-author-av{
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--gold); position: relative; overflow: hidden;
  border: 2px solid rgba(255,255,255,.15);
}
.ins-author-av svg{ width:100%; height:100%; }
.ins-author-meta{ display:flex; flex-direction:column; gap: 2px; }
.ins-author-meta strong{ font-size: 14px; color: var(--paper); font-weight: 500; }
.ins-author-meta span{ font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.5); }
.ins-feat-cta{
  font-family: var(--mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--gold); transition: transform .3s;
}
.ins-featured:hover .ins-feat-cta{ transform: translateX(6px); }

@media (max-width: 900px){
  .ins-featured{ grid-template-columns: 1fr; }
  .ins-feat-cover{ min-height: 320px; }
  .ins-feat-content{ padding: 36px 28px; }
}

/* Grid */
.ins-grid{
  display:grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
}
@media (max-width: 1100px){ .ins-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px){ .ins-grid{ grid-template-columns: 1fr; } }

.ins-card{
  background: var(--paper-soft, #f7f1e6);
  border: 1px solid var(--line);
  border-radius: 20px; overflow: hidden;
  text-decoration: none; color: var(--ink);
  display:flex; flex-direction:column;
  transition: transform .45s cubic-bezier(.2,.7,.2,1), box-shadow .45s, border-color .45s;
}
.ins-card:hover{
  transform: translateY(-6px);
  border-color: var(--ink);
  box-shadow:
    0 24px 48px -16px rgba(46,58,89,.18),
    0 8px 20px -8px rgba(0,0,0,.08);
}
.ins-card-cover{
  position:relative; height: 200px; overflow:hidden;
}
.ins-card-cover svg{
  position:absolute; inset:0; width:100%; height:100%;
  opacity: .22;
}
.ins-card-num{
  position:absolute; top: 16px; left: 20px;
  font-family: var(--serif); font-style: italic; font-size: 56px;
  color: rgba(255,255,255,.85); line-height: 1;
  text-shadow: 0 2px 12px rgba(0,0,0,.25);
}
.ins-card-body{
  padding: 24px 24px 22px;
  display:flex; flex-direction:column; gap: 14px;
  flex: 1;
}
.ins-card-meta{
  display:flex; align-items:center; gap: 10px;
  font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-soft);
}
.ins-card h4{
  font-family: var(--serif); font-weight: 400;
  font-size: 22px; line-height: 1.15; letter-spacing: -0.01em;
  color: var(--ink);
}
.ins-card p{
  font-size: 14px; line-height: 1.55; color: var(--ink-soft);
  flex: 1;
}
.ins-card-foot{
  display:flex; align-items:center; gap: 10px;
  padding-top: 14px; border-top: 1px dashed var(--line);
  font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-soft);
}

/* === Variante sans image (text-only) === */
.ins-card-text{
  background: var(--paper);
}
.ins-card-text .ins-card-body{
  padding: 36px 32px 28px;
  gap: 20px;
}
.ins-card-text .ins-card-num{
  position: static;
  display: inline-flex; align-items: center;
  font-family: var(--serif); font-style: italic;
  font-size: 22px;
  line-height: 1;
  color: var(--ocre);
  text-shadow: none;
  margin-right: 4px;
}
.ins-card-text h4{
  font-size: clamp(24px, 2.4vw, 32px);
  line-height: 1.1;
  letter-spacing: -.02em;
  margin: 0;
}
.ins-card-text p{
  font-size: 15px;
  line-height: 1.6;
}
@media (max-width: 700px){
  .ins-card-text .ins-card-body{ padding: 28px 22px 22px !important; gap: 16px; }
  .ins-card-text h4{ font-size: clamp(22px, 6vw, 28px) !important; }
  .ins-card-text .ins-card-num{ font-size: 18px !important; }
}
.ins-mini-av{
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--ocre); position: relative; overflow:hidden;
  border: 1px solid var(--line);
}
.ins-mini-av svg{ width:100%; height:100%; }

/* Newsletter card */
.ins-newsletter{
  position: relative;
  background: var(--ink);
  border-radius: 20px; overflow: hidden;
  padding: 28px 26px; color: var(--paper);
  text-decoration: none;
  display:flex; flex-direction:column; justify-content: space-between;
  min-height: 200px;
  border: 1px solid rgba(255,255,255,.08);
  transition: transform .4s, box-shadow .4s;
}
.ins-newsletter:hover{
  transform: translateY(-6px);
  box-shadow:
    0 24px 48px -16px rgba(46,58,89,.35),
    0 8px 20px -8px rgba(0,0,0,.18);
}
.ins-news-pattern{
  position:absolute; inset:0;
  background:
    radial-gradient(circle at 80% 30%, rgba(214,140,69,.22), transparent 50%),
    repeating-linear-gradient(45deg,
      rgba(255,255,255,.025) 0 2px,
      transparent 2px 14px);
  pointer-events: none;
}
.ins-news-content{
  position:relative; z-index:1;
  display:flex; flex-direction:column; gap: 12px; height:100%;
}
.ins-news-eyebrow{
  font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--gold);
}
.ins-news-title{
  font-family: var(--serif); font-weight: 400;
  font-size: 22px; line-height: 1.1; letter-spacing: -0.01em;
  color: var(--paper);
}
.ins-news-title em{ font-style: italic; color: var(--gold); }
.ins-news-desc{
  font-size: 13px; line-height: 1.55; color: rgba(255,255,255,.65);
  flex: 1;
}
.ins-news-cta{
  display:flex; align-items:center; justify-content:space-between;
  padding-top: 14px;
  border-top: 1px dashed rgba(255,255,255,.18);
}
.ins-news-stamp{
  display:inline-flex; align-items:center;
  background: var(--gold); color: var(--ink);
  padding: 8px 14px; border-radius: 6px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  font-weight: 700;
  transform: rotate(-2deg);
  box-shadow: 2px 2px 0 var(--ink);
  transition: transform .3s;
}
.ins-newsletter:hover .ins-news-stamp{
  transform: rotate(0deg) translateX(2px);
}
.ins-news-count{
  font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(255,255,255,.55);
}

/* Footer */
.ins-foot{
  display:flex; align-items:center; justify-content:space-between; gap: 24px;
  margin-top: 56px; padding-top: 32px;
  border-top: 1px solid var(--line);
}
.ins-all{
  display:inline-flex; align-items:center; gap: 14px;
  font-family: var(--serif); font-size: 28px; font-style: italic;
  color: var(--ink); text-decoration: none;
  transition: gap .3s;
}
.ins-all:hover{ gap: 22px; }
.ins-all-arrow{
  display:inline-flex; align-items:center; justify-content:center;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--ink); color: var(--paper);
  font-size: 18px; font-style: normal;
}
.ins-foot-meta{
  font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-soft);
}
@media (max-width: 700px){
  .ins-foot{ flex-direction: column; align-items:flex-start; gap: 16px; }
}

/* ===== FAQ ===== */
.faq{ background: var(--bg); position: relative; overflow: hidden; }

.faq-card{
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 32px;
  padding: 28px;
  position: relative;
  overflow: hidden;
  box-shadow:
    0 1px 1px rgba(0,0,0,.04),
    0 6px 12px rgba(0,0,0,.04),
    0 24px 60px rgba(0,0,0,.08);
}
@media (min-width: 640px){ .faq-card{ padding: 40px; } }
@media (min-width: 1024px){ .faq-card{ padding: 56px; } }

/* Subtle adinkra background */
.faq-bg-glyph{
  position: absolute;
  top: -80px; right: -80px;
  width: 360px; height: 360px;
  opacity: .05;
  pointer-events: none;
  z-index: 0;
}
.faq-bg-glyph svg{ width: 100%; height: 100%; }
.faq-veil{
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,0) 60%, transparent 100%);
  pointer-events: none;
  z-index: 0;
}

.faq-grid{
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 48px;
  align-items: start;
  position: relative;
  z-index: 1;
}
@media (max-width: 900px){
  .faq-grid{ grid-template-columns: 1fr; gap: 32px; }
}

/* Intro column */
.faq-intro{ display: flex; flex-direction: column; gap: 16px; }
.faq-eyebrow{
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.faq-eyebrow svg{ width: 14px; height: 14px; color: var(--ocre); }

.faq-title{
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(56px, 8vw, 112px);
  line-height: .9;
  letter-spacing: -.04em;
  color: var(--ink);
  margin: 4px 0 0;
}
.faq-title .dot{ color: var(--ocre); font-style: normal; }

.faq-sub{
  font-family: var(--serif);
  font-size: clamp(15px, 1.3vw, 18px);
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 380px;
  margin: 4px 0 0;
}

.faq-cta{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(26,20,16,.05);
  border: 1px solid var(--line);
  color: var(--ink);
  padding: 9px 14px 9px 16px;
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -.005em;
  text-decoration: none;
  margin-top: 12px;
  align-self: flex-start;
  transition: background .25s var(--ease-out), border-color .25s var(--ease-out), color .25s var(--ease-out);
}
.faq-cta svg{ width: 14px; height: 14px; transition: transform .25s var(--ease-out); }
.faq-cta:hover{
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.faq-cta:hover svg{ transform: rotate(-12deg); }

/* Accordion list */
.faq-list{ display: flex; flex-direction: column; gap: 10px; }

.faq-item{
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 16px;
  transition: border-color .3s var(--ease-out), background .3s var(--ease-out), box-shadow .3s var(--ease-out);
  overflow: hidden;
}
.faq-item:hover{ border-color: rgba(194,84,29,.25); }
.faq-item[data-open="true"]{
  border-color: rgba(194,84,29,.40);
  background: var(--bg);
  box-shadow: 0 4px 16px rgba(194,84,29,.08);
}

.faq-q{
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  text-align: left;
  background: transparent;
  border: 0;
  cursor: pointer;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(15px, 1.4vw, 19px);
  line-height: 1.3;
  color: var(--ink);
  letter-spacing: -.01em;
}
.faq-q:hover{ color: var(--ocre); }

.faq-icon{
  width: 30px; height: 30px;
  border-radius: 50%;
  background: rgba(26,20,16,.05);
  border: 1px solid var(--line);
  color: var(--ink-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition:
    background .3s var(--ease-out),
    color .3s var(--ease-out),
    border-color .3s var(--ease-out),
    transform .35s var(--ease-out);
}
.faq-icon svg{
  width: 14px; height: 14px;
  transition: transform .35s var(--ease-out);
}
.faq-item[data-open="true"] .faq-icon{
  background: var(--ocre);
  color: var(--paper);
  border-color: var(--ocre);
}
.faq-item[data-open="true"] .faq-icon svg{
  transform: rotate(45deg); /* + becomes × */
}

/* Answer panel — animated grid trick */
.faq-answer{
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .4s var(--ease-out);
}
.faq-item[data-open="true"] .faq-answer{
  grid-template-rows: 1fr;
}
.faq-answer > div{
  overflow: hidden;
}
.faq-answer p{
  padding: 0 20px 20px;
  margin: 0;
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 620px;
}
.faq-answer p strong{ color: var(--ink); font-weight: 500; }

/* ===== Contact ===== */
.contact{
  background: var(--ink); color: var(--paper);
  position: relative; overflow: hidden;
  padding: 140px 0 0;
}
.contact-pattern{ position: absolute; inset: 0; opacity: .12; pointer-events: none; }
.contact .wrap{ position: relative; z-index: 1; }

/* Outer card wrapper */
.contact-card{
  background: rgba(250,246,236,.04);
  border: 1px solid rgba(250,246,236,.12);
  border-radius: 28px;
  padding: 24px;
  position: relative;
  overflow: hidden;
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  margin-bottom: 100px;
}
@media (min-width: 768px){ .contact-card{ padding: 40px; } }
@media (min-width: 1024px){ .contact-card{ padding: 56px; } }

/* Subtle ocre halo top-right */
.contact-card::before{
  content: "";
  position: absolute;
  top: -150px; right: -150px;
  width: 460px; height: 460px;
  background: radial-gradient(circle, rgba(214,166,53,.18) 0%, rgba(214,166,53,0) 60%);
  pointer-events: none;
  z-index: 0;
}
/* Indigo halo bottom-left */
.contact-card::after{
  content: "";
  position: absolute;
  bottom: -180px; left: -120px;
  width: 420px; height: 420px;
  background: radial-gradient(circle, rgba(29,40,86,.30) 0%, rgba(29,40,86,0) 60%);
  pointer-events: none;
  z-index: 0;
}
.contact-card > *{ position: relative; z-index: 1; }

.contact-grid{
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 48px;
  align-items: start;
}
@media (max-width: 900px){
  .contact-grid{ grid-template-columns: 1fr; gap: 40px; }
}

/* === Form card === */
.contact-form-card{
  background: var(--paper);
  border: 1px solid rgba(26,20,16,.10);
  border-radius: 22px;
  padding: 24px;
  box-shadow:
    0 1px 1px rgba(0,0,0,.04),
    0 6px 16px rgba(0,0,0,.08),
    0 30px 60px rgba(0,0,0,.18);
  color: var(--ink);
}
@media (min-width: 768px){ .contact-form-card{ padding: 28px; } }

.cf-head{
  display: flex; justify-content: space-between; align-items: flex-start;
  margin-bottom: 22px;
}
.cf-eyebrow{
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0;
}
.cf-title{
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(26px, 2.6vw, 34px);
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--ink);
  margin: 6px 0 0;
}
.cf-icon{
  width: 38px; height: 38px;
  border-radius: 10px;
  background: var(--ink);
  color: var(--paper);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.cf-icon svg{ width: 17px; height: 17px; }

/* Form */
.cf-form{ display: flex; flex-direction: column; gap: 14px; }
.cf-field{ display: flex; flex-direction: column; gap: 6px; }
.cf-field label{
  font-family: var(--sans);
  font-size: 12px;
  color: var(--ink-soft);
  letter-spacing: -.005em;
}
.cf-field .cf-req{ color: var(--ocre); margin-left: 2px; }
.cf-field .cf-opt{ color: var(--ink-soft); opacity: .6; font-style: italic; }

.cf-form input[type="text"],
.cf-form input[type="email"],
.cf-form textarea{
  width: 100%;
  font-family: var(--sans);
  font-size: 14px;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid rgba(26,20,16,.12);
  border-radius: 10px;
  padding: 11px 14px;
  outline: none;
  transition: border-color .25s var(--ease-out), background .25s var(--ease-out), box-shadow .25s var(--ease-out);
}
.cf-form input::placeholder,
.cf-form textarea::placeholder{
  color: rgba(26,20,16,.35);
  font-family: var(--sans);
}
.cf-form input:focus,
.cf-form textarea:focus{
  border-color: var(--ocre);
  background: var(--paper);
  box-shadow: 0 0 0 3px rgba(194,84,29,.12);
}
.cf-form textarea{
  resize: vertical;
  min-height: 88px;
  line-height: 1.5;
}

/* Input with leading icon */
.cf-input-icon{ position: relative; }
.cf-input-icon svg{
  position: absolute;
  left: 14px; top: 50%;
  transform: translateY(-50%);
  width: 15px; height: 15px;
  color: var(--ink-soft);
  pointer-events: none;
}
.cf-input-icon input{ padding-left: 40px; }

/* Budget chips (radio styled) */
.budget-chips{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.budget-chip{
  position: relative;
  cursor: pointer;
  user-select: none;
}
.budget-chip input{
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.budget-chip span{
  display: block;
  text-align: center;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .06em;
  font-weight: 500;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid rgba(26,20,16,.12);
  border-radius: 999px;
  padding: 10px 14px;
  transition: all .2s var(--ease-out);
}
.budget-chip:hover span{
  border-color: var(--ocre);
  background: var(--paper);
}
.budget-chip:has(input:checked) span{
  background: var(--ocre);
  color: var(--paper);
  border-color: var(--ocre);
  box-shadow: 0 4px 12px rgba(194,84,29,.25);
}
.budget-chip input:focus-visible + span{
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

/* Submit button */
.cf-submit{
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -.005em;
  border: 0;
  border-radius: 12px;
  padding: 14px 20px;
  margin-top: 4px;
  cursor: pointer;
  transition: background .25s var(--ease-out), color .25s var(--ease-out), transform .15s var(--ease-out);
  box-shadow: 0 4px 12px rgba(26,20,16,.15);
}
.cf-submit svg{ width: 15px; height: 15px; transition: transform .25s var(--ease-out); }
.cf-submit:hover{ background: var(--ocre); }
.cf-submit:hover svg{ transform: translateX(3px); }
.cf-submit:active{ transform: translateY(1px); }

.cf-note{
  display: flex; align-items: center; gap: 6px;
  font-family: var(--sans);
  font-size: 11px;
  color: var(--ink-soft);
  margin: 4px 0 0;
}
.cf-note svg{ width: 12px; height: 12px; flex-shrink: 0; opacity: .7; }

/* === Right copy column === */
.contact-copy{
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.contact-eyebrow{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(250,246,236,.75);
}
.contact-eyebrow .dot-pulse{
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 0 rgba(214,166,53,.7);
  animation: dotpulse 2s infinite;
}
.contact-h2{
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(36px, 5.6vw, 80px);
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--paper);
  margin: 0;
}
.contact-h2 .it{ color: var(--gold); font-style: italic; }
.contact-h2 .muted-line{
  display: inline-block;
  color: rgba(250,246,236,.5);
  font-size: .82em;
  margin-top: 4px;
  font-style: italic;
}
.contact-lede{
  font-family: var(--serif);
  font-size: clamp(15px, 1.3vw, 18px);
  line-height: 1.5;
  color: rgba(250,246,236,.75);
  max-width: 520px;
  margin: 0;
}

/* Highlights */
.contact-highlights{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width: 640px){
  .contact-highlights{ grid-template-columns: 1fr; }
}
.highlight-card{
  display: flex; align-items: flex-start; gap: 12px;
  padding: 16px;
  background: rgba(250,246,236,.04);
  border: 1px solid rgba(250,246,236,.10);
  border-radius: 14px;
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  transition: border-color .3s var(--ease-out), background .3s var(--ease-out);
}
.highlight-card:hover{
  border-color: rgba(214,166,53,.30);
  background: rgba(250,246,236,.06);
}
.hl-icon{
  flex-shrink: 0;
  width: 36px; height: 36px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(214,166,53,.20), rgba(194,84,29,.10));
  border: 1px solid rgba(214,166,53,.30);
  display: flex; align-items: center; justify-content: center;
  color: var(--gold);
}
.hl-icon svg{ width: 16px; height: 16px; }
.hl-title{
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--paper);
  margin: 0;
  letter-spacing: -.005em;
}
.hl-desc{
  font-family: var(--sans);
  font-size: 12px;
  line-height: 1.45;
  color: rgba(250,246,236,.55);
  margin: 4px 0 0;
}

/* Direct contact mini-card */
.direct-contact{
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 8px 8px 8px 12px;
  background: var(--paper);
  border: 1px solid rgba(255,255,255,.20);
  border-radius: 16px;
  box-shadow:
    0 4px 12px rgba(0,0,0,.10),
    0 24px 60px rgba(0,0,0,.18);
  align-self: flex-start;
  margin-top: 4px;
}
.dc-avatar{
  width: 44px; height: 44px;
  border-radius: 10px;
  border: 1px solid rgba(26,20,16,.12);
  background: var(--ocre);
  flex-shrink: 0;
  overflow: hidden;
}
.dc-avatar svg{ width: 100%; height: 100%; display: block; }
.dc-info{ min-width: 0; padding-right: 4px; }
.dc-role{
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0;
  line-height: 1;
}
.dc-name{
  font-family: var(--serif);
  font-style: italic;
  font-size: 16px;
  letter-spacing: -.01em;
  color: var(--ink);
  margin: 4px 0 0;
  line-height: 1;
}
.dc-cta{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--ink);
  color: var(--paper);
  padding: 9px 13px;
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: -.005em;
  text-decoration: none;
  white-space: nowrap;
  transition: background .25s var(--ease-out);
}
.dc-cta svg{ width: 12px; height: 12px; transition: transform .25s var(--ease-out); }
.dc-cta:hover{ background: var(--ocre); }
.dc-cta:hover svg{ transform: translateX(2px); }

/* ===== Footer (essentialist) ===== */
.foot{
  background: var(--ink); color: var(--paper);
  border-top: 1px solid rgba(250,246,236,.15);
  padding: 0;
  position: relative; z-index: 1;
  overflow: hidden;
  min-height: 85vh;
  display: flex;
  flex-direction: column;
}

.foot-inner{
  flex: 1;
  display: flex;
  flex-direction: column;
  position: relative;
  padding: 80px 32px 0;
  max-width: 1400px;
  width: 100%;
  margin: 0 auto;
}
@media (min-width: 768px){ .foot-inner{ padding: 96px 48px 0; } }

/* Top row: Get-in-touch + meta links */
.foot-top{
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding-bottom: 48px;
  border-bottom: 1px solid rgba(250,246,236,.06);
  margin-bottom: 64px;
}
@media (min-width: 768px){
  .foot-top{ flex-direction: row; justify-content: space-between; align-items: flex-start; gap: 48px; }
}

.foot-tag{
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  text-decoration: none;
  transition: transform .35s var(--ease-out), opacity .35s;
}
.foot-tag:hover{ transform: translateY(-2px); opacity: .92; }
.foot-tag-logo{
  display: block;
  height: 36px;
  width: auto;
  filter: drop-shadow(0 4px 12px rgba(214,166,53,.18));
}

.foot-meta{
  display: flex; flex-wrap: wrap;
  align-items: center;
  gap: 24px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
}
@media (min-width: 768px){ .foot-meta{ gap: 40px; } }
.foot-meta a{
  color: rgba(250,246,236,.45);
  transition: color .25s var(--ease-out);
  text-decoration: none;
}
.foot-meta a:hover{ color: var(--paper); }
.foot-copyright{ color: rgba(250,246,236,.30); }

/* Middle: Mega contact lines */
.foot-mega{
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: auto;
}

.foot-mega-line{
  position: relative;
  display: inline-flex;
  align-items: flex-start;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(40px, 8vw, 130px);
  line-height: 1;
  letter-spacing: -.035em;
  color: var(--paper);
  text-decoration: none;
  width: fit-content;
  padding: 6px 0;
}
.foot-mega-line .mega-text{
  background: linear-gradient(to right, var(--paper), var(--paper));
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: var(--paper);
  transition: background-image .5s var(--ease-out);
}
.foot-mega-line:hover .mega-text{
  background-image: linear-gradient(to right, var(--paper), rgba(250,246,236,.35));
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.mega-badge{
  position: absolute;
  right: -34px; top: 16px;
  width: 22px; height: 22px;
  background: var(--gold);
  color: var(--ink);
  border-radius: 5px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  display: flex; align-items: center; justify-content: center;
  opacity: 0;
  transform: translateX(8px);
  transition: opacity .5s var(--ease-out), transform .5s var(--ease-out);
  box-shadow: 0 0 16px rgba(214,166,53,.6);
}
.foot-mega-line:hover .mega-badge{
  opacity: 1;
  transform: translateX(0);
}

/* Social icons */
.foot-socials{
  display: flex;
  align-items: center;
  gap: 32px;
  margin-top: 56px;
  padding-left: 4px;
}
.foot-socials a{
  color: rgba(250,246,236,.30);
  transition: color .3s var(--ease-out), transform .3s var(--ease-out);
  display: inline-flex;
  text-decoration: none;
}
.foot-socials a:hover{
  color: var(--paper);
  transform: scale(1.15);
}
.foot-socials svg{
  width: 22px; height: 22px;
  fill: currentColor;
}

/* Giant brand text bottom */
.foot-brand-giant{
  position: relative;
  width: 100%;
  margin-top: 64px;
  overflow: hidden;
  user-select: none;
}
.foot-brand-text{
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(110px, 17vw, 320px);
  line-height: .75;
  letter-spacing: -.04em;
  color: var(--paper);
  mix-blend-mode: overlay;
  opacity: .9;
  margin: 0;
  text-align: left;
  pointer-events: none;
  white-space: nowrap;
}
.foot-brand-text sup{
  font-family: var(--mono);
  font-style: normal;
  font-size: .14em;
  letter-spacing: .12em;
  vertical-align: super;
  margin-left: .04em;
  color: var(--gold);
  font-weight: 500;
  mix-blend-mode: normal;
  opacity: .85;
}
.foot-brand-fade{
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 110px;
  background: linear-gradient(to top, var(--ink), transparent);
  pointer-events: none;
}
@media (max-width: 768px){
  .foot-brand-text{ text-align: center; }
}

.bigword{
  font-family: var(--serif);
  font-size: clamp(120px, 24vw, 380px);
  line-height: .85;
  text-align: center;
  white-space: nowrap;
  color: var(--paper);
  opacity: 1;
  letter-spacing: -.04em;
  padding: 60px 0 40px;
  position: relative;
  overflow: hidden;
}
.bigword .it{ font-style: italic; color: var(--ocre); }

/* ===== Reveal animation utilities ===== */
.r-fade{ opacity: 0; transform: translateY(28px); transition: opacity 1s var(--ease-out), transform 1s var(--ease-out); }
.r-fade.in{ opacity: 1; transform: translateY(0); }
.r-fade.d-1{ transition-delay: .08s; }
.r-fade.d-2{ transition-delay: .16s; }
.r-fade.d-3{ transition-delay: .24s; }
.r-fade.d-4{ transition-delay: .32s; }

.r-line{ position: relative; }
.r-line::before{
  content:""; position:absolute; left:0; right:0; top:0; height:1px; background: var(--line-strong);
  transform: scaleX(0); transform-origin: left; transition: transform 1.2s var(--ease-out);
}
.r-line.in::before{ transform: scaleX(1); }

.r-mask span{ display:inline-block; transform: translateY(110%); transition: transform 1s var(--ease-out); }
.r-mask.in span{ transform: translateY(0); }

/* counter num */
.count[data-target]{ font-variant-numeric: tabular-nums; }

/* ===== Hero dark (Spline cosmic variant) ===== */
.hero-dark{
  background: var(--ink);
  color: var(--paper);
}
.hero-dark .hero-meta .label,
.hero-dark .hero-meta .eyebrow,
.hero-dark .hero-stat .lbl{
  color: rgba(250,246,236,.7);
}
.hero-dark .eyebrow::before{ background: rgba(250,246,236,.5); }
.hero-dark .hero-headline,
.hero-dark .hero-stat .num,
.hero-dark .hero-lede{ color: var(--paper); }
.hero-dark .hero-foot{ border-top-color: rgba(250,246,236,.18); }
.hero-dark .hero-headline .it{ color: var(--ocre-2); }
.hero-dark .hero-headline .underline::after{ background: var(--ocre); }
.hero-dark .hero-scroll{ color: rgba(250,246,236,.7); }
.hero-dark .hero-scroll .line{ background: rgba(250,246,236,.3); }
.hero-dark .hero-scroll .line::after{ background: var(--ocre-2); }
.hero-dark .hero-grain{
  opacity: .18;
  mix-blend-mode: overlay;
}

/* Spline 3D background — clipped exactly to .hero box */
.spline-bg{
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.spline-bg iframe{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  filter: saturate(1.1) brightness(.95);
}

/* Veil — gradient on top of Spline for text contrast */
.hero-veil{
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg,
      rgba(26,20,16,.55) 0%,
      rgba(26,20,16,.05) 22%,
      rgba(26,20,16,0) 50%,
      rgba(26,20,16,.4) 80%,
      rgba(26,20,16,.92) 100%),
    radial-gradient(ellipse at 70% 35%, rgba(194,84,29,.18) 0%, rgba(194,84,29,0) 55%),
    radial-gradient(ellipse at 20% 80%, rgba(29,40,86,.25) 0%, rgba(29,40,86,0) 60%);
}

/* Hero stacking — adinkra accents above veil, content above all */
.hero-dark .hero-bg{ z-index: 2; opacity: .9; }
.hero-dark .hero-grain{ z-index: 2; }
.hero-dark .hero-inner{ z-index: 3; position: relative; }
.hero-dark .hero-scroll{ z-index: 4; }

/* ===== Nav past hero — flip glass tint to dark on light sections ===== */
.nav.past-hero{
  background: linear-gradient(135deg, rgba(26,20,16,.07), rgba(26,20,16,0));
  border-color: rgba(26,20,16,.10);
  color: var(--ink);
  box-shadow:
    0 2.8px  2.2px rgba(0,0,0,.020),
    0 6.7px  5.3px rgba(0,0,0,.028),
    0 12.5px 10px  rgba(0,0,0,.038),
    0 22.3px 17.9px rgba(0,0,0,.048),
    0 41.8px 33.4px rgba(0,0,0,.060),
    0 100px  80px  rgba(0,0,0,.080);
}
.nav.past-hero:hover{
  border-color: rgba(26,20,16,.20);
  box-shadow:
    0 2.8px  2.2px rgba(0,0,0,.020),
    0 6.7px  5.3px rgba(0,0,0,.028),
    0 12.5px 10px  rgba(194,84,29,.10),
    0 22.3px 17.9px rgba(194,84,29,.06),
    0 41.8px 33.4px rgba(0,0,0,.060),
    0 100px  80px  rgba(0,0,0,.080);
}
.nav.past-hero .brand{ color: var(--ink); }
.nav.past-hero .nav-links a{ color: rgba(26,20,16,.55); }
.nav.past-hero .nav-links a:hover{ color: var(--ink); }
.nav.past-hero .nav-cta{ background: var(--ink); color: var(--paper); }
.nav.past-hero .nav-cta:hover{ background: var(--ocre); color: var(--paper); }

/* ===== Bogolan band divider ===== */
.bogolan-divider{
  width: 100%;
  height: 88px;
  background: var(--bg-2);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
  position: relative;
}
.bogolan-divider svg{ width: 100%; height: 100%; display: block; }

/* On dark adjacent contexts, divider can flip */
.bogolan-divider.on-dark{
  background: var(--ink);
  border-color: rgba(250,246,236,.15);
}

/* ============================================================
   Pages Blog & Article
   ------------------------------------------------------------
   Reuse-first. Everything below extends existing tokens.
   Mobile-first (360px → 1920px). 60fps scroll.
   ============================================================ */

/* ---- Visually hidden (accessible labels) ---- */
.visually-hidden{
  position: absolute !important;
  width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ---- Page-light body (no hero — nav must already be on light bg) ---- */
.page-light{
  background: var(--bg);
}
.page-light .page-main{
  padding-top: 96px; /* room for floating pill nav */
}
@media (min-width: 768px){
  .page-light .page-main{ padding-top: 120px; }
}

/* Active nav item (current page) */
.nav-links a.is-active,
.nav-links a[aria-current="page"]{
  color: var(--paper);
  position: relative;
}
.nav-links a.is-active::after,
.nav-links a[aria-current="page"]::after{
  content: "";
  position: absolute;
  left: 50%; bottom: -6px;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--gold);
  transform: translateX(-50%);
  box-shadow: 0 0 8px rgba(214,166,53,.6);
}
.nav.past-hero .nav-links a.is-active,
.nav.past-hero .nav-links a[aria-current="page"]{ color: var(--ink); }
.nav.past-hero .nav-links a.is-active::after,
.nav.past-hero .nav-links a[aria-current="page"]::after{
  background: var(--ocre);
  box-shadow: 0 0 8px rgba(194,84,29,.4);
}

/* ============================================================
   BLOG PAGE — header + list + newsletter (full)
   ============================================================ */

/* ---- Blog header ---- */
.blog-header{
  position: relative;
  background: var(--bg);
  padding: 32px 0 64px;
  overflow: hidden;
}
.blog-header::before{
  content:""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(900px 500px at 88% 8%, rgba(194,84,29,.08), transparent 60%),
    radial-gradient(700px 500px at 4% 88%, rgba(29,40,86,.06), transparent 65%);
}
.blog-header .wrap{ position: relative; z-index: 1; }
@media (min-width: 768px){
  .blog-header{ padding: 56px 0 96px; }
}

.bh-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: end;
}
@media (min-width: 980px){
  .bh-grid{
    grid-template-columns: 1.15fr 1fr;
    gap: 64px;
    padding-bottom: 56px;
    border-bottom: 1px solid var(--line);
  }
}

.bh-left{ display: flex; flex-direction: column; gap: 22px; }

.bh-title{
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(46px, 8vw, 112px);
  line-height: .94;
  letter-spacing: -.025em;
  color: var(--ink);
  margin: 0;
}
.bh-title em{
  font-style: italic;
  color: var(--ocre);
}

.bh-right{
  display: flex;
  flex-direction: column;
  gap: 24px;
  justify-content: flex-end;
}
.bh-sub{
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 520px;
}
@media (min-width: 768px){ .bh-sub{ font-size: 18px; } }

.bh-meta{
  display: flex; align-items: center;
  font-family: var(--mono);
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-soft);
}
.bh-count{ display: inline-flex; align-items: center; gap: 8px; }

.bh-filters{
  margin-top: 4px;
}

/* ---- Blog list (Featured + grid) ---- */
.blog-list{
  background: var(--paper);
  position: relative;
  overflow: hidden;
  padding: 80px 0;
}
.blog-list::before{
  content:""; position:absolute; inset:0; pointer-events: none;
  background:
    radial-gradient(800px 400px at 90% 12%, rgba(214,140,69,.05), transparent 60%);
}
.blog-list .wrap{ position: relative; z-index: 1; }
@media (min-width: 768px){ .blog-list{ padding: 110px 0; } }

/* Section head between featured and grid */
.bl-section-head{
  display: flex;
  align-items: center;
  gap: 20px;
  margin: 64px 0 32px;
}
.bl-section-line{
  flex: 1; height: 1px; background: var(--line);
}
@media (min-width: 768px){
  .bl-section-head{ margin: 88px 0 40px; }
}

/* Grid override (we use ins-grid but want consistent 6-card flow) */
.bl-grid{
  /* Same as ins-grid but force pure 3 cols above 1100px (no newsletter mixed in) */
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 1100px){ .bl-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px){  .bl-grid{ grid-template-columns: 1fr; } }

/* Empty state */
.bl-empty{
  margin-top: 56px;
  padding: 56px 32px;
  border: 1px dashed var(--line-strong);
  border-radius: 20px;
  text-align: center;
  color: var(--ink-soft);
}
.bl-empty p{ margin-top: 14px; font-size: 16px; }

/* ============================================================
   BLOG NEWSLETTER — full-width version
   ============================================================ */
.blog-newsletter-section{
  background: var(--bg);
  padding: 96px 0 120px;
}
@media (max-width: 768px){ .blog-newsletter-section{ padding: 64px 0 80px; } }

.bl-newsletter{
  position: relative;
  background: var(--ink);
  color: var(--paper);
  border-radius: 28px;
  overflow: hidden;
  padding: 56px 40px;
  border: 1px solid rgba(255,255,255,.06);
  box-shadow:
    0 30px 80px -20px rgba(46,58,89,.45),
    0 12px 36px -10px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.06);
}
@media (min-width: 768px){ .bl-newsletter{ padding: 80px 64px; } }
@media (min-width: 1100px){ .bl-newsletter{ padding: 96px 80px; } }

.bl-news-pattern{
  position: absolute; inset: 0;
  background:
    radial-gradient(700px 420px at 92% 18%, rgba(214,166,53,.18), transparent 55%),
    radial-gradient(500px 320px at 8% 92%, rgba(194,84,29,.14), transparent 60%),
    repeating-linear-gradient(45deg,
      rgba(255,255,255,.02) 0 2px,
      transparent 2px 14px);
  pointer-events: none;
}

.bl-news-grid{
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  align-items: stretch;
}
@media (min-width: 980px){
  .bl-news-grid{
    grid-template-columns: 1.15fr 1fr;
    gap: 80px;
    align-items: center;
  }
}

.bl-news-copy{
  display: flex; flex-direction: column; gap: 22px;
}
.bl-news-title{
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(34px, 5vw, 64px);
  line-height: 1.02;
  letter-spacing: -.02em;
  color: var(--paper);
  margin: 0;
}
.bl-news-title em{ font-style: italic; color: var(--gold); }
.bl-news-desc{
  font-size: 16px; line-height: 1.65;
  color: rgba(255,255,255,.72);
  max-width: 540px;
}

.bl-news-perks{
  display: flex; flex-direction: column;
  gap: 12px;
  margin-top: 8px;
  padding-top: 24px;
  border-top: 1px dashed rgba(255,255,255,.18);
}
.bl-news-perk{
  display: flex; align-items: center; gap: 16px;
  font-size: 14px;
  color: rgba(255,255,255,.82);
}
.bl-news-perk-num{
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .14em;
  color: var(--gold);
  background: rgba(214,166,53,.12);
  border: 1px solid rgba(214,166,53,.32);
  border-radius: 999px;
  padding: 4px 9px;
  flex-shrink: 0;
}

.bl-news-cta{
  display: flex; flex-direction: column;
  gap: 28px;
}

.bl-news-form{
  display: flex; flex-direction: column;
  gap: 12px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 18px;
  padding: 14px;
  backdrop-filter: blur(8px);
  transition: border-color .3s var(--ease-out), background .3s var(--ease-out);
}
.bl-news-form:focus-within{
  border-color: rgba(214,166,53,.50);
  background: rgba(255,255,255,.06);
  box-shadow: 0 0 0 4px rgba(214,166,53,.10);
}
@media (min-width: 540px){
  .bl-news-form{ flex-direction: row; align-items: stretch; padding: 8px 8px 8px 18px; gap: 8px; }
}

.bl-news-form input{
  flex: 1;
  background: transparent;
  border: 0;
  color: var(--paper);
  font-family: var(--sans);
  font-size: 15px;
  padding: 14px 4px;
  outline: none;
  min-width: 0;
}
.bl-news-form input::placeholder{ color: rgba(255,255,255,.40); }

.bl-news-submit{
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px;
  background: var(--gold);
  color: var(--ink);
  border: 0; cursor: pointer;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  padding: 14px 22px;
  border-radius: 12px;
  white-space: nowrap;
  transition: background .25s var(--ease-out), transform .25s var(--ease-out);
}
.bl-news-submit svg{ width: 14px; height: 14px; transition: transform .25s var(--ease-out); }
.bl-news-submit:hover{ background: var(--ocre-2); }
.bl-news-submit:hover svg{ transform: translateX(3px); }

.bl-news-foot{
  display: flex; flex-direction: column; gap: 18px;
  padding-top: 18px;
  border-top: 1px dashed rgba(255,255,255,.18);
}
@media (min-width: 540px){
  .bl-news-foot{ flex-direction: row; align-items: center; justify-content: space-between; }
}
.bl-news-stamp{
  /* Inherits ins-news-stamp (gold sticker) */
  align-self: flex-start;
}
.bl-news-foot-meta{
  display: flex; flex-direction: column; gap: 6px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.55);
  text-align: left;
}
@media (min-width: 540px){ .bl-news-foot-meta{ text-align: right; align-items: flex-end; } }
.bl-news-counter{ display: inline-flex; align-items: center; gap: 8px; color: rgba(255,255,255,.72); }
.bl-news-counter .dot{
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 10px rgba(214,166,53,.6);
  animation: dotpulse 2s ease infinite;
}
.bl-news-cadence{ color: rgba(255,255,255,.4); }

/* ============================================================
   ARTICLE PAGE
   ============================================================ */

/* Top reading progress bar (full width, sticky to top) */
.art-progress-top{
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 3px;
  z-index: 99;
  background: rgba(26,20,16,.06);
  pointer-events: none;
}
.art-progress-top span{
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--gold) 0%, var(--ocre) 50%, var(--bogolan) 100%);
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform .15s linear;
  box-shadow: 0 0 12px rgba(214,166,53,.45);
}

/* ---- Article hero ---- */
.article-hero{
  background: var(--bg);
  position: relative;
  padding: 24px 0 56px;
  overflow: hidden;
}
.article-hero::before{
  content:""; position:absolute; inset:0; pointer-events: none;
  background:
    radial-gradient(900px 500px at 88% 6%, rgba(194,84,29,.08), transparent 60%),
    radial-gradient(700px 600px at 4% 92%, rgba(29,40,86,.07), transparent 65%);
}
.article-hero .wrap{ position: relative; z-index: 1; }
@media (min-width: 768px){ .article-hero{ padding: 40px 0 80px; } }

/* Breadcrumb */
.art-breadcrumb{
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 10px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 36px;
}
.art-breadcrumb a{
  color: var(--ink-soft);
  transition: color .25s var(--ease-out);
}
.art-breadcrumb a:hover{ color: var(--ink); }
.art-breadcrumb-sep{ opacity: .35; }
.art-breadcrumb-current{ color: var(--ink); }

/* Top meta line */
.art-top-meta{
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 12px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 28px;
}
.art-meta-dot{ opacity: .35; }
.art-meta-item{ color: var(--ink-soft); }

/* Title */
.art-title{
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(40px, 6.4vw, 96px);
  line-height: .98;
  letter-spacing: -.025em;
  color: var(--ink);
  margin: 0 0 28px;
  max-width: 1100px;
}
.art-title em{
  font-style: italic;
  color: var(--ocre);
}

/* Lead */
.art-lead{
  font-family: var(--sans);
  font-size: clamp(17px, 1.6vw, 21px);
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 760px;
  margin: 0 0 40px;
  font-weight: 400;
}

/* Author strip */
.art-author-strip{
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap;
  gap: 24px;
  padding: 20px 0 32px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin-bottom: 40px;
}
.art-author-block{
  display: flex; align-items: center; gap: 14px;
}
.art-author-av{
  width: 48px; height: 48px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid var(--line);
  flex-shrink: 0;
}
.art-author-av svg{ width: 100%; height: 100%; display: block; }
.art-author-info{
  display: flex; flex-direction: column; gap: 2px;
}
.art-author-info strong{
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}
.art-author-info span{
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.art-author-actions{
  display: flex; align-items: center; gap: 16px;
}
.art-author-loc{
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.art-author-loc .dot{
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--ocre);
  box-shadow: 0 0 0 4px rgba(194,84,29,.18);
  animation: dotpulse 2s ease infinite;
}

/* Cover (full width, ~480px tall, bogolan red w/ adinkra overlay + stamp) */
.art-cover{
  position: relative;
  width: 100%;
  height: clamp(280px, 50vw, 480px);
  border-radius: 24px;
  overflow: hidden;
  margin: 0;
  box-shadow:
    0 30px 70px -20px rgba(107,31,18,.40),
    0 12px 32px -10px rgba(0,0,0,.20),
    inset 0 1px 0 rgba(255,255,255,.08);
}
.art-cover-bg{
  position: absolute; inset: 0;
}
/* Reuse same data-cover gradients defined earlier on .ins-cover-bg */
.art-cover-bg[data-cover="featured"]{
  background:
    radial-gradient(circle at 30% 30%, rgba(214,140,69,.40), transparent 55%),
    linear-gradient(135deg, var(--bogolan) 0%, #6e1f15 60%, #4a1410 100%);
}
.art-cover .ins-cover-tape{
  position: absolute; top: 0; left: 0; right: 0; height: 14px;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px;
  background: rgba(0,0,0,.4); padding: 2px;
}
.art-cover .ins-cover-tape span{
  background: repeating-linear-gradient(45deg,
    rgba(255,255,255,.18) 0 4px,
    transparent 4px 8px);
}
.art-cover-glyph{
  position: absolute;
  inset: 0;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
}
.art-cover-glyph svg{
  width: clamp(180px, 28vw, 320px);
  height: clamp(180px, 28vw, 320px);
  opacity: .35;
  animation: float-slow 22s ease-in-out infinite;
}
.art-cover-stamp{
  position: absolute;
  bottom: 28px; left: 28px;
  display: grid;
  gap: 2px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .15em; text-transform: uppercase;
  color: rgba(255,255,255,.85);
  background: rgba(0,0,0,.30);
  border: 1px solid rgba(255,255,255,.20);
  border-radius: 12px;
  padding: 14px 18px;
  text-align: left;
  backdrop-filter: blur(6px);
  transform: rotate(-2deg);
  box-shadow: 4px 4px 0 rgba(0,0,0,.18);
}
.art-cover-stamp .s2{
  font-family: var(--serif);
  font-size: 38px;
  font-style: italic;
  letter-spacing: -.01em;
  color: var(--gold);
  line-height: 1;
}
.art-cover-stamp .s1, .art-cover-stamp .s3{ opacity: .9; }

@media (min-width: 768px){
  .art-cover-stamp{ bottom: 36px; left: 36px; padding: 16px 22px; }
  .art-cover-stamp .s2{ font-size: 46px; }
}

.art-cover-tags{
  position: absolute;
  bottom: 28px; right: 28px;
  display: flex; flex-wrap: wrap; gap: 6px;
  max-width: 60%;
  justify-content: flex-end;
}
.art-cover-tags span{
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.85);
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.20);
  padding: 6px 12px;
  border-radius: 999px;
  backdrop-filter: blur(6px);
}
@media (max-width: 600px){
  .art-cover-tags{ display: none; }
}

/* ---- Article body — 2 cols ---- */
.article-body{
  background: var(--paper);
  padding: 80px 0 96px;
  position: relative;
}
@media (min-width: 768px){ .article-body{ padding: 110px 0 130px; } }

.art-shell{
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 56px;
}
@media (min-width: 768px){
  .art-shell{ padding: 0 32px; }
}
@media (min-width: 1100px){
  .art-shell{
    grid-template-columns: 220px 1fr;
    gap: 88px;
  }
}

/* ---- Aside (sticky) ---- */
.art-aside{
  display: flex; flex-direction: column;
  gap: 36px;
  /* On mobile, render but hide non-essential pieces */
}
@media (min-width: 1100px){
  .art-aside{
    position: sticky;
    top: 96px;
    align-self: start;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
    padding-right: 8px;
    /* invisible scrollbar polish */
    scrollbar-width: thin;
    scrollbar-color: var(--line) transparent;
  }
  .art-aside::-webkit-scrollbar{ width: 6px; }
  .art-aside::-webkit-scrollbar-thumb{ background: var(--line); border-radius: 999px; }
}

/* Hide vertical progress + mini-author on mobile to keep aside light */
@media (max-width: 1099px){
  .art-prog-vert{ display: none; }
  .art-mini-author{ display: none; }
}

/* Vertical progress bar */
.art-prog-vert{
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 10px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--line);
}
.art-prog-label{
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.art-prog-track{
  width: 4px;
  height: 80px;
  background: rgba(26,20,16,.10);
  border-radius: 999px;
  overflow: hidden;
}
.art-prog-track span{
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, var(--gold), var(--ocre));
  transform-origin: top center;
  transform: scaleY(0);
  transition: transform .15s linear;
}
.art-prog-pct{
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  color: var(--ink);
}

/* TOC */
.art-toc{ display: flex; flex-direction: column; gap: 12px; }
.art-toc-eyebrow{
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ocre);
}
.art-toc-list{
  list-style: none;
  margin: 0; padding: 0;
  display: flex; flex-direction: column;
  gap: 4px;
  counter-reset: toc;
}
.art-toc-list li{
  counter-increment: toc;
  position: relative;
}
.art-toc-list a{
  display: flex;
  gap: 10px;
  padding: 8px 10px 8px 32px;
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.4;
  color: var(--ink-soft);
  border-radius: 8px;
  border-left: 2px solid transparent;
  margin-left: -12px;
  transition:
    color .25s var(--ease-out),
    background .25s var(--ease-out),
    border-color .25s var(--ease-out);
  position: relative;
}
.art-toc-list a::before{
  content: counter(toc, decimal-leading-zero);
  position: absolute;
  left: 12px; top: 9px;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .08em;
  color: var(--ink-soft);
  opacity: .55;
  transition: color .25s var(--ease-out), opacity .25s var(--ease-out);
}
.art-toc-list a:hover{
  color: var(--ink);
  background: rgba(26,20,16,.04);
}
.art-toc-list a.is-active{
  color: var(--ink);
  background: rgba(214,166,53,.10);
  border-left-color: var(--ocre);
  font-weight: 500;
}
.art-toc-list a.is-active::before{
  color: var(--ocre);
  opacity: 1;
}

/* Share */
.art-share{ display: flex; flex-direction: column; gap: 12px; }
.art-share-label{
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ocre);
}
.art-share-row{
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.art-share-btn{
  width: 38px; height: 38px;
  border-radius: 10px;
  background: var(--paper);
  border: 1px solid var(--line);
  color: var(--ink-soft);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition:
    background .25s var(--ease-out),
    color .25s var(--ease-out),
    border-color .25s var(--ease-out),
    transform .25s var(--ease-out);
}
.art-share-btn:hover{
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
  transform: translateY(-2px);
}
.art-share-btn svg{ width: 16px; height: 16px; }
.art-share-hint{
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ocre);
  opacity: 0;
  transition: opacity .25s var(--ease-out);
  height: 14px; /* reserve space, no jump */
}
.art-share-hint.is-on{ opacity: 1; }

/* Mini author card */
.art-mini-author{
  display: flex; align-items: center; gap: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(26,20,16,.02);
}
.art-mini-author-av{
  width: 44px; height: 44px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid var(--line);
  flex-shrink: 0;
}
.art-mini-author-av svg{ width: 100%; height: 100%; }
.art-mini-author-meta{
  display: flex; flex-direction: column; gap: 2px;
  min-width: 0;
}
.art-mini-author-meta strong{
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}
.art-mini-author-meta span{
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.art-mini-author-link{
  margin-top: 4px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ocre);
  transition: color .25s var(--ease-out);
}
.art-mini-author-link:hover{ color: var(--bogolan); }

/* ---- Article content typography ---- */
.art-content{
  max-width: 720px;
  font-family: var(--sans);
  color: var(--ink-soft);
  font-size: 17px;
  line-height: 1.75;
}
@media (min-width: 768px){
  .art-content{ font-size: 18px; }
}

.art-p{
  margin: 0 0 26px;
  color: var(--ink-soft);
}
.art-p strong{ color: var(--ink); font-weight: 600; }

.art-first{ position: relative; }
.art-dropcap{
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(72px, 9vw, 110px);
  line-height: .85;
  color: var(--ocre);
  float: left;
  padding: 8px 14px 0 0;
  margin-top: -6px;
}

/* H2 — anchor target, with side accent */
.art-h2{
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(28px, 3.4vw, 40px);
  line-height: 1.1;
  letter-spacing: -.015em;
  color: var(--ink);
  margin: 64px 0 22px;
  scroll-margin-top: 110px; /* offset for sticky nav on TOC clicks */
  position: relative;
  padding-left: 22px;
}
.art-h2::before{
  content: "";
  position: absolute;
  left: 0; top: .26em;
  width: 6px; height: .9em;
  background: var(--ocre);
  border-radius: 2px;
}

.art-h3{
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(22px, 2.4vw, 28px);
  line-height: 1.2;
  letter-spacing: -.01em;
  color: var(--ink);
  margin: 40px 0 16px;
}

/* Blockquote */
.art-blockquote{
  margin: 36px 0;
  padding: 6px 0 6px 24px;
  border-left: 4px solid var(--gold);
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(20px, 2.2vw, 26px);
  line-height: 1.4;
  color: var(--ink);
  letter-spacing: -.005em;
}

/* Pull quote (oversized) */
.art-pull-quote{
  margin: 56px auto;
  max-width: 640px;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(28px, 4.4vw, 50px);
  line-height: 1.12;
  letter-spacing: -.015em;
  color: var(--ocre);
  text-align: center;
  position: relative;
  padding: 32px 24px;
}
.art-pull-quote::before,
.art-pull-quote::after{
  position: absolute;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(70px, 10vw, 130px);
  color: var(--gold);
  opacity: .35;
  line-height: 1;
  pointer-events: none;
}
.art-pull-quote::before{
  content: "“";
  top: -10px; left: -8px;
}
.art-pull-quote::after{
  content: "”";
  bottom: -50px; right: -8px;
}

/* Code blocks */
.art-code{
  background: var(--ink);
  color: var(--paper);
  font-family: var(--mono);
  font-size: 13.5px;
  line-height: 1.6;
  border-radius: 12px;
  padding: 22px 24px;
  margin: 28px 0;
  overflow-x: auto;
  border: 1px solid rgba(255,255,255,.06);
  box-shadow:
    0 1px 0 rgba(255,255,255,.04) inset,
    0 18px 40px -16px rgba(26,20,16,.40);
  -webkit-overflow-scrolling: touch;
}
.art-code code{
  font-family: inherit;
  background: transparent;
  padding: 0;
  display: block;
  white-space: pre;
  color: inherit;
}
.art-code .c-key{ color: var(--gold); }
.art-code .c-cmt{ color: rgba(255,255,255,.4); font-style: italic; }

/* Inline code */
.art-code-inline,
.art-content code:not(.art-code code){
  font-family: var(--mono);
  font-size: .88em;
  background: rgba(26,20,16,.06);
  color: var(--ink);
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid var(--line);
  white-space: nowrap;
}

/* Lists */
.art-ul, .art-ol{
  margin: 24px 0 28px;
  padding: 0;
  list-style: none;
}
.art-ul li, .art-ol li{
  position: relative;
  padding-left: 36px;
  margin-bottom: 14px;
  color: var(--ink-soft);
}
.art-ul li::before{
  content: "";
  position: absolute;
  left: 8px; top: .65em;
  width: 8px; height: 8px;
  background: var(--gold);
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(214,166,53,.18);
}
.art-ol{ counter-reset: ol; }
.art-ol li{
  counter-increment: ol;
  padding-left: 44px;
}
.art-ol li::before{
  content: counter(ol);
  position: absolute;
  left: 0; top: -2px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 26px;
  font-weight: 400;
  line-height: 1;
  color: var(--ocre);
}

/* Inline highlight */
.art-content mark{
  background: rgba(214,166,53,.25);
  color: var(--ink);
  padding: 0 4px;
  border-radius: 3px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* Links */
.art-link,
.art-content a:not(.art-share-btn):not(.art-mini-author-link):not(.art-author-btn){
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--ocre);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
  transition:
    color .25s var(--ease-out),
    text-decoration-color .25s var(--ease-out);
}
.art-link:hover,
.art-content a:not(.art-share-btn):not(.art-mini-author-link):not(.art-author-btn):hover{
  color: var(--bogolan);
  text-decoration-color: var(--gold);
}

/* Figure (full-width image) */
.art-figure{
  margin: 40px 0 32px;
}
.art-figure-img{
  width: 100%;
  height: clamp(220px, 36vw, 360px);
  border-radius: 16px;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
}
.art-figure-img[data-cover="featured"]{
  background:
    radial-gradient(circle at 30% 30%, rgba(214,140,69,.35), transparent 55%),
    linear-gradient(135deg, var(--bogolan) 0%, #6e1f15 60%, #4a1410 100%);
}
.art-figure-img[data-cover="card2"]{
  background:
    radial-gradient(circle at 70% 70%, rgba(214,140,69,.28), transparent 55%),
    linear-gradient(135deg, var(--indigo) 0%, #1f2a45 60%, #14182b 100%);
}
.art-figure-img[data-cover="card3"]{
  background:
    radial-gradient(circle at 30% 80%, rgba(255,255,255,.12), transparent 55%),
    linear-gradient(135deg, #1d6f4a 0%, #114a32 60%, #0a2e1f 100%);
}
.art-figure-img[data-cover="card4"]{
  background:
    radial-gradient(circle at 50% 30%, rgba(255,255,255,.18), transparent 60%),
    linear-gradient(135deg, var(--ocre) 0%, #b06b30 55%, #7a4720 100%);
}
.art-figure-img svg{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  opacity: .22;
}
.art-figcaption{
  margin-top: 14px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 14px;
  line-height: 1.4;
  color: var(--ink-soft);
  padding: 0 4px;
}

/* Callout */
.art-callout{
  display: flex; gap: 18px;
  align-items: flex-start;
  background: var(--paper);
  border: 1px solid var(--line);
  border-left: 4px solid var(--ocre);
  border-radius: 14px;
  padding: 22px 24px;
  margin: 32px 0;
  position: relative;
  box-shadow: 0 8px 22px -10px rgba(46,58,89,.10);
}
.art-callout-gold{
  border-left-color: var(--gold);
  background: rgba(214,166,53,.06);
}
.art-callout-icon{
  flex-shrink: 0;
  width: 40px; height: 40px;
  border-radius: 10px;
  background: rgba(194,84,29,.10);
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(194,84,29,.20);
}
.art-callout-gold .art-callout-icon{
  background: rgba(214,166,53,.18);
  border-color: rgba(214,166,53,.32);
}
.art-callout-icon svg{ width: 24px; height: 24px; }
.art-callout-body{ flex: 1; }
.art-callout-label{
  display: block;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ocre);
  margin-bottom: 6px;
}
.art-callout-gold .art-callout-label{ color: var(--ink); }
.art-callout-body p{
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink-soft);
}
.art-callout-body strong{ color: var(--ink); font-weight: 600; }

/* Section divider with adinkra in the middle */
.art-divider{
  display: flex; align-items: center; gap: 24px;
  margin: 64px 0;
}
.art-divider-line{
  flex: 1;
  height: 1px;
  background: var(--line);
}
.art-divider-glyph{
  width: 36px; height: 36px;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  opacity: .65;
}
.art-divider-glyph svg{ width: 100%; height: 100%; }

/* Sign-off paragraph */
.art-signoff{
  margin-top: 56px;
  padding-top: 32px;
  border-top: 1px dashed var(--line);
  font-family: var(--serif);
  font-size: 18px;
  font-style: italic;
  color: var(--ink);
  text-align: left;
}

/* ============================================================
   ARTICLE — Author bio section (after content)
   ============================================================ */
.art-author-section{
  background: var(--paper);
  padding: 0 0 110px;
}
@media (max-width: 768px){ .art-author-section{ padding: 0 0 72px; } }

.art-author-card{
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  align-items: center;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 32px;
  position: relative;
  overflow: hidden;
}
@media (min-width: 768px){
  .art-author-card{
    grid-template-columns: 140px 1fr;
    gap: 36px;
    padding: 48px;
  }
}
.art-author-card::before{
  content:""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(400px 280px at 90% 100%, rgba(194,84,29,.10), transparent 60%);
}
.art-author-card-av{
  width: 96px; height: 96px;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid var(--paper);
  box-shadow: 0 12px 28px -8px rgba(46,58,89,.30);
  position: relative; z-index: 1;
  justify-self: start;
}
@media (min-width: 768px){
  .art-author-card-av{ width: 140px; height: 140px; }
}
.art-author-card-av svg{ width: 100%; height: 100%; }
.art-author-card-body{
  position: relative; z-index: 1;
  display: flex; flex-direction: column; gap: 10px;
}
.art-author-card-eyebrow{
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ocre);
}
.art-author-card-name{
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(28px, 3.4vw, 40px);
  line-height: 1.05;
  letter-spacing: -.01em;
  color: var(--ink);
  margin: 0;
}
.art-author-card-role{
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0;
}
.art-author-card-bio{
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink-soft);
  max-width: 640px;
  margin: 4px 0 0;
}
.art-author-card-actions{
  display: flex; flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}
.art-author-btn{
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  padding: 10px 14px;
  border-radius: 999px;
  text-decoration: none;
  transition:
    background .25s var(--ease-out),
    color .25s var(--ease-out),
    border-color .25s var(--ease-out),
    transform .25s var(--ease-out);
}
.art-author-btn svg{ width: 13px; height: 13px; fill: currentColor; }
.art-author-btn:hover{
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
  transform: translateY(-2px);
}

/* ============================================================
   ARTICLE — Related
   ============================================================ */
.art-related{
  background: var(--bg);
  padding: 96px 0 110px;
}
@media (max-width: 768px){ .art-related{ padding: 72px 0 80px; } }

.art-related-head{
  display: flex; flex-direction: column;
  gap: 18px;
  margin-bottom: 48px;
  max-width: 720px;
}
.art-related-title{
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(34px, 5vw, 64px);
  line-height: 1;
  letter-spacing: -.025em;
  color: var(--ink);
  margin: 0;
}
.art-related-title em{
  font-style: italic;
  color: var(--ocre);
}

/* ============================================================
   Mobile-first refinements (safety net @ 360px)
   ============================================================ */
@media (max-width: 540px){
  /* Tighter gutters */
  .wrap{ padding: 0 20px; }

  /* Article hero — collapse stamps */
  .art-cover-stamp{ bottom: 18px; left: 18px; padding: 10px 14px; }
  .art-cover-stamp .s2{ font-size: 30px; }

  /* Author strip stacks */
  .art-author-strip{ gap: 14px; }
  .art-author-actions{ width: 100%; }

  /* Code blocks — smaller */
  .art-code{ font-size: 12.5px; padding: 18px 20px; border-radius: 10px; }

  /* Pull quote tighter */
  .art-pull-quote{ margin: 40px auto; padding: 24px 16px; }
  .art-pull-quote::before{ left: -2px; top: -4px; }
  .art-pull-quote::after{ right: -2px; bottom: -38px; }

  /* Newsletter perks tighter */
  .bl-news-perks{ gap: 10px; }

  /* Related title smaller */
  .art-related-title{ font-size: 36px; }
}

/* ============================================================
   Problem v3 (simple · texte sobre, mots-clés ocre, fade-in scroll)
   + Solution
   ============================================================ */

.problem-v3{
  background: var(--ink);
  color: var(--paper);
  position: relative;
}

/* Track : hauteur totale = 5 actes scrollables */
.p3-track{
  position: relative;
  height: 500vh; /* 5 actes × 100vh */
}

/* Sticky stage : 1 viewport, reste collé pendant le scroll */
.p3-sticky{
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* Background ambient */
.p3-bg{
  position: absolute; inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.p3-glow{
  position: absolute;
  top: -20%; right: -10%;
  width: 700px; height: 700px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--ocre), transparent 70%);
  filter: blur(120px);
  opacity: .12;
}
.p3-glyph{
  position: absolute;
  top: 50%; right: -10%;
  width: 700px; height: 700px;
  transform: translateY(-50%);
  opacity: .03;
  color: var(--gold);
  pointer-events: none;
}
.p3-glyph svg{ width: 100%; height: 100%; }

/* Eyebrow fixe haut gauche */
.p3-overlay-top{
  position: absolute;
  top: 28px; left: max(48px, 6vw);
  z-index: 5;
}
.p3-overlay-top .eyebrow{
  font-family: var(--mono); font-size: 11px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--gold);
}

/* Stage : tous les actes superposés (un seul actif à la fois) */
.p3-stage{
  position: relative; z-index: 1;
  width: min(1100px, 92vw);
  height: 60vh;
  max-height: 540px;
}

/* Acte */
.p3-act{
  position: absolute; inset: 0;
  display: flex;
  align-items: center; justify-content: center;
  text-align: center;
  opacity: 0;
  transform: translateY(40px) scale(.985);
  transition: opacity .9s cubic-bezier(.7,0,.2,1), transform .9s cubic-bezier(.7,0,.2,1);
  pointer-events: none;
  filter: blur(2px);
}
.p3-act.is-active{
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
  filter: blur(0);
  transition-delay: .15s;
}

/* La phrase */
.p3-line{
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(36px, 5.2vw, 80px);
  line-height: 1.12;
  letter-spacing: -0.025em;
  color: var(--paper);
  margin: 0;
  max-width: 1000px;
}
.p3-line em{
  font-style: italic;
  color: var(--gold);
}

/* Acte pivot (acte 5) — keywords en gold (déjà), un peu plus impactant */
.p3-act.pivot .p3-line{
  font-size: clamp(32px, 4.6vw, 70px);
}

/* "faire de l'IA" rayé — barre se trace à l'entrée de l'acte */
.p3-strike{
  position: relative; display: inline-block;
  color: rgba(250,246,236,.45);
  font-style: italic;
}
.p3-strike::after{
  content:""; position: absolute;
  left: -2%; right: -2%; top: 55%;
  height: 5px; background: var(--bogolan);
  transform: rotate(-2deg) scaleX(0); transform-origin: left;
  transition: transform 1.1s cubic-bezier(.7,0,.2,1) .4s;
  border-radius: 3px;
  opacity: .9;
}
.p3-act.is-active .p3-strike::after{ transform: rotate(-2deg) scaleX(1); }

/* Responsive */
@media (max-width: 900px){
  .p3-track{ height: 540vh; }
  .p3-stage{ height: 70vh; }
  .p3-line{ font-size: clamp(28px, 8vw, 52px); }
  .p3-act.pivot .p3-line{ font-size: clamp(26px, 7vw, 46px); }
  .p3-overlay-top{ left: 24px; top: 18px; }
  .p3-glow{ width: 400px; height: 400px; }
}


/* ----- Solution (3 piliers Morningside-style avec livrables) ----- */
/* IMPORTANT : pas d'overflow hidden ici sinon position:sticky des .how-step est cassé */
.solution{ background: var(--bg); color: var(--ink); position: relative; }
.solution::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(900px 600px at 90% 0%, rgba(214,166,53,.14), transparent 60%),
    radial-gradient(700px 500px at 0% 100%, rgba(29,40,86,.08), transparent 65%);
}
.sol-card{
  position: relative; z-index: 1;
  padding: 120px 0 96px;
}
.sol-glyph{
  position: absolute;
  top: 80px; right: 0;
  width: 320px; height: 320px;
  opacity: .06;
  pointer-events: none;
  color: var(--ocre);
}
.sol-glyph svg{ width:100%; height:100%; }

/* Header */
.sol-head{ max-width: 980px; margin: 0 auto 64px; text-align: center; }
.sol-eyebrow{
  color: var(--ocre);
  display: inline-block;
}
.sol-title{
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(44px, 6.4vw, 96px); line-height: 1; letter-spacing: -0.03em;
  color: var(--ink);
  margin: 18px 0 28px;
}
.sol-title em{ font-style: italic; color: var(--ocre); }

/* Logo complet (Dicken AI) inline dans le titre Solution — gros, statique */
.sol-brand-logo{
  display: inline-block;
  height: 1.6em;
  width: auto;
  vertical-align: middle;
  margin-left: 22px;
  margin-bottom: -0.32em;
  filter: drop-shadow(0 10px 24px rgba(214,166,53,.32));
}
@media (max-width: 900px){
  .sol-brand-logo{
    display: block;
    margin: 24px auto 0;
    height: 96px;
  }
}
@media (max-width: 600px){
  .sol-brand-logo{
    height: 72px;
  }
}

.sol-lead{
  font-size: clamp(17px, 1.4vw, 21px); line-height: 1.55;
  color: var(--ink-soft);
  max-width: 720px;
  margin: 0 auto;
}
.sol-lead em{ font-style: italic; color: var(--ocre); }

/* Connecteur dashed entre les 3 piliers (animation au reveal) */
.sol-connect{
  position: relative;
  margin: 48px 0 -10px;
  height: 20px;
  color: var(--ocre);
  opacity: 0;
  transform: scaleX(0);
  transform-origin: left;
  transition: opacity .8s var(--ease-out), transform 1.4s cubic-bezier(.7,0,.2,1) .35s;
}
.sol-card.in .sol-connect{ opacity: .55; transform: scaleX(1); }
.sol-connect svg{ width: 100%; height: 100%; display: block; }

/* === 3 Piliers v2 === */
.sol-pillars-v2{
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 32px;
}

.sol-p2{
  position: relative;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 32px 28px 28px;
  display: flex; flex-direction: column;
  gap: 22px;
  transition: transform .35s var(--ease-out), border-color .35s, box-shadow .35s;
  overflow: hidden;
  box-shadow:
    0 1px 0 rgba(255,255,255,.7) inset,
    0 18px 40px -22px rgba(46,58,89,.14);
}
.sol-p2::before{
  content:""; position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--ocre), var(--gold));
  opacity: 0;
  transition: opacity .35s;
}
.sol-p2:hover,
.sol-p2.sp2-active{
  transform: translateY(-6px);
  border-color: var(--ocre);
  box-shadow:
    0 1px 0 rgba(255,255,255,.7) inset,
    0 28px 56px -22px rgba(194,84,29,.20),
    0 8px 18px -8px rgba(0,0,0,.08);
}
.sol-p2:hover::before,
.sol-p2.sp2-active::before{ opacity: 1; }

/* Header pilier */
.sp2-head{
  display: flex; align-items: flex-start; gap: 14px;
  padding-bottom: 18px;
  border-bottom: 1px dashed var(--line);
}
.sp2-marker{
  flex: 0 0 auto;
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--bg);
  display: flex; align-items: center; justify-content: center;
  position: relative;
  transition: border-color .35s, background .35s;
}
.sol-p2:hover .sp2-marker,
.sol-p2.sp2-active .sp2-marker{
  border-color: var(--ocre);
  background: rgba(214,166,53,.12);
}
.sp2-dot{
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--ocre);
  box-shadow: 0 0 0 4px rgba(214,166,53,.18);
  animation: dotpulse 2.4s ease-in-out infinite;
}
.sp2-titles{ display: flex; flex-direction: column; gap: 2px; }
.sp2-num{
  font-family: var(--mono); font-size: 10px;
  letter-spacing: .18em; color: var(--ocre);
  font-weight: 600;
}
.sp2-name{
  font-family: var(--serif); font-style: italic;
  font-size: 32px; line-height: 1;
  color: var(--ink);
  letter-spacing: -0.01em;
  margin: 0;
}

/* Description */
.sp2-desc{
  font-size: 15px; line-height: 1.55;
  color: var(--ink-soft);
  margin: 0;
}
.sp2-desc strong{ color: var(--ink); font-weight: 500; }

/* Livrables */
.sp2-deliv{
  display: flex; flex-direction: column; gap: 12px;
  padding: 20px 0 0;
  border-top: 1px dashed var(--line);
  margin-top: auto;
}
.sp2-label{
  font-family: var(--mono); font-size: 10px;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-soft);
}
.sp2-list{
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 10px;
}
.sp2-list li{
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 13.5px; line-height: 1.45;
  color: var(--ink);
}
.sp2-list li strong{
  font-weight: 500;
  color: var(--ocre);
}
.sp2-check{
  flex: 0 0 auto;
  width: 18px; height: 18px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(214,166,53,.18);
  color: var(--ocre);
  font-family: var(--mono); font-size: 12px; font-weight: 700;
  line-height: 1;
  margin-top: 1px;
}

/* CTA */
.sp2-cta{
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 11px;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  margin-top: 4px;
  font-weight: 600;
  transition: color .25s;
}
.sp2-cta svg{
  width: 14px; height: 14px;
  transition: transform .3s var(--ease-out);
}
.sp2-cta:hover{ color: var(--ocre); }
.sp2-cta:hover svg{ transform: translateX(4px); }

/* ============================================================
   Case studies — cards (.case-link) + dedicated pages (.cs-*)
   ============================================================ */
.case-link{
  cursor: pointer;
  position: relative;
  transition: transform .35s var(--ease-out);
  text-decoration: none;
  color: inherit;
}
.case-link::after{
  content: "Voir le cas →";
  position: absolute;
  bottom: -28px; left: 0; right: 0;
  text-align: center;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold);
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity .3s var(--ease-out), transform .3s var(--ease-out);
  pointer-events: none;
}
.case-link:hover{
  transform: translateY(-4px);
}
.case-link:hover::after,
.case-link:focus-visible::after{
  opacity: 1;
  transform: translateY(0);
}
.case-link:focus-visible{
  outline: 2px solid var(--gold);
  outline-offset: 4px;
  border-radius: 12px;
}
.case-link:hover .res-mini,
.case-link:focus-visible .res-mini,
.case-link:hover .res-quote,
.case-link:focus-visible .res-quote{
  border-color: rgba(214,166,53,.4);
}
.case-link:hover .plus-icon,
.case-link:focus-visible .plus-icon{
  color: var(--gold);
  transform: rotate(90deg);
  transition: color .3s, transform .35s var(--ease-out);
}

/* ============================================================
   Case study pages (/cas-clients/*.html)
   ============================================================ */
.cs-page{
  background: var(--paper);
  color: var(--ink);
  position: relative;
  padding-top: 0;
}

/* Hero */
.cs-hero{
  background: var(--paper);
  padding: 140px 0 60px;
  position: relative;
  border-bottom: 1px solid var(--line);
}
.cs-hero .wrap{ max-width: 1080px; }

.cs-back{
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono);
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-soft);
  text-decoration: none;
  margin-bottom: 40px;
  padding: 8px 14px 8px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  transition: color .25s, border-color .25s, transform .25s;
}
.cs-back svg{ width: 14px; height: 14px; transition: transform .25s; }
.cs-back:hover{
  color: var(--ocre);
  border-color: var(--ocre);
}
.cs-back:hover svg{ transform: translateX(-3px); }

.cs-tag{
  display: inline-block;
  padding: 7px 14px;
  background: rgba(214,166,53,.16);
  color: var(--ocre);
  border: 1px solid rgba(214,166,53,.4);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 28px;
}

.cs-title{
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(40px, 5vw, 76px);
  line-height: 1.05; letter-spacing: -0.025em;
  color: var(--ink);
  margin: 0 0 24px;
}
.cs-title em{ font-style: italic; color: var(--ocre); }

.cs-lead{
  font-family: var(--serif);
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0 0 56px;
  max-width: 760px;
}

.cs-meta-grid{
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 28px 0;
}
.cs-meta-item{
  display: flex; flex-direction: column; gap: 6px;
  border-right: 1px solid var(--line);
  padding-left: 24px;
}
.cs-meta-item:first-child{ padding-left: 0; }
.cs-meta-item:last-child{ border-right: none; }
.cs-meta-lbl{
  font-family: var(--mono);
  font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-soft);
}
.cs-meta-val{
  font-family: var(--serif); font-style: italic;
  font-size: 20px;
  color: var(--ink);
}

@media (max-width: 700px){
  .cs-hero{ padding: 110px 0 40px; }
  .cs-meta-grid{ grid-template-columns: 1fr 1fr; gap: 0; padding: 20px 0; }
  .cs-meta-item{
    padding: 12px 16px;
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
  }
  .cs-meta-item:nth-child(2n){ border-right: none; }
  .cs-meta-item:nth-child(n+3){ border-bottom: none; }
}

/* Cover */
.cs-cover{
  background: var(--paper);
  padding: 0 0 0;
}
.cs-cover-inner{
  position: relative;
  max-width: 1320px;
  margin: 0 auto;
  height: 360px;
  border-radius: 0;
  overflow: hidden;
  display: flex; align-items: flex-end;
  padding: 32px 48px;
}
.cs-cover-tape{
  position: absolute; top: 0; left: 0; right: 0;
  height: 12px;
  background: repeating-linear-gradient(45deg,
    rgba(214,166,53,.5) 0 8px,
    transparent 8px 16px);
}
.cs-cover-glyph{
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 280px; height: 280px;
  opacity: .14;
  pointer-events: none;
}
.cs-cover-glyph svg{ width: 100%; height: 100%; }

.cs-cover-stamp{
  position: relative;
  display: inline-flex; align-items: center; gap: 14px;
  padding: 10px 16px;
  background: rgba(0,0,0,.25);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  font-family: var(--mono);
  font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(250,246,236,.85);
  z-index: 1;
}
.cs-stamp-num{ color: var(--gold); font-weight: 700; }
.cs-stamp-line{
  display: inline-block;
  width: 24px; height: 1px;
  background: rgba(250,246,236,.3);
}

@media (max-width: 700px){
  .cs-cover-inner{ height: 220px; padding: 20px 24px; }
  .cs-cover-glyph{ width: 180px; height: 180px; }
}

/* Body — single column propre */
.cs-body{
  padding: 96px 0 96px;
}
.cs-body .wrap{ max-width: 760px; }

/* Sections — colonne unique, numéro en label discret au-dessus du titre */
.cs-section{
  margin-bottom: 72px;
  padding-bottom: 72px;
  border-bottom: 1px dashed var(--line);
}
.cs-section:last-of-type{
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}
.cs-section-num{
  display: inline-block;
  font-family: var(--mono);
  font-size: 11px; letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ocre);
  font-weight: 600;
  margin-bottom: 18px;
  padding: 6px 14px;
  background: rgba(214,166,53,.12);
  border: 1px solid rgba(214,166,53,.3);
  border-radius: 999px;
}
.cs-section-num::before{ content: "Étape "; color: var(--ink-soft); font-weight: 500; }

.cs-section-title{
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(32px, 3.6vw, 52px);
  line-height: 1.05; letter-spacing: -0.025em;
  color: var(--ink);
  margin: 0 0 28px;
}
.cs-section-title em{ font-style: italic; color: var(--ocre); }

.cs-section-content{
  font-family: var(--serif);
  font-size: 19px; line-height: 1.65;
  color: var(--ink);
}
.cs-section-content p{ margin: 0 0 20px; }
.cs-section-content p:last-child{ margin-bottom: 0; }
.cs-section-content strong{ color: var(--ocre); font-weight: 500; }

.cs-section-lead{
  font-size: 24px !important;
  line-height: 1.4 !important;
  color: var(--ink) !important;
  font-style: italic;
  margin-bottom: 28px !important;
}

/* Deliverables list */
.cs-deliverables{
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column;
  gap: 14px;
}
.cs-deliverables li{
  display: flex; align-items: flex-start; gap: 14px;
  padding: 14px 18px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 12px;
  font-family: var(--sans);
  font-size: 15px; line-height: 1.55;
  color: var(--ink);
}
.cs-deliverables li strong{ color: var(--ocre); font-weight: 600; }
.cs-d-mark{
  flex: 0 0 auto;
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--ocre);
  color: var(--paper);
  font-family: var(--mono);
  font-size: 14px; font-weight: 700;
  line-height: 1;
  margin-top: 1px;
}

/* Results pair (Ministère) */
.cs-results-pair{
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  box-shadow:
    0 1px 0 rgba(255,255,255,.6) inset,
    0 18px 40px -22px rgba(46,58,89,.18);
}
.cs-result-big{
  background: var(--paper);
  padding: 36px 28px;
  text-align: center;
}
.cs-result-num{
  display: block;
  font-family: var(--serif); font-style: italic;
  font-size: clamp(56px, 7vw, 96px);
  line-height: 1;
  color: var(--ocre);
  letter-spacing: -0.02em;
  margin-bottom: 12px;
}
.cs-result-unit{
  font-size: .55em;
  vertical-align: super;
  color: var(--gold);
  margin-left: 4px;
}
.cs-result-lbl{
  display: block;
  font-family: var(--mono);
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-soft);
}

@media (max-width: 700px){
  .cs-results-pair{ grid-template-columns: 1fr; }
  .cs-result-big{ padding: 28px 20px; }
}

/* Quote */
.cs-quote{
  position: relative;
  margin: 0 0 72px;
  padding: 40px 44px;
  background: var(--ink);
  color: var(--paper);
  border-radius: 20px;
  font-family: var(--serif);
  font-size: clamp(22px, 2.2vw, 30px);
  line-height: 1.35;
  font-style: italic;
  box-shadow:
    0 1px 0 rgba(255,255,255,.04) inset,
    0 24px 48px -22px rgba(0,0,0,.3);
}
.cs-quote em{ color: var(--gold); }
.cs-quote-mark{
  display: inline-block;
  font-size: 1.4em;
  color: var(--gold);
  opacity: .8;
  margin-right: 8px;
  line-height: 1;
  vertical-align: -0.05em;
}
.cs-quote-author{
  display: block;
  margin-top: 22px;
  font-style: normal;
  font-family: var(--mono);
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(250,246,236,.55);
}

@media (max-width: 700px){
  .cs-quote{
    padding: 26px 22px;
    font-size: 19px;
  }
  .cs-section{
    margin-bottom: 56px;
    padding-bottom: 56px;
  }
}

/* CTA box */
.cs-cta{
  margin-top: 64px;
  padding: 48px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 20px;
  text-align: center;
  box-shadow:
    0 1px 0 rgba(255,255,255,.6) inset,
    0 24px 48px -22px rgba(214,166,53,.2);
}
.cs-cta-title{
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: clamp(24px, 2.6vw, 36px);
  line-height: 1.15; letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0 0 12px;
}
.cs-cta-desc{
  font-size: 15px; line-height: 1.55;
  color: var(--ink-soft);
  margin: 0 0 28px;
  max-width: 520px;
  margin-left: auto; margin-right: auto;
}
.cs-cta-actions{
  display: inline-flex; align-items: center; gap: 20px;
  flex-wrap: wrap; justify-content: center;
}
.cs-cta-secondary{
  font-family: var(--mono);
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-soft);
  text-decoration: underline;
  text-decoration-color: var(--line);
  text-underline-offset: 4px;
  transition: color .25s, text-decoration-color .25s;
}
.cs-cta-secondary:hover{
  color: var(--ocre);
  text-decoration-color: var(--ocre);
}

@media (max-width: 700px){
  .cs-cta{ padding: 32px 24px; }
}

/* Related cases */
.cs-related{
  background: var(--ink);
  color: var(--paper);
  padding: 96px 0 80px;
}
.cs-related .wrap{ max-width: 1080px; }
.cs-related-eye{
  color: var(--gold);
  display: inline-block;
  margin-bottom: 20px;
}
.cs-related-title{
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(32px, 4vw, 56px);
  line-height: 1.05; letter-spacing: -0.025em;
  color: var(--paper);
  margin: 0 0 48px;
}
.cs-related-grid{
  display: grid; grid-template-columns: 1fr 1fr; gap: 24px;
}
.cs-related-card{
  display: flex; flex-direction: column; gap: 14px;
  padding: 32px 28px;
  background: rgba(250,246,236,.04);
  border: 1px solid rgba(250,246,236,.12);
  border-radius: 18px;
  text-decoration: none;
  color: var(--paper);
  transition: background .35s, border-color .35s, transform .35s;
}
.cs-related-card:hover{
  background: rgba(250,246,236,.07);
  border-color: var(--gold);
  transform: translateY(-4px);
}
.cs-rc-tag{
  font-family: var(--mono);
  font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--gold);
}
.cs-related-card h3{
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: 26px; line-height: 1.1;
  color: var(--paper);
  margin: 0;
}
.cs-related-card p{
  font-family: var(--serif);
  font-size: 16px; line-height: 1.5;
  color: rgba(250,246,236,.7);
  margin: 0;
}
.cs-rc-arrow{
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px dashed rgba(250,246,236,.18);
  font-family: var(--mono);
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--gold);
  transition: transform .3s var(--ease-out);
  display: inline-block;
}
.cs-related-card:hover .cs-rc-arrow{ transform: translateX(4px); }

@media (max-width: 700px){
  .cs-related{ padding: 64px 0 56px; }
  .cs-related-grid{ grid-template-columns: 1fr; }
  .cs-related-card{ padding: 24px 22px; }
}

/* Footer (case study pages) */
.cs-footer{
  background: var(--paper);
  border-top: 1px solid var(--line);
  padding: 48px 0 32px;
}
.cs-footer .wrap{ max-width: 1320px; }
.cs-footer-grid{
  display: grid; grid-template-columns: auto 1fr auto;
  gap: 48px;
  align-items: center;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--line);
}
.cs-footer-brand img{
  display: block;
  height: 32px;
  width: auto;
}
.cs-footer-tagline{
  font-family: var(--serif); font-style: italic;
  font-size: 16px;
  color: var(--ink-soft);
}
.cs-footer-links{
  display: flex; gap: 28px;
}
.cs-footer-links a{
  font-family: var(--mono);
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  transition: color .25s;
}
.cs-footer-links a:hover{ color: var(--ocre); }

.cs-footer-bottom{
  display: flex; justify-content: space-between;
  padding-top: 20px;
  font-family: var(--mono);
  font-size: 11px; letter-spacing: .12em;
  color: var(--ink-soft);
}
.cs-footer-bottom a{
  color: var(--ocre);
  text-decoration: none;
}
.cs-footer-bottom a:hover{ color: var(--bogolan); }

@media (max-width: 800px){
  .cs-footer-grid{ grid-template-columns: 1fr; gap: 24px; text-align: center; }
  .cs-footer-links{ justify-content: center; flex-wrap: wrap; gap: 16px; }
  .cs-footer-bottom{ flex-direction: column; gap: 8px; align-items: center; }
}

/* === Modal === */
.case-modal{
  position: fixed;
  inset: 0;
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s var(--ease-out);
}
.case-modal.is-open{
  opacity: 1;
  pointer-events: auto;
}
.cm-backdrop{
  position: absolute;
  inset: 0;
  background: rgba(26,20,16,.86);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.cm-panel{
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -48%) scale(.96);
  transition: transform .45s cubic-bezier(.2,.7,.2,1);
  width: min(820px, 92vw);
  max-height: 88vh;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 24px;
  overflow: hidden;
  box-shadow:
    0 1px 0 rgba(255,255,255,.6) inset,
    0 40px 80px -20px rgba(0,0,0,.4),
    0 16px 40px -12px rgba(46,58,89,.3);
}
.case-modal.is-open .cm-panel{
  transform: translate(-50%, -50%) scale(1);
}
.cm-close{
  position: absolute;
  top: 18px; right: 18px;
  z-index: 10;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--paper);
  border: 1px solid var(--line);
  cursor: pointer;
  color: var(--ink);
  display: flex; align-items: center; justify-content: center;
  transition: background .25s, transform .25s;
  box-shadow: 0 4px 12px rgba(0,0,0,.08);
}
.cm-close svg{ width: 18px; height: 18px; }
.cm-close:hover{
  background: var(--ink);
  color: var(--paper);
  transform: rotate(90deg);
}

.cm-content{
  overflow-y: auto;
  max-height: 88vh;
  padding: 0;
}

/* Case detail content (injected) */
.cd-cover{
  position: relative;
  height: 180px;
  background: var(--ink);
  display: flex;
  align-items: center;
  padding: 32px 48px;
  overflow: hidden;
}
.cd-cover-bg{ position: absolute; inset: 0; opacity: .12; }
.cd-cover-bg svg{ width: 100%; height: 100%; }
.cd-cover-tape{
  position: absolute; top: 0; left: 0; right: 0;
  height: 8px;
  background: repeating-linear-gradient(45deg,
    rgba(214,166,53,.4) 0 6px,
    transparent 6px 12px);
}
.cd-tag{
  display: inline-block;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(214,166,53,.18);
  color: var(--gold);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 600;
  border: 1px solid rgba(214,166,53,.4);
  position: relative;
  z-index: 1;
}
.cd-cover-meta{
  position: relative; z-index: 1;
  margin-left: auto;
  text-align: right;
  display: flex; flex-direction: column; gap: 4px;
}
.cd-cover-client{
  font-family: var(--serif); font-style: italic;
  font-size: 18px; color: var(--paper);
}
.cd-cover-loc{
  font-family: var(--mono); font-size: 10px;
  letter-spacing: .14em; text-transform: uppercase;
  color: rgba(250,246,236,.55);
}

.cd-body{
  padding: 40px 48px 48px;
}
.cd-title{
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.1; letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 0 12px;
}
.cd-title em{ font-style: italic; color: var(--ocre); }
.cd-meta{
  display: flex; flex-wrap: wrap; gap: 16px;
  font-family: var(--mono); font-size: 10px;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 32px;
  padding-bottom: 24px;
  border-bottom: 1px dashed var(--line);
}
.cd-meta span{ display: inline-flex; align-items: center; gap: 6px; }
.cd-meta strong{ color: var(--ocre); font-weight: 600; }

.cd-section{
  margin-bottom: 28px;
}
.cd-section h4{
  font-family: var(--mono); font-size: 11px;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--ocre);
  margin: 0 0 10px;
  font-weight: 600;
}
.cd-section p{
  font-family: var(--serif);
  font-size: 17px; line-height: 1.55;
  color: var(--ink);
  margin: 0;
}
.cd-section p strong{ color: var(--bogolan); font-weight: 500; }

.cd-results{
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  margin: 8px 0;
}
.cd-result{
  background: var(--bg);
  padding: 20px 16px;
  text-align: center;
}
.cd-result-num{
  font-family: var(--serif); font-style: italic;
  font-size: 32px; line-height: 1;
  color: var(--ocre);
  display: block;
}
.cd-result-lbl{
  font-family: var(--mono); font-size: 9px;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-soft);
  margin-top: 6px;
  display: block;
}

.cd-tech{
  display: flex; flex-wrap: wrap; gap: 8px;
  margin: 4px 0;
}
.cd-tech-pill{
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--bg);
  border: 1px solid var(--line);
  font-family: var(--mono); font-size: 11px;
  letter-spacing: .04em;
  color: var(--ink-soft);
}

.cd-quote{
  margin: 24px 0 0;
  padding: 20px 24px;
  background: var(--bg);
  border-left: 3px solid var(--gold);
  border-radius: 0 12px 12px 0;
  font-family: var(--serif); font-style: italic;
  font-size: 18px; line-height: 1.45;
  color: var(--ink);
}
.cd-quote-author{
  display: block;
  margin-top: 12px;
  font-family: var(--mono); font-size: 10px;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-soft);
  font-style: normal;
}

.cd-cta{
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
.cd-cta-text{
  font-family: var(--serif); font-style: italic;
  font-size: 16px; color: var(--ink);
  margin: 0;
  flex: 1;
}
.cd-cta-btn{
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 20px;
  background: var(--ink);
  color: var(--paper);
  text-decoration: none;
  border-radius: 10px;
  font-family: var(--mono); font-size: 11px;
  letter-spacing: .12em; text-transform: uppercase;
  font-weight: 600;
  transition: background .25s, transform .25s;
  flex: 0 0 auto;
}
.cd-cta-btn:hover{ background: var(--ocre); transform: translateY(-1px); }
.cd-cta-btn svg{ width: 14px; height: 14px; }

@media (max-width: 700px){
  .cm-panel{ width: 96vw; max-height: 92vh; border-radius: 16px; }
  .cd-cover{ height: 140px; padding: 20px 24px; }
  .cd-cover-client{ font-size: 14px; }
  .cd-body{ padding: 28px 24px 32px; }
  .cd-results{ grid-template-columns: 1fr 1fr; }
  .cd-cta{ flex-direction: column; align-items: stretch; }
  .cd-cta-btn{ justify-content: center; }
}

/* Body lock when modal open */
body.modal-open{ overflow: hidden; }

/* Staggered reveal des piliers */
.sol-pillars-v2 .sol-p2{
  opacity: 0; transform: translateY(20px);
  transition: opacity .8s var(--ease-out), transform .8s var(--ease-out), border-color .35s, box-shadow .35s;
}
.r-fade.in .sol-p2{ opacity: 1; transform: translateY(0); }
.r-fade.in .sol-p2:nth-child(1){ transition-delay: .1s; }
.r-fade.in .sol-p2:nth-child(2){ transition-delay: .25s; }
.r-fade.in .sol-p2:nth-child(3){ transition-delay: .4s; }

/* === Overrides : sp2-* dans les cartes how-step (fond ink dark) === */
/* Le step-grid est aligné start (top), pas centré, pour gérer la hauteur du contenu */
.solution .step-grid{
  align-items: start;
  min-height: 460px;
}
.solution .step-content{
  gap: 16px;
  padding: 8px 0;
}

/* Bloc livrables — fond dark adapté */
.solution .sp2-deliv{
  display: flex; flex-direction: column; gap: 14px;
  padding: 18px 0 0;
  border-top: 1px dashed rgba(250,246,236,.14);
  margin-top: 10px;
}
.solution .sp2-label{
  font-family: var(--mono); font-size: 10px;
  letter-spacing: .14em; text-transform: uppercase;
  color: rgba(250,246,236,.55);
}
.solution .sp2-list{
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 10px;
}
.solution .sp2-list li{
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 13.5px; line-height: 1.5;
  color: rgba(250,246,236,.85);
}
.solution .sp2-list li strong{
  font-weight: 600;
  color: var(--gold);
}
.solution .sp2-check{
  flex: 0 0 auto;
  width: 18px; height: 18px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(214,166,53,.16);
  color: var(--gold);
  font-family: var(--mono); font-size: 13px; font-weight: 700;
  line-height: 1;
  margin-top: 2px;
  border: 1px solid rgba(214,166,53,.30);
}

/* CTA — fond dark adapté */
.solution .sp2-cta{
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--mono); font-size: 11px;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--gold);
  text-decoration: none;
  padding: 14px 0 0;
  border-top: 1px solid rgba(250,246,236,.10);
  margin-top: 14px;
  font-weight: 600;
  transition: color .25s, transform .25s;
  width: fit-content;
}
.solution .sp2-cta svg{
  width: 14px; height: 14px;
  transition: transform .3s var(--ease-out);
}
.solution .sp2-cta:hover{ color: var(--paper); }
.solution .sp2-cta:hover svg{ transform: translateX(4px); }

/* Visuel : ancré en haut de la carte (pas centré, sinon disjoint du contenu plus long) */
.solution .step-visual{
  align-self: start;
  margin-top: 8px;
}

/* Le numéro géant en watermark s'aligne aussi en haut */
.solution .step-num{
  align-items: flex-start;
  padding-top: 4px;
}

@media (max-width: 900px){
  .solution .step-grid{ min-height: auto; align-items: start; }
  .solution .step-num{ padding-top: 0; }
}

/* Bottom — closing line */
.sol-bottom{
  margin-top: 64px;
  padding-top: 40px;
  border-top: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between;
  gap: 32px;
}
.sol-bottom-text{
  font-family: var(--serif);
  font-size: clamp(20px, 1.8vw, 26px);
  line-height: 1.35;
  color: var(--ink);
  margin: 0;
  max-width: 640px;
}
.sol-bottom-text em{ font-style: italic; color: var(--ocre); }

.sol-bottom-cta{
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 22px;
  background: var(--ink);
  color: var(--paper);
  text-decoration: none;
  border-radius: 12px;
  font-family: var(--mono); font-size: 12px;
  letter-spacing: .12em; text-transform: uppercase;
  font-weight: 600;
  white-space: nowrap;
  transition: background .25s, transform .25s;
  flex: 0 0 auto;
}
.sol-bottom-cta:hover{ background: var(--ocre); transform: translateY(-2px); }
.sol-bottom-cta svg{ width: 14px; height: 14px; }

@media (max-width: 980px){
  .sol-pillars-v2{ grid-template-columns: 1fr; gap: 20px; }
  .sol-connect{ display: none; }
  .sol-bottom{ flex-direction: column; align-items: flex-start; }
}
@media (max-width: 700px){
  .sol-card{ padding: 80px 0 64px; }
  .sol-head{ margin-bottom: 40px; }
  .sol-glyph{ width: 220px; height: 220px; top: 40px; right: -60px; }
  .sol-p2{ padding: 26px 22px; }
  .sp2-name{ font-size: 28px; }
  .sol-bottom-cta{ width: 100%; justify-content: center; }
}

/* ============================================================
   Founder letter (replaces Team section)
   ============================================================ */
.founder{ background: var(--paper); position: relative; overflow: hidden; }
.fnd-card{
  position: relative;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  padding: 80px 72px;
  box-shadow:
    0 1px 0 rgba(255,255,255,.6) inset,
    0 30px 60px -28px rgba(46,58,89,.18),
    0 12px 32px -14px rgba(0,0,0,.10);
}

/* Background ambient */
.fnd-bg{
  position: absolute; inset: 0; pointer-events: none; overflow: hidden;
}
.fnd-glow{
  position: absolute; border-radius: 50%;
  filter: blur(80px); opacity: .35;
  mix-blend-mode: multiply;
}
.fnd-glow.g1{
  top: -100px; right: -120px;
  width: 460px; height: 460px;
  background: radial-gradient(circle, var(--gold), transparent 70%);
  opacity: .22;
}
.fnd-glow.g2{
  bottom: -120px; left: -100px;
  width: 380px; height: 380px;
  background: radial-gradient(circle, var(--indigo), transparent 70%);
  opacity: .15;
}
.fnd-stamp{
  position: absolute;
  bottom: 30px; right: 60px;
  width: 280px; height: 280px;
  opacity: .04;
  pointer-events: none;
}
.fnd-stamp svg{ width:100%; height:100%; }

/* Grid */
.fnd-grid{
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 64px;
  align-items: start;
}

/* LEFT — Aside (sticky on desktop) */
.fnd-aside{
  position: sticky; top: 100px;
  display: flex; flex-direction: column; gap: 24px;
  padding: 32px 28px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow:
    0 1px 0 rgba(255,255,255,.7) inset,
    0 8px 24px -12px rgba(0,0,0,.08);
}
.fnd-avatar{
  width: 100%; aspect-ratio: 1; border-radius: 14px;
  background: var(--indigo); overflow: hidden;
  border: 1px solid var(--line);
  position: relative;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.08),
    0 8px 24px -12px rgba(29,40,86,.4);
}
.fnd-avatar svg{ width:100%; height:100%; display:block; }

.fnd-card-meta{ display: flex; flex-direction: column; gap: 4px; }
.fnd-name{
  font-family: var(--serif); font-style: italic;
  font-size: 22px; line-height: 1.15;
  color: var(--ink);
  letter-spacing: -0.005em;
}
.fnd-role{
  font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-soft);
}

.fnd-creds{
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 12px;
  padding-top: 16px; border-top: 1px dashed var(--line);
}
.fnd-creds li{
  display: flex; align-items: baseline; gap: 12px;
}
.fc-num{
  font-family: var(--serif); font-style: italic;
  font-size: 28px; line-height: 1; color: var(--ocre);
  min-width: 80px;
}
.fc-lbl{
  font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-soft);
}

.fnd-social{ display: flex; flex-direction: column; gap: 10px; }
.fnd-soc{
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 14px; border-radius: 10px;
  background: var(--ink); color: var(--paper);
  text-decoration: none;
  font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  transition: background .25s;
}
.fnd-soc svg{ width: 16px; height: 16px; }
.fnd-soc:hover{ background: var(--indigo); }

/* RIGHT — Lettre */
.fnd-letter{ max-width: 720px; }
.fnd-letter-head{
  padding-bottom: 32px; margin-bottom: 36px;
  border-bottom: 1px solid var(--line);
}
.fnd-title{
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(40px, 4.6vw, 72px); line-height: .98; letter-spacing: -0.025em;
  color: var(--ink);
  margin-top: 18px;
}
.fnd-title em{ font-style: italic; color: var(--ocre); }

.fnd-body{
  font-family: var(--serif); font-size: 20px; line-height: 1.65;
  color: var(--ink-soft);
}
.fnd-body p{ margin: 0 0 22px; }
.fnd-body strong{ color: var(--ink); font-weight: 500; }
.fnd-body em{ font-style: italic; color: var(--ink); }
.fnd-body mark{
  background: rgba(214,166,53,.25);
  color: var(--ink); padding: 2px 4px; border-radius: 3px;
}

.fnd-lead{
  font-size: 22px; line-height: 1.55;
  color: var(--ink);
}
.fnd-dropcap{
  float: left;
  font-family: var(--serif); font-style: italic;
  font-size: 92px; line-height: .85;
  color: var(--ocre);
  padding-right: 14px; padding-top: 8px;
}

/* Pull quote */
.fnd-pull{
  position: relative;
  margin: 36px -16px;
  padding: 28px 36px;
  background: var(--paper);
  border-left: 4px solid var(--gold);
  border-radius: 0 12px 12px 0;
  font-family: var(--serif); font-style: italic;
  font-size: 26px; line-height: 1.35;
  color: var(--ink);
}
.fnd-pull em{ color: var(--ocre); }
.fp-mark{
  font-family: var(--serif); font-size: 32px;
  color: var(--gold); opacity: .6;
  display: inline;
}
.fp-mark.right{ float: right; line-height: 1; }

.fnd-sign-line{
  margin-top: 36px !important;
  padding-top: 24px;
  border-top: 1px dashed var(--line);
  font-size: 17px;
  color: var(--ink-soft);
}
.fnd-inline-cta{
  color: var(--ocre);
  text-decoration: underline; text-decoration-color: var(--gold);
  text-underline-offset: 4px;
  font-style: italic;
  transition: color .25s;
}
.fnd-inline-cta:hover{ color: var(--bogolan); }

/* Signature */
.fnd-signature{
  display: flex; flex-direction: column; gap: 4px;
  margin-top: 32px;
  padding: 20px 0 0;
}
.fnd-sig-handwritten{
  font-family: var(--serif); font-style: italic;
  font-size: 56px; line-height: 1;
  color: var(--ink);
  transform: rotate(-2deg);
  transform-origin: left bottom;
  display: inline-block;
}
.fnd-sig-meta{
  font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-soft);
  margin-top: 12px;
}

/* Responsive */
@media (max-width: 1100px){
  .fnd-grid{ grid-template-columns: 240px 1fr; gap: 40px; }
  .fc-num{ font-size: 24px; min-width: 70px; }
}
@media (max-width: 900px){
  .fnd-card{ padding: 56px 28px; }
  .fnd-grid{ grid-template-columns: 1fr; gap: 32px; }
  .fnd-aside{ position: static; top: auto; }
  .fnd-letter{ max-width: 100%; }
  .fnd-body{ font-size: 18px; }
  .fnd-lead{ font-size: 19px; }
  .fnd-dropcap{ font-size: 72px; }
  .fnd-pull{ font-size: 21px; padding: 22px 24px; margin: 28px 0; }
  .fnd-sig-handwritten{ font-size: 44px; }
}

/* ============================================================
   Staggered reveal for Problem items + Solution pillars
   (each child animates with delay when parent .r-fade enters)
   ============================================================ */
.prob-grid .prob-item,
.sol-pillars .sol-pillar{
  opacity: 0; transform: translateY(20px);
  transition: opacity .8s var(--ease-out), transform .8s var(--ease-out);
}
.r-fade.in .prob-item,
.r-fade.in .sol-pillar{
  opacity: 1; transform: translateY(0);
}
.r-fade.in .prob-item:nth-child(1),
.r-fade.in .sol-pillar:nth-child(1){ transition-delay: .10s; }
.r-fade.in .prob-item:nth-child(2),
.r-fade.in .sol-pillar:nth-child(2){ transition-delay: .22s; }
.r-fade.in .prob-item:nth-child(3),
.r-fade.in .sol-pillar:nth-child(3){ transition-delay: .34s; }

/* Founder: signature draws in */
.fnd-signature .fnd-sig-handwritten{
  display: inline-block;
  opacity: 0; transform: translateY(8px) rotate(-2deg);
  transition: opacity 1.2s var(--ease-out) .8s, transform 1.2s var(--ease-out) .8s;
}
.fnd-card.r-fade.in .fnd-sig-handwritten{
  opacity: 1; transform: translateY(0) rotate(-2deg);
}

/* Closing: cls-actions stagger (only when card opts in via .r-fade) */
.cls-hero-card.r-fade .cls-actions .cls-btn,
.cls-hero-card.r-fade .cls-actions .cls-mail{
  opacity: 0; transform: translateY(8px);
  transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
}
.cls-hero-card.r-fade.in .cls-actions .cls-btn{ opacity: 1; transform: translateY(0); transition-delay: .15s; }
.cls-hero-card.r-fade.in .cls-actions .cls-mail{ opacity: 1; transform: translateY(0); transition-delay: .28s; }

/* Solution: inline trigger when in viewport for prob-strike fallback */
.problem .prob-card.in .prob-strike::after{ transform: rotate(-2deg) scaleX(1); }

/* ============================================================
   Closing CTA — phrase finale (avant footer)
   ============================================================ */
.closing{
  background: var(--bg);
  position: relative;
  padding: 80px 0 100px;
}
.closing .wrap{ max-width: 1320px; }

/* Card-in-card avec gradient border (réplique pattern hero) */
.cls-hero-card{
  position: relative;
  border-radius: 32px;
  padding: 1.5px;
  background:
    linear-gradient(135deg,
      rgba(214,166,53,.45) 0%,
      rgba(194,84,29,.25) 30%,
      rgba(29,40,86,.18) 60%,
      rgba(214,166,53,.30) 100%);
  box-shadow:
    0 1px 0 rgba(255,255,255,.6) inset,
    0 40px 80px -28px rgba(46,58,89,.32),
    0 16px 40px -16px rgba(0,0,0,.18);
  overflow: hidden;
}
.cls-hero-inner{
  position: relative;
  border-radius: 30px;
  background: var(--ink);
  color: var(--paper);
  overflow: hidden;
  min-height: 540px;
  display: flex;
  align-items: center;
  padding: 80px 64px;
}

/* Spline 3D background — fait la taille du card */
.cls-spline-bg{
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 0;
}
.cls-spline-bg iframe{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0;
  pointer-events: none;
}

/* Veil + grain pour intégration */
.cls-veil{
  position: absolute; inset: 0; pointer-events: none;
  z-index: 1;
  background:
    radial-gradient(900px 500px at 30% 50%, rgba(26,20,16,.55), transparent 70%),
    linear-gradient(135deg, rgba(26,20,16,.65) 0%, rgba(26,20,16,.30) 60%, rgba(26,20,16,.65) 100%);
}
.cls-grain{
  position: absolute; inset: 0; pointer-events: none;
  z-index: 2;
  opacity: .25;
  mix-blend-mode: overlay;
  background-image:
    radial-gradient(rgba(255,255,255,.18) 1px, transparent 1px),
    radial-gradient(rgba(0,0,0,.10) 1px, transparent 1px);
  background-size: 3px 3px, 7px 7px;
  background-position: 0 0, 1px 1px;
}

/* Glyphe Gye Nyame en watermark, top-right */
.cls-glyph-bg{
  position: absolute;
  top: 32px; right: 40px;
  width: 220px; height: 220px;
  opacity: .12;
  pointer-events: none;
  color: var(--gold);
  z-index: 2;
}
.cls-glyph-bg svg{ width: 100%; height: 100%; }

/* Content layer — centered (Morningside-style) */
.cls-content{
  position: relative;
  z-index: 3;
  max-width: 720px;
  margin: 0 auto;
  display: flex; flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 24px;
}
.cls-eyebrow{
  font-family: var(--mono);
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--gold);
  display: inline-block;
}

.cls-title{
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(40px, 5.4vw, 80px); line-height: 1.02; letter-spacing: -0.03em;
  color: var(--paper);
  margin: 0;
}
.cls-title em{ font-style: italic; color: var(--gold); }

.cls-strike{
  position: relative; display: inline-block;
  color: rgba(250,246,236,.55);
}
.cls-strike::after{
  content:""; position: absolute; left: -3%; right: -3%; top: 55%;
  height: 5px; background: var(--bogolan);
  transform: rotate(-2deg) scaleX(0); transform-origin: left;
  transition: transform 1.1s cubic-bezier(.7,0,.2,1) .4s;
  border-radius: 3px;
  box-shadow: 0 0 12px rgba(107,31,18,.45);
}
.cls-hero-card.r-fade.in .cls-strike::after{ transform: rotate(-2deg) scaleX(1); }

.cls-lead{
  font-family: var(--serif);
  font-size: clamp(17px, 1.4vw, 21px); line-height: 1.55;
  color: rgba(250,246,236,.78);
  max-width: 580px;
  margin: 8px auto 16px;
}

.cls-actions{
  display: inline-flex; align-items: center; gap: 24px;
  flex-wrap: wrap;
  justify-content: center;
}
.cls-btn{
  background: var(--gold) !important;
  color: var(--ink) !important;
  border-color: var(--gold) !important;
  font-size: 14px;
  padding: 16px 28px;
  font-weight: 600;
  box-shadow: 0 12px 32px -10px rgba(214,166,53,.5);
}
.cls-btn:hover{
  background: var(--paper) !important;
  border-color: var(--paper) !important;
  transform: translateY(-2px);
}
.cls-mail{
  font-family: var(--mono);
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(250,246,236,.55);
  text-decoration: underline;
  text-decoration-color: rgba(250,246,236,.2);
  text-underline-offset: 6px;
  transition: color .25s, text-decoration-color .25s;
}
.cls-mail:hover{ color: var(--gold); text-decoration-color: var(--gold); }

@media (max-width: 900px){
  .closing{ padding: 56px 0 80px; }
  .cls-hero-inner{ padding: 56px 32px; min-height: 460px; }
  .cls-glyph-bg{ width: 140px; height: 140px; top: 20px; right: 20px; opacity: .08; }
  .cls-title{ font-size: clamp(32px, 8vw, 56px); }
}
@media (max-width: 600px){
  .cls-actions{ flex-direction: column; align-items: center; gap: 16px; width: 100%; }
  .cls-btn{ width: 100%; justify-content: center; }
}

/* ============================================================
   Travailler avec nous (form page) — .tan-*
   ============================================================ */
.tan-page{
  background: var(--paper);
  color: var(--ink);
  position: relative;
}

/* Hero */
.tan-hero{
  background: var(--paper);
  padding: 140px 0 64px;
  border-bottom: 1px solid var(--line);
  position: relative;
  overflow: hidden;
}
.tan-hero::before{
  content:""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(900px 500px at 90% 0%, rgba(214,166,53,.18), transparent 60%),
    radial-gradient(700px 400px at 0% 100%, rgba(194,84,29,.10), transparent 65%);
}
.tan-hero .wrap{ max-width: 1080px; position: relative; z-index: 1; }

.tan-back{
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono);
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-soft);
  text-decoration: none;
  margin-bottom: 36px;
  padding: 8px 14px 8px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  transition: color .25s, border-color .25s;
}
.tan-back svg{ width: 14px; height: 14px; transition: transform .25s; }
.tan-back:hover{ color: var(--ocre); border-color: var(--ocre); }
.tan-back:hover svg{ transform: translateX(-3px); }

.tan-eyebrow{
  display: inline-block;
  margin-bottom: 24px;
  font-family: var(--mono);
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--ocre);
  font-weight: 600;
}

.tan-title{
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(40px, 5.4vw, 80px);
  line-height: 1.02; letter-spacing: -0.03em;
  color: var(--ink);
  margin: 0 0 24px;
}
.tan-title em{ font-style: italic; color: var(--ocre); }

.tan-lead{
  font-family: var(--serif);
  font-size: clamp(17px, 1.5vw, 22px); line-height: 1.55;
  color: var(--ink-soft);
  max-width: 700px;
  margin: 0;
}

@media (max-width: 700px){
  .tan-hero{ padding: 110px 0 48px; }
}

/* Body */
.tan-body{
  background: var(--bg);
  padding: 80px 0 100px;
}
.tan-body .wrap{ max-width: 720px; }

/* ----- Split layout (Morningside-style : intro left, form right) ----- */
.tan-split .tan-body{
  padding: 140px 0 100px;
}
.tan-split .tan-body .wrap{
  max-width: 1280px;
}
.tan-split-grid{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 80px;
  align-items: start;
}
.tan-intro{
  position: sticky;
  top: 120px;
  display: flex; flex-direction: column;
  gap: 0;
  padding-right: 16px;
}
.tan-intro .tan-back{ margin-bottom: 32px; }
.tan-intro .tan-eyebrow{ margin-bottom: 20px; }
.tan-intro .tan-title{
  font-size: clamp(36px, 4.4vw, 64px);
  margin: 0 0 22px;
}
.tan-intro .tan-lead{
  font-size: clamp(16px, 1.2vw, 19px);
  max-width: 480px;
  margin: 0 0 36px;
}

.tan-intro-points{
  list-style: none;
  margin: 0;
  padding: 28px 0 0;
  border-top: 1px dashed var(--line);
  display: flex; flex-direction: column;
  gap: 14px;
}
.tan-intro-points li{
  display: flex; align-items: center; gap: 12px;
  font-family: var(--mono);
  font-size: 12px; letter-spacing: .04em;
  color: var(--ink-soft);
}
.tan-intro-dot{
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--ocre);
  flex-shrink: 0;
}

@media (max-width: 1000px){
  .tan-split-grid{ grid-template-columns: 1fr; gap: 56px; }
  .tan-intro{ position: static; padding-right: 0; }
  .tan-split .tan-body{ padding: 120px 0 80px; }
}
@media (max-width: 700px){
  .tan-split .tan-body{ padding: 100px 0 64px; }
}

/* Form card */
.tan-form-card{
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 48px;
  box-shadow:
    0 1px 0 rgba(255,255,255,.7) inset,
    0 28px 56px -22px rgba(46,58,89,.16),
    0 12px 28px -12px rgba(0,0,0,.06);
  position: relative;
  overflow: hidden;
}
.tan-form-card::before{
  content:""; position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--gold), var(--ocre), var(--bogolan));
  opacity: .6;
}

.tan-form-head{
  margin-bottom: 36px;
  padding-bottom: 32px;
  border-bottom: 1px dashed var(--line);
}
.tan-form-eye{
  font-family: var(--mono);
  font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--ocre);
  display: inline-block;
  margin-bottom: 12px;
}
.tan-form-title{
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: clamp(28px, 3.2vw, 44px); line-height: 1;
  color: var(--ink);
  letter-spacing: -0.02em;
  margin: 0 0 10px;
}
.tan-form-sub{
  font-family: var(--mono);
  font-size: 11px; letter-spacing: .08em;
  color: var(--ink-soft);
  margin: 0;
}
.tan-req{
  color: var(--bogolan);
  font-weight: 700;
  margin-left: 1px;
}

/* Form rows / fields */
.tan-form{
  display: flex; flex-direction: column;
  gap: 24px;
}
.tan-row{
  display: flex; flex-direction: column;
  gap: 24px;
}
.tan-row-2{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
@media (max-width: 600px){
  .tan-row-2{ grid-template-columns: 1fr; }
}

.tan-field{
  display: flex; flex-direction: column;
  gap: 8px;
}
.tan-field label{
  font-family: var(--mono);
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink);
  font-weight: 600;
}

/* Inputs / selects / textareas */
.tan-form input[type="text"],
.tan-form input[type="email"],
.tan-form input[type="url"],
.tan-form input[type="tel"],
.tan-form select,
.tan-form textarea{
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.4;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px 16px;
  width: 100%;
  outline: none;
  transition: border-color .25s, background .25s, box-shadow .25s;
  -webkit-appearance: none;
  appearance: none;
}
.tan-form select{
  background-image:
    linear-gradient(45deg, transparent 50%, var(--ink-soft) 50%),
    linear-gradient(135deg, var(--ink-soft) 50%, transparent 50%);
  background-position:
    calc(100% - 18px) 50%,
    calc(100% - 13px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 40px;
  cursor: pointer;
}
.tan-form textarea{
  resize: vertical;
  min-height: 120px;
}

.tan-form input::placeholder,
.tan-form textarea::placeholder{
  color: rgba(26,20,16,.35);
}
.tan-form input:focus,
.tan-form input[type="tel"]:focus,
.tan-form select:focus,
.tan-form textarea:focus{
  border-color: var(--ocre);
  background: var(--paper);
  box-shadow: 0 0 0 4px rgba(214,166,53,.12);
}
.tan-form input:invalid:not(:placeholder-shown),
.tan-form textarea:invalid:not(:placeholder-shown){
  border-color: var(--bogolan);
}

.tan-hint{
  font-family: var(--mono);
  font-size: 10px; letter-spacing: .08em;
  color: var(--ink-soft);
  margin-top: 4px;
}

/* Chip groups (radio + checkbox) */
.tan-field-chips .tan-chips-label{
  margin-bottom: 4px;
}
.tan-chips{
  display: flex; flex-wrap: wrap;
  gap: 8px;
}
.tan-chips input[type="radio"],
.tan-chips input[type="checkbox"]{
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 1px; height: 1px;
}
.tan-chips label{
  display: inline-flex; align-items: center;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--bg);
  border: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 11px; letter-spacing: .08em; text-transform: none;
  color: var(--ink);
  cursor: pointer;
  transition: background .2s, border-color .2s, color .2s, transform .2s;
  font-weight: 500;
}
.tan-chips label:hover{
  border-color: var(--ocre);
  color: var(--ocre);
  transform: translateY(-1px);
}
.tan-chips input[type="radio"]:checked + label,
.tan-chips input[type="checkbox"]:checked + label{
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}
.tan-chips input[type="radio"]:checked + label::before,
.tan-chips input[type="checkbox"]:checked + label::before{
  content: "✓";
  display: inline-block;
  margin-right: 6px;
  color: var(--gold);
  font-weight: 700;
}
.tan-chips input:focus-visible + label{
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

/* Submit row */
.tan-submit-row{
  display: flex; align-items: center; gap: 24px;
  flex-wrap: wrap;
  margin-top: 12px;
  padding-top: 28px;
  border-top: 1px dashed var(--line);
}
.tan-submit{
  display: inline-flex; align-items: center; gap: 10px;
  padding: 16px 28px;
  background: var(--ink);
  color: var(--paper);
  border: none;
  border-radius: 12px;
  font-family: var(--mono);
  font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  font-weight: 700;
  cursor: pointer;
  transition: background .25s, transform .25s, box-shadow .25s;
  box-shadow: 0 12px 28px -10px rgba(26,20,16,.4);
}
.tan-submit:hover{
  background: var(--ocre);
  transform: translateY(-2px);
  box-shadow: 0 16px 32px -10px rgba(194,84,29,.45);
}
.tan-submit svg{
  width: 14px; height: 14px;
  transition: transform .3s var(--ease-out);
}
.tan-submit:hover svg{ transform: translateX(4px); }

.tan-submit-note{
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--mono);
  font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0;
  flex: 1; min-width: 240px;
}
.tan-submit-note strong{ color: var(--ocre); font-weight: 700; }
.tan-submit-dot{
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 4px rgba(214,166,53,.18);
  animation: dotpulse 2.4s ease-in-out infinite;
  flex-shrink: 0;
}

@media (max-width: 600px){
  .tan-form-card{ padding: 32px 24px; }
  .tan-submit{ width: 100%; justify-content: center; }
  .tan-submit-row{ flex-direction: column; align-items: stretch; gap: 16px; }
}

/* === Aside === */
.tan-aside{
  display: flex; flex-direction: column;
  gap: 16px;
  position: sticky;
  top: 100px;
}
@media (max-width: 900px){
  .tan-aside{ position: static; top: auto; }
}

.tan-aside-card{
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 24px;
  box-shadow:
    0 1px 0 rgba(255,255,255,.6) inset,
    0 12px 24px -16px rgba(46,58,89,.12);
}

.tan-aside-title{
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: 22px; line-height: 1.1;
  color: var(--ink);
  margin: 0 0 16px;
  letter-spacing: -0.01em;
}

/* Founder card */
.tan-founder-card{
  display: grid;
  grid-template-columns: 56px 1fr;
  grid-template-rows: auto auto;
  gap: 14px 14px;
  background: var(--ink);
  color: var(--paper);
  border-color: rgba(250,246,236,.1);
}
.tan-founder-avatar{
  grid-row: 1;
  width: 56px; height: 56px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(250,246,236,.15);
}
.tan-founder-avatar svg{ width: 100%; height: 100%; display: block; }
.tan-founder-meta{
  grid-row: 1;
  display: flex; flex-direction: column;
  justify-content: center;
  gap: 2px;
}
.tan-founder-name{
  font-family: var(--serif); font-style: italic;
  font-size: 18px;
  color: var(--paper);
  margin: 0;
}
.tan-founder-role{
  font-family: var(--mono);
  font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(250,246,236,.55);
  margin: 0;
}
.tan-founder-quote{
  grid-column: 1 / -1;
  font-family: var(--serif); font-style: italic;
  font-size: 14px; line-height: 1.5;
  color: rgba(250,246,236,.85);
  margin: 4px 0 0;
  padding-top: 14px;
  border-top: 1px dashed rgba(250,246,236,.18);
}

/* Steps list */
.tan-steps{
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column;
  gap: 16px;
}
.tan-steps li{
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  padding: 0;
}
.tan-step-num{
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: rgba(214,166,53,.16);
  border: 1px solid rgba(214,166,53,.4);
  color: var(--ocre);
  font-family: var(--mono);
  font-size: 11px; font-weight: 700;
}
.tan-steps li > div{
  display: flex; flex-direction: column;
  gap: 2px;
}
.tan-steps li strong{
  font-family: var(--sans);
  font-size: 13px;
  color: var(--ink);
  font-weight: 600;
}
.tan-steps li span{
  font-family: var(--sans);
  font-size: 12px;
  color: var(--ink-soft);
  line-height: 1.45;
}

/* Direct contact list */
.tan-direct{
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column;
  gap: 12px;
}
.tan-direct li{
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--bg);
  border: 1px solid var(--line);
  transition: border-color .25s, transform .25s;
}
.tan-direct li:hover{
  border-color: var(--ocre);
  transform: translateX(2px);
}
.tan-direct-icon{
  flex: 0 0 auto;
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--paper);
  color: var(--ocre);
  border: 1px solid var(--line);
}
.tan-direct-icon svg{ width: 14px; height: 14px; }
.tan-direct a{
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink);
  text-decoration: none;
  font-weight: 600;
}
.tan-direct a:hover{ color: var(--ocre); }
.tan-direct-tag{
  margin-left: auto;
  padding: 3px 8px;
  background: rgba(45,110,74,.15);
  color: #1d6f4a;
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 9px; letter-spacing: .12em; text-transform: uppercase;
  font-weight: 700;
}

/* Studio card */
.tan-studio-card{
  background: var(--bg);
}
.tan-studio-eye{
  font-family: var(--mono);
  font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ocre);
  display: inline-block;
  margin-bottom: 8px;
  font-weight: 600;
}
.tan-studio-line{
  font-family: var(--serif);
  font-size: 14px; line-height: 1.45;
  color: var(--ink-soft);
  margin: 0;
}
.tan-studio-line strong{
  color: var(--ink);
  font-weight: 500;
  font-style: italic;
  font-size: 16px;
}

/* ============================================================
   BLOG — back link, "soon" empty card, list polish
   ============================================================ */
.blog-header .tan-back{
  margin-bottom: 32px;
}
.blog-header .bh-title{
  font-size: clamp(40px, 7vw, 96px);
  line-height: 1;
}

/* "Bientôt" empty-state card — slots into the ins-grid alongside articles */
.bl-soon{
  background: linear-gradient(160deg, var(--bg) 0%, var(--bg-2) 100%);
  border: 1px dashed var(--line-strong);
  border-radius: 20px;
  padding: 32px 28px;
  display: flex; flex-direction: column;
  gap: 16px;
  align-items: flex-start;
  justify-content: center;
  min-height: 360px;
  text-align: left;
}
.bl-soon .eyebrow{
  color: var(--ocre);
  font-weight: 600;
}
.bl-soon p{
  font-size: 15px; line-height: 1.55;
  color: var(--ink-soft);
  margin: 0;
}
.bl-soon p strong{ color: var(--ink); font-weight: 500; }
.bl-soon-cta{
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 18px;
  background: var(--ink); color: var(--paper);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  font-weight: 600;
  transition: background .25s, transform .25s;
  margin-top: 8px;
}
.bl-soon-cta svg{ width: 14px; height: 14px; transition: transform .25s; }
.bl-soon-cta:hover{ background: var(--ocre); transform: translateY(-2px); }
.bl-soon-cta:hover svg{ transform: translateX(3px); }

@media (max-width: 700px){
  .bl-soon{ min-height: 240px; padding: 28px 22px; }
}

/* ============================================================
   RESPONSIVE — mobile/tablet refinements (Android + iOS)
   ============================================================ */

/* iOS safe area for notch/dynamic island */
@supports (padding: max(0px)){
  .nav{
    top: max(22px, env(safe-area-inset-top, 22px));
  }
  .foot-inner{
    padding-bottom: max(0px, env(safe-area-inset-bottom));
  }
}

/* Note: body has overflow-x: hidden from base styles. Do NOT add overflow-x
   to <html> — it breaks position: sticky on Problem v3 + Solution sections. */

/* Form inputs : 16px font size prevents iOS zoom on focus */
input[type="text"], input[type="email"], input[type="tel"],
input[type="url"], input[type="search"], input[type="number"],
select, textarea{
  font-size: 16px;
}

/* Tighter wrap padding on small screens */
@media (max-width: 700px){
  .wrap{ padding: 0 20px; }
  .section{ padding: 80px 0; }
  .section.tight{ padding: 56px 0; }
}
@media (max-width: 480px){
  .wrap{ padding: 0 16px; }
  .section{ padding: 64px 0; }
  h1{ font-size: clamp(40px, 13vw, 72px); }
  h2{ font-size: clamp(32px, 9vw, 56px); }
}

/* Touch targets minimum 44x44 — links in nav-links */
@media (hover: none){
  .nav-links a{ padding: 10px 4px; }
  .foot-meta a{ padding: 8px 0; }
}

/* Collapse the nav links on phones — replace with burger */
@media (max-width: 720px){
  .nav{
    gap: 12px;
    padding: 6px 6px 6px 14px;
  }
  .nav-links{ display: none; }
  .nav-cta{ display: none !important; }
  .brand-logo-img{ height: 38px; }
}

/* Spline iframes : reduce minimum height on small screens */
@media (max-width: 700px){
  .spline-bg iframe,
  .cls-spline-bg iframe{
    min-height: 100%;
  }
  .hero-card-inner{ min-height: 560px; }
  .cls-hero-inner{ min-height: 420px; }
}

/* Hero adjustments — prevent overflow */
@media (max-width: 600px){
  .hero-headline-pills{
    font-size: clamp(36px, 14vw, 72px) !important;
  }
  .hero-headline-pills .pill{
    width: 0.9em; height: 0.9em;
  }
  .hero-cta-row{ gap: 18px; }
  .hero-buttons{ flex-direction: column; align-items: stretch; gap: 12px; }
  .hero-buttons .btn-hero{ width: 100%; justify-content: center; }
}

/* Solution stacking cards : reduce sticky offset on phones */
@media (max-width: 700px){
  .sol-card{ padding: 32px 22px; }
  .sol-head{ margin-bottom: 36px; }
  .sol-title{ font-size: clamp(36px, 9vw, 56px); }
}

/* Cases (3 cols) → already collapses, just tighten on small */
@media (max-width: 700px){
  .res-grid, .results-grid{ gap: 18px; }
}

/* FAQ */
@media (max-width: 700px){
  .faq-card{ padding: 28px 22px !important; }
}

/* Footer brand giant — keep readable, prevent overflow */
@media (max-width: 700px){
  .foot-brand-text{ font-size: clamp(64px, 22vw, 140px) !important; }
  .foot-mega-line{ font-size: clamp(22px, 7.4vw, 44px) !important; }
  .mega-badge{ right: -22px !important; top: 6px !important; }
  .foot-inner{ padding: 56px 20px 24px !important; }
  .foot-meta{ flex-wrap: wrap; gap: 14px; }
  .foot-socials{ margin-top: 36px; gap: 24px; }
}

/* Travailler avec nous form card on small screens */
@media (max-width: 600px){
  .tan-form-card{ padding: 28px 22px !important; }
  .tan-row-2{ grid-template-columns: 1fr !important; }
  .tan-form-title{ font-size: clamp(28px, 7vw, 36px); }
}

/* Article page adjustments */
@media (max-width: 700px){
  .art-title{ font-size: clamp(34px, 8vw, 56px) !important; }
  .article-body{ padding: 56px 0 80px !important; }
  .art-toc-list{ font-size: 14px; }
  .art-share-row{ flex-wrap: wrap; }
  .art-cover{ min-height: 240px !important; }
  .art-cover-stamp{ top: 18px !important; right: 18px !important; padding: 8px 12px !important; }
  .art-cover-stamp .s2{ font-size: 22px !important; }
  .art-cover-tags{ bottom: 18px !important; left: 18px !important; }
  .art-author-strip{ flex-direction: column; align-items: flex-start; gap: 14px; }
}

/* Case study pages */
@media (max-width: 700px){
  .cs-title{ font-size: clamp(32px, 8vw, 56px) !important; }
  .cs-meta-grid{ grid-template-columns: 1fr 1fr !important; gap: 16px; }
  .cs-section{ margin-bottom: 56px; }
}

/* Marquee : slower + smaller text on phone */
@media (max-width: 700px){
  .marquee-track{ font-size: 14px; gap: 24px; }
}

/* Problem v3 sticky scrollytelling — readable text on phone */
@media (max-width: 700px){
  .p3-line{ font-size: clamp(24px, 6.5vw, 40px) !important; line-height: 1.15 !important; }
  .p3-stage{ padding: 0 20px; }
}

/* Closing CTA */
@media (max-width: 600px){
  .cls-title{ font-size: clamp(30px, 8.4vw, 52px) !important; }
  .cls-content{ padding: 0 4px; }
}

/* Insights / blog cards : taller cover on small for impact */
@media (max-width: 700px){
  .ins-card-cover{ height: 180px; }
  .ins-card-num{ font-size: 44px; top: 12px; left: 16px; }
  .ins-card-body{ padding: 20px 20px 18px; }
}

/* Bogolan divider : slightly shorter on phones */
@media (max-width: 700px){
  .bogolan-divider{ height: 28px !important; }
}

/* Improve tap on chips */
@media (hover: none){
  .tan-chips label{
    min-height: 44px;
    display: inline-flex; align-items: center;
  }
}

/* Code blocks in articles : horizontal scroll instead of overflow */
.art-code, pre.art-code{
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}
@media (max-width: 600px){
  .art-code, pre.art-code{
    font-size: 12px !important;
    padding: 14px 16px !important;
    border-radius: 12px !important;
  }
  .art-code-inline{ font-size: 12.5px !important; }
}

/* Long words wrap on small screens — prevent overflow */
@media (max-width: 600px){
  .art-p, .cs-section p, .tan-lead, .bh-sub, .ins-card p{
    word-wrap: break-word;
    overflow-wrap: break-word;
  }
}


/* ============================================================
   MOBILE-FIRST RESPONSIVE OVERHAUL — 90% of viewers are on phone
   Targets: 768 / 600 / 480 / 380 — Android + iOS — May 2026
   ============================================================ */

/* ---- Global tightening on phones ---------------------------- */
@media (max-width: 600px){
  :root{
    --sect-pad-y: 64px;
  }
  .wrap{ padding: 0 18px; }
  .section{ padding: 64px 0; }
  body{ font-size: 15px; line-height: 1.55; }
  /* Big serif h1/h2 — recompute aggressively */
  h1{ font-size: clamp(38px, 11vw, 60px); line-height: 1.02; letter-spacing: -.025em; }
  h2{ font-size: clamp(30px, 8.5vw, 48px); line-height: 1.05; letter-spacing: -.02em; }
  h3{ font-size: clamp(22px, 6vw, 32px); line-height: 1.15; }
  p{ font-size: 15px; line-height: 1.6; }
}
@media (max-width: 380px){
  .wrap{ padding: 0 14px; }
  .section{ padding: 56px 0; }
}

/* ---- HERO — compact + readable ----------------------------- */
@media (max-width: 700px){
  .hero{ padding: 0; }
  .hero-card{ padding: 0; border-radius: 0; }
  .hero-card-inner{
    border-radius: 24px;
    min-height: 620px;
    padding: 24px 18px 28px !important;
  }
  .hero-headline-pills{
    font-size: clamp(40px, 13vw, 68px) !important;
    line-height: .98;
    letter-spacing: -.025em;
  }
  .hero-headline-pills .pill{
    width: 0.85em; height: 0.85em;
  }
  .hero-eyebrow{ font-size: 11px !important; letter-spacing: .14em !important; }
  .hero-sub{ font-size: 15px !important; line-height: 1.5 !important; max-width: 92%; }
  .hero-buttons{ width: 100%; }
  .hero-buttons .btn-hero{
    width: 100%; justify-content: center;
    min-height: 52px; padding: 14px 20px; font-size: 14px;
  }
  .hero-meta-row, .hero-cta-row{ flex-wrap: wrap; gap: 14px; }
}
@media (max-width: 380px){
  .hero-card-inner{ min-height: 580px; padding: 20px 14px 24px !important; }
  .hero-headline-pills{ font-size: clamp(36px, 12.5vw, 56px) !important; }
}

/* ---- MARQUEE — slower + tighter ---------------------------- */
@media (max-width: 600px){
  .marquee{ padding: 18px 0 !important; }
  .marquee-track{ font-size: 13px !important; gap: 22px; }
}

/* ---- PROBLEM v3 sticky scrollytelling --------------------- */
@media (max-width: 700px){
  .p3-stage{ padding: 0 16px; min-height: 100vh; min-height: 100dvh; }
  .p3-line{
    font-size: clamp(22px, 6.4vw, 36px) !important;
    line-height: 1.18 !important;
    letter-spacing: -.015em !important;
  }
  .p3-eyebrow{ font-size: 10px !important; letter-spacing: .18em !important; }
  .p3-num{ font-size: 12px !important; }
}
@media (max-width: 380px){
  .p3-line{ font-size: clamp(20px, 6vw, 30px) !important; }
}

/* ---- SOLUTION — sticky stacking cards --------------------- */
@media (max-width: 700px){
  .sol-card{
    padding: 28px 20px !important;
    border-radius: 22px !important;
  }
  .sol-eyebrow{ font-size: 11px !important; }
  .sol-title{
    font-size: clamp(30px, 8.5vw, 46px) !important;
    line-height: 1.04;
  }
  .sol-lead{ font-size: 15px !important; line-height: 1.55 !important; }
  .sol-brand-logo{ height: 64px !important; margin: 18px auto 0 !important; }
  .sol-list li{ font-size: 14px !important; line-height: 1.5 !important; }
  /* Reduce sticky offset so reveal feels right on phone */
  .sol-stack .sol-card{ top: 16px !important; }
}
@media (max-width: 380px){
  .sol-card{ padding: 24px 16px !important; }
  .sol-title{ font-size: clamp(26px, 8vw, 38px) !important; }
}

/* ---- SP2 — Services cards --------------------------------- */
@media (max-width: 700px){
  .sol-p2{
    padding: 28px 20px !important;
    border-radius: 22px !important;
  }
  .sp2-head{ gap: 14px !important; margin-bottom: 18px !important; }
  .sp2-num{ font-size: 11px !important; }
  .sp2-name{ font-size: clamp(22px, 6vw, 30px) !important; line-height: 1.1 !important; }
  .sp2-desc{ font-size: 15px !important; line-height: 1.55 !important; }
  .sp2-list li{ font-size: 14px !important; line-height: 1.5 !important; padding: 8px 0 !important; }
  .sp2-cta{
    width: 100%; justify-content: center;
    min-height: 48px; padding: 12px 18px;
  }
  .sp2-marker{ width: 28px !important; height: 28px !important; }
  .sp2-dot{ width: 8px !important; height: 8px !important; }
}

/* ---- CASES — single column on phone ----------------------- */
@media (max-width: 700px){
  .results-card{ padding: 24px 18px !important; border-radius: 22px !important; }
  .results-head{ margin-bottom: 22px !important; gap: 14px !important; }
  .results-eyebrow{ font-size: 10px !important; }
  .results-title h2{ font-size: clamp(34px, 9vw, 52px) !important; }
  .results-sub{ font-size: 14px !important; }
  .results-grid{ gap: 14px !important; }
  /* Col 1 — CTA simple */
  .res-cta{
    min-height: auto !important;
    padding: 22px 18px !important;
  }
  .res-cta-title{ font-size: clamp(24px, 6.5vw, 34px) !important; }
  .res-cta-desc{ font-size: 14px !important; }
  .res-cta-btn{ height: 48px !important; font-size: 14px !important; }
  /* Quote cards */
  .res-quote{ padding: 18px !important; }
  .res-quote-text{ font-size: 14px !important; line-height: 1.55 !important; }
  .res-quote-stars svg{ width: 14px !important; height: 14px !important; }
  /* Mini avatar cards */
  .res-mini{ padding: 14px !important; }
  .res-mini-avatar{ width: 34px !important; height: 34px !important; }
  .res-mini-name{ font-size: 13px !important; }
}

/* ---- FAQ — touch-friendly accordion ----------------------- */
@media (max-width: 700px){
  .faq-card{ padding: 26px 18px !important; border-radius: 22px !important; }
  .faq-grid{ gap: 24px !important; }
  .faq-title{ font-size: clamp(34px, 9vw, 52px) !important; }
  .faq-sub{ font-size: 14px !important; }
  .faq-eyebrow{ font-size: 11px !important; }
  .faq-q{
    padding: 18px 0 !important;
    font-size: 15px !important;
    min-height: 56px;
    line-height: 1.35;
    gap: 14px;
  }
  .faq-q span:first-child{ flex: 1; }
  .faq-icon{ width: 28px; height: 28px; flex-shrink: 0; }
  .faq-answer p{ font-size: 14px !important; line-height: 1.6 !important; }
  .faq-cta{
    width: 100%; justify-content: center;
    min-height: 48px; padding: 12px 18px;
  }
}

/* ---- CLOSING CTA card ------------------------------------- */
@media (max-width: 700px){
  .cls-hero-card{ padding: 0; border-radius: 0; }
  .cls-hero-inner{
    border-radius: 24px;
    min-height: 460px;
    padding: 36px 22px 40px !important;
  }
  .cls-eyebrow{ font-size: 11px !important; }
  .cls-title{
    font-size: clamp(34px, 9.5vw, 56px) !important;
    line-height: 1.02 !important;
  }
  .cls-lead{ font-size: 15px !important; line-height: 1.5 !important; max-width: 92%; }
  .cls-actions{ width: 100%; }
  .cls-btn{
    width: 100%; justify-content: center;
    min-height: 52px; padding: 14px 20px;
  }
}
@media (max-width: 380px){
  .cls-hero-inner{ min-height: 420px; padding: 28px 18px 32px !important; }
  .cls-title{ font-size: clamp(30px, 9vw, 44px) !important; }
}

/* ---- FOOTER — IMPOSANT comme sur desktop ------------------ */
@media (max-width: 700px){
  .foot-inner{ padding: 56px 20px 0 !important; }
  .foot-meta{ font-size: 13px !important; gap: 12px !important; flex-wrap: wrap; }
  .foot-copyright{ width: 100%; }

  .foot-mega{ gap: 14px !important; margin-top: 40px !important; }
  /* Phone + email : grands, allowed to wrap pour ne pas overflow */
  .foot-mega-line{
    font-size: clamp(44px, 11.5vw, 88px) !important;
    line-height: 1 !important;
    letter-spacing: -.035em !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 8px 0 !important;
    flex-wrap: wrap !important;
    align-items: center !important;
  }
  .foot-mega-line .mega-text{
    white-space: normal !important;
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  /* Badge W/E reste visible et bien placé */
  .mega-badge{
    width: 24px !important; height: 24px !important;
    right: 0 !important; top: 4px !important;
    font-size: 11px !important;
    position: relative;
    margin-left: 12px;
    opacity: 1 !important;
    transform: none !important;
    display: inline-flex !important;
    flex-shrink: 0;
  }

  /* Socials gardent leur taille tap-friendly */
  .foot-socials{ margin-top: 40px !important; gap: 26px !important; padding-left: 0 !important; }
  .foot-socials a{
    width: 44px; height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
  }
  .foot-socials svg{ width: 24px !important; height: 24px !important; }

  /* Brand giant : reste imposant */
  .foot-brand-giant{ margin-top: 56px !important; }
  .foot-brand-text{
    font-size: clamp(96px, 28vw, 220px) !important;
    line-height: .82 !important;
    letter-spacing: -.04em !important;
    text-align: left !important;
  }
  .foot-brand-fade{ height: 80px !important; }
}
@media (max-width: 380px){
  .foot-mega-line{ font-size: clamp(38px, 11vw, 64px) !important; }
  .foot-brand-text{ font-size: clamp(80px, 26vw, 160px) !important; }
}

/* ---- TRAVAILLER AVEC NOUS form ---------------------------- */
@media (max-width: 900px){
  .tan-split-grid{
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  .tan-intro{ position: static !important; padding-bottom: 0 !important; }
  .tan-form-card{ padding: 32px 24px !important; }
}
@media (max-width: 600px){
  .tan-body{ padding: 40px 0 80px !important; }
  .tan-back{ font-size: 13px !important; padding: 8px 0 !important; }
  .tan-eyebrow{ font-size: 10px !important; }
  .tan-title{ font-size: clamp(34px, 9vw, 52px) !important; line-height: 1.04 !important; }
  .tan-lead{ font-size: 15px !important; line-height: 1.55 !important; }
  .tan-intro-points li{ font-size: 13px !important; gap: 10px !important; }
  .tan-form-head{ margin-bottom: 22px !important; }
  .tan-form-eye{ font-size: 10px !important; }
  .tan-form-title{ font-size: clamp(26px, 7vw, 36px) !important; }
  .tan-form{ gap: 18px !important; }
  .tan-row, .tan-row-2{ grid-template-columns: 1fr !important; gap: 18px !important; }
  .tan-field label{ font-size: 13px !important; }
  .tan-field input,
  .tan-field select,
  .tan-field textarea{
    padding: 14px 16px !important;
    border-radius: 12px !important;
    min-height: 48px;
  }
  .tan-chips{ gap: 8px !important; }
  .tan-chips label{
    padding: 10px 14px !important;
    font-size: 13px !important;
    min-height: 44px;
  }
  .tan-submit{
    width: 100%; justify-content: center;
    min-height: 52px; padding: 14px 24px;
    font-size: 15px;
  }
  .tan-submit-row{ flex-direction: column; align-items: stretch; gap: 14px; }
  .tan-submit-note{ text-align: center; font-size: 13px; }
}

/* ---- ARTICLE page ----------------------------------------- */
@media (max-width: 700px){
  .article-hero{ padding: 32px 0 24px !important; }
  .art-breadcrumb{ font-size: 12px !important; flex-wrap: wrap; gap: 8px !important; }
  .art-top-meta{ flex-wrap: wrap; font-size: 12px !important; gap: 10px !important; }
  .art-title{
    font-size: clamp(30px, 8vw, 48px) !important;
    line-height: 1.08 !important;
    letter-spacing: -.02em !important;
  }
  .art-lead{ font-size: 16px !important; line-height: 1.55 !important; }
  .art-author-strip{
    flex-direction: column !important; align-items: flex-start !important;
    gap: 12px !important; padding: 16px !important;
  }
  .art-author-name{ font-size: 14px !important; }
  .art-author-role{ font-size: 12px !important; }
  .art-share-row{ flex-wrap: wrap; gap: 8px !important; }
  .art-share-row a, .art-share-row button{
    min-height: 40px; min-width: 40px;
    display: inline-flex; align-items: center; justify-content: center;
  }
  .article-body{ padding: 40px 0 64px !important; }
  .article-body .wrap{ display: block !important; }
  .art-toc{
    position: static !important; margin-bottom: 24px !important;
    padding: 18px !important; border-radius: 14px !important;
  }
  .art-toc-list{ font-size: 13px !important; }
  .art-content{ padding: 0 !important; }
  .art-content h2{
    font-size: clamp(24px, 6.5vw, 34px) !important;
    margin-top: 32px !important; margin-bottom: 14px !important;
  }
  .art-content h3{
    font-size: clamp(20px, 5.5vw, 26px) !important;
    margin-top: 24px !important; margin-bottom: 10px !important;
  }
  .art-content p, .art-p{ font-size: 16px !important; line-height: 1.65 !important; }
  .art-content ul li, .art-content ol li{
    font-size: 16px !important; line-height: 1.6 !important; margin-bottom: 10px;
  }
  .art-cover{ min-height: 220px !important; border-radius: 18px !important; }
  .art-cover-stamp{
    top: 14px !important; right: 14px !important;
    padding: 6px 10px !important; font-size: 11px !important;
  }
  .art-cover-stamp .s2{ font-size: 18px !important; }
  .art-cover-tags{ bottom: 14px !important; left: 14px !important; }
  .art-cover-tags span{ font-size: 11px !important; padding: 4px 10px !important; }
  blockquote, .art-quote{
    font-size: 17px !important; padding: 18px 16px !important;
    border-radius: 12px !important;
  }
}

/* ---- BLOG page -------------------------------------------- */
@media (max-width: 700px){
  .blog-header{ padding: 56px 0 32px !important; }
  .bh-grid{
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }
  .bh-eyebrow{ font-size: 11px !important; }
  .bh-title{ font-size: clamp(38px, 11vw, 64px) !important; line-height: 1.02 !important; }
  .bh-sub{ font-size: 15px !important; line-height: 1.55 !important; }
  .bh-meta{ font-size: 12px !important; flex-wrap: wrap; gap: 10px !important; }
  .ins-grid{
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }
  .ins-card{ border-radius: 18px !important; }
  .ins-card-cover{ height: 200px !important; }
  .ins-card-num{ font-size: 40px !important; top: 14px !important; left: 18px !important; }
  .ins-card-body{ padding: 22px 20px 22px !important; }
  .ins-card h3{ font-size: clamp(20px, 5.6vw, 26px) !important; line-height: 1.2 !important; }
  .ins-card p{ font-size: 14px !important; line-height: 1.55 !important; }
  .ins-card-meta{ font-size: 11px !important; }
  .bl-soon{ padding: 32px 22px !important; min-height: 200px !important; }
  .bl-soon h3{ font-size: clamp(22px, 6vw, 30px) !important; }
  .bl-soon p{ font-size: 14px !important; }
}

/* ---- CAS CLIENTS pages ----------------------------------- */
@media (max-width: 700px){
  .cs-hero{ padding: 32px 0 24px !important; }
  .cs-breadcrumb{ font-size: 12px !important; flex-wrap: wrap; }
  .cs-eyebrow{ font-size: 11px !important; }
  .cs-title{
    font-size: clamp(30px, 8.5vw, 50px) !important;
    line-height: 1.04 !important;
  }
  .cs-lead{ font-size: 16px !important; line-height: 1.55 !important; }
  .cs-meta-grid{
    grid-template-columns: 1fr 1fr !important;
    gap: 14px !important;
  }
  .cs-meta-cell{ padding: 14px !important; border-radius: 12px !important; }
  .cs-meta-label{ font-size: 10px !important; }
  .cs-meta-value{ font-size: 14px !important; }
  .cs-section{ margin-bottom: 48px !important; }
  .cs-section h2{
    font-size: clamp(26px, 7vw, 36px) !important;
    margin-bottom: 14px !important;
  }
  .cs-section p, .cs-section li{ font-size: 16px !important; line-height: 1.6 !important; }
  .cs-quote{ padding: 22px 18px !important; font-size: 17px !important; }
  .cs-related-grid{
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
}

/* ---- NAV BURGER — mobile menu ----------------------------- */
.nav-burger{
  display: none;
  width: 40px; height: 40px;
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
  border: 0;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  padding: 0;
  flex-shrink: 0;
  transition: background .25s var(--ease-out);
}
.nav.past-hero .nav-burger{ background: var(--ink); color: var(--paper); }
.nav-burger span{
  display: block;
  width: 18px; height: 1.8px;
  background: currentColor;
  border-radius: 2px;
  transition: transform .3s var(--ease-out), opacity .25s;
}
.nav-burger.is-open span:nth-child(1){
  transform: translateY(3.4px) rotate(45deg);
}
.nav-burger.is-open span:nth-child(2){
  transform: translateY(-3.4px) rotate(-45deg);
}

/* Mobile menu overlay (full-screen) */
.mobile-menu{
  position: fixed;
  inset: 0;
  z-index: 99;
  background: var(--ink);
  color: var(--paper);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 96px 24px 48px;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: opacity .35s var(--ease-out), visibility 0s linear .35s;
}
.mobile-menu.is-open{
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
  transition: opacity .35s var(--ease-out), visibility 0s linear 0s;
}
.mobile-menu-inner{
  width: 100%;
  max-width: 460px;
  display: flex;
  flex-direction: column;
}
.mobile-menu-nav{
  display: flex;
  flex-direction: column;
  margin-bottom: 36px;
}
.mobile-menu-nav a{
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--serif);
  font-size: clamp(34px, 9.5vw, 52px);
  line-height: 1.1;
  letter-spacing: -.02em;
  color: var(--paper);
  text-decoration: none;
  padding: 18px 0;
  border-bottom: 1px solid rgba(250,246,236,.10);
  transition: color .25s, padding-left .25s var(--ease-out);
}
.mobile-menu-nav a::after{
  content: "→";
  font-family: var(--mono);
  font-size: 18px;
  color: rgba(250,246,236,.30);
  transition: color .25s, transform .25s;
}
.mobile-menu-nav a:hover,
.mobile-menu-nav a:active{
  color: var(--gold);
  padding-left: 8px;
}
.mobile-menu-nav a:hover::after,
.mobile-menu-nav a:active::after{
  color: var(--gold);
  transform: translateX(4px);
}
.mobile-menu-cta{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 18px 28px;
  background: var(--paper);
  color: var(--ink);
  border-radius: 999px;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  margin-top: 8px;
  min-height: 56px;
  transition: background .25s var(--ease-out);
}
.mobile-menu-cta svg{ width: 16px; height: 16px; }
.mobile-menu-cta:hover,
.mobile-menu-cta:active{ background: var(--gold); }

/* Show burger only on mobile, ensure nav stays centered */
@media (max-width: 720px){
  .nav-burger{ display: inline-flex; }
  .nav{
    top: max(14px, env(safe-area-inset-top, 14px)) !important;
    padding: 6px 6px 6px 14px !important;
    gap: 12px !important;
    max-width: calc(100vw - 24px) !important;
  }
  .brand-logo-img{ height: 36px !important; }
}
@media (max-width: 380px){
  .nav{
    padding: 5px 5px 5px 12px !important;
    max-width: calc(100vw - 16px) !important;
  }
  .brand-logo-img{ height: 32px !important; }
  .mobile-menu{ padding: 88px 20px 40px; }
  .mobile-menu-nav a{ font-size: clamp(30px, 9vw, 44px); padding: 16px 0; }
}

/* ---- BOGOLAN dividers — consistent on phones -------------- */
@media (max-width: 700px){
  .bogolan-divider{ height: 24px !important; }
}
@media (max-width: 380px){
  .bogolan-divider{ height: 20px !important; }
}

/* ---- TAP feedback — make all buttons feel responsive ------ */
@media (hover: none){
  .btn-hero:active,
  .nav-cta:active,
  .sp2-cta:active,
  .res-cta-btn:active,
  .res-metric-cta:active,
  .cls-btn:active,
  .tan-submit:active,
  .faq-cta:active,
  .ins-card:active,
  .case-link:active{
    transform: scale(.97);
    transition: transform .12s ease-out;
  }
}

/* ---- Disable heavy hover effects on touch ---------------- */
@media (hover: none){
  .ins-card:hover,
  .res-mini:hover,
  .res-quote:hover,
  .res-cta:hover,
  .case-link:hover{
    transform: none;
  }
}

/* ---- Prevent any horizontal overflow at root -------------- */
/* overflow-x: clip is supported in all modern browsers and does NOT
   break position: sticky like overflow-x: hidden does on <html>. */
html, body{
  overflow-x: clip;
  max-width: 100%;
}
@media (max-width: 700px){
  /* Belt-and-suspenders : clip any decorative element that intentionally
     sticks out (giant footer text, marquee, hero spline, etc.) */
  main, .foot, .foot-brand-giant, .marquee, .hero, .closing,
  .hero-card, .cls-hero-card, .tan-page, .legal-page{
    overflow-x: clip;
    max-width: 100%;
  }
  /* Hard cap on inline media too */
  img, video, iframe, svg{ max-width: 100%; }
}

/* ---- Reduce decorative blur on low-power devices ---------- */
@media (max-width: 600px){
  .res-metric, .res-mini, .res-quote, .res-cta,
  .faq-bg-glyph, .cls-glyph-bg{
    -webkit-backdrop-filter: none !important;
            backdrop-filter: none !important;
  }
}

/* ============================================================
   Vulgarisation articles (qu-est-ce-que-l-IA, etc.)
   Simpler typography, no sticky TOC, max-readability
   ============================================================ */
.art-wrap{ max-width: 760px; }

.art-content h2{
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(28px, 3.4vw, 42px);
  line-height: 1.08;
  letter-spacing: -.02em;
  color: var(--ink);
  margin: 56px 0 18px;
  scroll-margin-top: 100px;
}
.art-content h2 em{ font-style: italic; color: var(--ocre); }

.art-content h3{
  font-family: var(--sans);
  font-weight: 600;
  font-size: clamp(20px, 2.2vw, 26px);
  line-height: 1.25;
  letter-spacing: -.01em;
  color: var(--ink);
  margin: 36px 0 12px;
  scroll-margin-top: 100px;
}

.art-content ul, .art-content ol,
.art-list{
  margin: 0 0 28px;
  padding-left: 22px;
  color: var(--ink-soft);
}
.art-content li, .art-list li{
  margin-bottom: 10px;
  line-height: 1.65;
}
.art-content li::marker, .art-list li::marker{ color: var(--ocre); }
.art-content li strong, .art-list li strong{ color: var(--ink); font-weight: 600; }

.art-content blockquote, .art-quote{
  margin: 28px 0;
  padding: 22px 28px;
  border-left: 3px solid var(--ocre);
  background: rgba(214,166,53,.06);
  border-radius: 0 12px 12px 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.45;
  color: var(--ink);
}

.art-content a:not(.btn-hero):not(.cls-btn){
  color: var(--ocre);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color .2s;
}
.art-content a:not(.btn-hero):not(.cls-btn):hover{
  color: var(--bogolan, #6b1f12);
}

.art-p-lead{
  font-family: var(--serif);
  font-size: clamp(20px, 1.8vw, 24px);
  line-height: 1.5;
  color: var(--ink);
  margin-bottom: 36px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--line);
}

.art-divider{
  height: 1px;
  background: var(--line);
  border: 0;
  margin: 56px 0 32px;
}

.art-content p em{ font-style: italic; color: var(--ink); }
.art-content p strong{ color: var(--ink); font-weight: 600; }

@media (max-width: 700px){
  .art-content h2{
    font-size: clamp(24px, 6.8vw, 32px) !important;
    margin: 44px 0 14px !important;
  }
  .art-content h3{
    font-size: clamp(18px, 5vw, 22px) !important;
    margin: 28px 0 10px !important;
  }
  .art-p-lead{
    font-size: 17px !important;
    margin-bottom: 28px !important;
    padding-bottom: 18px !important;
  }
  .art-divider{ margin: 40px 0 24px !important; }
  .art-content blockquote, .art-quote{
    padding: 16px 18px !important;
    font-size: 16px !important;
  }
}


/* ============================================================
   LEGAL pages — Confidentialité + Conditions
   Morningside-style : long-form serif, clean numbered sections
   ============================================================ */

.legal-page{ background: var(--paper); color: var(--ink); }

.legal-hero{
  padding: 160px 0 56px;
  background: var(--paper);
  position: relative;
  overflow: hidden;
}
.legal-hero::before{
  content:""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(900px 500px at 90% 0%, rgba(214,166,53,.16), transparent 60%),
    radial-gradient(700px 400px at 0% 100%, rgba(194,84,29,.08), transparent 65%);
}
.legal-hero .wrap{ max-width: 880px; position: relative; z-index: 1; }

.legal-meta{
  margin-top: 28px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .08em;
  color: var(--ink-soft);
}

.legal-body{
  padding: 48px 0 120px;
  background: var(--bg);
  border-top: 1px solid var(--line);
}
.legal-body .wrap{ max-width: 760px; }

.legal-content{
  font-family: var(--sans);
  color: var(--ink);
}

.legal-intro{
  font-family: var(--serif);
  font-size: clamp(18px, 1.5vw, 22px);
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0 0 48px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--line);
}

.legal-section{
  position: relative;
  padding: 40px 0;
  border-bottom: 1px solid var(--line);
}
.legal-section:last-of-type{ border-bottom: 0; }

.legal-num{
  display: inline-block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .18em;
  color: var(--ocre);
  margin-bottom: 14px;
}
.legal-section h2{
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(26px, 3vw, 38px);
  line-height: 1.1;
  letter-spacing: -.02em;
  color: var(--ink);
  margin: 0 0 18px;
}
.legal-section p{
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink-soft);
  margin: 0 0 14px;
}
.legal-section p:last-child{ margin-bottom: 0; }
.legal-section em{
  font-family: var(--serif);
  font-style: italic;
  color: var(--ocre);
}
.legal-section strong{
  color: var(--ink);
  font-weight: 600;
}
.legal-section a{
  color: var(--ocre);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color .2s;
}
.legal-section a:hover{ color: var(--ink); }
.legal-section ul, .legal-section ol{
  margin: 14px 0;
  padding-left: 22px;
}
.legal-section li{
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink-soft);
  margin-bottom: 10px;
}
.legal-section li::marker{ color: var(--ocre); }

.legal-cta-block{
  margin-top: 64px;
  padding: 40px;
  background: var(--ink);
  color: var(--paper);
  border-radius: 24px;
  text-align: center;
}
.legal-cta-block p{
  font-family: var(--serif);
  font-size: clamp(22px, 2.6vw, 32px);
  line-height: 1.2;
  margin: 0 0 20px;
  color: var(--paper);
}
.legal-cta-btn{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 24px;
  background: var(--paper);
  color: var(--ink);
  border-radius: 999px;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  transition: background .25s, transform .25s;
}
.legal-cta-btn svg{ width: 16px; height: 16px; }
.legal-cta-btn:hover{
  background: var(--gold);
  transform: translateY(-2px);
}

@media (max-width: 700px){
  .legal-hero{ padding: 120px 0 40px; }
  .legal-body{ padding: 32px 0 80px; }
  .legal-intro{ font-size: 16px !important; padding-bottom: 24px; margin-bottom: 32px; }
  .legal-section{ padding: 28px 0; }
  .legal-section h2{ font-size: clamp(22px, 6vw, 30px) !important; }
  .legal-section p, .legal-section li{ font-size: 15px !important; line-height: 1.6 !important; }
  .legal-cta-block{ padding: 28px 22px; margin-top: 48px; }
  .legal-cta-block p{ font-size: clamp(18px, 5vw, 26px) !important; }
  .legal-cta-btn{ width: 100%; justify-content: center; min-height: 48px; }
}