.g8-main-nav a[aria-current="page"] { color: var(--g8-white); }
.g8-main-nav a[aria-current="page"]::after { width: 100%; }

.g8-story-hero {
  position: relative;
  overflow: hidden;
  padding: 58px 0 72px;
  background:
    radial-gradient(circle at 86% 16%, rgba(254, 205, 192, .78), transparent 28rem),
    linear-gradient(145deg, var(--g8-foam) 0%, var(--g8-white) 60%, var(--g8-surface-soft) 100%);
}

.g8-story-hero::before {
  position: absolute;
  top: -110px;
  right: -70px;
  width: 370px;
  height: 370px;
  border: 1px solid rgba(34, 49, 76, .1);
  border-radius: 50%;
  content: "";
}

.g8-story-hero__grid { display: grid; gap: 44px; align-items: center; }
.g8-story-hero__content { position: relative; z-index: 2; display: grid; gap: 22px; }
.g8-story-hero__content .g8-heading-xl { max-width: 13ch; }
.g8-story-hero__lead { max-width: 590px; color: var(--g8-navy); font-size: clamp(1.15rem, 2.2vw, 1.42rem); font-weight: 520; line-height: 1.46; }
.g8-story-hero__text { max-width: 590px; color: var(--g8-muted); font-size: 1.02rem; }
.g8-story-scroll { justify-self: center; display: grid; place-items: center; width: 48px; height: 48px; color: var(--g8-navy); background: var(--g8-rose-pale); border: 1px solid rgba(200,120,112,.24); border-radius: 50%; line-height: 1; transition: transform .18s ease, background .18s ease; }
.g8-story-scroll span { width: 11px; height: 11px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-3px) rotate(45deg); }
.g8-story-scroll:hover { background: var(--g8-rose-soft); transform: translateY(3px); }
.g8-story-hero__visual { position: relative; width: min(100%, 500px); margin-inline: auto; padding: 22px 20px 30px 38px; }
.g8-story-hero__photo { margin: 0; overflow: hidden; border-radius: var(--g8-radius); background: var(--g8-white); box-shadow: var(--g8-shadow); }
.g8-story-hero__photo img { width: 100%; aspect-ratio: .88; object-fit: cover; object-position: 50% 42%; }
.g8-story-hero__note { position: absolute; top: -4px; left: 0; padding: 13px 17px; color: var(--g8-navy); background: var(--g8-white); border: 1px solid var(--g8-border); border-radius: var(--g8-radius); box-shadow: var(--g8-shadow); font-weight: 600; }
.g8-story-hero__note span { color: var(--g8-coral-strong); }

.g8-story-trigger { background: var(--g8-white); }
.g8-story-trigger__grid { display: grid; gap: 28px; }
.g8-story-trigger__heading { display: grid; gap: 12px; }
.g8-story-trigger__body { display: grid; gap: 15px; color: var(--g8-muted); font-size: 1.05rem; }
.g8-story-quote { position: relative; margin: 8px 0 0; padding: 34px; color: var(--g8-white); background: var(--g8-navy); border-radius: var(--g8-radius); box-shadow: var(--g8-shadow); }
.g8-story-quote::before { position: absolute; top: 18px; left: 18px; color: var(--g8-rose-soft); content: "“"; font-family: Georgia, serif; font-size: 5rem; line-height: 1; opacity: .9; }
.g8-story-quote > p { position: relative; font-family: var(--g8-font-heading); font-size: clamp(1.35rem, 3vw, 2rem); line-height: 1.35; }
.g8-story-quote__guillemet { color: var(--g8-rose-soft); }
.g8-story-quote footer { display: grid; gap: 2px; margin-top: 24px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.18); }
.g8-story-quote footer strong { color: var(--g8-white); }
.g8-story-quote footer span { color: var(--g8-rose-soft); font-size: .88rem; }
.g8-story-trigger__mark { display: none; margin: 0; align-self: end; justify-self: end; }
.g8-story-trigger__mark img { width: 150px; }

.g8-story-build { background: var(--g8-foam-soft); }
.g8-story-build__layout { display: grid; gap: 38px; align-items: center; }
.g8-story-prototype { position: relative; margin: 0; overflow: hidden; border-radius: var(--g8-radius); background: var(--g8-white); box-shadow: var(--g8-shadow); }
.g8-story-prototype::after { position: absolute; top: 18px; left: 18px; padding: 7px 10px; color: var(--g8-navy); background: var(--g8-rose-pale); border-radius: var(--g8-radius); content: "PROTOTYPE · 2021"; font-size: .7rem; font-weight: 700; letter-spacing: .12em; }
.g8-story-prototype img { width: 100%; aspect-ratio: 1.08; object-fit: cover; object-position: center 48%; }
.g8-story-prototype figcaption { padding: 17px 20px 20px; color: var(--g8-muted); font-size: .88rem; }
.g8-story-steps { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.g8-story-steps li { display: grid; grid-template-columns: 48px 1fr; gap: 16px; padding: 21px; background: var(--g8-white); border: 1px solid var(--g8-border); border-radius: var(--g8-radius); }
.g8-story-steps li > span { display: grid; place-items: center; width: 42px; height: 42px; color: var(--g8-navy); background: var(--g8-rose-pale); border-radius: 50%; font-size: .76rem; font-weight: 700; }
.g8-story-steps h3 { margin-bottom: 6px; font-size: 1.16rem; }
.g8-story-steps p { color: var(--g8-muted); font-size: .94rem; }

.g8-story-france { background: var(--g8-white); }
.g8-story-france__panel { overflow: hidden; display: grid; color: rgba(255,255,255,.78); background: linear-gradient(145deg, var(--g8-navy-deep), var(--g8-navy)); border-radius: var(--g8-radius); box-shadow: var(--g8-shadow); }
.g8-story-france__content { display: grid; align-content: center; gap: 20px; padding: 42px 28px; }
.g8-story-france__content h2 { max-width: 12ch; color: var(--g8-white); font-size: clamp(2rem, 6vw, 3.3rem); }
.g8-story-france__content > p:not(.g8-kicker) { max-width: 580px; }
.g8-story-france__content ul { display: grid; gap: 11px; margin: 4px 0 0; padding: 0; list-style: none; }
.g8-story-france__content li { display: flex; gap: 10px; align-items: center; color: var(--g8-white); font-weight: 600; }
.g8-story-france__content li span { display: grid; place-items: center; width: 25px; height: 25px; color: var(--g8-navy); background: var(--g8-rose-soft); border-radius: 50%; font-size: .75rem; }
.g8-story-france__photo { margin: 0; min-height: 300px; }
.g8-story-france__photo img { width: 100%; height: 100%; object-fit: cover; }

.g8-story-result { background: var(--g8-white); }
.g8-story-result__grid { display: grid; gap: 42px; align-items: center; }
.g8-story-product { position: relative; padding: 22px 22px 48px; background: linear-gradient(155deg, var(--g8-foam), var(--g8-white)); border: 1px solid var(--g8-border); border-radius: var(--g8-radius); box-shadow: var(--g8-shadow); }
.g8-story-product__stage { position: relative; aspect-ratio: 1; }
.g8-story-product__stage img { display: none; width: 100%; height: 100%; object-fit: contain; }
.g8-story-product__stage img.is-active { display: block; animation: g8-story-fade .35s ease; }
.g8-story-product__arrow { position: absolute; top: 45%; z-index: 2; display: grid; place-items: center; width: 42px; height: 42px; padding: 0; color: var(--g8-navy); background: rgba(255,255,255,.92); border: 1px solid var(--g8-border); border-radius: 50%; cursor: pointer; font-size: 1.8rem; line-height: 1; }
.g8-story-product__arrow--prev { left: 14px; }
.g8-story-product__arrow--next { right: 14px; }
.g8-story-product__dots { position: absolute; right: 0; bottom: 19px; left: 0; display: flex; justify-content: center; gap: 8px; }
.g8-story-product__dots button { width: 8px; height: 8px; padding: 0; background: rgba(34,49,76,.2); border: 0; border-radius: 50%; cursor: pointer; }
.g8-story-product__dots button.is-active { background: var(--g8-navy); }
.g8-story-result__content { display: grid; gap: 28px; }
.g8-story-result__number { display: grid; grid-template-columns: auto 1fr; gap: 15px; align-items: center; padding-bottom: 22px; border-bottom: 1px solid var(--g8-border); }
.g8-story-result__number strong { color: var(--g8-navy); font-family: var(--g8-font-heading); font-size: 3.25rem; line-height: .9; }
.g8-story-result__number span { max-width: 12ch; color: var(--g8-muted); font-weight: 600; line-height: 1.25; }
.g8-story-result__benefits { display: grid; gap: 20px; margin: 0; padding: 0; list-style: none; }
.g8-story-result__benefits li { display: grid; grid-template-columns: 52px 1fr; gap: 15px; align-items: start; }
.g8-story-result__benefits li > span { display: grid; place-items: center; width: 48px; height: 48px; background: var(--g8-rose-pale); border-radius: 50%; font-size: 1.3rem; }
.g8-story-result__benefits strong { color: var(--g8-navy); font-size: 1.05rem; }
.g8-story-result__benefits p { margin-top: 3px; color: var(--g8-muted); font-size: .93rem; }
.g8-story-result__cta { display: grid; gap: 25px; align-items: center; margin-top: 72px; padding: 34px 28px; background: var(--g8-foam-soft); border: 1px solid var(--g8-border); border-radius: var(--g8-radius); }
.g8-story-result__cta > div:first-child { display: grid; gap: 8px; }
.g8-story-result__cta h2 { max-width: 17ch; font-size: clamp(1.9rem, 5vw, 3rem); }
.g8-story-result__cta-actions { display: flex; flex-wrap: wrap; gap: 10px; }

@keyframes g8-story-fade { from { opacity: .25; transform: scale(.985); } to { opacity: 1; transform: none; } }

@media (min-width: 700px) {
  .g8-story-trigger__grid { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 34px 58px; }
  .g8-story-trigger__body { padding-top: 31px; }
  .g8-story-quote { grid-column: 1 / -1; padding: 44px; }
  .g8-story-build__layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 48px; }
  .g8-story-france__panel { grid-template-columns: minmax(0, 1fr) minmax(0, .95fr); }
  .g8-story-france__content { padding: 58px 48px; }
  .g8-story-result__grid { grid-template-columns: minmax(0, 1.08fr) minmax(300px, .92fr); gap: 58px; }
  .g8-story-result__cta { grid-template-columns: 1fr auto; padding: 42px; }
  .g8-story-result__cta-actions { justify-content: flex-end; }
}

@media (min-width: 940px) {
  .g8-story-hero { padding: 70px 0 88px; }
  .g8-story-hero__grid { grid-template-columns: minmax(0, 1.12fr) minmax(390px, .88fr); gap: 72px; }
  .g8-story-hero__content .g8-heading-xl { max-width: 14ch; font-size: clamp(3.2rem, 5vw, 4.35rem); }
  .g8-story-trigger__grid { grid-template-columns: .9fr 1.1fr 150px; align-items: start; }
  .g8-story-quote { grid-column: 1 / 3; }
  .g8-story-trigger__mark { display: block; grid-column: 3; grid-row: 1 / 3; }
  .g8-story-build__header { max-width: none; }
  .g8-story-build__header .g8-section-title { max-width: none; white-space: nowrap; font-size: clamp(2.15rem, 3.5vw, 2.8rem); }
  .g8-story-build__header > p:not(.g8-kicker) { white-space: nowrap; }
  .g8-story-build__layout { gap: 72px; }
  .g8-story-prototype img { aspect-ratio: 1; }
  .g8-story-france__photo { min-height: 590px; }
  .g8-story-result > .g8-container > .g8-section-header { max-width: none; }
  .g8-story-result > .g8-container > .g8-section-header .g8-section-title { max-width: none; white-space: nowrap; font-size: clamp(2.15rem, 3.35vw, 2.72rem); }
  .g8-story-result > .g8-container > .g8-section-header > p:not(.g8-kicker) { white-space: nowrap; }
  .g8-story-result__grid { gap: 82px; }
}

@media (max-width: 699px) {
  .g8-story-hero__visual { padding-left: 26px; }
  .g8-story-hero__note { left: 0; font-size: .85rem; }
  .g8-story-quote { padding: 30px 24px; }
  .g8-story-result__cta-actions .g8-button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .g8-story-product__stage img.is-active { animation: none; }
}