/* clinic.css — Swiss Clinics, in the Aman / Brando manner.

   The rules of this style, and they are strict:
     full bleed photography, never cropped into a little box
     very slow movement, nothing snaps
     tiny type with wide tracking, almost no interface
     one idea per screen, and a lot of nothing around it
   The palette is taken from the clinic's own sign: gold on warm white.

   Note: no overflow-x on body. It makes body the scroll container and breaks
   both window scrolling and position:sticky. */

:root{
  --ink      :#1B1916;              /* warm near black, never pure black */
  --ink-60   :rgba(27,25,22,.60);
  --ink-38   :rgba(27,25,22,.38);
  --ivory    :#F7F4EF;
  --ivory-2  :#EFEAE2;
  --gold     :#A98545;              /* matched to the wordmark on the wall */
  --hair     :rgba(27,25,22,.14);
  --pad      :clamp(24px,6vw,110px);
  --serif    :"Cormorant Garamond","Didot","Bodoni 72",Georgia,serif;
  --sans     :-apple-system,BlinkMacSystemFont,"Inter","Helvetica Neue",Arial,sans-serif;
  --slow     :cubic-bezier(.22,1,.36,1);
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{background:var(--ivory);color:var(--ink);font-family:var(--sans);
  font-size:clamp(.92rem,1vw,1rem);line-height:1.78;font-weight:300;
  -webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}

/* one grade across every photograph, so the LED lit rooms sit beside the
   daylight ones without fighting each other */
.shot img,.pair img{filter:saturate(.82) contrast(1.03)}

.eyebrow{font-size:.58rem;letter-spacing:.36em;text-transform:uppercase;
  color:var(--ink-38);font-weight:400}
.display{font-family:var(--serif);font-weight:300;line-height:1.02;
  letter-spacing:-.01em;font-size:clamp(2.4rem,6.4vw,5.4rem)}
.display em{font-style:italic;color:var(--gold)}

/* ---------- almost no interface ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:30;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:26px var(--pad);color:#fff;mix-blend-mode:difference}
.nav__brand{font-size:.62rem;letter-spacing:.42em;text-transform:uppercase}
.nav__link{font-size:.58rem;letter-spacing:.28em;text-transform:uppercase;
  padding-bottom:4px;border-bottom:1px solid rgba(255,255,255,.5)}

/* ---------- full bleed panels ---------- */
.panel{position:relative;height:100svh;min-height:520px;overflow:hidden}
.panel .shot{position:absolute;inset:0}
.panel .shot img{width:100%;height:100%;object-fit:cover;
  /* the slow drift. --k runs 0 to 1 across the panel and never snaps */
  transform:scale(calc(1.03 + var(--k,0) * .08));will-change:transform}
/* the sign panel carries no words, so it needs no veil darkening it */
.panel--silent .panel__veil{display:none}
.panel--silent .shot img{filter:saturate(.86) contrast(1.04)}
.panel__veil{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(18,16,14,.30) 0%,rgba(18,16,14,0) 32%,rgba(18,16,14,.46) 100%)}
.panel__words{position:absolute;left:var(--pad);right:var(--pad);
  bottom:clamp(58px,11vh,120px);color:#fff;z-index:2;max-width:36ch}
.panel__words .eyebrow{color:rgba(255,255,255,.72);white-space:nowrap}
.panel__words h2{font-family:var(--serif);font-weight:300;
  font-size:clamp(1.9rem,3.8vw,3.2rem);line-height:1.08;margin-top:14px}
.panel__words p{color:rgba(255,255,255,.84);margin-top:14px;max-width:42ch}

/* The opening screen is centred, so it needs a far stronger scrim than the
   others. Centre text over a bright photograph is unreadable without one. */
.hero .panel__veil{
  background:
    radial-gradient(58% 46% at 50% 46%, rgba(16,14,12,.62) 0%, rgba(16,14,12,.28) 62%, rgba(16,14,12,0) 100%),
    linear-gradient(180deg, rgba(16,14,12,.46) 0%, rgba(16,14,12,.10) 34%, rgba(16,14,12,.58) 100%)}
.hero .panel__words{top:50%;bottom:auto;transform:translateY(-50%);
  left:0;right:0;max-width:none;text-align:center;padding:0 var(--pad)}
.hero .display{color:#fff}
.hero .panel__words p{margin:18px auto 0}
.hero__cue{position:absolute;left:50%;bottom:36px;transform:translateX(-50%);
  z-index:2;color:rgba(255,255,255,.72);font-size:.56rem;letter-spacing:.34em;
  text-transform:uppercase;text-align:center}
.hero__cue i{display:block;width:1px;height:46px;margin:0 auto 12px;
  background:linear-gradient(180deg,rgba(255,255,255,0),rgba(255,255,255,.85))}

/* ---------- the quiet screens between the pictures ---------- */
.say{padding:clamp(130px,26vh,300px) var(--pad);max-width:1060px;margin:0 auto;
  text-align:center}
.say .eyebrow{margin-bottom:26px}
.say p{font-family:var(--serif);font-weight:300;
  font-size:clamp(1.55rem,3vw,2.5rem);line-height:1.34}
.say small{display:block;margin-top:30px;font-family:var(--sans);
  font-size:.95rem;line-height:1.8;color:var(--ink-60);max-width:56ch;
  margin-left:auto;margin-right:auto}

/* ---------- a pair of details ---------- */
.pair{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,2.2vw,32px);
  padding:0 var(--pad) clamp(90px,16vh,190px)}
.pair figure{overflow:hidden}
.pair img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/5;
  background:var(--ivory-2)}
.pair figcaption{margin-top:14px;font-size:.58rem;letter-spacing:.3em;
  text-transform:uppercase;color:var(--ink-38)}
@media (max-width:700px){ .pair{grid-template-columns:1fr} }

/* ---------- practical, kept as small as it can be ---------- */
.facts{border-top:1px solid var(--hair);max-width:1060px;margin:0 auto;
  padding:clamp(50px,8vh,90px) var(--pad) clamp(110px,20vh,220px);
  display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
.facts b{display:block;font-family:var(--serif);font-weight:300;
  font-size:clamp(1.15rem,1.9vw,1.6rem);margin-bottom:5px}
.facts span{font-size:.58rem;letter-spacing:.3em;text-transform:uppercase;
  color:var(--ink-38)}
.facts a{border-bottom:1px solid var(--hair)}
@media (max-width:700px){ .facts{grid-template-columns:1fr;gap:24px} }

/* ---------- reveal, slower than anywhere else on the site ----------
   Content is visible by default. Only once the script has run does it
   hide and drift in, so a broken script never empties the page. */
.js-anim [data-rise]{opacity:0;transform:translateY(22px);
  transition:opacity 1.5s var(--slow),transform 1.5s var(--slow)}
.js-anim [data-rise].is-in{opacity:1;transform:none}

.foot{border-top:1px solid var(--hair);padding:40px var(--pad);
  display:flex;flex-wrap:wrap;gap:10px 34px;justify-content:space-between;
  color:var(--ink-38);font-size:.68rem}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js-anim [data-rise]{opacity:1;transform:none;transition:none}
  .panel .shot img{transform:none}
}

/* ---------- the enquiry form, as quiet as the rest ---------- */
.lead{
  --lf-bg     : var(--ivory-2);
  --lf-fg     : var(--ink);
  --lf-accent : var(--gold);
  --lf-line   : var(--hair);
  --lf-muted  : var(--ink-60);
}
.lead__title{font-family:var(--serif);font-weight:300}
.lead__btn{color:var(--ivory);font-weight:400;letter-spacing:.28em}
.lead__eyebrow,.lead__field label{letter-spacing:.3em}