/* Visages_Lab — landing page styles. Base = iMac design (2240px canvas, Figma 2197:2167); each other
   device overrides it in css/bp-*.css (selectors prefixed html[data-bp="…"]). js/responsive.js picks
   the device and scales the page to the screen. Sections are marked with "N. Name" comments, as in
   index.html; values are Figma px. Same fonts, colours and type scale as visages.tech. */

@font-face {
  font-family: "Favorit";
  src: local("ABC Favorit Variable Trial"), url("../fonts/ABCFavoritVariable-Trial.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Favorit Mono";
  src: local("ABC Favorit Mono Variable Trial"), url("../fonts/ABCFavoritMonoVariable-Trial.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --page: #f1f1f1;
  --white: #ffffff;
  --black: #000000;
  --grey: #999999;
  --text-grey: #555555;
  --green: #63ff2b;
  --dark-green: #0f1f10;
  --sage: #c3dac7;
  --lime: #cef79e;
  --book: 350;
  --sans: "Favorit", "Helvetica Neue", Arial, sans-serif;
  --mono: "Favorit Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--page);
  color: var(--black);
  font-family: var(--sans);
  font-weight: var(--book);
  font-size: 16px;
  line-height: 24px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: none; }
/* images can't be grabbed and dragged with the mouse (Chrome, Safari; Firefox: "dragstart" in the script) */
img { -webkit-user-drag: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
p, h1, h2, h3, h4, ul, ol { margin: 0; font-weight: inherit; }
ul, ol { padding: 0; list-style: none; }
h3, h4 { font-size: inherit; line-height: inherit; }

/* Lenis smooth scroll (official lenis.css 1.3.7) */
html.lenis, html.lenis body { height: auto; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-smooth iframe { pointer-events: none; }
.lenis.lenis-autoToggle { transition-property: overflow; transition-duration: 1ms; transition-behavior: allow-discrete; }

.page { display: flex; flex-direction: column; gap: 60px; width: 100%; overflow: clip; }

/* ---------- Shared type ---------- */
.display {               /* Gros titres — 56/64, -2% */
  font-size: 56px;
  line-height: 64px;
  letter-spacing: -1.12px;
}
.mono {                  /* Mono — Favorit Mono 15/20, capitals */
  font-family: var(--mono);
  font-weight: var(--book);
  text-transform: uppercase;
  font-size: 15px;
  line-height: 20px;
  white-space: nowrap;
}

/* Green keyword tag (Mono 14/22) */
.tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 12px;
  border-radius: 5px;
  background: var(--green);
  color: var(--black);
  font-family: var(--mono);
  font-weight: var(--book);
  text-transform: uppercase;
  font-size: 14px;
  line-height: 22px;
  white-space: nowrap;
}

/* Visages_Lab logo (header and footer): mark + Favorit Mono Medium 22/20 */
.logo {
  width: 176px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-weight: 500;
  font-size: 22px;
  line-height: 20px;
  text-transform: uppercase;
  white-space: nowrap;
}
.logo svg { flex: none; width: 22.673px; height: 21.558px; display: block; }

/* Text + green square arrow (Figma "Link - Light") */
.arrow-btn { display: inline-flex; align-items: center; gap: 15px; }
.arrow-btn img { width: 26px; height: 26px; transform: rotate(-90deg); }
/* same, on a white 90 % card ("Discover the Visages technology", "Send") */
.link-btn,
.form__submit {
  padding: 14px 18px;
  border-radius: 8px;
  background: rgba(255,255,255,.9);
  color: var(--black);
  transition: background-color .2s;
}
.link-btn:hover,
.form__submit:not(:disabled):hover { background: var(--white); }

/* Small square "+" / "−" button */
.sq {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 5px;
  background: var(--page);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
.sq img { width: 10px; height: 10px; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 18px;
  border-radius: 5px;
  font-size: 16px;
  line-height: 24px;
  white-space: nowrap;
  transition: opacity .2s, background-color .25s ease;
}
.btn--lime { background: var(--lime); color: var(--dark-green); }
.btn--lime:hover { opacity: .85; }
.btn--light { background: var(--white); color: var(--black); }
.btn--light:hover { background: #e6e6e6; }

/* ---------- 1. Hero + header ---------- */
.top { display: flex; flex-direction: column; }
.hero {
  height: 1120px;
  display: flex;
  flex-direction: column;
  background: var(--dark-green);
  color: var(--white);
}
.nav { display: flex; align-items: flex-start; justify-content: space-between; padding: 30px; }
.nav__links { display: flex; gap: 30px; align-items: flex-start; }
.nav__links a { padding: 8px 12px; border-radius: 5px; transition: background-color .2s; }
.nav__links a:hover { background: rgba(255,255,255,.12); }

/* Menu button + drop-down (iPad portrait, iPhone; hidden elsewhere via data-hide). The open menu is
   not in Figma: a simple card in the style of the header bar, as on visages.tech. */
.nav { position: relative; }
.nav__burger { position: relative; flex: none; width: 36px; height: 36px; }
.nav__burger img { position: absolute; inset: 0; width: 36px; height: 36px; transition: opacity .25s ease; }
.nav__burger .close,
.nav.is-open .nav__burger .open { opacity: 0; }
.nav.is-open .nav__burger .close { opacity: 1; }
.nav__menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  padding: 5px 20px;
  border-radius: 8px;
  background: rgba(255,255,255,.92);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  color: var(--black);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity .25s ease, transform .35s cubic-bezier(.65, 0, .25, 1), visibility 0s .35s;
}
.nav.is-open .nav__menu { opacity: 1; visibility: visible; transform: none; transition: opacity .25s ease, transform .35s cubic-bezier(.65, 0, .25, 1), visibility 0s; }
.nav__menu a { display: flex; align-items: center; min-height: 52px; font-size: 14px; line-height: 22px; }
.nav__menu a + a { border-top: .5px solid rgba(0,0,0,.15); }
.nav__menu .arrow-btn { justify-content: space-between; }

.hero__main {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 30px 30px;
}
/* Figma: image 1120 × 994 (full height of the area), text column 1060 */
.hero__media { flex: none; width: 1120px; align-self: stretch; border-radius: 8px; overflow: hidden; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; }
.hero__side { flex: 1 1 0; min-width: 0; align-self: stretch; display: flex; flex-direction: column; }
.hero__center { flex: 1 1 0; min-height: 0; display: flex; align-items: center; justify-content: center; }
.hero__content { width: 580px; display: flex; flex-direction: column; gap: 40px; }
.hero__text { display: flex; flex-direction: column; gap: 30px; }
.hero__text h1 { white-space: nowrap; }
.hero__text p { height: 43px; display: flex; align-items: center; color: rgba(255,255,255,.7); }
.hero__actions { display: flex; gap: 15px; align-items: center; }
.hero__awards { display: flex; align-items: center; justify-content: flex-end; gap: 16px; }
.hero__awards img { width: 41px; height: 41px; }

/* ---------- 2. Trusted by ----------
   In Figma the row runs past the right edge of the page (last logo cut off): the logos scroll
   from right to left in a loop (the list is written twice in the HTML). At rest — and for visitors
   who asked to reduce motion — they sit exactly where Figma puts them. They fade out over the
   90px gap before reaching the "Trusted by" tag. */
.trusted {
  --gap: 90px;                    /* space between the tag and the logos, and between logos */
  --s: 1;                         /* logo size (1 = iMac) */
  height: 133px;
  display: flex;
  align-items: center;
  padding-left: 30px;
  overflow: hidden;
}
.trusted__tag { flex: none; padding: 8px 12px; border-radius: 5px; background: var(--white); color: var(--black); }
.trusted__track {
  flex: 1 1 0;
  min-width: 0;
  align-self: stretch;
  display: flex;
  align-items: center;
  padding-left: var(--gap);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--gap));
          mask-image: linear-gradient(90deg, transparent, #000 var(--gap));
}
.trusted__list {
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--gap);
  padding-right: var(--gap);      /* = gap, so that -50% lands exactly on the second copy */
  animation: trusted-scroll 60s linear infinite;
}
@keyframes trusted-scroll { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .trusted__list { animation: none; } }
.trusted__logo { flex: none; position: relative; overflow: hidden; }
.trusted__logo img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; }
/* box size and image framing of each logo, as in Figma */
.trusted__logo--laclaree { width: calc(156px * var(--s)); height: calc(43px * var(--s)); }
.trusted__logo--laclaree img { left: 2.35%; width: 95.3%; }
.trusted__logo--pulse { width: calc(150px * var(--s)); height: calc(72px * var(--s)); }
.trusted__logo--pulse img  { height: 139.78%; }
.trusted__logo--microoled { width: calc(236px * var(--s)); height: calc(28px * var(--s)); }
.trusted__logo--oculaudio { width: calc(178px * var(--s)); height: calc(26px * var(--s)); }
.trusted__logo--essilor { width: calc(78px * var(--s)); height: calc(89px * var(--s)); }
.trusted__logo--skugga { width: calc(178px * var(--s)); height: calc(45px * var(--s)); }
.trusted__logo--engo { width: calc(107px * var(--s)); height: calc(24px * var(--s)); }
.trusted__logo--mclaren { width: calc(219px * var(--s)); height: calc(38px * var(--s)); }
.trusted__logo--mclaren img { top: -113.31%; height: 326.61%; }
.trusted__logo--trisottica { width: calc(210px * var(--s)); height: calc(57px * var(--s)); }

/* ---------- 3. One studio, from idea to object ---------- */
.studio { padding: 30px; display: flex; flex-direction: column; gap: 15px; }
.studio__title {
  padding: 90px 0;
  border-radius: 8px;
  background: var(--white);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 31.405px;
  text-align: center;
}
.studio__title h2 { white-space: nowrap; }
.studio__title p { width: 522px; color: rgba(0,0,0,.7); }
.studio__cards { min-height: 692.19px; display: flex; gap: 15px; }   /* section 1152px */
.offer {
  position: relative;
  isolation: isolate;
  flex: 1 1 0;
  min-width: 0;
  padding: 30px;
  border-radius: 6px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 40px;
  color: var(--white);
}
.offer__bg { position: absolute; inset: 0; z-index: -1; }
.offer__bg img { width: 100%; height: 100%; object-fit: cover; }
.offer__bg::after { content: ""; position: absolute; inset: 0; background: rgba(15,31,16,.35); transition: background-color .3s ease-out; }
.offer__top { display: flex; align-items: flex-start; justify-content: space-between; }
.offer__toggle { position: relative; }
.offer__toggle img { transition: opacity .3s ease-out; }
.offer__toggle .minus { position: absolute; opacity: 0; }
.offer__num {
  padding: 6px 14px;
  border-radius: 5px;
  background: var(--black);
  font-size: 15px;
  line-height: 22px;
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
/* closed text and open details share the bottom of the card: the one shown is in the flow, the other
   is laid over it (bottom-aligned) — so a card grows if its details need more room than the design
   gives (small screens: no open state in Figma there) */
.offer__bottom { position: relative; }
.offer__text,
.offer__details { transition: opacity .3s ease-out, visibility 0s; }
.offer__text { display: flex; flex-direction: column; gap: 15px; padding-right: 60px; }
.offer__text h3 { font-size: 40px; line-height: 46px; letter-spacing: -0.8px; }   /* Titres 40/46 */
/* Figma: the first card's text block is 157px high (the second one fits its text), so its title
   sits 48px higher */
.offer--collections .offer__text { height: 157px; }
.offer__details { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; display: flex; flex-direction: column; gap: 15px; }
.offer__details div { display: flex; align-items: flex-start; gap: 30px; padding-top: 20px; border-top: 1px solid rgba(153,153,153,.5); }
.offer__details dt { flex: none; width: 150px; color: var(--grey); }
.offer__details dd { flex: 1 1 0; min-width: 0; margin: 0; }

/* Open = Figma variant "Variant2" (smart animate, ease out, 0.3s): the green veil goes from 35 % to
   98 %, the title and text fade out, the details fade in, "+" becomes "−". Opens on mouse hover, or
   with the +/− button (keyboard; touch screens: a tap anywhere on the card) — see js/site.js. */
.offer__details,
.offer.is-open .offer__text { opacity: 0; visibility: hidden; transition: opacity .3s ease-out, visibility 0s .3s; }
.offer.is-open .offer__text { position: absolute; left: 0; right: 0; bottom: 0; }
.offer.is-open .offer__details { position: static; opacity: 1; visibility: visible; transition: opacity .3s ease-out, visibility 0s; }
.offer.is-open .offer__bg::after { background-color: rgba(15,31,16,.98); }
.offer.is-open .offer__toggle .plus { opacity: 0; }
.offer.is-open .offer__toggle .minus { opacity: 1; }
@media (hover: hover) {
  .offer:hover .offer__text { opacity: 0; visibility: hidden; transition: opacity .3s ease-out, visibility 0s .3s; }
  .offer:hover .offer__text { position: absolute; left: 0; right: 0; bottom: 0; }
  .offer:hover .offer__details { position: static; opacity: 1; visibility: visible; transition: opacity .3s ease-out, visibility 0s; }
  .offer:hover .offer__bg::after { background-color: rgba(15,31,16,.98); }
  .offer:hover .offer__toggle .plus { opacity: 0; }
  .offer:hover .offer__toggle .minus { opacity: 1; }
}

/* ---------- 4. Fit is the hardest part ---------- */
.fit { height: 1120px; padding: 30px; display: flex; background: var(--sage); }
.fit__copy { flex: 1 1 0; min-width: 0; display: flex; align-items: center; justify-content: center; }
.fit__title { width: 531px; display: flex; flex-direction: column; gap: 31.405px; align-items: flex-start; }
.fit__title h2 { white-space: nowrap; }
.fit__title p { color: rgba(0,0,0,.7); }
.fit__media { flex: 1 1 0; min-width: 0; border-radius: 8px; overflow: hidden; background: var(--black); }
/* video Fitting-Evos: square, on black (its own background), shown whole */
.fit__media video { display: block; width: 100%; height: 100%; object-fit: contain; }

/* ---------- 5. How we work ---------- */
.process { padding: 60px 30px; display: flex; flex-direction: column; gap: 60px; }
.process__head { display: flex; flex-direction: column; gap: 30px; align-items: flex-start; }
.process__group { display: flex; flex-direction: column; gap: 30px; }
.process__label { display: flex; align-items: center; gap: 10px; font-size: 24px; line-height: 28px; white-space: nowrap; }
.process__label img { width: 19px; height: 19px; }

.steps { display: flex; gap: 15px; }
.step {
  flex: 1 1 0;
  min-width: 0;
  padding: 30px 60px 30px 30px;
  border-radius: 8px;
  background: var(--white);
  display: flex;
  flex-direction: column;
  gap: 30px;
}
.step__top { display: flex; align-items: flex-start; justify-content: space-between; }
.step__top img { width: 24px; height: 24px; }
.num { width: 38px; padding: 10px; border-radius: 6px; background: var(--lime); }
.step__text { display: flex; flex-direction: column; gap: 15px; }
.step__text h4 { font-size: 24px; line-height: 28px; }          /* Sous titres 24/28 */
.step__text p { max-width: 360px; color: var(--text-grey); }    /* line breaks as in Figma */

.behind { display: flex; gap: 15px; }
.materials,
.lead { flex: 1 1 0; min-width: 0; padding: 30px; border-radius: 8px; background: var(--white); }
.materials { display: flex; flex-direction: column; gap: 20px; }
.materials__label { color: var(--grey); }
.materials__row { display: flex; align-items: center; gap: 10px; }
.materials__kind,
.materials__chip { height: 40px; display: flex; align-items: center; padding: 0 15px; white-space: nowrap; }
.materials__kind { border-radius: 6px; background: var(--page); }
.materials__chip { border-radius: 8px; background: var(--sage); }
.lead { display: flex; align-items: center; gap: 20px; }
.lead__photo { flex: none; width: 140px; height: 140px; border-radius: 8px; object-fit: cover; }
.lead__text { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.lead__role { color: var(--grey); }
.lead__name { font-size: 24px; line-height: 28px; }
.lead__bio { color: rgba(0,0,0,.7); }

/* ---------- 6. Have a product in mind? + footer ---------- */
.contact { padding: 30px; display: flex; flex-direction: column; background: var(--dark-green); color: var(--white); }
.contact__inner { padding: 60px; display: flex; align-items: flex-start; gap: 190px; }
.contact__heading { flex: none; width: 394px; display: flex; flex-direction: column; gap: 30px; align-items: flex-start; }
.contact__copy { display: flex; flex-direction: column; gap: 20px; }
.contact__copy p { color: rgba(255,255,255,.7); }

.form {
  flex: 1 1 0;
  min-width: 0;
  align-self: stretch;
  padding: 30px;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.form__group { display: flex; flex-direction: column; gap: 20px; }
.form__label {           /* Mono 14/22 grey */
  font-family: var(--mono);
  text-transform: uppercase;
  font-size: 14px;
  line-height: 22px;
  color: var(--grey);
}
.form__fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 15px; }
.field { display: flex; flex-direction: column; gap: 10px; }
.field__name { font-size: 14px; line-height: 22px; }
.field input,
.field select,
.form textarea {
  width: 100%;
  height: 50px;
  margin: 0;
  padding: 12px 18px;
  border: 1px solid var(--grey);
  border-radius: 8px;
  background: transparent;
  color: var(--white);
  font: inherit;
  outline: none;
  transition: border-color .2s;
}
.field input:focus,
.field select:focus,
.form textarea:focus { border-color: var(--white); }
.field__select { position: relative; display: block; }
.field select { -webkit-appearance: none; appearance: none; padding-right: 51px; cursor: pointer; }
.field select option { color: var(--black); }
/* Figma chevron (pointing left) turned to point down */
.field__chevron {
  position: absolute;
  top: 50%;
  right: 18px;
  width: 15.219px;
  height: 8.476px;
  margin-top: -4.238px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.field__chevron img { flex: none; width: 8.476px; height: 15.219px; transform: rotate(-90deg) scaleY(-1); }
.form textarea { height: 100px; resize: vertical; }

.consent { display: flex; align-items: flex-start; gap: 15px; font-size: 14px; line-height: 22px; cursor: pointer; }
.consent input {
  flex: none;
  width: 24px;
  height: 24px;
  margin: 0;
  border: 1px solid var(--white);
  border-radius: 5px;
  background: transparent center / 14px no-repeat;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}
/* ticked: no state in Figma, green box with a black tick */
.consent input:checked {
  border-color: var(--green);
  background-color: var(--green);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2 7.5l3.2 3L12 3.5' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E");
}
.consent input:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.form__submit { align-self: flex-start; transition: background-color .2s, opacity .2s; }
/* consent box unticked: "Send" faded and not clickable (no disabled state in Figma; same as visages.tech "Book a demo") */
.form__submit:disabled { opacity: .35; cursor: not-allowed; }

.footer {
  height: 239.558px;
  border-top: 1px solid var(--white);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
/* Figma: the city (491px), the 4 columns (215.7px, 20px apart) and an invisible copy of the logo
   (176px) are spread across the width, so the columns start halfway between the city and the logo
   spot (iMac 786px, Full HD 626px, MacBook right after the city) */
.footer__info { display: flex; align-items: flex-start; padding-top: 23px; }
.footer__city { flex: none; width: 491px; font-size: 40px; line-height: 46px; letter-spacing: -1.2px; }
.footer__col { flex: none; width: 215.7px; display: flex; flex-direction: column; gap: 12px; }
.footer__col + .footer__col { margin-left: 20px; }
.footer__city + .footer__col { margin-left: max(0px, calc((100% - 1589.8px) / 2)); }
.footer__col .head { opacity: .3; }
.footer__col a { transition: opacity .2s; }
.footer__col a[href]:hover { opacity: .6; }
.footer__bottom { display: flex; justify-content: space-between; align-items: flex-end; }
.footer__top { margin-bottom: 5px; font-size: 14px; line-height: 16.8px; letter-spacing: -0.42px; }

/* ---------- Per-device content ----------
   The base styles above are the iMac design (2240px canvas). Each other device has its own
   stylesheet in css/ (all selectors prefixed html[data-bp="…"]).
   To show an element only on some devices: data-hide="phone ipad-p" hides it on those. */
html[data-bp="imac"]   [data-hide~="imac"],
html[data-bp="fhd"]    [data-hide~="fhd"],
html[data-bp="mbp"]    [data-hide~="mbp"],
html[data-bp="ipad-l"] [data-hide~="ipad-l"],
html[data-bp="ipad-p"] [data-hide~="ipad-p"],
html[data-bp="phone"]  [data-hide~="phone"] { display: none !important; }