/* ============================================================
   REMY MOTION — Osteopathy & Strength · premium-2 (B&W quiet luxury)
   One typeface: Hanken Grotesk. True monochrome — matte blacks,
   clean whites, a precise grey ramp. Hairlines. Huge whitespace.
   Every scene: full-screen B&W photo + scrim. Rolls-Royce restraint.
   ============================================================ */

:root {
  --black: #0A0A0A;
  --ink: #101010;
  --white: #F5F5F4;
  --grey-l: #C9CBCD;
  --grey-m: #8E9194;
  --grey-d: #3C3E40;
  --sans: "Hanken Grotesk", "Helvetica Neue", Helvetica, sans-serif;
  --ease: cubic-bezier(.19, .82, .22, 1);
  --hair: 1px solid rgba(245, 245, 244, .16);
  --hair-dark: 1px solid rgba(10, 10, 10, .18);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--sans);
  font-weight: 300;
  background: var(--black);
  color: var(--white);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
/* Photographs are graded rather than flattened to pure black and white: a
   fifth of the original saturation survives, which reads as warmth on the
   clinic and street shots and stays near-monochrome on the colder gym ones.
   The contrast lift stops the heavy scrims washing everything out. */
img { display: block; max-width: 100%; filter: grayscale(.8) contrast(1.1); }
a { color: inherit; text-decoration: none; }
::selection { background: var(--white); color: var(--black); }

/* ---------------- scenes ---------------- */
.scene {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
  isolation: isolate;
}
.scene--tall { padding: 18vh 0; }
.scene--footer { min-height: 0; padding: 12vh 0 6vh; }

.scene__bg { position: absolute; inset: -14% 0; z-index: 0; will-change: transform; }
.scene__bg img { width: 100%; height: 100%; object-fit: cover; }
/* The coaching photograph is a 9:16 phone shot in a landscape frame, so a
   centred crop lands on Remy's head alone and loses the client. Biasing the
   crop downwards keeps both people in view on wide screens. */
#rebuild .scene__bg img { object-position: 50% 60%; }
/* The assessment shot is portrait-shaped in a landscape frame. On wide screens
   the default 14% overhang crops tight to the practitioner, so deepen the
   background box to pull more of the photograph into view. Only above 4:3:
   on narrower, taller viewports a deeper box crops the sides instead, which
   is worse. The extra overhang gives the parallax more slack, not less. */
@media (min-aspect-ratio: 4/3) {
  #conditions .scene__bg { inset: -45% 0; }
}
.scene__scrim { position: absolute; inset: 0; z-index: 1; }

.scene__scrim--hero { background: linear-gradient(180deg, rgba(10,10,10,.55) 0%, rgba(10,10,10,.28) 45%, rgba(10,10,10,.66) 100%); }
.scene__scrim--left { background: linear-gradient(90deg, rgba(10,10,10,.78) 0%, rgba(10,10,10,.42) 55%, rgba(10,10,10,.12) 100%); }
.scene__scrim--right { background: linear-gradient(270deg, rgba(10,10,10,.78) 0%, rgba(10,10,10,.42) 55%, rgba(10,10,10,.12) 100%); }
.scene__scrim--dark { background: linear-gradient(180deg, rgba(10,10,10,.7) 0%, rgba(10,10,10,.56) 50%, rgba(10,10,10,.74) 100%); }
.scene__scrim--deep { background: linear-gradient(180deg, rgba(10,10,10,.82) 0%, rgba(10,10,10,.7) 50%, rgba(10,10,10,.85) 100%); }
.scene__scrim--white { background: linear-gradient(180deg, rgba(245,245,244,.9) 0%, rgba(245,245,244,.82) 50%, rgba(245,245,244,.92) 100%); }
.scene__scrim--footer { background: linear-gradient(180deg, rgba(10,10,10,.93) 0%, rgba(10,10,10,.96) 100%); }

.scene__content { position: relative; z-index: 2; width: 100%; }


/* ---------------- layout ---------------- */
.wrap { width: min(1240px, 100% - 112px); margin-inline: auto; }
.wrap--right { display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
.wrap--narrow { width: min(860px, 100% - 112px); }

/* ---------------- type ---------------- */
.eyebrow {
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .38em;
  text-transform: uppercase;
  color: var(--grey-m);
  margin-bottom: 2.6rem;
}
.eyebrow--dark { color: rgba(10,10,10,.55); }

.hero__title {
  font-weight: 200;
  font-size: clamp(3.2rem, 8.6vw, 7.6rem);
  line-height: 1.04;
  letter-spacing: -.015em;
}
.scene__title {
  font-weight: 200;
  font-size: clamp(2.5rem, 5.4vw, 4.6rem);
  line-height: 1.08;
  letter-spacing: -.01em;
  margin-bottom: 2.6rem;
}
.scene__title--sm { font-size: clamp(2.1rem, 4.2vw, 3.5rem); }
.scene__title--dark { color: var(--ink); }
.rv__i--dim { color: var(--grey-m); }

.hero__lede {
  font-size: clamp(1rem, 1.4vw, 1.18rem);
  font-weight: 300;
  max-width: 54ch;
  margin-top: 2.8rem;
  color: rgba(245,245,244,.88);
}
.scene__body { max-width: 52ch; font-size: 1.04rem; color: rgba(245,245,244,.86); margin-bottom: 1.7rem; }
.wrap--right .scene__body { margin-left: auto; }
.scene__note {
  font-size: .76rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--grey-m);
}
.tbc { color: var(--grey-m); font-style: normal; }
.scene__title .tbc { color: var(--grey-d); }
.txtlink { border-bottom: 1px solid var(--grey-m); padding-bottom: 1px; }

/* ---------------- reveal ---------------- */
.rv { display: block; overflow: hidden; padding-block: .05em; }
.rv__i {
  display: block;
  transform: translateY(-112%);
  transition: transform 1.25s var(--ease);
  transition-delay: var(--d, 0s);
}
.reveal.is-in .rv__i { transform: translateY(0); }

.drop {
  opacity: 0;
  transform: translateY(-20px);
  transition: opacity 1.1s var(--ease), transform 1.15s var(--ease);
  transition-delay: var(--d, 0s);
}
.reveal.is-in .drop, .drop.is-in { opacity: 1; transform: translateY(0); }

/* ---------------- nav ---------------- */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 2.6rem;
  padding: 26px 48px;
  transition: background .5s var(--ease), padding .5s var(--ease), border-color .5s;
  border-bottom: 1px solid transparent;
}
.nav--solid {
  background: rgba(10,10,10,.9);
  backdrop-filter: blur(14px);
  border-bottom-color: rgba(245,245,244,.12);
  padding: 16px 48px;
}
.nav__brand {
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: .5em;
  color: var(--white);
}
.nav__links { display: flex; gap: 2rem; margin-left: auto; }
.nav__links a {
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(245,245,244,.72);
  transition: color .3s;
}
.nav__links a:hover { color: var(--white); }

/* ---------------- buttons ---------------- */
.btn {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 400;
  letter-spacing: .3em;
  text-transform: uppercase;
  padding: 1.15em 2.8em;
  border: 1px solid rgba(245,245,244,.55);
  color: var(--white);
  transition: background .45s var(--ease), color .45s var(--ease), border-color .45s;
  text-align: center;
}
.btn--solid { background: var(--white); color: var(--black); border-color: var(--white); }
.btn--solid:hover { background: transparent; color: var(--white); }
.btn--line:hover { background: var(--white); color: var(--black); border-color: var(--white); }
.btn--nav { padding: .85em 2em; }
.btn--nav:hover { background: var(--white); color: var(--black); border-color: var(--white); }

/* ---------------- hero ---------------- */
.scene--hero .scene__content { padding-top: 6vh; }
.hero__cta { margin-top: 3.2rem; display: flex; align-items: center; gap: 2.4rem; flex-wrap: wrap; }
.hero__trustline {
  font-size: .74rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--grey-m);
}
.hero__scroll { position: absolute; right: 48px; bottom: 34px; z-index: 2; }
.hero__scroll span {
  display: block;
  width: 1px;
  height: 64px;
  background: linear-gradient(180deg, transparent, rgba(245,245,244,.8));
  animation: scrollpulse 3s var(--ease) infinite;
}
@keyframes scrollpulse {
  0% { transform: scaleY(0); transform-origin: top; }
  45% { transform: scaleY(1); transform-origin: top; }
  55% { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

/* ---------------- conditions ---------------- */
.condlist {
  list-style: none;
  columns: 2;
  column-gap: 5rem;
  max-width: 860px;
  margin-bottom: 2.6rem;
}
.condlist li {
  font-weight: 200;
  font-size: clamp(1.25rem, 2vw, 1.6rem);
  letter-spacing: .01em;
  padding: 1rem 0;
  border-bottom: var(--hair);
  break-inside: avoid;
  display: flex;
  align-items: baseline;
  gap: 1.4rem;
}
.condlist li i {
  font-style: normal;
  font-size: .68rem;
  letter-spacing: .24em;
  color: var(--grey-m);
}

/* ---------------- services ---------------- */
.services { max-width: 800px; }
.services ul { list-style: none; }
.services li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 2rem;
  padding: 1.15rem 0;
  border-bottom: var(--hair);
}
.services li span { font-weight: 200; font-size: 1.3rem; }
.services li em {
  font-style: normal;
  font-size: .74rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--grey-m);
  white-space: nowrap;
}
.services__note { margin-top: 1.5rem; font-size: .84rem; color: var(--grey-m); }

/* ---------------- practitioner ---------------- */
.remy {
  display: grid;
  grid-template-columns: minmax(280px, 400px) 1fr;
  gap: 5.5rem;
  align-items: center;
}
.remy__portrait {
  aspect-ratio: 3 / 4;
  border: 1px solid rgba(245,245,244,.28);
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    linear-gradient(160deg, rgba(245,245,244,.05), rgba(10,10,10,.3)),
    repeating-linear-gradient(45deg, transparent 0 16px, rgba(245,245,244,.04) 16px 17px);
  position: relative;
}
.remy__portrait figcaption { font-size: .82rem; letter-spacing: .2em; text-transform: uppercase; color: var(--grey-m); }
/* A filled portrait keeps the photograph's own proportions rather than being
   cropped to the empty frame's 3:4. It carries a touch more contrast than the
   site-wide grayscale so the dark top holds its shape against the pale wall. */
.remy__portrait:not(.img-slot--empty) { aspect-ratio: auto; display: block; }
.remy__portrait img {
  width: 100%;
  height: auto;
  filter: grayscale(1) contrast(1.18) brightness(1.04);
}
.remy__cred {
  font-size: .78rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  line-height: 2.1;
  color: var(--grey-l);
  margin-bottom: 1.7rem;
}

/* ---------------- book ---------------- */
.truststrip {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0 3.6rem;
  margin-bottom: 4.4rem;
  padding-bottom: 1.7rem;
  border-bottom: var(--hair);
}
.truststrip li {
  font-size: .74rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: rgba(245,245,244,.72);
  padding: .5rem 0;
}
.calwrap {
  margin-top: 2.6rem;
  border: var(--hair);
  background: #101010;
  max-width: 920px;
}
.calwrap__frame {
  display: block;
  width: 100%;
  min-width: 300px;
  height: 1000px; /* starting value — Cliniko's resize script adjusts this to fit */
  border: 0;
}
#book .scene__note { margin-top: 1.3rem; }

/* ---------------- watch ---------------- */
.videowrap {
  margin-top: 2.6rem;
  border: var(--hair);
  background: #101010;
  max-width: 920px;
  aspect-ratio: 16 / 9;
}
.videowrap iframe { display: block; width: 100%; height: 100%; border: 0; }
#watch .scene__note { margin-top: 1.3rem; }

/* ---------------- visit ---------------- */
.visit { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3.4rem; max-width: 1000px; }
.visit__col { border-top: var(--hair); padding-top: 1.6rem; }
.visit__col h3 {
  font-size: .74rem;
  font-weight: 400;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--grey-m);
  margin-bottom: 1.1rem;
}
.visit__col p { font-size: 1rem; color: rgba(245,245,244,.85); margin-bottom: .8rem; }
.visit__fine { font-size: .8rem !important; color: var(--grey-m) !important; }

/* ---------------- faq ---------------- */
.faq { border-top: var(--hair-dark); }
.faq__item { border-bottom: var(--hair-dark); }
.faq__item summary {
  font-weight: 300;
  font-size: 1.18rem;
  letter-spacing: .01em;
  color: var(--ink);
  padding: 1.6rem 2.6rem 1.6rem 0;
  cursor: pointer;
  list-style: none;
  position: relative;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: '+';
  position: absolute;
  right: .4rem;
  top: 50%;
  transform: translateY(-50%);
  font-weight: 200;
  font-size: 1.5rem;
  color: rgba(10,10,10,.5);
  transition: transform .4s var(--ease);
}
.faq__item[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq__item p { padding: 0 0 1.7rem; max-width: 64ch; color: rgba(10,10,10,.72); font-size: .96rem; }

/* ---------------- footer ---------------- */
.foot {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1.2fr auto;
  gap: 3rem;
  align-items: start;
  padding-bottom: 3.6rem;
  border-bottom: var(--hair);
  margin-bottom: 2.2rem;
}
.foot__logo { font-size: 1.3rem; font-weight: 500; letter-spacing: .5em; }
.foot__tag {
  font-size: .68rem;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--grey-m);
  margin-top: .7rem;
}
.foot__col h3 {
  font-size: .7rem;
  letter-spacing: .32em;
  text-transform: uppercase;
  font-weight: 400;
  color: var(--grey-m);
  margin-bottom: 1.1rem;
}
.foot__col p { font-size: .92rem; color: rgba(245,245,244,.78); line-height: 2.1; }
.foot__fine { font-size: .78rem; color: rgba(245,245,244,.4); max-width: 92ch; line-height: 1.9; }

/* ---------------- sticky ---------------- */
.sticky {
  position: fixed;
  right: 28px;
  bottom: 28px;
  z-index: 50;
  background: var(--white);
  color: var(--black);
  font-size: 11px;
  letter-spacing: .32em;
  text-transform: uppercase;
  padding: 1.15em 2.6em;
  box-shadow: 0 16px 44px rgba(0,0,0,.5);
  opacity: 0;
  transform: translateY(16px);
  pointer-events: none;
  transition: opacity .5s var(--ease), transform .5s var(--ease), background .3s;
}
.sticky.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.sticky:hover { background: var(--grey-l); }

/* ---------------- burger / mobile ---------------- */
.burger {
  display: none;
  background: none;
  border: 0;
  width: 40px;
  height: 34px;
  margin-left: auto;
  cursor: pointer;
  position: relative;
  z-index: 60;
}
.burger span {
  position: absolute;
  left: 6px;
  right: 6px;
  height: 1px;
  background: var(--white);
  transition: transform .4s var(--ease), top .4s var(--ease);
}
.burger span:first-child { top: 13px; }
.burger span:last-child { top: 21px; }
.burger.is-open span:first-child { top: 17px; transform: rotate(45deg); }
.burger.is-open span:last-child { top: 17px; transform: rotate(-45deg); }

.mobmenu {
  position: fixed;
  inset: 0;
  z-index: 45;
  background: rgba(10,10,10,.97);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .45s var(--ease);
}
.mobmenu.is-open { opacity: 1; pointer-events: auto; }
.mobmenu nav { display: flex; flex-direction: column; gap: 1.7rem; text-align: center; }
.mobmenu a { font-weight: 200; font-size: 1.55rem; letter-spacing: .04em; color: var(--white); }
.mobmenu .btn { font-size: 11.5px; margin-top: 1.5rem; }

/* ---------------- responsive ---------------- */
@media (max-width: 1020px) {
  .nav__links, .btn--nav { display: none; }
  .burger { display: block; }
  .remy { grid-template-columns: 1fr; gap: 3rem; }
  .remy__portrait { max-width: 380px; }
  .visit { grid-template-columns: 1fr; gap: 2rem; }
  .foot { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .wrap, .wrap--narrow { width: min(1240px, 100% - 48px); }
  .nav { padding: 18px 24px; }
  .nav--solid { padding: 12px 24px; }
  .condlist { columns: 1; }
  .foot { grid-template-columns: 1fr; gap: 2rem; }
  .wrap--right { align-items: flex-start; text-align: left; }
  .wrap--right .scene__body { margin-left: 0; }
  .scene__scrim--right { background: linear-gradient(90deg, rgba(10,10,10,.78) 0%, rgba(10,10,10,.42) 55%, rgba(10,10,10,.12) 100%); }
  .scene::after { font-size: 9px; left: 10px; bottom: 10px; }
  .hero__scroll { right: 24px; }
  .sticky { right: 16px; bottom: 16px; }
  .truststrip { gap: 0 1.8rem; margin-bottom: 2.8rem; }
}

/* ---------------- reduced motion ---------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rv__i, .drop { transition: none !important; transform: none !important; opacity: 1 !important; }
  .hero__scroll span { animation: none; }
  .scene__bg { inset: 0; }
}