/* Des titres sculptés, tout en gardant les textes et les boutons à plat. */
.depth-title {
  --title-depth-near: #8b7cdd;
  --title-depth-mid: #524097;
  --title-depth-far: #2a214e;
  --title-rim: #dcd6ff55;
  --title-shadow: #05061d66;
  font-family: Inter, var(--font);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -.04em;
  word-spacing: .025em;
  color: var(--text);
  -webkit-text-stroke: .45px var(--title-rim);
  text-shadow:
    1px 1px 0 var(--title-depth-near),
    2px 2px 0 var(--title-depth-near),
    3px 3px 0 var(--title-depth-mid),
    4px 4px 0 var(--title-depth-mid),
    5px 5px 0 var(--title-depth-mid),
    6px 6px 0 var(--title-depth-far),
    7px 7px 0 var(--title-depth-far),
    12px 17px 17px var(--title-shadow);
  transform: perspective(1000px) rotateX(4deg) rotateY(-7deg) rotateZ(-2.8deg);
  transform-origin: left center;
  position: relative;
  z-index: 1;
}
.depth-title .depth-line { display: block; }
.hero h1.depth-title { font-size: clamp(70px, 7vw, 112px); line-height: 1.03; margin: 12px 0 24px; }
.hero .hero-copy { padding-block: 15px 35px; }
.section h2.depth-title { font-size: clamp(36px, 4.3vw, 64px); line-height: 1.1; margin-top: 10px; margin-bottom: 12px; }
.pricing-intro { grid-template-columns: .72fr 1.4fr; gap: 4%; min-height: 430px; }
.pricing-copy { padding-block: 22px; }
.pricing #pricing-title { font-size: clamp(48px, 5.15vw, 82px); line-height: 1.04; margin: 14px 0 32px; }
#pricing-title > .depth-line { color: var(--text); }
#pricing-title > .depth-accent { color: #a79aff; }
.pricing-copy > p:not(.eyebrow) { margin-top: 26px; }
.studio #studio-title { font-size: clamp(36px, 3.8vw, 57px); }
.tailgate-copy #tailgate-title { font-size: clamp(30px, 3.1vw, 46px); line-height: 1.12; margin-block: 16px 27px; }
.tailgate-case { padding-block: 52px; }
.contact h2.depth-title { font-size: clamp(40px, 4.9vw, 76px); line-height: 1.08; }
body[data-theme=light] .depth-title {
  --title-depth-near: #d9d0f9;
  --title-depth-mid: #b5a4e5;
  --title-depth-far: #8e7cbd;
  --title-rim: #73609c22;
  --title-shadow: #5d43872b;
}
body[data-theme=light] #pricing-title > .depth-accent { color: #6550df; }
@media (max-width: 1150px) and (min-width: 761px) {
  .pricing-intro { grid-template-columns: .65fr 1.45fr; gap: 3%; }
  .pricing #pricing-title { font-size: clamp(40px, 5vw, 60px); }
  .hero h1.depth-title { font-size: clamp(62px, 7.6vw, 85px); }
  .studio #studio-title { font-size: 41px; }
  .tailgate-copy #tailgate-title { font-size: 34px; }
}
@media (max-width: 900px) {
  .tailgate-copy #tailgate-title { font-size: 39px; }
}
@media (max-width: 760px) {
  .depth-title {
    -webkit-text-stroke: .25px var(--title-rim);
    text-shadow:
      1px 1px 0 var(--title-depth-near),
      2px 2px 0 var(--title-depth-mid),
      3px 3px 0 var(--title-depth-far),
      5px 8px 10px var(--title-shadow);
    transform: perspective(700px) rotateX(3deg) rotateY(-5deg) rotateZ(-2deg);
  }
  .hero h1.depth-title { font-size: clamp(38px, 12.2vw, 62px); line-height: 1.07; margin-block: 14px 22px; }
  .hero .hero-copy { padding-block: 10px 0; }
  .section h2.depth-title { font-size: clamp(30px, 8.4vw, 43px); line-height: 1.13; margin-block: 10px 18px; }
  .pricing-intro { grid-template-columns: 1fr; gap: 0; min-height: 0; }
  .pricing-copy { padding-block: 12px 0; }
  .pricing #pricing-title { font-size: clamp(30px, 9.6vw, 48px); line-height: 1.12; margin-block: 16px 25px; }
  .pricing-copy > p:not(.eyebrow) { margin-top: 23px; }
  .studio #studio-title { font-size: clamp(30px, 8.4vw, 43px); }
  .tailgate-case { padding-block: 34px; }
  .tailgate-copy #tailgate-title { font-size: clamp(27px, 7.5vw, 37px); line-height: 1.17; margin-block: 16px 24px; }
  .contact h2.depth-title { font-size: clamp(32px, 9.4vw, 49px); line-height: 1.14; }
}