/* Vector & Val overrides for the mirrored site. Site files are untouched; everything ours is in this folder. */

/* ---------- brand fonts (Cinzel = headings, Jost = text, DM Mono = data) */
@font-face { font-family: 'Cinzel'; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/brand-1.ttf) format('truetype'); }
@font-face { font-family: 'Cinzel'; font-style: normal; font-weight: 500; font-display: swap; src: url(fonts/brand-2.ttf) format('truetype'); }
@font-face { font-family: 'DM Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/brand-3.ttf) format('truetype'); }
@font-face { font-family: 'Jost'; font-style: normal; font-weight: 300; font-display: swap; src: url(fonts/brand-4.ttf) format('truetype'); }
@font-face { font-family: 'Jost'; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/brand-5.ttf) format('truetype'); }
@font-face { font-family: 'Jost'; font-style: normal; font-weight: 500; font-display: swap; src: url(fonts/brand-6.ttf) format('truetype'); }

/* ---------- navbar: menu button top left (the site's own phone menu, now at every width), mark + wordmark lockup centred */
.navbarBlock.navbarBlock { margin-top: 0; }                                   /* the menu panel must start at the very top, as on the phone layout */
.navbarBlock__left.navbarBlock__left, .navbarBlock__right.navbarBlock__right { margin-top: 1.5714285714rem; }   /* slimmer bar: 22 px from the top instead of 40 */
.navbarBlock__menu .menu__links.menu__links { margin-top: 84px; margin-bottom: 22px; }                          /* and a shorter drop-down */
.navbarBlock__menu .menu__links .links__link.links__link, .navbarBlock__menu .menu__links .links__lab.links__lab { font-size: 44px; }
.navbarBlock { --navbar-fg: #0d0b12; }                                                                          /* brand black (Obsidian) for menu, lines and logo on light pages; the site's own toggle switches --navbar-fg to pearl over dark sections */
.navbarBlock__menu, .menuButton, .vv-brand { color: var(--navbar-fg); }
.navbarBlock__menu.navbarBlock__menu { color: #0d0b12; }                                                        /* the drop-down panel is always pearl, so its entries stay black */
.navbarBlock__right.navbarBlock__right { z-index: 6; }
.navbarBlock__left .left__title.left__title { display: none; }               /* the separate top-left mark is gone */
.navbarBlock__right .right__links.right__links { display: none !important; } /* the three options leave the top right */
.navbarBlock__right .right__buttons.right__buttons { display: flex; grid-column: 1 / 3; justify-self: start; align-self: start; margin-left: 1.4285714286rem; margin-top: -.9285714286rem; gap: 11px; }
.menuButton.menuButton { background: transparent; border-radius: 0; }                 /* plain hamburger lines, no box behind them */
.menuButton__cross.menuButton__cross { background: transparent; }
.menuButton__default.menuButton__default { width: 22px; height: 15px; }               /* the site drew the lines at 12 x 8 px inside its box; a touch larger without it */
.menuButton__default .default__line.default__line, .menuButton__cross .cross__line.cross__line { stroke: var(--navbar-fg, #0d0b12); transition: stroke .4s ease; }   /* doubled class: the site's scoped rule pins these to one colour */
.navbarBlock__menu.navbarBlock__menu { display: grid; position: absolute; left: 0; right: 0; background: #f4f4f4; border-radius: 0 0 20px 20px; z-index: 5; transform: translateY(-100%); }
.navbarBlock__menu .menu__infos.menu__infos { display: none; }               /* his tagline, already removed from the bar */
.navbarBlock__menu .menu__links .links__lab.links__lab { display: none !important; }   /* "Lab" removed from the menu */
.vv-mark__svg { display: block; height: 1.4285714286rem; width: auto; }
.navbarBlock__left .vv-brand { grid-row: 1; grid-column: 1 / -1; justify-self: center; align-self: start; margin: 0 auto; display: flex; align-items: center; gap: .5714285714rem; line-height: 0; pointer-events: auto; cursor: pointer; color: var(--navbar-fg); transition: color .4s ease; }
.vv-brand__svg { display: block; height: 1rem; width: auto; }

/* ---------- menu in the brand text face */
.navbarBlock__right .right__links .mainButton, .navbarBlock__right .right__links .navLabButton { font-family: 'Jost', sans-serif; font-weight: 400; font-size: 15px; letter-spacing: .03em; }
.navbarBlock__menu .menu__links .links__link .textComponent__content, .navbarBlock__menu .menu__links .links__lab .textComponent__content { font-family: 'Cinzel', serif; font-weight: 500; }
.navbarBlock__menu .menu__links .links__contact .textComponent__content, .navbarBlock__menu .menu__infos { font-family: 'Jost', sans-serif; }

/* ---------- home hero: the bracelet turns behind the giant statement as you scroll (frame sequence drawn on a canvas by overrides.js) */
.vv-turn { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
.page > .webglBg.heroBlock .beeBlock { position: relative; z-index: 1; }

/* ---------- footer on phones and tablets: no full-screen block above the giant title, so the white gap goes */
@media screen and (max-width: 1025px) {
  .footerBlock.footerBlock, .webglBg__content.isFooter.isFooter { min-height: 0; }
  .beeBlock.isFooter.isFooter { height: auto; min-height: 0; padding-top: 4.5rem; }
  .footerBlock__bottom.footerBlock__bottom { margin-top: 2.5rem; }
  .vv-apply { margin-top: 1.8rem; }
}

/* ---------- footer story panel (the old credits pop-up): brand purple with pearl type, on every page theme */
.footerBlock__popup.footerBlock__popup .popup__transitionWrapper--outer.popup__transitionWrapper--outer { background: #0d0b12 !important; color: #f4f3f6 !important; }
.footerBlock__popup .popup__content .content__left.content__left, .footerBlock__popup .popup__content .content__right.content__right { color: #f4f3f6; }
.footerBlock__popup .popup__top .top__cross.top__cross { background: #f4f3f6; }
.footerBlock__popup .popup__top .top__cross .svg-cross rect { fill: #0d0b12; }
.popup__content .content__left .left__content .content__textWrapper .wrapper__text .text__link:before,
.popup__content .content__left .left__content .content__textWrapper .wrapper__text .text__link:after { background: #f4f3f6; }
.footerBlock__popup .popup__top .top__infos, .footerBlock__popup .popup__content .content__left, .footerBlock__popup .popup__content .content__right { font-family: 'Jost', sans-serif; }

/* ---------- footer sign-up form (e-mail + mobile, "Apply") under the giant title */
.vv-apply { width: calc(100% - 5.7142857143rem); margin: 2.5rem auto 0; font-family: 'Jost', sans-serif; color: #0d0b12; text-align: center; }
.vv-apply__lead { font-size: 15px; letter-spacing: .02em; margin: 0 0 1.1rem; }
.vv-apply__row { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-end; gap: 1.7142857143rem; }
.vv-apply__field { display: flex; flex-direction: column; align-items: flex-start; gap: .35rem; width: 17rem; max-width: 100%; text-align: left; }
.vv-apply__field span { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; opacity: .7; }
.vv-apply__field input { width: 100%; font: 400 16px/1.4 'Jost', sans-serif; color: #0d0b12; background: transparent; border: 0; border-bottom: 1px solid rgba(13, 11, 18, .45); padding: .35rem 0; outline: none; transition: border-color .3s ease; -webkit-user-select: text; user-select: text; }
.vv-apply__field input::placeholder { color: rgba(13, 11, 18, .35); }
.vv-apply__field input:focus { border-bottom-color: #0d0b12; }
.vv-apply__btn { font: 500 14px/1 'Jost', sans-serif; letter-spacing: .06em; text-transform: uppercase; color: #f4f3f6; background: #0d0b12; border: 0; border-radius: 2rem; padding: .9rem 1.8rem; cursor: pointer; transition: background .3s ease; }
.vv-apply__btn:hover { background: #2b2931; }
.vv-apply__btn:disabled { opacity: .55; cursor: default; }
.vv-apply__hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }
.vv-apply__note { min-height: 1.3em; margin: .9rem 0 0; font-size: 13px; opacity: .8; }
.vv-apply__note.is-error { color: #a4322f; opacity: 1; }
.footerBlock .vv-apply { position: relative; z-index: 3; pointer-events: auto; }

/* ---------- sign-up form on the purple footers (home + About): pearl fields, pearl button */
.footerBlock.green .vv-apply, .footerBlock.white .vv-apply { color: #f4f3f6; }
.footerBlock.green .vv-apply__field input, .footerBlock.white .vv-apply__field input { color: #f4f3f6; border-bottom-color: rgba(244, 243, 246, .5); }
.footerBlock.green .vv-apply__field input::placeholder, .footerBlock.white .vv-apply__field input::placeholder { color: rgba(244, 243, 246, .45); }
.footerBlock.green .vv-apply__field input:focus, .footerBlock.white .vv-apply__field input:focus { border-bottom-color: #f4f3f6; }
.footerBlock.green .vv-apply__btn, .footerBlock.white .vv-apply__btn { color: #0d0b12; background: #f4f3f6; }
.footerBlock.green .vv-apply__btn:hover, .footerBlock.white .vv-apply__btn:hover { background: #ffffff; }
.footerBlock.green .vv-apply__note.is-error, .footerBlock.white .vv-apply__note.is-error { color: #ffd2cf; }

/* ---------- bookshelf statement ("Focus on innovation…") in Cinzel */
.webglSectionBlock__text.webglSectionBlock__text { font-family: 'Cinzel', serif; font-weight: 500; font-variation-settings: normal; font-size: 6.6vw; line-height: 1; letter-spacing: .01em; }
.webglSectionBlock__textWrapper .textWrapper__inner.textWrapper__inner { max-width: 88vw; }   /* Cinzel runs wider than the site's face, so the lines need more room */
.webglSectionBlock__text .text__line.text__line { white-space: nowrap; }

/* ---------- About hero: no full-screen block above the title, so it follows the corner texts closely */
.page > .webglBg.heroBlock:has(.heroBlock__top .top__center) .beeBlock.beeBlock { height: auto; min-height: 0; padding-top: 6.5rem; padding-bottom: 4rem; }

/* ---------- About card ("What every job includes"): deep purple on the purple page, pearl type, brand faces */
.cardBlock.cardBlock { background: #16141b; color: #f4f3f6; border: 1px solid rgba(244, 243, 246, .28); }
.cardBlock .cardBlock__top.cardBlock__top { display: none; }                                    /* the "+6 years exp." line and the "(4)" count are gone */
.cardBlock__content .content__title.content__title { font-family: 'Cinzel', serif; font-weight: 500; color: #f4f3f6; padding-top: 2.8571428571rem; width: 22rem; line-height: 1.1; }
.cardBlock__content .content__jobs.content__jobs { margin-top: 3.5rem; }
.cardBlock__content .content__jobs .jobs__job .job__date.job__date, .cardBlock__content .content__jobs .jobs__job .job__name.job__name, .cardBlock__content .content__jobs .jobs__job .job__roles.job__roles { font-family: 'Jost', sans-serif; color: #f4f3f6; }
.cardBlock__content .content__jobs .jobs__job .job__date.job__date { min-width: 6.5rem; opacity: .75; }
.cardBlock__content .content__jobs .jobs__job .job__name.job__name { font-weight: 500; }
.cardBlock__content .content__jobs .jobs__job .job__roles.job__roles { opacity: .78; }
.cardBlock__content .content__jobs .jobs__job .job__line.job__line { background: #f4f3f6; opacity: .22; }
.cardBlock__content .content__jobs .jobs__job .job__current.job__current { display: none; }     /* the "Current" tag the site pins to the second row */

/* ---------- hero in the brand faces: giant statement in Cinzel, corner texts in Jost */
.beeBlock__container .container__titles--default .titles__wrapper .wrapper .title.title,
.beeBlock__container .container__titles--reveal .titles__wrapper .wrapper .title.title { font-family: 'Cinzel', serif; font-weight: 500; font-variation-settings: normal; font-size: 9.6vw; line-height: 1; letter-spacing: .01em; }
@media (max-width: 720px) { .beeBlock__container .container__titles--default .titles__wrapper .wrapper .title.title, .beeBlock__container .container__titles--reveal .titles__wrapper .wrapper .title.title { font-size: 11vw; } }
.heroBlock__top .top__city, .heroBlock__top .top__infos .infos__text, .heroBlock__top .top__infos .infos__text p, .heroBlock__top .agencies__text, .agencyLink { font-family: 'Jost', sans-serif; font-weight: 400; font-size: 15px; letter-spacing: .02em; }
.beeBlock .indication { font-family: 'Jost', sans-serif; }
.heroBlock__top .top__infos.top__infos { display: none; }   /* right-hand corner text removed, left blank on request */

/* ---------- the bee is gone: the bundle keeps its meshes hidden (its canvas layer stays, it also carries the loader mask and page-transition wipe); speech bubbles and the "(Click to feed the bee)" line: */
.beeTextIndication { display: none !important; }
.beeBlock .indication { display: none !important; }

/* ---------- loader: mark + wordmark in place of the name and tagline (loader timing is the site's original: uS=1.5, u5=2.25) */
.loaderBlock__container .container__title, .loaderBlock__container .container__infos { height: 2.2857142857rem; overflow: hidden; display: flex; align-items: center; }
.loaderBlock .title__content.vv-loader-mark, .loaderBlock .infos__content.vv-loader-brand { line-height: 0; }
.loaderBlock .title__content .vv-mark__svg { height: 1.7142857143rem; }
.loaderBlock .infos__content .vv-brand__svg { height: 1rem; }

/* ---------- removed: tagline next to the logo, sound button (desktop + phone), "click to enable sound" bubble */
.navbarBlock__left .left__infos { display: none !important; }
.soundButton { display: none !important; }
.cursorIndication__text--array { display: none !important; }
body.awaiting-sound-click, body.awaiting-sound-click #canvas-app, body.awaiting-sound-click #vue-app { cursor: auto !important; }

/* ---------- stripped sections: project rows 1, 2, 4, 5, 6 and the whole archives list (rows 7-29). Row 3 and the
   bookshelf statement stay. The wrapper's element order is 1,2,3,statement,4,5,6. Nothing is put in their place. */
.page > .wrapper > .projectBlock:nth-child(1),
.page > .wrapper > .projectBlock:nth-child(2),
.page > .wrapper > .projectBlock:nth-child(5),
.page > .wrapper > .projectBlock:nth-child(6),
.page > .wrapper > .projectBlock:nth-child(7),
.page > .archivesBlock { display: none !important; }
.page > .webglBg.introBlock:has(.introBlock__bottom) { display: none !important; }   /* the "Bonjour…" section with the showreel thumbnail, removed outright */
.page .contentBlock, .page > .webglBg:has(.contentBlock) { display: none !important; } /* About: the "Throughout my various…" block with awards and clients, removed outright */

/* ---------- footer story panel: brand type (site's scoped rules outrank a single class), and a compact phone layout */
.footerBlock__popup .popup__top .top__infos.top__infos { font-family: 'Cinzel', serif; font-weight: 500; letter-spacing: .08em; }
.footerBlock__popup .popup__content .content__right.content__right { font-family: 'Jost', sans-serif; font-weight: 300; line-height: 1.25; }
.footerBlock__popup .popup__content .content__left.content__left { font-family: 'Jost', sans-serif; font-weight: 400; }
@media screen and (max-width: 700px) {
  .footerBlock__popup.footerBlock__popup, .footerBlock__popup .popup__transitionWrapper--outer.popup__transitionWrapper--outer,
  .footerBlock__popup .popup__transitionWrapper--outer .popup__transitionWrapper--inner.popup__transitionWrapper--inner { height: auto; max-height: 85dvh; }
  .footerBlock__popup .popup__top.popup__top { padding: 22px 24px 18px; }
  .footerBlock__popup .popup__content.popup__content { gap: 26px; padding: 0 24px 40px; }
  .footerBlock__popup .popup__content .content__right.content__right { font-size: 21px; line-height: 1.3; }
  .footerBlock__popup .popup__content .content__left.content__left { font-size: 13px; line-height: 1.45; }
  .footerBlock__popup .popup__content .content__left .left__content.left__content { gap: 10px; }
}

/* ---------- home page: dark purple page below the 3D room, pearl type. The room keeps its own light scene and purple corner texts. */
.webglBg--home.webglBg--home { background-color: #0d0b12; }
.footerBlock.white.footerBlock:before { background: #0d0b12; }
.heroBlock.heroBlock, .projectBlock.projectBlock, .footerBlock.white.footerBlock, .webglSectionBlock.webglSectionBlock, .webglSectionBlock__text.webglSectionBlock__text { color: #f4f3f6; }
.beeBlock__container .container__titles--default .title.title, .beeBlock__container .container__titles--reveal .title.title { color: #f4f3f6; }
.projectBlock .projectBlock__line, .projectBlock .line, .footerBlock.white .bottom__line { background-color: rgba(244, 243, 246, .3); }
.footerBlock.white .footerBlock__bottom .networks__link:before { background: #f4f3f6; }

/* ---------- row 3: the running project number is meaningless with one row left */
.projectBlock .title__number { display: none !important; }

/* ---------- navbar colour follows the surface under it, at every width (overrides.js sets vv-on-light / vv-on-dark) */
.navbarBlock.vv-nav.vv-on-light.vv-on-light { --navbar-fg: #0d0b12; }
.navbarBlock.vv-nav.vv-on-dark.vv-on-dark { --navbar-fg: #f4f3f6; }
.vv-turn-progress, .vv-swipe { display: none; }

/* ---------- no header bar: the logo and menu button float over the page and stay while scrolling. In the pearl state a
   soft shadow keeps them legible where photographs pass underneath. */
.navbarBlock.vv-nav.vv-on-dark .vv-brand, .navbarBlock.vv-nav.vv-on-dark .menuButton { filter: drop-shadow(0 1px 10px rgba(6, 5, 9, .35)); }
@media (max-width: 1025px) {
  html { -webkit-tap-highlight-color: transparent; }
}

/* =====================================================================================================================
   PHONES (<= 767 px): the mobile edition. Brand type only (Cinzel for display, Jost for text), a 22 px gutter,
   11 px letter-spaced overlines, and every tap target at least 44 px.
   ===================================================================================================================== */
@keyframes vvGlintT { from { transform: translateX(-147%); } to { transform: translateX(269%); } }   /* the glint as a transform (compositor), same path as the old background-position -120% -> 220% */

@media (max-width: 767px) {

  /* ---------- hero line over the 3D room (home + About): Jost, and a scroll cue of two chevrons lighting in turn */
  .headerBlock__content.headerBlock__content { width: 192px; margin-left: 22px; margin-bottom: 42px; }   /* measured: at 26 px Jost, 190-194 px keeps both three-line breaks ("Driven by detail. / Obsessed with / seamless motion.", "Bringing depth / and personality / to every creation.") */
  .headerBlock__content .content__description.content__description { font-family: 'Jost', sans-serif; font-weight: 400; font-size: 26px; line-height: 1.14; letter-spacing: -.005em; }
  .headerBlock__content .content__scrollIndication.content__scrollIndication { display: flex; align-items: center; gap: 14px; margin-top: 24px; font-family: 'Jost', sans-serif; font-weight: 500; font-size: 11px; line-height: 1; letter-spacing: .26em; text-transform: uppercase; }
  .headerBlock__content .content__scrollIndication.content__scrollIndication::after { content: ""; width: 12px; height: 16px; margin: -2.5px 0; flex: none; background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2012%2016%22%20fill%3D%22none%22%20stroke%3D%22%230d0b12%22%20stroke-width%3D%221.2%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M2%202.5%206%206.5l4-4%22%3E%3Canimate%20attributeName%3D%22opacity%22%20values%3D%22.18%3B1%3B.18%22%20keyTimes%3D%220%3B.35%3B1%22%20dur%3D%221.6s%22%20repeatCount%3D%22indefinite%22%2F%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M2%208.5%206%2012.5l4-4%22%3E%3Canimate%20attributeName%3D%22opacity%22%20values%3D%22.18%3B1%3B.18%22%20keyTimes%3D%220%3B.35%3B1%22%20dur%3D%221.6s%22%20begin%3D%22.28s%22%20repeatCount%3D%22indefinite%22%2F%3E%3C%2Fpath%3E%3C%2Fsvg%3E") center / contain no-repeat; }   /* two chevrons lighting in turn (SMIL inside the SVG) */

  /* ---------- home statement: the stage holds still while the bangle makes one full turn under the thumb */
  .page > .webglBg.heroBlock .heroBlock__top .top__city.top__city { width: auto; font-family: 'Jost', sans-serif; font-weight: 500; font-size: 11px; line-height: 1.9; letter-spacing: .26em; text-transform: uppercase; opacity: .82; }
  .page > .webglBg.heroBlock .heroBlock__top .top__star.top__star { font-size: 26px; opacity: .5; }
  .page > .webglBg.heroBlock:has(.top__city) .beeBlock__container .container__titles--default .titles__wrapper .wrapper .title.title,
  .page > .webglBg.heroBlock:has(.top__city) .beeBlock__container .container__titles--reveal .titles__wrapper .wrapper .title.title { font-size: 12.4vw; line-height: .98; }

  /* ---------- selected work: tall 4:5 tiles, an overline, the line in Cinzel, and a swipe cue until the first swipe */
  .projectBlock__slider .slider__media .media__image.media__image { width: 76vw; height: 95vw; }
  .webglBg.projectBlock .projectBlock__informations.projectBlock__informations { position: relative; padding-top: 22px; }
  .projectBlock__informations .informations__top .top__title.top__title { flex-direction: column; gap: 12px; margin-bottom: 16px; }
  .projectBlock__informations .informations__top .top__title .title__name.title__name { font-family: 'Jost', sans-serif; font-weight: 500; font-size: 11px; line-height: 1; letter-spacing: .26em; text-transform: uppercase; opacity: .75; }
  .projectBlock__informations .informations__top .top__title .title__type.title__type { font-family: 'Cinzel', serif; font-weight: 500; font-size: 26px; line-height: 1.12; letter-spacing: .01em; opacity: 1; text-wrap: balance; }
  .projectBlock__informations .informations__top .top__team.top__team { grid-column: 1 / -1; transform: none; display: flex; align-items: baseline; gap: 10px; }
  .projectBlock__informations .informations__top .top__team .team__text, .projectBlock__informations .informations__top .top__team .mainButton { font-family: 'Jost', sans-serif; font-size: 14px; letter-spacing: .01em; }
  .projectBlock__informations .informations__top .top__team .team__text { opacity: .6; }
  .vv-swipe { display: flex; align-items: center; gap: 12px; position: absolute; right: 22px; top: 22px; font: 500 11px/1 'Jost', sans-serif; letter-spacing: .26em; text-transform: uppercase; color: #f4f3f6; opacity: .75; transition: opacity .6s ease; pointer-events: none; }
  .vv-swipe i { position: relative; overflow: hidden; width: 34px; height: 1px; background: rgba(244, 243, 246, .28); }
  .vv-swipe i::after { content: ""; position: absolute; left: 0; top: 0; width: 45%; height: 100%; background: linear-gradient(90deg, transparent, #f4f3f6, transparent); transform: translateX(-147%); animation: vvGlintT 2s cubic-bezier(.55, 0, .25, 1) infinite paused; }
  .vv-swipe.vv-inview i::after { animation-play-state: running; }   /* overrides.js: only while the cue is on screen */
  html.vv-swiped .vv-swipe i::after { animation: none; }
  html.vv-swiped .vv-swipe { opacity: 0; }

  /* ---------- bookshelf statement: larger, and set on a soft shadow so it reads over the shelves */
  .webglSectionBlock__text.webglSectionBlock__text { font-size: 8.6vw; line-height: 1.06; }
  .webglSectionBlock__textWrapper .textWrapper__inner.textWrapper__inner { max-width: 90vw; }
  .webglSectionBlock__textWrapper.webglSectionBlock__textWrapper:has(.webglSectionBlock__text)::before { content: ""; position: absolute; left: 50%; top: 50%; width: 150vw; height: 250%; transform: translate(-50%, -50%); background: radial-gradient(closest-side, rgba(8, 7, 11, .58), rgba(8, 7, 11, .32) 45%, rgba(8, 7, 11, 0)); pointer-events: none; z-index: -1; }
  .webglSectionBlock__text .webglSection-char { text-shadow: 0 2px 20px rgba(6, 5, 9, .4); }

  /* ---------- About: corner lines as overlines, the statement clear of the photo, Jost for the story */
  .heroBlock__top .top__left.top__left, .heroBlock__top .top__right.top__right { width: auto; font-family: 'Jost', sans-serif; font-weight: 500; font-size: 11px; line-height: 1.7; letter-spacing: .22em; text-transform: uppercase; opacity: .82; }
  .page > .webglBg.heroBlock:has(.heroBlock__top .top__center) .beeBlock.beeBlock { padding-top: 104px; padding-bottom: 44px; }
  .page > .webglBg.heroBlock:has(.heroBlock__top .top__center) .beeBlock__container.beeBlock__container { margin: 0; padding: 0; }
  .page > .webglBg.introBlock.introBlock { margin-top: 0; }   /* the photo was pulled 140 px up under "Who are these fellows" */
  .page .introBlock .introBlock__texts .textComponent__content.textComponent__content { font-family: 'Jost', sans-serif; font-weight: 300; font-size: 18px; line-height: 1.45; }
  .page .introBlock .introBlock__infos p.left__place, .page .introBlock .introBlock__infos p.left__date, .page .introBlock .introBlock__infos p.infos__credit { font-family: 'Jost', sans-serif; font-size: 12px; line-height: 1.3; letter-spacing: .04em; }
  .cardBlock .cardBlock__content .content__jobs .jobs__job .job__date.job__date { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; }
  .cardBlock .cardBlock__content .content__jobs .jobs__job .job__name.job__name { font-size: 18px; }
  .cardBlock .cardBlock__content .content__jobs .jobs__job .job__roles.job__roles { font-size: 14px; line-height: 1.45; font-weight: 300; }

  /* ---------- footer: stacked form, full-width button, e-mail on its own line, fine print in overlines */
  .beeBlock.isFooter.isFooter { padding-top: 88px; }
  .vv-apply.vv-apply { width: auto; margin: 36px 22px 0; text-align: left; }
  .vv-apply .vv-apply__lead { text-align: center; font-size: 16px; margin-bottom: 26px; letter-spacing: .01em; }
  .vv-apply .vv-apply__row { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 22px; }
  .vv-apply .vv-apply__field { width: 100%; gap: 4px; }
  .vv-apply .vv-apply__field span { font-size: 11px; font-weight: 500; letter-spacing: .22em; }
  .vv-apply .vv-apply__field input { font-size: 17px; padding: 12px 0 11px; }
  .vv-apply .vv-apply__btn { width: 100%; min-height: 54px; margin-top: 10px; font-size: 13px; letter-spacing: .24em; }
  .vv-apply .vv-apply__note { text-align: center; }
  .footerBlock .footerBlock__bottom.footerBlock__bottom { flex-wrap: wrap; align-items: flex-end; justify-content: space-between; margin: 60px 22px 0; padding-bottom: calc(26px + env(safe-area-inset-bottom)); }
  .footerBlock .footerBlock__bottom .bottom__networks.bottom__networks { order: -1; flex: 1 0 100%; margin: 0 0 52px; gap: 0; }
  .footerBlock .footerBlock__bottom .bottom__networks .networks__link.networks__link { font-family: 'Jost', sans-serif; font-size: 18px; letter-spacing: .01em; padding-bottom: 4px; border-bottom: 1px solid currentColor; border-bottom-color: rgba(244, 243, 246, .35); }
  .footerBlock .footerBlock__bottom .bottom__credits .credits__button.credits__button, .footerBlock .footerBlock__bottom .bottom__copyright.bottom__copyright { font-family: 'Jost', sans-serif; font-weight: 500; font-size: 11px; line-height: 1; letter-spacing: .22em; text-transform: uppercase; }
  .footerBlock .footerBlock__bottom .bottom__credits.bottom__credits { margin: -14px; padding: 14px; }
}

/* ---------- phones whose browser supports overflow: clip: the pinned stage. The app wrapper was a scroll container
   (overflow-y: auto) that stops sticky elements from holding; clip keeps its horizontal clipping without that.
   Body too: the site's overflow-x: hidden makes it a scroll container while the intro holds html at overflow: hidden
   (Lenis's lenis-stopped). Safari binds the sticky stage to body then and keeps that after the intro, so on an iPhone
   the stage scrolled away, leaving a long empty purple run, until some later relayout (~30 s). The block needs svh and
   :has() as well; overrides.js makes the same test (PIN_Q) before drawing for a pinned stage. */
@supports (overflow: clip) and (height: 100svh) and selector(:has(a)) {
  @media (max-width: 767px) {
    main.app.app, body:not(#vv) { overflow-x: clip; overflow-y: visible; }
    .page > .webglBg.heroBlock:has(.top__city) { height: 200svh; padding-top: 0; }   /* the stage is held for one screen (was 1.5: 250svh) */
    .page > .webglBg.heroBlock:has(.top__city) > .vv-turn.vv-turn { position: sticky; top: 0; display: block; height: 100svh; margin-bottom: -100svh; }
    .page > .webglBg.heroBlock:has(.top__city) > .webglBg__content.heroBlock { position: sticky; top: 0; height: 100svh; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; }
    .page > .webglBg.heroBlock:has(.top__city) .heroBlock__top.heroBlock__top { margin-bottom: 0; padding-top: calc(74px + 2svh); grid-row-gap: 16px; }
    .page > .webglBg.heroBlock:has(.top__city) .beeBlock.beeBlock { height: auto; flex: none; justify-content: flex-end; padding-bottom: calc(6svh + 30px); }
    .page > .webglBg.heroBlock:has(.top__city) .beeBlock__container.beeBlock__container { padding: 0; margin: 0; }
    .vv-turn-progress { display: block; position: absolute; left: 50%; bottom: calc(3svh + 8px); width: 56px; height: 1px; margin-left: -28px; background: rgba(244, 243, 246, .2); overflow: hidden; }
    .vv-turn-progress i { display: block; height: 100%; background: #f4f3f6; transform: scaleX(var(--vv-p, 0)); transform-origin: 0 50%; }
  }
}