/* ============================================
   AWA — LAYOUTS CSS
   Full-width sections, Figma-accurate layout
   ============================================ */

html {
  scroll-behavior: smooth;
}

/* ============================================
   GLOBAL FONT ENFORCEMENT
   ============================================ */

h1,
h2,
.hero-tagline,
.section-title,
.about__heading,
.events__title,
.partners__heading,
.gallery__title,
.newsletter__title,
.case-study__title {
  font-family: 'TradeGothic LT Extended', 'Arial Narrow', sans-serif !important;
  font-weight: 700 !important;
}

h3,
h4,
h5,
h6,
.footer__brand-tagline,
.awa-nav__menu a,
.awa-sidebar__menu a {
  font-family: 'TradeGothic LT Extended', 'Arial Narrow', sans-serif !important;
  font-weight: 400 !important;
}

body,
p,
span,
li,
input,
textarea,
.about__body,
.events__body,
.partners__sub,
.gallery__desc,
.newsletter__subtitle,
.newsletter__disclaimer,
.case-study__body,
.footer__col-list a,
.footer__col-list li,
.footer__bottom,
.footer__bottom-links a {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-weight: 400;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: 'TradeGothic LT Extended', 'Arial Narrow', sans-serif !important;
}

/* ============================================
   SECTION BASE — Full Width
   ============================================ */
section {
  position: relative;
  width: 100%;
  overflow: hidden;
  background-color: var(--color-white);
}

.figma-stage {
  width: 100%;
  margin: 0 auto;
  position: relative;
}

.figma-content {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 80px;
  position: relative;
  z-index: 2;
}

/* ============================================
   0. NAVBAR
   ============================================ */
.awa-nav {
  width: 100%;
  height: 72px;
  background: #ffffff;
  position: sticky;
  top: 0;
  z-index: 1000;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  display: flex;
  align-items: center;
  padding: 0 64px;
}

.awa-nav__inner {
  width: 100%;
  max-width: none !important;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}

.awa-nav__logo {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  text-decoration: none;
}

.awa-nav__logo img {
  width: 178px;
  height: 37px;
  object-fit: contain;
  display: block;
}

.awa-nav__menu {
  display: flex;
  align-items: center;
  gap: 32px;
  list-style: none;
  margin: 0;
  padding: 0;
  width: 473px;
  justify-content: center;
  flex-shrink: 0;
}

.awa-nav__menu a {
  font-family: 'TradeGothic LT Extended', sans-serif !important;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: #000000;
  text-decoration: none;
  white-space: nowrap;
  transition: opacity 0.2s ease;
}

.awa-nav__menu a:hover,
.awa-nav__menu a:focus-visible {
  opacity: 0.6;
}

.awa-nav__actions {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
}

.awa-nav__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 20px;
  background: #000000;
  border: 1px solid #000000;
  color: #ffffff;
  font-family: 'Inter', sans-serif !important;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.2s ease, color 0.2s ease;
}

.awa-nav__cta:hover {
  background: transparent;
  color: #000000;
}

.awa-nav__burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 36px;
  height: 36px;
  padding: 6px;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 1001;
}

.awa-nav__burger-line {
  display: block;
  width: 22px;
  height: 2px;
  background: #000000;
  transition: transform 0.3s ease, opacity 0.3s ease;
  border-radius: 2px;
}

/* ===== SIDEBAR OVERLAY ===== */
.awa-sidebar-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1998;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  backdrop-filter: blur(2px);
}

.awa-sidebar-overlay.is-visible {
  opacity: 1;
  pointer-events: auto;
}

/* ===== SIDEBAR PANEL ===== */
.awa-sidebar {
  position: fixed;
  top: 0;
  right: 0;
  width: 300px;
  height: 100%;
  background: #ffffff;
  z-index: 1999;
  display: flex;
  flex-direction: column;
  padding: 32px 32px 48px;
  gap: 40px;
  transform: translateX(100%);
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  overflow-y: auto;
  box-shadow: -4px 0 24px rgba(0, 0, 0, 0.12);
}

.awa-sidebar.is-open {
  transform: translateX(0);
}

.awa-sidebar__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.awa-sidebar__close {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  color: #000000;
  line-height: 1;
  transition: opacity 0.2s;
}

.awa-sidebar__close:hover {
  opacity: 0.6;
}

.awa-sidebar__logo {
  display: block;
  text-decoration: none;
}

.awa-sidebar__logo img {
  width: 140px;
  height: auto;
  object-fit: contain;
}

.awa-sidebar__menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  flex: 1;
}

.awa-sidebar__menu li {
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.awa-sidebar__menu a {
  font-family: 'TradeGothic LT Extended', sans-serif !important;
  font-weight: 400;
  font-size: 20px;
  line-height: 1.4;
  color: #000000;
  text-decoration: none;
  display: block;
  padding: 14px 0;
  transition: opacity 0.2s;
}

.awa-sidebar__menu a:hover {
  opacity: 0.6;
}

.awa-sidebar__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px 24px;
  background: #000000;
  color: #ffffff;
  font-family: 'Inter', sans-serif !important;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease;
}

.awa-sidebar__cta:hover {
  background: #333;
}

/* ============================================
   1. HERO SECTION
   ============================================ */
.hero-section {
  width: 100% !important;
  height: 548px !important;
  min-height: 548px !important;
  position: relative !important;
  background: #ffffff !important;
  overflow: hidden !important;
  display: flex !important;
  justify-content: center !important;
}

.hero-stage {
  position: relative !important;
  width: 100% !important;
  height: 548px !important;
  max-width: none !important;
}

.hero-img-mascot {
  position: absolute !important;
  width: 900px !important;
  height: 527px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  top: -87px !important;
  object-fit: contain !important;
  z-index: 1 !important;
}

.hero-img-bg-wrap {
  position: absolute !important;
  width: 100% !important;
  height: 355px !important;
  left: 0 !important;
  top: 193px !important;
  z-index: 2 !important;
  background: transparent !important;
  transform: none !important;
}

.hero-img-bg {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center bottom !important;
  display: block !important;
  opacity: 0.8 !important;
}

.hero-img-overlay {
  display: none;
}

.hero-tagline-wrap {
  position: absolute !important;
  left: clamp(20px, 5vw, 39px) !important;
  bottom: clamp(30px, 5vh, 60px) !important;
  top: auto !important;
  width: calc(100% - 80px) !important;
  max-width: 1016px !important;
  height: auto !important;
  display: flex !important;
  flex-direction: column !important; /* Changed from row to column to stack subtitle */
  align-items: flex-start !important;
  z-index: 11 !important;
}

.hero-subtitle {
  font-family: 'Inter', sans-serif !important;
  font-weight: 400 !important;
  font-size: clamp(16px, 2.5vw, 24px) !important;
  line-height: 140% !important;
  color: rgba(255, 255, 255, 0.8) !important;
  margin: 8px 0 0 0 !important;
  max-width: 800px;
}

.hero-tagline {
  font-family: 'TradeGothic LT Extended', sans-serif !important;
  font-style: normal !important;
  font-weight: 700 !important;
  font-size: clamp(28px, 3.5vw, 46px);
  line-height: 103% !important;
  letter-spacing: -0.05em !important;
  color: #ffffff !important;
  margin: 0 !important;
  white-space: normal !important;
  animation: textNeonElectricity 6s infinite ease-in-out;
  display: inline-block; /* Required for transform scale to work properly on text */
}

@keyframes textNeonElectricity {
  0%, 15%, 25%, 65%, 75%, 100% {
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.4);
    opacity: 0.95;
  }
  20% {
    text-shadow: 0 0 10px #ffffff, 0 0 20px rgba(255, 255, 255, 0.8), 0 0 30px rgba(255, 255, 255, 0.6);
    opacity: 1;
  }
  70% {
    text-shadow: 0 0 12px #ffffff, 0 0 25px rgba(255, 255, 255, 0.9);
    opacity: 1;
  }
}

/* ============================================
   2. ABOUT INTRO
   ============================================ */
.about-intro-figma {
  width: 100%;
  height: auto;
  min-height: 474px;
  position: relative;
  background: #ffffff;
  overflow: visible;
  display: flex;
  justify-content: center;
}

.about-stage-1440 {
  width: 100%;
  max-width: 1440px;
  height: 100%;
  position: relative;
}

.about__content-frame {
  width: 100%;
  max-width: 1075px;
  min-height: 373px;
  margin: 0 auto;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 24px;
  padding: 50px 20px;
}

/* Modifier: Reduce bottom padding for sections without body/button */
.home-quote-section .about__content-frame {
  padding-bottom: 0;
  min-height: unset;
}



.about__logomark {
  width: 178.42px;
  height: auto;
  object-fit: contain;
}

.about__heading {
  max-width: 900px;
  width: 100%;
  text-align: center;
  color: #242422;
  font-family: 'TradeGothic LT Extended', sans-serif !important;
  font-size: var(--fluid-h2-section);
  font-weight: 700;
  line-height: 120%;
  margin: 0;
}

.about__body {
  max-width: 900px;
  width: 100%;
  text-align: center;
  color: #A1A1A1;
  font-family: 'Inter', sans-serif !important;
  font-size: var(--fluid-body-lead); /* Unified body size */
  font-weight: 400;
  line-height: 1.5;
  margin: 0;
}

.about__btn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 185px;
  height: 51px;
  padding: 12px 24px;
  border: 1px solid #000000;
  color: #000000;
  font-family: 'Inter', sans-serif !important;
  font-size: 16px;
  font-weight: 400;
  line-height: 150%;
  text-decoration: none;
  transition: all 0.25s ease;
}

.about__btn:hover {
  background: #000000;
  color: #ffffff;
}

/* ============================================
   3. EVENTS NEXT — Building What's Next
   Figma: Event / 3 / — 1440×614px, two-column split
   ============================================ */

/* ---- Section wrapper ---- */
.events-next-figma {
  width: 100%;
  background: #ffffff;
  overflow: hidden;
  position: relative;
}

/* ---- 1440-wide inner stage ---- */
.events-stage-1440 {
  width: 100%;
  max-width: 100%;
  min-height: 614px;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  position: relative;
  overflow: hidden;
}

/* ---- LEFT FRAME — white content panel (50%) ---- */
.events__left-frame {
  position: relative;
  flex: 0 0 50%;
  width: 50%;
  min-height: 614px;
  background: #ffffff;
  overflow: hidden;
  z-index: 10;
  display: flex;
  align-items: center;
}

/* subtle texture overlay */
.events__frame-bg-texture {
  position: absolute;
  inset: 0;
  background: url('../assets/images/background.png') repeat;
  background-size: auto;
  background-position: center bottom;
  opacity: 0.18;
  z-index: 0;
  pointer-events: none;
}

/* ---- Rotated logo watermark — scaled to fill section height while perfectly retaining 0-spacing right border ---- */
.events__logo-bg {
  position: absolute;
  width: 900px;
  height: 599px;
  /* Scaled precisely 1.453x from user's original right: -214.04px offset to ensure mathematical perfection against the right border */
  right: -311px;
  top: 50%;
  transform: translateY(-50%) rotate(-90.13deg);
  transform-origin: center center;
  opacity: 0.12;
  pointer-events: none;
  z-index: 5;
  object-fit: contain;
}

/* ---- Content block — Figma: left:78 top:111 w:377 h:362 ---- */
.events__content-block {
  position: relative;
  z-index: 20;
  /* Match Figma insets proportionally; left-padding mimics 78px on 720px half */
  padding: 0 40px 0 clamp(24px, 5.4%, 78px);
  max-width: 520px;
  width: 100%;
}

/* ---- RIGHT FRAME — full-bleed photo (50%) ---- */
.events__right-frame {
  position: relative;
  flex: 0 0 50%;
  width: 50%;
  min-height: 614px;
  overflow: hidden;
  z-index: 10;
}

.events__img-main {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  /* Figma: image is shifted up by 234px in a 1079px frame inside 614px clip */
  object-position: center 22%;
}

/* ---- Typography ---- */
.events__title {
  color: #242422;
  font-family: 'TradeGothic LT Extended', 'Arial Narrow', sans-serif !important;
  font-size: clamp(32px, 3.33vw, 48px);
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 24px 0;
  text-transform: none;
}

.events__body {
  color: rgba(0, 0, 0, 0.70);
  font-family: 'Inter', sans-serif !important;
  font-size: var(--fluid-body-lead); /* Unified body size */
  font-weight: 400;
  line-height: 1.5;
  margin: 0 0 40px 0;
}

/* ---- Button ---- */
.events__actions {
  display: flex;
  align-items: center;
}

.events__btn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 305px;
  max-width: 100%;
  height: 51px;
  padding: 12px 24px;
  border: 1px solid #000000;
  color: #000000;
  font-family: 'Roboto', 'Inter', sans-serif !important;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  text-decoration: none;
  background: transparent;
  transition: background 0.25s ease, color 0.25s ease;
}

.events__btn:hover,
.events__btn:focus-visible {
  background: #000000;
  color: #ffffff;
}

/* ============================================
   3. EVENTS NEXT — RESPONSIVE BREAKPOINTS
   ============================================ */

/* Tablet: fluid columns between 768–1024px */
@media (max-width: 1024px) {
  .events-stage-1440 {
    min-height: 480px;
  }
  .events__left-frame {
    flex: 0 0 55%;
    width: 55%;
    min-height: 480px;
  }
  .events__right-frame {
    flex: 0 0 45%;
    width: 45%;
    min-height: 480px;
  }
  .events__title {
    font-size: clamp(28px, 3.5vw, 40px);
  }
}

/* Mobile: stack vertically — image on top, content below */
@media (max-width: 767px) {
  .events-next-figma {
    overflow: visible;
  }

  .events-stage-1440 {
    flex-direction: column;
    min-height: auto;
  }

  /* Image goes to top on mobile */
  .events__right-frame {
    order: -1;          /* image first */
    flex: none;
    width: 100%;
    height: 280px;
    min-height: 280px;
  }

  .events__img-main {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 30%;
  }

  /* Content below the image */
  .events__left-frame {
    flex: none;
    width: 100%;
    min-height: auto;
    align-items: flex-start;
    padding: 48px 0 56px;
  }

  /* Keep logo watermark but scale it down */
  .events__logo-bg {
    width: 300px;
    height: 200px;
    right: -80px;
    top: 40%;
    opacity: 0.07;
  }

  .events__content-block {
    padding: 0 24px;
    max-width: 100%;
  }

  .events__title {
    font-size: clamp(28px, 8vw, 40px);
    margin-bottom: 16px;
  }

  .events__body {
    font-size: 16px;
    margin-bottom: 32px;
  }

  .events__btn {
    width: 100%;
    max-width: 305px;
  }
}

/* Very small screens */
@media (max-width: 375px) {
  .events__left-frame {
    padding: 40px 0 48px;
  }

  .events__content-block {
    padding: 0 20px;
  }

  .events__title {
    font-size: 28px;
  }

  .events__body {
    font-size: 15px;
  }

  .events__right-frame {
    height: 240px;
    min-height: 240px;
  }
}

/* ============================================
   4. PARTNERS SECTION
   Figma: 1440×387px — deco | text | 3×2 bordered grid
   ============================================ */
.partners-figma {
  width: 100%;
  background: #ffffff;
  overflow: hidden;
  position: relative;
  display: flex;
  justify-content: center;
}


.partners-stage {
  width: 100%;
  max-width: 1440px;
  min-height: 387px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  position: relative;
  gap: 30px;
}

/* ---- COLUMN 1: decorative rotated strip ---- */
.partners__deco-col {
  position: absolute;
  left: 10px;
  top: 63px;
  width: 98.47px;
  height: 255.89px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
}

.partners__deco {
  width: 255.89px;
  height: 98.47px;
  /* Add scale(1.3) to enlarge the logo across all breakpoints */
  transform: rotate(-89.32deg) scale(1.3);
  flex-shrink: 0;
  object-fit: contain;
}

/* ---- COLUMN 2: text block ---- */
.partners__text-col {
  width: 370px;
  height: 166px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  /* Top 103px in 387px height */
  margin-top: -15px; 
}

.partners__heading {
  color: #1D1D1D;
  font-family: 'TradeGothic LT Extended', 'Arial Narrow', sans-serif !important;
  font-size: 48px;
  font-weight: 700;
  line-height: 90%;
  margin: 0 0 15px 0;
}

.partners__sub {
  color: #A1A1A1;
  font-family: 'Inter', sans-serif !important;
  font-size: var(--fluid-body-lead); /* Unified with What We Deliver paragraph */
  font-weight: 400;
  line-height: 1.5;
  margin: 0;
}

/* ---- COLUMN 3: 3×2 bordered logo grid ---- */
.partners__grid-wrap {
  width: 570px;
  height: 285px;
  flex-shrink: 0;
  position: relative;
  display: grid;
  grid-template-columns: 183px 200px 187px;
  grid-template-rows: 140px 145px;
}

/* Base cell without explicit borders padding */
.partners__cell {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none !important;
}

/* Explicit Horizontal rule */
.partners__hr {
  position: absolute;
  width: 100%;
  height: 2px;
  left: 0;
  top: 140px; /* perfectly between the logos */
  background: #1D1D1D;
  display: block;
  z-index: 2;
}

/* Explicit Vertical rules */
.partners__vr {
  position: absolute;
  width: 2px;
  height: 100%;
  top: 0;
  background: #1D1D1D;
  display: block;
  z-index: 2;
}
.partners__vr--1 {
  left: 183px;
}
.partners__vr--2 {
  left: 383px;
}

/* ---- Logo image ---- */
.partners__logo {
  width: 111.56px;
  height: 65.32px;
  object-fit: contain;
  filter: grayscale(1) opacity(0.55);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.partners__logo:hover {
  filter: grayscale(0) opacity(1);
  transform: scale(1.15) translateY(-4px);
}

/* ============================================
   4. PARTNERS — RESPONSIVE BREAKPOINTS
   ============================================ */

/* Tablet: scale flexibly, keep vertical logo left */
@media (max-width: 1024px) {
  .partners-stage {
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 60px 40px;
    height: auto;
    min-height: auto;
    gap: 40px;
  }
  .partners__deco-col {
    left: 10px;
    top: 60px;
    transform: scale(0.8);
    transform-origin: top left;
  }
  .partners__text-col {
    margin-left: 80px; /* Avoid left logo */
    margin-top: 0;
    width: 100%;
    height: auto;
    max-width: 500px;
  }
  .partners__grid-wrap {
    margin-left: 80px; /* Align neatly under text */
    width: calc(100% - 80px);
    max-width: 570px;
    height: auto;
    aspect-ratio: 570 / 285;
    /* Use percentages so borders stay aligned if shrinking */
    grid-template-columns: 32.1% 35% 32.9%;
    grid-template-rows: 49.1% 50.9%;
  }
  .partners__hr {
    top: 49.1%;
  }
  .partners__vr--1 {
    left: 32.1%;
  }
  .partners__vr--2 {
    left: 67.1%; /* 32.1 + 35 */
  }
}

/* Mobile: stack fully */
@media (max-width: 767px) {
  .partners-figma {
    overflow: hidden;
  }
  .partners-stage {
    padding: 30px 20px; /* reduced top/bottom padding */
    gap: 24px; /* slightly smaller gap to match tighter padding */
    align-items: center;
  }
  /* Left logo hidden on mobile per user request */
  .partners__deco-col {
    display: none !important;
  }
  .partners__text-col {
    margin-left: 0;
    width: 100%;
    align-items: center;
    text-align: center;
  }
  .partners__heading {
    font-size: 32px; /* reduced slightly to ensure it fits on one line */
    line-height: 1.1;
    text-align: center;
    white-space: nowrap; /* Force one line */
  }
  .partners__heading br {
    display: none; /* Hide the hard line break */
  }
  .partners__sub {
    font-size: 18px;
    text-align: center;
  }
  .partners__grid-wrap {
    margin: 0 auto;
    width: 100%;
    max-width: 400px;
    aspect-ratio: auto;
    min-height: 200px;
    /* Clean even grid for mobile */
    grid-template-columns: 33.33% 33.33% 33.33%;
    grid-template-rows: 50% 50%;
  }
  .partners__hr {
    top: 50%;
  }
  .partners__vr--1 {
    left: 33.33%;
  }
  .partners__vr--2 {
    left: 66.66%;
  }
  .partners__logo {
    width: 80%;
    height: auto;
    max-height: 40px;
  }
}

/* Very small screens */
@media (max-width: 375px) {
  .partners-stage {
    padding: 40px 15px;
  }
  .partners__text-col {
    margin-left: 0;
    width: 100%;
  }
  .partners__grid-wrap {
    margin: 0 auto;
    width: 100%;
  }
}


/* ============================================
   5. CASE STUDY
   ============================================ */
.case-study-figma {
  width: 100%;
  background: #ffffff;
  overflow: hidden;
  position: relative;
  display: flex;
  justify-content: center;
}

.case-study-stage-1440 {
  width: 100%;
  max-width: 1440px;
  min-height: 650px;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  position: relative;
}

/* ---- Left Frame (Images) ---- */
.case-study__left {
  flex: 0 0 50%;
  width: 50%;
  position: relative;
  overflow: hidden;
  min-height: 650px;
  background: #000;
}

.case-study__left-img {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  object-fit: cover;
  opacity: 0.8;
  z-index: 1;
}

.case-study__top-overlay {
  position: absolute;
  width: 100%;
  height: auto;
  left: 0;
  top: -1px;
  z-index: 2;
  object-fit: cover;
  animation: electricNeonHeartbeat 1.8s infinite ease-in-out;
  transform-origin: center center;
}

@keyframes electricNeonHeartbeat {
  0%, 100% {
    transform: scale(1);
    filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.3)) brightness(1);
    opacity: 0.9;
  }
  15% {
    transform: scale(1.03);
    filter: drop-shadow(0 0 10px #ffffff) drop-shadow(0 0 20px #ffffff) brightness(1.3);
    opacity: 1;
  }
  17% {
    /* Electric flicker */
    transform: scale(1.03);
    filter: drop-shadow(0 0 2px #ffffff) brightness(1.8);
    opacity: 0.5;
  }
  19% {
    transform: scale(1.03);
    filter: drop-shadow(0 0 10px #ffffff) drop-shadow(0 0 20px #ffffff) brightness(1.3);
    opacity: 1;
  }
  30% {
    transform: scale(1);
    filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.3)) brightness(1);
    opacity: 0.9;
  }
  45% {
    transform: scale(1.06);
    filter: drop-shadow(0 0 15px #ffffff) drop-shadow(0 0 30px #ffffff) brightness(1.5);
    opacity: 1;
  }
  47% {
    /* Electric flicker */
    transform: scale(1.06);
    filter: drop-shadow(0 0 5px #ffffff) brightness(2.2);
    opacity: 0.6;
  }
  49% {
    transform: scale(1.06);
    filter: drop-shadow(0 0 15px #ffffff) drop-shadow(0 0 30px #ffffff) brightness(1.5);
    opacity: 1;
  }
  65% {
    transform: scale(1);
    filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.3)) brightness(1);
    opacity: 0.9;
  }
}

/* ---- Right Frame (Content) ---- */
.case-study__right {
  flex: 0 0 50%;
  width: 50%;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 40px 60px 40px 90px;
}

.case-study__bg-texture {
  position: absolute;
  inset: 0;
  background: url('../assets/images/background.png') repeat;
  background-size: auto;
  background-position: center bottom;
  opacity: 0.30;
  z-index: 0;
  pointer-events: none;
}

.case-study__content {
  position: relative;
  max-width: 534px;
  width: 100%;
  display: flex;
  flex-direction: column;
  z-index: 10;
}

.case-study__sticker {
  width: 95px;
  height: 98px;
  object-fit: contain;
  margin-bottom: -1px; 
}

.case-study__title {
  color: #242422;
  font-family: 'TradeGothic LT Extended', sans-serif !important;
  font-size: 48px;
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 16px 0;
}

.case-study__body {
  color: rgba(0, 0, 0, 0.70);
  font-family: 'Inter', sans-serif !important;
  font-size: var(--fluid-body-lead); /* Unified with What We Deliver paragraph */
  font-weight: 400;
  line-height: 1.6;
  margin: 0;
}

.case-study__cta {
  margin-top: 40px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 16px 48px;
  border: 1px solid #000000;
  color: #242422;
  font-family: 'Inter', sans-serif !important;
  font-size: clamp(16px, 1.2vw, 20px);
  text-decoration: none;
  width: fit-content;
  transition: all 0.3s ease;
}

.case-study__cta:hover {
  background: #000;
  color: #fff;
}

/* ============================================
   5. CASE STUDY - RESPONSIVE
   ============================================ */
@media (max-width: 1024px) {
  .case-study__right {
    padding: 40px;
  }
  .case-study__title {
    font-size: 36px;
  }
  .case-study__body {
    font-size: 18px;
  }
}

@media (max-width: 767px) {
  .case-study-stage-1440 {
    flex-direction: column;
    min-height: auto;
  }
  .case-study__left {
    width: 100%;
    min-height: 350px;
    height: 350px;
    flex: none;
  }
  .case-study__right {
    width: 100%;
    padding: 30px 20px 40px 20px; /* Restored bottom padding so text doesn't touch the border */
    flex: none;
  }
  .case-study__title {
    font-size: 32px;
  }
  .case-study__body {
    font-size: 16px;
  }
}

/* ============================================
   6. GALLERY PREVIEW
   ============================================ */
.gallery-preview-figma {
  width: 100%;
  min-height: 800px;
  background: #ffffff;
  padding: 100px 0;
  display: flex;
  justify-content: center;
  overflow: hidden; /* Ensure carousel doesn't trigger scrollbars */
}

.gallery-stage-1440 {
  width: 100%;
  max-width: none !important; /* Force full-width desktop */
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 !important; /* Remove horizontal padding for carousel */
}

@media (max-width: 767px) {
  .gallery-stage-1440 {
    padding: 0 !important;
  }
  .gallery-preview-figma {
    padding: 60px 0 !important;
  }
}

/* ---- Carousel ---- */
.gallery__carousel-wrapper {
  width: 100%;
  overflow: hidden;
  margin: 40px auto 60px auto; /* Added margin-top for all, especially mobile gap */
  cursor: pointer;
  position: relative; /* Added for nav buttons */
}

@media (max-width: 767px) {
  .gallery__carousel-wrapper {
    margin-top: 60px; /* Larger gap on mobile between subtitle and carousel */
  }
  .gallery__btn {
    width: auto !important;
    min-width: 200px;
    margin-left: auto !important;
    margin-right: auto !important;
    display: flex !important;
    justify-content: center;
    align-items: center;
  }
  .case-study__cta {
    width: auto !important;
    min-width: 200px;
    margin-left: 0 !important;
    margin-right: auto !important;
    display: flex !important;
    justify-content: center;
    align-items: center;
  }
}

.carousel-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 56px;
  height: 56px;
  background: rgba(255,255,255,0.1);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 50%;
  color: #000;
  font-size: 20px;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  z-index: 50;
  transition: all 0.3s ease;
  padding: 0 !important; /* Ensure no padding messes with centering */
}

.carousel-nav svg {
  width: 24px;
  height: 24px;
  display: block;
}

.carousel-nav:hover {
  background: rgba(0,0,0,1);
  color: #fff;
  border-color: #000;
}

.carousel-nav.prev { left: 40px; }
.carousel-nav.next { right: 40px; }

@media (max-width: 768px) {
  .carousel-nav {
    width: 40px;
    height: 40px;
    font-size: 16px;
  }
  .carousel-nav.prev { left: 10px; }
  .carousel-nav.next { right: 10px; }
}

.gallery__carousel-track {
  display: flex;
  gap: 20px;
  width: max-content;
  user-select: none;
  -webkit-user-drag: none;
  touch-action: pan-y; /* Allow vertical scroll, JS handles horizontal */
}

.gallery__carousel-track.is-active-drag {
  cursor: grabbing !important;
}

.gallery__carousel-slide {
  pointer-events: auto; /* Ensure slides still receive events */
  user-select: none;
  -webkit-user-drag: none;
}

.gallery__carousel-track.is-paused {
  animation-play-state: paused !important;
}

@keyframes scrollGallery {
  /* Kept as fallback, but no longer bound directly to track */
  0% { transform: translateX(0); }
  100% { transform: translateX(calc(-50% - 10px)); }
}

.gallery__carousel-track.is-scrollable {
  /* Handled by JS requestAnimationFrame for better dragging sync */
}

.gallery__carousel-slide {
  flex: 0 0 380px; 
  height: 480px;
  border-radius: 4px;
  overflow: hidden;
  background: #f4f4f4;
  position: relative; /* specific required override for g-item */
}

/* Force visibility regardless of JS Intersection Observer, which struggles with horizontal carousels */
.gallery__carousel-slide.g-item {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* Force the g-img to fill the full card height in carousel */
.gallery__carousel-slide .g-img {
  padding-bottom: 0 !important;
  height: 100%;
  position: absolute;
  inset: 0;
}

/* Thumbnail image inside carousel slide */
.gallery__carousel-slide .g-img .g-thumb {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Video badge in carousel — centered play button */
.gallery__carousel-slide .g-video-badge {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0, 0, 0, 0.55);
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.4);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  padding: 0;
  z-index: 10;
}

.gallery__header {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 60px;
  gap: 0px; /* Zero gap between elements by default */
  padding: 0 80px; /* Text padding since stage is now full-width */
}

@media (max-width: 768px) {
  .gallery__header {
    padding: 0 20px;
  }
}

.gallery__logomark {
  width: 178px;
  height: auto;
  object-fit: contain;
}

.gallery__title {
  font-size: var(--fluid-h2-section);
  color: #242422;
  text-align: center;
  margin: 0;
}

.gallery__desc {
  font-size: var(--fluid-body-lead); /* Unified body size */
  color: #A1A1A1;
  text-align: center;
  max-width: 900px;
  line-height: 1.5;
  margin-top: 10px;
}

.gallery__grid {
  width: 100%;
  display: flex;
  gap: 32px;
  justify-content: center;
  margin-bottom: 60px;
}

.gallery__img-lg {
  flex: 2;
  height: 700px;
  border-radius: 20px;
  object-fit: cover;
}

.gallery__img-md {
  flex: 1;
  height: 700px;
  border-radius: 20px;
  object-fit: cover;
}

.gallery__btn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 16px 48px;
  border: 1px solid #000000;
  color: #242422;
  font-family: 'Inter', sans-serif !important;
  font-size: clamp(16px, 1.2vw, 20px);
  text-decoration: none;
  transition: all 0.2s ease;
}

.gallery__btn:hover {
  background: #000000;
  color: #ffffff;
}

/* ============================================
   7. NEWSLETTER / CTA
   ============================================ */
.newsletter-figma {
  width: 100%;
  min-height: 400px;
  background: #ffffff;
  display: flex;
  justify-content: center;
  padding: 100px 0;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
}

.newsletter-stage-1440 {
  width: 100%;
  max-width: 1440px;
  padding: 0 80px;
  display: flex;
  justify-content: center;
}

.newsletter__container {
  width: 100%;
  max-width: 800px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}

.newsletter__content {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.newsletter__title {
  text-align: center;
  color: #000000;
  font-family: 'TradeGothic LT Extended', sans-serif !important;
  font-size: var(--fluid-h2-section);
  font-weight: 700;
  line-height: 1.1;
  margin: 0;
}

.newsletter__subtitle {
  text-align: center;
  color: #242422;
  font-family: 'Inter', sans-serif !important;
  font-size: var(--fluid-body-lead); /* Unified body size */
  font-weight: 400;
  line-height: 1.5;
  margin: 0;
}

.newsletter__form-wrap {
  width: 100%;
  max-width: 600px;
}

.newsletter__form {
  display: flex;
  gap: 12px;
  width: 100%;
}

.newsletter__input {
  flex: 1;
  padding: 14px 20px;
  border: 1px solid #000000;
  font-family: 'Inter', sans-serif !important;
  font-size: 16px;
  background: transparent;
}

.newsletter__btn {
  padding: 0 32px;
  background: #000000;
  border: 1px solid #000000;
  color: #ffffff;
  font-family: 'Inter', sans-serif !important;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.25s ease;
  height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.newsletter__btn:hover {
  background: transparent;
  color: #000000;
}

.newsletter__disclaimer {
  text-align: center;
  color: rgba(0, 0, 0, 0.5);
  font-size: 12px;
  margin-top: 12px;
}

/* ============================================
   8. FOOTER
   ============================================ */
/* ============================================
   FOOTER — Figma Spec
   1440px · 441px · white background
   Background logo watermark + content row + credits bar
   ============================================ */
.footer-figma {
  width: 100%;
  min-height: 441px;
  background: #ffffff;
  position: relative;
  overflow: hidden;
}

/* ── Background logo watermark ── */
.footer__logo-bg {
  position: absolute;
  width: min(1172px, 100%);
  height: auto;
  aspect-ratio: 1172 / 686;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 0;
}

.footer__logo-bg img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
  opacity: 0.05;
  filter: grayscale(1);
  display: block;
}

/* ── Container — 1280px wide, left: 80px from section ── */
.footer__container {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 30px 80px 0;
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* ── Content row: brand + links ── */
.footer__content {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 128px;
  padding-bottom: 40px;
  min-height: 248px;
}

/* ── Brand column (Newsletter col in Figma) ── */
.footer__brand {
  width: 500px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

.footer__sticker {
  width: 95px;
  height: 98px;
  object-fit: contain;
  flex-shrink: 0;
}

.footer__brand-tagline {
  width: 308px;
  color: #242422;
  font-family: 'TradeGothic LT Extended', sans-serif !important;
  font-weight: 400 !important;
  font-size: 20px;
  line-height: 103%;
  letter-spacing: -0.05em;
  margin: 0;
}

/* ── Links row: 3 columns ── */
.footer__links {
  flex: 1;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 40px;
}

/* ── Column ── */
.footer__col {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.footer__col-title {
  color: #000000;
  font-family: 'Inter', sans-serif !important;
  font-size: 16px;
  font-weight: 600;
  line-height: 150%;
  display: block;
}

/* ── List links ── */
.footer__col-list {
  display: flex;
  flex-direction: column;
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer__col-list li a,
.footer__col-list > li {
  color: #000000;
  font-family: 'Inter', sans-serif !important;
  font-size: 14px;
  font-weight: 400;
  line-height: 150%;
  text-decoration: none;
  padding: 8px 0;
  display: block;
  transition: opacity 0.2s;
}

.footer__col-list li a:hover {
  opacity: 0.6;
}

/* ── Social list (Follow col) ── */
.footer__social-list {
  display: flex;
  flex-direction: column;
}

.footer__social-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  color: #000000;
  font-family: 'Inter', sans-serif !important;
  font-size: 14px;
  font-weight: 400;
  line-height: 150%;
  text-decoration: none;
  transition: opacity 0.2s;
}

.footer__social-link:hover {
  opacity: 0.6;
}

.footer__social-icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  color: #000000;
}

/* ── Credits bar (divider + bottom row) ── */
.footer__credits {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-bottom: 24px;
}

.footer__divider {
  width: 100%;
  height: 1px;
  background: #000000;
}

.footer__bottom {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 64px;
  color: #000000;
  font-family: 'Inter', sans-serif !important;
  font-size: 14px;
  font-weight: 400;
  line-height: 150%;
}

.footer__copy {
  flex-shrink: 0;
}

.footer__bottom-links {
  display: flex;
  flex-direction: row;
  gap: 24px;
}

.footer__bottom-links a {
  color: #000000;
  font-family: 'Inter', sans-serif !important;
  font-size: 14px;
  font-weight: 400;
  line-height: 150%;
  text-decoration: underline;
  transition: opacity 0.2s;
}

.footer__bottom-links a:hover {
  opacity: 0.6;
}

/* ============================================
   GLOBAL FULL WIDTH ENFORCEMENT
   ============================================ */
.figma-stage,
.about-stage-1440,
.events-stage-1440,
.partners-stage-1440,
.case-study-stage-1440,
.gallery-stage-1440,
.newsletter-stage-1440,
.awa-nav__inner,
.footer__container,
.site-main>section {
  max-width: none !important;
  width: 100% !important;
}

/* ============================================
   BUTTONS (Global)
   ============================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'Inter', sans-serif !important;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.25s ease;
}

.btn--primary {
  padding: 12px 24px;
  background: #000000;
  border: 1px solid #000000;
  color: #ffffff;
}

.btn--primary:hover {
  background: transparent;
  color: #000000;
}

.btn--outline {
  padding: 12px 24px;
  background: transparent;
  border: 1px solid #000000;
  color: #000000;
}

.btn--outline:hover {
  background: #000000;
  color: #ffffff;
}

/* ============================================
   FORMS (Global)
   ============================================ */
input[type="text"],
input[type="email"],
textarea {
  font-family: 'Inter', sans-serif !important;
  font-weight: 400;
  font-size: 16px;
  border: 1px solid #000000;
  background: transparent;
  padding: 12px 16px;
  width: 100%;
  transition: outline 0.2s;
}

input:focus,
textarea:focus {
  outline: 2px solid #000000;
}

/* ============================================
   EVENTS & ABOUT PAGE SHARED HERO
   ============================================ */
.events-hero-figma,
.about-hero-figma {
  width: 100%;
  height: 366px;
  background: #ffffff;
  display: flex !important;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  opacity: 1 !important;
  visibility: visible !important;
}

.events-hero__bg,
.about-hero__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  z-index: 1;
}

.events-hero__container,
.about-hero__container {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 24px;
}

.events-hero__title,
.about-hero__title {
  font-family: 'TradeGothic LT Extended', sans-serif !important;
  font-weight: 700;
  font-size: var(--fluid-page-hero); /* Unified — smaller than home hero */
  line-height: 1.1;
  color: #ffffff;
  margin: 0;
  text-align: center;
  word-break: break-word;
}

.about-hero__subtitle {
  display: none; /* Subtitles removed from all page heroes */
}

.events-hero__bottom-left,
.about-hero__bottom-left {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
}

.events-hero__tagline-wrapper,
.about-hero__tagline-wrapper {
  display: flex;
  align-items: center;
  gap: 12px;
}

.events-hero__tagline-dot,
.about-hero__tagline-dot {
  width: 8px;
  height: 8px;
  background: #ffffff;
  border-radius: 50%;
}

.events-hero__tagline-text,
.about-hero__tagline-text {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 14px;
  color: #ffffff;
  text-transform: uppercase;
}

/* ============================================
   WHO WE ARE (About Page)
   ============================================ */
#who-we-are .about__content-frame {
  gap: 0;
}

#who-we-are .about__heading {
  margin-top: 0;
  margin-bottom: 24px;
}

#who-we-are .about__logomark {
  margin-bottom: 0;
}

.who-we-are {
  padding: 100px 0;
  background: #ffffff;
}

.who-we-are__header {
  text-align: center;
  margin-bottom: 64px;
}

.who-we-are__logo {
  height: 32px;
  width: auto;
  margin-bottom: 24px;
}

.who-we-are__title {
  font-family: 'TradeGothic LT Extended', sans-serif !important;
  font-weight: 700;
  font-size: 80px;
  line-height: 0.9;
  color: #000000;
  margin: 0;
}

.who-we-are__content {
  display: flex;
  flex-direction: column;
  gap: 32px;
  max-width: 800px;
  margin: 0 auto;
}

.who-we-are__content p {
  margin: 0;
}

/* ============================================
   WHAT WE DELIVER — SECTION CORRIGÉE
   Fond blanc · marges site · hover image bg
   ============================================ */

/* ─── SECTION WRAPPER ─── */
.wwd-redesign {
  padding: 100px 0;
  background: #ffffff;
  /* fond blanc */
  color: #0a0a0a;
  position: relative;
  z-index: 2;
}

/* ─── CONTAINER — marges cohérentes avec .partners-stage-1440 ─── */
.wwd-redesign .container--narrow,
.wwa-redesign .container--narrow {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 40px;
  /* desktop : 40px, same visual width as partners section */
}

/* ─── EN-TÊTE ─── */
.wwd-header-new {
  display: flex;
  align-items: baseline;
  gap: 24px;
  margin-bottom: 72px;
  border-bottom: 1px solid #0a0a0a;
  padding-bottom: 20px;
}

.wwd-label {
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 400;
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: #c8c4be;
}

.wwd-title-new {
  font-family: 'TradeGothic LT Extended', 'Arial Narrow', sans-serif !important;
  font-weight: 700 !important;
  font-size: clamp(32px, 5vw, 56px);
  letter-spacing: -0.01em;
  line-height: 1;
  color: #0a0a0a;
  margin: 0;
}

/* ─── EN-TÊTE WHO WE ARE ─── */
.wwa-redesign {
  padding: 140px 0;
  background: #ffffff;
}

.wwa-header {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 80px;
}

.wwa-label {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #666666;
}

.wwa-title-wrapper {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}

.wwa-title {
  font-family: 'TradeGothic LT Extended', sans-serif;
  font-size: clamp(3rem, 5vw, 4.5rem);
  text-transform: uppercase;
  line-height: 1;
  margin: 0;
  color: #0a0a0a;
}

.wwa-logo {
  height: 48px;
  width: auto;
  object-fit: contain;
}

.wwa-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 48px 80px; /* row, col */
  align-items: stretch;
}

.wwa-top-left {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
}

.wwa-top-right {
  display: block;
  position: relative;
  height: 0;
  min-height: 100%;
}

.wwa-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.wwa-bottom-left {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 24px;
  line-height: 1.5;
  color: #0a0a0a;
  font-weight: 400;
  letter-spacing: -0.01em;
}

.wwa-bottom-right {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: #666666;
}

/* ─── GRILLES ─── */
.wwd-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
}

.wwd-grid-row2 {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 0;
}

/* ─── CARD BASE ─── */
.wwd-card {
  border: 1px solid rgba(10, 10, 10, 0.12);
  border-right: none;
  padding: 40px 36px 48px;
  position: relative;
  overflow: hidden;
  cursor: default;
}

.wwd-grid .wwd-card:last-child {
  border-right: 1px solid rgba(10, 10, 10, 0.12);
}

.wwd-grid-row2 .wwd-card {
  border-top: none;
}

.wwd-grid-row2 .wwd-card:last-child {
  border-right: 1px solid rgba(10, 10, 10, 0.12);
}

/* ─── HOVER : image background.png + voile sombre ─── */
/* Couche 1 : image de texture */
.wwd-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('../assets/images/background.png');
  background-repeat: repeat;
  background-size: auto;
  background-position: center bottom;
  opacity: 0;
  transition: opacity 0.45s cubic-bezier(0.76, 0, 0.24, 1);
  z-index: 0;
}

/* Couche 2 : voile sombre */
.wwd-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(8, 8, 8, 0.72);
  opacity: 0;
  transition: opacity 0.45s cubic-bezier(0.76, 0, 0.24, 1);
  z-index: 0;
}

.wwd-card:hover::before,
.wwd-card.is-active-mobile::before {
  opacity: 1;
}

.wwd-card:hover::after,
.wwd-card.is-active-mobile::after {
  opacity: 1;
}

/* ─── CONTENU — toujours au-dessus des pseudo-éléments ─── */
.wwd-card-number,
.wwd-card-line,
.wwd-card-title,
.wwd-card-text,
.wwd-card-tag,
.wwd-card-body {
  position: relative;
  z-index: 1;
  transition: color 0.35s ease;
}

.wwd-card:hover .wwd-card-number,
.wwd-card.is-active-mobile .wwd-card-number {
  color: rgba(246, 244, 241, 0.5);
}

.wwd-card:hover .wwd-card-title,
.wwd-card.is-active-mobile .wwd-card-title {
  color: #f7f5f2;
}

.wwd-card:hover .wwd-card-text,
.wwd-card.is-active-mobile .wwd-card-text {
  color: rgba(246, 244, 241, 0.6);
}

.wwd-card:hover .wwd-card-tag,
.wwd-card.is-active-mobile .wwd-card-tag {
  color: rgba(246, 244, 241, 0.35);
}

.wwd-card:hover .wwd-card-line,
.wwd-card.is-active-mobile .wwd-card-line {
  background: rgba(246, 244, 241, 0.2);
}

/* ─── TYPOGRAPHIE ─── */
.wwd-card-number {
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 400;
  font-size: 13px;
  letter-spacing: 0.1em;
  color: #c8c4be;
  margin-bottom: 32px;
  display: block;
}

.wwd-card-line {
  width: 24px;
  height: 1px;
  background: rgba(10, 10, 10, 0.2);
  margin-bottom: 20px;
}

.wwd-card-title {
  font-family: 'TradeGothic LT Extended', 'Arial Narrow', sans-serif !important;
  font-weight: 700 !important;
  font-size: 22px;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: #0a0a0a;
  margin-bottom: 16px;
}

.wwd-card-text {
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 400;
  font-size: 13px;
  letter-spacing: 0.03em;
  line-height: 1.75;
  color: rgba(10, 10, 10, 0.5);
}

/* ─── CARD WIDE (05-06) ─── */
.wwd-card-wide {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 48px;
}

.wwd-card-body {
  flex: 1;
}

.wwd-card-tag {
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 400;
  font-size: 10px;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: #c8c4be;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  align-self: stretch;
  display: flex;
  align-items: center;
  padding-top: 4px;
}

/* ============================================
   TEAM SECTION (About Page)
   ============================================ */
.team-section {
  padding: 120px 0;
  background: #ffffff;
}

/* Container aligned with .wwd-redesign .container--narrow */
.team-section .container {
  max-width: 1440px;
  padding: 0 40px;
}

.team-layout {
  display: flex;
  gap: 80px;
  align-items: flex-start;
}

.team-sidebar {
  flex: 0 0 240px;
}

.team-branding {
  position: sticky;
  top: 100px;
}

.team-logo-top {
  height: 28px;
  width: auto;
  margin-bottom: 48px;
}

.team-title {
  font-family: 'TradeGothic LT Extended', sans-serif !important;
  font-weight: 700;
  font-size: clamp(60px, 8vw, 120px);
  line-height: 0.85;
  color: #000000;
  margin: 0 0 48px;
}

.team-deco-bottom {
  width: 64px;
  height: auto;
}

.team-grid {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 64px 40px;
}

.team-member {
  display: flex;
  gap: 20px;
}

.team-member__image-wrap {
  flex: 0 0 140px;
  height: 180px;
  background: #f8f8f8;
  overflow: hidden;
}

.team-member__photo-placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #e5e5e5 0%, #ffffff 100%);
}

.team-member__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.team-member__info {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding-top: 8px;
  min-width: 0;
}

.team-member__name {
  font-family: 'TradeGothic LT Extended', sans-serif !important;
  font-weight: 700;
  font-size: clamp(20px, 2.2vw, 32px);
  line-height: 1.1;
  color: #000000;
  margin: 0 0 8px;
  word-break: normal;
  overflow-wrap: break-word;
}

.team-member__role {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 13px;
  color: #000000;
  margin: 0 0 8px;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.team-member__email {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  color: #666666;
  text-decoration: none;
  word-break: break-all;
}

/* ============================================
   EVENTS LIST SECTION
   ============================================ */
.events-hero-figma {
  width: 100%;
  height: 366px;
  background: #ffffff;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}

.events-hero__bg {
  position: absolute;
  inset: 0;
  background: url('../assets/images/rs 1.png') no-repeat center center;
  background-size: cover;
  z-index: 1;
}

.events-hero__container {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  height: 100%;
  display: flex;
  align-items: flex-end;
  padding: 0 100px 64px;
}

.events-hero__bottom-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}

.events-hero__title {
  font-family: 'TradeGothic LT Extended', sans-serif !important;
  font-style: normal;
  font-weight: 700;
  font-size: var(--fluid-page-hero); /* Matches home hero size */
  line-height: 120%;
  color: #ffffff;
  margin-bottom: 24px;
}

.events-hero__tagline-wrapper {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 13px;
}

.events-hero__tagline-group {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 4px 12px;
  gap: 8px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 4px;
}

.events-hero__tagline-dot {
  width: 8px;
  height: 8px;
  background: #ffffff;
  border-radius: 50%;
  animation: breathe 2s infinite ease-in-out;
}

.events-hero__tagline-text {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

@keyframes breathe {
  0% {
    opacity: 0.4;
    transform: scale(0.8);
  }

  50% {
    opacity: 1;
    transform: scale(1);
  }

  100% {
    opacity: 0.4;
    transform: scale(0.8);
  }
}

.events-list-section {
  padding: 120px 0;
  background: #ffffff;
}

.events-container {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 20px;
}

.events-section-header {
  max-width: 700px;
  margin: 0 auto 100px;
  text-align: center;
}

.events-section-subtitle {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #888888;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  margin-bottom: 12px;
}

.events-section-title {
  font-family: 'TradeGothic LT Extended', sans-serif !important;
  font-size: 48px;
  font-weight: 700;
  color: #000000;
  margin-bottom: 20px;
  line-height: 1.1;
}

.events-section-desc {
  font-family: 'Inter', sans-serif;
  font-size: 18px;
  color: #666666;
  line-height: 1.6;
}

.events-grid-wrapper {
  position: relative;
  width: 100%;
}

.events-timeline-line {
  position: absolute;
  left: 75px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: #eaeaea;
  z-index: 1;
}

.events-grid {
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
  z-index: 2;
}

.event-card {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 60px 0;
  border-bottom: 1px solid #eaeaea;
  gap: 40px;
  transition: all 0.3s ease;
}

.event-card:last-child {
  border-bottom: none;
}

.event-card__date-box {
  flex: 0 0 80px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.event-card__day {
  font-family: 'TradeGothic LT Extended', sans-serif !important;
  font-weight: 700;
  font-size: 40px;
  line-height: 1;
  color: #000000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.event-card__info {
  flex: 1;
}

.event-card__title {
  font-family: 'TradeGothic LT Extended', sans-serif !important;
  font-weight: 700;
  font-size: 32px;
  color: #000000;
  margin: 0 0 8px 0;
}

.event-card--passed {
  position: relative;
  overflow: hidden;
  padding: 60px 40px;
  margin: 0 -40px;
  background-color: #080808;
  border-bottom: none;
}

.event-card--passed .event-card__bg,
.event-card__bg-grid {
  position: absolute;
  inset: 0;
  opacity: 0.5;
  z-index: 0;
  pointer-events: none;
}

.event-card--passed .event-card__bg {
  background-repeat: repeat;
  background-size: cover;
  background-position: center top;
}

.event-card__bg-grid {
  display: none; /* hidden by default */
  height: 100%;
}

.event-card__bg-grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  min-height: 0;
  min-width: 0;
  display: block;
}

/* Base mobile grid class */
.event-card__bg--mobile {
  display: none;
}
.event-card__bg--desktop {
  display: block;
  width: 100%;
  height: 100%;
}

@media (max-width: 900px) {
  .event-card--passed {
    min-height: 500px;
  }
  .event-card__bg--desktop {
    display: none;
  }
  .event-card__bg--mobile {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
  }
  .event-card__bg-grid img:nth-child(5) {
    grid-column: span 2;
  }
}

@media (max-width: 500px) {
  .event-card--passed {
    min-height: 650px;
    padding: 40px 20px;
  }
  .event-card__bg--desktop {
    display: none;
  }
  .event-card__bg--mobile {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(3, minmax(0, 1fr));
  }
  .event-card__bg-grid img:nth-child(5) {
    grid-column: span 2;
  }
}

.event-card--passed .event-card__title,
.event-card--passed .event-card__day {
  color: #f7f5f2 !important;
}

.event-card--passed .event-card__status {
  color: rgba(246, 244, 241, 0.6);
}

.event-card--passed .event-card__checkpoint-wrap,
.event-card--passed .event-card__date-box,
.event-card--passed .event-card__info,
.event-card--passed .event-card__action {
  position: relative;
  z-index: 1;
}

.event-card--passed .event-checkpoint--completed {
  border-color: #f7f5f2;
}

.event-card--passed .event-checkpoint--completed::after {
  background: #f7f5f2;
}

.event-card__status {
  font-weight: 700;
  font-size: 12px;
  color: #888888;
  letter-spacing: 0.1em;
}

.event-card--locked {
  background: transparent;
}

.event-card__title-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.event-card__lock-icon {
  color: #eaeaea;
  display: inline-flex;
}

.event-card__teaser {
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  color: #888888;
}

.event-card__checkpoint-wrap {
  flex: 0 0 70px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.event-checkpoint {
  width: 31px;
  height: 31px;
  border-radius: 50%;
  background: #ffffff;
  border: 1px solid #eaeaea;
  position: relative;
  z-index: 3;
  flex-shrink: 0;
}

.event-checkpoint--completed {
  background: #000000;
  border-color: #000000;
}

.event-checkpoint--completed::after {
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: 50%;
  background: #ffffff;
}

.event-checkpoint--pending {
  background: #ffffff;
  border-color: #eaeaea;
}

/* ============================================
   NEWSLETTER VARIANTS
   ============================================ */
.newsletter--white-bg {
  position: relative;
  overflow: hidden;
  background: #ffffff;
}

.newsletter--white-bg .newsletter__title {
  color: #000000;
}

.newsletter--white-bg .newsletter__subtitle {
  color: #555555;
}

.newsletter--white-bg .newsletter__disclaimer {
  color: #888888;
}

.newsletter--white-bg .newsletter__input {
  background: #f8f8f8;
  border: 1px solid #eaeaea;
  color: #000000;
}

.newsletter__bg {
  position: absolute;
  inset: 0;
  background: url('../assets/images/background.png') repeat;
  background-size: auto;
  background-position: bottom;
  opacity: 0.3;
  z-index: 1;
  pointer-events: none;
}

.newsletter-stage-1440 {
  position: relative;
  z-index: 2;
}

/* ============================================
   RESPONSIVE — Tablet 1200px
   ============================================ */
@media (max-width: 1200px) {
  .hero-section {
    height: auto;
    min-height: 600px;
  }

  .hero-tagline-wrap {
    width: 90%;
    left: 5%;
    bottom: 40px;
    top: auto;
    height: auto;
  }

  .hero-tagline {
    font-size: 38px;
  }

  .hero-img-bg-wrap {
    top: 100px;
    height: 500px;
  }

  .hero-img-mascot {
    width: 80%;
    height: auto;
    left: 10%;
    top: -40px;
  }

  .hero-social {
    top: 480px;
    left: 16px;
  }

  .about-intro-figma {
    height: auto;
    padding: 80px 0;
  }

  .events-next-figma {
    height: auto;
    min-height: 600px;
    padding: 0;
  }

  .events-stage-1440 {
    flex-direction: row;
    padding: 0;
  }

  .events__content {
    width: 60%;
    padding: 80px 40px;
  }

  .partners-figma {
    padding: 80px 0;
  }



  .gallery__carousel-slide {
    flex: 0 0 300px;
    height: 380px;
  }


  .gallery__header {
    position: relative;
    left: 0;
    top: 0;
    width: 90%;
    margin: 0 auto;
  }

  .gallery__title {
    width: 100%;
    font-size: 36px;
  }

  .gallery__desc {
    width: 100%;
    font-size: 18px;
  }



  .gallery__btn {
    position: relative;
    left: 0;
    top: 0;
    margin: 30px auto 0;
    width: auto;
    min-width: 280px;
  }

  .newsletter-figma {
    height: auto;
    padding: 60px 0;
  }

  .newsletter-stage-1440 {
    max-width: 100%;
  }

  .newsletter__container {
    position: relative;
    left: 0;
    top: 0;
    width: 90%;
    margin: 0 auto;
  }

  .newsletter__title {
    font-size: 36px;
  }

  .newsletter__subtitle {
    font-size: 18px;
  }

  .newsletter__form-wrap {
    width: 100%;
  }

  .footer__content {
    gap: 60px;
  }

  .footer__brand {
    width: 300px;
  }

  /* Team — small laptop 1200px */
  .team-section .container {
    padding: 0 60px;
  }

  .team-layout {
    gap: 60px;
  }

  .team-sidebar {
    flex: 0 0 200px;
  }

  .team-title {
    font-size: 88px;
  }

  .team-grid {
    gap: 56px 32px;
  }

  .team-member__image-wrap {
    flex: 0 0 120px;
    height: 155px;
  }

  .team-member__name {
    font-size: 22px;
  }
}

/* ============================================
   RESPONSIVE — Tablet Portrait 1024px
   ============================================ */
@media (max-width: 1024px) {
  .awa-nav {
    padding: 0 40px;
  }

  .awa-nav__menu {
    display: none;
  }

  .awa-nav__cta {
    display: none;
  }

  .awa-nav__burger {
    display: flex;
  }

  .footer__content {
    flex-direction: column;
    gap: 40px;
  }

  .footer__brand {
    width: 100%;
  }

  .footer__links {
    flex-wrap: wrap;
  }

  .footer__container {
    padding: 30px 40px 0;
  }

  /* Events / About hero */
  .events-hero__container,
  .about-hero__container {
    padding: 0 24px;
    justify-content: center;
    align-items: center;
  }

  .events-hero__bottom-left,
  .about-hero__bottom-left {
    align-items: center;
    text-align: center;
  }

  .events-hero__title,
  .about-hero__title {
    font-size: clamp(24px, 4vw, 40px); /* Proportional tablet reduction */
  }
  
  .wwa-redesign {
    padding: 100px 0;
  }


  .who-we-are__title {
    font-size: 48px;
  }

  .who-we-are__content {
    padding: 0 20px;
  }

  /* What We Deliver — tablet */
  .wwd-redesign .container--narrow,
  .wwa-redesign .container--narrow {
    padding: 0 40px;
  }

  .wwd-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* 3e card pleine largeur */
  .wwd-grid .wwd-card:nth-child(3) {
    grid-column: span 2;
    border-right: 1px solid rgba(10, 10, 10, 0.12);
  }

  /* Team — tablet portrait 1024px */
  .team-section .container {
    padding: 0 40px;
  }

  .team-layout {
    gap: 48px;
  }

  .team-sidebar {
    flex: 0 0 180px;
  }

  .team-title {
    font-size: 72px;
    margin-bottom: 32px;
  }

  .team-grid {
    gap: 48px 32px;
  }

  .team-member__image-wrap {
    flex: 0 0 110px;
    height: 140px;
  }

  .team-member__name {
    font-size: 20px;
  }

  .events-section-title {
    font-size: 36px;
  }

  .event-card__title {
    font-size: 28px;
  }
}

/* ============================================
   RESPONSIVE — Mobile 768px
   ============================================ */
@media (max-width: 768px) {
  .awa-nav {
    padding: 0 20px;
    height: 64px;
  }

  .awa-nav__logo img {
    width: 140px;
    height: auto;
  }

  /* Hero */
  .hero-section {
    height: 253px !important;
    min-height: 253px !important;
    max-height: 253px !important;
    padding: 0;
    overflow: hidden;
    display: block;
  }

  .hero-stage {
    display: block;
    width: 100%;
    height: 253px !important;
    position: relative;
    max-width: unset;
  }

  .hero-img-mascot {
    position: absolute !important;
    width: 352px !important;
    height: 206px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    top: -13px !important;
    margin: 0;
    object-fit: contain !important;
  }

  .hero-img-bg-wrap {
    position: absolute !important;
    width: 100% !important;
    height: 181px !important;
    left: 0 !important;
    top: 106px !important;
    transform: none !important;
  }

  .hero-img-bg {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  .hero-tagline-wrap {
    position: absolute !important;
    width: calc(100% - 32px) !important; /* Slightly more margin */
    height: auto !important;
    left: 16px !important;
    bottom: 24px !important; /* Better positioning */
    top: auto !important;
    right: auto !important;
    padding: 0;
    margin: 0;
    text-align: left !important;
    display: flex !important;
    flex-direction: column !important; /* Ensure column stack */
    justify-content: flex-end !important;
    align-items: flex-start !important; /* Left align */
    z-index: 11 !important;
  }

  .hero-tagline {
    font-size: clamp(23px, 6.5vw, 26px) !important;
    line-height: 1.15 !important;
    letter-spacing: -0.02em;
    text-align: left !important;
    width: 100% !important;
    margin: 0 !important;
  }

  .hero-subtitle {
    font-size: 14px !important; /* Smaller on mobile */
    margin-top: 4px !important;
    width: 100% !important;
    color: rgba(255, 255, 255, 0.9) !important;
  }

  .hero-social {
    display: none;
  }

  /* Inner page hero titles — mobile */
  .events-hero__title,
  .about-hero__title,
  .gallery-hero__title {
    font-size: clamp(22px, 6.5vw, 30px) !important;
    line-height: 1.15 !important;
  }

  /* About intro */
  .about-intro-figma {
    height: auto !important;
    min-height: unset;
    padding: 20px;
    display: flex;
    justify-content: center;
    overflow: hidden;
  }

  .about__content-frame {
    gap: 8px !important;
    padding: 10px 20px 30px !important;
    position: relative;
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .home-quote-section .about__content-frame {
    padding-bottom: 30px !important;
  }



  .about__logomark {
    position: static;
    width: 140px;
    height: auto;
    margin: 0;
  }

  .about__heading {
    position: static;
    width: 100%;
    height: auto;
    /* Use the standard fluid h2 size to match other sections */
    font-size: var(--fluid-h2-section);
    white-space: normal;
    text-align: center;
    line-height: 1.2;
    margin: 0;
  }


  .about__heading br {
    display: none;
  }

  .about__body {
    position: static;
    width: 100%;
    height: auto;
    font-size: 16px;
    text-align: center;
    line-height: 1.4;
    margin: 0;
  }

  .about__btn {
    position: static;
    width: auto;
    height: auto;
    font-size: 16px;
    padding: 12px 32px;
    margin: 12px 0 0 0;
    display: inline-flex;
    justify-content: center;
    align-items: center;
  }

  /* Events next */
  .events-next-figma {
    height: auto !important;
    min-height: unset !important;
    max-height: none !important;
    overflow: visible !important;
  }

  .events-stage-1440 {
    width: 100% !important;
    height: auto !important;
    min-height: unset !important;
    display: flex !important;
    flex-direction: column !important;
    left: 0 !important;
    top: 0 !important;
    transform: none !important;
    overflow: visible !important;
  }

  .events__right-frame {
    position: relative !important;
    width: 100% !important;
    height: 300px !important;
    left: 0 !important;
    top: 0 !important;
    order: 1 !important;
    overflow: hidden;
  }

  .events__left-frame {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    min-height: unset !important;
    left: 0 !important;
    top: 0 !important;
    order: 2 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    background: #ffffff;
  }


  .events__img-main {
    position: absolute !important;
    width: 100% !important;
    height: 100% !important;
    left: 0 !important;
    top: 0 !important;
    object-fit: cover !important;
  }

  .events__content-block {
    position: relative !important;
    width: 100% !important;
    padding: 32px 20px 24px !important;
    height: auto !important;
    left: auto !important;
    top: auto !important;
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    z-index: 20;
    overflow: visible !important;
  }

  .events__logo-bg {
    display: none !important;
  }

  .events__logo-overlay {
    display: none;
  }

  .events__title {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    left: auto !important;
    top: auto !important;
    color: #242422 !important;
    font-size: 24px !important;
    text-align: center !important;
    margin: 0 0 16px 0 !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
  }


  .events__body {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    left: auto !important;
    top: auto !important;
    color: #242422 !important;
    font-size: 16px !important;
    text-align: center !important;
    margin: 0 0 24px 0 !important;
    line-height: 1.4 !important;
  }

  .events__actions {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    left: auto !important;
    top: auto !important;
    display: flex !important;
    justify-content: center !important;
  }

  .events__btn {
    position: relative !important;
    width: 160px !important;
    min-width: 160px !important;
    height: 51px !important;
    left: auto !important;
    top: auto !important;
    outline: 1px solid #000000 !important;
    color: #000000 !important;
  }

  /* Partners */
  .partners-figma {
    padding: 60px 0;
  }

  .partners-stage-1440 {
    flex-direction: column;
    padding: 0 20px;
    gap: 40px;
    align-items: center;
    text-align: center;
  }

  .partners__heading {
    white-space: normal;
  }

  .partners__grid {
    grid-template-columns: repeat(2, 1fr);
    width: 100%;
    gap: 20px;
  }

  .partners__logo-cell {
    padding: 16px;
  }

  .partners__logo-cell:nth-child(2n) {
    border-right: none;
  }

  /* Case study */


  /* Gallery */
  .gallery__carousel-slide {
    flex: 0 0 260px;
    height: 320px;
  }
  .gallery__carousel-track {
    animation-duration: 25s; /* faster on smaller screens */
  }




  .gallery__btn {
    width: 100%;
    padding: 14px 20px;
  }

  .gallery__desc {
    font-size: 16px;
  }

  /* Newsletter */
  .newsletter-figma {
    padding: 60px 0;
  }

  .newsletter-stage-1440 {
    padding: 0 20px;
  }

  .newsletter__form {
    flex-direction: column;
  }

  .newsletter__btn {
    width: 100%;
  }

  .newsletter__subtitle {
    font-size: 16px;
  }

  /* Footer */
  .footer__container {
    padding: 24px 20px 0;
  }

  .footer__content {
    flex-direction: column;
    gap: 32px;
  }

  .footer__brand {
    width: 100%;
  }

  .footer__brand-tagline {
    width: 100%;
  }

  /* Mobile footer links: 3 columns (Navigate | Follow | Connect) spaced across width */
  .footer__links {
    display: grid;
    grid-template-columns: max-content max-content max-content;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    text-align: left;
  }

  .footer__col {
    align-items: flex-start;
  }

  /* Navigate: col 1 */
  .footer__col:nth-child(1) {
    grid-column: 1;
    grid-row: 1;
  }

  /* Connect: col 3 (right of follow) */
  .footer__col:nth-child(2) {
    grid-column: 3;
    grid-row: 1;
  }

  /* Follow: col 2 */
  .footer__col:nth-child(3) {
    grid-column: 2;
    grid-row: 1;
  }

  .footer__bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  /* Events page */
  .events-hero-figma {
    height: 300px;
  }

  .events-section-title {
    font-size: 28px;
  }

  .events-section-header {
    margin-bottom: 60px;
  }

  .events-timeline-line {
    display: none;
  }

  .event-card {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    gap: 24px;
    padding: 40px 0;
  }

  .event-card--passed {
    padding: 40px 20px;
    margin: 0 -20px;
  }

  .event-card__date-box {
    align-self: flex-start;
  }

  .event-card__day {
    font-size: 32px;
  }

  .event-card__checkpoint-wrap {
    display: none;
  }

  .event-checkpoint {
    width: 20px;
    height: 20px;
  }

  .event-checkpoint--completed::after {
    inset: 6px;
  }
  
  .wwa-redesign {
    padding: 80px 0;
  }

  .wwa-header {
    margin-bottom: 48px;
  }

  .wwa-content {
    flex-direction: column;
    gap: 40px;
  }

  .wwa-left {
    font-size: 20px;
  }

  .wwa-logo {
    height: 32px;
  }


  /* What We Deliver — mobile */
  .wwd-redesign {
    padding: 60px 0;
  }

  .wwd-redesign .container--narrow,
  .wwa-redesign .container--narrow {
    padding: 0 20px;
  }

  .wwd-header-new {
    flex-direction: column;
    gap: 8px;
    margin-bottom: 40px;
  }

  .wwd-grid,
  .wwd-grid-row2 {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  .wwd-grid .wwd-card:nth-child(3) {
    grid-column: auto; /* Reset inherited span 2 from tablet */
  }

  .wwd-card,
  .wwd-card:last-child,
  .wwd-grid .wwd-card:nth-child(3),
  .wwd-grid-row2 .wwd-card,
  .wwd-grid-row2 .wwd-card:last-child {
    border: 1px solid rgba(10, 10, 10, 0.12) !important;
  }

  .wwd-card-wide {
    flex-direction: column;
    gap: 16px;
  }

  .wwd-card-tag {
    writing-mode: horizontal-tb;
    padding-top: 0;
    margin-bottom: 16px;
  }

  /* About page — team (mobile 768px) */
  .wwd-title {
    font-size: 64px;
  }

  .wwd-list li {
    font-size: 20px;
  }

  .team-section .container {
    padding: 0 20px;
  }

  .team-section {
    padding: 72px 0;
  }

  .team-layout {
    flex-direction: column;
    align-items: center; /* Ensures the sidebar and grid are centered within the column */
    gap: 40px;
  }

  .team-sidebar {
    flex: none;
    text-align: center;
    width: 100%;
    display: flex;
    justify-content: center;
  }

  .team-branding {
    position: static;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
  }

  .team-logo-top {
    height: 20px;
    margin-bottom: 20px;
  }

  .team-title {
    font-size: 64px;
    margin-bottom: 20px;
    text-align: center;
  }

  .team-deco-bottom {
    width: 40px;
  }

  .team-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .team-member {
    flex-direction: row;
    align-items: flex-start;
    gap: 20px;
    text-align: left;
  }

  .team-member__image-wrap {
    flex: 0 0 120px;
    height: 150px;
  }

  .team-member__info {
    padding-top: 4px;
    flex: 1;
  }

  .team-member__name {
    font-size: 18px;
  }

  .team-member__role {
    font-size: 12px;
  }

  .team-member__email {
    font-size: 11px;
    word-break: break-all;
  }

  .about-hero__subtitle {
    display: none; /* Subtitles removed globally */
  }
}


/* ============================================
   RESPONSIVE — Small Mobile 480px
   ============================================ */
@media (max-width: 480px) {

  .about__heading,
  .events__title,
  .partners__heading,
  .gallery__title,
  .case-study__title,
  .newsletter__title {
    font-size: 24px;
  }

  .about__body,
  .events__body,
  .partners__sub,
  .gallery__desc,
  .case-study__body,
  .newsletter__subtitle {
    font-size: 15px;
  }
}
/* ============================================
   SCROLL REVEAL ANIMATIONS
   Lightweight IntersectionObserver system.
   JS adds .awa-reveal on init; .awa-reveal--visible on entry.
   ============================================ */
.awa-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 0.65s cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 0.65s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: opacity, transform;
}

.awa-reveal--visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger: JS sets inline transition-delay per sibling */

/* Disable animations for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  .awa-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ============================================
   HERO LOAD-IN ANIMATIONS
   Fires on page load (not scroll).
   Elements are above the fold so IntersectionObserver
   would trigger immediately  we use CSS keyframes instead.
   ============================================ */

@keyframes awa-hero-fade-up {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes awa-hero-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Home page hero tagline */
.hero-tagline-wrap {
  animation: awa-hero-fade-up 0.8s cubic-bezier(0.22, 0.61, 0.36, 1) 0.3s both;
}

/* About / Events / Gallery hero title */
.about-hero__title,
.events-hero__title,
.gallery-hero__title {
  animation: awa-hero-fade-up 0.8s cubic-bezier(0.22, 0.61, 0.36, 1) 0.25s both;
}

/* Badge / tagline group below hero title */
.events-hero__tagline-wrapper {
  animation: awa-hero-fade-up 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) 0.5s both;
}

/* Mascot image */
.hero-img-mascot {
  animation: awa-hero-fade-in 1s ease 0.1s both;
}

/* Background photo */
.hero-img-bg-wrap {
  animation: awa-hero-fade-in 1.1s ease 0s both;
}

/* Disable hero animations for reduced-motion users */
@media (prefers-reduced-motion: reduce) {
  .hero-tagline-wrap,
  .about-hero__title,
  .events-hero__title,
  .gallery-hero__title,
  .events-hero__tagline-wrapper,
  .hero-img-mascot,
  .hero-img-bg-wrap {
    animation: none;
  }
}

/* WWA Mobile Restacking (Title -> Left Text -> Image -> Right Text) */
@media (max-width: 768px) {
  .wwa-redesign {
    padding: 80px 0;
  }
  .wwa-header {
    margin-bottom: 40px;
  }
  .wwa-logo {
    height: 32px;
  }
  
  .wwa-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    gap: 40px;
  }
  
  .wwa-top-left { 
    order: 1; 
  }
  .wwa-bottom-left { 
    order: 2; 
    font-size: 20px; 
  }
  .wwa-top-right { 
    order: 3; 
    height: auto; 
    min-height: 300px; /* Restores image visibility outside of stretch mode */
  }
  .wwa-bottom-right { 
    order: 4; 
  }
}

/* ============================================
   XX. STANDARD PAGES (Privacy, Terms, etc.)
   ============================================ */
.standard-page {
  padding-bottom: 120px;
}

.standard-page__header {
  width: 100%;
  padding: 120px 0 60px 0;
  background: #fff;
  display: flex;
  justify-content: center;
}

.standard-page__stage-1440 {
  width: 100%;
  max-width: 1440px;
  padding: 0 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.standard-page__title {
  font-family: 'TradeGothic LT Extended', sans-serif !important;
  font-weight: 700;
  font-size: clamp(40px, 6vw, 80px);
  color: #242422;
  text-align: center;
  margin-bottom: 20px;
  text-transform: uppercase;
}

.standard-page__deco {
  width: 80px;
  height: 4px;
  background: #000;
  margin-top: 10px;
  box-shadow: 0 0 15px rgba(0,0,0,0.2);
}

.standard-page__content {
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 0 20px;
}

.standard-page__inner-800 {
  width: 100%;
  max-width: 800px;
  font-family: 'Inter', sans-serif;
  font-size: 18px;
  line-height: 1.8;
  color: #242422;
}

.standard-page__inner-800 h2 {
  font-family: 'TradeGothic LT Extended', sans-serif !important;
  font-size: 24px;
  margin: 60px 0 20px 0;
  text-transform: uppercase;
  color: #000;
  letter-spacing: 0.05em;
}

.standard-page__inner-800 p {
  margin-bottom: 24px;
}

.standard-page__inner-800 ul {
  margin-bottom: 30px;
  padding-left: 20px;
}

.standard-page__inner-800 li {
  margin-bottom: 12px;
}

@media (max-width: 767px) {
  .standard-page__header {
    padding: 80px 0 40px 0;
  }
  .standard-page__stage-1440 {
    padding: 0 20px;
  }
  .standard-page__inner-800 {
    font-size: 16px;
  }
}

/* ============================================
   RESPONSIVE NAVIGATION FIX (V17)
   ============================================ */
@media screen and (max-width: 991px) {
  .awa-nav__menu,
  .awa-nav__cta {
    display: none !important;
  }

  .awa-nav__burger {
    display: flex !important;
  }

  .awa-nav {
    padding: 0 20px !important;
  }
}


/* ============================================
   EVENT PROMO — GOLFOS in Lisbon
   Section élargie — right image flush bord droit
   ============================================ */

/* -- Outer section -- */
.ep {
  width: 100%;
  background: #ffffff;
  overflow: hidden;
  position: relative;
}

/* -- Canvas 1440px, hauteur élargie à 800px -- */
.ep__stage {
  position: relative;
  width: 95%;
  max-width: 1440px;
  height: 800px;
  margin: 40px auto;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid #D1D1D1;
  border-radius: 10px;
}

/* -- Background texture -- */
.ep__bg {
  position: absolute;
  inset: 0;
  background: url('../assets/images/background.png') repeat;
  background-size: auto;
  background-position: bottom;
  opacity: 0.3;
  z-index: 1;
  pointer-events: none;
}

/* ------------------------------------------
   POSTER — carré 680×680
   Positionné sur la droite pour équilibrer
------------------------------------------ */
.ep__images {
  position: absolute;
  left: 650px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
}

.ep__poster {
  width: 680px;
  height: 680px;
  object-fit: cover;
  object-position: center center;
  display: block;
  box-shadow: 0 30px 60px rgba(0,0,0,0.1);
}

/* ------------------------------------------
   CONTENT PANEL
------------------------------------------ */
.ep__content {
  position: absolute;
  left: 109px;
  top: 50%;
  transform: translateY(-50%);
  width: 460px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 15px;
  z-index: 10;
}

/* AWA event label logo — 94×36 */
.ep__logo {
  width: 94px;
  height: auto;
  object-fit: contain;
  display: block;
  margin-bottom: 10px;
}

/* Date + Titre */
.ep__title-block {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

/* Date */
.ep__meta {
  font-family: 'TradeGothic LT Extended', 'Arial Narrow', sans-serif !important;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 5px;
  color: #FF6F9A;
  text-transform: uppercase;
  margin: 0;
  white-space: nowrap;
}

/* Titre — Harmonisé avec les autres sections */
.ep__title {
  width: 100%;
  font-family: 'TradeGothic LT Extended', 'Arial Narrow', sans-serif !important;
  font-size: var(--fluid-h2-section);
  font-weight: 700 !important;
  line-height: 1.1;
  color: #1D1D1D;
  margin: 0;
}

.ep__mobile-br {
  display: none;
}

/* Description block */
.ep__desc-block {
  width: 100%;
  margin-top: 15px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

/* Description — Inter pour cohérence */
.ep__desc {
  width: 100%;
  max-width: 420px;
  font-family: 'Inter', sans-serif !important;
  font-size: var(--fluid-body-lead);
  font-weight: 400;
  line-height: 1.6;
  color: #000000;
  margin: 0 0 15px 0; /* Add bottom margin to separate from CTA */
}

/* CTA bouton */
.ep__cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 15px 32px;
  background: #000000;
  color: #ffffff;
  font-family: 'TradeGothic LT Extended', 'Arial Narrow', sans-serif !important;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid #000000;
  transition: all 0.3s ease;
}

.ep__cta:hover {
  background: transparent;
  color: #000000;
}

.ep__cta svg {
  transition: transform 0.3s ease;
}

/* ------------------------------------------
   RESPONSIVE — Tablet
------------------------------------------ */
@media (max-width: 1200px) {
  .ep__stage {
    width: 92%;
    height: auto;
    min-height: 700px;
    margin: 30px auto;
  }
  .ep__images {
    left: 48%;
  }
  .ep__poster {
    width: 50vw;
    height: 50vw;
  }
  .ep__content {
    left: 5%;
    width: 40%;
  }
  .ep__title {
    font-size: clamp(40px, 6vw, 80px);
  }
}

/* ------------------------------------------
   RESPONSIVE — Mobile
------------------------------------------ */
@media (max-width: 767px) {
  .ep__stage {
    width: calc(100% - 32px);
    height: auto;
    display: flex;
    flex-direction: column;
    padding-bottom: 60px;
    margin: 20px auto;
  }
  .ep__images {
    position: relative;
    left: 0;
    top: 0;
    transform: none;
    width: 100%;
    height: auto;
  }
  .ep__poster {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
  }
  .ep__side-wrap {
    display: none;
  }
  .ep__content {
    position: relative;
    left: 0;
    top: 0;
    transform: none;
    width: 100%;
    padding: 30px 24px 0;
  }
  .ep__meta {
    white-space: normal;
    font-size: 11px;
    letter-spacing: 2px;
    line-height: 1.4;
  }
  .ep__title {
    font-size: 32px;
  }
  .ep__mobile-br {
    display: block;
  }
  .ep__desc {
    font-size: 15px;
    line-height: 1.5;
  }
  .ep__cta {
    width: 100%;
    justify-content: center;
  }
}