@font-face {
  font-family: "TrenchSlab-Regular";
  src:
    url("../fonts/TrenchSlab-Regular.woff2") format("woff2"),
    url("../fonts/TrenchSlab-Regular.woff") format("woff");
  font-weight: 400;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: "TrenchSlab-Medium";
  src:
    url("../fonts/TrenchSlab-Medium.woff2") format("woff2"),
    url("../fonts/TrenchSlab-Medium.woff") format("woff");
  font-weight: 500;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: "TrenchSlab-Bold";
  src:
    url("../fonts/TrenchSlab-Bold.woff2") format("woff2"),
    url("../fonts/TrenchSlab-Bold.woff") format("woff");
  font-weight: 700;
  font-display: swap;
  font-style: normal;
}

:root {
  --cream: #cdccc4;
  --cream-soft: #d9d8d1;
  --stripe: #bdbcb3;
  --metal-900: #2f3538;
  --metal-700: #454e55;
  --metal-600: #4a5658;
  --metal-500: #546262;
  --metal-300: #8f9ea5;
  --metal-100: #d7d6d0;
  --tan: #4d5860;
  --tan-dark: #333c43;
  --tan-light: #9fb0ba;
  --khaki: #666b4f;
  --khaki-deep: #4f5439;
  --navy: #1b2634;
  --navy-deep: #121a26;
  --silver: #9fb4c4;
  --paper: #edebe0;
  --ink-soft: #5a625f;
  --line: rgba(47, 53, 56, 0.14);
  --ease-luxury: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html {
  scroll-behavior: smooth;
  scroll-padding-top: 76px;
}
body {
  font-family: "TrenchSlab-Regular", "Jost", sans-serif;
  background: var(--cream)
    repeating-linear-gradient(
      90deg,
      transparent 0px,
      transparent 46px,
      rgba(47, 53, 56, 0.05) 46px,
      rgba(47, 53, 56, 0.05) 58px
    );
  color: var(--metal-900);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img {
  display: block;
  max-width: 100%;
}
a {
  color: inherit;
}
.wrap {
  max-width: 1240px;
  margin: 0 auto;
  padding-left: 96px;
  padding-right: 96px;
}
@media (max-width: 980px) {
  .wrap {
    padding-left: 28px;
    padding-right: 28px;
  }
}

.stripes-bg {
  background: repeating-linear-gradient(
    90deg,
    var(--cream) 0px,
    var(--cream) 46px,
    var(--stripe) 46px,
    var(--stripe) 58px
  );
}
h1,
h2,
h3 {
  font-family: "TrenchSlab-Medium", "Bitter", serif;
}
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 0.76rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--tan-dark);
  margin-bottom: 18px;
}
.eyebrow::before {
  content: "";
  width: 24px;
  height: 1px;
  background: var(--tan-dark);
  display: inline-block;
}
.section-title {
  font-weight: 700;
  font-size: clamp(2.1rem, 4vw, 3.3rem);
  text-transform: uppercase;
  line-height: 1.08;
  margin-bottom: 14px;
  background: linear-gradient(
    105deg,
    var(--tan-dark) 0%,
    var(--tan-dark) 36%,
    #78878f 50%,
    var(--tan-dark) 64%,
    var(--tan-dark) 100%
  );
  background-size: 230% 100%;
  background-position: 115% 0;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: metalSweep 8s ease-in-out infinite;
}
.values .section-title {
  background: linear-gradient(
    105deg,
    #e9e8e2 0%,
    #e9e8e2 36%,
    #9fb0ba 50%,
    #e9e8e2 64%,
    #e9e8e2 100%
  );
  background-size: 230% 100%;
  background-position: 115% 0;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: metalSweep 8s ease-in-out infinite;
}
.section-sub {
  color: var(--ink-soft);
  max-width: 520px;
  font-weight: 300;
  line-height: 1.7;
}

/* ============ NAV — kaki glassmorphism ============ */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background:
    linear-gradient(
      112deg,
      rgba(102, 107, 79, 0.72) 0%,
      rgba(130, 138, 104, 0.58) 32%,
      rgba(168, 173, 140, 0.5) 56%,
      rgba(96, 110, 106, 0.66) 100%
    ),
    rgba(64, 72, 56, 0.28);
  -webkit-backdrop-filter: blur(18px) saturate(1.35);
  backdrop-filter: blur(18px) saturate(1.35);
  border-bottom: 1px solid rgba(233, 232, 226, 0.16);
  box-shadow:
    0 24px 46px -28px rgba(18, 26, 38, 0.62),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  transition:
    transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.35s ease;
  will-change: transform;
}
.nav.nav-hidden {
  transform: translateY(-102%);
}
.nav::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 6%,
    rgba(204, 172, 146, 0.6) 38%,
    rgba(159, 180, 196, 0.5) 62%,
    transparent 94%
  );
  pointer-events: none;
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 96px;
  position: relative;
  min-height: 64px;
}
@media (max-width: 1280px) {
  .nav-inner {
    padding: 12px 24px;
  }
}
.nav-mark {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: "TrenchSlab-Bold", "Bitter", serif;
  font-weight: 700;
  font-size: 1.05rem;
  color: #f0efe8;
  text-decoration: none;
  text-shadow: 0 1px 8px rgba(18, 26, 38, 0.3);
}
.nav-mark-3d {
  position: relative;
  width: 40px;
  height: 40px;
  flex: none;
}
.nav-mark-3d canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
}
@media (max-width: 600px) {
  .nav-mark-3d {
    width: 34px;
    height: 34px;
  }
}
.nav-mark svg {
  width: 30px;
  height: 30px;
  filter: drop-shadow(0 2px 6px rgba(18, 26, 38, 0.25));
}
.nav-links {
  position: relative;
  display: flex;
  align-items: center;
  gap: 24px;
  margin-left: auto;
  margin-right: 14px;
  padding-left: 20px;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(240, 239, 232, 0.82);
  white-space: nowrap;
}
.nav-line {
  position: absolute;
  left: 0;
  bottom: -9px;
  height: 1.5px;
  width: 0;
  opacity: 0;
  background: linear-gradient(
    90deg,
    #8a9270,
    #a8ad8c 40%,
    #ccac92 70%,
    #9fb4c4
  );
  border-radius: 2px;
  pointer-events: none;
  transition:
    left 0.5s cubic-bezier(0.22, 1, 0.36, 1),
    width 0.5s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.35s ease;
}
.nav-links a {
  text-decoration: none;
  display: inline-block;
  position: relative;
  transition:
    color 0.25s ease,
    transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
  transform-origin: 50% 100%;
  text-shadow: 0 1px 6px rgba(18, 26, 38, 0.28);
}
.nav-links a:hover {
  color: #fff;
  transform: scale(1.14);
}
.nav-links a.active {
  color: #fff;
}
.nav-cta {
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #f0efe8;
  padding: 11px 24px;
  border-radius: 999px;
  background: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0.16),
    rgba(255, 255, 255, 0.05)
  );
  border: 1px solid rgba(240, 239, 232, 0.38);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 8px 20px -12px rgba(18, 26, 38, 0.5);
  text-decoration: none;
  transition:
    background 0.25s,
    transform 0.2s,
    box-shadow 0.25s,
    color 0.25s;
}
.nav-cta:hover {
  background: var(--cream);
  color: var(--navy-deep);
  transform: translateY(-1px);
  box-shadow: 0 12px 26px -12px rgba(18, 26, 38, 0.6);
}
.nav-right {
  display: flex;
  align-items: center;
}
.nav-links a.nav-config-m {
  display: none;
}
.nav-cta-config {
  padding-right: 66px;
}
.nav-cta-config .cg-pill {
  padding: 11px 18px;
  gap: 9px;
  background: rgba(18, 26, 38, 0.85);
  border-color: rgba(233, 232, 226, 0.24);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 10px 24px -14px rgba(18, 26, 38, 0.85);
}
.nav-cta-config .cg-pill:hover {
  border-color: rgba(233, 232, 226, 0.5);
}
.nav-cta-config .cg-label {
  font-size: 0.7rem;
}
.nav-cta-config .cg-ico {
  width: 15px;
  height: 15px;
}
.nav-cta-config .cg-ghost {
  opacity: 0.26;
  height: 170%;
}
.nav-cta-config:hover .cg-ghost {
  opacity: 0.6;
}

.lang-switch {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: 14px;
  padding-left: 20px;
  border-left: 1px solid rgba(240, 239, 232, 0.22);
}
.lang-switch button {
  background: none;
  border: none;
  border-bottom: 1px solid transparent;
  color: rgba(240, 239, 232, 0.75);
  font-family: inherit;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  padding: 4px 5px;
  cursor: pointer;
  transition:
    color 0.2s,
    border-color 0.2s;
}
.lang-switch button:hover {
  color: #fff;
}
.lang-switch button.active {
  color: var(--tan-light);
  border-bottom-color: var(--tan-light);
}

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  width: 36px;
  height: 36px;
}
.nav-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: #f0efe8;
  transition:
    transform 0.35s cubic-bezier(0.68, -0.55, 0.27, 1.55),
    opacity 0.25s;
  transform-origin: center;
}
.nav-toggle.open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.nav-toggle.open span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.nav-toggle.open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

@media (max-width: 1280px) {
  .nav-links {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    margin: 0;
    align-items: stretch;
    background: linear-gradient(
      160deg,
      rgba(88, 96, 70, 0.97),
      rgba(58, 68, 64, 0.97)
    );
    -webkit-backdrop-filter: blur(18px) saturate(1.3);
    backdrop-filter: blur(18px) saturate(1.3);
    border-bottom: 1px solid rgba(233, 232, 226, 0.14);
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .nav-links.open {
    max-height: 460px;
  }
  .nav-links a {
    display: block;
    padding: 18px 28px;
    border-top: 1px solid rgba(240, 239, 232, 0.1);
    font-size: 0.9rem;
    transform: none;
  }
  .nav-links a:hover {
    background: rgba(255, 255, 255, 0.06);
    transform: none;
  }
  .nav-line {
    display: none;
  }
  .nav-toggle {
    display: flex;
  }
  .nav-inner .nav-cta,
  .nav-inner .nav-cta-config {
    display: none;
  }
  .nav-links a.nav-config-m {
    display: block;
  }
  .lang-switch {
    margin: 12px 28px 4px;
    padding-left: 0;
    border-left: none;
  }
}

/* ============ HERO ============ */
.hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  min-height: calc(100vh - 65px);
  min-height: calc(100svh - 65px);
  display: flex;
  flex-direction: column;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(
      circle at 20% 15%,
      rgba(255, 255, 255, 0.32),
      transparent 40%
    ),
    radial-gradient(circle at 80% 85%, rgba(0, 0, 0, 0.05), transparent 45%);
  mix-blend-mode: multiply;
  pointer-events: none;
  z-index: 1;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 14px;
  border: 1px solid var(--line);
  pointer-events: none;
  z-index: 1;
}
@media (max-width: 600px) {
  .hero::after {
    inset: 10px;
  }
}

.hero-main {
  position: relative;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 44px;
  padding: 48px 96px 70px;
  flex: 1;
}
@media (max-width: 980px) {
  .hero-main {
    padding: 32px 28px 50px;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
}

.copy {
  padding-top: 20px;
}
@media (max-width: 980px) {
  .copy {
    padding-top: 0;
  }
}

h1.brand {
  font-weight: 500;
  font-size: clamp(3rem, 6.5vw, 5.2rem);
  line-height: 0.92;
  letter-spacing: -0.01em;
  color: var(--metal-900);
  margin-bottom: 4px;
}
.tagline {
  font-family: "TrenchSlab-Regular", "Bitter", serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.1rem, 2vw, 1.45rem);
  color: var(--metal-600);
  margin-bottom: 22px;
}
.desc {
  font-size: 1.02rem;
  line-height: 1.75;
  color: var(--ink-soft);
  max-width: 480px;
  margin-bottom: 32px;
  font-weight: 300;
}
@media (max-width: 980px) {
  .desc {
    margin-left: auto;
    margin-right: auto;
  }
}

.cta-row {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-bottom: 40px;
  flex-wrap: wrap;
}
@media (max-width: 980px) {
  .cta-row {
    justify-content: center;
  }
}
.btn {
  font-size: 0.84rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 15px 32px;
  border-radius: 2px;
  text-decoration: none;
  display: inline-block;
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--metal-700);
  color: var(--cream);
  border-radius: 999px;
  padding: 17px 30px;
  box-shadow:
    0 12px 26px -10px rgba(47, 53, 56, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    background 0.3s ease;
}
.btn-primary:hover {
  background: var(--metal-900);
  transform: translateY(-3px);
  box-shadow: 0 18px 34px -10px rgba(47, 53, 56, 0.75);
}
.btn-primary:active {
  transform: translateY(0);
}
.btn-primary .btn-ico {
  font-size: 1rem;
  line-height: 1;
  transition: transform 0.25s ease;
}
.btn-primary:hover .btn-ico {
  transform: translateX(3px);
}
.btn-ghost {
  color: var(--metal-700);
  border-bottom: 1px solid var(--tan-dark);
  padding: 15px 3px;
}
.btn-ghost:hover {
  color: var(--tan-dark);
}

.contact-strip {
  display: flex;
  align-items: center;
  gap: 12px 36px;
  flex-wrap: wrap;
  font-size: 0.86rem;
  color: var(--ink-soft);
}
@media (max-width: 980px) {
  .contact-strip {
    justify-content: flex-start;
  }
}
.contact-strip a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: inherit;
  transition: color 0.25s ease;
}
.contact-strip a:hover {
  color: var(--metal-900);
}
.contact-strip svg {
  width: 16px;
  height: 16px;
  flex: none;
  stroke: var(--tan-dark);
}
.contact-strip strong {
  color: var(--metal-700);
  font-weight: 500;
  letter-spacing: 0.02em;
}

/* ============ HERO SLIDESHOW ============ */
.slides {
  position: absolute;
  inset: 0;
}
.slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s ease;
}
.slide.is-active {
  opacity: 1;
  visibility: visible;
  z-index: 1;
}
.slide img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.slide.is-active img {
  animation: slideZoom 6.5s ease-out forwards;
  will-change: transform;
}
@keyframes slideZoom {
  from {
    transform: scale(1.14);
  }
  to {
    transform: scale(1.02);
  }
}
.slide-scrim {
  position: absolute;
  inset: 0;
  background: none;
}
.slide-copy {
  position: relative;
  z-index: 2;
  max-width: 720px;
  padding: 80px 96px 130px;
  color: var(--cream);
}
.slide-copy .eyebrow {
  color: var(--tan-light);
}
.slide-copy .eyebrow::before {
  background: var(--tan-light);
}
.slide-title {
  font-weight: 500;
  font-size: clamp(2.9rem, 6vw, 5.2rem);
  line-height: 0.95;
  letter-spacing: -0.01em;
  margin-bottom: 16px;
  text-transform: uppercase;
  background: linear-gradient(
    105deg,
    #e9e8e2 0%,
    #e9e8e2 36%,
    #9fb0ba 50%,
    #e9e8e2 64%,
    #e9e8e2 100%
  );
  background-size: 230% 100%;
  background-position: 115% 0;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 18px rgba(0, 0, 0, 0.4));
  animation: metalSweep 8s ease-in-out infinite;
}
.slide-note {
  font-size: 1.04rem;
  line-height: 1.75;
  font-weight: 300;
  color: rgba(233, 232, 226, 0.9);
  max-width: 470px;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.3);
}

.hero-bottom {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 4;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 26px;
  flex-wrap: wrap;
  padding: 0 96px 28px;
}
.hero-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
}
.hero-bottom .contact-strip {
  color: rgba(230, 229, 223, 0.85);
}
.hero-bottom .contact-strip svg {
  stroke: var(--tan-light);
}
.hero-bottom .contact-strip strong {
  color: var(--cream);
}
@media (max-width: 980px) {
  .slide-copy {
    padding: 64px 28px 140px;
  }
  .hero-bottom {
    padding: 0 28px 22px;
    justify-content: center;
  }
  .hero-actions {
    align-items: center;
    text-align: center;
  }
}
@media (max-width: 600px) {
  .slide-copy {
    padding: 52px 22px 150px;
    text-align: center;
    align-self: center;
  }
  .slide-note {
    margin-left: auto;
    margin-right: auto;
  }
}

/* ============ SERVICES ============ */
.services {
  padding: 100px 0 90px;
}
.services-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 30px;
  margin-bottom: 56px;
  flex-wrap: wrap;
}
.service-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
@media (max-width: 1100px) {
  .service-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 600px) {
  .service-grid {
    grid-template-columns: 1fr;
  }
}
.service-card {
  background: rgba(237, 235, 224, 0.055);
  border: 1px solid rgba(237, 235, 224, 0.16);
  border-radius: 18px;
  padding: 34px 28px;
  transition:
    background 0.3s ease,
    transform 0.3s ease,
    border-color 0.3s ease;
  backdrop-filter: blur(6px);
}
.service-card:hover {
  background: rgba(237, 235, 224, 0.11);
  border-color: rgba(204, 172, 146, 0.55);
  transform: translateY(-4px);
}
.service-icon {
  width: 40px;
  height: 40px;
  margin-bottom: 18px;
}
.service-icon svg {
  width: 100%;
  height: 100%;
  stroke: var(--tan-light);
  fill: none;
  stroke-width: 1.4;
}
.service-card h3 {
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--paper);
}
.service-card p {
  font-size: 0.9rem;
  line-height: 1.6;
  color: rgba(237, 235, 224, 0.72);
  font-weight: 300;
}

/* ============ VALUES ============ */
.values {
  background: none;
  color: var(--cream);
  padding: 80px 0;
  position: relative;
}
.values .section-title,
.values .eyebrow {
  color: var(--cream);
}
.values .eyebrow {
  color: var(--tan-light);
}
.values .eyebrow::before {
  background: var(--tan-light);
}
.value-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 36px;
  margin-top: 50px;
}
@media (max-width: 900px) {
  .value-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 560px) {
  .value-grid {
    grid-template-columns: 1fr;
  }
}
.value-item {
  border-top: 1px solid rgba(215, 214, 208, 0.28);
  padding-top: 20px;
  transition: transform 0.25s ease;
}
.value-item:hover {
  transform: translateY(-4px);
}
.value-item .num {
  font-family: "TrenchSlab-Regular", "Bitter", serif;
  font-size: 0.85rem;
  color: var(--tan-light);
  letter-spacing: 0.1em;
  margin-bottom: 12px;
  display: block;
}
.value-item h3 {
  font-size: 1.05rem;
  font-weight: 600;
  margin-bottom: 10px;
}
.value-item p {
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--metal-100);
  font-weight: 300;
}

/* ============ PROCESS ============ */
.process {
  padding: 100px 0;
}
.process-list {
  margin-top: 50px;
  display: flex;
  flex-direction: column;
}
.process-step {
  display: flex;
  gap: 30px;
  padding: 30px 0;
  border-top: 1px solid var(--line);
  align-items: flex-start;
  transition: background 0.25s ease;
}
.process-step:hover {
  background: rgba(47, 53, 56, 0.02);
}
.process-step:last-child {
  border-bottom: 1px solid var(--line);
}
.step-badge {
  flex: none;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--metal-600);
  color: var(--cream);
  font-family: "TrenchSlab-Regular", "Bitter", serif;
  font-weight: 700;
  font-size: 1.1rem;
  box-shadow: inset 0 -2px 4px rgba(0, 0, 0, 0.25);
}
.step-copy h3 {
  font-size: 1.12rem;
  font-weight: 600;
  margin-bottom: 6px;
}
.step-copy p {
  color: var(--ink-soft);
  font-size: 0.94rem;
  line-height: 1.65;
  font-weight: 300;
  max-width: 560px;
}
@media (max-width: 600px) {
  .process-step {
    flex-direction: column;
    gap: 14px;
  }
  .step-badge {
    width: 44px;
    height: 44px;
    font-size: 1rem;
  }
}

/* ============ RÉALISATIONS ============ */
.work {
  padding: 90px 0 100px;
}
.work-grid {
  margin-top: 50px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
@media (max-width: 900px) {
  .work-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 600px) {
  .work-grid {
    grid-template-columns: 1fr;
  }
}
.work-card {
  position: relative;
  aspect-ratio: 4/3;
  border-radius: 2px;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  cursor: pointer;
  transition:
    transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.35s ease;
}
.work-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 50px -15px rgba(47, 53, 56, 0.4);
}
.work-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.work-card:hover img {
  transform: scale(1.06);
}
.work-card .corner {
  width: 24px;
  height: 24px;
}
.work-card .corner.tl {
  top: 10px;
  left: 10px;
}
.work-card .corner.tr {
  top: 10px;
  right: 10px;
}
.work-card .corner.bl {
  bottom: 10px;
  left: 10px;
}
.work-card .corner.br {
  bottom: 10px;
  right: 10px;
}
.work-label {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: 18px 20px;
  background: linear-gradient(0deg, rgba(47, 53, 56, 0.82), transparent 92%);
  color: var(--cream);
}
.work-label .tag {
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--tan-light);
  display: block;
  margin-bottom: 3px;
}
.work-label .name {
  font-family: "TrenchSlab-Medium", "Bitter", serif;
  font-weight: 500;
  font-size: 1rem;
}

/* ============ CONTACT ============ */
.contact {
  padding: 100px 0;
}
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  margin-top: 50px;
}
@media (max-width: 900px) {
  .contact-grid {
    grid-template-columns: 1fr;
    gap: 44px;
  }
}

.contact-info {
  background: var(--metal-700);
  color: var(--cream);
  padding: 40px 34px;
  position: relative;
  border-radius: 2px;
}
.contact-info .corner {
  width: 22px;
  height: 22px;
}
.contact-info .corner.tl {
  top: 12px;
  left: 12px;
}
.contact-info .corner.tr {
  top: 12px;
  right: 12px;
}
.contact-info .corner.bl {
  bottom: 12px;
  left: 12px;
}
.contact-info .corner.br {
  bottom: 12px;
  right: 12px;
}
.contact-info h3 {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 20px;
}
.info-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 0;
  border-top: 1px solid rgba(215, 214, 208, 0.2);
  font-size: 0.92rem;
}
.info-row:first-of-type {
  border-top: none;
}
.info-row svg {
  width: 18px;
  height: 18px;
  flex: none;
  stroke: var(--tan);
}
.info-row strong {
  display: block;
  font-weight: 500;
}
.info-row span.small {
  font-size: 0.78rem;
  color: var(--metal-100);
  font-weight: 300;
}

.form-field {
  margin-bottom: 18px;
}
.form-field label {
  display: block;
  font-size: 0.76rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 7px;
}
.form-field input,
.form-field textarea {
  width: 100%;
  border: 1px solid var(--line);
  background: var(--cream-soft);
  padding: 12px 14px;
  font-family: "TrenchSlab-Regular", "Jost", sans-serif;
  font-size: 0.95rem;
  color: var(--metal-900);
  border-radius: 2px;
  resize: vertical;
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
}
.form-field input:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--metal-300);
  box-shadow: 0 0 0 3px rgba(143, 158, 165, 0.12);
}
.form-submit {
  border: none;
  cursor: pointer;
  font-family: "TrenchSlab-Regular", "Jost", sans-serif;
  background: var(--metal-700);
  color: var(--cream);
  font-size: 0.84rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 15px 34px;
  border-radius: 999px;
  transition:
    transform 0.25s,
    box-shadow 0.25s,
    background 0.3s;
}
.form-submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px -6px rgba(47, 53, 56, 0.4);
}

/* ============ FOOTER ============ */
footer {
  background: linear-gradient(180deg, var(--navy) 0%, var(--navy-deep) 100%);
  color: var(--metal-100);
  padding: 70px 0 0;
  position: relative;
  overflow: hidden;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: 44px;
  padding-bottom: 50px;
  border-bottom: 1px solid rgba(215, 214, 208, 0.15);
}
@media (max-width: 900px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 560px) {
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}
.footer-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: "TrenchSlab-Bold", "Bitter", serif;
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--cream);
  margin-bottom: 14px;
}
.footer-brand svg {
  width: 36px;
  height: 36px;
}
.footer-col p {
  font-size: 0.88rem;
  line-height: 1.7;
  color: var(--metal-100);
  font-weight: 300;
  max-width: 280px;
}
.footer-col h4 {
  font-size: 0.76rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tan-light);
  margin-bottom: 16px;
}
.footer-col ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.footer-col a {
  text-decoration: none;
  font-size: 0.88rem;
  color: var(--metal-100);
  transition: color 0.2s;
}
.footer-col a:hover {
  color: var(--cream);
}
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 22px 0;
  font-size: 0.76rem;
  color: var(--metal-300);
  flex-wrap: wrap;
  gap: 10px;
}

/* Footer 3D logo */
.footer-3d-wrap {
  position: absolute;
  bottom: 14px;
  left: 20px;
  width: 80px;
  height: 80px;
  opacity: 0.25;
  pointer-events: none;
}
@media (max-width: 900px) {
  .footer-3d-wrap {
    width: 56px;
    height: 56px;
    bottom: 8px;
    left: 8px;
  }
}
#footerCanvas {
  width: 100%;
  height: 100%;
}
#footerCanvas canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
}

::selection {
  background: var(--tan-light);
  color: var(--metal-900);
}

/* Scroll reveal */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal-delay-1 {
  transition-delay: 0.1s;
}
.reveal-delay-2 {
  transition-delay: 0.2s;
}
.reveal-delay-3 {
  transition-delay: 0.3s;
}
.reveal-delay-4 {
  transition-delay: 0.4s;
}
.reveal-delay-5 {
  transition-delay: 0.5s;
}

/* Anchor offset for sticky nav */
[id] {
  scroll-margin-top: 70px;
}

/* ============ GALERIE RÉALISATIONS ============ */
.gallery-head {
  margin: 72px 0 28px;
}
.gallery-title {
  font-size: clamp(1.4rem, 2.4vw, 1.9rem);
  color: var(--metal-900);
  margin-bottom: 8px;
}
.gallery-grid {
  columns: 3 280px;
  column-gap: 16px;
}
.gallery-item {
  position: relative;
  display: block;
  width: 100%;
  margin: 0 0 16px;
  break-inside: avoid;
  border-radius: 2px;
  overflow: hidden;
  cursor: pointer;
  background: var(--metal-100);
}
.gallery-item img {
  width: 100%;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.gallery-item:hover img {
  transform: scale(1.05);
}
.gallery-item figcaption {
  position: absolute;
  inset: auto 0 0 0;
  padding: 44px 16px 14px;
  background: linear-gradient(transparent, rgba(47, 53, 56, 0.82));
  color: var(--cream);
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity 0.35s ease,
    transform 0.35s ease;
}
.gallery-item:hover figcaption,
.gallery-item:focus-within figcaption {
  opacity: 1;
  transform: translateY(0);
}
.gallery-item figcaption b {
  display: block;
  font-weight: 600;
  font-size: 0.95rem;
}
.gallery-item figcaption span {
  font-size: 0.78rem;
  opacity: 0.85;
  letter-spacing: 0.04em;
}

/* ============ MICRO-INTERACTIONS ============ */
.nav {
  transition:
    box-shadow 0.35s ease,
    background 0.35s ease;
}
.nav.scrolled {
  box-shadow:
    0 16px 38px -22px rgba(18, 26, 38, 0.68),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  background:
    linear-gradient(
      112deg,
      rgba(96, 102, 74, 0.86) 0%,
      rgba(122, 130, 98, 0.78) 32%,
      rgba(158, 164, 132, 0.72) 56%,
      rgba(86, 100, 96, 0.82) 100%
    ),
    rgba(56, 64, 50, 0.4);
}
:focus-visible {
  outline: 2px solid var(--tan);
  outline-offset: 3px;
  border-radius: 2px;
}
.nav-cta:focus-visible {
  outline-color: #f0efe8;
}
.slide.is-active .slide-copy > * {
  animation: slideCopyIn 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.slide.is-active .slide-copy > *:nth-child(2) {
  animation-delay: 0.12s;
}
.slide.is-active .slide-copy > *:nth-child(3) {
  animation-delay: 0.24s;
}
@keyframes slideCopyIn {
  from {
    opacity: 0;
    transform: translateY(26px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.btn-gold {
  display: inline-block;
  padding: 15px 30px;
  border-radius: 2px;
  text-decoration: none;
  background: linear-gradient(110deg, #5a6771, #39434b);
  color: var(--cream);
  font-weight: 600;
  letter-spacing: 0.04em;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    background 0.2s ease;
}
.btn-gold:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px -12px rgba(51, 60, 67, 0.55);
  background: var(--tan-dark);
}
/* ============ ACIER MÉTALLISÉ (carte de visite) ============ */
@keyframes metalSweep {
  0%,
  100% {
    background-position: 115% 0;
  }
  50% {
    background-position: -15% 0;
  }
}
.nav-mark svg,
.footer-brand svg {
  animation: metalGlint 7s ease-in-out infinite;
}
@keyframes metalGlint {
  0%,
  84%,
  100% {
    filter: none;
  }
  88% {
    filter: drop-shadow(0 0 9px rgba(159, 176, 186, 0.9)) brightness(1.35);
  }
  93% {
    filter: none;
  }
}

.steel-marquee {
  background: linear-gradient(90deg, var(--navy), var(--navy-deep));
  border-top: 1px solid rgba(159, 180, 196, 0.35);
  border-bottom: 1px solid rgba(159, 180, 196, 0.35);
  overflow: hidden;
  padding: 16px 0;
}
.steel-marquee-track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: steelMarquee 32s linear infinite;
}
.steel-marquee-track span {
  color: var(--cream);
  font-size: 0.84rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  white-space: nowrap;
  margin-right: 40px;
}
.steel-marquee-track i {
  width: 7px;
  height: 7px;
  background: var(--silver);
  transform: rotate(45deg);
  flex: none;
  margin-right: 40px;
}
.steel-marquee-track i:nth-of-type(odd) {
  background: #a8ad8c;
}
@keyframes steelMarquee {
  to {
    transform: translateX(-50%);
  }
}

/* ============ SECTIONS KHAKI / NAVY ============ */
.sec-khaki {
  background: linear-gradient(175deg, var(--khaki) 0%, var(--khaki-deep) 100%);
  color: var(--paper);
}
.sec-khaki .eyebrow {
  color: var(--paper);
}
.sec-khaki .eyebrow::before {
  background: var(--paper);
}
.sec-khaki .section-sub {
  color: rgba(237, 235, 224, 0.78);
}
.sec-khaki .section-title {
  background: linear-gradient(
    105deg,
    #f0eee3 0%,
    #f0eee3 36%,
    #c9ceaf 50%,
    #f0eee3 64%,
    #f0eee3 100%
  );
  background-size: 230% 100%;
  background-position: 115% 0;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: metalSweep 8s ease-in-out infinite;
}
.sec-khaki .section-title em {
  -webkit-text-fill-color: var(--navy-deep);
}
.sec-navy {
  background: linear-gradient(
    165deg,
    #1e2a3a 0%,
    var(--navy) 45%,
    var(--navy-deep) 100%
  );
  color: var(--paper);
  position: relative;
  overflow: hidden;
}
.sec-navy .eyebrow {
  color: var(--silver);
}
.sec-navy .eyebrow::before {
  background: var(--silver);
}
.sec-navy .section-sub {
  color: rgba(237, 235, 224, 0.72);
}
.sec-navy .section-title {
  background: linear-gradient(
    105deg,
    #ecebe3 0%,
    #ecebe3 36%,
    var(--silver) 50%,
    #ecebe3 64%,
    #ecebe3 100%
  );
  background-size: 230% 100%;
  background-position: 115% 0;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: metalSweep 8s ease-in-out infinite;
}
.sec-navy .section-title em {
  -webkit-text-fill-color: var(--silver);
}

.sec-khaki .service-icon svg {
  stroke: var(--tan-light);
}
.sec-khaki .process-step {
  border-top-color: rgba(237, 235, 224, 0.25);
}
.sec-khaki .process-step:hover {
  background: rgba(237, 235, 224, 0.06);
}
.sec-khaki .step-copy h3 {
  color: var(--paper);
}
.sec-khaki .step-copy p {
  color: rgba(237, 235, 224, 0.78);
}
.sec-khaki .step-badge {
  background: var(--navy-deep);
  color: var(--paper);
}
.sec-khaki .form-field label {
  color: rgba(237, 235, 224, 0.85);
}
.sec-khaki .form-field input,
.sec-khaki .form-field select {
  background: rgba(237, 235, 224, 0.95);
  border-color: rgba(237, 235, 224, 0.4);
  color: var(--metal-900);
}
.sec-khaki .form-submit {
  background: var(--navy-deep);
  color: var(--paper);
}
.sec-khaki .form-submit:hover {
  background: #0b1119;
}
.sec-khaki #quoteResult {
  color: var(--paper);
}

.sec-navy .gallery-title {
  color: var(--paper);
}
.sec-navy .corner svg {
  stroke: var(--silver) !important;
}
.sec-navy .work-card {
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.6);
}
.sec-navy .contact-info {
  background: rgba(237, 235, 224, 0.04);
  border: 1px solid rgba(159, 180, 196, 0.25);
}
.sec-navy .contact-info h3 {
  color: var(--paper);
}
.sec-navy .info-row strong {
  color: var(--paper);
}
.sec-navy .info-row .small {
  color: rgba(237, 235, 224, 0.6);
}
.sec-navy .info-row svg {
  stroke: var(--silver);
}
.sec-navy .form-field label {
  color: rgba(237, 235, 224, 0.85);
}
.sec-navy .form-field input,
.sec-navy .form-field textarea {
  background: rgba(237, 235, 224, 0.95);
  border-color: transparent;
  color: var(--metal-900);
}
.sec-navy .form-submit {
  background: var(--silver);
  color: var(--navy-deep);
}
.sec-navy .form-submit:hover {
  background: #b7c9d6;
}

.k-watermark {
  position: absolute;
  right: -140px;
  top: 50%;
  width: 620px;
  height: 620px;
  transform: translateY(-50%);
  opacity: 0.07;
  pointer-events: none;
}
.k-watermark svg {
  width: 100%;
  height: 100%;
}
.k-watermark.flip {
  right: auto;
  left: -160px;
  opacity: 0.05;
}
.k-watermark.hero-k {
  right: 50%;
  transform: translate(50%, -50%);
  opacity: 0.09;
}
.k-watermark.k-hover {
  pointer-events: auto;
  opacity: 0.06;
  transition: opacity 0.5s ease;
}
.k-watermark.k-hover .wm-grad {
  opacity: 0;
  transition: opacity 0.65s ease;
}
.k-watermark.k-hover:hover {
  opacity: 0.5;
}
.k-watermark.k-hover:hover .wm-grad {
  opacity: 1;
}

.ba-wrap {
  position: relative;
  max-width: 980px;
  margin: 50px auto 10px;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.65);
  cursor: ew-resize;
  touch-action: none;
  user-select: none;
}
.ba-wrap img {
  width: 100%;
  display: block;
  pointer-events: none;
}
.ba-under {
  filter: grayscale(0.95) brightness(0.8) contrast(0.92);
}
.ba-after {
  position: absolute;
  inset: 0;
  clip-path: inset(0 50% 0 0);
}
.ba-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  background: var(--silver);
  transform: translateX(-1px);
  pointer-events: none;
}
.ba-handle::after {
  content: "\25C2 \25B8";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--silver);
  color: var(--navy-deep);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  padding: 10px 12px;
  border-radius: 999px;
  white-space: nowrap;
}
.ba-tag {
  position: absolute;
  top: 18px;
  font-size: 0.66rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  background: rgba(18, 26, 38, 0.78);
  color: var(--paper);
  padding: 7px 12px;
  border-radius: 2px;
  backdrop-filter: blur(4px);
  pointer-events: none;
}
.ba-tag.before {
  left: 18px;
}
.ba-tag.after {
  right: 18px;
  background: var(--khaki);
}

.btn-primary {
  position: relative;
  overflow: hidden;
}
.btn-primary::after {
  content: "";
  position: absolute;
  top: 0;
  left: -80%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    105deg,
    transparent,
    rgba(237, 235, 224, 0.35),
    transparent
  );
  transform: skewX(-20deg);
  transition: left 0.6s ease;
}
.btn-primary:hover::after {
  left: 130%;
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  html {
    scroll-behavior: auto;
  }
}

/* ============ INTRO PRELOADER (naissance du K → flèches → lamelles) ============ */
#ldStage {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 600;
  pointer-events: none;
}
#ldSvg {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 601;
  pointer-events: none;
}
#ldHud {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 34px;
  z-index: 602;
  text-align: center;
  pointer-events: none;
}
#ldHud .v {
  font-size: 2.2rem;
  font-weight: 300;
  font-variant-numeric: tabular-nums;
  color: var(--cream);
  letter-spacing: 0.06em;
  text-shadow: 0 1px 10px rgba(18, 26, 38, 0.45);
}
#ldHud .lbl {
  margin-top: 4px;
  font-size: 9px;
  letter-spacing: 0.42em;
  text-indent: 0.42em;
  text-transform: uppercase;
  color: rgba(205, 204, 196, 0.55);
}
body.intro-locked {
  overflow: hidden;
}

/* ============ petites flèches déco (masquées — remplacées par km-big) ============ */
.hd-fill {
  opacity: 0;
  transition: opacity 0.5s ease;
}
.hero-deco.hd-lit .hd-fill {
  opacity: 1;
  filter: drop-shadow(0 0 16px rgba(204, 172, 146, 0.5));
}
.hd2 .hd-fill {
  transition-delay: 0.1s;
}
.hd3 .hd-fill {
  transition-delay: 0.2s;
}

/* ============ HERO1 v2 — titre haut-gauche, image centrale imposante, scène aérée ============ */
.hero-grid {
  position: relative;
  z-index: 4;
  flex: 1;
  display: flex;
  flex-direction: column;
  pointer-events: none;
  min-height: 0;
  padding: clamp(20px, 4.2vh, 46px) clamp(24px, 4.5vw, 72px) 118px;
}
.hero-grid > * {
  pointer-events: auto;
}
.km-title {
  position: relative;
  z-index: 5;
  align-self: flex-start;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.42em;
}
.km-eyebrow {
  font-family: "TrenchSlab-Regular", "Jost", sans-serif;
  font-size: clamp(12px, 1.44vw, 27px);
  letter-spacing: 0.09em;
  color: #fff;
  text-transform: uppercase;
  line-height: 1;
}
.km-eyebrow::before {
  content: "-";
  margin-right: 0.28em;
}
.km-h1 {
  font-family: "TrenchSlab-Medium", "Bitter", serif;
  font-weight: 400;
  font-size: clamp(30px, 5.6vw, 104px);
  line-height: 1.05;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
  display: flex;
  align-items: stretch;
}
.km-mark {
  background: linear-gradient(
    85deg,
    #fff 0%,
    #fdf8fb 11%,
    #f8e7f1 26%,
    #efcae0 43%,
    #e4a1c9 62%,
    #d56eab 82%,
    #c73b8e 100%
  );
  color: #0b0c0c;
  padding: 0.04em 0.12em 0.08em;
}
.km-rest {
  color: #fff;
  padding-left: 0.16em;
}
.km-h1.km-out {
  animation: kmOut 0.38s cubic-bezier(0.55, 0, 0.55, 0.2) both;
}
.km-h1.km-in {
  animation: kmIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes kmOut {
  to {
    transform: translateY(-14px);
    opacity: 0;
  }
}
@keyframes kmIn {
  from {
    transform: translateY(18px);
    opacity: 0;
  }
}
.km-badge {
  position: absolute;
  right: 1.12%;
  top: calc(74px + 1.5%);
  width: 8.5%;
  height: auto;
  z-index: 3;
  pointer-events: none;
}

/* ============ CTA GLASS — pilule verre + gradient au survol + flèche fantôme ============ */
.cta-glass {
  position: relative;
  display: inline-block;
  padding-right: 74px; /* espace pour la flèche fantôme juxtaposée */
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition:
    transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    filter 0.35s ease;
}
.cta-glass:hover {
  transform: translateY(-3px);
}
.cg-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 19px 34px;
  border-radius: 999px;
  overflow: hidden;
  isolation: isolate;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(233, 232, 226, 0.32);
  -webkit-backdrop-filter: blur(14px) saturate(1.35);
  backdrop-filter: blur(14px) saturate(1.35);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.24),
    0 18px 38px -18px rgba(18, 26, 38, 0.62);
  transition:
    border-color 0.35s ease,
    box-shadow 0.35s ease;
}
.cta-glass:hover .cg-pill {
  border-color: rgba(233, 232, 226, 0.5);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    0 26px 52px -20px rgba(18, 26, 38, 0.72);
}
/* remplissage gradient — monte du bas au survol (desktop) */
.cg-fill {
  position: absolute;
  inset: -1px;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(
    115deg,
    #8a9270 0%,
    #a8ad8c 38%,
    #ccac92 66%,
    #9fb4c4 100%
  );
  transform: translateY(103%);
  transition: transform 0.55s cubic-bezier(0.7, 0, 0.25, 1);
}
.cta-glass:hover .cg-fill {
  transform: translateY(0);
}
/* reflet balayant */
.cg-glint {
  position: absolute;
  top: -30%;
  bottom: -30%;
  left: -38%;
  width: 34%;
  z-index: -1;
  transform: skewX(-22deg) translateX(-140%);
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.4),
    transparent
  );
  pointer-events: none;
}
.cta-glass:hover .cg-glint {
  animation: cgSweep 1s cubic-bezier(0.4, 0, 0.2, 1) 0.1s forwards;
}
@keyframes cgSweep {
  to {
    transform: skewX(-22deg) translateX(460%);
  }
}
.cg-label {
  font-size: 0.84rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--cream);
  transition: color 0.3s ease;
  white-space: nowrap;
}
.cta-glass:hover .cg-label {
  color: var(--navy-deep);
}
.cg-ico {
  width: 18px;
  height: 18px;
  color: var(--tan-light);
  transition:
    color 0.3s ease,
    transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.cta-glass:hover .cg-ico {
  color: var(--navy-deep);
  transform: translateX(4px);
}
/* flèche d'angle (asset kamoh-arrow) en watermark, juxtaposée au bord droit */
.cg-ghost {
  position: absolute;
  right: 0;
  top: 50%;
  height: 190%;
  width: auto;
  transform: translateY(-50%);
  opacity: 0.2;
  pointer-events: none;
  transition:
    opacity 0.4s ease,
    transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
  filter: drop-shadow(0 10px 20px rgba(18, 26, 38, 0.35));
}
.cg-ghost path:not(.cg-ghost-fill) {
  fill: none;
  stroke: #eceae2;
  stroke-width: 1.4;
}
.cg-ghost .cg-ghost-fill {
  fill: url(#cgGhostGrad);
  stroke: none;
}
.cta-glass:hover .cg-ghost {
  opacity: 0.75;
  transform: translateY(-50%) translateX(7px) rotate(3deg);
}
@media (pointer: coarse) {
  .cg-fill {
    transform: translateY(0);
  }
  .cg-label {
    color: var(--navy-deep);
  }
  .cg-ico {
    color: var(--navy-deep);
  }
}
@media (max-width: 600px) {
  .cta-glass {
    padding-right: 56px;
  }
  .cg-pill {
    padding: 15px 26px;
  }
}

/* ============ POP-UP CONTACT — verre assorti au header ============ */
body.pop-lock {
  overflow: hidden;
}
.contact-pop {
  position: fixed;
  inset: 0;
  z-index: 320;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(18, 26, 38, 0.58);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.45s ease,
    visibility 0s 0.45s;
}
.contact-pop.open {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.45s ease;
}
.pop-panel {
  position: relative;
  width: min(540px, 100%);
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  overflow-x: hidden;
  border-radius: 26px;
  padding: 36px 36px 32px;
  isolation: isolate;
  background: linear-gradient(
    152deg,
    rgba(36, 48, 64, 0.88) 0%,
    rgba(26, 35, 47, 0.92) 58%,
    rgba(48, 58, 52, 0.9) 100%
  );
  -webkit-backdrop-filter: blur(22px) saturate(1.3);
  backdrop-filter: blur(22px) saturate(1.3);
  border: 1px solid rgba(233, 232, 226, 0.16);
  box-shadow:
    0 50px 110px -40px rgba(9, 14, 22, 0.85),
    inset 0 1px 0 rgba(255, 255, 255, 0.14);
  transform: translateY(30px) scale(0.955);
  opacity: 0.6;
  transition:
    transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.45s ease;
}
.contact-pop.open .pop-panel {
  transform: none;
  opacity: 1;
}
.pop-panel::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 6%,
    rgba(204, 172, 146, 0.65) 38%,
    rgba(159, 180, 196, 0.55) 62%,
    transparent 94%
  );
}
.pop-ghost {
  position: absolute;
  right: -34px;
  bottom: -40px;
  width: 190px;
  height: 190px;
  z-index: -1;
  opacity: 0.09;
  pointer-events: none;
  transform: rotate(-4deg);
}
.pop-ghost path {
  fill: none;
  stroke: #eceae2;
  stroke-width: 1;
}
.pop-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(233, 232, 226, 0.3);
  color: var(--cream);
  font-size: 1.05rem;
  line-height: 1;
  transition:
    background 0.25s,
    color 0.25s,
    transform 0.25s;
}
.pop-close:hover {
  background: var(--cream);
  color: var(--navy-deep);
  transform: rotate(90deg);
}
.pop-eyebrow {
  font-size: 0.66rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--tan-light);
  margin-bottom: 10px;
}
.pop-title {
  font-family: "TrenchSlab-Medium", "Bitter", serif;
  font-weight: 500;
  font-size: clamp(1.5rem, 3.4vw, 2rem);
  color: var(--cream);
  margin-bottom: 6px;
}
.pop-contact-mini {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  margin: 10px 0 22px;
  font-size: 0.8rem;
  color: rgba(233, 232, 226, 0.72);
}
.pop-contact-mini a {
  color: inherit;
  text-decoration: none;
}
.pop-contact-mini a:hover {
  color: var(--cream);
}
.pop-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.pop-fields .full {
  grid-column: 1 / -1;
}
@media (max-width: 560px) {
  .pop-fields {
    grid-template-columns: 1fr;
  }
}
.pop-field label {
  display: block;
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(233, 232, 226, 0.6);
  margin-bottom: 7px;
}
.pop-field input,
.pop-field textarea {
  width: 100%;
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(233, 232, 226, 0.2);
  border-radius: 12px;
  padding: 12px 14px;
  color: var(--cream);
  font-family: inherit;
  font-size: 0.9rem;
  transition:
    border-color 0.25s,
    background 0.25s;
  resize: vertical;
}
.pop-field input::placeholder,
.pop-field textarea::placeholder {
  color: rgba(233, 232, 226, 0.35);
}
.pop-field input:focus,
.pop-field textarea:focus {
  outline: none;
  border-color: var(--tan-light);
  background: rgba(255, 255, 255, 0.09);
}
.pop-submit {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  grid-column: 1 / -1;
  margin-top: 4px;
  cursor: pointer;
  border: none;
  border-radius: 999px;
  padding: 15px 30px;
  font-family: inherit;
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--navy-deep);
  background: linear-gradient(
    115deg,
    #8a9270 0%,
    #a8ad8c 38%,
    #ccac92 66%,
    #9fb4c4 100%
  );
  box-shadow:
    0 14px 30px -14px rgba(9, 14, 22, 0.8),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    filter 0.25s ease;
}
.pop-submit:hover {
  transform: translateY(-2px);
  filter: brightness(1.06);
  box-shadow: 0 20px 40px -16px rgba(9, 14, 22, 0.9);
}
.pop-submit:disabled {
  opacity: 0.7;
  cursor: default;
  transform: none;
}
.pop-done {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
  padding: 34px 10px 26px;
  color: var(--cream);
}
.pop-done svg {
  width: 64px;
  height: 64px;
}
.pop-done svg path {
  fill: none;
  stroke: var(--tan-light);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 60;
  stroke-dashoffset: 60;
}
.pop-panel.sent form {
  display: none;
}
.pop-panel.sent .pop-done {
  display: flex;
}
.pop-panel.sent .pop-done svg path {
  animation: popCheck 0.7s ease forwards;
}
@keyframes popCheck {
  to {
    stroke-dashoffset: 0;
  }
}
/* formulaire pop-up repris en section (page contact) */
.pop-panel.contact-inline {
  width: 100%;
  max-width: 640px;
  margin: 38px auto 0;
  max-height: none;
  overflow: visible;
  transform: none;
  opacity: 1;
  transition: none;
}
.hero-visual {
  position: relative;
  left: auto;
  top: auto;
  transform: none;
  width: min(860px, 62vw);
  min-width: 0;
  margin: auto;
  pointer-events: auto;
}
.hero-card {
  position: relative;
  width: 100%;
  aspect-ratio: 1172/650;
  border-radius: clamp(10px, 1.15vw, 17px);
  overflow: hidden;
  isolation: isolate;
  border: none;
  background: var(--navy-deep);
  box-shadow: 0 48px 110px -38px rgba(8, 14, 22, 0.72);
  cursor: grab;
  touch-action: pan-y;
}
@media (prefers-reduced-motion: no-preference) {
  .hero-card .slides .is-active img {
    animation: heroKb 9s ease-out forwards;
  }
}
@keyframes heroKb {
  from {
    transform: scale(1.03);
  }
  to {
    transform: scale(1.12);
  }
}
@media (hover: hover) {
  .hero-card {
    transition:
      transform 0.6s cubic-bezier(0.22, 1, 0.36, 1),
      box-shadow 0.6s ease,
      border-color 0.4s ease;
  }
  .hero-card:hover {
    transform: translateY(-6px);
    border-color: rgba(236, 234, 226, 0.34);
    box-shadow: 0 62px 110px -36px rgba(10, 16, 26, 0.72);
  }
}
.hero-card.is-drag {
  cursor: grabbing;
}
.hero-card .slide-scrim {
  background: none;
}
.hc-veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: none;
}
.hc-index {
  position: absolute;
  top: 3.2%;
  left: 0.49%;
  z-index: 3;
  font-family: "TrenchSlab-Regular", serif;
  font-size: clamp(64px, 7.7vw, 151px);
  line-height: 1;
  letter-spacing: 0.02em;
  pointer-events: none;
  color: transparent;
  -webkit-text-fill-color: transparent;
  background: linear-gradient(
    90deg,
    #c9d400 0%,
    #0fb4bd 40%,
    #60bb98 72%,
    #cfbddd 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
}
.km-corner {
  position: absolute;
  left: 100%;
  top: 0;
  transform: translate(-50%, -50%);
  z-index: 6;
  width: clamp(46px, 5.1vw, 74px);
  aspect-ratio: 1;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  transition: transform 0.5s var(--ease-luxury);
  -webkit-tap-highlight-color: transparent;
}
.km-corner svg {
  display: block;
  width: 100%;
  height: auto;
}
.km-corner:hover {
  transform: translate(-50%, -50%) scale(1.07);
}
.km-corner:active {
  transform: translate(-50%, -50%) scale(0.96);
}
/* flèches du flyer — 2 grandes flèches HERO1 (positions % fidèles au SVG) */
.hero-flyer-bg {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.hero-flyer-bg svg {
  position: absolute;
  height: auto;
}
.hero-flyer-bg svg path {
  transition:
    fill 0.5s ease,
    fill-opacity 0.5s ease,
    stroke 0.5s ease;
}
.hero-flyer-bg.hd-lit svg path {
  fill: url(#kmGrad);
  fill-opacity: 0.9;
  stroke: transparent;
}
.km-big-tr {
  left: 74.88%;
  top: calc(74px + 2.6%);
  width: 19.75%;
}
.km-big-bl {
  left: 0.49%;
  top: 62.98%;
  width: 14.47%;
}
.hero-deco .hd {
  display: none;
}
/* nav sous l'image : flèches rondes gradient + pills, centrées et visibles */
.km-nav {
  position: relative;
  width: 100%;
  height: auto;
  margin-top: clamp(20px, 3.4vh, 36px);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(28px, 4vw, 64px);
}
.km-rarrow {
  position: static;
  transform: none;
  width: clamp(38px, 3.8vw, 56px);
  aspect-ratio: 1;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: filter 0.3s ease;
}
.km-rarrow svg {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 0.45s var(--ease-luxury);
}
.km-rarrow:hover {
  filter: brightness(1.12) drop-shadow(0 8px 22px rgba(15, 180, 189, 0.45));
}
.km-rarrow:active {
  filter: brightness(0.94);
}
.km-rarrow:hover svg {
  transform: scale(1.1);
}
.hero-dots {
  position: static;
  transform: none;
  display: flex;
  gap: clamp(14px, 1.9vw, 30px);
  align-items: center;
}
.hero-dot {
  width: clamp(26px, 2.2vw, 42px);
  aspect-ratio: 41.47/21.41;
  border-radius: 999px;
  cursor: pointer;
  padding: 0;
  border: 1px solid transparent;
  background:
    linear-gradient(rgba(13, 26, 29, 0.35), rgba(13, 26, 29, 0.35)) padding-box,
    linear-gradient(90deg, #c9d400 0%, #0fb4bd 40%, #60bb98 72%, #cfbddd 100%)
      border-box;
  opacity: 0.7;
  transition:
    opacity 0.3s ease,
    transform 0.3s ease,
    background 0.3s ease,
    box-shadow 0.3s ease;
}
.hero-dot:hover {
  opacity: 1;
  transform: translateY(-2px) scale(1.12);
  box-shadow: 0 8px 20px -8px rgba(15, 180, 189, 0.6);
}
.hero-dot.is-active {
  opacity: 1;
  background: linear-gradient(
    90deg,
    #c9d400 0%,
    #0fb4bd 40%,
    #60bb98 72%,
    #cfbddd 100%
  );
}
/* contacts + CTA bas-gauche : flèche svg + remplissage gradient au survol */
.km-contact {
  position: absolute;
  left: clamp(24px, 4.5vw, 72px);
  bottom: calc(clamp(30px, 2.74vw, 54px) + 22px);
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.km-cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  align-self: flex-start;
  padding: 12px 26px;
  border-radius: 999px;
  text-decoration: none;
  font-size: 12.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.34);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transition:
    border-color 0.35s ease,
    color 0.35s ease,
    transform 0.35s var(--ease-luxury),
    box-shadow 0.35s ease,
    background-size 0.55s cubic-bezier(0.7, 0, 0.25, 1);
}
.km-cta-arr {
  width: 16px;
  height: 16px;
  flex: none;
  transition: transform 0.35s var(--ease-luxury);
}
@media (hover: hover) {
  .km-cta {
    background-image: linear-gradient(
      90deg,
      #c9d400 0%,
      #0fb4bd 40%,
      #60bb98 72%,
      #cfbddd 100%
    );
    background-size: 0% 100%;
    background-position: 0 0;
    background-repeat: no-repeat;
  }
  .km-cta:hover {
    background-size: 100% 100%;
    color: #0b1116;
    border-color: transparent;
    transform: translateY(-2px);
    box-shadow: 0 18px 40px -16px rgba(15, 180, 189, 0.55);
  }
  .km-cta:hover .km-cta-arr {
    transform: translateX(4px);
  }
}
.km-lines {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: clamp(14px, 1.6vw, 26px);
  font-size: 12.5px;
  letter-spacing: 0.05em;
  color: rgba(233, 232, 226, 0.85);
}
.km-lines a,
.km-lines .km-loc {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: inherit;
  text-decoration: none;
  transition: color 0.25s ease;
}
.km-lines svg {
  width: 14px;
  height: 14px;
  flex: none;
  opacity: 0.75;
  transition: opacity 0.25s ease;
}
.km-lines a:hover {
  color: #fff;
}
.km-lines a:hover svg {
  opacity: 1;
}
/* ============ FILIGRANE K — sections sombres, dessiné au scroll ============ */
#univers,
#lifestyle,
#pourquoi,
#contact {
  position: relative;
  overflow: hidden;
}
.km-kwm {
  position: absolute;
  z-index: 0;
  top: 10%;
  pointer-events: none;
  height: min(76%, 620px);
  aspect-ratio: 775/800;
  width: auto;
  opacity: 0.15;
}
.km-kwm use {
  stroke: rgba(236, 234, 226, 0.9);
  stroke-width: 3.2px;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
#lifestyle .km-kwm use {
  stroke: rgba(18, 26, 38, 0.55);
}
.km-kwm.is-drawn use {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.km-kwm--r {
  right: 3vw;
}
.km-kwm--l {
  left: 3vw;
}
@media (prefers-reduced-motion: reduce) {
  .km-kwm use {
    stroke-dashoffset: 0;
  }
}
/* ticker villes/cantons */
.km-ticker {
  position: absolute;
  left: 0;
  right: 0;
  bottom: max(8px, 1.1%);
  z-index: 6;
  height: clamp(30px, 2.74vw, 54px);
  border-top: 1px solid #fff;
  border-bottom: 1px solid #fff;
  overflow: hidden;
  display: flex;
  align-items: center;
}
.km-ticker::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    #c9d400 0%,
    #0fb4bd 40%,
    #60bb98 72%,
    #cfbddd 100%
  );
  opacity: 0.2;
}
.km-ticker-track {
  position: relative;
  display: flex;
  width: max-content;
  white-space: nowrap;
  animation: kmTick 46s linear infinite;
}
.km-ticker-track span {
  display: block;
  font-size: clamp(11px, 1.33vw, 26px);
  letter-spacing: 0.19em;
  color: #fff;
  line-height: 1;
}
@keyframes kmTick {
  to {
    transform: translateX(-50%);
  }
}
.km-ticker:hover .km-ticker-track {
  animation-play-state: paused;
}
@media (prefers-reduced-motion: reduce) {
  .km-ticker-track {
    animation: none;
  }
}
@media (max-width: 1080px) {
  .hero-visual {
    width: min(860px, 70vw);
  }
}
@media (max-width: 980px) and (min-width: 769px) {
  .hero-visual {
    width: min(760px, 78vw);
  }
  .km-badge {
    display: none;
  }
}
@media (min-width: 769px) and (max-height: 800px) {
  .hero-visual {
    width: min(800px, 56vw);
  }
}
/* MOBILE — HERO1 : titre haut, image centrée, nav sous l'image, ticker collé en bas */
@media (max-width: 768px) {
  .hero {
    min-height: calc(100vh - 65px);
    min-height: calc(100svh - 65px);
  }
  .km-badge {
    display: none;
  }
  .hero-grid {
    padding: 76px 20px 118px;
    margin-top: auto;
    margin-bottom: auto;
  }
  .km-title {
    align-self: stretch;
  }
  .km-eyebrow {
    font-size: 13px;
  }
  .km-h1 {
    font-size: clamp(24px, 7.2vw, 32px);
    white-space: normal;
    flex-wrap: wrap;
  }
  .hero-visual {
    width: 100%;
    margin-top: 22px;
  }
  .hero-card {
    aspect-ratio: 1172/650;
    border-radius: 12px;
    border: 1px solid rgba(236, 234, 226, 0.2);
    box-shadow: 0 34px 70px -28px rgba(6, 12, 20, 0.75);
  }
  .hero-card .slides img {
    transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .hc-index {
    font-size: 52px;
  }
  .km-corner {
    width: 52px;
    left: auto;
    right: -6px;
    transform: translate(0, -50%);
  }
  .km-corner:hover {
    transform: translate(0, -50%) scale(1.07);
  }
  .km-corner:active {
    transform: translate(0, -50%) scale(0.96);
  }
  .km-nav {
    gap: 24px;
    margin-top: 20px;
  }
  .km-rarrow {
    width: 48px;
  }
  .hero-dots {
    gap: 16px;
  }
  .hero-dot {
    width: 30px;
  }
  .km-contact {
    position: static;
    margin-top: 26px;
  }
  .km-cta {
    padding: 12px 24px;
    font-size: 12.5px;
  }
  .km-lines {
    font-size: 12px;
  }
  .km-ticker {
    bottom: 0;
    height: 34px;
  }
  .km-ticker-track span {
    font-size: 11px;
  }
  .km-big-tr {
    width: 26%;
    top: calc(70px + 2%);
  }
  .km-big-bl {
    width: 20%;
  }
  .km-kwm {
    height: min(46%, 380px);
    opacity: 0.11;
  }
}

/* ============ SEAMS (fond continu entre sections) ============ */
.seam {
  height: 170px;
  pointer-events: none;
}
@media (max-width: 980px) {
  .seam {
    height: 110px;
  }
}

/* ============ STATS TICKER ============ */
.stats-strip {
  background: var(--paper);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.stats-inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 38px 96px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
.stat {
  min-width: 0;
}
@media (max-width: 980px) {
  .stats-inner {
    padding: 32px 28px;
    gap: 12px;
  }
}
@media (max-width: 700px) {
  .stats-inner {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}
.stat {
  text-align: center;
}
.stat b {
  display: block;
  font-family: "TrenchSlab-Medium", "Bitter", serif;
  font-weight: 500;
  font-size: clamp(2rem, 3.6vw, 3rem);
  color: var(--khaki-deep);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.stat span {
  font-size: 0.74rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* ============ CURSEUR CUSTOM ============ */
.k-cursor {
  position: fixed;
  left: -100px;
  top: -100px;
  z-index: 290;
  width: 14px;
  height: 14px;
  pointer-events: none;
  background: var(--tan-light);
  opacity: 0;
  transform: translate(-50%, -50%) rotate(45deg);
  transition:
    width 0.28s cubic-bezier(0.22, 1, 0.36, 1),
    height 0.28s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.3s,
    background 0.25s;
}
.k-cursor span {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: rotate(-45deg);
  font-size: 0;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cream);
  transition: font-size 0.2s;
}
.k-cursor.big {
  width: 76px;
  height: 76px;
  background: var(--navy);
}
.k-cursor.big span {
  font-size: 0.66rem;
}

/* ============ HERO — GRADIENT FLYER (identique print) ============ */
.hero {
  background: linear-gradient(
    210deg,
    #3b6b2c 0%,
    #04383f 25%,
    #023640 78%,
    #295526 100%
  );
}
.hero::before {
  opacity: 0.35;
}
.hero::after {
  border-color: rgba(159, 180, 196, 0.22);
}
.hero .eyebrow {
  color: var(--tan-light);
}
.hero .eyebrow::before {
  background: var(--tan-light);
}
.xxl-line.stroke {
  -webkit-text-stroke: 2px var(--cream);
}
.xxl-rot {
  color: var(--silver);
}
.hero-note {
  color: rgba(233, 232, 226, 0.72);
}
.hero .contact-strip {
  color: rgba(233, 232, 226, 0.78);
}
.hero .contact-strip svg {
  stroke: var(--tan-light);
}
.hero .contact-strip strong {
  color: var(--cream);
}
.hero .contact-strip a {
  text-decoration: none;
  color: inherit;
  transition: color 0.2s;
}
.hero .contact-strip a:hover {
  color: var(--cream);
}
.hero-dot {
  border-color: rgba(233, 232, 226, 0.55);
}
.hero-dot:hover {
  border-color: var(--cream);
}
.hero-dot.is-active {
  background: var(--cream);
  border-color: var(--cream);
}
.hero-arrow {
  background: transparent;
  border-color: rgba(233, 232, 226, 0.4);
  color: var(--cream);
}
.hero-arrow:hover {
  background: rgba(233, 232, 226, 0.1);
  border-color: rgba(233, 232, 226, 0.65);
}

/* ============ DÉCOR HERO (3 flèches, épuré) ============ */
.hero-deco {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}
.hero-deco .hd {
  position: absolute;
  will-change: transform;
}
.hero-deco .hd1 {
  width: min(30vw, 380px);
  top: -54px;
  right: 5%;
  opacity: 0.15;
  animation: hdDrift 11s ease-in-out infinite alternate;
}
.hero-deco .hd2 {
  width: min(17vw, 210px);
  bottom: 18%;
  left: -44px;
  rotate: 180deg;
  opacity: 0.11;
  animation: hdDrift 13s ease-in-out infinite alternate;
}
.hero-deco .hd3 {
  width: min(10vw, 120px);
  top: 32%;
  right: 28%;
  opacity: 0.22;
  filter: drop-shadow(0 10px 22px rgba(0, 0, 0, 0.35));
  animation: hdDrift 9s ease-in-out infinite alternate;
}
@keyframes hdDrift {
  from {
    transform: translateY(-12px);
  }
  to {
    transform: translateY(14px);
  }
}
@media (max-width: 980px) {
  .hero-deco .hd1 {
    width: 44vw;
  }
  .hero-deco .hd2 {
    width: 26vw;
  }
  .hero-deco .hd3 {
    width: 16vw;
    right: 12%;
  }
}

@media (pointer: coarse) {
  .k-cursor {
    display: none;
  }
}

/* ============ GRAIN FILM ============ */
body::after {
  content: "";
  position: fixed;
  inset: -60%;
  z-index: 280;
  pointer-events: none;
  opacity: 0.045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grainJitter 1.1s steps(5) infinite;
}
@keyframes grainJitter {
  0% {
    transform: translate(0, 0);
  }
  20% {
    transform: translate(-4%, 3%);
  }
  40% {
    transform: translate(3%, -5%);
  }
  60% {
    transform: translate(-5%, -2%);
  }
  80% {
    transform: translate(4%, 4%);
  }
  100% {
    transform: translate(0, 0);
  }
}
@media (prefers-reduced-motion: reduce) {
  body::after {
    animation: none;
  }
}

/* ============ UNIVERS — panneaux catégories ============ */
.univers-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  margin-bottom: 46px;
}
.flow-grad .univers-head .section-title {
  filter: drop-shadow(0 2px 22px rgba(18, 26, 38, 0.5))
    drop-shadow(0 1px 5px rgba(18, 26, 38, 0.3));
}
@media (max-width: 900px) {
  .univers-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }
}
.univers-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
@media (max-width: 1000px) {
  .univers-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
}
.univers-card {
  position: relative;
  display: block;
  aspect-ratio: 3/3.7;
  border-radius: 22px;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid rgba(236, 234, 226, 0.14);
  background: var(--navy-deep);
  transition:
    transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.4s ease,
    box-shadow 0.5s ease;
}
@media (max-width: 1000px) {
  .univers-card {
    aspect-ratio: 4/3.4;
  }
}
.univers-card:hover {
  transform: translateY(-8px);
  border-color: rgba(204, 172, 146, 0.6);
  box-shadow: 0 34px 70px -30px rgba(8, 12, 18, 0.75);
}
.univers-card picture,
.univers-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.univers-card img {
  transform: scale(1.03);
  transition:
    transform 1.1s cubic-bezier(0.22, 1, 0.36, 1),
    filter 0.6s ease;
}
.univers-card:hover img {
  transform: scale(1.09);
  filter: saturate(1.08);
}
.uc-veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    185deg,
    rgba(18, 24, 31, 0.08) 32%,
    rgba(18, 24, 31, 0.46) 66%,
    rgba(13, 18, 25, 0.88) 100%
  );
  transition: opacity 0.5s ease;
}
.uc-index {
  position: absolute;
  top: 18px;
  left: 22px;
  z-index: 2;
  font-family: "TrenchSlab-Medium", serif;
  font-size: 56px;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(236, 234, 226, 0.55);
  letter-spacing: 0.02em;
  transition: -webkit-text-stroke-color 0.45s ease;
}
.univers-card:hover .uc-index {
  background: linear-gradient(
    115deg,
    #8a9270 0%,
    #a8ad8c 38%,
    #ccac92 66%,
    #9fb4c4 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke-color: transparent;
}
.uc-copy {
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 20px;
  z-index: 2;
  display: block;
}
.uc-eyebrow {
  display: block;
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--tan);
  margin-bottom: 8px;
}
.uc-title {
  display: block;
  font-family: "TrenchSlab-Bold", serif;
  font-size: clamp(24px, 2.3vw, 32px);
  color: var(--cream);
  letter-spacing: 0.01em;
  margin-bottom: 8px;
}
.uc-desc {
  display: block;
  font-size: 13.5px;
  line-height: 1.55;
  color: rgba(236, 234, 226, 0.78);
  max-width: 30ch;
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity 0.45s ease 0.05s,
    transform 0.45s cubic-bezier(0.22, 1, 0.36, 1) 0.05s;
}
.univers-card:hover .uc-desc {
  opacity: 1;
  transform: none;
}
.uc-arrow {
  position: absolute;
  right: 20px;
  bottom: 20px;
  z-index: 2;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: var(--tan);
  background: rgba(236, 234, 226, 0.08);
  border: 1px solid rgba(236, 234, 226, 0.22);
  backdrop-filter: blur(8px);
  transition:
    background 0.4s ease,
    color 0.4s ease,
    transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.uc-arrow svg {
  width: 26px;
  height: 26px;
}
.univers-card:hover .uc-arrow {
  background: linear-gradient(
    115deg,
    #8a9270 0%,
    #a8ad8c 38%,
    #ccac92 66%,
    #9fb4c4 100%
  );
  color: var(--navy-deep);
  border-color: transparent;
  transform: translateX(6px) rotate(3deg);
}
@media (pointer: coarse) {
  .uc-desc {
    opacity: 1;
    transform: none;
  }
}
@media (max-width: 600px) {
  .uc-index {
    font-size: 42px;
    top: 14px;
    left: 16px;
  }
  .uc-copy {
    left: 16px;
    right: 16px;
    bottom: 16px;
  }
  .uc-arrow {
    width: 44px;
    height: 44px;
    right: 14px;
    bottom: 14px;
  }
}

/* uc-3 — card configurateur animé (scène CashKit scalée en cover) */
.uc-ckl {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: var(--navy-deep);
}
.uc-ckl-inner {
  position: absolute;
  width: 900px;
  height: 620px;
  transform-origin: 0 0;
}

/* ============ LIFESTRIP — carrousel drag ============ */
.lifestrip {
  overflow: hidden;
}
.ls-head {
  margin-bottom: 30px;
}
.ls-viewport {
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  padding: 6px max(20px, calc((100vw - 1240px) / 2)) 2px;
}
.ls-viewport.is-drag {
  cursor: grabbing;
}
.ls-track {
  display: flex;
  gap: 20px;
  will-change: transform;
  width: max-content;
}
.ls-card {
  width: min(440px, 76vw);
  margin: 0;
  flex: none;
}
.ls-card picture {
  display: block;
  position: relative;
  aspect-ratio: 4/4.9;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(236, 234, 226, 0.14);
}
.ls-card picture img {
  position: absolute;
  inset: -6% -12%;
  width: 124%;
  height: 112%;
  object-fit: cover;
  transition: filter 0.5s ease;
}
.ls-card:hover picture img {
  filter: saturate(1.1);
}
.ls-card figcaption {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 13px 6px 0;
}
.ls-card b {
  font-family: "TrenchSlab-Medium", serif;
  font-weight: 500;
  font-size: 15.5px;
  color: var(--paper);
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.ls-card span {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(237, 235, 224, 0.55);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ls-foot {
  display: flex;
  align-items: center;
  gap: 26px;
  margin-top: 30px;
}
.ls-progress {
  flex: 1;
  height: 2px;
  background: rgba(237, 235, 224, 0.18);
  border-radius: 2px;
  overflow: hidden;
}
.ls-progress span {
  display: block;
  height: 100%;
  width: 12%;
  background: linear-gradient(
    90deg,
    #8a9270,
    #a8ad8c 40%,
    #ccac92 70%,
    #9fb4c4
  );
  border-radius: 2px;
}
.ls-count {
  font-family: "TrenchSlab-Medium", serif;
  font-size: 14px;
  letter-spacing: 0.14em;
  color: rgba(237, 235, 224, 0.75);
  white-space: nowrap;
}
@media (max-width: 600px) {
  .ls-card {
    width: 80vw;
  }
  .ls-foot {
    margin-top: 20px;
  }
}

/* ============ NAV DROPDOWN Univers ============ */
.nav-drop {
  position: relative;
}
.nav-drop-btn {
  background: none;
  border: 0;
  cursor: pointer;
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 0;
  text-transform: uppercase;
}
.nav-drop-btn svg {
  width: 9px;
  height: 9px;
  transition: transform 0.3s ease;
}
.nav-drop.open .nav-drop-btn svg {
  transform: rotate(180deg);
}
.nav-drop-menu {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  transform: translate(-50%, 8px);
  min-width: 230px;
  background: linear-gradient(
    150deg,
    rgba(64, 72, 56, 0.92),
    rgba(30, 42, 58, 0.94)
  );
  border: 1px solid rgba(236, 234, 226, 0.18);
  border-radius: 16px;
  padding: 8px;
  backdrop-filter: blur(18px) saturate(1.35);
  box-shadow: 0 30px 60px -24px rgba(8, 12, 18, 0.7);
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.3s ease,
    transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.nav-drop.open .nav-drop-menu {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, 0);
}
.nav-drop-menu a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 14px;
  border-radius: 11px;
  color: #f0efe8;
  text-decoration: none;
  font-size: 12.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition:
    background 0.25s ease,
    padding-left 0.25s ease;
}
.nav-drop-menu a:hover {
  background: rgba(236, 234, 226, 0.09);
  padding-left: 18px;
}
.nav-drop-menu a i {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: linear-gradient(115deg, #a8ad8c, #ccac92);
  opacity: 0;
  transition: opacity 0.25s ease;
}
.nav-drop-menu a:hover i {
  opacity: 1;
}
@media (max-width: 900px) {
  .nav-drop-menu {
    position: static;
    transform: none;
    opacity: 1;
    pointer-events: auto;
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0 0 0 14px;
    min-width: 0;
    backdrop-filter: none;
    display: none;
  }
  .nav-drop.open .nav-drop-menu {
    display: block;
  }
  .nav-drop-menu a {
    padding: 9px 0;
    font-size: 13px;
    color: rgba(240, 239, 232, 0.85);
  }
}

/* ============ PAGES UNIVERS ============ */
.page-hero {
  position: relative;
  min-height: 78vh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--navy-deep);
}
.page-hero > picture,
.page-hero > picture img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.page-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(18, 26, 38, 0.6) 0%,
    rgba(18, 26, 38, 0.18) 42%,
    rgba(13, 18, 25, 0.82) 100%
  );
}
.page-hero .wrap {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-top: 150px;
  padding-bottom: 80px;
}
.page-hero .eyebrow {
  color: var(--tan-light);
}
.page-hero h1 {
  font-family: "TrenchSlab-Bold", serif;
  font-size: clamp(40px, 5.6vw, 78px);
  line-height: 0.98;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  color: var(--cream);
  margin: 16px 0 20px;
}
.page-hero h1 em {
  font-style: italic;
  color: var(--tan-light);
}
.ph-sub {
  max-width: 56ch;
  color: rgba(240, 239, 232, 0.85);
  font-size: 15.5px;
  line-height: 1.65;
  margin-bottom: 34px;
}
.ph-cta {
  display: flex;
  align-items: center;
  gap: 26px;
  flex-wrap: wrap;
}
.ph-tel {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--cream);
  text-decoration: none;
  font-family: "TrenchSlab-Medium", serif;
  letter-spacing: 0.04em;
  font-size: 16px;
}
.ph-tel svg {
  width: 18px;
  height: 18px;
  stroke: var(--tan-light);
  fill: none;
}
.ph-tel:hover {
  color: var(--tan-light);
}
.page-gallery {
  padding: 96px 0 80px;
}
.page-gallery .gallery-grid {
  columns: 2 340px;
  column-gap: 18px;
  margin-top: 44px;
}
.page-gallery .gallery-item {
  break-inside: avoid;
  margin-bottom: 18px;
}
.gal-eyebrow {
  color: var(--tan-light);
}
.cta-band {
  padding: 120px 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta-band .section-sub {
  margin: 16px auto 36px;
  max-width: 52ch;
}
.cta-band .nav-cta {
  position: relative;
  display: inline-flex;
  font-size: 13.5px;
}
@media (max-width: 600px) {
  .page-hero h1 {
    font-size: clamp(34px, 10vw, 46px);
  }
  .cta-band {
    padding: 90px 0;
  }
}

/* ============ TOILE — gradient vertical continu (accueil) ============ */
.flow-grad {
  background: linear-gradient(
    180deg,
    #edebe0 0%,
    #edebe0 2%,
    #d6d4c7 3%,
    #a8ad9f 4%,
    #7e8677 5%,
    #4a5462 6.2%,
    #1b2634 7.4%,
    #666b4f 16%,
    #4f5439 20%,
    #1b2634 27%,
    #1b2634 40%,
    #666b4f 46%,
    #5c6147 52%,
    #1b2634 58%,
    #1b2634 63%,
    #666b4f 68%,
    #4f5439 74%,
    #55503c 78%,
    #1b2634 84%,
    #121a26 93%,
    #0d141d 100%
  );
}
.flow-grad .sec-navy,
.flow-grad .sec-khaki {
  background: transparent;
}
.flow-grad footer {
  background: transparent;
}
.flow-grad .stats-strip {
  background: transparent;
}
.flow-grad .steel-marquee {
  border-top: 0;
}

/* ============ CONFIGURATEUR LIVE — CashKit animé ============ */
.quote-config {
  padding: 110px 0 90px;
  overflow-x: clip;
  text-align: center;
}
.quote-config .ckl-sub {
  text-align: center;
  max-width: 62ch;
  margin: 14px auto 0;
  font-size: 0.95rem;
  line-height: 1.65;
  color: rgba(236, 234, 226, 0.78);
}
.ckl-stage {
  margin: 44px auto 0;
  padding: 0 16px;
}
.ckl-cta-row {
  display: flex;
  justify-content: center;
  margin-top: 54px;
}
.ckl-cta-row .cg-label {
  font-size: 0.7rem;
}
@media (max-width: 768px) {
  .quote-config {
    padding: 80px 0 64px;
  }
  .ckl-stage {
    margin: 30px auto 0;
  }
  .ckl-cta-row {
    margin-top: 34px;
  }
}

/* ============ PAGES MÉTIERS — carrousel glass + flèches animées + reveal ============ */
.ls-card {
  position: relative;
}
.ls-num {
  position: absolute;
  top: 16px;
  left: 18px;
  z-index: 2;
  font-family: "TrenchSlab-Medium", serif;
  font-size: 52px;
  line-height: 1;
  pointer-events: none;
  color: transparent;
  -webkit-text-stroke: 1.2px rgba(236, 234, 226, 0.65);
  letter-spacing: 0.02em;
  text-shadow: 0 2px 18px rgba(18, 26, 38, 0.35);
}
.ls-card.glass picture {
  border-radius: 20px;
}
.ls-card.glass figcaption {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 2;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 13px 18px;
  border-radius: 14px;
  background: linear-gradient(
    120deg,
    rgba(27, 38, 52, 0.52),
    rgba(27, 38, 52, 0.38)
  );
  -webkit-backdrop-filter: blur(16px) saturate(1.35);
  backdrop-filter: blur(16px) saturate(1.3);
  border: 1px solid rgba(236, 234, 226, 0.2);
  box-shadow:
    0 18px 34px -20px rgba(8, 12, 18, 0.65),
    inset 0 1px 0 rgba(255, 255, 255, 0.14);
}
.ls-card.glass b {
  color: var(--cream);
  font-size: 15px;
}
.ls-card.glass span {
  color: rgba(240, 239, 232, 0.66);
}

/* champ de flèches gradient dérivant en fond de section */
.arrow-field {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.arrow-field svg {
  position: absolute;
  width: 150px;
  height: auto;
  opacity: 0.5;
  filter: drop-shadow(0 14px 30px rgba(8, 12, 18, 0.3));
  will-change: transform;
}
.arrow-field svg:nth-child(1) {
  top: 8%;
  left: 4%;
  animation: afDrift 26s ease-in-out infinite alternate;
}
.arrow-field svg:nth-child(2) {
  top: 52%;
  left: 38%;
  width: 220px;
  animation: afDrift 34s ease-in-out infinite alternate-reverse;
}
.arrow-field svg:nth-child(3) {
  top: 18%;
  right: 6%;
  width: 120px;
  animation: afDrift 30s ease-in-out infinite alternate;
  animation-delay: -8s;
}
@keyframes afDrift {
  0% {
    transform: translate3d(0, 0, 0) rotate(-8deg);
  }
  50% {
    transform: translate3d(60px, -34px, 0) rotate(4deg);
  }
  100% {
    transform: translate3d(150px, 20px, 0) rotate(10deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .arrow-field svg {
    animation: none;
  }
}

/* overlay reveal — armée de flèches (bas-gauche → haut-droite) */
.page-reveal {
  position: fixed;
  inset: 0;
  z-index: 520;
  pointer-events: none;
  visibility: hidden;
  overflow: hidden;
}
.pr-defs {
  position: absolute;
  width: 0;
  height: 0;
}
.pr-arrow {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  filter: drop-shadow(0 12px 26px rgba(8, 12, 18, 0.4));
  will-change: transform, opacity;
}
.pr-arrow path {
  fill: url(#armyGrad);
}
.pr-arrow.a1 {
  left: -6%;
  bottom: 4%;
  width: 300px;
}
.pr-arrow.a2 {
  left: 9%;
  bottom: 20%;
  width: 190px;
}
.pr-arrow.a3 {
  left: 20%;
  bottom: 8%;
  width: 340px;
}
.pr-arrow.a4 {
  left: 32%;
  bottom: 30%;
  width: 180px;
}
.pr-arrow.a5 {
  left: 43%;
  bottom: 14%;
  width: 260px;
}
.pr-arrow.a6 {
  left: 54%;
  bottom: 32%;
  width: 210px;
}
.pr-arrow.a7 {
  left: 63%;
  bottom: 18%;
  width: 320px;
}
.pr-arrow.a8 {
  left: 73%;
  bottom: 38%;
  width: 190px;
}
.pr-arrow.a9 {
  left: 81%;
  bottom: 26%;
  width: 270px;
}
.pr-arrow.a10 {
  left: 90%;
  bottom: 44%;
  width: 220px;
}
.pr-arrow.a11 {
  left: 14%;
  bottom: 40%;
  width: 150px;
}
.pr-arrow.a12 {
  left: 50%;
  bottom: 48%;
  width: 170px;
}
@media (max-width: 700px) {
  .pr-arrow.a1 {
    width: 190px;
  }
  .pr-arrow.a3 {
    width: 220px;
  }
  .pr-arrow.a7 {
    width: 210px;
  }
  .pr-arrow.a5 {
    width: 170px;
  }
  .pr-arrow.a9 {
    width: 180px;
  }
  .pr-arrow.a10 {
    width: 150px;
  }
}

/* header galerie page métier */
.pg-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 30px;
  flex-wrap: wrap;
  margin-bottom: 34px;
}
.pg-head .section-sub {
  margin: 0;
}
@media (max-width: 700px) {
  .ls-num {
    font-size: 40px;
    top: 12px;
    left: 14px;
  }
  .ls-card.glass figcaption {
    left: 8px;
    right: 8px;
    bottom: 8px;
    padding: 11px 14px;
  }
}

/* ============ NAV LATÉRALE — ligne en arche, points de section ============ */
.snav {
  position: fixed;
  right: 24px;
  top: 50%;
  z-index: 60;
  transform: translateY(-50%);
  width: 48px;
  pointer-events: none;
}
.snav svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  display: block;
}
.snav-base {
  fill: none;
  stroke: rgba(236, 234, 226, 0.2);
  stroke-width: 1.2;
}
.snav-prog {
  fill: none;
  stroke: url(#snavGrad);
  stroke-width: 1.6;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.65s cubic-bezier(0.22, 1, 0.36, 1);
  filter: drop-shadow(0 0 4px rgba(204, 172, 146, 0.35));
}
.snav-item {
  pointer-events: auto;
  position: absolute;
  width: 30px;
  height: 30px;
  margin: -15px 0 0 -15px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.snav-item::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(236, 234, 226, 0.14);
  border: 1px solid rgba(236, 234, 226, 0.5);
  transition:
    transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    background 0.35s ease,
    border-color 0.35s ease,
    box-shadow 0.35s ease;
}
.snav-item:hover::before {
  transform: scale(1.35);
  border-color: rgba(236, 234, 226, 0.95);
  background: rgba(236, 234, 226, 0.3);
}
.snav-item.active::before {
  transform: scale(1.75);
  border-color: transparent;
  background: linear-gradient(
    115deg,
    #8a9270 0%,
    #a8ad8c 38%,
    #ccac92 66%,
    #9fb4c4 100%
  );
  box-shadow:
    0 0 14px rgba(204, 172, 146, 0.8),
    0 0 4px rgba(159, 180, 196, 0.55);
}
.snav-label {
  position: absolute;
  right: calc(100% - 6px);
  top: 50%;
  transform: translate(10px, -50%);
  white-space: nowrap;
  pointer-events: none;
  font-family: inherit;
  font-size: 9.5px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: rgba(236, 234, 226, 0.55);
  text-decoration: none;
  opacity: 0;
  transition:
    opacity 0.35s ease,
    transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    color 0.35s ease;
  filter: drop-shadow(0 1px 6px rgba(18, 26, 38, 0.5));
}
.snav-item:hover .snav-label {
  opacity: 1;
  transform: translate(0, -50%);
  color: rgba(236, 234, 226, 0.95);
}
.snav-item.active .snav-label {
  opacity: 1;
  transform: translate(0, -50%);
  background: linear-gradient(115deg, #a8ad8c 0%, #ccac92 55%, #9fb4c4 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
@media (max-width: 1100px) {
  .snav {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .snav-item::before,
  .snav-label,
  .snav-prog {
    transition: none;
  }
}

/* ============ FAQ (AEO — contenu visible + FAQPage JSON-LD) ============ */
.sec-faq {
  background: var(--paper);
  color: var(--metal-900);
  padding: 96px 0;
}
.sec-faq .faq-lead {
  max-width: 720px;
  margin-top: 18px;
  color: var(--ink-soft);
  font-family: "Jost", sans-serif;
  font-size: 17px;
  line-height: 1.6;
}
.sec-faq .faq-list {
  margin-top: 40px;
  border-top: 1px solid var(--line);
}
.sec-faq details {
  border-bottom: 1px solid var(--line);
}
.sec-faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 22px 4px;
  cursor: pointer;
  font-family: "TrenchSlab-Medium", "Jost", sans-serif;
  font-size: 19px;
  line-height: 1.35;
  list-style: none;
  transition: color 0.3s var(--ease-luxury);
}
.sec-faq summary::-webkit-details-marker {
  display: none;
}
.sec-faq summary::after {
  content: "+";
  flex: 0 0 auto;
  font-family: "TrenchSlab-Bold", "Jost", sans-serif;
  font-size: 26px;
  color: var(--khaki);
  transition: transform 0.3s var(--ease-luxury);
}
.sec-faq details[open] summary::after {
  transform: rotate(45deg);
}
.sec-faq summary:hover {
  color: var(--khaki-deep);
}
.sec-faq .faq-a {
  padding: 0 4px 24px;
  max-width: 820px;
  color: var(--metal-600);
  font-family: "Jost", sans-serif;
  font-size: 16.5px;
  line-height: 1.7;
}
.sec-faq .faq-a a {
  color: var(--khaki-deep);
  text-decoration: underline;
}
@media (max-width: 980px) {
  .sec-faq {
    padding: 64px 0;
  }
  .sec-faq summary {
    font-size: 17px;
    padding: 18px 2px;
  }
}