/* Maquette 06 « L’instinct ». Styles limités à .hb-instinct ; tokens partagés de la marque. */
.hb-instinct {
  --in-ivory: #f5f7f0;
  --in-night: #0c1b14;
  --in-pad: clamp(96px, 10.5vw, 184px);
  --in-radius: clamp(24px, 2.4vw, 36px);
  --in-rule: color-mix(in srgb, currentColor 15%, transparent);
  --in-soft: color-mix(in srgb, currentColor 72%, transparent);
  position: relative;
  color: var(--hb-color-ink);
  background: var(--hb-color-paper);
  overflow-x: clip;
}
.hb-instinct :where(figure) { margin: 0; }
.hb-instinct :where(ol, ul) { margin: 0; padding: 0; list-style: none; }
.hb-instinct :where(img) { max-width: none; }
.hb-instinct :where(svg) { flex: none; }
.hb-instinct :is(a, button) svg { fill: none; stroke: currentColor; stroke-width: 1.5; }

/* — Éléments communs — */
.hb-instinct__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font: 500 11px/1.4 var(--hb-font-body);
  letter-spacing: .15em;
  text-transform: uppercase;
}
.hb-instinct__eyebrow svg { width: 15px; fill: var(--hb-color-orange); }
.hb-instinct__dot { color: var(--hb-color-orange); font-weight: inherit; }
.hb-instinct__ghost {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  min-height: 44px;
  padding: 6px 0;
  border-bottom: 1px solid var(--in-rule);
  font: 500 14px/1.2 var(--hb-font-body);
  transition: border-color .3s;
}
.hb-instinct__ghost svg { width: 19px; transition: transform .35s var(--hb-ease); }
.hb-instinct__ghost:hover { border-color: currentColor; }
.hb-instinct__ghost:hover svg, .hb-instinct__ghost:focus-visible svg { transform: translateX(5px); }
.hb-instinct__section-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 430px);
  align-items: end;
  gap: 32px clamp(32px, 6vw, 120px);
  margin-bottom: clamp(48px, 6vw, 96px);
}
.hb-instinct__section-head h2 {
  margin-top: 26px;
  font-size: clamp(52px, 6.4vw, 116px);
  line-height: .92;
  letter-spacing: -.066em;
}
.hb-instinct__section-head > p {
  max-width: 40ch;
  color: var(--in-soft);
  font-size: clamp(16px, 1.2vw, 19px);
  line-height: 1.55;
}
.hb-instinct__section-head--light { color: var(--hb-color-paper); }

/* — Ouverture — */
.hb-instinct__hero {
  position: relative;
  isolation: isolate;
  display: grid;
  align-items: end;
  min-height: max(100svh, 780px);
  padding: 170px var(--hb-gutter) clamp(52px, 6vw, 92px);
  color: var(--hb-color-paper);
  background: var(--hb-color-hero-forest);
  overflow: clip;
}
.hb-instinct__hero-media, .hb-instinct__hero-leaves { position: absolute; inset: -6% 0 -6%; z-index: -3; will-change: transform; }
.hb-instinct__hero-media img, .hb-instinct__hero-leaves img { width: 100%; height: 100%; object-fit: cover; }
.hb-instinct__hero-leaves { z-index: -1; inset: auto -4% -10% auto; width: min(62vw, 1060px); height: auto; aspect-ratio: 1672 / 941; opacity: .9; }
.hb-instinct__hero-leaves img { object-position: 100% 100%; filter: brightness(.42) saturate(.85); }
.hb-instinct__hero-shade {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(90% 70% at 18% 92%, rgba(9, 21, 15, .82) 0%, transparent 62%),
    linear-gradient(180deg, rgba(9, 21, 15, .62) 0%, rgba(9, 21, 15, .12) 32%, rgba(9, 21, 15, .38) 64%, var(--in-night) 100%);
}
.hb-instinct__hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url('/assets/textures/mineral-grain.svg');
  opacity: .1;
  mix-blend-mode: overlay;
  pointer-events: none;
}
.hb-instinct__hero-inner { display: grid; gap: clamp(40px, 4.4vw, 72px); width: 100%; }
.hb-instinct__hero .hb-breadcrumb { margin-bottom: 30px; }
.hb-instinct__hero .hb-instinct__eyebrow { color: color-mix(in srgb, var(--hb-color-paper) 82%, transparent); }
.hb-instinct__title {
  margin: 24px 0 0;
  font-size: clamp(66px, 8.6vw, 164px);
  line-height: .9;
  letter-spacing: -.07em;
}
.hb-instinct__line { display: block; overflow: clip; padding: 0 .04em .07em 0; margin-bottom: -.07em; }
.hb-instinct__line > span { display: inline-block; }
.hb-instinct__title em { color: var(--hb-color-lime); }
.hb-instinct__hero-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 26px 48px;
  margin-top: clamp(26px, 2.6vw, 40px);
}
.hb-instinct__lead {
  max-width: 38ch;
  color: color-mix(in srgb, var(--hb-color-paper) 80%, transparent);
  font-size: clamp(17px, 1.32vw, 21px);
  line-height: 1.5;
}

.hb-instinct__index {
  position: relative;
  padding: 8px;
  border-radius: 24px;
  color: var(--hb-color-paper);
  background: linear-gradient(160deg, rgba(233, 237, 226, .12), rgba(233, 237, 226, .04));
  border: 1px solid rgba(233, 237, 226, .16);
  box-shadow: 0 40px 90px -40px rgba(0, 0, 0, .7), inset 0 1px rgba(255, 255, 255, .12);
  backdrop-filter: blur(22px) saturate(140%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
}
.hb-instinct__index ol { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.hb-instinct__index li + li { border-left: 1px solid rgba(233, 237, 226, .12); }
.hb-instinct__index a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 20px;
  align-content: start;
  gap: 6px 10px;
  height: 100%;
  padding: 16px 18px 18px;
  border-radius: 17px;
  transition: background-color .35s var(--hb-ease);
}
.hb-instinct__index-num { grid-column: 1 / -1; margin-bottom: 14px; font: 500 11px/1 var(--hb-font-body); letter-spacing: .1em; color: rgba(233, 237, 226, .55); font-variant-numeric: tabular-nums; }
.hb-instinct__index strong { font: 500 clamp(17px, 1.3vw, 21px)/1.08 var(--hb-font-heading); letter-spacing: -.035em; }
.hb-instinct__index small { grid-column: 1; font-size: 12.5px; line-height: 1.3; color: rgba(233, 237, 226, .58); }
.hb-instinct__index a svg { grid-column: 2; grid-row: 2; align-self: center; width: 19px; opacity: 0; transform: translateX(-8px); transition: opacity .35s, transform .45s var(--hb-ease); }
.hb-instinct__index a:hover, .hb-instinct__index a:focus-visible { background: rgba(233, 237, 226, .11); }
.hb-instinct__index a:hover .hb-instinct__index-num, .hb-instinct__index a:focus-visible .hb-instinct__index-num { color: var(--hb-color-orange); }
.hb-instinct__index a:hover svg, .hb-instinct__index a:focus-visible svg { opacity: 1; transform: none; }

/* Entrée : uniquement avec JavaScript et sans préférence de mouvement réduit. */
@media (prefers-reduced-motion: no-preference) {
  .hb-instinct.is-ready .hb-instinct__hero-canopy { animation: hb-instinct-settle 2.8s var(--hb-ease) both; }
  .hb-instinct.is-ready .hb-instinct__line > span { animation: hb-instinct-rise 1.15s var(--hb-ease) both; }
  .hb-instinct.is-ready .hb-instinct__line + .hb-instinct__line > span { animation-delay: .12s; }
  .hb-instinct.is-ready :is(.hb-instinct__hero .hb-breadcrumb, .hb-instinct__hero .hb-instinct__eyebrow, .hb-instinct__lead) { animation: hb-instinct-fade 1s var(--hb-ease) .35s both; }
  .hb-instinct.is-ready .hb-instinct__index { animation: hb-instinct-fade 1.2s var(--hb-ease) .55s both; }
  .hb-instinct[data-instinct].is-ready [data-instinct-reveal]:not(.is-visible) { opacity: 0; transform: translateY(34px); }
  .hb-instinct [data-instinct-reveal] { transition: opacity 1s var(--hb-ease), transform 1.1s var(--hb-ease); }
}
@keyframes hb-instinct-settle { from { transform: scale(1.16); filter: brightness(.6); } to { transform: scale(1.02); filter: none; } }
@keyframes hb-instinct-rise { from { transform: translateY(108%); } to { transform: none; } }
@keyframes hb-instinct-fade { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }

/* — Bandeau — */
.hb-instinct__marquee {
  overflow: clip;
  padding: clamp(26px, 2.8vw, 44px) 0 clamp(30px, 3.2vw, 50px);
  color: var(--hb-color-paper);
  background: var(--in-night);
}
.hb-instinct__marquee-track {
  display: flex;
  align-items: center;
  gap: .42em;
  width: max-content;
  font: 500 clamp(46px, 6.2vw, 112px)/1 var(--hb-font-heading);
  letter-spacing: -.055em;
  white-space: nowrap;
  animation: hb-instinct-marquee 46s linear infinite;
  animation-play-state: paused;
}
.hb-instinct__marquee.is-inview .hb-instinct__marquee-track { animation-play-state: running; }
.hb-instinct__marquee-track .is-outline { color: transparent; -webkit-text-stroke: 1.3px rgba(233, 237, 226, .52); }
.hb-instinct__marquee-track svg { width: .42em; fill: var(--hb-color-orange); }
@keyframes hb-instinct-marquee { to { transform: translateX(calc(-50% - .21em)); } }

/* — Approche — */
.hb-instinct__approach { padding: var(--in-pad) var(--hb-gutter) clamp(72px, 8vw, 132px); text-align: center; }
.hb-instinct__statement {
  max-width: 1380px;
  margin: clamp(30px, 3vw, 48px) auto 0;
  text-wrap: balance;
  font: 500 clamp(34px, 4.25vw, 76px)/1.07 var(--hb-font-heading);
  letter-spacing: -.052em;
}
.hb-instinct__word { transition: color .5s var(--hb-ease); }
.hb-instinct__keep { white-space: nowrap; }
.hb-instinct.is-armed .hb-instinct__word { color: color-mix(in srgb, var(--hb-color-ink) 17%, transparent); }
.hb-instinct.is-armed .hb-instinct__word.is-lit { color: var(--hb-color-ink); }
.hb-instinct__pill {
  --gap: .2em;
  position: relative;
  display: inline-block;
  width: 1.95em;
  height: .84em;
  /* L’espace avant l’image est sa marge : fermée, les mots se touchent comme dans une phrase normale. */
  margin-left: var(--gap);
  /* Même rapport que le bouton Contact du header : 13 px d’arrondi pour 52 px de haut. */
  border-radius: .21em;
  overflow: hidden;
  vertical-align: -.05em;
  background: var(--hb-color-lime);
  transition: width 1.1s var(--hb-ease), margin-left 1.1s var(--hb-ease), opacity .45s;
}
/* L’image garde sa taille finale et se dévoile depuis le centre. */
.hb-instinct__pill img {
  position: absolute;
  top: 0;
  left: 50%;
  width: 1.95em;
  height: 100%;
  object-fit: cover;
  transform: translateX(-50%);
  transition: transform 1.4s var(--hb-ease);
}
.hb-instinct.is-armed .hb-instinct__pill:not(.is-lit) { width: 0; margin-left: 0; opacity: 0; }
.hb-instinct.is-armed .hb-instinct__pill:not(.is-lit) img { transform: translateX(-50%) scale(1.35); }
.hb-instinct.is-measuring .hb-instinct__pill { width: 1.95em !important; margin-left: var(--gap) !important; transition: none !important; }
/* Lignes figées d’après la mise en page finale : l’ouverture d’une image écarte les mots sans les faire changer de ligne. */
.hb-instinct__statement-line { display: block; white-space: nowrap; }
.hb-instinct__approach-cta { margin-top: clamp(44px, 4.4vw, 72px); }

/* — Expertises empilées — */
.hb-instinct__services { padding: clamp(72px, 7vw, 120px) var(--hb-gutter) var(--in-pad); border-top: 1px solid color-mix(in srgb, var(--hb-color-ink) 10%, transparent); }
.hb-instinct__deck { display: grid; gap: clamp(26px, 3vw, 44px); }
.hb-instinct__stack-nav { display: none; }
.hb-instinct__card {
  --card-ink: var(--hb-color-paper);
  --card-bg: var(--hb-color-forest);
  --card-accent: var(--hb-color-orange);
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, .94fr) minmax(0, 1.06fr);
  gap: clamp(24px, 3vw, 52px);
  height: clamp(600px, calc(100svh - 196px), 800px);
  padding: clamp(22px, 2.2vw, 34px);
  border-radius: var(--in-radius);
  color: var(--card-ink);
  background: var(--card-bg);
  transform-origin: 50% 0;
}
.hb-instinct__card--ivory { --card-ink: var(--hb-color-ink); --card-bg: var(--in-ivory); outline: 1px solid rgba(26, 41, 32, .08); outline-offset: -1px; }
.hb-instinct__card--lime { --card-ink: var(--hb-color-ink); --card-bg: var(--hb-color-lime); }
.hb-instinct__card--pine { --card-bg: var(--hb-color-pine); }
.hb-instinct__card--orange { --card-ink: var(--hb-color-forest); --card-bg: var(--hb-color-orange); --card-accent: var(--hb-color-forest); }
.hb-instinct__card-copy {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: clamp(6px, 1.2vw, 22px) clamp(4px, 1vw, 18px);
}
.hb-instinct__card-top {
  display: flex;
  align-items: center;
  gap: 14px;
  font: 500 11px/1 var(--hb-font-body);
  letter-spacing: .15em;
  text-transform: uppercase;
}
.hb-instinct__card-top span:last-child { margin-left: auto; opacity: .55; font-variant-numeric: tabular-nums; }
.hb-instinct__card-num {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--in-rule);
  border-radius: 50%;
  font: 500 14px/1 var(--hb-font-heading);
  letter-spacing: -.02em;
}
.hb-instinct__card-heading { margin: auto 0; padding: 28px 0; }
.hb-instinct__card h3 {
  font-size: clamp(44px, 4.7vw, 86px);
  line-height: .92;
  letter-spacing: -.062em;
}
.hb-instinct__card h3 small {
  display: block;
  margin-top: 14px;
  font: 500 clamp(15px, 1.15vw, 18px)/1 var(--hb-font-body);
  letter-spacing: 0;
  opacity: .6;
}
.hb-instinct__card-promise {
  margin-top: clamp(18px, 1.8vw, 28px);
  font: 500 clamp(20px, 1.65vw, 27px)/1.15 var(--hb-font-heading);
  letter-spacing: -.035em;
}
.hb-instinct__card-promise::after { content: ''; display: inline-block; width: .32em; height: .32em; margin-left: .18em; border-radius: 50%; background: var(--card-accent); }
.hb-instinct__card-text { max-width: 46ch; margin-top: 14px; font-size: clamp(15px, 1.05vw, 17px); line-height: 1.6; color: var(--in-soft); }
.hb-instinct__card-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 26px; }
.hb-instinct__card-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 0;
  border-top: 1px solid var(--in-rule);
  font-size: 14px;
  line-height: 1.3;
}
.hb-instinct__card-list li::before { content: '+'; color: var(--card-accent); font-weight: 500; }
.hb-instinct__card-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; margin-top: clamp(22px, 2.2vw, 34px); }
.hb-instinct__card-stack { font: 500 10.5px/1.4 var(--hb-font-body); letter-spacing: .14em; text-transform: uppercase; opacity: .55; }
/* Bouton commun du site (.hb-button) : forme, taille et animation inchangées, seule la couleur suit le fond. */
.hb-instinct__card--orange .hb-button:not(:hover) { background: var(--hb-color-forest); }
.hb-instinct :is(.hb-instinct__approach, .hb-instinct__card--ivory, .hb-instinct__card--lime) .hb-button:hover { background: var(--hb-color-forest); color: var(--hb-color-paper); }

/* Mode fixé (PC, mouvement autorisé) : la section reste à l’écran, chaque carte monte entière
   et recouvre la précédente, qui recule légèrement. Aucune ombre, aucun voile. */
.hb-instinct__stack.is-pinned { height: calc(100svh + (var(--count) - 1) * 88svh); }
.hb-instinct__stack.is-pinned .hb-instinct__stack-pin {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  height: 100svh;
  padding: 108px 0 26px;
}
.hb-instinct__stack.is-pinned .hb-instinct__stack-nav {
  display: grid;
  grid-template-columns: repeat(var(--count), minmax(0, 1fr));
  gap: clamp(10px, 1.4vw, 22px);
  margin-bottom: 52px;
}
.hb-instinct__stack-nav button {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  gap: 4px 10px;
  padding: 0 0 12px;
  color: color-mix(in srgb, var(--hb-color-ink) 45%, transparent);
  font: 500 11px/1.3 var(--hb-font-body);
  letter-spacing: .14em;
  text-align: left;
  text-transform: uppercase;
  transition: color .4s var(--hb-ease);
}
.hb-instinct__stack-nav button span { font-variant-numeric: tabular-nums; }
.hb-instinct__stack-nav button i { position: relative; grid-column: 1 / -1; height: 2px; margin-top: 10px; border-radius: 2px; background: color-mix(in srgb, var(--hb-color-ink) 12%, transparent); overflow: hidden; }
.hb-instinct__stack-nav button b { position: absolute; inset: 0; background: var(--hb-color-orange); transform: scaleX(var(--fill, 0)); transform-origin: 0 50%; }
.hb-instinct__stack-nav button:hover, .hb-instinct__stack-nav [aria-current] { color: var(--hb-color-ink); }
.hb-instinct__stack.is-pinned .hb-instinct__deck { position: relative; display: block; flex: 1; min-height: 0; }
.hb-instinct__stack.is-pinned .hb-instinct__card {
  position: absolute;
  inset: 0;
  height: auto;
  will-change: transform;
}
.hb-instinct__stack.is-pinned .hb-instinct__visual-bg { transform: scale(calc(1.16 - var(--t, 1) * .16)); transition: none; }
/* Le contenu d’une carte entre en cascade pendant sa montée ; celui des cartes déjà vues reste en place. */
.hb-instinct__stack.is-pinned :is(.hb-instinct__card-top, .hb-instinct__card-heading > *, .hb-instinct__card-list li, .hb-instinct__card-foot) {
  transition: opacity .7s var(--hb-ease), translate .9s var(--hb-ease);
}
.hb-instinct__stack.is-pinned .hb-instinct__card:not(.is-shown) :is(.hb-instinct__card-top, .hb-instinct__card-heading > *, .hb-instinct__card-list li, .hb-instinct__card-foot) {
  opacity: 0;
  translate: 0 22px;
  transition-duration: .35s;
  transition-delay: 0s;
}
.hb-instinct__stack.is-pinned .hb-instinct__card.is-shown .hb-instinct__card-heading > :nth-child(1) { transition-delay: .05s; }
.hb-instinct__stack.is-pinned .hb-instinct__card.is-shown .hb-instinct__card-heading > :nth-child(2) { transition-delay: .12s; }
.hb-instinct__stack.is-pinned .hb-instinct__card.is-shown .hb-instinct__card-heading > :nth-child(3) { transition-delay: .19s; }
.hb-instinct__stack.is-pinned .hb-instinct__card.is-shown .hb-instinct__card-list li { transition-delay: .26s; }
.hb-instinct__stack.is-pinned .hb-instinct__card.is-shown .hb-instinct__card-list li:nth-child(n + 3) { transition-delay: .32s; }
.hb-instinct__stack.is-pinned .hb-instinct__card.is-shown .hb-instinct__card-foot { transition-delay: .4s; }

/* Écrans peu hauts : la carte fixée se resserre pour garder son contenu entier. */
@media (max-height: 880px) {
  .hb-instinct__stack.is-pinned .hb-instinct__stack-pin { padding: 100px 0 20px; }
  .hb-instinct__stack.is-pinned .hb-instinct__stack-nav { margin-bottom: 38px; }
  .hb-instinct__stack.is-pinned .hb-instinct__card { padding: 22px; }
  .hb-instinct__stack.is-pinned .hb-instinct__card-copy { padding: 4px 8px; }
  .hb-instinct__stack.is-pinned .hb-instinct__card-num { width: 38px; height: 38px; }
  .hb-instinct__stack.is-pinned .hb-instinct__card-heading { padding: 14px 0; }
  .hb-instinct__stack.is-pinned .hb-instinct__card h3 { font-size: clamp(40px, min(4.4vw, 7.6svh), 80px); }
  .hb-instinct__stack.is-pinned .hb-instinct__card-promise { margin-top: 12px; }
  .hb-instinct__stack.is-pinned .hb-instinct__card-text { margin-top: 10px; font-size: 15px; line-height: 1.5; }
  .hb-instinct__stack.is-pinned .hb-instinct__card-list li { padding: 10px 0; }
  .hb-instinct__stack.is-pinned .hb-instinct__card-foot { margin-top: 16px; }
}

/* — Variante « chapitres » : texte qui défile à gauche, visuel fixe à droite, fond qui change de couleur. —
   Sans JavaScript, sur tablette et mobile : chapitres présentés comme les cartes, visuel au-dessus du texte. */
.hb-instinct__split-list { display: grid; gap: clamp(26px, 3vw, 44px); }
.hb-instinct__split-frame { display: none; }
.hb-instinct__chapter-slot { display: contents; }
.hb-instinct__chapter { height: auto; min-height: clamp(600px, calc(100svh - 196px), 800px); }

.hb-instinct__split.is-split {
  --split-frame: min(72svh, 680px);
  --split-bg: var(--hb-color-forest);
  --split-ink: var(--hb-color-paper);
  --split-accent: var(--hb-color-orange);
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  align-items: start;
  gap: clamp(40px, 5.5vw, 104px);
  margin: 0 calc(-1 * var(--hb-gutter));
  padding: 0 var(--hb-gutter) calc(50svh - var(--split-frame) / 2);
  border-radius: clamp(28px, 3vw, 48px);
  color: var(--split-ink);
  background: var(--split-bg);
  transition: background-color .9s var(--hb-ease), color .9s var(--hb-ease);
}
.hb-instinct__split.is-split[data-tone='ivory'] { --split-bg: var(--in-ivory); --split-ink: var(--hb-color-ink); }
.hb-instinct__split.is-split[data-tone='lime'] { --split-bg: var(--hb-color-lime); --split-ink: var(--hb-color-ink); }
.hb-instinct__split.is-split[data-tone='pine'] { --split-bg: var(--hb-color-pine); }
.hb-instinct__split.is-split[data-tone='orange'] { --split-bg: var(--hb-color-orange); --split-ink: var(--hb-color-forest); --split-accent: var(--hb-color-forest); }
.hb-instinct__split.is-split .hb-instinct__split-list { display: block; }
.hb-instinct__split.is-split .hb-instinct__chapter {
  --card-ink: var(--split-ink);
  --card-accent: var(--split-accent);
  display: flex;
  align-items: center;
  min-height: 92svh;
  height: auto;
  padding: 0;
  border-radius: 0;
  outline: 0;
  color: inherit;
  background: none;
  opacity: .2;
  transition: opacity .7s var(--hb-ease);
}
.hb-instinct__split.is-split .hb-instinct__chapter.is-active { opacity: 1; }
.hb-instinct__split.is-split .hb-instinct__card-copy { width: 100%; padding: 0; }
.hb-instinct__split.is-split .hb-instinct__card-heading { margin: 0; padding: clamp(26px, 3vh, 40px) 0; }
.hb-instinct__split.is-split .hb-instinct__card-num { border-color: color-mix(in srgb, currentColor 28%, transparent); }
.hb-instinct__split.is-split .hb-instinct__split-frame {
  position: sticky;
  top: calc(50svh - var(--split-frame) / 2);
  display: block;
  height: var(--split-frame);
  margin-top: calc(50svh - var(--split-frame) / 2);
}
.hb-instinct__split-count {
  position: absolute;
  bottom: calc(100% + 14px);
  left: 2px;
  font: 500 11px/1 var(--hb-font-body);
  letter-spacing: .15em;
  opacity: .6;
  font-variant-numeric: tabular-nums;
}
.hb-instinct__split-count span { opacity: 1; }
.hb-instinct__split-stage { position: relative; height: 100%; }
/* Chaque visuel se dévoile de bas en haut par-dessus le précédent. */
.hb-instinct__split-stage .hb-instinct__visual {
  position: absolute;
  inset: 0;
  border-radius: calc(var(--in-radius) - 6px);
  clip-path: inset(100% 0 0 0 round calc(var(--in-radius) - 6px));
  transition: clip-path 1.1s var(--hb-ease);
}
.hb-instinct__split-stage .hb-instinct__visual:is(.is-active, .is-past) { clip-path: inset(0 0 0 0 round calc(var(--in-radius) - 6px)); }
.hb-instinct__split-stage .hb-instinct__visual-bg { transform: scale(1.14); transition: transform 1.6s var(--hb-ease); }
.hb-instinct__split-stage .is-active .hb-instinct__visual-bg { transform: none; }
.hb-instinct__split.is-split[data-tone='orange'] .hb-button:not(:hover) { background: var(--hb-color-forest); }
.hb-instinct__split.is-split:is([data-tone='ivory'], [data-tone='lime']) .hb-button:hover { background: var(--hb-color-forest); color: var(--hb-color-paper); }
@media (prefers-reduced-motion: reduce) {
  .hb-instinct__split.is-split, .hb-instinct__split.is-split .hb-instinct__chapter, .hb-instinct__split-stage .hb-instinct__visual, .hb-instinct__split-stage .hb-instinct__visual-bg { transition: none; }
}

/* — Variante « cinéma » : scènes plein cadre, ouverture à travers l’étoile de la marque. —
   Hors mode fixé (mobile, tablette, mouvement réduit, sans JavaScript) : scènes en cartes, image au-dessus du texte. */
.hb-instinct__scene {
  --tint: var(--hb-color-forest);
  --scene-ink: var(--hb-color-paper);
  --scene-accent: var(--hb-color-orange);
  position: relative;
  isolation: isolate;
  overflow: clip;
  border-radius: var(--in-radius);
  color: var(--scene-ink);
  background: var(--tint);
}
.hb-instinct__scene--ivory { --tint: var(--in-ivory); --scene-ink: var(--hb-color-ink); }
.hb-instinct__scene--lime { --tint: var(--hb-color-lime); --scene-ink: var(--hb-color-ink); }
.hb-instinct__scene--pine { --tint: var(--hb-color-pine); }
.hb-instinct__scene--orange { --tint: var(--hb-color-orange); --scene-ink: var(--hb-color-forest); --scene-accent: var(--hb-color-forest); }
.hb-instinct__cinema-scenes { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(26px, 3vw, 44px); }
.hb-instinct__cinema-hud { display: none; }
.hb-instinct__scene-media { position: relative; aspect-ratio: 4 / 3.2; overflow: clip; }
.hb-instinct__scene-bg { position: absolute; inset: 0; }
.hb-instinct__scene-bg img { width: 100%; height: 100%; object-fit: cover; }
.hb-instinct__scene-ui { position: absolute; inset: 0; }
.hb-instinct__scene-ui .hb-instinct__visual { width: 100%; height: 100%; aspect-ratio: auto; background: none; border-radius: 0; overflow: visible; }
.hb-instinct__scene-ui .hb-instinct__visual-bg,
.hb-instinct__scene-ui .hb-instinct__visual::before { display: none; }
.hb-instinct__scene-shade { display: none; }
.hb-instinct__scene-copy { padding: clamp(26px, 3.4vw, 56px); }
.hb-instinct__scene-kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; font: 500 11px/1 var(--hb-font-body); letter-spacing: .16em; text-transform: uppercase; }
.hb-instinct__scene-kicker span { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid color-mix(in srgb, currentColor 30%, transparent); font: 500 13px/1 var(--hb-font-heading); letter-spacing: 0; }
.hb-instinct__scene h3 { margin-top: clamp(20px, 2.4vh, 30px); font-size: clamp(46px, 6vw, 112px); line-height: .9; letter-spacing: -.066em; }
.hb-instinct__scene h3 .hb-instinct__dot { color: var(--scene-accent); }
.hb-instinct__scene-promise { margin-top: clamp(16px, 2vh, 24px); font: 500 clamp(20px, 1.7vw, 28px)/1.15 var(--hb-font-heading); letter-spacing: -.035em; }
.hb-instinct__scene-text { max-width: 44ch; margin-top: 12px; font-size: clamp(15px, 1.05vw, 17px); line-height: 1.6; opacity: .78; }
.hb-instinct__scene-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: clamp(20px, 2.6vh, 30px) 0 clamp(24px, 3vh, 34px); }
.hb-instinct__scene-tags li { padding: 9px 14px; border-radius: 999px; border: 1px solid color-mix(in srgb, currentColor 22%, transparent); background: color-mix(in srgb, currentColor 6%, transparent); font-size: 13px; line-height: 1; }
.hb-instinct__scene--orange .hb-button:not(:hover) { background: var(--hb-color-forest); }
.hb-instinct__scene:is(.hb-instinct__scene--ivory, .hb-instinct__scene--lime) .hb-button:hover { background: var(--hb-color-forest); color: var(--hb-color-paper); }

/* Mode fixé (PC) */
.hb-instinct__cinema.is-pinned {
  height: calc(100svh + (var(--count) - 1) * 115svh);
  margin: 0 calc(-1 * var(--hb-gutter));
}
.hb-instinct__cinema.is-pinned .hb-instinct__cinema-pin { position: sticky; top: 0; height: 100svh; padding: 12px; }
.hb-instinct__cinema.is-pinned .hb-instinct__cinema-scenes { position: relative; display: block; height: 100%; border-radius: clamp(24px, 2.4vw, 36px); overflow: clip; background: var(--hb-color-forest); }
.hb-instinct__cinema.is-pinned .hb-instinct__scene { position: absolute; inset: 0; border-radius: 0; will-change: clip-path; }
.hb-instinct__cinema.is-pinned .hb-instinct__scene + .hb-instinct__scene { visibility: hidden; }
.hb-instinct__cinema.is-pinned .hb-instinct__scene-media { position: absolute; inset: 0; aspect-ratio: auto; }
.hb-instinct__cinema.is-pinned .hb-instinct__scene-bg { left: 30%; transform: scale(var(--zoom, 1)); transform-origin: 70% 50%; }
.hb-instinct__cinema.is-pinned .hb-instinct__scene-ui { inset: 15% 4% 17% auto; width: min(44%, 720px); transform: translate3d(0, var(--drift, 0px), 0); }
.hb-instinct__cinema.is-pinned .hb-instinct__scene-shade {
  position: absolute;
  inset: 0;
  display: block;
  background: linear-gradient(90deg, var(--tint) 0%, var(--tint) 30%, color-mix(in srgb, var(--tint) 82%, transparent) 40%, color-mix(in srgb, var(--tint) 20%, transparent) 56%, transparent 70%);
  pointer-events: none;
}
.hb-instinct__cinema.is-pinned .hb-instinct__scene-copy {
  position: absolute;
  top: 50%;
  left: max(var(--hb-gutter), 48px);
  width: min(40%, 600px);
  padding: 0;
  transform: translateY(-50%);
}
/* Contenu de la scène qui arrive : entrée en cascade une fois l’étoile ouverte. */
.hb-instinct__cinema.is-pinned .hb-instinct__scene-copy > * { transition: opacity .8s var(--hb-ease), translate 1s var(--hb-ease); }
.hb-instinct__cinema.is-pinned .hb-instinct__scene:not(.is-shown) .hb-instinct__scene-copy > * { opacity: 0; translate: 0 26px; transition-duration: .3s; transition-delay: 0s; }
.hb-instinct__cinema.is-pinned .hb-instinct__scene.is-shown .hb-instinct__scene-copy > :nth-child(2) { transition-delay: .06s; }
.hb-instinct__cinema.is-pinned .hb-instinct__scene.is-shown .hb-instinct__scene-copy > :nth-child(3) { transition-delay: .12s; }
.hb-instinct__cinema.is-pinned .hb-instinct__scene.is-shown .hb-instinct__scene-copy > :nth-child(4) { transition-delay: .18s; }
.hb-instinct__cinema.is-pinned .hb-instinct__scene.is-shown .hb-instinct__scene-copy > :nth-child(5) { transition-delay: .24s; }
.hb-instinct__cinema.is-pinned .hb-instinct__scene.is-shown .hb-instinct__scene-copy > :nth-child(6) { transition-delay: .3s; }
/* Barre de navigation posée sur les scènes ; sa couleur suit la scène active. */
.hb-instinct__cinema.is-pinned .hb-instinct__cinema-hud {
  position: absolute;
  right: calc(12px + max(var(--hb-gutter), 48px));
  bottom: 40px;
  left: calc(12px + max(var(--hb-gutter), 48px));
  z-index: 5;
  display: flex;
  align-items: flex-end;
  gap: clamp(36px, 4vw, 64px);
  color: var(--hb-color-paper);
  transition: color .6s var(--hb-ease);
}
.hb-instinct__cinema.is-pinned:is([data-tone='ivory'], [data-tone='lime']) .hb-instinct__cinema-hud { color: var(--hb-color-ink); }
.hb-instinct__cinema.is-pinned[data-tone='orange'] .hb-instinct__cinema-hud { color: var(--hb-color-forest); }
.hb-instinct__cinema-count { display: flex; align-items: baseline; gap: 8px; font-variant-numeric: tabular-nums; }
.hb-instinct__cinema-count b { font: 500 44px/1 var(--hb-font-heading); letter-spacing: -.05em; }
.hb-instinct__cinema-count span { font: 500 12px/1 var(--hb-font-body); letter-spacing: .12em; opacity: .6; }
.hb-instinct__cinema-steps { display: grid; grid-template-columns: repeat(var(--count), minmax(0, 120px)); gap: 14px; }
.hb-instinct__cinema-steps button { display: grid; gap: 10px; padding: 0 0 2px; color: inherit; font: 500 10.5px/1.2 var(--hb-font-body); letter-spacing: .14em; text-align: left; text-transform: uppercase; opacity: .55; transition: opacity .4s; }
.hb-instinct__cinema-steps button:hover, .hb-instinct__cinema-steps [aria-current] { opacity: 1; }
.hb-instinct__cinema-steps i { position: relative; height: 2px; border-radius: 2px; background: color-mix(in srgb, currentColor 25%, transparent); overflow: hidden; }
.hb-instinct__cinema-steps b { position: absolute; inset: 0; background: currentColor; transform: scaleX(var(--fill, 0)); transform-origin: 0 50%; }

/* — Variante « liquide » : mêmes scènes que la 08, images fondues en WebGL, teinte continue,
   parallaxe à la souris, titres lettre par lettre. — */
.hb-instinct__cinema-canvas, .hb-instinct__cinema-shade { display: none; }
.hb-instinct__title-word { display: inline-block; white-space: nowrap; }
.hb-instinct__cinema--liquid.is-pinned .hb-instinct__cinema-scenes { background: var(--tint-live, var(--hb-color-forest)); }
.hb-instinct__cinema--liquid.is-pinned .hb-instinct__cinema-canvas {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 30%;
  display: block;
  width: 70%;
  height: 100%;
  transform: translate3d(calc(var(--mx, 0) * 12px), calc(var(--my, 0) * 9px), 0) scale(1.04);
  transition: transform 1.3s var(--hb-ease);
}
.hb-instinct__cinema--liquid.is-pinned .hb-instinct__cinema-shade {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  background: linear-gradient(90deg, var(--tint-live) 0%, var(--tint-live) 30%, color-mix(in srgb, var(--tint-live) 82%, transparent) 40%, color-mix(in srgb, var(--tint-live) 18%, transparent) 56%, transparent 70%);
  pointer-events: none;
}
.hb-instinct__cinema--liquid.is-pinned .hb-instinct__scene {
  z-index: 2;
  visibility: hidden;
  background: none;
  clip-path: none;
  opacity: 0;
  transition: opacity .35s var(--hb-ease), visibility 0s linear .35s;
}
.hb-instinct__cinema--liquid.is-pinned .hb-instinct__scene.is-current { visibility: visible; opacity: 1; transition-delay: 0s; }
.hb-instinct__cinema--liquid.is-pinned .hb-instinct__scene-shade { display: none; }
.hb-instinct__cinema--liquid.is-pinned.has-gl .hb-instinct__scene-bg { visibility: hidden; }
/* Sans WebGL : l’image de chaque scène reste visible et se fond avec la scène. */
.hb-instinct__cinema--liquid.is-pinned:not(.has-gl) .hb-instinct__scene-bg { z-index: -1; }
.hb-instinct__cinema--liquid.is-pinned .hb-instinct__scene-ui {
  /* Parallaxe à la souris : l’interface et l’image glissent en sens opposés, textes nets. */
  transform: translate3d(calc(var(--mx, 0) * -22px), calc(var(--my, 0) * -14px), 0);
  transition: transform 1.1s var(--hb-ease), opacity .7s var(--hb-ease), scale 1s var(--hb-ease);
}
.hb-instinct__cinema--liquid.is-pinned .hb-instinct__scene:not(.is-shown) .hb-instinct__scene-ui { opacity: 0; scale: .94; }
/* Titre : chaque lettre monte depuis sous sa ligne. */
.hb-instinct__cinema--liquid.is-pinned .hb-instinct__title-word { overflow: clip; padding: 0 .02em .1em 0; margin-bottom: -.1em; vertical-align: top; }
.hb-instinct__cinema--liquid.is-pinned .hb-instinct__title-chars span:not(.hb-instinct__title-word) {
  display: inline-block;
  translate: 0 0;
  transition: translate .95s var(--hb-ease) calc(var(--c) * 24ms);
}
.hb-instinct__cinema--liquid.is-pinned .hb-instinct__scene:not(.is-shown) .hb-instinct__title-chars span:not(.hb-instinct__title-word) { translate: 0 112%; transition-duration: .3s; transition-delay: 0s; }
.hb-instinct__cinema--liquid.is-pinned .hb-instinct__scene:not(.is-shown) .hb-instinct__scene-copy > h3 { opacity: 1; translate: none; }

/* Visuels des cartes */
.hb-instinct__visual {
  position: relative;
  isolation: isolate;
  min-height: 0;
  border-radius: calc(var(--in-radius) - 10px);
  overflow: clip;
  background: #0d1a13;
}
.hb-instinct__visual-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.4s var(--hb-ease);
}
.hb-instinct__chip {
  position: absolute;
  left: 18px;
  bottom: 18px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 15px 10px 12px;
  border-radius: 999px;
  color: var(--hb-color-ink);
  background: rgba(245, 247, 240, .82);
  border: 1px solid rgba(255, 255, 255, .6);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  font: 500 12px/1 var(--hb-font-body);
  box-shadow: 0 12px 30px -16px rgba(0, 0, 0, .45);
}
.hb-instinct__chip svg { width: 13px; fill: var(--hb-color-orange); }
.hb-instinct__float { animation: hb-instinct-float 7s ease-in-out infinite alternate; }

/* 01 · site web */
.hb-instinct__visual--web::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(8, 18, 13, .1), rgba(8, 18, 13, .55)); }
.hb-instinct__browser {
  position: absolute;
  top: 11%;
  left: 7%;
  width: 76%;
  border-radius: 12px;
  overflow: hidden;
  background: #f4f4f1;
  box-shadow: 0 40px 70px -30px rgba(0, 0, 0, .75), 0 0 0 1px rgba(255, 255, 255, .25);
}
.hb-instinct__browser-bar { display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; background: #ecece7; border-bottom: 1px solid #dcdcd5; }
.hb-instinct__browser-bar i { width: 9px; height: 9px; border-radius: 50%; background: #cfcfc8; }
.hb-instinct__browser-bar i:first-child { background: #ff7a59; }
.hb-instinct__browser-bar span { margin: 0 auto; padding: 4px 18px; border-radius: 6px; background: #fff; color: #6f736b; font: 400 10.5px/1 var(--hb-font-body); transform: translateX(-16px); }
.hb-instinct__browser img { width: 100%; height: auto; }
.hb-instinct__phone {
  position: absolute;
  right: 7%;
  bottom: 9%;
  width: 21%;
  min-width: 96px;
  padding: 5px;
  border-radius: 24px;
  background: #0a0d0b;
  box-shadow: 0 36px 60px -24px rgba(0, 0, 0, .8), inset 0 0 0 1px rgba(255, 255, 255, .14);
}
.hb-instinct__phone img { width: 100%; height: auto; border-radius: 19px; }

/* 02 · référencement */
.hb-instinct__visual--seo .hb-instinct__visual-bg { object-position: 50% 38%; }
.hb-instinct__visual--seo::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(200deg, transparent 35%, rgba(10, 20, 15, .55)); }
.hb-instinct__serp {
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: 13%;
  max-width: 470px;
  padding: 16px;
  border-radius: 20px;
  color: var(--hb-color-ink);
  background: rgba(250, 251, 247, .9);
  border: 1px solid rgba(255, 255, 255, .7);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 40px 70px -30px rgba(0, 0, 0, .6);
}
.hb-instinct__serp-field { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px #e1e5da; font-size: 14px; }
.hb-instinct__serp-field svg { width: 17px; fill: none; stroke: var(--hb-color-muted); stroke-width: 2; }
.hb-instinct__serp-field i { width: 1.5px; height: 17px; margin-left: -6px; background: var(--hb-color-orange); animation: hb-instinct-caret 1s steps(1) infinite; }
.hb-instinct__serp ol { display: grid; gap: 6px; margin-top: 12px; }
.hb-instinct__serp li { display: grid; grid-template-columns: 30px 1fr; align-items: center; gap: 12px; padding: 12px; border-radius: 13px; }
.hb-instinct__serp li > b { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #eef1e8; font: 500 13px/1 var(--hb-font-heading); }
.hb-instinct__serp li div { display: grid; gap: 7px; }
.hb-instinct__serp li i { display: block; height: 7px; border-radius: 4px; background: #e3e7dc; }
.hb-instinct__serp li i + i { width: 62%; }
.hb-instinct__serp .is-you { background: #fff; box-shadow: 0 12px 30px -18px rgba(16, 33, 25, .5), inset 0 0 0 1px #e6eadf; }
.hb-instinct__serp .is-you > b { color: #fff; background: var(--hb-color-orange); }
.hb-instinct__serp .is-you small { color: #3d7a3f; font-size: 11.5px; line-height: 1; }
.hb-instinct__serp .is-you strong { font: 500 15.5px/1.15 var(--hb-font-heading); letter-spacing: -.02em; }
.hb-instinct__serp .is-you i { width: 78%; }
.hb-instinct__visual--seo .hb-instinct__chip { top: 18px; right: 18px; bottom: auto; left: auto; }

/* 03 · GEO */
.hb-instinct__visual--geo .hb-instinct__visual-bg { object-position: 62% 50%; }
.hb-instinct__chat {
  position: absolute;
  right: 7%;
  bottom: 9%;
  left: 12%;
  max-width: 480px;
  margin-left: auto;
  padding: 18px;
  border-radius: 22px;
  color: var(--hb-color-paper);
  background: rgba(14, 30, 22, .8);
  border: 1px solid rgba(233, 237, 226, .14);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .6);
}
.hb-instinct__chat-question { width: fit-content; max-width: 86%; margin-left: auto; padding: 11px 15px; border-radius: 16px 16px 5px 16px; background: rgba(233, 237, 226, .13); font-size: 14px; line-height: 1.4; }
.hb-instinct__chat-answer { display: grid; grid-template-columns: 30px 1fr; gap: 12px; margin-top: 16px; }
.hb-instinct__chat-answer > span { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--hb-color-orange); }
.hb-instinct__chat-answer > span svg { width: 13px; fill: #fff; }
.hb-instinct__chat-answer p { font-size: 14.5px; line-height: 1.55; color: rgba(233, 237, 226, .88); }
.hb-instinct__chat mark { padding: 1px 6px; border-radius: 5px; color: var(--hb-color-ink); background: var(--hb-color-lime); font-weight: 500; }
.hb-instinct__chat sup { margin-left: 3px; padding: 1px 5px; border-radius: 6px; background: rgba(233, 237, 226, .16); font-size: 10px; }
.hb-instinct__chat-source { display: flex; align-items: center; gap: 10px; margin: 14px 0 0 42px; font-size: 11.5px; }
.hb-instinct__chat-source span { opacity: .55; letter-spacing: .1em; text-transform: uppercase; font-size: 10px; }
.hb-instinct__chat-source em { padding: 6px 10px; border-radius: 999px; background: rgba(212, 226, 180, .14); color: var(--hb-color-lime); }

/* 04 · Google Ads */
.hb-instinct__visual--ads .hb-instinct__visual-bg { object-position: 50% 30%; }
.hb-instinct__visual--ads::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(160deg, rgba(10, 20, 15, .1), rgba(10, 20, 15, .5)); }
.hb-instinct__ad {
  position: absolute;
  top: 10%;
  left: 7%;
  width: min(410px, 82%);
  padding: 20px 22px;
  border-radius: 20px;
  color: var(--hb-color-ink);
  background: #fbfcf8;
  box-shadow: 0 40px 70px -30px rgba(0, 0, 0, .65);
}
.hb-instinct__ad small { display: flex; align-items: center; gap: 9px; color: #4f5a4b; font-size: 12px; }
.hb-instinct__ad small b { font-weight: 600; color: var(--hb-color-ink); }
.hb-instinct__ad strong { display: block; margin-top: 10px; color: #1f4f9a; font: 500 21px/1.15 var(--hb-font-heading); letter-spacing: -.03em; }
.hb-instinct__ad p { margin-top: 8px; color: #5a6457; font-size: 13.5px; line-height: 1.5; }
.hb-instinct__ad > span { display: flex; gap: 18px; margin-top: 12px; padding-top: 12px; border-top: 1px solid #e7eae1; font-size: 12.5px; color: #1f4f9a; }
.hb-instinct__ad i { font-style: normal; }
.hb-instinct__toast {
  position: absolute;
  right: 7%;
  bottom: 10%;
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 13px 18px 13px 13px;
  border-radius: 18px;
  color: var(--hb-color-ink);
  background: rgba(245, 247, 240, .92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .6);
}
.hb-instinct__toast > span { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: var(--hb-color-lime); }
.hb-instinct__toast svg { width: 19px; fill: none; stroke: var(--hb-color-forest); stroke-width: 2.2; }
.hb-instinct__toast strong { display: block; font: 500 14.5px/1.2 var(--hb-font-heading); letter-spacing: -.02em; }
.hb-instinct__toast small { font-size: 11.5px; color: var(--hb-color-muted); }

/* 05 · Social Ads */
.hb-instinct__visual--social { background: #1b0d08; }
.hb-instinct__visual--social .hb-instinct__visual-bg { object-position: 50% 28%; opacity: .62; filter: grayscale(.15); }
.hb-instinct__story {
  position: absolute;
  top: 50%;
  right: 16%;
  width: min(270px, 44%);
  aspect-ratio: 9 / 16;
  padding: 6px;
  border-radius: 34px;
  background: #0b0c0b;
  box-shadow: 0 50px 80px -30px rgba(0, 0, 0, .85), inset 0 0 0 1px rgba(255, 255, 255, .14);
  transform: translateY(-50%) rotate(5deg);
}
.hb-instinct__story > img { width: 100%; height: 100%; border-radius: 28px; object-fit: cover; object-position: 58% 50%; }
.hb-instinct__story-bars { position: absolute; top: 18px; left: 20px; right: 20px; z-index: 1; display: flex; gap: 4px; }
.hb-instinct__story-bars i { flex: 1; height: 2.5px; border-radius: 2px; background: rgba(255, 255, 255, .45); }
.hb-instinct__story-bars i:first-child { background: #fff; }
.hb-instinct__story-who { position: absolute; top: 30px; left: 20px; z-index: 1; display: flex; align-items: center; gap: 8px; color: #fff; font: 500 12px/1.15 var(--hb-font-body); text-shadow: 0 1px 6px rgba(0, 0, 0, .4); }
.hb-instinct__story-who b { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--hb-color-orange); }
.hb-instinct__story-who svg { width: 12px; fill: #fff; }
.hb-instinct__story-who small { display: block; font-size: 10px; font-weight: 400; opacity: .85; }
.hb-instinct__story-cta { position: absolute; left: 20px; right: 20px; bottom: 22px; padding: 12px; border-radius: 999px; background: #fff; color: var(--hb-color-ink); font: 500 13px/1 var(--hb-font-body); text-align: center; }
.hb-instinct__hearts { position: absolute; left: 22%; bottom: 18%; display: grid; gap: 10px; }
.hb-instinct__hearts i {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  color: var(--hb-color-orange);
  background: #fff;
  font: normal 20px/1 Arial, sans-serif;
  box-shadow: 0 16px 30px -12px rgba(0, 0, 0, .5);
}
.hb-instinct__hearts i:nth-child(2) { margin-left: 34px; transform: scale(.78); }
.hb-instinct__hearts i:nth-child(3) { margin-left: 6px; transform: scale(.6); }

/* Les animations d’illustration ne tournent que lorsque leur carte (ou leur visuel, variante chapitres) est visible. */
@media (prefers-reduced-motion: no-preference) {
  .hb-instinct__visual :is(.hb-instinct__browser, .hb-instinct__serp, .hb-instinct__chat, .hb-instinct__ad, .hb-instinct__story-cta, .hb-instinct__hearts) { animation: hb-instinct-float 6.5s ease-in-out infinite alternate; animation-play-state: paused; }
  .hb-instinct__visual :is(.hb-instinct__phone, .hb-instinct__toast) { animation: hb-instinct-float 5.5s ease-in-out -2s infinite alternate-reverse; animation-play-state: paused; }
  .hb-instinct__visual .hb-instinct__story { animation: hb-instinct-tilt 7s ease-in-out infinite alternate; animation-play-state: paused; }
  :is([data-instinct-card], [data-instinct-visual]).is-inview :is(.hb-instinct__browser, .hb-instinct__serp, .hb-instinct__chat, .hb-instinct__ad, .hb-instinct__story-cta, .hb-instinct__hearts, .hb-instinct__phone, .hb-instinct__toast, .hb-instinct__story) { animation-play-state: running; }
  .hb-instinct.is-ready :is([data-instinct-card], [data-instinct-visual]):not(.is-seen) :is(.hb-instinct__chat-answer, .hb-instinct__chat-source, .hb-instinct__toast, .hb-instinct__serp .is-you) { opacity: 0; translate: 0 14px; }
  .hb-instinct__visual :is(.hb-instinct__chat-answer, .hb-instinct__chat-source, .hb-instinct__toast, .hb-instinct__serp .is-you) { transition: opacity .8s var(--hb-ease), translate .9s var(--hb-ease); }
  :is([data-instinct-card], [data-instinct-visual]).is-seen .hb-instinct__chat-answer { transition-delay: .5s; }
  :is([data-instinct-card], [data-instinct-visual]).is-seen .hb-instinct__chat-source { transition-delay: 1s; }
  :is([data-instinct-card], [data-instinct-visual]).is-seen .hb-instinct__toast { transition-delay: .7s; }
  :is([data-instinct-card], [data-instinct-visual]).is-seen .hb-instinct__serp .is-you { transition-delay: .45s; }
}
@keyframes hb-instinct-float { from { translate: 0 0; } to { translate: 0 -10px; } }
@keyframes hb-instinct-tilt { from { transform: translateY(-50%) rotate(5deg); } to { transform: translateY(calc(-50% - 10px)) rotate(3deg); } }
@keyframes hb-instinct-caret { 50% { opacity: 0; } }

/* — Panneau forêt : méthode + réalisations — */
.hb-instinct__forest {
  position: relative;
  isolation: isolate;
  color: var(--hb-color-paper);
  background: var(--hb-color-forest);
  border-radius: clamp(28px, 3vw, 48px) clamp(28px, 3vw, 48px) 0 0;
  overflow: clip;
}
.hb-instinct__forest::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url('/assets/textures/mineral-grain.svg');
  opacity: .07;
  mix-blend-mode: overlay;
  pointer-events: none;
}
.hb-instinct__method { position: relative; padding: var(--in-pad) var(--hb-gutter) clamp(96px, 9vw, 160px); }
.hb-instinct__method .hb-instinct__section-head { grid-template-columns: minmax(0, 1fr); max-width: 60%; }
.hb-instinct__lookout {
  position: absolute;
  top: clamp(-20px, -1vw, 0px);
  right: -2%;
  width: clamp(380px, 40vw, 720px);
  transform: scaleX(-1);
  pointer-events: none;
}
.hb-instinct__lookout img { width: 100%; height: auto; }
.hb-instinct__steps { position: relative; padding-top: 58px; }
.hb-instinct__steps ol { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(22px, 3vw, 52px); }
.hb-instinct__steps-line { position: absolute; top: 21px; left: 22px; right: 0; height: 1px; background: rgba(233, 237, 226, .16); }
.hb-instinct__steps-line i { position: absolute; inset: 0; background: var(--hb-color-orange); transform: scaleX(var(--progress, 1)); transform-origin: 0 50%; }
.hb-instinct__step { position: relative; }
.hb-instinct__step-num {
  position: absolute;
  top: -58px;
  left: 0;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  color: var(--hb-color-paper);
  background: var(--hb-color-forest);
  border: 1px solid rgba(233, 237, 226, .28);
  font: 500 14px/1 var(--hb-font-heading);
  transition: background-color .5s var(--hb-ease), border-color .5s, color .5s;
}
.hb-instinct__step.is-active .hb-instinct__step-num { color: #fff; background: var(--hb-color-orange); border-color: var(--hb-color-orange); }
.hb-instinct__step h3 { margin-top: 30px; font-size: clamp(28px, 2.4vw, 40px); letter-spacing: -.05em; }
.hb-instinct__step p { max-width: 30ch; margin-top: 14px; color: rgba(233, 237, 226, .7); font-size: 15.5px; line-height: 1.6; }

.hb-instinct__work { position: relative; padding: clamp(80px, 7vw, 120px) 0 var(--in-pad); border-top: 1px solid rgba(233, 237, 226, .1); }
.hb-instinct__work .hb-instinct__section-head { padding: 0 var(--hb-gutter); grid-template-columns: minmax(0, 1fr) auto; }
.hb-instinct__work-controls { display: flex; align-items: center; gap: 10px; }
.hb-instinct__work-controls button {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  border: 1px solid rgba(233, 237, 226, .24);
  transition: background-color .3s, color .3s, border-color .3s;
}
.hb-instinct__work-controls button svg { width: 20px; }
.hb-instinct__work-controls button[data-instinct-prev] svg { transform: rotate(180deg); }
.hb-instinct__work-controls button:not(:disabled):hover { color: var(--hb-color-forest); background: var(--hb-color-paper); border-color: var(--hb-color-paper); }
.hb-instinct__work-controls .hb-instinct__ghost { margin-left: 22px; border-color: rgba(233, 237, 226, .3); }
.hb-instinct__reel {
  display: flex;
  gap: clamp(14px, 1.4vw, 22px);
  padding: 0 var(--hb-gutter) 8px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--hb-gutter);
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.hb-instinct__reel::-webkit-scrollbar { display: none; }
.hb-instinct__reel.is-dragging { scroll-snap-type: none; cursor: grabbing; }
.hb-instinct__reel.is-dragging * { pointer-events: none; }
.hb-instinct__reel li { flex: 0 0 clamp(290px, 35vw, 620px); scroll-snap-align: start; }
.hb-instinct__project { display: block; }
.hb-instinct__project figure {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: clamp(18px, 1.6vw, 26px);
  overflow: hidden;
  background: #0b1610;
}
.hb-instinct__project img, .hb-instinct__project video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--hb-ease), opacity .6s;
}
.hb-instinct__project video { opacity: 0; }
.hb-instinct__project figure.is-playing video { opacity: 1; }
.hb-instinct__project:hover img, .hb-instinct__project:hover video, .hb-instinct__project:focus-visible img { transform: scale(1.045); }
.hb-instinct__project-meta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 16px;
  align-items: center;
  padding: 20px 4px 0;
}
.hb-instinct__project-meta strong { font: 500 clamp(24px, 2vw, 32px)/1.05 var(--hb-font-heading); letter-spacing: -.045em; }
.hb-instinct__project-meta small { grid-column: 1; color: rgba(233, 237, 226, .6); font-size: 13.5px; }
.hb-instinct__project-meta i {
  grid-column: 2;
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid rgba(233, 237, 226, .22);
  transition: background-color .35s, color .35s, border-color .35s;
}
.hb-instinct__project-meta svg { width: 18px; transform: rotate(-45deg); transition: transform .45s var(--hb-ease); }
.hb-instinct__project:hover .hb-instinct__project-meta i, .hb-instinct__project:focus-visible .hb-instinct__project-meta i { color: #fff; background: var(--hb-color-orange); border-color: var(--hb-color-orange); }
.hb-instinct__project:hover .hb-instinct__project-meta svg { transform: none; }
.hb-instinct__reel-track { position: relative; height: 2px; margin: clamp(36px, 3.4vw, 56px) var(--hb-gutter) 0; background: rgba(233, 237, 226, .14); border-radius: 2px; }
.hb-instinct__reel-track i { position: absolute; inset: 0 auto 0 0; width: 30%; border-radius: inherit; background: var(--hb-color-paper); will-change: transform; }
.hb-instinct__cursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 4px;
  width: 110px;
  height: 110px;
  margin: -55px 0 0 -55px;
  border-radius: 50%;
  color: #fff;
  background: var(--hb-color-orange);
  font: 500 12px/1.15 var(--hb-font-body);
  text-align: center;
  pointer-events: none;
  opacity: 0;
  scale: .4;
  transition: opacity .3s, scale .45s var(--hb-ease);
}
.hb-instinct__cursor svg { width: 16px; fill: #fff; }
.hb-instinct__cursor.is-visible { opacity: 1; scale: 1; }
@media (pointer: fine) {
  .hb-instinct__reel { cursor: grab; }
  .hb-instinct__work.has-cursor .hb-instinct__project { cursor: none; }
}

/* — Pourquoi Happy Biz — */
.hb-instinct__why { padding: var(--in-pad) var(--hb-gutter) clamp(72px, 7vw, 120px); }
.hb-instinct__bento {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-rows: minmax(250px, auto);
  gap: clamp(12px, 1.2vw, 20px);
  margin-top: clamp(200px, 17vw, 290px);
}
.hb-instinct__tile {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 14px;
  padding: clamp(26px, 2.4vw, 40px);
  border-radius: var(--in-radius);
  background: var(--in-ivory);
}
.hb-instinct__tile h3 { font-size: clamp(28px, 2.5vw, 44px); line-height: 1; letter-spacing: -.055em; }
.hb-instinct__tile p:not(.hb-instinct__tile-label) { max-width: 42ch; color: var(--in-soft); font-size: 15.5px; line-height: 1.55; }
.hb-instinct__tile-label { margin-bottom: auto; font: 500 11px/1 var(--hb-font-body); letter-spacing: .15em; text-transform: uppercase; opacity: .6; }
.hb-instinct__tile--studio { grid-column: 1 / 7; grid-row: 1 / 3; color: var(--hb-color-paper); background: var(--hb-color-forest); }
.hb-instinct__tile--studio h3 { max-width: 15ch; font-size: clamp(36px, 3.7vw, 66px); line-height: .95; }
.hb-instinct__reader { position: absolute; right: 7%; bottom: calc(100% - 2px); width: clamp(200px, 19vw, 320px); pointer-events: none; }
.hb-instinct__reader img { width: 100%; height: auto; }
.hb-instinct__tile--photo { grid-column: 7 / 10; grid-row: 1 / 3; padding: 0; overflow: hidden; color: var(--hb-color-paper); }
.hb-instinct__tile--photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--hb-ease); }
.hb-instinct__tile--photo:hover img { transform: scale(1.04); }
.hb-instinct__tile--photo figcaption {
  position: relative;
  display: grid;
  gap: 6px;
  margin: 14px;
  padding: 16px 18px;
  border-radius: 18px;
  background: rgba(16, 33, 25, .55);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  font: 500 17px/1.2 var(--hb-font-heading);
  letter-spacing: -.02em;
}
.hb-instinct__tile--photo figcaption span:first-child { font: 500 10.5px/1 var(--hb-font-body); letter-spacing: .15em; text-transform: uppercase; opacity: .7; }
.hb-instinct__cities span { opacity: .5; }
.hb-instinct__tile--tools { grid-column: 10 / 13; background: var(--hb-color-lime); }
.hb-instinct__tools { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 12px; margin: 22px 0 10px; }
.hb-instinct__tool { display: flex; align-items: center; gap: 10px; min-width: 0; font-size: 12.5px; }
.hb-instinct__tool .hb-inline-icon { flex: none; width: 42px; height: 42px; margin: 0; }
.hb-instinct__tool small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; opacity: .75; }
.hb-instinct__tile--measure { grid-column: 10 / 13; color: var(--hb-color-forest); background: var(--hb-color-orange); }
.hb-instinct__tile--measure p:not(.hb-instinct__tile-label) { color: rgba(16, 33, 25, .78); }
.hb-instinct__tile--measure .hb-instinct__dot { color: inherit; }
.hb-instinct__tile-star { align-self: flex-end; width: 40px; margin-bottom: auto; }
.hb-instinct__tile-star svg { width: 100%; fill: currentColor; transition: rotate 1.2s var(--hb-ease); }
.hb-instinct__tile--measure:hover .hb-instinct__tile-star svg { rotate: 90deg; }
.hb-instinct__tile--search { grid-column: 1 / 7; box-shadow: inset 0 0 0 1px rgba(26, 41, 32, .08); }
.hb-instinct__tile--craft { grid-column: 7 / 13; color: var(--hb-color-paper); background: var(--hb-color-pine); }
.hb-instinct__tile--craft h3 { max-width: 18ch; }

/* — FAQ — */
.hb-instinct__faq {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: 48px clamp(40px, 7vw, 140px);
  padding: clamp(72px, 7vw, 120px) var(--hb-gutter) var(--in-pad);
  interpolate-size: allow-keywords;
}
.hb-instinct__faq-head { position: sticky; top: 130px; align-self: start; }
.hb-instinct__faq-head h2 { margin: 26px 0 26px; font-size: clamp(52px, 5.6vw, 100px); line-height: .92; letter-spacing: -.066em; }
.hb-instinct__faq-head p { margin-bottom: 14px; color: var(--hb-color-muted); }
.hb-instinct__faq-list { border-top: 1px solid var(--in-rule); }
.hb-instinct__faq details { border-bottom: 1px solid var(--in-rule); }
.hb-instinct__faq summary {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) 46px;
  align-items: center;
  gap: 16px;
  padding: clamp(22px, 2vw, 32px) 0;
  list-style: none;
  cursor: pointer;
}
.hb-instinct__faq summary::-webkit-details-marker { display: none; }
.hb-instinct__faq summary:focus-visible { outline-offset: -2px; border-radius: 8px; }
.hb-instinct__faq-num { color: var(--hb-color-muted); font: 500 12px/1 var(--hb-font-body); letter-spacing: .08em; font-variant-numeric: tabular-nums; }
.hb-instinct__faq summary h3 { font-size: clamp(21px, 1.8vw, 30px); line-height: 1.15; letter-spacing: -.035em; transition: color .3s; }
.hb-instinct__faq summary:hover h3 { color: #3f5a42; }
.hb-instinct__faq-toggle { position: relative; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--in-rule); transition: background-color .4s var(--hb-ease), border-color .4s, rotate .5s var(--hb-ease); }
.hb-instinct__faq-toggle::before, .hb-instinct__faq-toggle::after { content: ''; position: absolute; top: 50%; left: 50%; width: 14px; height: 1.5px; margin: -.75px 0 0 -7px; background: currentColor; }
.hb-instinct__faq-toggle::after { rotate: 90deg; }
.hb-instinct__faq details[open] .hb-instinct__faq-toggle { rotate: 45deg; color: #fff; background: var(--hb-color-orange); border-color: var(--hb-color-orange); }
.hb-instinct__faq details > p { max-width: 62ch; padding: 0 62px 30px 56px; color: var(--in-soft); font-size: clamp(15.5px, 1.15vw, 18px); line-height: 1.65; }
@media (prefers-reduced-motion: no-preference) {
  .hb-instinct__faq details::details-content { block-size: 0; overflow: clip; transition: block-size .5s var(--hb-ease), content-visibility .5s allow-discrete; }
  .hb-instinct__faq details[open]::details-content { block-size: auto; }
}

/* — Adaptations — */
@media (max-width: 1180px) {
  .hb-instinct__index small { display: none; }
  .hb-instinct__index a { padding: 14px 14px 16px; }
  .hb-instinct__card { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .hb-instinct__card-list { grid-template-columns: minmax(0, 1fr); }
  .hb-instinct__card-list li:nth-child(n + 4) { display: none; }
  .hb-instinct__steps ol { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 90px; }
  .hb-instinct__steps-line { display: none; }
  .hb-instinct__method .hb-instinct__section-head { max-width: 100%; }
  .hb-instinct__lookout { top: auto; bottom: 46%; width: 44vw; opacity: .9; }
  .hb-instinct__bento { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .hb-instinct__tile--studio { grid-column: 1 / 7; grid-row: auto; min-height: 360px; }
  .hb-instinct__tile--photo { grid-column: 1 / 4; grid-row: span 2; min-height: 480px; }
  .hb-instinct__tile--tools, .hb-instinct__tile--measure { grid-column: 4 / 7; }
  .hb-instinct__tile--search, .hb-instinct__tile--craft { grid-column: span 3; }
}

@media (max-width: 1023px) {
  .hb-instinct__card {
    height: auto;
    grid-template-columns: minmax(0, 1fr);
  }
  .hb-instinct__visual { order: -1; aspect-ratio: 4 / 3.1; }
  .hb-instinct__card-heading { margin: 0; }
  .hb-instinct__card-list li:nth-child(n + 4) { display: flex; }
  .hb-instinct__section-head, .hb-instinct__work .hb-instinct__section-head { grid-template-columns: minmax(0, 1fr); }
  .hb-instinct__faq { grid-template-columns: minmax(0, 1fr); }
  .hb-instinct__faq-head { position: static; }
  .hb-instinct__index ol { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hb-instinct__index li:nth-child(4) { border-left: 0; }
  .hb-instinct__index li:nth-child(n + 4) { border-top: 1px solid rgba(233, 237, 226, .12); }
}

@media (max-width: 760px) {
  .hb-instinct { --in-pad: 88px; }
  .hb-instinct__hero { min-height: max(100svh, 700px); padding: 130px var(--hb-gutter-mobile) 34px; }
  .hb-instinct__hero-leaves { width: 130vw; right: -40%; bottom: -4%; }
  .hb-instinct__hero .hb-breadcrumb { margin-bottom: 26px; }
  .hb-instinct__title { margin-top: 20px; font-size: clamp(46px, 13.4vw, 64px); line-height: .94; }
  .hb-instinct__lead { font-size: 16px; }
  .hb-instinct__index { display: none; }
  .hb-instinct__marquee-track { font-size: 44px; }
  .hb-instinct__approach, .hb-instinct__services, .hb-instinct__method, .hb-instinct__why, .hb-instinct__faq { padding-left: var(--hb-gutter-mobile); padding-right: var(--hb-gutter-mobile); }
  .hb-instinct__statement { font-size: clamp(30px, 8.6vw, 38px); line-height: 1.1; }
  .hb-instinct__section-head h2, .hb-instinct__faq-head h2 { font-size: var(--hb-font-size-h2-mobile); line-height: .98; letter-spacing: -.055em; }
  .hb-instinct__section-head { margin-bottom: 40px; }
  .hb-instinct__card { gap: 22px; padding: 12px 12px 24px; border-radius: 26px; }
  .hb-instinct__card-copy { padding: 6px 8px 0; }
  .hb-instinct__card-heading { padding: 26px 0 22px; }
  .hb-instinct__card h3 { font-size: var(--hb-font-size-h3-mobile); letter-spacing: -.05em; }
  .hb-instinct__card-list { grid-template-columns: minmax(0, 1fr); }
  .hb-instinct__card-foot { flex-direction: column; align-items: flex-start; }
  .hb-instinct__visual { aspect-ratio: 4 / 4.2; border-radius: 18px; }
  .hb-instinct__browser { top: 9%; left: 6%; width: 84%; border-radius: 9px; }
  .hb-instinct__browser-bar { height: 22px; }
  .hb-instinct__browser-bar span { font-size: 9px; padding: 3px 10px; }
  .hb-instinct__phone { width: 27%; right: 5%; bottom: 7%; border-radius: 18px; padding: 4px; }
  .hb-instinct__phone img { border-radius: 14px; }
  .hb-instinct__chip { left: 12px; bottom: 12px; padding: 8px 12px 8px 10px; font-size: 11px; }
  .hb-instinct__serp { left: 5%; right: 5%; bottom: 8%; padding: 10px; border-radius: 16px; }
  .hb-instinct__serp-field { padding: 10px 13px; font-size: 13px; }
  .hb-instinct__serp li { padding: 9px; }
  .hb-instinct__serp li:last-child { display: none; }
  .hb-instinct__chat { left: 5%; right: 5%; bottom: 6%; padding: 14px; }
  .hb-instinct__chat-answer p, .hb-instinct__chat-question { font-size: 13px; }
  .hb-instinct__ad { top: 7%; left: 5%; width: 84%; padding: 16px; }
  .hb-instinct__ad strong { font-size: 18px; }
  .hb-instinct__toast { right: 5%; bottom: 6%; padding: 10px 14px 10px 10px; }
  .hb-instinct__story { right: 12%; width: 46%; border-radius: 26px; padding: 5px; }
  .hb-instinct__story > img { border-radius: 21px; }
  .hb-instinct__story-cta { left: 12px; right: 12px; bottom: 14px; padding: 10px 6px; font-size: 11.5px; white-space: nowrap; }
  .hb-instinct__story-who { top: 26px; left: 14px; font-size: 11px; }
  .hb-instinct__story-bars { top: 14px; left: 14px; right: 14px; }
  .hb-instinct__hearts { left: 10%; }
  .hb-instinct__hearts i { width: 40px; height: 40px; }
  .hb-instinct__steps { padding-top: 0; }
  .hb-instinct__steps ol { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
  .hb-instinct__step { padding: 0 0 38px 64px; }
  .hb-instinct__step-num { top: -6px; }
  .hb-instinct__step h3 { margin-top: 0; font-size: 28px; }
  .hb-instinct__steps-line { display: block; top: 0; bottom: 40px; left: 22px; right: auto; width: 1px; height: auto; }
  .hb-instinct__steps-line i { transform: scaleY(var(--progress, 1)); transform-origin: 50% 0; }
  .hb-instinct__lookout { position: relative; top: auto; bottom: auto; right: -14%; width: 112%; margin: -40px 0 10px auto; }
  .hb-instinct__work { padding-top: 72px; }
  .hb-instinct__work .hb-instinct__section-head { padding: 0 var(--hb-gutter-mobile); }
  .hb-instinct__work-controls { flex-wrap: wrap; }
  .hb-instinct__work-controls button { display: none; }
  .hb-instinct__work-controls .hb-instinct__ghost { margin-left: 0; }
  .hb-instinct__reel { padding: 0 var(--hb-gutter-mobile) 4px; scroll-padding-inline: var(--hb-gutter-mobile); }
  .hb-instinct__reel li { flex-basis: 82%; }
  .hb-instinct__reel-track { margin: 30px var(--hb-gutter-mobile) 0; }
  .hb-instinct__bento { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; margin-top: 150px; }
  .hb-instinct__bento > * { grid-column: 1 / -1 !important; grid-row: auto !important; }
  .hb-instinct__tile { min-height: 240px; padding: 26px; border-radius: 24px; }
  .hb-instinct__tile--studio { min-height: 340px; }
  .hb-instinct__tile--studio h3 { font-size: 34px; }
  .hb-instinct__tile--photo { min-height: 420px; }
  .hb-instinct__tile h3 { font-size: 28px; }
  .hb-instinct__reader { width: 190px; right: 10%; }
  .hb-instinct__faq summary { grid-template-columns: minmax(0, 1fr) 42px; gap: 14px; }
  .hb-instinct__faq-num { display: none; }
  .hb-instinct__faq summary h3 { font-size: 21px; }
  .hb-instinct__faq-toggle { width: 42px; height: 42px; }
  .hb-instinct__faq details > p { padding: 0 0 26px; font-size: 15px; }
}

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

.hb-instinct--services { --in-ivory: var(--hb-color-paper); }
.hb-instinct--services .hb-instinct__services { border-top: 0; }
.hb-instinct--services .hb-instinct__hero-canopy { object-position: 28% center; }
.hb-instinct--services .hb-instinct__statement { line-height: 1.3; }
.hb-instinct--services .hb-instinct__reader { bottom: 100%; translate: 0 18.3%; }
.hb-instinct--services .hb-instinct__reader img { display: block; }
.hb-instinct--services .hb-instinct__tools { gap: 18px 20px; margin: 0; }
.hb-instinct--services .hb-instinct__tool { flex-direction: column; align-items: flex-start; gap: 10px; }
.hb-instinct--services .hb-instinct__tool .hb-inline-icon { width: clamp(46px, 3.4vw, 52px); height: clamp(46px, 3.4vw, 52px); }
.hb-instinct--services .hb-instinct__tool small { font: 500 clamp(15px, 1vw, 16px)/1.2 var(--hb-font-body); overflow: visible; white-space: normal; opacity: 1; }

@media (max-width: 760px) {
  .hb-instinct--services .hb-instinct__hero {
    min-height: min(100svh, 450px);
    max-height: 450px;
    padding-block: 112px 30px;
  }
  .hb-instinct--services .hb-instinct__title { font-size: clamp(30px, 10.8vw, 64px); }
  .hb-instinct--services .hb-instinct__line:first-child { white-space: nowrap; }
  .hb-instinct--services .hb-instinct__hero-canopy { object-position: 79% center; }
  .hb-instinct--services .hb-instinct__hero-shade::after {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 82% 23% at 6% 54%, #09150ba6, transparent 90%);
    content: '';
  }
  .hb-instinct--services :is(.hb-instinct__approach, .hb-instinct__services, .hb-instinct__method, .hb-instinct__why, .hb-instinct__faq) {
    padding: 50px var(--hb-gutter-mobile) 0;
    text-align: left;
  }
  .hb-instinct--services .hb-instinct__statement { line-height: 1.2; }
}