/* D · David — Base styles: brand variables, fonts, reset */

:root{
  --plum:#2C0328;
  --v1:#642462;
  --v2:#753270;
  --v3:#A15FB3;
  --v4:#CC9FDA;
  --v5:#F1E4F6;
  --ink:#180116;
  --bg:#F6EEF6;
  --surface:#FFFFFF;
  --text:#1F0A1D;
  --muted:#6E5A6C;
  --line:#E7DCE6;

  --body: "Lexend", sans-serif;
  --wide: "Lexend Zetta", sans-serif;
  --mono: "IBM Plex Mono", monospace;
}

*, *::before, *::after{
  box-sizing: border-box;
}

html{
  scroll-behavior: smooth;
}

body{
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--body);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.6;
}

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

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

.container{
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
}

.eyebrow{
  font-family: var(--wide);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .75;
  margin: 0 0 14px;
}

h1, h2, h3{
  font-family: var(--wide);
  font-weight: 400;
  letter-spacing: -.12em;
  margin: 0;
}

/* Header */

.site-header{
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 100;
}

.header-inner{
  display: flex;
  align-items: center;
  gap: 32px;
  padding-block: 16px;
}

.brand-logo{
  height: 40px;
  width: auto;
}

.nav{
  display: flex;
  align-items: center;
  gap: 28px;
  margin-left: 16px;
  flex: 1;
}

.nav a{
  font-family: var(--wide);
  font-size: 11px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
  padding-bottom: 4px;
  border-bottom: 1px solid transparent;
}

.nav a:hover,
.nav a.active{
  color: var(--plum);
  border-bottom-color: var(--plum);
}

.header-actions{
  display: flex;
  align-items: center;
  gap: 20px;
}

.lang-switch{
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted);
}

.lang-switch a.active{
  color: var(--plum);
  font-weight: 500;
}

.btn{
  display: inline-block;
  font-family: var(--wide);
  font-size: 11px;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: 12px 22px;
  border-radius: 999px;
  transition: opacity .2s ease;
}

.btn:hover{
  opacity: .85;
}

.btn-primary{
  background: var(--plum);
  color: #fff;
}

.nav-toggle{
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 32px;
  height: 32px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

.nav-toggle span{
  display: block;
  width: 100%;
  height: 2px;
  background: var(--plum);
}

@media (max-width: 860px){
  .nav, .header-actions{
    display: none;
  }

  .nav-toggle{
    display: flex;
    margin-left: auto;
  }
}

/* Mobile menu (opened with the hamburger button, js/menu.js) */

.nav-toggle span{
  transition: transform .25s ease, opacity .2s ease;
}

@media (max-width: 860px){
  .site-header.menu-open{
    box-shadow: 0 24px 40px -24px rgba(24, 1, 22, .55);
  }

  .site-header.menu-open .header-inner{
    flex-wrap: wrap;
    row-gap: 0;
    max-height: 100vh;
    max-height: 100dvh;
    overflow-y: auto;
  }

  .site-header.menu-open .nav{
    display: flex;
    order: 3;
    flex-basis: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin: 14px 0 0;
    border-top: 1px solid var(--line);
  }

  .site-header.menu-open .nav a{
    font-size: 13px;
    padding: 18px 2px;
    border-bottom: 1px solid var(--line);
    color: var(--text);
  }

  .site-header.menu-open .nav a.active{
    color: var(--v1);
    border-bottom-color: var(--line);
  }

  .site-header.menu-open .header-actions{
    display: flex;
    order: 4;
    flex-basis: 100%;
    justify-content: space-between;
    padding: 22px 2px 10px;
  }

  .site-header.menu-open .lang-switch{
    font-size: 14px;
  }

  .site-header.menu-open .nav-toggle span:nth-child(1){
    transform: translateY(7px) rotate(45deg);
  }

  .site-header.menu-open .nav-toggle span:nth-child(2){
    opacity: 0;
  }

  .site-header.menu-open .nav-toggle span:nth-child(3){
    transform: translateY(-7px) rotate(-45deg);
  }

  body.menu-lock{
    overflow: hidden;
  }
}

/* Intro: framed photo + headline */

.intro{
  padding-block: 90px;
  overflow: hidden;
  background: radial-gradient(circle at center, #642462 0%, #180116 100%);
}

.intro-grid{
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  align-items: center;
  gap: 60px;
}

.intro-photo{
  position: relative;
  display: flex;
  justify-content: center;
}

.intro-photo::before,
.intro-photo::after{
  content: "";
  position: absolute;
  z-index: 0;
  border-radius: 58% 42% 51% 49% / 45% 55% 45% 55%;
}

.intro-photo::before{
  width: 74%;
  aspect-ratio: 1;
  background: var(--v4);
  top: -10%;
  right: 2%;
}

.intro-photo::after{
  width: 30%;
  aspect-ratio: 1;
  border: 1px solid var(--v3);
  background: none;
  bottom: -4%;
  left: 0%;
  border-radius: 45% 55% 48% 52% / 55% 45% 55% 45%;
}

.photo-frame{
  position: relative;
  z-index: 1;
  width: 72%;
  aspect-ratio: 0.73;
  border-radius: 999px;
  overflow: hidden;
  border: 6px solid var(--surface);
  box-shadow: 0 30px 60px -20px rgba(24, 1, 22, .35);
}

.photo-frame img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 100%;
}

.photo-frame video{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 22%;
}

.photo-frame::after{
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center 35%, transparent 40%, rgba(24, 1, 22, .55) 100%);
}

.intro-text{
  container-type: inline-size;
}

.intro-text .eyebrow{
  color: var(--v4);
  opacity: 1;
}

.intro-text h2{
  font-family: var(--body);
  font-weight: 300;
  letter-spacing: -.01em;
  font-size: clamp(28px, 8.6cqw, 62px);
  line-height: 1.25;
  color: #fff;
}

.intro-text .line{
  display: block;
  white-space: nowrap;
}

.intro-text .line-2{
  margin-left: 26%;
}

/* About preview */

.about-preview{
  padding-block: 56px;
  background: var(--v5);
  text-align: center;
}

.about-preview-inner{
  max-width: 1000px;
}

.about-preview-text{
  font-family: var(--body);
  font-weight: 300;
  font-size: 16.5px;
  line-height: 1.65;
  color: rgba(24, 1, 22, .78);
  margin: 0 0 24px;
}

.about-preview-text strong{
  font-weight: 500;
  color: var(--plum);
}

.about-preview-text p{
  margin: 0 0 16px;
}

.about-preview-text .about-hand{
  margin: 18px 0 20px;
  line-height: 1.2;
}

.about-hand-script{
  font-family: 'Allura', cursive;
  font-weight: 400;
  font-size: clamp(34px, 3.4vw, 42px);
  letter-spacing: 0;
  line-height: 1.1;
  color: var(--v2);
  margin-right: .15em;
}

.btn-outline-dark{
  border: 1px solid var(--plum);
  color: var(--plum);
}

/* Instagram preview */

.instagram-preview{
  padding-block: 90px;
  background: var(--v5);
  text-align: center;
}

.instagram-title{
  font-size: clamp(24px, 3vw, 34px);
  color: var(--plum);
  margin: 0 auto;
}

.instagram-feed{
  position: relative;
  max-width: 960px;
  margin: 40px auto;
  display: flex;
  align-items: center;
  gap: 12px;
}

.instagram-viewport{
  flex: 1;
  overflow: hidden;
  border-radius: 16px;
}

.instagram-track{
  display: flex;
  gap: 16px;
  transition: transform .35s ease;
}

.instagram-slide{
  flex: 0 0 calc(25% - 12px);
  aspect-ratio: 1 / 1;
  border-radius: 12px;
  overflow: hidden;
  display: block;
  background: var(--v5);
}

.instagram-slide img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .35s ease;
}

.instagram-slide:hover img{
  transform: scale(1.05);
}

.instagram-nav{
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(44, 3, 40, .3);
  background: rgba(255, 255, 255, .6);
  color: var(--plum);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.instagram-nav:disabled{
  opacity: .3;
  cursor: default;
}

.instagram-slide.is-video{
  position: relative;
}

.instagram-slide.is-video::after{
  content: "";
  position: absolute;
  top: 10px;
  right: 10px;
  border-style: solid;
  border-width: 7px 0 7px 12px;
  border-color: transparent transparent transparent #fff;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.4));
}

@media (max-width: 720px){
  .instagram-slide{
    flex: 0 0 calc(50% - 8px);
  }
}

/* Footer */

.site-footer{
  background: var(--plum);
  color: #fff;
  padding-block: 70px 0;
}

.footer-grid{
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 50px;
  border-bottom: 1px solid rgba(255, 255, 255, .15);
}

.footer-logo{
  height: 100px;
  width: auto;
  margin-bottom: 22px;
}

.footer-social{
  display: flex;
  gap: 14px;
}

.footer-social a{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .3);
  color: #fff;
}

.footer-social a svg{
  width: 17px;
  height: 17px;
}

.footer-social-pending{
  opacity: .45;
}

.footer-heading{
  font-family: var(--wide);
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--v4);
  margin: 0 0 18px;
}

.footer-sitemap,
.footer-legal{
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer-sitemap a,
.footer-legal a{
  font-size: 14px;
  color: rgba(255, 255, 255, .85);
}

.footer-sitemap a:hover,
.footer-legal a:hover{
  color: #fff;
}

.footer-bottom{
  padding-block: 24px;
  text-align: center;
}

.footer-bottom p{
  font-family: var(--mono);
  font-size: 12px;
  color: rgba(255, 255, 255, .6);
  margin: 0;
}

@media (max-width: 700px){
  .footer-grid{
    grid-template-columns: 1fr;
    text-align: center;
  }

  .footer-social{
    justify-content: center;
  }

  .footer-logo{
    margin-inline: auto;
  }
}

/* CTA section */

.cta-section{
  padding-block: 100px;
  background: var(--v1);
  text-align: center;
}

.cta-section .eyebrow{
  color: var(--v4);
  opacity: 1;
}

.cta-title{
  font-size: clamp(28px, 4vw, 44px);
  color: #fff;
  margin: 0 auto 40px;
}

.cta-buttons{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 18px;
}

.btn-cta{
  padding: 16px 32px;
}

.btn-cta--primary{
  background: #fff;
  color: var(--plum);
}

.btn-cta--ghost{
  border: 1px solid #fff;
  color: #fff;
}

/* Reviews preview */

.reviews-preview{
  padding-block: 90px;
  background: var(--surface);
  text-align: center;
}

.reviews-title{
  font-size: clamp(24px, 3vw, 34px);
  color: var(--plum);
  margin: 0 auto;
}

.reviews-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  max-width: 1080px;
  margin: 50px auto 40px;
  text-align: left;
}

.review-card{
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 26px 24px;
}

.review-stars{
  color: #F0B429;
  font-size: 15px;
  letter-spacing: .1em;
  margin-bottom: 14px;
}

.review-text{
  font-size: 14px;
  color: var(--text);
  line-height: 1.6;
  margin: 0 0 18px;
}

.review-author{
  font-family: var(--wide);
  font-size: 12px;
  letter-spacing: -.04em;
  color: var(--plum);
  margin: 0;
}

/* Services preview */

.services-preview{
  padding-block: 130px;
  background: var(--surface);
  text-align: center;
}

.eyebrow.center{
  text-align: center;
  color: var(--v1);
  opacity: 1;
}

.services-title{
  font-size: clamp(28px, 4.4vw, 50px);
  color: var(--plum);
  max-width: 760px;
  margin: 0 auto;
}

.services-title--home{
  max-width: none;
  white-space: nowrap;
  font-size: clamp(18px, 4.6vw, 42px);
}


.services-sub{
  max-width: 680px;
  margin: 26px auto 0;
  font-size: 16.5px;
  color: var(--ink);
  opacity: .75;
}

.tech-list{
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  max-width: 1080px;
  margin: 60px auto 0;
  padding: 0;
}

.tech-list li{
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--wide);
  font-weight: 400;
  font-size: 15px;
  letter-spacing: -.06em;
  color: #fff;
  background: var(--v1);
  border-radius: 999px;
  padding: 14px 30px 14px 14px;
  box-shadow: 0 14px 26px -12px rgba(44, 3, 40, .45);
}

.tech-icon{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--plum);
  color: #fff;
  flex-shrink: 0;
}

.tech-icon svg{
  width: 22px;
  height: 22px;
}

.tech-icon-img{
  width: 26px;
  height: 26px;
  object-fit: contain;
  filter: invert(1) brightness(1.8);
  mix-blend-mode: screen;
}

.tech-icon-img--plain{
  filter: none;
  mix-blend-mode: normal;
  image-rendering: -webkit-optimize-contrast;
}

.tech-icon-img--sm{
  width: 19px;
  height: 19px;
}

.services-closing{
  max-width: 660px;
  margin: 50px auto 0;
  font-family: var(--wide);
  font-size: 17px;
  letter-spacing: -.06em;
  line-height: 1.6;
  color: var(--plum);
}

.btn-outline{
  margin-top: 28px;
  border: 1px solid var(--plum);
  color: var(--plum);
}

/* Services page — full technique cards (boxed, standalone from the home tech-list) */

.svc-grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  max-width: 1080px;
  margin: 60px auto 0;
  text-align: left;
}

.svc-card{
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 28px 24px;
  text-align: center;
  transition: transform .2s ease, box-shadow .2s ease;
}

.svc-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 20px 34px -18px rgba(44, 3, 40, .35);
}

.svc-icon{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: var(--plum);
  color: #fff;
  flex-shrink: 0;
  margin-inline: auto;
}

.svc-icon svg{
  width: 26px;
  height: 26px;
}

.svc-icon-img{
  width: 30px;
  height: 30px;
  object-fit: contain;
  filter: invert(1) brightness(1.8);
  mix-blend-mode: screen;
}

.svc-icon-img--plain{
  filter: none;
  mix-blend-mode: normal;
  image-rendering: -webkit-optimize-contrast;
}

.svc-icon-img--sm{
  width: 22px;
  height: 22px;
}

.svc-card h3{
  font-size: 15px;
  color: var(--plum);
  margin: 18px 0 10px;
  line-height: 1.35;
}

.svc-card p{
  font-size: 13.5px;
  color: var(--muted);
  margin: 0;
  line-height: 1.55;
}

@media (max-width: 860px){
  .intro{
    padding-block: 60px;
  }

  .intro-grid{
    grid-template-columns: 1fr;
    gap: 40px;
    text-align: center;
  }

  .intro-photo{
    order: -1;
  }

  .photo-frame{
    width: 65%;
  }

  .intro-text .line-2{
    margin-left: 0;
  }

  .about-preview{
    padding-block: 60px;
  }

  .services-preview{
    padding-block: 60px;
  }

  .instagram-preview{
    padding-block: 60px;
  }

  .reviews-preview{
    padding-block: 60px;
  }

  .reviews-grid{
    grid-template-columns: 1fr;
  }

  .tech-list li{
    width: 100%;
    min-height: 68px;
    text-align: left;
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
  }

  .cta-section{
    padding-block: 60px;
  }

  .cta-buttons{
    flex-direction: column;
    align-items: center;
  }

  .svc-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }

  .svc-card{
    padding: 20px 10px;
    min-width: 0;
  }

  .svc-card h3,
  .svc-card p{
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
  }

  .svc-card h3{
    font-size: 12px;
  }

  .svc-card p{
    font-size: 12px;
  }
}

@media (min-width: 861px) and (max-width: 1100px){
  .svc-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Page hero (inner pages) */

.page-hero{
  padding-block: 90px 70px;
  background: var(--v1);
  text-align: center;
}

.page-hero .eyebrow{
  color: var(--v4);
  opacity: 1;
}

.page-hero-inner{
  max-width: 760px;
}

.page-hero-title{
  font-size: clamp(30px, 5vw, 50px);
  color: #fff;
  margin: 0 0 22px;
}

.page-hero-sub{
  font-size: 16.5px;
  color: var(--v5);
  opacity: .9;
  margin: 0 auto;
}

.page-hero-title--one-line{
  white-space: nowrap;
  font-size: clamp(18px, 4.6vw, 46px);
}

.page-hero-title--short{
  white-space: nowrap;
  font-size: clamp(22px, 6.4vw, 50px);
}

.services-title--split{
  max-width: none;
  font-size: clamp(14px, 4vw, 40px);
  line-height: 1.35;
}

.session-cta{
  text-align: center;
}

.session-cta .services-title{
  font-size: clamp(22px, 6.4vw, 50px);
}

.session-cta .btn{
  margin-top: 36px;
}

.page-hero-sub p{
  margin: 0 0 12px;
}

.page-hero-sub p:last-child{
  margin-bottom: 0;
}

/* Process section */

.process-section{
  padding-block: 110px;
  background: var(--surface);
  text-align: center;
}

.process-grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 28px;
  max-width: 1080px;
  margin: 56px auto 0;
  text-align: left;
}

.process-step{
  padding: 4px 4px 0;
}

.process-number{
  display: block;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--v3);
  letter-spacing: .1em;
  margin-bottom: 14px;
}

.process-step h3{
  font-size: 17px;
  color: var(--plum);
  margin: 0 0 10px;
}

.process-step p{
  font-size: 14px;
  color: var(--muted);
  line-height: 1.6;
  margin: 0;
}

.services-full{
  background: var(--bg);
}

/* Session types */

.session-types{
  padding-block: 110px;
  background: var(--v5);
  text-align: center;
}

.session-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  max-width: 940px;
  margin: 56px auto 0;
  text-align: left;
}

.session-card{
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 36px 32px;
}

.session-card .eyebrow{
  color: var(--v1);
  opacity: 1;
}

.session-card h3{
  font-size: 20px;
  color: var(--plum);
  margin: 0 0 14px;
}

.session-card p{
  font-size: 14.5px;
  color: var(--muted);
  line-height: 1.6;
  margin: 0 0 24px;
}

@media (max-width: 860px){
  .page-hero{
    padding-block: 60px 50px;
  }

  .process-section{
    padding-block: 60px;
  }

  .process-grid{
    grid-template-columns: 1fr 1fr;
    gap: 24px;
  }

  .session-types{
    padding-block: 60px;
  }

  .session-grid{
    grid-template-columns: 1fr;
  }
}

@media (max-width: 500px){
  .process-grid{
    grid-template-columns: 1fr;
  }
}

/* Legal pages (privacy, cookies, legal notice) */

.legal-section{
  padding-block: 70px 90px;
  background: var(--surface);
}

.legal-content{
  max-width: 820px;
  color: var(--text);
  font-size: 16px;
  line-height: 1.75;
}

.legal-content h2{
  font-size: clamp(17px, 2vw, 21px);
  color: var(--plum);
  margin: 48px 0 14px;
}

.legal-content p,
.legal-content ul{
  margin: 0 0 16px;
}

.legal-content ul{
  padding-left: 22px;
}

.legal-content li{
  margin-bottom: 6px;
}

.legal-content a{
  color: var(--v1);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.legal-content strong{
  font-weight: 500;
}

.legal-updated{
  font-family: var(--mono);
  font-size: 13px;
  color: var(--muted);
}

.legal-data{
  list-style: none;
  padding: 22px 26px !important;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 16px;
}

.legal-table-wrap{
  overflow-x: auto;
  margin: 0 0 16px;
}

.legal-table{
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}

.legal-table th,
.legal-table td{
  text-align: left;
  vertical-align: top;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
}

.legal-table th{
  font-family: var(--wide);
  font-weight: 400;
  font-size: 12px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--plum);
}

.legal-todo{
  background: #FFE58A;
  color: #3A2A00;
  padding: 0 4px;
  border-radius: 4px;
}

@media (max-width: 600px){
  .legal-section{
    padding-block: 50px 70px;
  }

  .legal-data{
    padding: 18px 18px !important;
  }

  .legal-table th,
  .legal-table td{
    padding: 10px 8px;
  }
}

/* Booking page */

html:has(.experiences-section){
  scroll-behavior: smooth;
}

.booking-section{
  padding-block: 90px 100px;
  background: var(--bg);
  text-align: center;
}

.booking-section .eyebrow{
  color: var(--v1);
  opacity: 1;
}

.booking-title{
  font-size: clamp(28px, 4vw, 44px);
  color: var(--plum);
  margin: 0 auto 48px;
}

.booking-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  max-width: 940px;
  margin: 0 auto;
}

@media (min-width: 761px){
  @supports (grid-template-rows: subgrid){
    .booking-grid .booking-card{
      display: grid;
      grid-row: span 5;
      grid-template-rows: subgrid;
      row-gap: 0;
      justify-items: center;
    }

    .booking-grid .booking-card .booking-actions{
      align-self: center;
    }
  }
}

.booking-card{
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 40px 34px;
  box-shadow: 0 18px 40px -28px rgba(44, 3, 40, .35);
  scroll-margin-top: 110px;
}

.booking-card-title{
  font-size: clamp(20px, 2.2vw, 26px);
  color: var(--plum);
  margin: 0 0 16px;
}

.booking-card-text{
  color: var(--muted);
  font-size: 16px;
  line-height: 1.65;
  margin: 0 0 30px;
  flex-grow: 1;
}

.cancel-note{
  max-width: 640px;
  margin: 44px auto 0;
  padding: 26px 30px;
  border: 1px dashed rgba(100, 36, 98, .35);
  border-radius: 20px;
  color: var(--muted);
  font-size: 15px;
}

.cancel-note p{
  margin: 0 0 8px;
}

.cancel-note .eyebrow{
  margin-bottom: 12px;
}

.cancel-note .booking-sublink{
  display: inline-block;
  margin-top: 8px;
}

.btn-booking{
  padding: 16px 32px;
}

.btn-booking--solid{
  background: var(--v1);
  border: 1px solid var(--v1);
  color: #fff;
}

.btn-booking--outline{
  border: 1px solid var(--v1);
  color: var(--v1);
}

.booking-actions{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.booking-sublink{
  margin-top: 16px;
  font-size: 14px;
  color: var(--v1);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Experiences (booking page) */

.experiences-section{
  padding-block: 100px 110px;
  background: radial-gradient(circle at center, #642462 0%, #180116 100%);
  text-align: center;
  scroll-margin-top: 80px;
}

.experiences-section .eyebrow{
  color: var(--v4);
  opacity: 1;
}

.experiences-title{
  font-size: clamp(26px, 4vw, 44px);
  color: #fff;
  margin: 0 auto;
}

.experiences-sub{
  max-width: 680px;
  margin: 24px auto 0;
  color: var(--v5);
  opacity: .85;
  font-size: 16.5px;
}

.experiences-sub p{
  margin: 0 0 10px;
}

.experiences-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  max-width: 940px;
  margin: 56px auto 0;
}

.experience-card{
  display: flex;
  flex-direction: column;
  align-items: center;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(204, 159, 218, .35);
  border-radius: 24px;
  padding: 46px 34px 40px;
}

.experience-card--featured{
  border-color: var(--v4);
  background: rgba(204, 159, 218, .12);
}

.experience-length{
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--v4);
  margin: 0 0 10px;
}

.experience-name{
  font-size: clamp(30px, 4vw, 42px);
  font-weight: 300;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 18px;
  padding-left: .28em;
}

.experience-text{
  color: var(--v5);
  opacity: .88;
  font-size: 16px;
  line-height: 1.65;
  margin: 0 0 32px;
  flex-grow: 1;
}

.experiences-note{
  max-width: 640px;
  margin: 56px auto 0;
  color: var(--v5);
}

.experiences-note p{
  margin: 0 0 12px;
  opacity: .9;
}

.experiences-note .experiences-note-hand{
  font-family: 'Allura', cursive;
  font-weight: 400;
  font-size: clamp(38px, 4.2vw, 48px);
  line-height: 1.1;
  color: var(--v4);
  opacity: 1;
  margin-bottom: 14px;
}

.experiences-note-plain{
  font-family: var(--wide);
  font-weight: 400;
  font-size: 17px;
  letter-spacing: -.04em;
  color: #fff;
  margin-inline: .1em;
}

.experiences-note .experiences-note-small{
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: .04em;
  color: var(--v4);
  margin-top: 18px;
}

@media (max-width: 760px){
  .booking-section,
  .experiences-section{
    padding-block: 70px 80px;
  }

  .booking-grid,
  .experiences-grid{
    grid-template-columns: minmax(0, 1fr);
  }

  .booking-card,
  .experience-card{
    padding: 32px 24px;
  }
}

/* Services: centre the last row of therapy cards */

@media (min-width: 1101px){
  .svc-grid{
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }

  .svc-card{
    grid-column: span 2;
  }

  .svc-card:nth-child(5):nth-last-child(3){
    grid-column: 2 / span 2;
  }
}

@media (max-width: 1100px){
  .svc-grid{
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .svc-card{
    grid-column: span 2;
  }

  .svc-card:last-child:nth-child(odd){
    grid-column: 2 / span 2;
  }
}

/* About page */

.about-story{
  padding-block: 90px;
  background: var(--surface);
}

.about-story-grid{
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 64px;
  align-items: center;
  max-width: 1080px;
}

.about-story-photo img{
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: center 0%;
  border-radius: 999px 999px 28px 28px;
  box-shadow: 0 24px 50px -30px rgba(44, 3, 40, .5);
}

.about-story-text .eyebrow{
  color: var(--v1);
  opacity: 1;
}

.about-story-text p:not(.eyebrow){
  font-size: 16.5px;
  line-height: 1.75;
  color: var(--text);
  margin: 0 0 16px;
}

.about-story-text .about-story-hand{
  font-family: var(--wide);
  font-size: 17px;
  letter-spacing: -.06em;
  color: var(--plum);
  margin: 26px 0 26px;
}

.story-hand{
  font-family: 'Allura', cursive;
  font-weight: 400;
  font-size: 1.9em;
  line-height: 1;
  color: var(--v2);
  white-space: nowrap;
}

.about-story-hand span{
  font-family: 'Allura', cursive;
  font-weight: 400;
  font-size: 42px;
  letter-spacing: 0;
  color: var(--v2);
  margin-left: .1em;
}

.qualifications{
  padding-block: 90px;
  background: var(--v5);
  overflow: hidden;
}

.qualifications-grid{
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
  gap: 48px;
  align-items: center;
  max-width: 1120px;
}

.qualifications-text .eyebrow{
  color: var(--v1);
  opacity: 1;
}

.qualifications-title{
  font-size: clamp(20px, 6.4vw, 40px);
  color: var(--plum);
  margin: 0 0 30px;
}

.qual-list{
  list-style: none;
  padding: 0;
  margin: 0 0 34px;
}

.qual-list li{
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 13px 0;
  border-bottom: 1px solid rgba(100, 36, 98, .15);
  font-size: 16.5px;
  color: var(--text);
}

.qual-list em{
  font-style: normal;
  color: var(--muted);
  font-size: 14px;
}

.qual-school{
  display: inline;
  margin-left: 10px;
  white-space: nowrap;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--v2);
}

.qual-dot{
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--v1);
  transform: translateY(-2px);
}

.qual-list--current .qual-dot{
  background: transparent;
  border: 1.5px solid var(--v1);
}

.qual-sub{
  margin-top: 8px;
}

.qualifications-photo img{
  width: 100%;
  height: auto;
  filter: drop-shadow(0 18px 22px rgba(44, 3, 40, .18));
}

.gallery-section{
  padding-block: 90px;
  background: var(--surface);
  text-align: center;
}

.gallery{
  position: relative;
  max-width: 1080px;
  margin: 50px auto 0;
}

.gallery-track{
  display: flex;
  gap: 18px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-bottom: 4px;
}

.gallery-track::-webkit-scrollbar{
  display: none;
}

.gallery-item{
  flex: 0 0 calc((100% - 36px) / 3);
  scroll-snap-align: start;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
  border-radius: 22px;
  overflow: hidden;
}

.gallery-item img{
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  transition: transform .5s ease;
}

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

.gallery-nav{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 0;
  background: #fff;
  color: var(--plum);
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 8px 24px -10px rgba(44, 3, 40, .5);
}

.gallery-nav--prev{ left: -22px; }
.gallery-nav--next{ right: -22px; }

.gallery-nav:disabled{
  opacity: 0;
  pointer-events: none;
}

.lightbox{
  position: fixed;
  inset: 0;
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(24, 1, 22, .92);
  padding: 60px 70px;
}

.lightbox[hidden]{
  display: none;
}

.lightbox-img{
  max-width: 100%;
  max-height: 100%;
  border-radius: 14px;
}

.lightbox-close,
.lightbox-nav{
  position: absolute;
  border: 0;
  background: none;
  color: #fff;
  cursor: pointer;
  line-height: 1;
}

.lightbox-close{
  top: 16px;
  right: 22px;
  font-size: 40px;
}

.lightbox-nav{
  top: 50%;
  transform: translateY(-50%);
  font-size: 54px;
  padding: 10px;
}

.lightbox-nav--prev{ left: 12px; }
.lightbox-nav--next{ right: 12px; }

/* Contact page */

.contact-section{
  padding-block: 90px;
  background: var(--bg);
}

.contact-grid{
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 20px;
  max-width: 1000px;
  margin: 0 auto;
}

.contact-card{
  grid-column: span 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  padding: 34px 20px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 24px;
  transition: transform .25s ease, box-shadow .25s ease;
}

.contact-card:hover{
  transform: translateY(-3px);
  box-shadow: 0 18px 40px -26px rgba(44, 3, 40, .45);
}

.contact-card:nth-child(4){
  grid-column: 2 / span 2;
}

.contact-card:nth-child(-n+3){
  background: var(--v1);
  border-color: var(--v1);
  color: #fff;
}

.contact-icon{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--plum);
  color: #fff;
  margin-bottom: 10px;
}

.contact-card:nth-child(-n+3) .contact-icon{
  background: #fff;
  color: var(--v1);
}

.contact-icon svg{
  width: 24px;
  height: 24px;
}

.contact-label{
  font-family: var(--wide);
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--v1);
}

.contact-card:nth-child(-n+3) .contact-label{
  color: var(--v4);
}

.contact-value{
  font-size: 16px;
  font-weight: 400;
  overflow-wrap: anywhere;
}

.contact-hint{
  font-family: var(--mono);
  font-size: 12px;
  color: var(--v4);
  margin-top: 4px;
}

.contact-area{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 44px auto 0;
  max-width: 700px;
  text-align: center;
  color: var(--muted);
  font-size: 15px;
}

.contact-area-extra{
  font-style: italic;
  color: var(--v1);
}

.contact-area-icon svg{
  width: 20px;
  height: 20px;
  color: var(--v1);
  display: block;
}

@media (max-width: 860px){
  .about-story-grid,
  .qualifications-grid{
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }

  .about-story-photo{
    max-width: 380px;
    margin-inline: auto;
  }

  .qualifications-photo{
    max-width: 380px;
    margin-inline: auto;
    order: -1;
  }

  .gallery-item{
    flex-basis: calc((100% - 18px) / 2);
  }

  .contact-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .contact-card,
  .contact-card:nth-child(4){
    grid-column: span 1;
  }

  .contact-card--featured{
    grid-column: 1 / -1;
  }
}

@media (max-width: 600px){
  .about-story,
  .qualifications,
  .gallery-section,
  .contact-section{
    padding-block: 60px;
  }

  .gallery-item{
    flex-basis: 78%;
  }

  .gallery-nav{
    display: none;
  }

  .lightbox{
    padding: 50px 12px;
  }

  .lightbox-nav{
    font-size: 40px;
  }
}

/* Home therapies: David on the right, looking towards the therapies */

.services-preview--figure{
  padding-bottom: 0;
  overflow: hidden;
}

.therapies-layout{
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(240px, 26vw, 360px);
  column-gap: clamp(16px, 3vw, 48px);
  align-items: end;
}

.therapies-main{
  padding-bottom: 130px;
  min-width: 0;
}

.services-preview--figure .tech-list{
  gap: 14px;
  margin-top: 46px;
}

.services-preview--figure .tech-list li{
  font-size: 13.5px;
  gap: 12px;
  padding: 11px 24px 11px 11px;
}

.services-preview--figure .tech-icon{
  width: 38px;
  height: 38px;
}

.services-preview--figure .services-sub{
  font-size: 15.5px;
}

.services-preview--figure .services-closing{
  font-size: 15.5px;
  margin-top: 40px;
}

.therapies-figure{
  align-self: end;
}

.therapies-figure img{
  width: 100%;
  height: auto;
  margin-left: auto;
}

@media (max-width: 860px){
  .therapies-layout{
    grid-template-columns: minmax(0, 1fr);
  }

  .therapies-main{
    padding-bottom: 0;
  }

  .therapies-figure{
    width: min(58%, 250px);
    margin: 36px -4px 0 auto;
  }

  .services-preview--figure .tech-list li{
    font-size: 14px;
  }
}

/* Services hero: small oval video on the left, with line shapes (echo of the Home hero) */

.page-hero--media{
  overflow: hidden;
}

.page-hero-media-grid{
  display: grid;
  grid-template-columns: clamp(170px, 19vw, 240px) minmax(0, 1fr);
  column-gap: clamp(40px, 6vw, 90px);
  align-items: center;
  max-width: 1080px;
}

.page-hero--media .page-hero-inner{
  max-width: 720px;
  min-width: 0;
}

.hero-mini{
  position: relative;
  justify-self: center;
  width: 100%;
}

.hero-mini-frame{
  position: relative;
  z-index: 2;
  aspect-ratio: .62;
  border-radius: 999px;
  overflow: hidden;
  border: 5px solid var(--v5);
  box-shadow: 0 26px 50px -18px rgba(24, 1, 22, .6);
}

.hero-mini-frame video{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-mini-shape{
  position: absolute;
  z-index: 1;
  pointer-events: none;
}

.hero-mini-shape--fill{
  width: 92%;
  aspect-ratio: 1;
  top: -9%;
  right: -28%;
  background: var(--v4);
  opacity: .9;
  border-radius: 58% 42% 51% 49% / 45% 55% 45% 55%;
}

.hero-mini-shape--a{
  width: 118%;
  aspect-ratio: .78;
  top: 8%;
  left: -34%;
  border: 1px solid var(--v4);
  border-radius: 45% 55% 48% 52% / 55% 45% 55% 45%;
  transform: rotate(-14deg);
}

.hero-mini-shape--b{
  width: 54%;
  aspect-ratio: 1;
  bottom: -8%;
  left: -26%;
  border: 1px solid var(--v5);
  opacity: .7;
  border-radius: 52% 48% 40% 60% / 50% 58% 42% 50%;
}

.hero-mini-shape--c{
  width: 40%;
  aspect-ratio: 1;
  bottom: 6%;
  right: -24%;
  border: 1.5px solid var(--v3);
  border-radius: 60% 40% 55% 45% / 45% 50% 50% 55%;
  transform: rotate(22deg);
}

@media (max-width: 860px){
  .page-hero-media-grid{
    grid-template-columns: minmax(0, 1fr);
    row-gap: 46px;
  }

  .hero-mini{
    width: min(46%, 180px);
    margin-top: 10px;
  }
}

/* Contact: David on the left, looking towards the contact cards */

.contact-section--figure{
  padding-bottom: 0;
  overflow: hidden;
}

.contact-layout{
  display: grid;
  grid-template-columns: clamp(250px, 28vw, 380px) minmax(0, 1fr);
  column-gap: clamp(10px, 2.5vw, 40px);
  align-items: end;
  max-width: 1240px;
}

.contact-main{
  align-self: center;
  min-width: 0;
  padding-bottom: 90px;
}

.contact-section--figure .contact-grid{
  max-width: none;
  gap: 16px;
}

.contact-section--figure .contact-value{
  font-size: clamp(13.5px, 1.25vw, 16px);
}

.contact-section--figure .contact-card{
  padding-inline: 14px;
}

.contact-section--figure .contact-value{
  overflow-wrap: anywhere;
}

.contact-figure img{
  width: 100%;
  height: auto;
}

@media (max-width: 860px){
  .contact-layout{
    grid-template-columns: minmax(0, 1fr);
  }

  .contact-main{
    padding-bottom: 0;
  }

  .contact-figure{
    order: 2;
    width: min(62%, 270px);
    margin: 40px auto 0 -4px;
  }
}

/* Booking: "Not sure yet?" with David floating beside it */

.doubts-layout{
  display: grid;
  grid-template-columns: clamp(220px, 24vw, 300px) minmax(0, 1fr);
  column-gap: clamp(30px, 5vw, 70px);
  align-items: center;
  max-width: 980px;
  margin: 70px auto 0;
}

.doubts-layout .experiences-note{
  margin: 0;
  max-width: 600px;
}

.doubts-figure{
  position: relative;
  width: 100%;
}

.doubts-figure img{
  position: relative;
  z-index: 2;
  width: 100%;
  height: auto;
}

.doubts-shape{
  position: absolute;
  z-index: 1;
  pointer-events: none;
}

.doubts-shape--fill{
  width: 78%;
  aspect-ratio: 1;
  top: 8%;
  left: 12%;
  background: var(--v3);
  opacity: .55;
  border-radius: 58% 42% 51% 49% / 45% 55% 45% 55%;
}

.doubts-shape--a{
  width: 104%;
  aspect-ratio: 1;
  top: -2%;
  left: -6%;
  border: 1px solid var(--v4);
  border-radius: 45% 55% 48% 52% / 55% 45% 55% 45%;
  transform: rotate(-12deg);
}

.doubts-shape--b{
  width: 36%;
  aspect-ratio: 1;
  top: -6%;
  right: -8%;
  border: 1.5px solid var(--v5);
  opacity: .6;
  border-radius: 52% 48% 40% 60% / 50% 58% 42% 50%;
}

.doubts-shape--c{
  width: 22%;
  aspect-ratio: 1;
  bottom: 14%;
  left: -10%;
  background: var(--v4);
  opacity: .8;
  border-radius: 60% 40% 55% 45% / 45% 50% 50% 55%;
}

@media (max-width: 760px){
  .doubts-layout{
    grid-template-columns: minmax(0, 1fr);
    row-gap: 30px;
    margin-top: 56px;
  }

  .doubts-figure{
    width: min(62%, 240px);
    margin-inline: auto;
  }
}

/* Products (roll-ons) — page can be hidden from the menu, see js/menu.js */

[data-products-link][hidden]{
  display: none !important;
}

.products-hero .page-hero-inner{
  max-width: 1080px;
}

.products-title{
  white-space: nowrap;
  font-size: clamp(14px, 4.6vw, 50px);
}

.products-hero .page-hero-sub{
  max-width: 760px;
}

.products-hero .page-hero-sub p{
  margin: 0;
}

.products-soon{
  display: inline-block;
  margin-top: 26px;
  padding: 8px 18px;
  border: 1px solid var(--v4);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--v4);
}

.products-section{
  padding-block: 100px;
  background: var(--bg);
}

.products-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
  max-width: 1000px;
  margin: 0 auto;
}

.product-card{
  position: relative;
  background: var(--surface);
  border-radius: 28px;
  padding: 26px 24px 30px;
  text-align: center;
  box-shadow: 0 24px 50px -30px rgba(44, 3, 40, .35);
}

.product-badge{
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 2;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--v1);
  background: var(--v5);
  border-radius: 999px;
  padding: 5px 10px;
}

.product-visual{
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  height: 280px;
  border-radius: 20px;
  overflow: hidden;
  background: var(--v5);
}

.product-visual::before,
.product-visual::after{
  content: "";
  position: absolute;
  border-radius: 58% 42% 51% 49% / 45% 55% 45% 55%;
}

.product-visual::before{
  width: 78%;
  aspect-ratio: 1;
  top: 10%;
  left: 11%;
  background: var(--v4);
  opacity: .45;
}

.product-visual::after{
  width: 92%;
  aspect-ratio: 1;
  top: 2%;
  left: 4%;
  border: 1px solid var(--v3);
  opacity: .6;
  transform: rotate(-14deg);
}

.product-visual--2::before{ background: var(--v3); opacity: .35; }
.product-visual--3::before{ background: var(--v2); opacity: .3; }

a.product-card{
  display: block;
  color: inherit;
  text-decoration: none;
  transition: transform .25s ease, box-shadow .25s ease;
}

a.product-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 30px 60px -30px rgba(44, 3, 40, .45);
}

.product-visual img{
  position: relative;
  z-index: 1;
  height: 92%;
  width: auto;
  max-width: 92%;
  object-fit: contain;
  margin-bottom: 4%;
}

.product-more{
  display: inline-block;
  margin-top: 14px;
  font-family: var(--wide);
  font-size: 11px;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--v1);
}

/* Product detail pages */

.pd-section{
  padding-block: 70px 100px;
  background: var(--bg);
  overflow: hidden;
}

.pd-grid{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(30px, 6vw, 90px);
  align-items: center;
  max-width: 1080px;
}

.pd-visual{
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  aspect-ratio: 4 / 5;
}

.pd-visual::before,
.pd-visual::after{
  content: "";
  position: absolute;
  border-radius: 58% 42% 51% 49% / 45% 55% 45% 55%;
}

.pd-visual::before{
  width: 82%;
  aspect-ratio: 1;
  top: 14%;
  left: 9%;
  background: var(--v4);
  opacity: .4;
}

.pd-visual::after{
  width: 96%;
  aspect-ratio: 1;
  top: 6%;
  left: 2%;
  border: 1px solid var(--v3);
  opacity: .6;
  transform: rotate(-14deg);
}

.pd-visual img{
  position: relative;
  z-index: 1;
  max-height: 100%;
  width: auto;
  max-width: 100%;
}

.pd-back{
  display: inline-block;
  margin-bottom: 26px;
  font-size: 14px;
  color: var(--v1);
  text-decoration: none;
}

.pd-back:hover{
  text-decoration: underline;
}

.pd-info .eyebrow{
  color: var(--v1);
  opacity: 1;
}

.pd-title{
  margin: 10px 0 4px;
  font-size: clamp(30px, 4vw, 46px);
  color: var(--plum);
}

.pd-sub{
  margin: 0;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--muted);
}

.pd-soon{
  margin-top: 18px;
  color: var(--v1);
  border-color: var(--v3);
}

.pd-intro{
  margin: 26px 0 0;
  font-size: 16.5px;
  line-height: 1.7;
  color: rgba(24, 1, 22, .78);
}

.pd-h{
  margin: 34px 0 6px;
  font-size: 17px;
  color: var(--plum);
}

.pd-list{
  margin-bottom: 0;
}

.pd-use{
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
}

.pd-use li{
  display: flex;
  gap: 14px;
  padding: 8px 0;
  font-size: 15.5px;
  color: var(--text);
}

.pd-step{
  flex: none;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--v3);
  padding-top: 2px;
}

.pd-naissance{
  margin-top: 30px;
  padding: 20px 22px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
}

.pd-naissance-title{
  margin: 0 0 6px;
  font-family: var(--wide);
  font-size: 13px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--v1);
}

.pd-naissance p{
  margin: 0 0 10px;
  font-size: 15px;
  color: rgba(24, 1, 22, .78);
}

.pd-naissance ul{
  margin: 0;
  padding-left: 18px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--text);
}

.pd-naissance li{
  margin-bottom: 4px;
}

.pd-naissance li::marker{
  color: var(--v3);
}

.pd-cta{
  margin-top: 34px;
}

@media (max-width: 860px){
  .pd-section{
    padding-block: 40px 60px;
  }

  .pd-grid{
    grid-template-columns: minmax(0, 1fr);
  }

  .pd-visual{
    max-width: 380px;
    width: 100%;
    margin-inline: auto;
  }
}

.rollon{
  position: relative;
  z-index: 1;
  width: 104px;
  height: auto;
  margin-bottom: 16px;
  filter: drop-shadow(0 18px 18px rgba(24, 1, 22, .25));
}

.product-name{
  margin: 24px 0 6px;
  font-family: var(--wide);
  font-weight: 400;
  font-size: 17px;
  color: var(--plum);
}

.product-desc{
  margin: 0;
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--muted);
}

.products-how-title{
  max-width: none;
}

.products-how-hand{
  font-family: 'Allura', cursive;
  font-weight: 400;
  font-size: 1.4em;
  letter-spacing: 0;
  color: var(--v2);
}

.products-steps{
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 900px;
}

@media (max-width: 860px){
  .products-section{
    padding-block: 60px;
  }

  .products-grid{
    grid-template-columns: minmax(0, 1fr);
    max-width: 380px;
  }

  .products-steps{
    grid-template-columns: minmax(0, 1fr);
    max-width: 420px;
  }
}

/* Home reviews: intro on the left, sliding cards on the right */

.reviews-preview--slider{
  text-align: left;
  padding-block: 100px;
}

.rv-layout{
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  column-gap: clamp(30px, 5vw, 70px);
  align-items: center;
  max-width: 1200px;
}

.rv-eyebrow{
  display: flex;
  align-items: center;
  gap: 16px;
  color: var(--v1);
  opacity: 1;
}

.rv-eyebrow::after{
  content: "";
  width: 120px;
  height: 1px;
  background: var(--v2);
}

.rv-title{
  margin: 18px 0 0;
  font-size: clamp(26px, 3.4vw, 42px);
  line-height: 1.2;
}

.rv-sub{
  margin: 22px 0 30px;
  max-width: 440px;
  font-size: 16px;
  color: rgba(24, 1, 22, .75);
}

.rv-slider{
  position: relative;
  min-width: 0;
  padding-inline: 22px;
}

.rv-track{
  display: flex;
  gap: 18px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding: 10px 2px 22px;
}

.rv-track::-webkit-scrollbar{
  display: none;
}

.rv-card{
  flex: 0 0 calc((100% - 18px) / 2);
  scroll-snap-align: start;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 22px 22px 20px;
  box-shadow: 0 14px 30px -20px rgba(44, 3, 40, .35);
  display: flex;
  flex-direction: column;
}

.rv-head{
  display: flex;
  align-items: center;
  gap: 14px;
}

.rv-avatar{
  flex: none;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 19px;
  font-weight: 400;
}

.rv-name{
  margin: 0;
  font-weight: 500;
  font-size: 15.5px;
  color: var(--plum);
  line-height: 1.3;
}

.rv-source{
  margin: 2px 0 0;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .06em;
  color: var(--muted);
}

.rv-stars{
  margin: 14px 0 10px;
  color: #F0B429;
  font-size: 18px;
  letter-spacing: .08em;
}

.rv-text{
  margin: 0;
  max-height: 150px;
  overflow-y: auto;
  padding-right: 8px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--text);
  scrollbar-width: thin;
  scrollbar-color: var(--v4) transparent;
}

.rv-nav{
  position: absolute;
  top: calc(50% - 26px);
  z-index: 2;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--plum);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 6px 16px -8px rgba(44, 3, 40, .4);
}

.rv-nav--prev{ left: 0; }
.rv-nav--next{ right: 0; }

.rv-nav:hover{
  background: var(--v5);
}

.rv-dots{
  display: flex;
  justify-content: center;
  gap: 8px;
}

.rv-dot{
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--line);
  cursor: pointer;
}

.rv-dot.is-active{
  background: var(--v2);
  transform: scale(1.25);
}

@media (max-width: 860px){
  .reviews-preview--slider{
    padding-block: 60px;
  }

  .rv-layout{
    grid-template-columns: minmax(0, 1fr);
    row-gap: 30px;
  }

  .rv-intro{
    text-align: center;
  }

  .rv-eyebrow{
    justify-content: center;
  }

  .rv-eyebrow::after{
    display: none;
  }

  .rv-sub{
    margin-inline: auto;
  }

  .rv-intro .btn{
    display: none;
  }

  .rv-card{
    flex-basis: 100%;
  }
}

/* Services: frequently asked questions */

.faq-section{
  padding-block: 100px;
  background: var(--bg);
  text-align: center;
}

.faq-list{
  max-width: 780px;
  margin: 50px auto 0;
  text-align: left;
}

.faq-item{
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  margin-bottom: 12px;
  overflow: hidden;
}

.faq-item summary{
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  padding: 18px 22px;
  font-weight: 400;
  font-size: 16px;
  color: var(--plum);
}

.faq-item summary::-webkit-details-marker{
  display: none;
}

.faq-item summary::after{
  content: "+";
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--v5);
  color: var(--v1);
  font-size: 18px;
  transition: transform .2s ease;
}

.faq-item[open] summary::after{
  transform: rotate(45deg);
}

.faq-answer{
  padding: 0 22px 20px;
}

.faq-answer p{
  margin: 0;
  font-size: 15px;
  line-height: 1.65;
  color: rgba(24, 1, 22, .75);
}

.faq-answer a,
.faq-more a{
  color: var(--v1);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.faq-more{
  margin: 34px 0 0;
  font-size: 15px;
  color: var(--muted);
}

@media (max-width: 860px){
  .faq-section{
    padding-block: 60px;
  }

  .faq-item summary{
    padding: 16px 18px;
    font-size: 15px;
  }

  .faq-answer{
    padding: 0 18px 18px;
  }
}

/* Service cards on phones: the title font (Lexend Zetta) is very wide,
   so long words like "descontracturante" need a smaller size */
@media (max-width: 430px){
  .svc-card h3{
    font-size: 10.5px;
    letter-spacing: -.12em;
  }
}

@media (max-width: 380px){
  .svc-grid{
    grid-template-columns: minmax(0, 1fr);
    max-width: 280px;
    margin-inline: auto;
  }

  .svc-card,
  .svc-card:last-child:nth-child(odd){
    grid-column: auto;
  }

  .svc-card h3{
    font-size: 13px;
    letter-spacing: -.12em;
  }
}

/* Contact: spinning 3D logo under the service area */

.contact-logo3d{
  display: flex;
  justify-content: center;
  margin: 26px auto 0;
}

.contact-logo3d video{
  display: block;
  width: clamp(150px, 17vw, 220px);
  height: auto;
  mix-blend-mode: multiply; /* the white video background disappears into the page colour */
  pointer-events: none;
}

/* Home hero: white bevelled logo above the eyebrow */

.intro-brand{
  width: fit-content;
  max-width: 100%;
}

.intro-logo{
  display: block;
  height: clamp(66px, 8.1vw, 112px);
  width: auto;
  margin: 0 auto 20px;
}

@media (max-width: 860px){
  .intro-brand{
    margin-inline: auto;
  }

  .intro-brand .eb-sep{
    display: none;
  }

  .intro-brand .eb-title{
    display: block;
    margin-top: 4px;
    white-space: nowrap;
    font-size: 10px;
    letter-spacing: .02em;
  }

  .intro-logo{
    height: 71px;
  }
}

/* Home slogan: only "space" and "time" in bold */

.intro-text h2 strong{
  font-weight: 600;
}

@media (min-width: 861px){
  .intro-text{
    margin-top: -70px;
  }

  /* bigger logo, lifted, while the texts stay where they were */
  .intro-logo{
    height: 150px;
    margin-top: -70px;
    margin-bottom: 36px;
  }
}

/* Home hero: two light wind-like lines from the bottom centre towards the top left */

.intro{
  position: relative;
}

.intro > .container{
  position: relative;
  z-index: 1;
}

.intro-waves{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

.intro-waves--mobile{
  display: none;
}

.intro-wave{
  fill: none;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

.intro-wave--violet{
  stroke: var(--v4);
  stroke-width: 3;
  opacity: .55;
}

.intro-wave--white{
  stroke: #fff;
  stroke-width: 1.2;
  opacity: .5;
}

@media (max-width: 860px){
  .intro-waves{
    display: none;
  }

  .intro-waves--mobile{
    display: block;
  }

  .intro-wave--violet{
    stroke-width: 2.2;
  }
}

/* Home therapies on mobile: small pills on the left, David on the right looking at them */

@media (max-width: 860px){
  .therapies-layout{
    grid-template-columns: minmax(0, 1fr) min(38%, 170px);
    grid-template-areas:
      "eyebrow eyebrow"
      "title title"
      "sub sub"
      "list figure"
      "closing closing"
      "cta cta";
    column-gap: 10px;
    align-items: center;
  }

  .therapies-main{
    display: contents;
  }

  .therapies-main > .eyebrow{ grid-area: eyebrow; }
  .therapies-main > .services-title{ grid-area: title; }
  .therapies-main > .services-sub{ grid-area: sub; }
  .therapies-main > .tech-list{ grid-area: list; }
  .therapies-main > .services-closing{ grid-area: closing; }
  .therapies-main > .btn{ grid-area: cta; justify-self: center; margin-bottom: 50px; }

  .therapies-figure{
    grid-area: figure;
    width: 100%;
    margin: 30px 0 0;
    align-self: end;
  }

  .services-preview--figure .tech-list{
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 8px;
    margin: 30px 0 0;
  }

  .services-preview--figure .tech-list li{
    width: 100%;
    min-height: 0;
    font-size: 11px;
    gap: 8px;
    padding: 5px 12px 5px 5px;
    white-space: normal;
    line-height: 1.25;
    box-shadow: 0 8px 16px -10px rgba(44, 3, 40, .45);
  }

  .services-preview--figure .tech-icon{
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
  }

  .services-preview--figure .tech-icon svg{
    width: 15px;
    height: 15px;
  }

  .services-preview--figure .tech-icon-img{
    width: 15px;
    height: 15px;
  }
}

/* Services hero: the same pair of wind lines as the Home hero, on another route */

.page-hero--media{
  position: relative;
}

.page-hero--media > .container{
  position: relative;
  z-index: 1;
}

.hero-waves{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

.hero-waves--mobile{
  display: none;
}

@media (max-width: 860px){
  .hero-waves{
    display: none;
  }

  .hero-waves--mobile{
    display: block;
  }
}

/* Contact on mobile: no photo, just the spinning DD centred */

@media (max-width: 860px){
  .contact-figure{
    display: none;
  }

  .contact-main{
    padding-bottom: 60px;
  }

  .contact-logo3d video{
    width: 150px;
  }
}

/* About story: soft violet highlighter on key words, like a student's marker */

mark.hl{
  color: inherit;
  background: linear-gradient(transparent 52%, rgba(204, 159, 218, .55) 52%, rgba(204, 159, 218, .55) 92%, transparent 92%);
  padding: 0 .12em;
  margin: 0 -.06em;
  border-radius: 2px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* About qualifications: wind lines from the top right, behind the photo, falling through the centre */

.qualifications{
  position: relative;
}

.qualifications{
  z-index: 0;              /* own stacking context so the lines can sit between layers */
}

.qualifications > .container{
  position: relative;
}

.qualifications .hero-waves{
  z-index: -1;             /* behind the photo and texts */
}

.qualifications-photo{
  position: relative;
}

/* copy of the acupuncture frame on top, so the white line passes behind it */
.qual-frame-front{
  position: absolute;
  left: 68.444%;
  top: 39.683%;
  width: 31.111% !important;
  height: auto !important;
  z-index: 2;
  filter: none !important;
  pointer-events: none;
}

.qualifications .intro-wave--violet{
  stroke: var(--v3);
  stroke-width: 3;
  opacity: .5;
}

.qualifications .intro-wave--white{
  stroke: #fff;
  stroke-width: 4;
  opacity: 1;
}

.qualifications .intro-wave--deep{
  stroke: var(--v1);
  stroke-width: 1.6;
  opacity: .55;
}

.qualifications .hero-waves--front{
  z-index: 1;            /* the white line passes in front of David, behind the acupuncture frame */
}

@media (max-width: 860px){
  .qualifications .hero-waves--front{
    display: none;
  }

  .qualifications .intro-wave--white{
    stroke-width: 2;
  }
}

/* Contact on desktop: photo raised to sit centred beside the cards, uniform fading out at the bottom */

@media (min-width: 861px){
  .contact-figure{
    align-self: center;
    margin-bottom: 60px;
  }

  .contact-figure img{
    -webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent 96%);
    mask-image: linear-gradient(to bottom, #000 62%, transparent 96%);
  }
}

/* Line breaks only on mobile (br-m) or only on desktop (br-d) */

.br-m{
  display: none;
}

@media (max-width: 860px){
  .br-m{
    display: inline;
  }

  .br-d{
    display: none;
  }
}

/* Very small phones (under 360px): allow long titles to wrap */
@media (max-width: 359px){
  .tech-list li{
    font-size: 12.5px;
    padding-right: 18px;
  }

  .intro-text .line,
  .tech-list li,
  .services-title--home,
  .page-hero-title--one-line,
  .page-hero-title--short{
    white-space: normal;
  }
}