/* ============================================
   HASHTAG FRÈRES — palette tricolore
   Bleu cyan (titre) + Rouge vif (# + emphasis) + Vert (CTA)
   sur fond soft-blue tint #F0F4F8 + sombre charcoal #1F1A2E
   ============================================ */

/* Bricolage Grotesque — Google Fonts, variable axes wdth (75-100) + wght (200-800) + opsz (12-96)
   Une seule famille couvre du compressed light à l'extended black */
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wdth,wght@12..96,75..100,200..800&display=swap');

:root {
  /* === PALETTE TRICOLORE === */
  --blue:         #0099E5;  /* Bleu cyan — titre HASHTAG, signature */
  --blue-dark:    #0077B6;  /* Bleu foncé — pressed */
  --red:          #FF4C4C;  /* Rouge vif — le # sticker, emphasis italique */
  --red-dark:     #E03333;  /* Rouge foncé — hover/pressed */
  --green:        #34BF49;  /* Vert vif — boutons primaires, CTAs */
  --green-dark:   #2AA13A;  /* Vert foncé — hover */

  /* Fonds */
  --bg:           #1F1A2E;  /* Noir charcoal — fond sombre */
  --bg-soft:      #2C2640;  /* Charcoal + clair */
  --bg-card:      #251F38;  /* Charcoal cards */
  --bg-cream:     #F0F4F8;  /* Soft blue tint — fond clair principal */
  --bg-cream-2:   #E0E8F0;  /* Soft blue medium pour hover */

  /* Texte */
  --ink:          #F4ECDE;  /* Ivoire crème — texte sur sombre */
  --ink-soft:     #B0AFA8;  /* Gris chaud — texte secondaire sur sombre */
  --ink-mute:     #7A7872;  /* Gris mute — meta */
  --ink-dark:     #1F1A2E;  /* Charcoal — texte sur fond clair */
  --ink-dark-soft:#5C5C5C;  /* Charcoal mute */

  /* Surfaces & overlays — utilisent les RGB channels */
  --surface-1:    color-mix(in srgb, var(--ink-dark) 4%, transparent);
  --surface-2:    color-mix(in srgb, var(--ink-dark) 6%, transparent);
  --surface-3:    color-mix(in srgb, var(--ink-dark) 8%, transparent);
  --border-thin:  color-mix(in srgb, var(--ink-dark) 12%, transparent);
  --border-md:    color-mix(in srgb, var(--ink-dark) 15%, transparent);
  --tint-blue:    color-mix(in srgb, var(--blue) 8%, transparent);
  --tint-blue-2:  color-mix(in srgb, var(--blue) 15%, transparent);
  --tint-blue-3:  color-mix(in srgb, var(--blue) 6%, transparent);
  --tint-blue-4:  color-mix(in srgb, var(--blue) 10%, transparent);
  --tint-blue-5:  color-mix(in srgb, var(--blue) 30%, transparent);
  --tint-green:   color-mix(in srgb, var(--green) 18%, transparent);
  --tint-red:     color-mix(in srgb, var(--red) 6%, transparent);
  --tint-cream:   color-mix(in srgb, var(--bg-cream) 88%, transparent);

  /* Aliases — coral devient red, lavender disparaît mais aliasé pour compat */
  --coral:        var(--red);
  --coral-light:  #FF7575;
  --coral-dark:   var(--red-dark);
  --peach:        var(--red);
  --peach-light:  #FF7575;
  --lavender:     var(--blue);
  --gold:         #D9A85C;
  --mint:         var(--green);

  /* Bordures */
  --border:       color-mix(in srgb, var(--ink) 8%, transparent);
  --border-light: var(--border-thin);

  /* Gradients & ombres */
  --grad-brand:   linear-gradient(135deg, #0099E5 0%, #34BF49 100%);  /* Bleu → vert */
  --grad-warm:    linear-gradient(135deg, #FF4C4C 0%, #FF7575 100%);  /* Rouge */
  --shadow:       0 24px 64px rgba(0, 0, 0, 0.4);                    /* Ombre noire */
  --shadow-glow:  0 0 60px rgba(0, 153, 229, 0.25);                  /* Halo bleu */
  --radius-sm:    8px;
  --radius:       14px;
  --radius-md:    18px;
  --radius-lg:    24px;
  --radius-pill:  999px;
  --container:    1280px;
  --container-text: 820px;
  --gutter:       32px;

  /* Typo — wght + wdth pour Bricolage Grotesque (Variable axes) */
  --wght-light:   "wdth" 100, "wght" 300;
  --wght-regular: "wdth" 100, "wght" 400;
  --wght-medium:  "wdth" 100, "wght" 500;
  --wght-semibold:"wdth" 100, "wght" 600;
  --wght-bold:    "wdth" 100, "wght" 700;
  --wght-black:   "wdth" 100, "wght" 800;

  /* Typo — sizes en clamp() pour rester responsive sans media queries */
  --fs-mega:      clamp(64px, 22vw, 320px);  /* Hero monumental */
  --fs-h1:        clamp(48px, 10vw, 144px);  /* Page hero h1 */
  --fs-h2:        clamp(40px, 6vw, 80px);    /* Section title */
  --fs-h3-lg:     clamp(32px, 5vw, 64px);    /* Sub-section */
  --fs-h3:        22px;                       /* Card title */
  --fs-lead:      clamp(17px, 1.6vw, 22px);
  --fs-body:      16px;
  --fs-sm:        14px;
  --fs-xs:        12px;
  --fs-tag:       13px;
  --fs-micro:     11px;
  --fs-lead-sm:   15px;
  --fs-subtitle:  17px;
  --fs-icon:      18px;
  --fs-h3-md:     26px;
  --fs-h3-lg-card:32px;
  --fs-favicon:   48px;

  /* Scale d'espacement — base 4px, identique à Tailwind */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  20px;
  --s-6:  24px;
  --s-7:  28px;
  --s-8:  32px;
  --s-9:  36px;
  --s-10: 40px;
  --s-11: 48px;
  --s-12: 56px;
  --s-14: 64px;
  --s-16: 80px;
  --s-18: 96px;
  --s-20: 120px;
  --s-24: 160px;
  --s-32: 200px;

  /* Alias sémantiques (pointent sur la scale) */
  --space-card:       var(--s-7);   /* 28px */
  --space-block:      var(--s-11);  /* 48px */
  --space-section-sm: var(--s-16);  /* 80px */
  --space-section:    var(--s-20);  /* 120px */

  /* Transitions */
  --t-fast:       0.15s ease;
  --t-base:       0.2s ease;
  --t-slow:       0.4s ease;
  --t-reveal:     0.8s cubic-bezier(0.2, 0.65, 0.3, 1);
  --t-magnetic:   0.35s cubic-bezier(0.2, 0.9, 0.3, 1.2);

  /* Portfolio — gradients par projet (mood spécifique à chaque réalisation) */
  --grad-gesturo:    linear-gradient(135deg, #0a0e18 0%, #1a1f2e 50%, #b8a0d8 100%);
  --grad-sauvages:   linear-gradient(135deg, #2a1a0a 0%, #5c3018 100%);
  --grad-vesanerie:  linear-gradient(135deg, #1a1218 0%, #3a2030 100%);
  --grad-culture:    linear-gradient(135deg, #18221a 0%, #2a4830 100%);
  --grad-gesturo-art:linear-gradient(135deg, var(--ink-dark) 0%, var(--red) 100%);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
*::selection { background: var(--peach); color: var(--ink-dark); }

html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: "Bricolage Grotesque", system-ui, -apple-system, sans-serif; font-variation-settings: "wdth" 100, "wght" 400;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4, .display {
  font-family: "Bricolage Grotesque", system-ui, sans-serif; font-variation-settings: "wdth" 100, "wght" 700;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.05;
}

a { color: inherit; text-decoration: none; transition: opacity 0.2s; }
a:hover { opacity: 0.7; }

/* Layout */
.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

section {
  padding: 120px 0;
  position: relative;
}
section.tight { padding: 80px 0; }
   HASHTAG FRÈRES — style legacy v1 (archive uniquement)
   Utilisé seulement par index-v1-archive.html
   Le site actif utilise assets/v2.css
   ============================================ */

   NAV
   ============================================ */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding: 20px 0;
  background: rgba(10, 13, 20, 0.7);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 0.5px solid var(--border);
  transition: padding 0.3s;
}
.nav.scrolled { padding: 14px 0; }
.nav .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.nav .logo {
  font-family: "Bricolage Grotesque", sans-serif; font-variation-settings: "wdth" 100, "wght" 700;
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -0.03em;
  display: inline-flex;
  align-items: baseline;
  gap: 1px;
  color: var(--ink);
}
.nav .logo .hash {
  color: var(--peach);
  font-weight: 700;
  font-size: 1.15em;
  margin-right: 2px;
  display: inline-block;
  transform: translateY(1px);
}
.nav .logo .dot { color: var(--peach); }
.nav-links {
  display: flex;
  gap: 32px;
  font-size: 14px;
  font-weight: 500;
}
.nav-links a { color: var(--ink-soft); }
.nav-links a:hover { color: var(--peach); opacity: 1; }
.nav-cta {
  background: var(--grad-brand);
  color: var(--ink-dark);
  padding: 10px 22px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 14px;
  transition: transform 0.15s, box-shadow 0.2s;
}
.nav-cta:hover { transform: translateY(-1px); box-shadow: var(--shadow-glow); opacity: 1; }
@media (max-width: 760px) { .nav-links { display: none; } }

   HERO
   ============================================ */
.hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: 140px 0 80px;
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  top: 20%; left: 60%;
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(255, 90, 77, 0.25) 0%, transparent 70%);
  filter: blur(60px);
  pointer-events: none;
  animation: float1 20s ease-in-out infinite;
}
.hero::after {
  content: "";
  position: absolute;
  bottom: 0; left: -10%;
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(255, 130, 117, 0.22) 0%, transparent 70%);
  filter: blur(60px);
  pointer-events: none;
  animation: float2 25s ease-in-out infinite;
}
@keyframes float1 { 0%,100% { transform: translate(0,0); } 50% { transform: translate(-100px, 60px); } }
@keyframes float2 { 0%,100% { transform: translate(0,0); } 50% { transform: translate(80px, -50px); } }

.hero-tag {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--peach);
  margin-bottom: 28px;
  padding: 8px 18px;
  background: rgba(232, 160, 136, 0.08);
  border: 0.5px solid rgba(232, 160, 136, 0.3);
  border-radius: 999px;
}
.hero-tag .dot {
  width: 8px; height: 8px;
  background: var(--peach);
  border-radius: 50%;
  animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }

.hero h1 {
  font-size: clamp(48px, 8vw, 124px);
  letter-spacing: -0.04em;
  margin-bottom: 32px;
  max-width: 12ch;
}
.hero h1 .accent {
  background: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-style: italic;
}
.hero p.lead {
  font-size: clamp(18px, 2vw, 22px);
  color: var(--ink-soft);
  max-width: 56ch;
  margin-bottom: 44px;
  line-height: 1.5;
}
.hero .actions {
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
}
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 32px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 15px;
  transition: transform 0.15s, opacity 0.2s, box-shadow 0.2s;
  border: 0;
  cursor: pointer;
  font-family: inherit;
}
.btn-primary {
  background: var(--grad-brand);
  color: var(--ink-dark);
  box-shadow: var(--shadow-glow);
}
.btn-primary:hover { transform: translateY(-2px); opacity: 1; box-shadow: 0 0 80px rgba(232, 160, 136, 0.4); }
.btn-secondary {
  background: transparent;
  color: var(--ink);
  border: 0.5px solid var(--border);
}
.btn-secondary:hover { border-color: var(--peach); color: var(--peach); opacity: 1; }
.btn-arrow { transition: transform 0.2s; }
.btn:hover .btn-arrow { transform: translateX(4px); }

   MARQUEE — preuves sociales
   ============================================ */
.marquee {
  padding: 32px 0;
  background: var(--bg-soft);
  border-top: 0.5px solid var(--border);
  border-bottom: 0.5px solid var(--border);
  overflow: hidden;
}
.marquee-track {
  display: flex;
  gap: 64px;
  animation: scroll 40s linear infinite;
  white-space: nowrap;
}
.marquee-item {
  font-family: "Bricolage Grotesque", sans-serif; font-variation-settings: "wdth" 100, "wght" 700;
  font-weight: 600;
  font-size: 22px;
  color: var(--ink-soft);
  letter-spacing: -0.01em;
  display: flex;
  align-items: center;
  gap: 16px;
}
.marquee-item::after {
  content: "✶";
  color: var(--peach);
  font-size: 14px;
}
@keyframes scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

   SECTIONS HEADERS
   ============================================ */
.section-tag {
  display: inline-block;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--peach);
  margin-bottom: 16px;
  font-weight: 500;
}
.section-title {
  font-size: clamp(36px, 6vw, 72px);
  letter-spacing: -0.03em;
  margin-bottom: 24px;
  max-width: 16ch;
}
.section-lead {
  font-size: clamp(17px, 1.5vw, 20px);
  color: var(--ink-soft);
  max-width: 56ch;
  margin-bottom: 64px;
  line-height: 1.55;
}

   SERVICES (offres)
   ============================================ */
.services-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
@media (max-width: 800px) { .services-grid { grid-template-columns: 1fr; } }

.service-card {
  background: var(--bg-card);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 44px 36px;
  position: relative;
  overflow: hidden;
  transition: transform 0.3s, border-color 0.3s;
}
.service-card:hover {
  transform: translateY(-6px);
  border-color: rgba(232, 160, 136, 0.4);
}
.service-card::before {
  content: "";
  position: absolute;
  top: -50%; right: -50%;
  width: 100%; height: 100%;
  background: radial-gradient(circle, rgba(232, 160, 136, 0.08), transparent 60%);
  pointer-events: none;
  transition: opacity 0.3s;
  opacity: 0;
}
.service-card:hover::before { opacity: 1; }

.service-icon {
  font-size: 44px;
  display: inline-block;
  margin-bottom: 24px;
  filter: drop-shadow(0 4px 12px rgba(232, 160, 136, 0.3));
}
.service-card h3 {
  font-size: 28px;
  margin-bottom: 12px;
  letter-spacing: -0.02em;
}
.service-card > p {
  color: var(--ink-soft);
  font-size: 15px;
  margin-bottom: 24px;
  line-height: 1.6;
}
.service-card ul {
  list-style: none;
  padding: 0;
  margin-bottom: 28px;
}
.service-card ul li {
  padding: 8px 0 8px 24px;
  position: relative;
  font-size: 14px;
  color: var(--ink);
  border-top: 0.5px solid var(--border);
}
.service-card ul li:first-child { border-top: 0; }
.service-card ul li::before {
  content: "→";
  position: absolute;
  left: 0;
  color: var(--peach);
}
.service-card .price {
  font-family: "Bricolage Grotesque", sans-serif; font-variation-settings: "wdth" 100, "wght" 700;
  font-size: 18px;
  color: var(--peach);
  font-weight: 600;
}
.service-card .price small { color: var(--ink-mute); font-weight: 400; }

   APPROACH (notre approche)
   ============================================ */
.approach {
  background: var(--bg-cream);
  color: var(--ink-dark);
}
.approach .section-tag { color: var(--ink-dark-soft); }
.approach .section-title,
.approach .section-lead { color: var(--ink-dark); }
.approach .section-lead { opacity: 0.7; }

.approach-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px;
  margin-top: 32px;
}
@media (max-width: 800px) { .approach-grid { grid-template-columns: 1fr; gap: 40px; } }

.approach-item {
  padding-top: 32px;
  border-top: 1px solid var(--border-light);
}
.approach-item .num {
  font-family: "Bricolage Grotesque", sans-serif; font-variation-settings: "wdth" 100, "wght" 700;
  font-size: 14px;
  font-weight: 600;
  color: var(--peach);
  letter-spacing: 0.1em;
  margin-bottom: 12px;
  display: block;
}
.approach-item h3 {
  font-size: 28px;
  margin-bottom: 14px;
  color: var(--ink-dark);
}
.approach-item p {
  font-size: 15px;
  color: var(--ink-dark-soft);
  line-height: 1.65;
}

   PORTFOLIO
   ============================================ */
.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
@media (max-width: 800px) { .portfolio-grid { grid-template-columns: 1fr; } }

.case-card {
  background: var(--bg-card);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 460px;
  position: relative;
  transition: transform 0.3s, border-color 0.3s;
}
.case-card.large {
  grid-column: span 2;
  min-height: 540px;
}
@media (max-width: 800px) { .case-card.large { grid-column: span 1; min-height: 460px; } }
.case-card:hover {
  transform: translateY(-6px);
  border-color: rgba(232, 160, 136, 0.4);
}
.case-visual {
  flex: 1;
  background: linear-gradient(135deg, var(--bg-soft), var(--bg-card));
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.case-visual.gesturo { background: linear-gradient(135deg, #0a0e18 0%, #1a1f2e 60%, #b8a0d8 100%); }
.case-visual.vesanerie { background: linear-gradient(135deg, #1a1218 0%, #3a2030 100%); }
.case-visual.sauvages { background: linear-gradient(135deg, #2a1a0a 0%, #5c3018 100%); }
.case-visual.culture { background: linear-gradient(135deg, #18221a 0%, #2a4830 100%); }
.case-visual.gesturo-art { background: linear-gradient(135deg, #f0e8d8 0%, #e8c0a0 100%); }
.case-visual .case-emoji {
  font-size: 96px;
  filter: drop-shadow(0 8px 24px rgba(0,0,0,0.4));
  transition: transform 0.4s;
}
.case-card:hover .case-emoji { transform: scale(1.1) rotate(-3deg); }

.case-info {
  padding: 28px 32px 32px;
  background: var(--bg-card);
  border-top: 0.5px solid var(--border);
}
.case-info .tags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.case-info .tag {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 4px 10px;
  background: rgba(232, 160, 136, 0.1);
  color: var(--peach);
  border-radius: 999px;
}
.case-info h3 { font-size: 26px; margin-bottom: 8px; }
.case-info p { color: var(--ink-soft); font-size: 14px; line-height: 1.6; }
.case-info .case-link {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  margin-top: 14px;
  font-size: 13px;
  color: var(--peach);
  font-weight: 500;
}

   STATS
   ============================================ */
.stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-top: 64px;
  padding-top: 48px;
  border-top: 1px solid var(--border-light);
}
@media (max-width: 800px) { .stats-row { grid-template-columns: repeat(2, 1fr); gap: 32px; } }

.stat .stat-num {
  font-family: "Bricolage Grotesque", sans-serif; font-variation-settings: "wdth" 100, "wght" 700;
  font-size: clamp(40px, 5vw, 64px);
  font-weight: 700;
  color: var(--ink-dark);
  letter-spacing: -0.03em;
  display: block;
  line-height: 1;
}
.stat .stat-num .accent {
  background: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.stat .stat-lbl {
  font-size: 13px;
  color: var(--ink-dark-soft);
  margin-top: 10px;
  display: block;
}

   ABOUT (à propos duo)
   ============================================ */
.about {
  padding-bottom: 160px;
}
.duo-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  margin-top: 48px;
}
@media (max-width: 800px) { .duo-grid { grid-template-columns: 1fr; } }

.duo-card {
  background: var(--bg-card);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 48px 40px;
  position: relative;
}
.duo-card .role {
  font-family: "Bricolage Grotesque", sans-serif; font-variation-settings: "wdth" 100, "wght" 700;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--peach);
  margin-bottom: 32px;
  display: block;
}
.duo-card .avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: var(--grad-brand);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  margin-bottom: 24px;
}
.duo-card h3 { font-size: 32px; margin-bottom: 8px; letter-spacing: -0.02em; }
.duo-card .title {
  font-size: 15px;
  color: var(--ink-soft);
  margin-bottom: 24px;
}
.duo-card .bio {
  font-size: 14.5px;
  color: var(--ink-soft);
  line-height: 1.7;
}
.duo-card .skills {
  list-style: none;
  padding: 0;
  margin-top: 28px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.duo-card .skills li {
  font-size: 12px;
  padding: 6px 12px;
  background: var(--bg-soft);
  border-radius: 999px;
  color: var(--ink);
}

   FAQ
   ============================================ */
.faq-list {
  margin-top: 48px;
  max-width: 880px;
  margin-left: auto;
  margin-right: auto;
}
.faq-item {
  border-top: 1px solid var(--border);
  padding: 28px 0;
}
.faq-item:last-child { border-bottom: 1px solid var(--border); }
.faq-q {
  font-family: "Bricolage Grotesque", sans-serif; font-variation-settings: "wdth" 100, "wght" 700;
  font-weight: 600;
  font-size: 20px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  letter-spacing: -0.01em;
}
.faq-q::after {
  content: "+";
  font-size: 28px;
  font-weight: 300;
  color: var(--peach);
  transition: transform 0.3s;
  flex-shrink: 0;
}
.faq-item.open .faq-q::after { transform: rotate(45deg); }
.faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease, padding 0.4s ease;
  color: var(--ink-soft);
  font-size: 15.5px;
  line-height: 1.7;
}
.faq-item.open .faq-a {
  max-height: 400px;
  padding-top: 16px;
}

   CTA FINAL / CONTACT
   ============================================ */
.cta-final {
  background: var(--bg-cream);
  color: var(--ink-dark);
  padding: 160px 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta-final::before {
  content: "";
  position: absolute;
  top: -200px; left: 50%;
  transform: translateX(-50%);
  width: 800px; height: 800px;
  background: radial-gradient(circle, rgba(255, 90, 77, 0.35) 0%, transparent 60%);
  pointer-events: none;
}
.cta-final h2 {
  font-size: clamp(48px, 9vw, 120px);
  letter-spacing: -0.04em;
  margin-bottom: 32px;
  position: relative;
  z-index: 2;
}
.cta-final h2 .italic { font-style: italic; }
.cta-final p {
  font-size: 18px;
  color: var(--ink-dark-soft);
  max-width: 52ch;
  margin: 0 auto 40px;
  position: relative;
  z-index: 2;
}
.cta-final .actions {
  display: inline-flex;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
  position: relative;
  z-index: 2;
}
.cta-final .btn-secondary {
  border-color: rgba(26, 18, 24, 0.2);
  color: var(--ink-dark);
}
.cta-final .btn-secondary:hover { border-color: var(--ink-dark); color: var(--ink-dark); }

   FOOTER
   ============================================ */
.footer {
  background: var(--bg);
  padding: 60px 0 40px;
  border-top: 0.5px solid var(--border);
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 40px;
}
@media (max-width: 800px) { .footer-grid { grid-template-columns: 1fr 1fr; } }

.footer h4 {
  font-family: "Bricolage Grotesque", sans-serif; font-variation-settings: "wdth" 100, "wght" 700;
  font-size: 13px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 18px;
  font-weight: 500;
}
.footer ul { list-style: none; padding: 0; }
.footer ul li { padding: 4px 0; }
.footer ul li a { color: var(--ink); font-size: 14px; }
.footer ul li a:hover { color: var(--peach); opacity: 1; }
.footer .logo {
  font-family: "Bricolage Grotesque", sans-serif; font-variation-settings: "wdth" 100, "wght" 700;
  font-weight: 800;
  font-size: 28px;
  margin-bottom: 12px;
  letter-spacing: -0.03em;
  display: inline-flex;
  align-items: baseline;
  gap: 1px;
}
.footer .logo .hash {
  color: var(--peach);
  font-weight: 700;
  font-size: 1.15em;
  margin-right: 3px;
  display: inline-block;
  transform: translateY(2px);
}
.footer .logo .dot { color: var(--peach); }
.footer-tagline {
  color: var(--ink-soft);
  font-size: 14px;
  max-width: 32ch;
  line-height: 1.6;
}
.footer-bottom {
  border-top: 0.5px solid var(--border);
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--ink-mute);
}

   REVEAL ANIMATIONS (au scroll)
   ============================================ */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal.delay-1 { transition-delay: 0.1s; }
.reveal.delay-2 { transition-delay: 0.2s; }
.reveal.delay-3 { transition-delay: 0.3s; }

   RESPONSIVE FIXES
   ============================================ */
@media (max-width: 600px) {
  section { padding: 80px 0; }
  :root { --gutter: 20px; }
  .hero { padding: 110px 0 60px; }
  .btn { padding: 14px 24px; font-size: 14px; }
  .service-card, .duo-card { padding: 32px 24px; }
}