/* ==========================================================================
   Habits to Healthy — rebuilt design system
   Faithful recreation of the original Squarespace 7.1 site.
   Colors sampled from screenshots of the original site.
   ========================================================================== */

:root {
  --header-h: 121px;        /* fixed header height: 92px logo + 2*14px padding + 1px border */
  --rose: #c4877c;          /* primary accent: headings, buttons */
  --rose-soft: #d9a79b;     /* hover / soft blush */
  --rose-section: #c79388;  /* "Come Follow Along" / fun-facts band (sampled) */
  --lavender: #e6e4e9;      /* About page background (sampled) */
  --cream: #faf9f7;         /* off-white page background */
  --hero-tint: #eceff4;     /* home hero background fill (sampled) */
  --brown: #625449;         /* footer (sampled) */
  --ink: #1a1a1a;           /* body text */
  --font: "Archivo", "Helvetica Neue", Arial, sans-serif;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 18px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
h1, h2, h3, h4 { font-weight: 500; line-height: 1.2; margin: 0 0 0.6em; }
p { margin: 0 0 1.2em; }
a { color: var(--rose); }

.container { max-width: 1240px; margin: 0 auto; padding: 0 6vw; }

/* ---------- signature pill-highlight heading treatment ---------- */
.pill {
  background: #fff;
  border-radius: 999px;
  padding: 0.02em 0.45em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  white-space: normal;
}

/* ---------- buttons ---------- */
.btn {
  display: inline-block;
  background: var(--rose);
  color: #fff;
  border: 2px solid rgba(255, 255, 255, 0.85);
  border-radius: 4px;
  padding: 1.05em 2.4em;
  font-family: var(--font);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s ease;
}
.btn:hover { background: var(--rose-soft); }

.btn-outline {
  display: inline-block;
  background: transparent;
  color: var(--rose);
  border: 1px solid var(--rose);
  border-radius: 2px;
  padding: 1.1em 2.6em;
  font-family: var(--font);
  font-size: 0.95rem;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
.btn-outline:hover { background: var(--rose); color: #fff; }

.btn-white {
  display: inline-block;
  background: #fff;
  color: var(--rose);
  border: 1px solid #fff;
  border-radius: 4px;
  padding: 0.95em 1.9em;
  font-size: 0.95rem;
  text-decoration: none;
  transition: background 0.2s ease;
}
.btn-white:hover { background: var(--cream); }

/* ---------- header / navigation ---------- */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  /* translucent, like the original — page content tints it as it scrolls under */
  background: rgba(255, 255, 255, 0.72);
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}
.site-header .container {
  max-width: 1560px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 14px;
  padding-bottom: 14px;
  padding-left: 3vw;
  padding-right: 3vw;
}
.logo img { height: 92px; width: auto; }
.site-nav { display: flex; align-items: center; gap: 2.4rem; }
.site-nav a.nav-link {
  color: var(--ink);
  text-decoration: none;
  font-size: 0.94rem;
  white-space: nowrap;
}
.site-nav a.nav-link:hover { opacity: 0.6; }
.site-nav a.nav-link.active { text-decoration: underline; text-underline-offset: 6px; }
.nav-icons { display: flex; align-items: center; gap: 0.9rem; margin-left: 0.6rem; }
.nav-icons a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--ink);
  border-radius: 10px;
  color: var(--ink);
}
.nav-icons a:hover { opacity: 0.6; }
.nav-icons svg { width: 17px; height: 17px; }

.nav-toggle {
  display: none;
  background: none;
  border: 0;
  padding: 8px;
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  width: 26px;
  height: 2px;
  background: var(--ink);
  margin: 6px 0;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

/* Each page's first section slides up behind the fixed translucent header, so its
   background (hero image or tint) stays slightly visible through the nav bar. The
   transparent border reserves room for the header without hiding the background. */
main > section:first-child {
  border-top: var(--header-h) solid transparent;
  background-origin: border-box;
  background-clip: border-box;
}

/* ---------- generic sections ---------- */
.section { padding: 6rem 0; }
.section-heading { font-size: clamp(2rem, 3.4vw, 2.7rem); font-weight: 400; }

/* ---------- home: hero ---------- */
.hero {
  /* the wide image is the recovered photo with its own canvas texture mirror-extended
     leftward, so the whole hero (incl. behind the nav) is one seamless texture */
  background-color: #eff2f7; /* canvas-average fallback for ultrawide screens */
  background-image: url("../images/hero-flatlay-wide.jpg?v=2");
  background-repeat: no-repeat;
  background-position: right top;
  background-size: auto 100%;
  padding: 8rem 0 9rem;
}
.hero-inner { max-width: 700px; }
.hero h1 {
  color: var(--rose);
  font-size: clamp(2.2rem, 4vw, 3rem);
  font-weight: 400;
  text-align: center;
  margin-bottom: 1.2em;
}
.hero p { font-size: 1.05rem; max-width: 640px; }
.hero .btn { margin-top: 1.6rem; }

/* ---------- home: welcome ---------- */
.welcome { background: #fff; }
.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: center;
}
.round-photo {
  border-radius: 50%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  width: min(100%, 520px);
  margin: 0 auto;
}
.welcome h2 {
  color: var(--rose);
  font-size: clamp(3rem, 6vw, 4.6rem);
  font-weight: 400;
}
.welcome .subheading { font-size: clamp(1.3rem, 2vw, 1.65rem); margin-bottom: 1.4em; }
.welcome p { font-size: 1.05rem; }
.welcome .btn-outline { margin-top: 1.4rem; }

/* ---------- instagram band ---------- */
.follow { background: var(--rose-section); padding: 5.5rem 0 5rem; }
.follow .section-heading { color: #fff; text-align: center; margin-bottom: 3rem; }
.follow.follow-light { background: transparent; }
.follow.follow-light .section-heading { color: var(--rose); }
.follow.follow-grey { background: var(--lavender); }
.ig-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1.4rem;
  max-width: 1560px;
  margin: 0 auto;
  padding: 0 2.5vw;
}
.ig-grid a { display: block; }
.ig-grid img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
/* auto-scrolling carousel — progressive enhancement applied by js/main.js.
   Without JS (or with prefers-reduced-motion) the section stays a static grid. */
.ig-grid.ig-carousel { display: block; padding: 0; max-width: none; overflow: hidden; }
.ig-carousel .ig-track {
  display: flex;
  width: max-content;
  animation: ig-scroll var(--ig-duration, 70s) linear infinite;
  will-change: transform;
}
/* margin (not flex gap) so one set is exactly 25% of the 4-copy track — keeps the loop seamless */
.ig-carousel .ig-track > a { flex: none; width: clamp(220px, 18vw, 310px); margin-right: 1.4rem; }
.ig-carousel:hover .ig-track,
.ig-carousel:focus-within .ig-track { animation-play-state: paused; }
@keyframes ig-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-25%); }
}
@media (prefers-reduced-motion: reduce) {
  .ig-carousel .ig-track { animation: none; }
}

.follow .more { text-align: center; margin-top: 3rem; }
.follow.follow-light .more .btn-white {
  background: var(--rose);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.85);
}

/* ---------- VIP list ---------- */
.vip {
  position: relative;
  background: url("../images/vip-feathers.jpg") center / cover no-repeat;
  padding: 6.5rem 0;
}
.vip::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 253, 250, 0.22);
}
.vip .container { position: relative; text-align: center; }
.vip h2 { font-size: clamp(2rem, 3.4vw, 2.7rem); font-weight: 400; }
.vip p { max-width: 520px; margin: 0 auto 2rem; }
.newsletter { max-width: 430px; margin: 0 auto; text-align: left; }
.newsletter label { font-size: 0.95rem; font-weight: 500; }
.newsletter label .req { font-weight: 400; font-size: 0.85rem; color: #444; }
.newsletter input[type="email"] {
  width: 100%;
  margin-top: 0.4rem;
  padding: 0.85em 0.9em;
  font-family: var(--font);
  font-size: 1rem;
  border: 1px solid #999;
  border-radius: 2px;
  background: #fff;
}
.newsletter .btn { display: block; margin: 1.6rem auto 0; }

/* ---------- footer ---------- */
.site-footer {
  background: var(--brown);
  color: #f3ede8;
  text-align: center;
  padding: 1.9rem 1rem;
  font-size: 0.95rem;
}
.site-footer a { color: var(--rose-soft); }

/* ---------- interior page hero (photo background, e.g. Start Today) ---------- */
.page-hero {
  /* shifted up past bottom-anchor so the plant visibly crosses the translucent
     nav, like the Work with Me banner (the trimmed 70px is plain desk) */
  background: url("../images/vicky-working.jpg") center calc(100% - 70px) / cover no-repeat;
  padding: 5.5rem 0 6rem;
}
.page-hero h1 {
  color: var(--rose);
  font-size: clamp(2.2rem, 4vw, 3rem);
  font-weight: 400;
}
.page-hero .lead { font-size: 1.15rem; margin-bottom: 3rem; }
.page-hero-inner { max-width: 720px; }

/* ---------- banner hero (Work with Me) ---------- */
.banner-hero {
  display: flex;
  align-items: center;
  /* tall banner anchored low so the desk detail shows and the plant reaches the nav */
  min-height: clamp(380px, 34vw, 560px);
  background: url("../images/vicky-working.jpg") center 82% / cover no-repeat;
  padding: 2rem 0;
}
.banner-hero .container { width: 100%; }
.banner-hero h1 { font-size: clamp(2.8rem, 6vw, 4.4rem); font-weight: 400; margin: 0; }

/* shop banner variant: the same seamless wide flatlay as the Home hero,
   fitted at a similar scale so the two pages read identically */
.banner-shop {
  background-color: #eff2f7;
  background-image: url("../images/hero-flatlay-wide.jpg?v=2");
  background-repeat: no-repeat;
  background-position: right top;
  background-size: cover;
  min-height: clamp(320px, 28vw, 460px);
}
.banner-shop h1 { color: var(--rose); }

/* ---------- forms ---------- */
.form { max-width: 560px; }
.form .field { margin-bottom: 1.6rem; }
.form .field-row { display: flex; gap: 1.8rem; }
.form .field-row .field { flex: 1; }
.form label { display: block; font-size: 0.95rem; font-weight: 500; }
.form label .req { font-weight: 400; font-size: 0.85rem; color: #444; }
.form .group-label { font-size: 0.95rem; font-weight: 500; margin-bottom: 0.6rem; }
.form input, .form textarea {
  width: 100%;
  margin-top: 0.4rem;
  padding: 0.85em 0.9em;
  font-family: var(--font);
  font-size: 1rem;
  border: 1px solid #999;
  border-radius: 2px;
  background: #fff;
}
.form textarea { min-height: 140px; resize: vertical; }
.form-success {
  display: none;
  background: #fff;
  border: 1px solid var(--rose);
  border-radius: 4px;
  padding: 1.2rem 1.4rem;
  margin-top: 1.4rem;
}
.form-success.visible { display: block; }

.form-error {
  display: none;
  background: #fff;
  border: 1px solid #c0705f;
  border-radius: 4px;
  padding: 1.2rem 1.4rem;
  margin-top: 1.4rem;
}
.form-error.visible { display: block; }

button[disabled] { opacity: 0.6; cursor: progress; }

/* ---------- long-form storytelling (About / Work with Me) ---------- */
.page-lavender { background: var(--lavender); }
.story { padding: 5rem 0; }
.band-blush { background: #f6eae6; }
.story-col { max-width: 620px; margin: 0 auto; }
.story-heading {
  color: var(--rose);
  font-size: clamp(1.55rem, 2.6vw, 2rem);
  font-weight: 400;
  line-height: 1.45;
  margin: 4.5rem 0 1.2rem;
}
.story-heading:first-child { margin-top: 0; }
.story p { font-size: 1.05rem; }
.story .center { text-align: center; }
.story-img { margin: 4rem auto; max-width: 460px; }
.story-img img { border-radius: 4px; }

/* ---------- about intro ---------- */
.about-intro { padding: 6rem 0 2rem; }
.about-intro .two-col { align-items: start; gap: 4rem; }
.about-intro h1 { font-size: clamp(3rem, 7vw, 4.8rem); font-weight: 500; margin-bottom: 0.8em; }
.about-intro .story-heading { margin-top: 0; }

/* ---------- credentials ("The Important Stuff") ---------- */
.credentials { background: #fff; }
.credentials h2 { color: var(--rose); font-size: clamp(2rem, 3.4vw, 2.7rem); font-weight: 400; }
.credentials ul { list-style: none; margin: 0; padding: 0; }
.credentials li {
  font-size: 1.15rem;
  padding: 0.55rem 0 0.55rem 1.2rem;
  position: relative;
}
.credentials li::before {
  content: "▪";
  position: absolute;
  left: 0;
  font-size: 0.7rem;
  top: 1.05rem;
}

/* ---------- fun facts ---------- */
.fun-facts { background: var(--rose-section); padding: 5.5rem 0; }
.fun-facts h2 { color: #fff; font-size: clamp(2rem, 3.4vw, 2.6rem); font-weight: 400; margin-bottom: 2.6rem; }
.facts-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; }
.fact-card {
  background: #fff;
  border-radius: 10px;
  padding: 3.2rem 2.4rem;
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
}
.fact-card.fact-leaves {
  background:
    linear-gradient(rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.72)),
    url("../images/vicky-credentials.jpg") center / cover no-repeat;
}
.fact-card .fact-label { color: var(--rose); font-size: 0.88rem; text-align: center; }
.fact-card .fact-body { color: var(--rose); font-size: 1.45rem; line-height: 1.4; margin: 0; }

/* ---------- client spotlight carousel (Work with Me) ---------- */
.spotlight { position: relative; background: var(--rose-section); padding: 2.4rem 0 3.6rem; }
.spotlight-inner { max-width: 918px; margin: 0 auto; padding: 0 1.4rem; }
.spotlight h2 { color: #fff; font-size: clamp(1.5rem, 2.4vw, 1.85rem); font-weight: 400; margin-bottom: 1.6rem; }
.spotlight-viewport { position: relative; aspect-ratio: 871 / 625; overflow: hidden; }
.spotlight-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.35s ease;
}
.spotlight-slide.is-active { opacity: 1; transition: none; }
.spotlight-photo { width: 100%; height: 100%; object-fit: cover; }
/* the quote card is a separate layer sitting exactly where it does in the photo */
.spotlight-card { position: absolute; left: var(--l); top: var(--t); width: var(--w); height: var(--h); }
/* two-stage entrance: the photo slides in, then the quote card appears on top.
   Replays whenever a slide becomes active (scroll-in and every arrow click). */
.spotlight.is-visible .spotlight-slide.is-active .spotlight-photo {
  animation: spotlight-photo-in 0.55s cubic-bezier(0.22, 0.61, 0.36, 1) backwards;
}
.spotlight.is-visible .spotlight-slide.is-active .spotlight-card {
  animation: spotlight-card-in 0.45s cubic-bezier(0.22, 0.61, 0.36, 1) 0.32s backwards;
}
@keyframes spotlight-photo-in {
  from { opacity: 0; transform: translateX(7%); }
  to { opacity: 1; transform: none; }
}
@keyframes spotlight-card-in {
  from { opacity: 0; transform: translateY(18px) scale(0.96); }
  to { opacity: 1; transform: none; }
}
.spotlight-cta { text-align: center; margin: 2.6rem 0 0; }
@media (prefers-reduced-motion: reduce) {
  .spotlight.is-visible .spotlight-slide.is-active .spotlight-photo,
  .spotlight.is-visible .spotlight-slide.is-active .spotlight-card { animation: none; }
}
.spotlight-arrow {
  position: absolute;
  top: 55%;
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.32);
  color: #574a44;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease;
  z-index: 1;
}
.spotlight-arrow:hover { background: rgba(255, 255, 255, 0.55); }
.spotlight-arrow svg { width: 22px; height: 22px; }
.spotlight-arrow.prev { left: clamp(10px, 4.5vw, 90px); }
.spotlight-arrow.next { right: clamp(10px, 4.5vw, 90px); }
@media (prefers-reduced-motion: reduce) {
  .spotlight-slide { transition: none; }
}

/* ---------- shop ---------- */
.shop-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin-top: 3rem;
}
/* original card style: product photo, white chip label, rose description */
.shop-card {
  text-decoration: none;
  color: var(--ink);
  transition: transform 0.2s ease;
}
.shop-card:hover { transform: translateY(-3px); }
.shop-card img { height: 160px; width: 100%; object-fit: contain; margin: 0 auto 1.2rem; display: block; }
.shop-card h3 {
  font-size: 1.02rem;
  font-weight: 500;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.14);
  border-radius: 4px;
  padding: 0.15em 0.9em;
  width: fit-content;
  margin: 0 auto 1.1rem;
}
.shop-card p { font-size: 1.05rem; margin: 0; color: var(--rose); line-height: 1.55; }

/* ---------- legal pages ---------- */
.legal { padding: 5rem 0; }
.legal .container { max-width: 820px; }
.legal h1 { color: var(--rose); font-weight: 400; font-size: clamp(2rem, 3.5vw, 2.6rem); }
.legal h2 { font-size: 1.35rem; margin-top: 2.2em; }
.legal p, .legal li { font-size: 1rem; }

/* ---------- scroll-reveal (classes added by js/main.js; no-JS pages stay visible) ---------- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* Pill-heading sweep (About page): the white highlight draws in left→right like a
   highlighter stroke, then the heading text fades in — the original site's effect.
   .reveal-pill / .heading-rest are added by js/main.js, so no-JS pages stay intact. */
.reveal-pill .pill {
  background: linear-gradient(#fff, #fff) no-repeat 0 0 / 0% 100%;
  color: transparent;
  transition: background-size 0.4s ease 0.05s, color 0.3s ease 0.42s;
}
.reveal-pill .heading-rest {
  opacity: 0;
  transition: opacity 0.3s ease 0.42s;
}
.reveal-pill.is-visible .pill { background-size: 100% 100%; color: inherit; }
.reveal-pill.is-visible .heading-rest { opacity: 1; }

/* ---------- utility ---------- */
.text-center { text-align: center; }
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.mt-2 { margin-top: 2rem; }
.mt-4 { margin-top: 4rem; }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .site-nav { gap: 1.5rem; }
  .logo img { height: 72px; }
}

@media (max-width: 900px) {
  .nav-toggle { display: block; }
  .site-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fcfcfb;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: 0.6rem 6vw 1.6rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.07);
  }
  .site-nav.open { display: flex; }
  .site-nav a.nav-link { padding: 0.7rem 0; font-size: 1.05rem; }
  .nav-icons { margin: 1rem 0 0; }

  .two-col { grid-template-columns: 1fr; gap: 3rem; }
  .hero {
    padding: 5rem 0 22rem;
    background-image: url("../images/hero-flatlay.jpg");
    background-size: contain;
    background-position: right bottom;
  }
  .ig-grid { grid-template-columns: repeat(2, 1fr); }
  .facts-grid, .shop-grid { grid-template-columns: 1fr; }
  .form .field-row { flex-direction: column; gap: 0; }
  .section { padding: 4rem 0; }
}

@media (max-width: 520px) {
  :root { --header-h: 89px; }
  .ig-grid { grid-template-columns: 1fr; }
  .logo img { height: 60px; }
}