/* ============================================================
   BanguFit — bangufit.com
   Single-page site. Design tokens first, then sections in
   the order they appear in index.html.
   ============================================================ */

:root {
  --bg:        #1d1e20;
  --bg-alt:    #181a1c;
  --bg-deep:   #0b0b0a;
  --ink:       #f2f3f0;
  --accent:    #3dff00;
  --accent-hi: #8bff5c;

  --line:      rgba(242, 243, 240, 0.12);
  --line-soft: rgba(242, 243, 240, 0.1);
  --ink-80:    rgba(242, 243, 240, 0.8);
  --ink-74:    rgba(242, 243, 240, 0.74);
  --ink-62:    rgba(242, 243, 240, 0.62);
  --ink-55:    rgba(242, 243, 240, 0.55);
  --ink-40:    rgba(242, 243, 240, 0.4);

  --sans:    Barlow, Helvetica, Arial, sans-serif;
  --cond:    'Barlow Condensed', 'Arial Narrow', sans-serif;
  --display: Anton, Impact, 'Haettenschweiler', sans-serif;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --pad-x: clamp(24px, 5vw, 64px);
  --pad-y: clamp(70px, 12vh, 150px);
}

/* ---------- reset / base ---------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  background: var(--bg);
}

body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hi); }

img, svg { display: block; }
::selection { background: var(--accent); color: var(--bg); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--accent);
  color: var(--bg);
  font-family: var(--cond);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 14px 20px;
}
.skip-link:focus {
  left: 0;
  color: var(--bg);
}

.display {
  margin: 0;
  font-family: var(--display);
  font-weight: 400;
  text-transform: uppercase;
}
.display em { color: var(--accent); font-style: normal; }
.accent { color: var(--accent); }

/* ---------- keyframes ---------- */

@keyframes bfRise    { from { opacity: 0; transform: translateY(46px); } to { opacity: 1; transform: translateY(0); } }
@keyframes bfFade    { from { opacity: 0; } to { opacity: 1; } }
@keyframes bfDrift   { 0% { transform: translateY(0) scale(1.04); } 100% { transform: translateY(-2.5%) scale(1.1); } }
@keyframes bfTicker  { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes bfPulse   { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }

/* ============================================================
   HEADER
   ============================================================ */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 18px clamp(16px, 4vw, 56px);
  background: rgba(11, 11, 10, 0.82);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line-soft);
  transition: padding 0.35s ease, background 0.35s ease;
}
.site-header.is-tight {
  padding-top: 11px;
  padding-bottom: 11px;
  background: rgba(29, 30, 32, 0.94);
}

.brand {
  display: flex;
  align-items: center;
  gap: 13px;
  color: var(--ink);
}
.brand:hover { color: var(--ink); }
.brand__mark { height: 23px; width: auto; fill: var(--ink); }
.brand__tag {
  font-family: var(--cond);
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(242, 243, 240, 0.5);
  border-left: 1px solid rgba(242, 243, 240, 0.2);
  padding-left: 13px;
}

.nav {
  display: flex;
  align-items: center;
  gap: clamp(12px, 2vw, 30px);
  font-family: var(--cond);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.nav__link { color: rgba(242, 243, 240, 0.65); display: none; }
.nav__link:hover { color: var(--accent); }

.nav__wa {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--accent);
  border: 1px solid rgba(61, 255, 0, 0.35);
  padding: 10px 15px;
  letter-spacing: 0.16em;
  transition: background 0.3s ease, border-color 0.3s ease;
}
.nav__wa:hover { background: rgba(61, 255, 0, 0.12); border-color: var(--accent); color: var(--accent); }
.dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  display: block;
  animation: bfPulse 2s ease-in-out infinite;
}

/* Instagram: one glyph, reused wherever the link appears. */
.ig-mark {
  width: 1.2em;
  height: 1.2em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  flex: none;
}
.ig-mark .ig-dot { fill: currentColor; stroke: none; }

.nav__ig {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  font-size: 19px;
  color: rgba(242, 243, 240, 0.6);
  border: 1px solid rgba(242, 243, 240, 0.18);
  transition: color 0.3s ease, border-color 0.3s ease, background 0.3s ease;
}
.nav__ig:hover {
  color: var(--accent);
  border-color: rgba(61, 255, 0, 0.45);
  background: rgba(61, 255, 0, 0.1);
}

/* Language: three codes, the current one lit. Plain links, so they work with
   JavaScript off and search engines can follow them to the other versions. */
.lang {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  border: 1px solid rgba(242, 243, 240, 0.18);
}
.lang__opt {
  display: block;
  padding: 9px 9px;
  font-size: 11px;
  letter-spacing: 0.14em;
  color: rgba(242, 243, 240, 0.55);
  transition: color 0.25s ease, background 0.25s ease;
}
.lang__opt:hover { color: var(--accent); background: rgba(61, 255, 0, 0.1); }
.lang__opt.is-on {
  color: var(--bg);
  background: var(--accent);
}
.lang__opt.is-on:hover { color: var(--bg); background: var(--accent); }
.lang--foot { border-color: rgba(242, 243, 240, 0.14); }

.nav__cta {
  background: var(--accent);
  color: var(--bg);
  padding: 11px 20px;
  letter-spacing: 0.16em;
  transition: background 0.3s ease, letter-spacing 0.3s ease;
}
.nav__cta:hover { background: var(--accent-hi); color: var(--bg); letter-spacing: 0.24em; }

.progress {
  position: absolute;
  left: 0;
  bottom: -1px;
  height: 2px;
  width: 0%;
  background: var(--accent);
  transition: width 0.12s linear;
}

/* The Instagram icon comes back as soon as there is room. The five text
   links need more: with the language switcher in the bar, they only fit
   from about 1050px up — below that they were pushing Apply off the edge,
   so they stay out and the anchors remain reachable by scrolling. */
@media (min-width: 761px) {
  .nav__ig { display: inline-flex; }
}
@media (min-width: 1100px) {
  .nav__link { display: inline; }
}

/* On a phone the brand tag, WhatsApp and Apply together are wider than the
   bar, and Apply ends up cut off by the edge. The tag is the one that can go. */
@media (max-width: 480px) {
  .brand__tag { display: none; }
}

/* Room for the language switcher on a narrow bar. WhatsApp leaves rather than
   Apply: the same conversation is one tap away from the hero button, the apply
   section and the footer, while the switcher has nowhere else to live. */
@media (max-width: 520px) {
  .nav__wa { display: none; }
  .lang__opt { padding: 8px 7px; }
}

/* ============================================================
   HERO
   ============================================================ */

.hero {
  min-height: 100svh;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.hero__bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hero__stripes {
  position: absolute;
  inset: -8%;
  animation: bfDrift 20s ease-in-out infinite alternate;
}
.hero__stripes svg { width: 100%; height: 100%; }
.hero__glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 90% at 78% 18%, rgba(61, 255, 0, 0.1), transparent 55%);
}
.hero__fade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(11, 11, 10, 0.5) 0%, rgba(11, 11, 10, 0.15) 45%, var(--bg) 100%);
}

.hero__portrait {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: min(46vw, 620px);
  overflow: hidden;
  animation: bfFade 1.6s 0.4s both ease-out;
}
.hero__portrait .parallax { position: absolute; inset: -6% 0; }
.hero__portrait img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 22%;
  filter: grayscale(0.22) contrast(1.06) brightness(0.94);
}
.hero__portrait-veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--bg) 0%, rgba(29, 30, 32, 0.72) 32%, rgba(29, 30, 32, 0.15) 70%, rgba(29, 30, 32, 0.45) 100%);
}
.hero__portrait-foot {
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, var(--bg) 0%, transparent 42%);
}

.hero__body {
  position: relative;
  z-index: 2;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--pad-x);
  padding-top: clamp(40px, 7vh, 80px);
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0;
  font-family: var(--cond);
  font-size: 12px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: rgba(242, 243, 240, 0.6);
}
.eyebrow--hero {
  margin-bottom: clamp(18px, 3vh, 30px);
  animation: bfFade 1s 0.15s both ease-out;
}
.pulse {
  width: 8px;
  height: 8px;
  background: var(--accent);
  display: block;
  flex: none;
  animation: bfPulse 2.4s ease-in-out infinite;
}

.hero__title {
  margin: 0;
  font-family: var(--display);
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(52px, 12vw, 200px);
  line-height: 0.84;
  letter-spacing: -0.02em;
  max-width: 16ch;
}
.hero__title em { color: var(--accent); font-style: normal; }
/* The mask hides the line while it rises from below, so it only needs to clip
   the bottom. Clipping the top as well cut the accents off uppercase French and
   Spanish — "À VOTRE" lost its accent. The padding opens that headroom and the
   negative margin puts the block back where it was. */
.mask {
  display: block;
  overflow: hidden;
  padding-top: 0.16em;
  margin-top: -0.16em;
}
.rise { display: block; }
.rise--1 { animation: bfRise 1s 0.1s both var(--ease); }
.rise--2 { animation: bfRise 1s 0.22s both var(--ease); }

.hero__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(24px, 4vw, 60px);
  margin-top: clamp(26px, 5vh, 50px);
}
.hero__lede {
  margin: 0;
  max-width: 44ch;
  font-size: clamp(16px, 1.5vw, 21px);
  line-height: 1.5;
  color: var(--ink-74);
  text-wrap: pretty;
  animation: bfRise 1s 0.4s both var(--ease);
}
.hero__actions {
  display: flex;
  flex-direction: column;
  gap: 14px;
  animation: bfRise 1s 0.52s both var(--ease);
}
.hero__loc {
  font-family: var(--cond);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink);
  text-shadow: 0 1px 14px rgba(29, 30, 32, 0.95), 0 0 4px rgba(29, 30, 32, 0.8);
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  background: var(--accent);
  color: var(--bg);
  font-family: var(--cond);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 19px 30px;
  transition: background 0.3s ease, gap 0.3s ease;
}
.btn:hover { background: var(--accent-hi); color: var(--bg); gap: 26px; }
.btn__arrow { font-family: var(--sans); }

.ticker {
  position: relative;
  z-index: 2;
  border-top: 1px solid var(--line);
  overflow: hidden;
  background: rgba(11, 11, 10, 0.6);
  animation: bfFade 1.2s 0.8s both ease-out;
}
.ticker__track {
  display: flex;
  width: max-content;
  animation: bfTicker 36s linear infinite;
  font-family: var(--display);
  text-transform: uppercase;
  font-size: clamp(20px, 3.2vw, 42px);
  line-height: 1;
  padding: 15px 0;
  color: rgba(242, 243, 240, 0.14);
  white-space: nowrap;
}
.ticker__set {
  display: flex;
  gap: clamp(20px, 3vw, 44px);
  padding-right: clamp(20px, 3vw, 44px);
}
.ticker .sep { color: var(--accent); }

/* ============================================================
   SECTION SHELL
   ============================================================ */

.section {
  padding: var(--pad-y) var(--pad-x);
  border-top: 1px solid var(--line-soft);
}
.section--alt { background: var(--bg-alt); }

.section-head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0;
}
.section-head--md { margin-bottom: clamp(30px, 5vh, 54px); }
.section-head--lg { margin-bottom: clamp(34px, 6vh, 66px); }
.section-head__num {
  font-family: var(--cond);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--accent);
}
.section-head__rule {
  height: 1px;
  flex: 1;
  background: rgba(242, 243, 240, 0.14);
}

/* ============================================================
   01 · THE COACH
   Text on the left, the claims that back it as a block on the
   right. His name is the largest thing in the section: this is
   the one place on the page that is about the person rather
   than the method.
   ============================================================ */

.coach__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: start;
}
.coach__intro {
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 2vh, 20px);
}
.coach__name {
  font-size: clamp(56px, 8vw, 128px);
  line-height: 0.84;
  padding-top: 0.12em;
  letter-spacing: -0.03em;
}
.coach__role {
  margin: 0 0 clamp(4px, 1vh, 10px);
  font-family: var(--cond);
  font-weight: 600;
  font-size: clamp(12px, 1.2vw, 15px);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  text-wrap: balance;
}
.coach__intro .lede {
  margin: 0;
  font-size: clamp(16px, 1.5vw, 21px);
  line-height: 1.5;
  color: var(--ink-80);
  text-wrap: pretty;
}
.coach__intro .muted {
  margin: 0;
  font-size: clamp(14px, 1.3vw, 18px);
  line-height: 1.6;
  color: var(--ink-55);
  text-wrap: pretty;
}

/* Four claims, so the block never ends on a half-empty row. */
.coach__proof {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--line);
  border: 1px solid var(--line);
}
.coach__proof li {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: clamp(16px, 1.8vw, 24px);
  background: var(--bg-alt);
}
.coach__proof-k {
  font-family: var(--cond);
  font-size: 11px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--accent);
}
.coach__proof-v {
  font-family: var(--display);
  font-size: clamp(19px, 1.9vw, 26px);
  line-height: 1.05;
  text-transform: uppercase;
  letter-spacing: -0.01em;
}
/* The second certification, under the headline one. No underline on the
   abbreviation: at this size its border landed on the line below and read
   as a stray green mark. The title attribute still spells PES out. */
.coach__proof-v--alt {
  font-size: clamp(15px, 1.35vw, 19px);
  color: var(--ink-62);
}
.coach__proof-v abbr { text-decoration: none; }
.coach__proof-n {
  font-size: 14px;
  line-height: 1.45;
  color: var(--ink-55);
  text-wrap: pretty;
}
/* the one claim that is a promise rather than a credential */
.coach__proof--now .coach__proof-v { color: var(--accent); }

@media (max-width: 900px) {
  .coach__grid { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .coach__proof { grid-template-columns: 1fr; }
}

/* ============================================================
   02 · APPROACH
   ============================================================ */

.approach {
  display: flex;
  flex-direction: column;
  gap: clamp(36px, 6vh, 66px);
  padding: clamp(70px, 12vh, 140px) var(--pad-x);
}

.approach__intro {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(30px, 5vw, 80px);
  align-items: start;
}
.approach__title {
  font-size: clamp(38px, 6.4vw, 104px);
  line-height: 0.9;
  letter-spacing: -0.015em;
}
.approach__copy {
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 3vh, 32px);
  padding-top: clamp(4px, 1vh, 14px);
}
.lede {
  margin: 0;
  font-size: clamp(17px, 1.6vw, 23px);
  line-height: 1.5;
  color: var(--ink-80);
  text-wrap: pretty;
}
.muted {
  margin: 0;
  font-size: clamp(15px, 1.3vw, 18px);
  line-height: 1.6;
  color: var(--ink-55);
  text-wrap: pretty;
}

/* 6 tiles: 4 photos at 4:3 and 2 clips that span both rows. Four columns
   and plain auto-placement are enough to land the composition, because the
   source order is photo · clip · clip · photo · photo · photo:

       ┌───────┬───────┬───────┬───────┐
       │ photo │       │       │ photo │
       ├───────┤ clip  │ clip  ├───────┤
       │ photo │       │       │ photo │
       └───────┴───────┴───────┴───────┘                                */
.approach__gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(12px, 1.6vw, 20px);
}
.media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--bg-alt);
  margin: 0;
}
.media .parallax { position: absolute; inset: -8% 0; }
.media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 42%;
}
.media__cap {
  position: absolute;
  left: clamp(14px, 2vw, 22px);
  bottom: clamp(14px, 2vw, 22px);
  z-index: 3;
  font-family: var(--cond);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink);
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.7);
}

/* --- video tiles ---------------------------------------------------
   The clips are filmed vertically, so instead of squeezing them into a
   4:3 slot they take a column of their own and span both rows.

   Each tile plays a short silent loop by itself — muted playback needs no
   click, so there is no control here that can fail to respond. The button
   on top opens the full clip, with sound, in the lightbox.
   -------------------------------------------------------------------- */

.media--clip {
  aspect-ratio: auto;
  grid-row: span 2;
  background: #0d0e0f;
}
.media__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  background: #0d0e0f;
}
/* The poster covers the video until the first frame is actually painted,
   and stays put for good if the file cannot be read. */
.media--clip .media__poster {
  z-index: 2;
  object-position: 50% 55%;
  transition: opacity 0.6s ease;
}
.media--clip.is-playing .media__poster { opacity: 0; pointer-events: none; }

/* The pitch clip was filmed wide, with the athletes low in a tall frame and
   sky over the rest. That is cropped out of the file itself rather than
   scaled away here, so the framing holds everywhere it plays — including
   full screen — and no hidden pixels are downloaded. */

/* the whole tile opens the full clip, with the ring as its visible centre */
.media__open {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 15px;
  padding: 0 0 clamp(28px, 3vw, 40px);
  background: linear-gradient(180deg, rgba(11, 11, 10, 0.3) 0%, rgba(11, 11, 10, 0.04) 34%, rgba(11, 11, 10, 0.55) 78%, rgba(11, 11, 10, 0.88) 100%);
  border: 0;
  cursor: pointer;
  color: var(--ink);
  transition: background 0.35s ease;
}
.media__open:hover {
  background: linear-gradient(180deg, rgba(11, 11, 10, 0.2) 0%, rgba(11, 11, 10, 0.05) 40%, rgba(11, 11, 10, 0.8) 100%);
}
/* If the loop file will not load the poster stays, but the control does not
   go anywhere: the full clip may still be fine, and a tile with no affordance
   at all just reads as a photo that failed. */
.media--clip.is-nofilm .media__ring::after { display: none; }

.media__ring {
  position: relative;
  width: clamp(62px, 5.4vw, 82px);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 2px solid var(--accent);
  background: rgba(11, 11, 10, 0.4);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  display: block;
  transition: background 0.3s ease, transform 0.3s var(--ease);
}
/* the triangle, drawn rather than typed so it sits on the optical centre */
.media__ring::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 53%;
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: 0.5em 0 0.5em 0.84em;
  border-color: transparent transparent transparent var(--accent);
  font-size: clamp(13px, 1.2vw, 17px);
  transition: border-color 0.3s ease;
}
/* one slow halo, so the tile reads as playable at a glance */
.media__ring::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  border: 2px solid var(--accent);
  animation: bfRing 3s cubic-bezier(0.2, 0.6, 0.3, 1) infinite;
}
@keyframes bfRing {
  0%   { opacity: 0.5; transform: scale(1); }
  70%  { opacity: 0;   transform: scale(1.4); }
  100% { opacity: 0;   transform: scale(1.4); }
}
.media__open:hover .media__ring {
  background: var(--accent);
  transform: scale(1.08);
}
.media__open:hover .media__ring::before { border-left-color: var(--bg); }

.media__word {
  font-family: var(--cond);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.9);
}

/* a running-time badge is the other half of "this is a video" */
.media__len {
  position: absolute;
  right: clamp(14px, 2vw, 22px);
  top: clamp(14px, 2vw, 22px);
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--cond);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--ink);
  background: rgba(11, 11, 10, 0.62);
  padding: 5px 9px 5px 8px;
}
.media__len::before {
  content: "";
  border-style: solid;
  border-width: 4px 0 4px 6.5px;
  border-color: transparent transparent transparent var(--accent);
}
/* A caption sitting straight on live footage is only as legible as whatever
   frame happens to be under it — bright grass here. On the clips it gets its
   own chip, like the running time, so it reads on any frame. */
.media--clip .media__cap {
  bottom: clamp(14px, 2vw, 20px);
  left: clamp(12px, 1.6vw, 18px);
  right: clamp(12px, 1.6vw, 18px);
  background: rgba(11, 11, 10, 0.62);
  padding: 6px 9px;
  text-shadow: none;
}

/* --- lightbox ------------------------------------------------------- */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 4vh, 48px);
}
.lightbox[hidden] { display: none; }
.lightbox__scrim {
  position: absolute;
  inset: 0;
  background: rgba(6, 7, 6, 0.92);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.lightbox__frame {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  max-width: min(96vw, 520px);
}
.lightbox__video {
  width: 100%;
  max-height: 80vh;
  background: #000;
  display: block;
}
.lightbox__cap {
  margin: 0;
  font-family: var(--cond);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-55);
  text-align: center;
}
.lightbox__close {
  position: absolute;
  top: clamp(12px, 2vh, 24px);
  right: clamp(12px, 2vw, 28px);
  z-index: 2;
  width: 46px;
  height: 46px;
  font-size: 17px;
  line-height: 1;
  color: var(--ink);
  background: rgba(242, 243, 240, 0.08);
  border: 1px solid rgba(242, 243, 240, 0.2);
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.lightbox__close:hover { background: var(--accent); color: var(--bg); border-color: var(--accent); }

body.is-locked { overflow: hidden; }

/* Two columns: the clips pair up on the first row as a vertical diptych and
   the four photos fill the two rows underneath. Explicit placement, because
   plain auto-flow leaves holes as soon as a row-spanning item sits in the
   middle of the source order. The clips also need their own aspect-ratio
   here: with no 4:3 photo sharing their rows, nothing else gives them a
   height and they collapse to the caption. */
@media (min-width: 681px) and (max-width: 1080px) {
  .approach__gallery { grid-template-columns: repeat(2, 1fr); }
  .media--clip { grid-row: auto; aspect-ratio: 2 / 3; }
  .approach__gallery > :nth-child(2) { grid-column: 1; grid-row: 1; }
  .approach__gallery > :nth-child(3) { grid-column: 2; grid-row: 1; }
  .approach__gallery > :nth-child(1) { grid-column: 1; grid-row: 2; }
  .approach__gallery > :nth-child(4) { grid-column: 2; grid-row: 2; }
  .approach__gallery > :nth-child(5) { grid-column: 1; grid-row: 3; }
  .approach__gallery > :nth-child(6) { grid-column: 2; grid-row: 3; }
}

/* One column: the clips get their native 9:16, which is exactly the format
   they were shot in and the one a phone is holding. */
@media (max-width: 680px) {
  .approach__gallery { grid-template-columns: 1fr; }
  /* Each clip takes the shape it was cut to, so a phone shows the whole
     frame with nothing trimmed off the sides. */
  .media--clip { aspect-ratio: 9 / 16; grid-row: auto; }
  .media--clip-wide { aspect-ratio: 540 / 690; }
}

.pull-quote {
  margin: 0;
  border-left: 3px solid var(--accent);
  padding: clamp(14px, 2vw, 24px) 0 clamp(14px, 2vw, 24px) clamp(20px, 3vw, 40px);
  max-width: 30ch;
}
.pull-quote p {
  font-size: clamp(24px, 3.4vw, 54px);
  line-height: 1.02;
  letter-spacing: -0.01em;
}

/* ============================================================
   02 · PILLARS
   ============================================================ */

.pillars {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
  gap: 1px;
}
.pillar {
  background: var(--bg);
  outline: 1px solid var(--line);
  padding: clamp(26px, 3vw, 42px);
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 4vh, 54px);
  min-height: clamp(280px, 38vh, 380px);
  transition: background 0.4s ease;
}
.pillar:hover { background: #26282d; }
.pillar__num {
  font-family: var(--cond);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: rgba(242, 243, 240, 0.35);
}
.pillar__body {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.pillar__title { font-size: clamp(26px, 2.6vw, 40px); line-height: 0.95; }
.pillar__text {
  margin: 0;
  font-size: 16px;
  line-height: 1.55;
  min-height: 6.2em;
  color: rgba(242, 243, 240, 0.6);
  text-wrap: pretty;
}
.pillar__line {
  height: 2px;
  width: 100%;
  background: var(--accent);
  transform: scaleX(0.18);
  transform-origin: left;
  transition: transform 0.55s var(--ease);
}
.pillar:hover .pillar__line,
.pillar:focus-within .pillar__line { transform: scaleX(1); }

/* ============================================================
   03 · WHAT WE WORK ON
   ============================================================ */

.work {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.work__item {
  display: flex;
  align-items: baseline;
  gap: clamp(16px, 3vw, 40px);
  padding: clamp(20px, 3vh, 32px) 0;
  border-top: 1px solid var(--line);
  transition: padding-left 0.4s var(--ease);
}
.work__item:last-child { border-bottom: 1px solid var(--line); }
.work__item:hover { padding-left: 16px; }
.work__arrow {
  font-family: var(--cond);
  font-size: 13px;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: 0.14em;
  flex: none;
  width: 34px;
}
.work__item p {
  margin: 0;
  font-size: clamp(19px, 2.4vw, 34px);
  line-height: 1.25;
  font-weight: 500;
  text-wrap: pretty;
}

/* ============================================================
   04 · TAILORED
   ============================================================ */

.tailored__title {
  margin: 0 0 clamp(34px, 6vh, 60px);
  font-size: clamp(34px, 5.6vw, 92px);
  line-height: 0.9;
  letter-spacing: -0.015em;
  max-width: 20ch;
}
.tailored {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
}
.tile {
  background: var(--bg);
  outline: 1px solid var(--line);
  padding: clamp(22px, 2.6vw, 34px);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.tile__label {
  font-family: var(--cond);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-40);
}
.tile__value {
  font-family: var(--cond);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(21px, 2.1vw, 30px);
  line-height: 1.05;
}

@media (max-width: 820px) { .tailored { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .tailored { grid-template-columns: 1fr; } }

/* ============================================================
   NUMBERS
   ============================================================ */

.stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(28px, 4vw, 54px) clamp(24px, 4vw, 60px);
}
.stat { display: flex; flex-direction: column; gap: 12px; }
.stat__num {
  font-family: var(--display);
  font-size: clamp(58px, 8vw, 124px);
  line-height: 0.85;
  color: var(--ink);
}
.stat__num--accent { color: var(--accent); }
.stat__label {
  font-family: var(--cond);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-55);
  border-top: 1px solid rgba(242, 243, 240, 0.14);
  padding-top: 12px;
}

/* ============================================================
   05 · PROCESS
   ============================================================ */

.process {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(24px, 3vw, 44px);
}
.step {
  display: flex;
  flex-direction: column;
  gap: 18px;
  border-top: 2px solid rgba(242, 243, 240, 0.2);
  padding-top: clamp(20px, 3vh, 30px);
}
.step--first { border-top-color: var(--accent); }
.step__num {
  font-family: var(--display);
  font-size: clamp(40px, 5vw, 74px);
  line-height: 0.85;
  color: rgba(242, 243, 240, 0.16);
}
.step__title {
  margin: 0;
  font-family: var(--cond);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(22px, 2.2vw, 32px);
  line-height: 1.05;
}
.step__text {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-62);
  text-wrap: pretty;
}

/* ============================================================
   06 · LOCATION
   One city, so the rail that used to hold two thumbnails holds one
   photo over its whole height. The picture has to stay a picture —
   it is the only image of Doha on the page — so the veil only darkens
   the edge the headline crosses, and leaves the mosque alone.
   ============================================================ */

.location {
  min-height: 100svh;
  position: relative;
  display: flex;
  align-items: stretch;
  overflow: hidden;
  border-top: 1px solid var(--line-soft);
}

.location__shot {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: min(46vw, 640px);
  overflow: hidden;
  z-index: 1;
}
.location__shot .parallax { position: absolute; inset: -7% 0; }
.location__shot img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 45%;
}
/* Opaque only where the photo meets the copy, then out of the way fast.
   The bottom stop lands the image into the section that follows. */
.location__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, var(--bg) 0%, rgba(29, 30, 32, 0.55) 18%, rgba(29, 30, 32, 0.06) 46%, rgba(29, 30, 32, 0.18) 100%),
    linear-gradient(0deg, var(--bg) 0%, rgba(29, 30, 32, 0.35) 18%, transparent 45%);
}
.location__tag {
  position: absolute;
  right: clamp(16px, 2vw, 26px);
  top: clamp(16px, 2vw, 24px);
  z-index: 2;
  font-family: var(--cond);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink);
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.85);
}

.location__panel {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: var(--pad-y) var(--pad-x);
  padding-right: clamp(24px, 48vw, 680px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(24px, 4vh, 40px);
}

.location__title {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.location__kicker {
  font-family: var(--cond);
  font-weight: 600;
  font-size: clamp(13px, 1.4vw, 17px);
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--ink-55);
}
/* One word, in the accent, as big as the text column takes. The column is
   roughly the viewport minus the photo rail, hence the modest vw factor —
   at full viewport width (below the breakpoint) it is raised again. */
.location__city {
  font-size: clamp(76px, 21vw, 300px);
  /* Anton's glyphs are taller than a 0.8 line box, so they spill out of it and
     land on the lines above and below. The padding is in em, so the clearance
     scales with the word instead of being right at one size only. */
  line-height: 0.8;
  padding: 0.13em 0 0.1em;
  letter-spacing: -0.035em;
  color: var(--accent);
}
.location__country {
  font-family: var(--cond);
  font-weight: 700;
  font-size: clamp(14px, 1.6vw, 20px);
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--ink-62);
  padding-left: 0.3em;
}

.location__copy {
  display: grid;
  gap: clamp(14px, 2vh, 20px);
  max-width: 62ch;
  border-top: 1px solid rgba(242, 243, 240, 0.16);
  padding-top: clamp(20px, 3vh, 30px);
}
.location__copy p {
  margin: 0;
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.55;
  color: rgba(242, 243, 240, 0.82);
  text-wrap: pretty;
}
.location__copy .muted { color: var(--ink-55); }

/* Three short facts, so the column below the headline carries weight
   instead of trailing off. */
.location__facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 165px), 1fr));
  gap: 1px;
  margin: 0;
  padding: 0;
  list-style: none;
  max-width: 700px;
  background: rgba(242, 243, 240, 0.14);
  border: 1px solid rgba(242, 243, 240, 0.14);
}
.location__facts li {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: clamp(14px, 1.6vw, 18px);
  background: rgba(11, 11, 10, 0.62);
}
.location__fact-k {
  font-family: var(--cond);
  font-size: 11px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--accent);
}
.location__fact-v {
  font-family: var(--cond);
  font-weight: 600;
  font-size: clamp(14px, 1.4vw, 17px);
  letter-spacing: 0.04em;
  color: var(--ink);
}

/* Below the tablet break the side rail would crush the headline into a
   narrow column, so the copy takes the full width and the photo becomes
   a band underneath it — where it is still a photograph, not a texture. */
/* Three items in two columns leave a fourth cell empty, which reads as a
   missing entry. Under this width they stack instead. */
@media (max-width: 560px) {
  .location__facts { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .location { flex-direction: column; min-height: 0; }

  .location__panel {
    order: 1;
    padding-right: var(--pad-x);
    padding-bottom: clamp(36px, 6vh, 60px);
  }
  .location__city { font-size: clamp(76px, 33vw, 300px); }

  .location__shot {
    order: 2;
    position: relative;
    width: 100%;
    height: clamp(230px, 38vh, 340px);
  }
  .location__shot img { object-position: 50% 38%; }
  .location__scrim {
    background: linear-gradient(0deg, var(--bg) 0%, rgba(29, 30, 32, 0.28) 26%, transparent 60%);
  }
  .location__tag { right: auto; left: 16px; top: auto; bottom: 14px; }
}

/* ============================================================
   07 · TESTIMONIALS
   ============================================================ */

.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(18px, 2.2vw, 28px);
}
@media (max-width: 829px) { .cards { grid-template-columns: 1fr; } }

.card {
  margin: 0;
  background: var(--bg-alt);
  outline: 1px solid var(--line);
  display: flex;
  flex-direction: column;
}
.card__media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--bg);
}
.card__media .parallax { position: absolute; inset: -7% 0; }
.card__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 25%;
}
/* per-photo framing — set on the <img> itself so reordering a card
   never re-frames someone else's portrait */
.pos-22 { object-position: 50% 22% !important; }
.pos-25 { object-position: 50% 25% !important; }
.pos-26 { object-position: 50% 26% !important; }
.pos-30 { object-position: 50% 30% !important; }
.card__veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(24, 26, 28, 0.92) 0%, rgba(24, 26, 28, 0.1) 45%, transparent 100%);
}
.card__cap {
  position: absolute;
  left: clamp(18px, 2.2vw, 26px);
  right: clamp(18px, 2.2vw, 26px);
  bottom: clamp(16px, 2vw, 22px);
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.card__name {
  font-family: var(--display);
  text-transform: uppercase;
  font-size: clamp(21px, 2.1vw, 28px);
  line-height: 0.95;
  letter-spacing: -0.005em;
  color: var(--ink);
}
.card__club {
  font-family: var(--cond);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(242, 243, 240, 0.62);
}
.card__role {
  font-family: var(--cond);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
}
.card__quote {
  margin: 0;
  padding: clamp(22px, 2.6vw, 32px);
  flex: 1;
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.55;
  color: var(--ink-74);
  text-wrap: pretty;
}

/* ============================================================
   08 · FAQ
   ============================================================ */

.faq {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(30px, 5vw, 70px);
  align-items: start;
}
.faq__intro { display: flex; flex-direction: column; gap: 20px; }
.faq__title {
  font-size: clamp(34px, 5vw, 80px);
  line-height: 0.9;
  letter-spacing: -0.015em;
}
.faq__list { display: flex; flex-direction: column; }

.faq details { border-top: 1px solid rgba(242, 243, 240, 0.14); }
.faq details.is-last { border-bottom: 1px solid rgba(242, 243, 240, 0.14); }
.faq summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: clamp(18px, 2.6vh, 26px) 0;
  font-family: var(--cond);
  font-weight: 600;
  text-transform: uppercase;
  font-size: clamp(16px, 1.5vw, 21px);
  letter-spacing: 0.04em;
}
.faq summary::-webkit-details-marker { display: none; }
.plus {
  flex: none;
  color: var(--accent);
  font-family: var(--sans);
  font-size: 20px;
  transition: transform 0.3s ease;
}
.faq details[open] .plus { transform: rotate(45deg); }
.faq details p {
  margin: 0;
  padding: 0 0 clamp(20px, 3vh, 28px);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-62);
  max-width: 52ch;
  text-wrap: pretty;
}

/* ============================================================
   09 · APPLY
   ============================================================ */

.apply { position: relative; overflow: hidden; }
.apply__glow {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: radial-gradient(80% 70% at 85% 20%, rgba(61, 255, 0, 0.08), transparent 60%);
}
.apply__grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: clamp(34px, 5vw, 80px);
  align-items: start;
}
.apply__intro {
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 3vh, 32px);
}
.apply__title {
  font-size: clamp(40px, 6.6vw, 112px);
  line-height: 0.86;
  letter-spacing: -0.02em;
}
.apply__text {
  margin: 0;
  max-width: 40ch;
  font-size: clamp(16px, 1.5vw, 20px);
  line-height: 1.55;
  color: rgba(242, 243, 240, 0.72);
  text-wrap: pretty;
}
.apply__links {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}
.apply__ig {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font-family: var(--cond);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 14px;
  color: var(--ink-55);
  transition: color 0.3s ease;
}
.apply__ig:hover { color: var(--accent); }

.apply__wa {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--cond);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 15px;
  color: var(--accent);
  border-bottom: 1px solid rgba(61, 255, 0, 0.4);
  padding-bottom: 6px;
  width: fit-content;
}

/* ---------- form ---------- */

.form {
  display: flex;
  flex-direction: column;
  gap: 18px;
  background: var(--bg-alt);
  border: 1px solid rgba(242, 243, 240, 0.14);
  padding: clamp(24px, 3vw, 42px);
}
.form__row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 18px;
}
.field {
  display: flex;
  flex-direction: column;
  gap: 9px;
  font-family: var(--cond);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(242, 243, 240, 0.5);
}
.form input,
.form select,
.form textarea {
  background: var(--bg);
  border: 1px solid rgba(242, 243, 240, 0.2);
  border-radius: 0;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  padding: 14px 15px;
  letter-spacing: normal;
  text-transform: none;
  transition: border-color 0.25s ease;
}
.form textarea { resize: vertical; }
.form input:focus,
.form select:focus,
.form textarea:focus {
  outline: none;
  border-color: var(--accent);
}
.form input::placeholder,
.form textarea::placeholder { color: rgba(242, 243, 240, 0.3); }

.form__submit {
  margin-top: 6px;
  background: var(--accent);
  color: var(--bg);
  border: none;
  border-radius: 0;
  font-family: var(--cond);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 19px 26px;
  cursor: pointer;
  transition: background 0.25s ease;
}
.form__submit:hover { background: var(--accent-hi); }
.form__submit[disabled] { background: rgba(61, 255, 0, 0.35); cursor: default; }
.form__note {
  font-size: 13px;
  line-height: 1.5;
  color: rgba(242, 243, 240, 0.42);
}
.form__note.is-sent { color: var(--accent); }

/* ============================================================
   FOOTER
   ============================================================ */

.site-footer {
  padding: clamp(50px, 8vh, 90px) var(--pad-x) clamp(30px, 4vh, 44px);
  border-top: 1px solid var(--line-soft);
  background: var(--bg);
  display: flex;
  flex-direction: column;
  gap: clamp(34px, 6vh, 60px);
}
.footer__statement {
  font-size: clamp(30px, 6vw, 96px);
  line-height: 0.9;
  letter-spacing: -0.02em;
  max-width: 22ch;
}
.footer__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
  border-top: 1px solid var(--line);
  padding-top: clamp(20px, 3vh, 30px);
}
.footer__brand { display: flex; flex-direction: column; gap: 12px; }
.footer__mark { height: 22px; width: auto; fill: rgba(242, 243, 240, 0.75); }
.footer__meta {
  font-family: var(--cond);
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-40);
}
.footer__nav {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(16px, 2vw, 30px);
  font-family: var(--cond);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.footer__nav a { color: var(--ink-55); }
.footer__nav a:hover { color: var(--accent); }
.footer__nav a.accent { color: var(--accent); }
.footer__nav a.accent:hover { color: var(--accent-hi); }

/* ============================================================
   ACCENTS
   The display face is set very tight, which is right for English
   — all caps, no marks above the cap height. French and Spanish
   put an accent up there, and at 0.84 it lands on the line above.
   These are the multi-line headlines where that can happen; the
   English page keeps its original spacing.
   ============================================================ */

html[lang="fr"] .hero__title,
html[lang="es"] .hero__title { line-height: 0.95; }

html[lang="fr"] .approach__title,
html[lang="es"] .approach__title,
html[lang="fr"] .tailored__title,
html[lang="es"] .tailored__title,
html[lang="fr"] .faq__title,
html[lang="es"] .faq__title,
html[lang="fr"] .footer__statement,
html[lang="es"] .footer__statement,
html[lang="fr"] .apply__title,
html[lang="es"] .apply__title { line-height: 0.96; }

/* ============================================================
   SCROLL CHOREOGRAPHY
   Applied only when JS is running, so a no-JS visitor sees
   the full page rather than a blank one.
   ============================================================ */

.js [data-reveal] {
  opacity: 0;
  transition: opacity 0.85s var(--ease), transform 0.85s var(--ease);
}
.js [data-reveal="up"] { transform: translateY(34px); }
.js [data-reveal].is-in { opacity: 1; transform: none; }

.js [data-imgslot] {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1.05s var(--ease);
}
.js [data-imgslot] img {
  transform: scale(1.12);
  transition: transform 1.6s var(--ease);
}
.js [data-imgslot].is-in { clip-path: inset(0 0 0 0); }
.js [data-imgslot].is-in img { transform: scale(1); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .js [data-reveal] { opacity: 1; transform: none; }
  .js [data-imgslot] { clip-path: none; }
  .js [data-imgslot] img { transform: none; }
  .hero__stripes { animation: none; }
}