/* ==========================================================================
   Rejuvenate Massage & Reflexology — faithful recreation of the original
   Squarespace site. Fonts: Anton (display) + Inter (body).
   Palette: ink #292929 on white; full-bleed imagery with dark overlays.
   ========================================================================== */

:root{
  --ink: #292929;
  --paper: #ffffff;
  --hairline: rgba(41,41,41,.18);
  --font-display: 'Anton', 'Arial Narrow', sans-serif;
  --font-body: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  --pad-x: clamp(20px, 11vw, 167px);
  --anim-dur: .45s;
  --anim-delay: .05s;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:90px; -webkit-text-size-adjust:100%; text-size-adjust:100%; }
html,body{ max-width:100%; overflow-x:hidden; }
body{
  margin:0;
  font-family:var(--font-body);
  font-size:14px;
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
body.nav-open{ overflow:hidden; }

img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }
.btn,.acc-btn,.nav-toggle,.site-nav a,.wave-toggle{ -webkit-tap-highlight-color:transparent; }

/* ---------- type ---------- */
h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:400;
  letter-spacing:.01em;
  margin:0;
}
.h-hero   { font-size:clamp(48px, 6.2vw, 93px);  line-height:1.087; }
.h-xl     { font-size:clamp(40px, 4.9vw, 74px);  line-height:1.12;  }
.h-lg     { font-size:clamp(30px, 3.62vw, 54px); line-height:1.19;  }
.h-md     { font-size:clamp(24px, 2.34vw, 35px); line-height:1.24;  }
p{ margin:0 0 1em; line-height:1.6; }

/* ---------- preloader (mimics the Squarespace dark load-in) ---------- */
.preloader{
  position:fixed; inset:0; z-index:200;
  background:var(--ink);
  animation:preloader-out .5s ease 1s forwards;
  pointer-events:none;
}
@keyframes preloader-out{ to{ opacity:0; visibility:hidden; } }

/* ---------- scroll-in animation (fade + slide, .8s ease, .6s delay) --- */
.anim{
  opacity:0;
  transform:translateY(18px);
  transition:opacity var(--anim-dur) ease, transform var(--anim-dur) ease;
  transition-delay:calc(var(--anim-delay) + var(--d, 0s));
}
.anim.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .anim{ opacity:1; transform:none; transition:none; }
  html{ scroll-behavior:auto; }
}

/* ---------- header ---------- */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:50;
  padding:42px 50px;
  display:flex; align-items:flex-start; justify-content:space-between; gap:24px;
  color:#fff;
  transition:background-color .35s ease, color .35s ease, padding .35s ease, box-shadow .35s ease;
}
.site-header.theme-dark{ color:var(--ink); }
.site-header.scrolled{
  color:var(--ink);
  background:rgba(255,255,255,.92);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  box-shadow:0 1px 0 var(--hairline);
  padding:14px 50px;
  align-items:center;
}
.site-header.scrolled .site-title{ font-size:24px; }
.site-header.scrolled .site-nav{ padding-top:0; }
.site-title{
  font-family:var(--font-display);
  font-size:clamp(28px, 3.23vw, 49px);
  line-height:1.3;
  letter-spacing:.01em;
  text-decoration:none;
  max-width:11em;
  transition:font-size .35s ease;
}
.site-nav{
  display:flex; gap:1.7em; flex-wrap:wrap;
  font-size:15.2px;
  padding-top:14px;
}
.site-nav a{
  text-decoration:none;
  padding-bottom:3px;
  background:linear-gradient(currentColor,currentColor) left bottom / 0% 1px no-repeat;
  transition:background-size .25s ease;
}
.site-nav a:hover,
.site-nav a[aria-current="page"]{ background-size:100% 1px; }

.nav-toggle{
  display:none;
  background:none; border:0; cursor:pointer;
  width:44px; height:36px; position:relative; z-index:60;
  color:inherit;
}
.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after{
  content:''; display:block; position:absolute; left:8px; right:8px;
  height:2px; background:currentColor; transition:transform .3s ease, opacity .3s ease;
}
.nav-toggle span{ top:17px; }
.nav-toggle span::before{ top:-8px; }
.nav-toggle span::after{ top:8px; }
.nav-open .nav-toggle span{ transform:rotate(45deg); }
.nav-open .nav-toggle span::before{ transform:rotate(-90deg) translateX(-8px); }
.nav-open .nav-toggle span::after{ opacity:0; }
body.nav-open{ overflow:hidden; }

@media (max-width: 880px){
  .site-header{ padding:26px 24px; align-items:center; }
  .site-header.scrolled{ padding:12px 24px; }
  .nav-open .site-header.scrolled{ background:transparent; box-shadow:none; -webkit-backdrop-filter:none; backdrop-filter:none; }
  .nav-toggle{ display:block; }
  .site-nav{
    position:fixed; inset:0; z-index:55;
    background:var(--ink); color:#fff;
    display:flex; flex-direction:column; justify-content:center; align-items:center;
    gap:1.4em; font-size:24px; font-family:var(--font-display);
    opacity:0; visibility:hidden; transition:opacity .3s ease;
    padding-top:0;
  }
  .nav-open .site-nav{ opacity:1; visibility:visible; }
  .nav-open .site-header{ color:#fff; }
}

/* ---------- generic full-bleed section ---------- */
.section{
  position:relative;
  display:flex; flex-direction:column; justify-content:center;
  padding:120px var(--pad-x);
  overflow:hidden;
}
.section-bg{
  position:absolute; inset:0; z-index:0;
  background-size:cover; background-position:center;
}
.section-bg::after{
  content:''; position:absolute; inset:0;
  background:var(--ink);
  opacity:var(--overlay, 0);
}
.section > .content{ position:relative; z-index:1; }

/* ---------- home: hero ---------- */
.hero{
  min-height:100vh;
  min-height:100svh;
  justify-content:flex-end;
  padding-bottom:4vh;
  color:#fff;
}
.hero .section-bg{ --overlay:.14; }

/* ---------- home: services ---------- */
.svc{
  min-height:100vh;
  min-height:100svh;
  color:#fff;
}
.svc .section-bg{ --overlay:.57; }
.svc .content{ max-width:560px; }
.svc p{ font-size:18.8px; line-height:1.59; margin:0 0 .4em; }
.svc h3{ margin-bottom:34px; }
.svc-list{
  list-style:none; margin:56px 0 64px; padding:0;
  display:flex; flex-direction:column; gap:18px;
}
.svc-list li{
  font-family:var(--font-display);
  font-size:clamp(24px, 2.34vw, 35px);
  line-height:1.24; letter-spacing:.01em;
}
.svc-list li::before{ content:'•'; margin-right:.55em; font-size:.75em; vertical-align:.12em; }

/* ---------- pill button ---------- */
.btn{
  display:inline-block;
  font-family:var(--font-body); font-size:13px; letter-spacing:.01em;
  padding:18px 30px; border-radius:300px;
  border:2px solid currentColor;
  text-decoration:none; background:transparent;
  transition:opacity .2s ease, transform .2s ease;
}
.btn:hover{ opacity:.75; }

/* ---------- home: waves + back diagram ---------- */
.relief{
  position:relative;
  padding:160px 24px;
  display:flex; justify-content:center; align-items:center;
  min-height:110vh;
  overflow:hidden;
  background:#e8ece3;
}
.wave-canvas{ position:absolute; inset:0; width:100%; height:100%; z-index:0; }
.relief figure{ margin:0; position:relative; z-index:1; max-width:1032px; width:min(90vw,1032px); }
.wave-toggle{
  position:absolute; right:22px; bottom:18px; z-index:2;
  width:30px; height:30px; border-radius:50%;
  border:1px solid rgba(41,41,41,.55); background:rgba(255,255,255,.15);
  color:rgba(41,41,41,.75); cursor:pointer;
  display:flex; align-items:center; justify-content:center; font-size:11px;
  padding:0;
}

/* ---------- home: quote strips ---------- */
.quote{
  min-height:389px;
  padding:90px var(--pad-x);
  justify-content:center; text-align:center;
  color:#fff;
}
.quote h3{ max-width:1180px; margin:0 auto; }
.quote h3::before{ content:'\201C\00A0'; }
.quote h3::after{ content:'\00A0\201D'; }
.quote-attr{
  margin:26px auto 0; font-size:15.2px; list-style:none; padding:0;
}
.quote-attr li::before{ content:'•'; margin-right:.6em; font-size:.8em; }
.quote-attr .name{ font-weight:600; text-decoration:underline; text-underline-offset:2px; }
.quote-1 .section-bg{
  background-image:linear-gradient(100deg,#d9c355 0%,#d3bd6e 22%,#c5b48a 45%,#b7ad9d 62%,#adb096 80%,#a4ad8e 100%);
  --overlay:.15;
}
.quote-2 .section-bg{ --overlay:.15; }
.quote-3 .section-bg{ --overlay:.28; }
.quote-4{ min-height:454px; }
.quote-4 .section-bg{ --overlay:.13; }

/* ---------- home: location ---------- */
.location{
  min-height:100vh;
  min-height:100svh;
  align-items:flex-end; text-align:right;
}
.location .section-bg{ --overlay:.10; }
.location h2{ margin-bottom:40px; }
.location p{ font-size:15.2px; margin:0 0 1em; }

/* ---------- inner pages (white) ---------- */
.page{
  padding:250px var(--pad-x) 120px;
  min-height:70vh;
}
.page-pricing{ padding-top:200px; }
.page-narrow{ max-width:1200px; margin:0 auto; width:100%; }

/* ---------- services page: accordion ---------- */
.our-services h2{ margin-bottom:70px; }
.accordion{ border-top:1px solid var(--hairline); }
.acc-item{ border-bottom:1px solid var(--hairline); }
.acc-btn{
  width:100%; display:flex; justify-content:space-between; align-items:center; gap:20px;
  background:none; border:0; cursor:pointer; text-align:left;
  padding:30px 4px;
  font-family:var(--font-display); font-weight:400; letter-spacing:.01em;
  font-size:clamp(22px, 2.34vw, 35px); line-height:1.24; color:var(--ink);
}
.acc-btn .chev{
  flex:none; width:12px; height:12px;
  border-right:2px solid var(--ink); border-bottom:2px solid var(--ink);
  transform:rotate(45deg); transition:transform .3s ease;
  margin-right:6px;
}
.acc-item.open .acc-btn .chev{ transform:rotate(225deg); }
.acc-panel{
  max-height:0; overflow:hidden; transition:max-height .45s ease;
}
.acc-panel-inner{ padding:6px 4px 40px; max-width:900px; }
.acc-panel-inner p{ font-size:16px; line-height:1.7; color:#3d3d3d; }
.acc-panel-inner p strong{ color:var(--ink); }

/* ---------- pricing page ---------- */
.price-row{
  display:grid; grid-template-columns:1fr 1fr; gap:40px;
  align-items:center;
  padding:110px 0;
  border-bottom:1px solid var(--hairline);
}
.price-big{ font-size:clamp(56px, 6.2vw, 93px); line-height:1; }
.price-per{ font-size:15.2px; margin-top:18px; color:var(--ink); }
.price-info{ text-align:center; }
.price-info h4{
  font-family:var(--font-body); font-weight:600; font-size:16px; letter-spacing:0;
  margin-bottom:14px;
}
.price-info h4 small{ font-weight:400; font-size:16px; }
.price-info ul{ list-style:none; margin:0; padding:0; font-size:13.5px; color:#555; }
.price-info li{ padding:3px 0; }
.price-info li::before{ content:'•'; margin-right:.6em; color:#999; }
@media (max-width:760px){
  .price-row{ grid-template-columns:1fr; text-align:center; padding:70px 0; }
}

/* ---------- about page ---------- */
.about{ text-align:center; }
.about h2{ max-width:14em; margin:0 auto 60px; }
.about p{ font-size:14px; line-height:1.8; margin:0 0 1.4em; }
.about figure{ margin:110px auto; max-width:800px; text-align:left; }
.about figcaption{ font-size:13px; color:#555; margin-top:14px; }
.about .maps-cta{ margin-top:120px; }
.about .btn{ margin-top:40px; color:var(--ink); }

/* ---------- contact page ---------- */
.contact-grid{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:60px;
  align-items:start;
}
.contact-info h1{ margin-bottom:50px; }
.contact-info p{ font-size:15.2px; margin:0 0 1.1em; }
.contact-info h2{ margin:90px 0 40px; }
.contact-info a{ text-decoration:underline; text-underline-offset:2px; }
.contact-map{ width:100%; height:560px; border:0; filter:grayscale(.15); }
@media (max-width:900px){
  .contact-grid{ grid-template-columns:1fr; }
  .contact-map{ height:420px; }
}

/* ---------- terms page ---------- */
.terms-eyebrow{
  font-size:13px; letter-spacing:.16em; text-transform:uppercase;
  color:#777; margin:0 0 20px;
}
.terms-intro{
  font-size:16px; line-height:1.7; color:#555;
  max-width:36em; margin:28px 0 100px;
}
.terms-row{
  display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.6fr);
  gap:30px 90px;
  padding:80px 0;
  border-top:1px solid var(--hairline);
}
.terms-row:last-of-type{ border-bottom:1px solid var(--hairline); }
.terms-body p{ font-size:16px; line-height:1.7; color:#3d3d3d; margin:0 0 1.2em; max-width:640px; }
.terms-body p:last-child{ margin-bottom:0; }
.terms-note{ margin-top:70px; font-size:15.2px; }
.terms-note a{ text-decoration:underline; text-underline-offset:2px; }
@media (max-width:860px){
  .terms-intro{ margin-bottom:70px; }
  .terms-row{ grid-template-columns:1fr; gap:26px; padding:56px 0; }
}

/* ---------- footer ---------- */
.site-footer{
  background:var(--ink); color:#fff;
  padding:88px 50px 96px;
  padding-left:var(--pad-x);
  display:flex; flex-wrap:wrap; gap:60px 90px;
  align-items:flex-start;
}
.foot-col h2{ font-size:clamp(34px,3.23vw,49px); line-height:1.3; margin-bottom:28px; }
.foot-col p{ font-size:13.5px; margin:0 0 .9em; }
.foot-col a{ text-decoration:none; }
.foot-col a:hover{ text-decoration:underline; }
.foot-brand{
  margin-left:auto; align-self:center;
  font-family:var(--font-display); font-size:clamp(24px,2.1vw,32px);
  letter-spacing:.01em; text-align:right;
}
@media (max-width:760px){
  .site-footer{ flex-direction:column; padding:64px 24px 72px; gap:44px; }
  .foot-brand{ margin-left:0; text-align:left; }
}

/* ==========================================================================
   Global mobile refinements (small phones / tall content)
   ========================================================================== */
@media (max-width:640px){
  :root{ --pad-x:26px; }
  .section{ padding-top:90px; padding-bottom:90px; }
  .hero{ padding-bottom:4vh; }
  .quote-4{ min-height:0; }
  .location{ align-items:flex-start; text-align:left; }
  .relief{ padding:90px 16px; min-height:0; }
  .relief figure{ width:min(94vw,1032px); }
  .page{ padding-top:150px; padding-bottom:80px; }
  .page-pricing{ padding-top:150px; }
  .price-row{ padding:50px 0; }
  .about figure{ margin:70px auto; }
  .about .maps-cta{ margin-top:70px; }
  .about .btn{ margin-top:30px; }
  .contact-info h2{ margin:56px 0 28px; }
  .our-services h2{ margin-bottom:44px; }
  .acc-btn{ padding:22px 4px; gap:12px; }
  .acc-panel-inner{ padding:2px 4px 30px; }
}

@media (max-width:480px){
  .site-title{ font-size:20px; max-width:9.5em; line-height:1.25; }
  .site-header.scrolled .site-title{ font-size:18px; }
  .site-header{ padding:20px 18px; }
  .site-header.scrolled{ padding:12px 18px; }
  .nav-toggle{ flex-shrink:0; }
  .btn{ padding:16px 26px; font-size:12.5px; }
}