/* ============================================
   FONTS
   ============================================ */
@font-face {
  font-family: 'Alliance Neue';
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url('../fonts/alliance-neue-regular.woff2') format('woff2');
}

@font-face {
  font-family: 'Alliance Neue';
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src: url('../fonts/alliance-neue-medium.woff2') format('woff2');
}

@font-face {
  font-family: 'Alliance Platt';
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  src: url('../fonts/alliance-platt-semibold.woff2') format('woff2');
}

/* ============================================
   CSS RESET & BASE
   ============================================ */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --terra: #BB6E44;
  --green: #697A6C;
  --pink: #9E7589;
  --blue: #93AEBB;
  --black: #16120E;
  --beige: #F0EAE1;
  --grey: #6B6560;
  --ochre: #C6A95E;
  --white: #ffffff;

  --font-neue: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-platt: 'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;

  --ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1);
  --ease-in-out-sine: cubic-bezier(0.455, 0.03, 0.515, 0.955);

  font-size: 10px;
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  font-family: var(--font-neue);
  font-weight: 400;
  color: var(--black);
  background-color: var(--beige);
  overflow-x: hidden;
  font-size: 1.6rem;
  line-height: 1.5;
}

a {
  color: inherit;
  text-decoration: none;
}

ul, ol {
  list-style: none;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

button {
  border: none;
  background: none;
  cursor: pointer;
  font-family: inherit;
  color: inherit;
}

/* ============================================
   UTILITY
   ============================================ */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ============================================
   PAGE LOADER
   ============================================ */
.loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  height: var(--app-height, 100lvh);
  background: var(--black);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  clip-path: inset(0 0 0 0);
}

.loader-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.loader-text {
  font-family: var(--font-neue);
  font-weight: 900;
  font-size: clamp(4rem, 8vw, 8rem);
  color: var(--white);
  letter-spacing: -0.04em;
  text-transform: uppercase;
}

.loader-progress {
  width: clamp(160px, 30vw, 320px);
  height: 1px;
  background-color: rgba(255, 255, 255, 0.2);
  overflow: hidden;
  margin-top: 2rem;
}

.loader-progress-fill {
  height: 100%;
  width: 0%;
  background-color: var(--white);
  transition: width 0.25s ease;
}

.loader-pct {
  font-family: var(--font-neue);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.3em;
  color: rgba(255, 255, 255, 0.5);
  margin-top: 0.75rem;
  display: block;
  text-align: center;
}

/* ============================================
   CUSTOM CURSOR
   ============================================ */
.cursor {
  position: fixed;
  top: -4px;
  left: -4px;
  width: 8px;
  height: 8px;
  background: var(--terra);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  mix-blend-mode: difference;
}

.cursor-follower {
  position: fixed;
  top: -20px;
  left: -20px;
  width: 40px;
  height: 40px;
  background: var(--terra);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9998;
  opacity: 0.3;
  will-change: transform;
}

@media (pointer: coarse) {
  .cursor, .cursor-follower { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .cursor, .cursor-follower { display: none; }
  .loader { display: none; }
}

/* ============================================
   HEADER
   ============================================ */
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 10;
  pointer-events: none;
}

.logo {
  position: fixed;
  top: 2.4rem;
  left: 3rem;
  z-index: 5;
  pointer-events: auto;
  display: flex;
  align-items: center;
}

.logo-text {
  font-family: var(--font-neue);
  font-weight: 900;
  font-size: 2.2rem;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  color: var(--black);
  transition: color 0.4s ease;
  line-height: 1;
}

.logo--light .logo-text,
.logo--light .logo-sub {
  color: var(--white);
}

.logo-sub {
  font-family: var(--font-platt);
  font-weight: 600;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--black);
  opacity: 0.5;
  display: block;
  margin-top: 0.2rem;
  line-height: 1;
  transition: color 0.4s ease;
}

.logo-inner {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* ============================================
   BURGER BUTTON
   ============================================ */
.burger {
  position: fixed;
  top: 2rem;
  right: 3rem;
  z-index: 5;
  pointer-events: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 12rem;
  height: 6rem;
  border-radius: 10rem;
  background: var(--black);
  color: var(--white);
  font-family: var(--font-platt);
  font-weight: 600;
  font-size: 1.4rem;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  cursor: pointer;
  transition: transform 0.4s var(--ease-out-quart), background-color 0.3s ease;
}

.burger:hover {
  transform: scale(1.05);
}

.burger.is-open {
  background: var(--white);
  color: var(--black);
}

/* ============================================
   NAVIGATION OVERLAY
   ============================================ */
.nav-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  height: var(--app-height, 100lvh);
  background: var(--black);
  color: var(--white);
  z-index: 3;
  clip-path: inset(100% 0 0 0);
  transition: clip-path 0.8s var(--ease-out-quart);
  pointer-events: none;
  display: flex;
  flex-direction: column;
  padding: 12rem 3rem 3rem;
  overflow-y: auto;
}

.nav-overlay.is-open {
  clip-path: inset(0 0 0 0);
  pointer-events: auto;
}

.nav-content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1;
  gap: 6rem;
}

.nav-list {
  display: flex;
  flex-direction: column;
  flex: 1;
  justify-content: space-between;
}

.nav-item {
  overflow: hidden;
  padding: 0.8rem 0;
}

.nav-link {
  display: flex;
  align-items: center;
  gap: 2rem;
  font-family: var(--font-neue);
  font-size: clamp(3.2rem, 4vw, 5.6rem);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.02em;
  white-space: nowrap;
  transition: opacity 0.3s ease;
}

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

.nav-dot {
  display: inline-block;
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 50%;
  flex-shrink: 0;
}

.nav-info {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 3rem;
  padding-top: 4rem;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.nav-info a {
  display: block;
  font-family: var(--font-neue);
  font-size: 1.4rem;
  line-height: 1.8;
  opacity: 0.7;
  transition: opacity 0.3s ease;
}

.nav-info a:hover {
  opacity: 1;
}

.nav-info p {
  font-size: 1.4rem;
  line-height: 1.8;
  opacity: 0.7;
}

.nav-address,
.nav-contact,
.nav-phone,
.nav-social {
  display: flex;
  flex-direction: column;
}

/* ============================================
   NAV OVERLAY — bloc « feature » (desktop only)
   LESARTS rempli d'image + petits carrés
   ============================================ */
.nav-main {
  display: flex;
  flex: 1;
  gap: 4rem;
  align-items: stretch;
  /* côté d'un carré — partagé par les photos de droite ET l'image haute */
  --nav-sq: clamp(8rem, 10vw, 15rem);
}

.nav-feature {
  flex: 0 0 auto;
  width: calc(var(--nav-sq) * 4 + 1.2rem * 3);
  min-width: 0; /* empêche le mot insécable d'élargir la colonne hors écran */
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 3.2rem;
  /* remonte le bloc pour aligner le bas des images sur le haut de « Contact » */
  padding-bottom: clamp(0.4rem, 0.8vw, 1.2rem);
}

/* Le mot sert de masque : une seule image transparaît à travers les lettres */
.nav-feature__word {
  font-family: var(--font-neue);
  font-weight: 700;
  /* taille calée sur la largeur du bloc (4 carrés) pour que le mot rentre toujours */
  font-size: calc(var(--nav-sq) * 1.05);
  line-height: 0.85;
  letter-spacing: -0.04em;
  text-align: right;
  white-space: nowrap;
  background-image: url("../images/encadrement/wooden-picture-frames-on-wall-in-a-store-backgrou-2026-03-24-23-03-35-utc.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  /* apparition à l'ouverture du menu */
  opacity: 0;
  transform: translateY(3rem);
  transition: opacity 0.9s ease 0.25s, transform 0.9s var(--ease-out-quart) 0.25s;
}
.nav-overlay.is-open .nav-feature__word {
  opacity: 1;
  transform: none;
}

.nav-feature__photos {
  display: grid;
  grid-template-columns: repeat(4, var(--nav-sq));
  gap: 1.2rem;
}
.nav-feature__photo-wrap {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 0.4rem;
  opacity: 0;
  transform: translateY(2rem);
  transition: opacity 0.7s ease, transform 0.7s var(--ease-out-quart);
}
.nav-overlay.is-open .nav-feature__photo-wrap { opacity: 1; transform: none; }
.nav-overlay.is-open .nav-feature__photo-wrap:nth-child(1) { transition-delay: 0.45s; }
.nav-overlay.is-open .nav-feature__photo-wrap:nth-child(2) { transition-delay: 0.55s; }
.nav-overlay.is-open .nav-feature__photo-wrap:nth-child(3) { transition-delay: 0.65s; }
.nav-overlay.is-open .nav-feature__photo-wrap:nth-child(4) { transition-delay: 0.75s; }
.nav-feature__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease-out-quart);
}
.nav-feature__photo-wrap:hover .nav-feature__photo { transform: scale(1.06); }

/* Desktop only — masqué en tablette/mobile */
@media (max-width: 1079px) {
  .nav-feature { display: none; }
  .nav-main { display: block; }
}

@media (prefers-reduced-motion: reduce) {
  .nav-feature__word,
  .nav-feature__photo-wrap {
    transition: none;
    opacity: 1;
    transform: none;
  }
}

/* ============================================
   HERO SECTION — STICKY SCROLL PATTERN
   ============================================ */
.hero-outer {
  position: relative;
}

.hero-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  /* lvh = the LARGE (toolbar-hidden) viewport height — a FIXED value, so the
     pinned hero never resizes mid-scroll (unlike dvh) AND never leaves a white
     gap when iOS Safari hides its toolbar (unlike svh). */
  height: var(--app-height, 100lvh);
  width: 100%;
}

.hero-overflow {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.hero-step1 {
  display: flex;
  flex-direction: row;
  height: 100%;
  width: max-content;
  will-change: transform;
}

/* ============================================
   HERO LEFT
   ============================================ */
.hero-left {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 9rem 3rem 3rem;
  background-color: var(--beige);
  position: relative;
  width: 50vw;
  flex-shrink: 0;
  height: 100%;
}

.hero-nav {
  position: relative;
  z-index: 2;
}

.hero-nav-list {
  display: flex;
  justify-content: space-between;
}

.hero-nav-item {
  flex: none;
}

.hero-nav-link {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-family: var(--font-neue);
  font-weight: 500;
  font-size: 1.6rem;
  line-height: 1;
  transition: opacity 0.3s ease;
}

.hero-nav-link:hover {
  opacity: 0.6;
}

.hero-nav-dot {
  display: inline-block;
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 50%;
  flex-shrink: 0;
}

/* ============================================
   HERO CONTENT / TITLE
   ============================================ */
.hero-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  gap: 2.4rem;
  padding: 0;
}

.hero-title {
  position: relative;
  width: 100%;
}

.hero-title-visual {
  display: block;
  font-family: var(--font-neue);
  font-weight: 900;
  font-size: clamp(5rem, 13vw, 16rem);
  line-height: 0.85;
  letter-spacing: -0.04em;
  color: var(--black);
  text-transform: uppercase;
}

.hero-desc {
  font-family: var(--font-neue);
  font-weight: 400;
  font-size: clamp(1.5rem, 1.2vw, 1.8rem);
  line-height: 1.6;
  max-width: 50rem;
  text-align: left;
  color: var(--black);
}

/* ============================================
   HERO BOTTOM / SOCIAL
   ============================================ */
.hero-bottom {
  border-top: 1px solid rgba(14, 14, 14, 0.15);
  padding-top: 2rem;
}

.hero-social {
  display: flex;
  justify-content: space-between;
}

.hero-social-link {
  font-family: var(--font-platt);
  font-weight: 600;
  font-size: 1.1rem;
  text-transform: uppercase;
  letter-spacing: 0;
  transition: opacity 0.3s ease;
}

.hero-social-link:hover {
  opacity: 0.5;
}

/* ============================================
   PROJECT CARDS (HERO)
   ============================================ */
.project-card {
  width: 50vw;
  flex-shrink: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  background-color: var(--card-bg, var(--blue));
  overflow: hidden;
  will-change: transform;
  height: 100%;
}

.project-image-link {
  display: block;
  flex: 1;
  position: relative;
  overflow: hidden;
}

.project-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Card 01 — mirrored cover: shift visible area left so frame isn't at the border */
#hero-card-1 .project-image {
  object-position: 30% center;
}

.project-info {
  padding: 1.6rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  background-color: var(--card-bg, var(--blue));
}

.project-meta {
  display: flex;
  gap: 1.6rem;
  align-items: flex-start;
}

.project-year {
  font-family: var(--font-platt);
  font-weight: 600;
  font-size: 1.1rem;
  text-transform: uppercase;
  opacity: 0.6;
}

.project-tags {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.project-category {
  font-family: var(--font-platt);
  font-weight: 600;
  font-size: 1.1rem;
  text-transform: uppercase;
}

.project-desc-text {
  font-family: var(--font-neue);
  font-size: 1.2rem;
  opacity: 0.6;
}

.project-name-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.project-name {
  font-family: var(--font-neue);
  font-weight: 400;
  font-size: clamp(2.4rem, 2.5vw, 3.6rem);
  letter-spacing: -0.02em;
}

.project-arrow {
  font-size: 2.4rem;
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s ease;
  transform: translate(-0.5rem, 0.5rem);
}

.project-card:hover .project-arrow {
  opacity: 1;
  transform: translate(0, 0);
}

.project-num {
  font-family: var(--font-platt);
  font-weight: 600;
  font-size: 1.1rem;
  opacity: 0.4;
}

/* ============================================
   PROJECTS GALLERY — VERTICAL STRIP
   ============================================ */
.gallery-outer {
  position: relative;
  height: var(--gallery-section-height, 500vh);
  background-color: var(--beige);
}

.gallery-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  height: var(--app-height, 100lvh);
  width: 100%;
  display: flex;
  overflow: hidden;
}

.gallery-left {
  position: relative;
  width: 50%;
  height: 100%;
  overflow: hidden;
  flex-shrink: 0;
}

.gallery-strip {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  width: 100%;
  transform-origin: top left;
  will-change: transform;
}

.gallery-card {
  display: block;
  width: 100%;
  flex-shrink: 0;
  cursor: pointer;
  overflow: hidden;
}

.gallery-image-wrap {
  position: relative;
  width: 100%;
  padding-bottom: 92.65%;
  overflow: hidden;
}

.gallery-img {
  position: absolute;
  top: -8%;
  left: 0;
  width: 100%;
  height: 116%;
  object-fit: cover;
  will-change: transform;
  transition: scale 0.8s var(--ease-out-quart);
}

.gallery-card:hover .gallery-img {
  scale: 1.04;
}

.gallery-right {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3.2rem;
  overflow-y: auto;
  will-change: transform;
}

.gallery-right-inner {
  width: 100%;
  max-width: 52rem;
}

.gallery-heading {
  font-family: var(--font-neue);
  font-weight: 400;
  font-size: clamp(3.6rem, 5vw, 5.6rem);
  line-height: 1;
  letter-spacing: -0.02em;
  margin-bottom: 3.2rem;
  display: flex;
  flex-wrap: nowrap;
  gap: 0.08em;
}

.gallery-char-wrap {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
}

.gallery-char {
  display: inline-block;
  will-change: transform;
}

.gallery-list {
  display: flex;
  flex-direction: column;
}

.gallery-list-item {
  position: relative;
}

.gallery-list-link {
  display: flex;
  align-items: baseline;
  gap: 1.6rem;
  padding: 1.6rem 0;
  transition: opacity 0.3s ease;
}

.gallery-list-link:hover {
  opacity: 0.5;
}

.gallery-list-num-wrap,
.gallery-list-label-wrap {
  display: inline-flex;
  overflow: hidden;
}

.gallery-list-num {
  font-family: var(--font-platt);
  font-weight: 600;
  font-size: 1rem;
  text-transform: uppercase;
  opacity: 0.5;
  flex-shrink: 0;
  width: 2rem;
  will-change: transform;
}

.gallery-list-label {
  font-family: var(--font-neue);
  font-weight: 400;
  font-size: clamp(1.4rem, 1.4vw, 1.8rem);
  line-height: 1.3;
  letter-spacing: -0.01em;
  will-change: transform;
}

.gallery-list-line {
  height: 1px;
  background-color: rgba(14, 14, 14, 0.15);
  transform-origin: 100% 100%;
  will-change: transform;
}

.gallery-list::before {
  content: "";
  display: block;
  height: 1px;
  background-color: rgba(14, 14, 14, 0.15);
  transform-origin: 100% 100%;
}

.gallery-desc-wrap {
  overflow: hidden;
}

.gallery-desc {
  margin-top: 2.4rem;
  font-family: var(--font-neue);
  font-weight: 400;
  font-size: 1.4rem;
  line-height: 1.6;
  color: var(--black);
  opacity: 0.7;
  will-change: transform, opacity;
}

.gallery-btn-wrap {
  overflow: hidden;
}

.gallery-btn {
  display: inline-flex;
  align-items: center;
  gap: 0;
  border-radius: 10rem;
  box-shadow: inset 0 0 0 1px rgba(14, 14, 14, 0.2);
  padding: 0 0.8rem 0 2.4rem;
  height: 4rem;
  font-family: var(--font-neue);
  font-weight: 500;
  font-size: 1.4rem;
  color: var(--black);
  transition: box-shadow 0.4s ease, background-color 0.4s ease;
  cursor: pointer;
  margin-top: 2rem;
  will-change: transform, opacity;
}

.gallery-btn:hover {
  box-shadow: inset 0 0 0 1px rgba(14, 14, 14, 0.5);
  background-color: rgba(14, 14, 14, 0.03);
}

.gallery-btn-label {
  white-space: nowrap;
  text-transform: uppercase;
  font-family: var(--font-platt);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 0.05em;
}

.gallery-btn-dot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.2rem;
  height: 3.2rem;
  margin-left: 1.6rem;
  border-radius: 50%;
  background-color: var(--black);
  transition: transform 0.3s var(--ease-out-quart);
}

.gallery-btn:hover .gallery-btn-dot {
  transform: scale(1.1);
}

.gallery-btn-dot-inner {
  display: block;
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background-color: var(--white);
}

/* ============================================
   EXPERTISES SECTION
   ============================================ */
.expertises-section {
  position: relative;
  height: var(--expertises-height, 600vh);
}

.expertises-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  height: var(--app-height, 100lvh);
  width: 100%;
  overflow: hidden;
}

.expertises-heading {
  position: absolute;
  top: 12.6rem;
  left: 3rem;
  z-index: 10;
  font-family: var(--font-neue);
  font-weight: 400;
  font-size: clamp(6rem, 10vw, 16.4rem);
  line-height: 0.85;
  letter-spacing: -0.03em;
  color: var(--black);
  pointer-events: none;
}

.expertises-cards-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.expertise-card {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: var(--card-color);
  will-change: transform;
}

.expertise-card-inner {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  will-change: transform;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 0 3rem;
  padding-top: 35vh;
  padding-bottom: 10rem;
}

.expertise-card-body {
  display: grid;
  grid-template-columns: 35vw 1fr;
  gap: 4rem;
  align-items: start;
  width: 100%;
}

.expertise-card-text-col {
  display: flex;
  flex-direction: column;
  gap: 2.4rem;
}

.expertise-card-num {
  font-family: var(--font-platt);
  font-weight: 600;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.6;
}

.expertise-card-title {
  font-family: var(--font-neue);
  font-weight: 500;
  font-size: clamp(2.4rem, 3vw, 3.2rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.expertise-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0;
  min-height: 6em;
}

.expertise-card-tag {
  font-family: var(--font-neue);
  font-weight: 400;
  font-size: 1rem;
  line-height: 2;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.7;
  white-space: nowrap;
  margin-right: 0.8rem;
}

.expertise-card-btn {
  display: inline-flex;
  align-items: center;
  gap: 1.2rem;
  padding: 1rem 1rem 1rem 3rem;
  border-radius: 10rem;
  box-shadow: inset 0 0 0 1px currentColor;
  font-family: var(--font-neue);
  font-weight: 400;
  font-size: 1.6rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--black);
  background: none;
  cursor: pointer;
  transition: opacity 0.3s ease;
  align-self: flex-start;
  margin-top: 0.8rem;
}

.expertise-card-btn:hover {
  opacity: 0.6;
}

.expertise-card-btn-dot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.2rem;
  height: 3.2rem;
  border-radius: 50%;
  background-color: var(--black);
  flex-shrink: 0;
}

.expertise-card-image-col {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.expertise-card-image-wrap {
  position: relative;
  width: 44rem;
  max-width: 100%;
  aspect-ratio: 480 / 348;
  border-radius: 0.4rem;
  overflow: hidden;
}

.expertise-card-image-bg {
  position: absolute;
  top: -1.6rem;
  left: -1.6rem;
  width: calc(100% + 3.2rem);
  height: calc(100% + 3.2rem);
  border-radius: 0.6rem;
  z-index: -1;
  opacity: 0.4;
  background-color: var(--card-color);
}

.expertise-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Expertises bottom nav */
.expertises-nav {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 10;
  padding: 0 3rem 3rem;
}

.expertises-nav-list {
  display: flex;
  border-top: 1px solid rgba(14, 14, 14, 0.15);
  padding-top: 1.6rem;
}

.expertises-nav-item {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.8rem 0;
  font-family: var(--font-neue);
  font-size: 1rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.3;
  transition: opacity 0.4s ease;
  cursor: pointer;
  background: none;
  border: none;
  color: var(--black);
}

.expertises-nav-item:hover {
  opacity: 0.6;
}

.expertises-nav-item.is-active {
  opacity: 1;
}

.expertises-nav-num {
  font-family: var(--font-platt);
  font-weight: 600;
}

.expertises-nav-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.expertises-progress-bar {
  position: relative;
  width: 100%;
  height: 1px;
  background-color: rgba(14, 14, 14, 0.15);
  margin-top: 0.8rem;
}

.expertises-progress-fill {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--black);
  will-change: transform;
  transform-origin: left center;
  transform: scaleX(0);
}

/* ============================================
   HORIZONTAL SCROLLING GALLERY
   ============================================ */
.horiz-gallery {
  position: relative;
  height: var(--horiz-section-height, 400vh);
  background-color: var(--beige);
}

.horiz-gallery-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  height: var(--app-height, 100lvh);
  overflow: hidden;
}

.horiz-gallery-track {
  display: flex;
  gap: 2rem;
  padding: 4rem 3rem;
  will-change: transform;
  height: 100%;
  align-items: center;
}

.horiz-gallery-card {
  flex-shrink: 0;
  width: 35vw;
  min-width: 30rem;
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
  cursor: pointer;
  transition: opacity 0.3s ease;
  max-height: calc(100vh - 10rem);
}

.horiz-gallery-card:hover {
  opacity: 0.85;
}

.horiz-gallery-image-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 0.926;
  border-radius: 0.4rem;
  overflow: hidden;
}

.horiz-gallery-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s var(--ease-out-quart);
}

.horiz-gallery-card:hover .horiz-gallery-img {
  transform: scale(1.04);
}

.horiz-gallery-info {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.horiz-gallery-meta {
  display: flex;
  align-items: center;
  gap: 1.6rem;
}

.horiz-gallery-category {
  font-family: var(--font-platt);
  font-weight: 600;
  font-size: 1.1rem;
  text-transform: uppercase;
  letter-spacing: -0.02em;
}

.horiz-gallery-year {
  font-family: var(--font-platt);
  font-weight: 600;
  font-size: 1.1rem;
  text-transform: uppercase;
  opacity: 0.5;
}

.horiz-gallery-name-row {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.horiz-gallery-name {
  font-family: var(--font-neue);
  font-weight: 400;
  font-size: clamp(2.4rem, 2.5vw, 3.6rem);
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.horiz-gallery-arrow {
  display: flex;
  align-items: center;
  opacity: 0;
  transform: translate(-0.5rem, 0.5rem);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.horiz-gallery-card:hover .horiz-gallery-arrow {
  opacity: 1;
  transform: translate(0, 0);
}

.horiz-gallery-cta {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 20vw;
  min-width: 18rem;
  gap: 1.6rem;
  cursor: pointer;
}

.horiz-gallery-cta-text {
  font-family: var(--font-neue);
  font-weight: 500;
  font-size: 2rem;
  position: relative;
}

.horiz-gallery-cta-text::after {
  content: '';
  position: absolute;
  bottom: -0.2rem;
  left: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.6s var(--ease-out-quart);
}

.horiz-gallery-cta:hover .horiz-gallery-cta-text::after {
  transform: scaleX(1);
}

.horiz-gallery-cta-arrow {
  font-size: 2.4rem;
}

/* ============================================
   AGENCY / ATELIER SECTION
   ============================================ */
.agency-section {
  background-color: var(--beige);
  padding: 16rem 3rem 18rem;
  overflow: hidden;
}

.masonry-grid__header {
  display: flex;
  gap: 3rem;
  grid-column: 1;
  grid-row: 1;
}

.masonry-grid__header-side {
  flex: 0 0 45%;
}

.masonry-grid__heading {
  font-family: var(--font-neue);
  font-weight: 400;
  font-size: clamp(6rem, 10vw, 9.6rem);
  line-height: 1;
  letter-spacing: -0.02em;
}

.masonry-grid__header-right {
  flex: 0 0 42rem;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  padding-top: 1rem;
}

.masonry-grid__label {
  font-family: var(--font-platt);
  font-weight: 600;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: -0.05em;
  opacity: 0.5;
}

.masonry-grid__intro-desc {
  font-family: var(--font-neue);
  font-weight: 400;
  font-size: 1.8rem;
  line-height: 1.6;
  color: var(--black);
}

.masonry-grid__btn {
  display: inline-flex;
  align-items: center;
  gap: 0;
  border-radius: 10rem;
  box-shadow: inset 0 0 0 1px rgba(14, 14, 14, 0.2);
  padding: 0 1rem 0 3rem;
  height: 4.8rem;
  font-family: var(--font-neue);
  font-weight: 500;
  font-size: 1.6rem;
  color: var(--black);
  transition: box-shadow 0.4s ease, background-color 0.4s ease;
  cursor: pointer;
  width: fit-content;
  margin-top: 0.8rem;
}

.masonry-grid__btn:hover {
  box-shadow: inset 0 0 0 1px rgba(14, 14, 14, 0.5);
  background-color: rgba(14, 14, 14, 0.03);
}

.masonry-grid__btn-label {
  white-space: nowrap;
}

.masonry-grid__btn-dot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.6rem;
  height: 3.6rem;
  margin-left: 2rem;
  border-radius: 50%;
  background-color: var(--black);
  transition: transform 0.3s var(--ease-out-quart);
}

.masonry-grid__btn:hover .masonry-grid__btn-dot {
  transform: scale(1.1);
}

.masonry-grid__btn-dot-inner {
  display: block;
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background-color: var(--white);
}

.masonry-grid {
  display: grid;
  grid-template-columns: 65% 1fr;
  grid-template-rows: repeat(3, 50vh);
  grid-auto-rows: 50vh;
  gap: 1.5rem;
  max-width: 138rem;
  margin: 0 auto 6rem;
}

.masonry-grid__header      { grid-column: 1; grid-row: 1; padding-top: 3.2rem; padding-left: 3.2rem; }
.masonry-grid__photo-large { grid-column: 1; grid-row: 2; }
.masonry-grid__values      { grid-column: 1; grid-row: 3 / 5; padding-top: 3.2rem; }
.masonry-grid__photo-side-1 { grid-column: 2; grid-row: 1; }
.masonry-grid__photo-side-2 { grid-column: 2; grid-row: 2; }
.masonry-grid__photo-side-3 { grid-column: 2; grid-row: 3 / 5; }

.masonry-grid__photo-wrap {
  overflow: hidden;
  position: relative;
  border-radius: 0.6rem;
}

.masonry-grid__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s var(--ease-out-quart);
}

/* .masonry-grid__photo-wrap:hover .masonry-grid__photo {
  transform: scale(1.03);
} */

.masonry-grid__values-list {
  display: flex;
  flex-direction: column;
}

.masonry-grid__value-item {
  display: flex;
  align-items: flex-start;
}

.masonry-grid__value-item + .masonry-grid__value-item {
  border-top: 1px solid rgba(14, 14, 14, 0.15);
}

.masonry-grid--home .masonry-grid__value-item {
  flex-direction: column;
  gap: 2.4rem;
  padding: 8rem 0;
}

.about-fact {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.about-fact + .about-fact {
  margin-top: 5.6rem;
  border-top: 1px solid rgba(14, 14, 14, 0.15);
  padding-top: 5.6rem;
}

.about-fact__title {
  font-family: var(--font-neue);
  font-weight: 400;
  font-size: clamp(6rem, 10vw, 9.6rem);
  line-height: 1;
  letter-spacing: -0.02em;
}

.char-reveal__word {
  display: inline-block;
  white-space: nowrap;
}

.char-reveal__wrap {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  /* Room for descenders (g, j…) — line-height:1 + overflow:hidden would clip them.
     0.16em < the 120% the letter slides from, so the reveal mask still works. */
  padding-bottom: 0.16em;
}

.char-reveal__char {
  display: inline-block;
  will-change: transform;
}

.about-fact__desc {
  font-family: var(--font-neue);
  font-weight: 400;
  font-size: 1.8rem;
  line-height: 1.6;
  color: var(--black);
}

.masonry-grid__value-title {
  font-family: var(--font-neue);
  font-weight: 400;
  font-size: clamp(3.2rem, 4.5vw, 6rem);
  line-height: 1;
  letter-spacing: -0.02em;
}

.masonry-grid__value-desc {
  font-family: var(--font-neue);
  font-weight: 400;
  font-size: 1.8rem;
  line-height: 1.6;
  color: var(--black);
}

/* ============================================
   CTA SECTION
   ============================================ */
.cta-section {
  background-color: var(--black);
  color: var(--white);
  padding: 13rem 2rem 4.8rem;
}

.cta-container {
  max-width: 100rem;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4rem;
  text-align: center;
}

.cta-title {
  font-family: var(--font-neue);
  font-weight: 400;
  font-size: clamp(3.6rem, 6.5vw, 9.6rem);
  line-height: 1;
  letter-spacing: -0.02em;
  text-align: center;
}

#about-cta-title {
  white-space: nowrap;
}

.cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 0;
  border-radius: 10rem;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3);
  padding: 0 1rem 0 3rem;
  height: 4.8rem;
  font-family: var(--font-neue);
  font-weight: 500;
  font-size: 1.6rem;
  color: var(--white);
  transition: box-shadow 0.4s ease, background-color 0.4s ease;
  cursor: pointer;
}

.cta-btn:hover {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6);
  background-color: rgba(255, 255, 255, 0.05);
}

.cta-btn-label {
  white-space: nowrap;
}

.cta-btn-dot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.6rem;
  height: 3.6rem;
  margin-left: 2rem;
  border-radius: 50%;
  background-color: var(--white);
  transition: transform 0.3s var(--ease-out-quart);
}

.cta-btn:hover .cta-btn-dot {
  transform: scale(1.1);
}

.cta-btn-dot-inner {
  display: block;
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background-color: var(--black);
}

/* ============================================
   FOOTER
   ============================================ */
.footer {
  background-color: var(--black);
  color: var(--white);
  padding: 6rem 3rem 3rem;
  position: relative;
  overflow: hidden;
}

.footer-top {
  padding-bottom: 6rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-info-grid {
  display: flex;
  justify-content: space-between;
  gap: 3rem;
  flex-wrap: wrap;
}

.footer-info-col {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.footer-address-link {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  transition: opacity 0.3s ease;
}

.footer-address-link p {
  font-family: var(--font-neue);
  font-size: 1.4rem;
  line-height: 1.7;
  opacity: 0.7;
}

.footer-address-link:hover {
  opacity: 0.5;
}

.footer-info-link {
  font-family: var(--font-neue);
  font-size: 1.4rem;
  line-height: 1.7;
  opacity: 0.7;
  transition: opacity 0.3s ease;
}

.footer-info-link:hover {
  opacity: 1;
}

.footer-copyright {
  font-family: var(--font-neue);
  font-size: 1.2rem;
  opacity: 0.4;
  margin-top: 1rem;
}

.footer-bottom {
  padding-top: 4rem;
  overflow: hidden;
}

.footer-photos {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  height: 32rem;
}

.footer-photo-wrap {
  overflow: hidden;
  border-radius: 0.4rem;
}

.footer-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ============================================
   RESPONSIVE — TABLET
   ============================================ */
@media (min-width: 768px) and (max-width: 1079px) {
  .hero-left {
    width: 100vw;
    min-height: var(--app-height, 100lvh);
    padding: 9rem 2.4rem 2.4rem;
  }
  .project-card { width: 80vw; }
  .hero-nav-list { flex-wrap: wrap; gap: 0; }
  .hero-nav-item { flex: 0 0 50%; margin-bottom: 1rem; }

  .gallery-left { width: 55%; }
  .gallery-right { padding: 3rem; }

  .expertises-heading { top: 8rem; left: 2rem; }
  .expertise-card-inner { padding: 0 2rem; padding-top: 18vh; padding-bottom: 8rem; }
  .expertise-card-body { grid-template-columns: 1fr; gap: 3rem; }
  .expertise-card-image-col { justify-content: center; }
  .expertise-card-image-wrap { width: 100%; max-width: 40rem; }
  .expertises-nav { padding: 0 2rem 2rem; }
  .expertises-nav-label { display: none; }
  .expertises-nav-item { justify-content: center; }

  .masonry-grid__header { flex-direction: column; gap: 3rem; grid-column: 1; grid-row: 1; }
  .masonry-grid__header-side { flex: none; }
  .masonry-grid__header-right { flex: none; max-width: 50rem; }
  .masonry-grid { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto auto auto; }
  .masonry-grid__photo-large { grid-column: 1 / 3; grid-row: 2; }
  .masonry-grid__photo-side-1 { grid-column: 1; grid-row: 3; aspect-ratio: 1 / 0.6; }
  .masonry-grid__photo-side-2 { grid-column: 2; grid-row: 3; aspect-ratio: 1 / 0.6; }
  .masonry-grid__photo-side-3 { grid-column: 1 / 3; grid-row: 4; aspect-ratio: 16 / 5; }
  .masonry-grid__values { grid-column: 1 / 3; grid-row: 5; }
  .masonry-grid__value-item { flex-direction: column; gap: 1.6rem; }
  .masonry-grid__value-title { flex: none; }

  .nav-overlay { padding: 8rem 2rem 2.4rem; }
  .nav-info { grid-template-columns: 1fr 1fr; gap: 2rem; padding-top: 3rem; }
}

/* ============================================
   RESPONSIVE — MOBILE (< 768px)
   ============================================ */
@media (max-width: 767px) {
  .hero-left {
    width: 100vw;
    min-height: var(--app-height, 100lvh);
    padding: 8rem 1.6rem 2rem;
    justify-content: flex-start;
    gap: 0;
  }
  .hero-nav { margin-bottom: auto; }
  .hero-nav-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem 0; }
  .hero-nav-item { flex: none; }
  .hero-nav-link { font-size: 1.4rem; gap: 0.6rem; }
  .hero-content { padding: 0; margin-top: auto; margin-bottom: auto; gap: 2rem; }
  .hero-title-visual { font-size: clamp(5rem, 20vw, 7.5rem); }
  .hero-desc { font-size: 1.5rem; max-width: none; line-height: 1.55; }
  .hero-bottom { margin-top: auto; }
  .hero-social { gap: 0; }
  .hero-social-link { font-size: 1rem; }
  /* Full-screen cards on mobile so the horizontal scroll ends with the last
     slide flush against the left edge (no leftover sliver of the previous card). */
  .project-card { width: 100vw; }
  .project-info { padding: 1.2rem 1.6rem; }
  .project-name { font-size: clamp(2rem, 6vw, 2.8rem); }

  .gallery-sticky { flex-direction: column; }
  .gallery-left { width: 100%; height: calc(var(--app-height, 100lvh) * 0.62); flex-shrink: 0; }
  .gallery-right {
    flex: 1; height: auto; padding: 2rem 1.6rem 2rem;
    align-items: flex-start; justify-content: flex-start; overflow-y: auto;
    transform: none !important; will-change: auto !important;
  }
  .gallery-right-inner { max-width: none; width: 100%; }
  .gallery-heading { font-size: clamp(2.8rem, 8vw, 4rem); margin-bottom: 2rem; line-height: 1; }
  .gallery-list-link { padding: 1rem 0; gap: 1.2rem; }
  .gallery-list-label { font-size: clamp(1.3rem, 4vw, 1.6rem); }
  .gallery-desc { margin-top: 1.6rem; font-size: 1.3rem; }
  .gallery-btn { height: 4rem; padding: 0 0.6rem 0 2rem; margin-top: 1.6rem; font-size: 1.3rem; min-height: 44px; }
  .gallery-btn-dot { width: 2.8rem; height: 2.8rem; margin-left: 1.2rem; }

  .expertises-heading { top: 5.6rem; left: 1.6rem; font-size: clamp(3.6rem, 11vw, 5.6rem); line-height: 0.9; }
  .expertise-card-inner { padding: 14rem 1.6rem 7rem; justify-content: flex-start; }
  .expertise-card-body { grid-template-columns: 1fr; gap: 2rem; }
  .expertise-card-title { font-size: clamp(2rem, 6vw, 2.8rem); }
  .expertise-card-tags { min-height: auto; gap: 0.2rem 0; }
  .expertise-card-tag { font-size: 0.9rem; white-space: normal; word-break: break-word; line-height: 1.8; }
  .expertise-card-btn { font-size: 1.3rem; padding: 0.8rem 0.8rem 0.8rem 2rem; min-height: 4.4rem; }
  .expertise-card-btn-dot { width: 2.8rem; height: 2.8rem; flex-shrink: 0; }
  .expertise-card-body { flex: 1; min-height: 0; display: flex; flex-direction: column; }
  .expertise-card-text-col { flex-shrink: 0; }
  .expertise-card-image-col { flex: 1; min-height: 0; overflow: hidden; justify-content: flex-start; }
  .expertise-card-image-wrap {
    width: 100%; max-width: 100%;
    height: 100%; aspect-ratio: auto;
  }
  .expertises-nav { padding: 0 1.6rem 1.6rem; }
  .expertises-nav-label { display: none; }
  .expertises-nav-item { justify-content: center; }

  .horiz-gallery-track { padding: 2.4rem 1.6rem; gap: 1.6rem; }
  .horiz-gallery-card { width: 80vw; min-width: 0; gap: 1.2rem; }
  .horiz-gallery-name { font-size: clamp(2rem, 6vw, 2.8rem); }
  .horiz-gallery-meta { flex-wrap: wrap; gap: 0.8rem; }
  .horiz-gallery-cta { width: 28vw; min-width: 12rem; }
  .horiz-gallery-cta-text { font-size: 1.6rem; text-align: center; }

  .agency-section { padding: 9.6rem 1.6rem 8rem; }
  .masonry-grid__header { flex-direction: column; gap: 2.4rem; grid-column: 1; grid-row: 1; }
  .masonry-grid__header-side { flex: none; }
  .masonry-grid__heading { font-size: clamp(4.8rem, 14vw, 7.2rem); }
  .masonry-grid__header-right { flex: none; max-width: none; gap: 1.6rem; padding-top: 0; }
  .masonry-grid__intro-desc { font-size: 1.6rem; }
  .masonry-grid__btn { height: 4.4rem; padding: 0 0.8rem 0 2.4rem; font-size: 1.4rem; min-width: 44px; }
  .masonry-grid__btn-dot { width: 3.2rem; height: 3.2rem; margin-left: 1.6rem; }
  .masonry-grid { grid-template-columns: 1fr; grid-template-rows: auto auto auto auto auto; margin-bottom: 4rem; }
  .masonry-grid__photo-large { grid-column: 1; grid-row: 2; aspect-ratio: 4 / 3; }
  .masonry-grid__photo-side-1 { grid-column: 1; grid-row: 3; aspect-ratio: 4 / 3; }
  .masonry-grid__photo-side-2 { grid-column: 1; grid-row: 4; aspect-ratio: 4 / 3; }
  .masonry-grid__photo-side-3 { grid-column: 1; grid-row: 5; aspect-ratio: 4 / 3; }
  .masonry-grid__values { grid-column: 1; grid-row: 6; padding-top: 2.4rem; }
  .masonry-grid__value-item { flex-direction: column; gap: 1.2rem; padding: 2rem 0; }
  .masonry-grid__value-title { flex: none; font-size: clamp(3.4rem, 11vw, 4.8rem); }
  .masonry-grid__value-desc { font-size: 1.6rem; }

  .cta-section { padding: 7.2rem 1.6rem 4rem; }
  .cta-container { gap: 3.2rem; }
  .cta-title { font-size: clamp(3.2rem, 10vw, 5.6rem); }
  .cta-btn { height: 4.4rem; padding: 0 0.8rem 0 2.4rem; font-size: 1.4rem; min-height: 44px; }
  .cta-btn-dot { width: 3.2rem; height: 3.2rem; margin-left: 1.6rem; }

  .footer { padding: 4rem 1.6rem 2.4rem; }
  .footer-top { padding-bottom: 3.2rem; }
  .footer-info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2.4rem 1.6rem; }
  .footer-info-col { gap: 0.4rem; }
  .footer-address-link p, .footer-info-link { font-size: 1.3rem; }
  .footer-copyright { font-size: 1.1rem; }
  .footer-photos { height: 20rem; gap: 0.8rem; }
  .footer-photo-wrap:nth-child(3), .footer-photo-wrap:nth-child(4) { display: none; }
  .footer-photos { grid-template-columns: repeat(2, 1fr); }

  .nav-overlay { padding: 8rem 1.6rem 2.4rem; }
  .nav-link { font-size: clamp(2rem, 8vw, 5.2rem); gap: 1.2rem; }
  .nav-info { grid-template-columns: 1fr 1fr; gap: 2rem; padding-top: 3rem; }
  .nav-info a, .nav-info p { font-size: 1.3rem; }

  .burger { width: 8rem; height: 4.4rem; font-size: 1.2rem; right: 1.6rem; top: 1.6rem; }
  .logo { left: 1.6rem; top: 1.8rem; }
  .logo-text { font-size: 1.8rem; }
}

/* ============================================
   REDUCED MOTION
   ============================================ */
@media (prefers-reduced-motion: reduce) {
  .hero-outer { height: auto !important; }
  .hero-sticky { position: relative; height: auto; }
  .hero-overflow { overflow: visible; }
  .hero-step1 { flex-wrap: wrap; width: 100%; will-change: auto; }
  .hero-left { width: 100%; min-height: 100vh; min-height: var(--app-height, 100lvh); }
  .project-card { width: 100%; min-height: 50vh; will-change: auto; }

  .gallery-outer { height: auto !important; }
  .gallery-sticky { position: relative; height: auto; flex-direction: column; }
  .gallery-left { width: 100%; height: auto; overflow: visible; }
  .gallery-strip { will-change: auto; transform: none !important; }
  .gallery-card { max-width: 60rem; }
  .gallery-right { padding: 4rem 2rem; align-items: flex-start; justify-content: flex-start; }
  .gallery-img { position: relative; top: 0; height: 100%; will-change: auto; transform: none !important; }
  .gallery-char, .gallery-list-num, .gallery-list-label, .gallery-desc, .gallery-btn {
    will-change: auto; transform: none !important; opacity: 1 !important; visibility: visible !important;
  }
  .gallery-list-line { will-change: auto; transform: none !important; }

  .expertises-section { height: auto !important; }
  .expertises-sticky { position: relative; height: auto; overflow: visible; }
  .expertises-cards-container { position: relative; display: flex; flex-direction: column; }
  .expertise-card { position: relative; height: auto; min-height: 80vh; }
  .expertise-card-inner { position: relative; height: auto; padding: 8rem 3rem; }
  .expertises-heading { position: relative; top: auto; left: auto; padding: 8rem 3rem 4rem; }
  .expertises-nav { display: none; }

  .horiz-gallery { height: auto !important; }
  .horiz-gallery-sticky { position: relative; height: auto; overflow-x: auto; }
  .horiz-gallery-track { will-change: auto; transform: none !important; }
}

/* ============================================
   EXPERTISE CARD FRAMES — SVG texture materials
   Uses feTurbulence-generated SVG patterns as the
   element background. Padding (instead of border)
   reveals the texture as the visible frame area.
   The image fills only the content box (inside
   the padding), leaving texture exposed around it.
   ============================================ */

/* All frame cards: no radius, no border — padding creates the frame depth */
#exp-card-0 .expertise-card-image-wrap,
#exp-card-1 .expertise-card-image-wrap,
#exp-card-2 .expertise-card-image-wrap,
#exp-card-3 .expertise-card-image-wrap {
  border-radius: 0;
  background-repeat: repeat;
  background-size: 300px 300px;
}

/* ---- Card 01 : Baguette noyer — dark walnut wood ----
   feTurbulence fractalNoise with low x-frequency (0.012)
   creates long horizontal grain lines. Color matrix maps
   desaturated noise → warm brown walnut range.
   Dark: rgb(45,18,5) · Mid: rgb(107,49,15) · Light: rgb(169,80,25)
   ---- */
#exp-card-0 .expertise-card-image-wrap {
  padding: 20px;
  /* Noyer — grain directionnel : fractalNoise très étiré horizontalement (longues
     veines) + tables de couleurs non-monotones qui cassent le bruit en bandes
     claires/foncées = veines de bois. Brun noyer profond. */
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='280' height='280'><filter id='w'><feTurbulence type='fractalNoise' baseFrequency='0.012 0.5' numOctaves='5' seed='7' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/><feComponentTransfer><feFuncR type='table' tableValues='0.15 0.37 0.19 0.45 0.24 0.39 0.17'/><feFuncG type='table' tableValues='0.07 0.19 0.10 0.24 0.12 0.20 0.08'/><feFuncB type='table' tableValues='0.03 0.10 0.05 0.12 0.06 0.10 0.04'/></feComponentTransfer></filter><rect width='280' height='280' filter='url(%23w)'/></svg>");
  background-size: 280px 280px;
  background-repeat: repeat;
  box-shadow:
    inset 0 0 16px rgba(0, 0, 0, 0.38),
    0 14px 34px rgba(0, 0, 0, 0.5);
}

/* ---- Card 02 : Laiton brossé — brushed brass ----
   feTurbulence (not fractalNoise) with very low x-frequency
   (0.0015) creates long horizontal brush strokes. Color
   matrix maps to gold range. Inset box-shadow adds the
   characteristic light-catch shimmer of brushed metal.
   ---- */
#exp-card-1 .expertise-card-image-wrap {
  padding: 20px;
  /* Chêne clair — même technique de grain directionnel, mais veines plus ouvertes
     (échelle plus large), seed différent et gamme de brun miel plus claire :
     une essence visiblement distincte du noyer. */
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='340' height='340'><filter id='o'><feTurbulence type='fractalNoise' baseFrequency='0.016 0.34' numOctaves='5' seed='23' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/><feComponentTransfer><feFuncR type='table' tableValues='0.40 0.62 0.46 0.69 0.50 0.63 0.44'/><feFuncG type='table' tableValues='0.26 0.44 0.31 0.50 0.34 0.45 0.29'/><feFuncB type='table' tableValues='0.12 0.24 0.15 0.28 0.17 0.25 0.13'/></feComponentTransfer></filter><rect width='340' height='340' filter='url(%23o)'/></svg>");
  background-size: 340px 340px;
  box-shadow:
    inset 0 0 16px rgba(28, 14, 0, 0.3),
    0 14px 34px rgba(0, 0, 0, 0.45);
}

/* ---- Card 03 : Caisse noire — matte black museum frame ----
   High-frequency fractalNoise (0.85) with gamma compression
   creates a subtle micro-texture like velvet or matte lacquer.
   All values mapped to near-black range (rgb 3–33 per channel).
   ---- */
#exp-card-2 .expertise-card-image-wrap {
  padding: 20px;
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='m'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' seed='3'/><feColorMatrix type='saturate' values='0'/><feComponentTransfer><feFuncR type='gamma' amplitude='0.12' exponent='2.5' offset='0.01'/><feFuncG type='gamma' amplitude='0.12' exponent='2.5' offset='0.01'/><feFuncB type='gamma' amplitude='0.12' exponent='2.5' offset='0.01'/></feComponentTransfer></filter><rect width='200' height='200' filter='url(%23m)'/></svg>");
  background-size: 200px 200px;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.05),
    inset 0 0 20px rgba(0, 0, 0, 0.9),
    0 14px 36px rgba(0, 0, 0, 0.6);
}

/* ---- Card 04 : Noir mat — grain + biseau directionnel + ombre portée. */
#exp-card-3 .expertise-card-image-wrap {
  padding: 20px;
  background-color: #0e0c0a;
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='p'><feTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='5' seed='11'/><feColorMatrix type='saturate' values='0'/><feComponentTransfer><feFuncR type='linear' slope='0.2' intercept='0.02'/><feFuncG type='linear' slope='0.2' intercept='0.02'/><feFuncB type='linear' slope='0.2' intercept='0.02'/></feComponentTransfer></filter><rect width='180' height='180' filter='url(%23p)'/></svg>");
  background-size: 160px 160px;
  box-shadow:
    inset 3px 3px 6px rgba(255, 255, 255, 0.10),
    inset -4px -4px 9px rgba(0, 0, 0, 0.75),
    inset 0 0 0 1px rgba(10, 8, 6, 0.9),
    0 12px 34px rgba(0, 0, 0, 0.55);
}

/* ── Nav dots — identity colors, mapped by destination (overlay + hero nav) ── */
/* Accueil — white (the overlay it sits in is dark) */
a[href="index.html"] .nav-dot,
a[href="index.html"] .hero-nav-dot      { background-color: var(--white); }
/* À propos — green */
a[href="a-propos.html"] .nav-dot,
a[href="a-propos.html"] .hero-nav-dot   { background-color: var(--green); }
/* Encadrement — orange (terracotta) */
a[href="encadrement.html"] .nav-dot,
a[href="encadrement.html"] .hero-nav-dot { background-color: var(--terra); }
/* Galerie — mauve */
a[href="galerie.html"] .nav-dot,
a[href="galerie.html"] .hero-nav-dot    { background-color: var(--pink); }
/* FAQ — ochre */
a[href="faq.html"] .nav-dot,
a[href="faq.html"] .hero-nav-dot        { background-color: var(--ochre); }
/* Contact — blue */
a[href="contact.html"] .nav-dot,
a[href="contact.html"] .hero-nav-dot    { background-color: var(--blue); }

/* ── Project cards — background colors ──────── */
#hero-card-1 { --card-bg: var(--terra); }
#hero-card-2 { --card-bg: var(--green); }
#hero-card-3 { --card-bg: var(--blue); }

/* ── Expertise cards — color + stacking ─────── */
#exp-card-0 { --card-color: var(--blue);  z-index: 4; }
#exp-card-1 { --card-color: var(--pink);  z-index: 3; }
#exp-card-2 { --card-color: var(--green); z-index: 2; }
#exp-card-3 { --card-color: var(--beige); z-index: 1; }

/* Page Encadrement : dégradé propre du blanc au bleu (pas d'orange) */
#encadrement-types #exp-card-0 { --card-color: var(--white); }
#encadrement-types #exp-card-3 { --card-color: var(--blue); }

/* ── Footer static info ──────────────────────── */
.footer-info-static { opacity: 0.5; cursor: default; }

/* ============================================
   PAGE: À PROPOS
   ============================================ */

/* --- Skip link -------------------------------- */
.about-skip-link {
  position: absolute;
  top: -100%;
  left: 1.6rem;
  z-index: 99999;
  padding: 1.2rem 2rem;
  background: var(--terra);
  color: var(--white);
  font-family: var(--font-neue);
  font-size: 1.4rem;
  font-weight: 600;
  border-radius: 0.4rem;
  text-decoration: none;
  transition: top 0.2s ease;
}

.about-skip-link:focus {
  top: 1.6rem;
  outline: 2px solid var(--white);
  outline-offset: 2px;
}

/* --- Section label (shared) ------------------- */
.about-section-label {
  display: block;
  font-family: var(--font-platt);
  font-weight: 600;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--grey);
  margin-bottom: 4rem;
}

.about-section-label--light {
  color: rgba(255, 255, 255, 0.4);
}

/* ============================================
   ABOUT HERO
   ============================================ */
.about-hero {
  position: relative;
  min-height: 100vh;
  min-height: var(--app-height, 100lvh);
  background-color: var(--black);
  display: grid;
  grid-template-columns: 55% 45%;
  overflow: hidden;
}

.about-hero__left {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 12rem 6rem 6rem 6rem;
  position: relative;
  z-index: 2;
}

.about-hero__overline {
  font-family: var(--font-platt);
  font-weight: 600;
  font-size: 1.1rem;
  text-transform: uppercase;
  font-variant: small-caps;
  letter-spacing: 0.2em;
  color: var(--terra);
  margin-bottom: 2.4rem;
}

.about-hero__title {
  font-family: var(--font-platt);
  font-weight: 700;
  font-size: clamp(7rem, 10vw, 14rem);
  line-height: 0.9;
  letter-spacing: -0.03em;
  color: var(--white);
  margin-bottom: 3.2rem;
}

/* Smaller variant for long single-word titles (e.g. "Encadrement") so they
   don't overflow onto the hero image. */
.about-hero__title--compact {
  font-size: clamp(5.6rem, 8vw, 11rem);
}

.about-hero__desc {
  font-family: var(--font-neue);
  font-weight: 300;
  font-size: clamp(1.6rem, 1.4vw, 2rem);
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.65);
  max-width: 46rem;
  margin-bottom: auto;
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
}

.about-hero__scroll {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  margin-top: 6rem;
  color: rgba(255, 255, 255, 0.35);
}

.about-hero__scroll-arrow {
  display: flex;
  align-items: center;
}

.about-hero__scroll-label {
  font-family: var(--font-platt);
  font-weight: 600;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
}

.about-hero__right {
  position: relative;
  display: flex;
  flex-direction: column;
}

.about-hero__img-wrap {
  position: relative;
  overflow: hidden;
  flex: 1;
}

.about-hero__img-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(187, 110, 68, 0.15);
  z-index: 1;
  pointer-events: none;
}

.about-hero__img {
  /* Absolutely positioned so top/height are % of the wrap HEIGHT (margin-%
     would be relative to WIDTH and over-shift on narrow viewports → black gap).
     Image is 130% tall, offset -15%, so it covers the wrap with 15% slack each
     side — enough for the parallax (yPercent -8 ≈ 10.4% of height) to slide
     without ever exposing the dark section bg above the green band. */
  position: absolute;
  top: -15%;
  left: 0;
  width: 100%;
  height: 130%;
  object-fit: cover;
  display: block;
  will-change: transform;
}

.about-hero__band {
  padding: 1.6rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  background-color: var(--green);
  flex-shrink: 0;
}

/* Band colour follows the page's nav-dot identity colour */
.about-hero__band--terra { background-color: var(--terra); }
.about-hero__band--pink  { background-color: var(--pink); }
.about-hero__band--ochre { background-color: var(--ochre); }
.about-hero__band--blue  { background-color: var(--blue); }

/* Placeholder white section for the secondary pages (between header & footer) */
.page-blank {
  min-height: 100vh;
  background-color: var(--white);
}

/* ============================================
   FAQ — accordéon par catégories
   ============================================ */
.faq-section {
  background-color: var(--beige);
  padding: 12rem 3rem 14rem;
}

.faq-inner {
  max-width: 92rem;
  margin: 0 auto;
}

.faq-section__heading {
  font-family: var(--font-neue);
  font-weight: 400;
  font-size: clamp(4.8rem, 8vw, 8rem);
  line-height: 1;
  letter-spacing: -0.02em;
  text-align: center;
  margin-bottom: 6rem;
}

.faq-category + .faq-category {
  margin-top: 5.6rem;
}

.faq-category__title {
  font-family: var(--font-platt);
  font-weight: 600;
  font-size: clamp(1.8rem, 2.4vw, 2.4rem);
  letter-spacing: -0.02em;
  margin-bottom: 1.6rem;
  padding-left: 0.2rem;
}

.faq-list {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.faq-item {
  background-color: var(--white);
  border: 1px solid rgba(22, 18, 14, 0.1);
  border-radius: 1.2rem;
  overflow: hidden;
}

.faq-item__button {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding: 2.2rem 2.4rem;
  text-align: left;
  cursor: pointer;
  background: none;
  border: none;
  color: var(--black);
  transition: background-color 0.3s ease;
}

.faq-item__button:hover {
  background-color: rgba(22, 18, 14, 0.03);
}

.faq-item__question {
  font-family: var(--font-neue);
  font-weight: 500;
  font-size: clamp(1.6rem, 2vw, 1.9rem);
  line-height: 1.4;
}

.faq-item__icon {
  flex: none;
  width: 2rem;
  height: 2rem;
  color: var(--grey);
  transition: transform 0.35s var(--ease-out-quart);
}

.faq-item.is-open .faq-item__icon {
  transform: rotate(180deg);
}

.faq-item__answer {
  height: 0;
  overflow: hidden;
}

.faq-item__answer-text {
  margin: 0;
  padding: 0 2.4rem 2.4rem;
  font-family: var(--font-neue);
  font-weight: 400;
  font-size: clamp(1.5rem, 1.8vw, 1.7rem);
  line-height: 1.65;
  color: var(--grey);
}

@media (max-width: 767px) {
  .faq-section { padding: 7.2rem 1.6rem 9rem; }
  .faq-section__heading { margin-bottom: 4rem; }
  .faq-category + .faq-category { margin-top: 4rem; }
  .faq-item__button { padding: 1.8rem 1.8rem; }
  .faq-item__answer-text { padding: 0 1.8rem 1.8rem; }
}

/* ============================================
   CONTACT — carte + formulaire
   ============================================ */
.contact-map {
  background-color: var(--beige);
}
.contact-map {
  position: relative;
}
.contact-map__frame {
  display: block;
  width: 100%;
  height: 60vh;
  min-height: 38rem;
  border: 0;
  /* La carte n'intercepte ni le scroll ni le clic tant qu'elle n'est pas activée */
  pointer-events: none;
}
.contact-map.is-active .contact-map__frame {
  pointer-events: auto;
}

.contact-form-section {
  background-color: var(--beige);
  padding: 12rem 3rem 14rem;
}
.contact-form-wrap {
  max-width: 72rem;
  margin: 0 auto;
}
.contact-form__heading {
  font-family: var(--font-neue);
  font-weight: 400;
  font-size: clamp(3.6rem, 6vw, 6.4rem);
  line-height: 1;
  letter-spacing: -0.02em;
  margin: 1.6rem 0 4.8rem;
}
.contact-form {
  display: flex;
  flex-direction: column;
  gap: 2.4rem;
}
.contact-form__field {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}
.contact-form__label {
  font-family: var(--font-platt);
  font-weight: 600;
  font-size: 1.1rem;
  text-transform: uppercase;
  letter-spacing: -0.03em;
  opacity: 0.6;
}
.contact-form__input,
.contact-form__select,
.contact-form__textarea {
  font-family: var(--font-neue);
  font-weight: 400;
  font-size: 1.6rem;
  color: var(--black);
  background-color: var(--white);
  border: 1px solid rgba(22, 18, 14, 0.15);
  border-radius: 0.8rem;
  padding: 1.4rem 1.6rem;
  transition: border-color 0.3s ease;
  width: 100%;
}
.contact-form__textarea {
  resize: vertical;
  min-height: 14rem;
  line-height: 1.5;
}
.contact-form__input:focus,
.contact-form__select:focus,
.contact-form__textarea:focus {
  outline: none;
  border-color: rgba(22, 18, 14, 0.55);
}
/* Custom chevron for the select */
.contact-form__select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='%236B6560'%3E%3Cpath fill-rule='evenodd' d='M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z' clip-rule='evenodd'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1.6rem center;
  padding-right: 4.4rem;
}
.contact-form__submit {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 2rem;
  height: 5.2rem;
  padding: 0 1rem 0 3rem;
  margin-top: 0.8rem;
  border-radius: 10rem;
  background-color: var(--black);
  color: var(--white);
  font-family: var(--font-neue);
  font-weight: 500;
  font-size: 1.6rem;
  cursor: pointer;
  transition: transform 0.4s var(--ease-out-quart), opacity 0.3s ease;
}
.contact-form__submit:hover { transform: scale(1.03); }
.contact-form__submit-dot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.6rem;
  height: 3.6rem;
  border-radius: 50%;
  background-color: var(--white);
}
.contact-form__submit-dot::after {
  content: "";
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background-color: var(--black);
}
.contact-form__status {
  margin: 0;
  font-family: var(--font-neue);
  font-size: 1.5rem;
  color: var(--green);
  min-height: 1.5rem;
}

@media (max-width: 767px) {
  .contact-map__frame { height: 48vh; min-height: 30rem; }
  .contact-form-section { padding: 7.2rem 1.6rem 9rem; }
  .contact-form__heading { margin-bottom: 3.2rem; }
}

/* Coordonnées — 4 colonnes + icônes dessinées au scroll */
.contact-coords .about-values__grid { grid-template-columns: repeat(4, 1fr); }
.contact-coords__head {
  display: flex;
  align-items: center;
  gap: 1.4rem;
}
.contact-coords__head .about-values__title { margin: 0; }
/* La description s'aligne sur le titre (icône 3,2rem + gap 1,4rem), pas sur l'icône */
.contact-coords .about-values__desc { padding-left: 4.6rem; margin-top: 1.8rem; }
.contact-coords__icon {
  display: block;
  flex-shrink: 0;
  width: 3.2rem;
  height: 3.2rem;
  color: var(--terra);
}
.contact-coords__icon svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
/* Icônes-liens (Adresse / Téléphone / E-mail) */
a.contact-coords__icon {
  cursor: pointer;
  transform-origin: center;
  transition: transform 0.3s var(--ease-out-quart);
}
a.contact-coords__icon:hover { transform: scale(1.15); }
a.contact-coords__icon:focus-visible {
  outline: 2px solid var(--terra);
  outline-offset: 0.4rem;
  border-radius: 0.4rem;
}
@media (max-width: 1079px) {
  .contact-coords .about-values__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .contact-coords .about-values__grid { grid-template-columns: 1fr; }
}

.about-hero__band-meta {
  display: flex;
  align-items: center;
}

.about-hero__band-category {
  font-family: var(--font-platt);
  font-weight: 600;
  font-size: 1.1rem;
  text-transform: uppercase;
  opacity: 0.6;
}

.about-hero__band-name-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.about-hero__band-name {
  font-family: var(--font-neue);
  font-weight: 400;
  font-size: clamp(2.4rem, 2.5vw, 3.6rem);
  letter-spacing: -0.02em;
}

.about-hero__band-num {
  font-family: var(--font-platt);
  font-weight: 600;
  font-size: 1.1rem;
  opacity: 0.4;
}

/* ============================================
   ABOUT WELCOME — Image expand to fullscreen
   ============================================ */
/* Welcome scroll section.
   Mechanic: a STATIC "caisse noire" frame (identical to the green Services card,
   #exp-card-2) sits centred; the photo — a full-viewport object-fit:cover layer —
   is clipped to the frame's aperture at rest and reveals outward to fullscreen as
   you scroll (no scaling of the frame, no black letterbox bars).
   Everything is positioned with calc() from the viewport, so it is responsive
   natively; JS only drives --aw-reveal (0 → 1) on scroll. */
.about-welcome {
  position: relative;
  background-color: var(--white);
  /* Scroll distance (sticky spacer). Overridden by JS via --about-welcome-height. */
  height: var(--about-welcome-height, 250vh);

  /* Aperture geometry (the visible photo window at rest), derived from the
     viewport. The frame is drawn around this; the photo clip reveals from it. */
  --aw-reveal: 0;
  --aw-pad: 2rem;
  --aw-w: clamp(26rem, 32vw, 42rem);
  --aw-h: calc(var(--aw-w) / 1.5);
  --aw-x: calc((100vw - var(--aw-w)) / 2);
  --aw-y: calc((100vh - var(--aw-h)) / 2);
}

.about-welcome__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  background-color: var(--white);
}

/* Static "caisse noire" frame — matte black museum moulding, identical to the
   Services card #exp-card-2: a textured padding band + inset depth + drop shadow.
   It never moves or scales; the growing photo simply covers it. */
.about-welcome__frame {
  position: absolute;
  top: calc(var(--aw-y) - var(--aw-pad));
  left: calc(var(--aw-x) - var(--aw-pad));
  width: calc(var(--aw-w) + 2 * var(--aw-pad));
  height: calc(var(--aw-h) + 2 * var(--aw-pad));
  padding: var(--aw-pad);
  z-index: 0;
  /* Matte moulding in the brand green (--green #697A6C, the À-propos theme),
     given a real frame's depth: a high-contrast matte grain (overlay), a
     directional bevel (light top-left / shade bottom-right), a deep inner
     vignette, and a soft drop shadow. The green base keeps the exact hue. */
  /* Darker green base for a richer matte moulding */
  background-color: #4f5d53;
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='m'><feTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='5' seed='3'/><feColorMatrix type='saturate' values='0'/><feComponentTransfer><feFuncR type='linear' slope='0.95' intercept='0.04'/><feFuncG type='linear' slope='0.95' intercept='0.04'/><feFuncB type='linear' slope='0.95' intercept='0.04'/></feComponentTransfer></filter><rect width='180' height='180' filter='url(%23m)'/></svg>");
  background-repeat: repeat;
  background-size: 160px 160px;
  background-blend-mode: overlay;
  box-shadow:
    /* lit bevel (top-left) */
    inset 3px 3px 5px rgba(255, 255, 255, 0.18),
    /* shaded bevel (bottom-right) */
    inset -3px -3px 8px rgba(12, 18, 14, 0.65),
    /* crisp inner lip + deep inner vignette toward the photo */
    inset 0 0 0 1px rgba(10, 16, 12, 0.7),
    inset 0 0 30px rgba(10, 16, 12, 0.8),
    /* drop shadow on the wall */
    0 18px 44px rgba(14, 22, 16, 0.55);
  pointer-events: none;
}


/* The photo: a full-viewport cover layer, clipped to the aperture at rest and
   revealed outward to fullscreen via --aw-reveal. object-fit:cover means it
   always fills the screen — never any black letterbox bars. */
.about-welcome__img {
  /* The image is sized to the FRAME aperture at rest and grows to fullscreen as
     --aw-reveal goes 0 → 1. Because the desktop aperture matches the photo ratio
     (3:2), object-fit: cover shows the WHOLE photo at rest — identical framing on
     every screen size (no viewport-aspect-dependent crop). It only re-crops as it
     grows to cover the viewport at full reveal (no black bars). */
  position: absolute;
  top: calc(var(--aw-y) * (1 - var(--aw-reveal)));
  left: calc(var(--aw-x) * (1 - var(--aw-reveal)));
  width: calc(var(--aw-w) + (100vw - var(--aw-w)) * var(--aw-reveal));
  height: calc(var(--aw-h) + (100vh - var(--aw-h)) * var(--aw-reveal));
  object-fit: cover;
  object-position: 50% 56%;
  display: block;
  z-index: 1;
  /* Rounded corners only DURING the zoom — 0 at rest (crisp frame) and 0 at full
     zoom. Parabola 4·r·(1−r) peaks at mid-reveal. */
  border-radius: calc(0.8rem * 4 * var(--aw-reveal) * (1 - var(--aw-reveal)));
}

/* Dark gradient scrim for text legibility once fullscreen (hidden at rest) */
.about-welcome__scrim {
  position: absolute;
  inset: 0;
  z-index: 2;
  opacity: 0;
  background: linear-gradient(
    to top,
    rgba(22, 18, 14, 0.72) 0%,
    rgba(22, 18, 14, 0.4) 28%,
    rgba(22, 18, 14, 0) 55%
  );
  pointer-events: none;
}

/* Welcome heading — centred horizontally, 20% from the bottom */
.about-welcome__title {
  position: absolute;
  left: 50%;
  bottom: 20%;
  transform: translateX(-50%);
  margin: 0;
  width: 100%;
  padding: 0 3rem;
  text-align: center;
  font-family: var(--font-platt);
  font-weight: 500;
  font-size: clamp(3.6rem, 7vw, 8.4rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--white);
  pointer-events: none;
  z-index: 3;
}

.about-welcome__word {
  display: inline-block;
  /* Per-word reveal mask */
  overflow: hidden;
  vertical-align: bottom;
}

.about-welcome__word > span {
  display: inline-block;
}

@media (max-width: 768px) {
  .about-welcome {
    --aw-pad: 1.4rem;
    /* Portrait starting frame on mobile (taller than wide), centred on the person */
    --aw-w: min(54vw, 24rem);
    --aw-h: calc(var(--aw-w) * 1.38);
  }

  .about-welcome__title {
    font-size: clamp(3.2rem, 10vw, 5.2rem);
    padding: 0 2rem;
  }
}

/* Reduced-motion / no-JS static fallback: photo already fullscreen (cover),
   frame hidden, title visible. */
.about-welcome.is-static {
  --aw-reveal: 1;
}

.about-welcome.is-static .about-welcome__frame {
  display: none;
}

.about-welcome.is-static .about-welcome__scrim {
  opacity: 1;
}

.about-welcome.is-static .about-welcome__word > span {
  transform: none;
}

/* ============================================
   ABOUT INTRO — Histoire
   ============================================ */
.about-intro {
  background-color: var(--beige);
  padding: 12rem 6rem;
  position: relative;
  overflow: hidden;
}

.about-intro__inner {
  max-width: 80rem;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

.about-intro__text-wrap {
  position: relative;
  z-index: 2;
}

.about-intro__entry {
  display: grid;
  grid-template-columns: 6rem 1fr;
  gap: 3rem;
  padding: 3.2rem 0;
  border-top: 1px solid rgba(14, 14, 14, 0.15);
  align-items: start;
}

.about-intro__num {
  font-family: var(--font-platt);
  font-weight: 600;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: -0.05em;
  color: var(--terra);
  padding-top: 0.6rem;
}

.about-intro__text {
  font-family: var(--font-neue);
  font-weight: 300;
  font-size: clamp(2rem, 2.5vw, 3rem);
  line-height: 1.55;
  color: var(--black);
}

.about-intro__year {
  position: absolute;
  bottom: -4rem;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-platt);
  font-weight: 700;
  font-size: clamp(12rem, 20vw, 24rem);
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--black);
  opacity: 0.06;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
  z-index: 1;
}

/* ============================================
   ABOUT VALUES — Savoir-faire
   ============================================ */
.about-values {
  background-color: var(--black);
  color: var(--white);
  padding: 10rem 6rem 12rem;
}

.about-values__rule {
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  margin-bottom: 4rem;
}

.about-values__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
}

.about-values__col {
  padding: 4rem 4rem 4rem 0;
}

.about-values__col + .about-values__col {
  padding-left: 4rem;
  border-left: 1px solid rgba(255, 255, 255, 0.15);
}

.about-values__num {
  display: block;
  font-family: var(--font-platt);
  font-weight: 600;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--terra);
  margin-bottom: 2rem;
}

.about-values__title {
  font-family: var(--font-platt);
  font-weight: 600;
  font-size: clamp(2.4rem, 2.5vw, 3.2rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--white);
  margin-bottom: 1.6rem;
}

.about-values__desc {
  font-family: var(--font-neue);
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.6);
  max-width: 34rem;
}

/* ============================================
   ABOUT WORKSHOP — L'espace
   ============================================ */
.about-workshop {
  background-color: var(--beige);
  padding: 10rem 3rem 12rem;
}

.masonry-grid--about {
  grid-template-columns: repeat(3, 1fr);
}

.masonry-grid--about .masonry-grid__header         { grid-column: 1 / 3; grid-row: 1; padding: 3rem; }
.masonry-grid--about .masonry-grid__photo-large    { grid-column: 1 / 3; grid-row: 2; }
.masonry-grid--about .masonry-grid__photo-side-1   { grid-column: 3; grid-row: 1; }
.masonry-grid--about .masonry-grid__photo-side-2   { grid-column: 3; grid-row: 2; }
.masonry-grid--about .masonry-grid__photo-side-3   { grid-column: 1; grid-row: 3 / 5; }
.masonry-grid--about .masonry-grid__values         { grid-column: 2 / 4; grid-row: 3 / 5; padding: 3rem; }

/* Mirror variant (Encadrement) — desktop only : colonnes inversées gauche↔droite
   (image → texte au lieu de texte → image). Le responsable tablette/mobile reste
   géré par les règles --about (donc non miroité, ce qui n'a pas d'impact empilé). */
@media (min-width: 1080px) {
  .masonry-grid--mirror .masonry-grid__header      { grid-column: 2 / 4; }
  .masonry-grid--mirror .masonry-grid__photo-large { grid-column: 2 / 4; }
  .masonry-grid--mirror .masonry-grid__photo-side-1{ grid-column: 1; }
  .masonry-grid--mirror .masonry-grid__photo-side-2{ grid-column: 1; }
  .masonry-grid--mirror .masonry-grid__photo-side-3{ grid-column: 3; }
  .masonry-grid--mirror .masonry-grid__values      { grid-column: 1 / 3; }
}

/* ── Galerie : enchaînement organique des deux masonry via un pont d'images ── */
.galerie-flush-b { padding-bottom: 0; }
.galerie-flush-b .masonry-grid { margin-bottom: 0; }
.galerie-flush-t { padding-top: 0; }

/* Bloc « Vernissages » (galerie, miroir) : texte sous le titre, centré verticalement */
.galerie-flush-t .masonry-grid__header { flex-direction: column; justify-content: center; gap: 1.6rem; }
.galerie-flush-t .masonry-grid__header-side { flex: none; }
.galerie-flush-t .masonry-grid__header-right { flex: none; padding-top: 0; }

.galerie-bridge {
  background-color: var(--beige);
  padding: 1.5rem 3rem;
}
.galerie-bridge__inner {
  max-width: 138rem;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 2fr; /* petite image puis large, même ligne */
  gap: 1.5rem;
}
.galerie-bridge__cell {
  overflow: hidden;
  border-radius: 0.6rem;
  height: 46vh;
}
.galerie-bridge__cell img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (max-width: 767px) {
  .galerie-bridge { padding: 1.2rem 1.6rem; }
  .galerie-bridge__cell { height: 26vh; }
}

.about-workshop__address {
  font-family: var(--font-neue);
  font-style: normal;
  font-weight: 500;
  font-size: 1.4rem;
  line-height: 1.9;
  color: var(--terra);
  letter-spacing: 0.01em;
  margin-top: 0.4rem;
}

.about-workshop__address .masonry-grid__btn {
  margin-top: 0.8rem;
}

/* ============================================
   ABOUT TEAM — L'équipe
   ============================================ */
.about-team {
  background-color: var(--black);
  color: var(--white);
  padding: 10rem 6rem 12rem;
}

.about-team__inner {
  max-width: 90rem;
  margin: 0 auto;
  display: flex;
  justify-content: center;
}

.about-team__quote {
  display: flex;
  flex-direction: column;
  gap: 3.2rem;
}

.about-team__quote p {
  font-family: var(--font-platt);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(2.4rem, 3.5vw, 4.8rem);
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--white);
  text-align: center;
  max-width: 75ch;
}

.about-team__attribution {
  font-family: var(--font-neue);
  font-weight: 400;
  font-size: 1.4rem;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.45);
  text-align: center;
  font-style: normal;
}

/* ============================================
   ABOUT PAGE — Focus indicator
   ============================================ */
.about-hero__left a:focus-visible,
.about-workshop__text a:focus-visible {
  outline: 2px solid var(--terra);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ============================================
   ABOUT — RESPONSIVE TABLET (max 1079px)
   ============================================ */
@media (max-width: 1079px) {
  .about-hero {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr auto;
    min-height: var(--app-height, 100lvh);
  }

  .about-hero__left {
    padding: 12rem 4rem 4rem;
    order: 1;
  }

  .about-hero__right {
    order: 2;
    height: 50vw;
    min-height: 32rem;
  }

  .about-hero__title {
    font-size: clamp(6rem, 12vw, 10rem);
  }

  .about-hero__scroll {
    margin-top: 4rem;
  }

  .about-intro {
    padding: 8rem 4rem;
  }

  .about-intro__text {
    font-size: clamp(1.8rem, 2.5vw, 2.4rem);
  }

  .about-values {
    padding: 8rem 4rem 10rem;
  }

  .about-values__grid {
    grid-template-columns: 1fr;
  }

  .about-values__col {
    padding: 4rem 0;
    border-left: none;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
  }

  .about-values__col + .about-values__col {
    padding-left: 0;
    border-left: none;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
  }

  .about-values__col:first-child {
    border-top: none;
    padding-top: 0;
  }

  .about-workshop {
    padding: 8rem 4rem 10rem;
  }

  /* About masonry — tablet: 2 columns, stacked logically */
  .masonry-grid--about {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    grid-auto-rows: auto;
  }
  .masonry-grid--about .masonry-grid__header        { grid-column: 1 / 3; grid-row: 1; padding: 0 0 1.6rem; }
  .masonry-grid--about .masonry-grid__photo-large   { grid-column: 1 / 3; grid-row: 2; aspect-ratio: 16 / 9; }
  .masonry-grid--about .masonry-grid__photo-side-1  { grid-column: 1; grid-row: 3; aspect-ratio: 4 / 3; }
  .masonry-grid--about .masonry-grid__photo-side-2  { grid-column: 2; grid-row: 3; aspect-ratio: 4 / 3; }
  .masonry-grid--about .masonry-grid__photo-side-3  { grid-column: 1 / 3; grid-row: 4; aspect-ratio: 16 / 7; }
  .masonry-grid--about .masonry-grid__values        { grid-column: 1 / 3; grid-row: 5; padding: 1.6rem 0 0; }

  .about-workshop__grid {
    grid-template-columns: 1fr;
    gap: 4rem;
  }

  .about-workshop__img {
    aspect-ratio: 16 / 9;
  }

  .about-team {
    padding: 8rem 4rem 10rem;
  }
}

/* ============================================
   ABOUT — RESPONSIVE MOBILE (max 767px)
   ============================================ */
@media (max-width: 767px) {
  .about-hero__left {
    padding: 10rem 1.6rem 4rem;
  }

  .about-hero__title {
    font-size: clamp(5.6rem, 16vw, 8rem);
  }

  .about-hero__desc {
    font-size: 1.5rem;
    max-width: none;
  }

  .about-hero__right {
    height: 60vw;
    min-height: 24rem;
  }

  .about-hero__scroll {
    margin-top: 3.2rem;
  }

  .about-intro {
    padding: 6.4rem 1.6rem 8rem;
  }

  .about-intro__text {
    font-size: clamp(1.8rem, 5vw, 2.2rem);
  }

  /* Tighter number column on mobile — less wasted space before the text */
  .about-intro__entry {
    grid-template-columns: 2.8rem 1fr;
    gap: 1.6rem;
    padding: 2.4rem 0;
  }

  .about-intro__year {
    font-size: clamp(8rem, 28vw, 14rem);
    bottom: -2rem;
  }

  .about-values {
    padding: 6.4rem 1.6rem 8rem;
  }

  .about-values__desc {
    max-width: none;
  }

  .about-workshop {
    padding: 6.4rem 1.6rem 8rem;
  }

  /* BOTH masonries on mobile — interleave:
     header → grande photo → texte 1 → photo → texte 2 → photo → texte 3 → photo.
     display:contents promotes the 3 text blocks to direct grid children so they
     can be placed between the photos via grid-row. */
  .masonry-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-auto-rows: auto;
    gap: 2rem;
    margin-bottom: 4rem;
  }
  .masonry-grid .masonry-grid__values,
  .masonry-grid .masonry-grid__values-list {
    display: contents;
  }
  .masonry-grid .masonry-grid__header                       { grid-column: 1; grid-row: 1; padding: 0 0 1rem; }
  .masonry-grid .masonry-grid__photo-large                  { grid-column: 1; grid-row: 2; aspect-ratio: 4 / 3; }
  .masonry-grid .masonry-grid__values-list > :nth-child(1)  { grid-column: 1; grid-row: 3; }
  .masonry-grid .masonry-grid__photo-side-1                 { grid-column: 1; grid-row: 4; aspect-ratio: 4 / 3; }
  .masonry-grid .masonry-grid__values-list > :nth-child(2)  { grid-column: 1; grid-row: 5; }
  .masonry-grid .masonry-grid__photo-side-2                 { grid-column: 1; grid-row: 6; aspect-ratio: 4 / 3; }
  .masonry-grid .masonry-grid__values-list > :nth-child(3)  { grid-column: 1; grid-row: 7; }
  .masonry-grid .masonry-grid__photo-side-3                 { grid-column: 1; grid-row: 8; aspect-ratio: 4 / 3; }

  /* Reset text-item spacing/borders for the interleaved layout */
  .masonry-grid .masonry-grid__value-item,
  .masonry-grid .about-fact {
    padding: 0;
    margin: 0;
    border: 0;
  }
  .masonry-grid .masonry-grid__value-item {
    flex-direction: column;
    gap: 0.8rem;
  }

  /* Fact titles must not overflow on small screens */
  .about-fact__title {
    font-size: clamp(3.4rem, 11vw, 4.8rem);
  }

  /* Let the À-propos CTA title wrap on mobile (no nowrap overflow) */
  #about-cta-title {
    white-space: normal;
  }

  .about-workshop__img {
    aspect-ratio: 4 / 3;
  }

  .about-workshop__desc {
    font-size: 1.6rem;
    max-width: none;
  }

  .about-team {
    padding: 6.4rem 1.6rem 8rem;
  }

  .about-team__quote p {
    font-size: clamp(2rem, 6vw, 2.8rem);
    text-align: left;
  }

  .about-team__attribution {
    text-align: left;
  }

  .about-section-label {
    margin-bottom: 2.4rem;
  }
}

/* ============================================
   ABOUT — REDUCED MOTION
   ============================================ */
@media (prefers-reduced-motion: reduce) {
  .about-hero__img,
  .about-workshop__img {
    transition: none;
  }
}