/* ==========================================================================
   MOVE + C
   Implementation of "Move+C Website.dc.html" (1728px artboard) and
   "Move+C Website Mobile.dc.html" (390px artboard) as one responsive page.

   Type and spacing interpolate linearly between the two artboards
   (390px -> 1728px viewport), then clamp at each end.
   ========================================================================== */

/* --------------------------------------------------------------- tokens -- */
:root {
  /* Palette — taken from the design canvas */
  --ink:      rgb(76, 41, 26);    /* #4c291a  body text, mark            */
  --sand:     rgb(246, 244, 236); /* #f6f4ec  offerings band             */
  --mist:     rgb(231, 242, 244); /* #e7f2f4  connect band               */
  --dot-on:   rgb(164, 211, 235); /* #a4d3eb                             */
  --dot-off:  rgb(206, 227, 237); /* #cee3ed                             */
  --paper:    #fff;

  --font-sans:  "Montserrat", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-serif: Baskerville, "Libre Baskerville", Georgia, "Times New Roman", serif;

  /* Fluid type: min @390px  ->  max @1728px */
  --fs-wordmark: clamp(2.750rem, 0.416rem + 9.58vw, 10.760rem); /*  44 -> 172  */
  --fs-tagline:  clamp(1.594rem, 1.002rem + 2.43vw,  3.625rem); /*  26 ->  58  */
  --fs-display:  clamp(1.625rem, 1.188rem + 1.79vw,  3.125rem); /*  26 ->  50  */
  --fs-body:     clamp(1.000rem, 0.854rem + 0.60vw,  1.500rem); /*  16 ->  24  */
  --fs-card:     clamp(1.250rem, 1.086rem + 0.67vw,  1.813rem); /*  20 ->  29  */
  --fs-quote:    clamp(1.188rem, 0.878rem + 1.27vw,  2.250rem); /*  19 ->  36  */
  --fs-label:    clamp(0.875rem, 0.802rem + 0.30vw,  1.125rem); /*  14 ->  18  */
  --fs-closing:  clamp(1.625rem, 0.769rem + 3.51vw,  4.563rem); /*  26 ->  73  */
  --fs-footmark: clamp(1.500rem, 0.935rem + 2.32vw,  3.438rem); /*  24 ->  55  */
  --fs-social:   clamp(0.813rem, 0.758rem + 0.22vw,  1.000rem); /*  13 ->  16  */

  /* Fluid space.
     The artboard's 56px section padding applies on BOTH sides of every seam,
     so it reads as ~112px of dead space on a phone. The mobile end is pulled
     in and left free to scale with the actual screen, rather than pinning at
     the 390px artboard value for every handset. */
  --sp-section: clamp(2rem,   -0.925rem + 14.05vw, 14.25rem);   /*  32 -> 228  */
  --sp-band:    clamp(2.75rem, -0.28rem + 13.45vw, 14.25rem);   /*  48 -> 228  */
  --gutter:     clamp(1.25rem,  0.771rem + 2.99vw,  4.00rem);   /*  24 ->  64  */

  /* Measure — matches the artboard column widths */
  --w-prose:   858px;
  --w-grid:   1200px;
  --w-quote:   679px;
  --w-closing:1374px;
}

/* Phones only: body copy and testimonial quotes run 10% larger than the
   fluid ramp above, and the hero tagline 15% larger. Every part of each clamp
   is scaled by the same factor, so the increase holds exactly across the
   whole phone range, not just at 390px. Scoped below the 760px seam, so
   tablet and desktop are untouched. */
@media (max-width: 759px) {
  :root {
    --fs-body:    clamp(1.100rem, 0.939rem + 0.66vw,  1.650rem);  /* 17.6 -> 20.0, +10% */
    --fs-quote:   clamp(1.307rem, 0.966rem + 1.397vw, 2.475rem);  /* 20.9 -> 26.1, +10% */
    --fs-tagline: clamp(1.833rem, 1.152rem + 2.795vw, 4.169rem);  /* 29.3 -> 39.6, +15% */
  }
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: var(--fs-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1, h2, h3, p, figure, blockquote { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
img { max-width: 100%; display: block; }

a { color: var(--ink); text-decoration: none; }
a:hover { text-decoration: underline; }

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -120%);
  z-index: 100;
  padding: 0.75rem 1.25rem;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-sans);
  font-size: 0.875rem;
  letter-spacing: 0.04em;
}
.skip-link:focus-visible { transform: translate(-50%, 0); }

/* -------------------------------------------------------------- section -- */
.section {
  padding-block: var(--sp-section);
  padding-inline: var(--gutter);
}

/* ================================================================= HERO == */
.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  isolation: isolate;
  padding-inline: var(--gutter);
  /* 390 x 420 mobile artboard. Pure ratio, no minimum: the hero scales with
     the width of the actual handset, so a narrow phone gets a shorter hero
     rather than one fixed height forced on every screen. */
  aspect-ratio: 390 / 420;
  background: url(assets/hero-new-sm.jpg) center / cover no-repeat;
  overflow: hidden;
}

.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(0, 0, 0, 0.15);
}

/* A soft fall-off behind the top bar. The hero wall is a pale tan, so white
   nav and the burger sit on almost no contrast without it. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  z-index: -1;
  height: clamp(110px, 20vh, 240px);
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.34), rgba(0, 0, 0, 0));
  pointer-events: none;
}

.hero__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(0.875rem, 0.44rem + 1.12vw, 1.75rem);   /* 14 -> 28 */
  text-align: center;
  color: #fff;
}

.hero__wordmark {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--fs-wordmark);
  line-height: 1;
  white-space: nowrap;
  text-shadow: 0 0 clamp(2.5rem, 6.4vw, 6.94rem) rgba(0, 0, 0, 0.5);
}

.hero__tagline {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--fs-tagline);
  line-height: 1.35;
  text-shadow: 0 0 clamp(1.25rem, 3.2vw, 3.44rem) rgba(0, 0, 0, 0.9);
  text-wrap: balance;
}
/* Mobile artboard breaks the tagline onto three lines; desktop runs it on one. */
.hero__tagline span { display: block; }

@media (min-width: 760px) {
  .hero {
    /* 1728 x 1119 desktop artboard */
    aspect-ratio: 1728 / 1119;
    /* keeps the hero from going letterbox-squat on tablets */
    min-height: 520px;
    /* Without this, min-height wins on narrow tablets and the aspect ratio
       then drives the WIDTH instead of the height: 520 * 1728/1119 = 803px,
       so 760-802px viewports got an 803px-wide hero that overflowed the
       screen and pushed the burger out of reach. Pinning the width keeps
       min-height doing its job — the hero just crops a little more. */
    width: 100%;
    background-image: url(assets/hero-new.jpg);
    /* the artboard sits its lockup a touch above true centre */
    padding-bottom: clamp(0rem, 4vw, 5rem);
  }
  .hero__scrim { background: rgba(0, 0, 0, 0.1); }
  .hero__tagline span { display: inline; }
  .hero__tagline span + span { margin-left: 0.25em; }
}

/* -------------------------------------------------------------- nav ----- */
.nav-toggle {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 8px;
  background: none;
  border: 0;
  cursor: pointer;
}

.nav-toggle__bar {
  display: block;
  width: 26px;
  height: 2px;
  background: #fff;
  transition: transform 0.25s ease, opacity 0.2s ease;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.site-nav {
  position: fixed;
  inset: 0;
  z-index: 15;
  display: grid;
  place-items: center;
  background: var(--ink);
  /* Opening: become visible on the same frame, so the overlay is focusable
     immediately. Closing: stay visible for the fade, then hide. */
  transition: opacity 0.3s ease, visibility 0s linear 0s;
}
.site-nav[data-open="false"] {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}

.site-nav__list {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.75rem;
  text-align: center;
}
.site-nav__link {
  font-family: var(--font-sans);
  font-weight: 300;                       /* Montserrat Light */
  font-size: 1.5rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sand);
  text-decoration: none;
}
.site-nav__link:hover,
.site-nav__link:focus-visible {
  text-decoration: underline;
  text-underline-offset: 0.4em;
  text-decoration-thickness: 1px;
}
.site-nav__link:focus-visible { outline-color: var(--sand); }

/* ---- Desktop: centred banner across the top of the hero ---------------- */
@media (min-width: 900px) {
  .nav-toggle { display: none; }

  /* [data-open] is carried so this outranks the mobile .site-nav[data-open="false"]
     hide rule, which is more specific than a bare .site-nav selector. */
  .site-nav[data-open] {
    position: absolute;
    inset: 0 0 auto 0;                    /* top banner, not full screen */
    z-index: 20;
    display: flex;
    justify-content: center;
    background: none;
    padding: clamp(1.75rem, 2.1vw, 2.75rem) var(--gutter);
    /* always on show at this width, whatever the mobile toggle last set */
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: none;
  }

  .site-nav__list {
    flex-direction: row;
    gap: clamp(2.25rem, 3.6vw, 4.5rem);
  }

  .site-nav__link {
    font-size: clamp(1.006rem, 0.828rem + 0.2185vw, 1.15rem);   /* 16.1 -> 18.4, +15% */
    color: #fff;
    text-shadow: 0 0 24px rgba(0, 0, 0, 0.55);
  }
  .site-nav__link:focus-visible { outline-color: #fff; }
}

/* ================================================================ ABOUT == */
.about {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(1.375rem, 0.86rem + 1.32vw, 3.125rem);  /* 22 -> 50 */
  text-align: center;
}

.flower { height: auto; }
.flower--large { width: clamp(2rem, 1.75rem + 0.65vw, 2.875rem); }  /* 32 -> 46 */
.flower--small { width: clamp(1.625rem, 1.42rem + 0.53vw, 2.375rem); } /* 26 -> 38 */

.display {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-display);
  line-height: 1.3;
  max-width: var(--w-prose);
  text-wrap: balance;
}
/* Desktop artboard breaks this heading after the first sentence. */
@media (min-width: 760px) {
  .display span { display: block; }
}

.prose {
  display: flex;
  flex-direction: column;
  gap: clamp(1rem, 0.71rem + 0.75vw, 2rem);          /* 16 -> 32 */
  max-width: var(--w-prose);
  line-height: 1.5;
}
@media (min-width: 760px) { .prose { line-height: 1.35; } }

/* ============================================================ OFFERINGS == */
.offerings {
  background: var(--sand);
  padding-block: var(--sp-band);
}

.offerings__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2.5rem, 1.1rem + 6.28vw, 3rem);
  /* Stacked on a phone, the cards hold a portrait width so a full-bleed 4:5
     image doesn't balloon. This cap only applies while there is one column —
     left on at tablet widths it stranded the cards in a 430px strip with
     ~160px of dead space either side. */
  max-width: 430px;
  margin-inline: auto;
}

/* Tablet: two columns, so the band fills its width instead of leaving a gutter
   of empty page beside a single narrow column. */
@media (min-width: 620px) {
  .offerings__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(2rem, 3vw, 3rem) clamp(1.25rem, 2.4vw, 2rem);
    max-width: 860px;
  }
  /* the odd third card sits centred rather than orphaned against the left */
  .card:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    justify-self: center;
    width: calc(50% - clamp(0.625rem, 1.2vw, 1rem));
  }
}

@media (min-width: 900px) {
  .offerings__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(1rem, 1.75vw, 21px);
    max-width: var(--w-grid);
  }
  /* three across again — release the centred-orphan rule */
  .card:last-child:nth-child(odd) {
    grid-column: auto;
    justify-self: stretch;
    width: auto;
  }
}

.card {
  display: flex;
  flex-direction: column;
}

.card__media {
  width: 100%;
  aspect-ratio: 386 / 475;
  border-radius: 2px;
  margin-bottom: clamp(1.125rem, 0.79rem + 0.87vw, 2.188rem);  /* 18 -> 35 */
}

/* Crops carried over verbatim from the artboards. */
.card__media--yoga {
  background: url(assets/yoga-web-sm.jpg) 65% 42% / 130% 130% no-repeat;
}
.card__media--meditation {
  background: url(assets/meditation-new.jpg) center / cover no-repeat;
}
.card__media--movement {
  background: url(assets/movement-web-sm.jpg) 50% 100% / 100% 120% no-repeat;
}

@media (min-width: 900px) {
  .card__media--yoga {
    background-image: url(assets/yoga-web.jpg);
    background-position: 65.020% 41.886%;
    background-size: 112.435% 121.825%;
  }
  .card__media--movement {
    background-image: url(assets/movement-web.jpg);
    background-position: 50% 100%;
    background-size: 100% 108.351%;
  }
}

.card__title {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--fs-card);
  line-height: 1.2;
  margin-bottom: clamp(1.125rem, 0.85rem + 0.71vw, 2rem);      /* 18 -> 32 */
}

.card__body { line-height: 1.5; }
@media (min-width: 760px) { .card__body { line-height: 1.35; } }

/* ========================================================== TESTIMONIAL == */
.testimonial {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  /* the artboard runs a tighter band here than the open sections */
  padding-block: clamp(2.5rem, 0.53rem + 8.07vw, 9.25rem);      /* 40 -> 148 */
}

/* The quote, flanked on desktop by the two keyline arrows. */
.testimonial__stage {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  gap: clamp(1rem, 2.6vw, 3rem);
  margin-top: clamp(1.25rem, 0.44rem + 2.09vw, 3.875rem);      /* 20 -> 62 */
}

.testimonial__viewport {
  width: 100%;
  max-width: var(--w-quote);
  /* horizontal swipe is handled in JS; this keeps vertical scrolling native */
  touch-action: pan-y;
}

/* Keyline arrows — desktop only. On touch the swipe and the dots cover it. */
.tnav {
  display: none;
  flex: 0 0 auto;
  padding: 12px 4px;
  background: none;
  border: 0;
  color: var(--ink);
  cursor: pointer;
  opacity: 0.55;
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.tnav svg { display: block; }

.tnav:hover,
.tnav:focus-visible { opacity: 1; }
.tnav--prev:hover { transform: translateX(-4px); }
.tnav--next:hover { transform: translateX(4px); }

@media (min-width: 900px) {
  .tnav { display: block; }
}

/* All three quotes share one grid cell so they cross-fade in place. The row is
   as tall as the LONGEST quote and stays that height for all three — a block
   that resizes as it rotates is far more distracting than a little space under
   a short quote. Shorter quotes centre in the fixed box rather than hanging
   from the top. */
.testimonial__track {
  display: grid;
  align-items: center;
}

.tslide {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease, visibility 0s linear 0.5s;
}
.tslide.is-active {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.5s ease, visibility 0s linear 0s;
}

.testimonial__quote {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--fs-quote);
  line-height: 1.35;
  text-wrap: pretty;
}

.testimonial__author {
  font-family: var(--font-sans);
  font-style: normal;
  font-weight: 500;
  font-size: var(--fs-label);
  margin-top: clamp(1.25rem, 0.71rem + 1.39vw, 3rem);          /* 20 -> 48 */
}

.dots {
  display: flex;
  gap: 10px;
  margin-top: clamp(1.5rem, 1.19rem + 0.79vw, 3.25rem);        /* 24 -> 52 */
}

.dot {
  position: relative;
  width:  clamp(9px, 0.8vw, 12px);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 0;
  padding: 0;
  background: var(--dot-off);
  cursor: pointer;
  transition: background-color 0.4s ease;
}
.dot.is-active { background: var(--dot-on); }

/* The dot stays artboard-small, but the tap target does not. */
.dot::after {
  content: "";
  position: absolute;
  inset: -8px -5px;
}
.dot:focus-visible { outline-offset: 5px; }

/* ============================================================== CONNECT == */
.connect {
  background: var(--mist);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  /* the connect band is the shallowest block on the page */
  padding-top:    clamp(2.5rem, 2.03rem + 1.94vw, 4.125rem);   /* 40 -> 66 */
  padding-bottom: clamp(2.5rem, 1.70rem + 3.29vw, 5.250rem);   /* 40 -> 84 */
}

.connect__lede {
  margin-top: clamp(1.25rem, 0.9rem + 0.9vw, 2rem);            /* 20 -> 32 */
  line-height: 1.35;
  max-width: var(--w-prose);
}

.social {
  display: flex;
  gap: clamp(2.5rem, 2.154rem + 1.42vw, 3.688rem);             /* 40 -> 59 */
  margin-top: clamp(1.75rem, 1.55rem + 0.52vw, 2.625rem);      /* 28 -> 42 */
}

.social__link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(0.375rem, 0.19rem + 0.48vw, 1rem);                /* 6 -> 16 */
  text-decoration: none;
}
.social__link:hover span { text-decoration: underline; }

/* One identical square box per icon, so all three labels sit on a common
   line. All three icons are square today, but object-fit means a future
   non-square glyph is centred at its own aspect ratio, not stretched. */
.social__link img {
  width:  clamp(1.75rem, 1.52rem + 0.6vw, 2.25rem);            /* 28 -> 36 */
  height: clamp(1.75rem, 1.52rem + 0.6vw, 2.25rem);
  object-fit: contain;
}

.social__link span {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--fs-social);
  line-height: 1;
}

/* Phones: stack the three contact items instead of running them across. The
   email label is roughly twice the width of INSTAGRAM or WHATSAPP, so a
   three-across row was ~386px wide at any viewport — wider than a phone
   screen. Stacking removes that pressure entirely, so the labels stay at
   full size here and the gap becomes vertical breathing room. */
@media (max-width: 759px) {
  .social {
    flex-direction: column;
    align-items: center;
    gap: clamp(1.75rem, 1.4rem + 1.5vw, 2.25rem);                /* 28 -> 36 */
  }
}

/* ============================================================== CLOSING == */
.closing { text-align: center; }

.closing__line {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--fs-closing);
  line-height: 1.35;
  max-width: var(--w-closing);
  margin-inline: auto;
  text-wrap: balance;
}

/* =============================================================== FOOTER == */
.site-footer {
  padding-inline: var(--gutter);
  padding-bottom: clamp(2rem, 1.5625rem + 1.79vw, 3.5rem);     /* 32 -> 56 */
  text-align: center;
}

.site-footer__wordmark {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--fs-footmark);
  line-height: 1;
  white-space: nowrap;
}

/* =========================================================== ANCHORING === */
/* so a nav jump doesn't land with the heading jammed against the top edge */
#about, #offerings, #connect, #testimonials {
  scroll-margin-top: clamp(1rem, 2vw, 2.5rem);
}

/* ============================================================= REVEAL ==== */
/* Elements only start hidden once JS has confirmed it can reveal them again
   — without this, a JS failure would leave the whole page invisible. */
[data-reveal] .reveal {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity   0.9s cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1);
  transition-delay: var(--reveal-delay, 0s);
  will-change: opacity, transform;
}

[data-reveal] .reveal.is-visible {
  opacity: 1;
  transform: none;
  will-change: auto;
}

/* Photography settles rather than slides — a touch of scale reads softer. */
[data-reveal] .card.reveal { transform: translateY(24px); }
[data-reveal] .card.reveal .card__media {
  transform: scale(1.03);
  transition: transform 1.1s cubic-bezier(0.22, 0.61, 0.36, 1);
  transition-delay: var(--reveal-delay, 0s);
}
[data-reveal] .card.reveal.is-visible .card__media { transform: none; }

/* The three cards arrive in sequence, left to right. */
.card:nth-child(2) { --reveal-delay: 0.12s; }
.card:nth-child(3) { --reveal-delay: 0.24s; }

/* Within a block, the supporting copy follows its heading. */
.prose.reveal        { --reveal-delay: 0.1s;  }
.connect__lede.reveal{ --reveal-delay: 0.1s;  }
.social.reveal       { --reveal-delay: 0.2s;  }
.testimonial__stage.reveal    { --reveal-delay: 0.1s; }
.dots.reveal         { --reveal-delay: 0.2s;  }

/* ============================================================== MOTION === */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  /* Show everything outright — no fade, no travel. */
  [data-reveal] .reveal,
  [data-reveal] .card.reveal,
  [data-reveal] .card.reveal .card__media {
    opacity: 1 !important;
    transform: none !important;
  }
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}