/* ============================================================
   BellyCare — Styles
   All design values come from config.css. No hard-coded tokens.
   ============================================================ */

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: var(--leading-body);
  color: var(--color-ink);
  background: var(--color-paper);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--font-heading);
  font-weight: 400;
  line-height: var(--leading-tight);
  margin: 0 0 var(--space-gap-sm);
}
h1 { font-size: var(--text-h1); }
h2 { font-size: var(--text-h2); }
h3 { font-size: var(--text-h3); }
h4 {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: var(--text-h4);
  margin: 0 0 var(--space-gap-sm);
}
p { margin: 0 0 var(--space-gap-sm); }
.muted { color: var(--color-brown); }
.italic { font-style: italic; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }

.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding-inline: var(--container-pad);
}
.section { padding-block: var(--space-section); }
.section--cream { background: var(--color-cream); }

.flower { color: var(--color-salmon); }

/* ---------- Badge (salmon pill eyebrow) ---------- */
.badge {
  display: inline-block;
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-ink);
  background: var(--color-salmon-soft);
  border: 1px solid var(--color-salmon);
  padding: 4px 14px;
  border-radius: var(--radius-pill);
  margin-bottom: var(--space-gap-sm);
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--text-sm);
  text-decoration: none;
  padding: 12px 24px;
  border-radius: var(--radius-pill);
  transition: transform 0.25s var(--anim-ease), box-shadow 0.25s var(--anim-ease), filter 0.25s;
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-chip); filter: brightness(1.05); }
.btn:active { transform: translateY(0); }
.btn__icon { width: 16px; height: 16px; flex-shrink: 0; }

.btn--sage  { background: var(--color-sage); color: var(--color-white); }
.btn--dark  { background: var(--color-ink); color: var(--color-white); }
.btn--white { background: var(--color-white); color: var(--color-ink); }

/* Circular arrow button */
.circle-btn {
  width: 40px; height: 40px;
  flex-shrink: 0;
  display: grid; place-items: center;
  text-decoration: none;
  font-size: 1rem;
  color: var(--color-ink);
  background: var(--color-white);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-chip);
  transition: transform 0.25s var(--anim-ease), background 0.25s;
}
.circle-btn:hover { transform: translate(2px, -2px); }
.circle-btn--light { background: var(--color-paper); }
.circle-btn--white { background: var(--color-white); }

/* Chips (white pills with tiny icon) */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-ink);
  background: var(--color-white);
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-chip);
  white-space: nowrap;
}
.chip--salmon { background: var(--color-salmon); color: var(--color-white); }
.chip--outline {
  background: transparent;
  box-shadow: none;
  border: 1px solid var(--color-line);
  color: var(--color-brown);
  font-weight: 600;
  padding: 10px 20px;
  font-size: var(--text-md);
}
.chip--float { animation: float var(--float-duration) ease-in-out infinite; }

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

/* Decorative 2x2 dot grids */
.dots {
  position: absolute;
  display: grid;
  grid-template-columns: repeat(2, 7px);
  gap: 6px;
  z-index: 2;
}
.dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--color-salmon); }
.dots--tl { top: -8px; left: -26px; }
.dots--br { bottom: 18px; right: -26px; }
.dots--cta-tr { top: 28px; right: 28px; }
.dots--cta-bl { bottom: 28px; left: 28px; }
.dots--cta-tr i, .dots--cta-bl i { background: var(--color-white-soft); }

/* Photo cards */
.photo {
  border-radius: var(--radius-img);
  background-color: var(--color-cream);
  background-size: cover;
  background-position: center;
  position: relative;
  overflow: hidden;
}

/* Cotton-textured salmon card (CTA, stat card).
   luminosity blend: weave detail from the fabric photo,
   hue from the palette color underneath. */
.watercolor {
  background-color: var(--surface-salmon-color);
  background-image: var(--surface-salmon-tex);
  background-size: cover;
  background-position: center;
  background-blend-mode: luminosity;
  color: var(--color-white);
}

/* Subtle fabric grain on supporting surfaces:
   a heavy cream wash over the texture keeps the warm hue,
   leaving only a hint of weave */
.section--cream {
  background-color: var(--color-cream);
  background-image:
    linear-gradient(rgba(248, 243, 236, 0.9), rgba(248, 243, 236, 0.9)),
    var(--tex-lavender);
  background-size: auto, 900px;
}
.explore__box {
  background-image:
    linear-gradient(rgba(248, 243, 236, 0.88), rgba(248, 243, 236, 0.88)),
    var(--tex-green);
  background-size: auto, 900px;
}
.footer {
  background-image:
    linear-gradient(rgba(248, 243, 236, 0.9), rgba(248, 243, 236, 0.9)),
    var(--tex-blue);
  background-size: auto, 900px;
}

/* ---------- Nav ---------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--color-cream); /* continuous surface with the hero */
  transition: box-shadow 0.4s var(--anim-ease);
}
.nav.is-scrolled { box-shadow: var(--shadow-nav); }
.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-gap);
  padding-block: 14px;
}
.nav__logo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-heading);
  font-size: 1.3rem;
  text-decoration: none;
}
.nav__links { display: flex; gap: clamp(14px, 2.2vw, 28px); }
.nav__links a {
  text-decoration: none;
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--color-ink);
  transition: color 0.2s;
}
.nav__links a:hover { color: var(--color-salmon); }

/* ---------- Hero ---------- */
.hero {
  background: var(--color-cream);
  padding-block: clamp(24px, 3.5vw, 48px) var(--space-section);
  overflow: hidden;
}
.hero__grid {
  display: grid;
  grid-template-columns: 1.45fr 0.92fr 0.68fr;
  gap: var(--space-gap-lg);
  align-items: stretch;
}
.hero__rating {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: var(--space-gap);
}
.hero__rating-pill {
  background: var(--color-salmon);
  color: var(--color-white);
  font-size: var(--text-sm);
  font-weight: 700;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
}
.hero__rating-note { font-size: var(--text-sm); color: var(--color-brown); font-weight: 600; }
.hero__left h1 { margin-block: 0 var(--space-gap); }
.hero__left .muted { max-width: 30em; margin-bottom: var(--space-gap); }

.hero__trust {
  display: flex;
  align-items: center;
  gap: var(--space-gap-sm);
  margin-top: var(--space-gap-lg);
}
.hero__trust p { margin: 0; font-size: var(--text-sm); color: var(--color-brown); max-width: 16em; }
.hero__trust strong { color: var(--color-ink); }
.avatars { display: flex; }
.avatars span {
  width: 40px; height: 40px;
  border-radius: 50%;
  background-image: var(--bg);
  background-size: cover;
  background-position: center;
  background-color: var(--color-cream);
  border: 2px solid var(--color-paper);
}
.avatars span + span { margin-left: -12px; }

/* Left column sits flush against the photo (no gutter).
   The title overflows onto the photo; a thick white stroke
   around the glyphs (halo) keeps it readable over the image. */
.hero__left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-right: calc(var(--space-gap-lg) * -1); /* swallow the grid gap */
}
.hero__left h1 {
  margin-right: clamp(-110px, -6vw, -48px); /* overflow onto the photo */
  position: relative;
  z-index: 2;
}
/* White halo = a stroked white copy of the title painted behind
   the real text (paint-order on HTML text is unreliable on iOS) */
.title-halo {
  position: absolute;
  inset: 0;
  color: var(--color-white);
  -webkit-text-stroke: var(--title-halo) var(--color-white);
  pointer-events: none;
  user-select: none;
}
.title-fill { position: relative; }
.hero__left > p.muted { padding-right: var(--space-gap-lg); }
.hero__trust { margin-top: auto; padding-top: var(--space-gap-lg); }

.hero__center { position: relative; z-index: 1; }
.photo--hero {
  background-image: var(--img-hero);
  width: 100%;
  height: 100%;
  min-height: 460px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  padding: 20px;
}
.hero__chip-top { position: absolute; top: 26%; right: -14px; }
.hero__chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 10px;
  position: relative;
  z-index: 1;
}
.hero__chip-row--last { margin-bottom: 0; }

.hero__right { display: flex; flex-direction: column; gap: var(--space-gap-sm); }
.hero__right h3 { margin: 0; }
.hero__right .muted { font-size: var(--text-sm); margin: 0; }
.hero__play {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: var(--text-sm);
  text-decoration: none;
  margin-block: 6px;
}
.hero__play-icon {
  width: 34px; height: 34px;
  display: grid; place-items: center;
  font-size: 0.6rem;
  color: var(--color-white);
  background: var(--color-salmon);
  border-radius: 50%;
}
.photo--side {
  background-image: var(--img-sidecard);
  flex-grow: 1;
  min-height: 240px;
}
.photo__chip { position: absolute; top: 16px; right: 16px; z-index: 1; }

/* ---------- Space to Listen ---------- */
.space__head { max-width: 560px; margin-bottom: var(--space-gap-lg); }
.space__head h2 { margin-bottom: 6px; }
.space__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-gap);
  align-items: start;
}
.space-card--photo .photo--room {
  background-image: var(--img-room);
  aspect-ratio: 4 / 3.4;
  margin-bottom: var(--space-gap-sm);
  padding: 16px;
}
.photo__chips {
  position: absolute;
  bottom: 16px; left: 16px;
  display: flex; gap: 8px;
  z-index: 1;
}
.photo--room .circle-btn { position: absolute; top: 16px; right: 16px; z-index: 1; }
.space-card--photo h4 { margin-bottom: 4px; }
.space-card--photo .muted { font-size: var(--text-sm); }

.space-card--stat {
  border-radius: var(--radius-card);
  padding: 24px;
  margin-top: var(--space-gap-lg); /* slight offset like the reference */
}
.space-card__top { display: flex; align-items: center; gap: 10px; }
.space-card__top .chip { margin-left: auto; }
.space-card__dots { letter-spacing: 2px; }
.space-card__num {
  font-family: var(--font-heading);
  font-size: clamp(2.6rem, 4vw, 3.4rem);
  line-height: 1;
  margin: var(--space-gap) 0 4px;
}
.space-card__caption { font-weight: 800; margin-bottom: 4px; }
.space-card__body { font-size: var(--text-sm); color: var(--color-white-soft); }
.space-card__nav {
  display: flex; align-items: center; gap: 12px;
  margin-top: var(--space-gap);
}
.space-card__nav i { flex: 1; height: 1px; background: var(--color-white-soft); }

.space-card--expert {
  background: var(--color-cream);
  border-radius: var(--radius-card);
  padding: 20px;
}
.space-card__row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-gap-sm);
  margin-bottom: var(--space-gap-sm);
}
.space-card__row h4 { margin-bottom: 2px; }
.space-card__row .muted { font-size: var(--text-sm); margin: 0; }
.photo--expert { background-image: var(--img-expert); aspect-ratio: 4 / 3; margin-bottom: var(--space-gap-sm); }
.space-card__counters { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-gap-sm); }
.counter-num {
  font-family: var(--font-heading);
  font-size: 1.9rem;
  line-height: 1.1;
  margin-bottom: 2px;
}
.space-card__counters .muted { font-size: var(--text-sm); margin: 0; }

/* ---------- Services (list rows) ---------- */
.services__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--space-gap);
  margin-bottom: var(--space-gap-sm);
}
.services__head .muted { margin: 0; }
.services__list { list-style: none; margin: 0; padding: 0; }
.service {
  display: grid;
  grid-template-columns: 56px 1fr 1.2fr 56px;
  align-items: center;
  gap: var(--space-gap);
  padding-block: clamp(28px, 4vw, 44px);
  border-bottom: 1px solid var(--color-line);
}
.service:first-child { border-top: 1px solid var(--color-line); margin-top: var(--space-gap); }
.service__icon {
  font-size: 1.5rem;
  color: var(--color-salmon);
  line-height: 1;
}
.service h3 { margin: 0; }
.service .muted { margin: 0; font-size: var(--text-sm); }

/* ---------- Steps ---------- */
.steps { background: var(--color-paper); }
.steps__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(var(--space-gap-lg) * 1.4);
  align-items: center;
}
.photo--steps { background-image: var(--img-steps); aspect-ratio: 4 / 4.4; }
.steps__content h2 { margin-bottom: var(--space-gap-sm); }
.steps__features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-gap);
  margin-block: var(--space-gap-lg);
}
.steps__features .service__icon { display: block; margin-bottom: 10px; }
.steps__features h4 { margin-bottom: 6px; }
.steps__features .muted { font-size: var(--text-sm); margin: 0; }

/* ---------- What Makes Us Best ---------- */
.best__head { text-align: center; margin-bottom: var(--space-gap-lg); }
.best__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-gap);
  align-items: start;
}
.best-card {
  background: var(--color-paper);
  border-radius: var(--radius-card);
  padding: 36px 30px;
}
.best-card--offset { margin-top: var(--space-gap-lg); }
.best-card .service__icon { display: block; margin-bottom: var(--space-gap); }
.best-card h4 { max-width: 14em; }
.best-card .muted { font-size: var(--text-sm); margin: 0; }

/* ---------- Slogan (floating pills) ---------- */
.slogan__wrap {
  position: relative;
  text-align: center;
  padding-block: var(--space-gap-lg);
}
.slogan__text {
  max-width: 21em;
  margin-inline: auto;
  font-size: clamp(1.5rem, 3vw, 2.3rem);
}
.slogan__img {
  display: inline-block;
  width: 1.7em; height: 1.15em;
  vertical-align: -0.18em;
  background-image: var(--img-slogan);
  background-size: cover;
  background-position: center;
  border-radius: var(--radius-sm);
}
.float-pill {
  position: absolute;
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-white);
  padding: 8px 18px;
  border-radius: var(--radius-pill);
  rotate: var(--rot, 0deg);
  box-shadow: var(--shadow-chip);
  animation: float var(--float-duration) ease-in-out infinite;
}
.float-pill--brown  { background: var(--color-pill-brown);  animation-delay: -1s; }
.float-pill--blue   { background: var(--color-pill-blue);   animation-delay: -2.5s; }
.float-pill--green  { background: var(--color-pill-green);  animation-delay: -4s; }
.float-pill--salmon { background: var(--color-pill-salmon); animation-delay: -5.5s; }

/* ---------- Testimonials (pinned notes) ---------- */
.testimonials { background: var(--color-paper); overflow: hidden; }
.testimonials__head { margin-bottom: calc(var(--space-gap-lg) * 1.3); }
.notes {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-gap);
  align-items: start;
}
.note {
  margin: 0;
  position: relative;
  background: var(--color-white);
  border-radius: var(--radius-sm);
  padding: 44px 22px 26px;
  box-shadow: var(--shadow-card);
  rotate: var(--rot, 0deg);
  transition: rotate 0.35s var(--anim-ease), transform 0.35s var(--anim-ease);
}
.note:hover { rotate: 0deg; transform: translateY(-6px); }
.note:nth-child(even) { margin-top: var(--space-gap-lg); }
/* pushpin: colored ball + needle */
.pin {
  position: absolute;
  top: 14px; left: 50%;
  width: 16px; height: 16px;
  margin-left: -8px;
  border-radius: 50%;
  background: var(--pin, var(--color-salmon));
  box-shadow: inset -2px -3px 4px rgba(0, 0, 0, 0.25), 0 4px 6px rgba(13, 5, 3, 0.25);
}
.pin::after {
  content: '';
  position: absolute;
  top: 100%; left: 50%;
  width: 2px; height: 9px;
  margin-left: -1px;
  background: linear-gradient(rgba(13, 5, 3, 0.55), rgba(13, 5, 3, 0.15));
}
.note figcaption {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-salmon);
  margin-bottom: 10px;
}
.note__avatar {
  width: 28px; height: 28px;
  border-radius: 50%;
  background-image: var(--bg);
  background-size: cover;
  background-position: center;
  background-color: var(--color-cream);
}
.note blockquote {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-ink);
}

/* ---------- Explore (chips + metrics container) ---------- */
.explore__box {
  background: var(--color-cream);
  border-radius: var(--radius-card);
  padding: clamp(32px, 5vw, 64px);
}
.explore__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-gap);
  margin-bottom: var(--space-gap-lg);
}
.explore__head h2 { max-width: 14em; margin: 0; }
.explore__chips { display: flex; flex-wrap: wrap; gap: var(--space-gap-sm); }
.explore__metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-gap-lg);
  margin-top: calc(var(--space-gap-lg) * 1.5);
}
.metric-num {
  font-family: var(--font-heading);
  font-size: clamp(2.4rem, 4vw, 3.4rem);
  line-height: 1;
  margin-bottom: var(--space-gap-sm);
}
.explore__metrics .muted { font-size: var(--text-sm); margin: 0; }

/* ---------- FAQ ---------- */
.faq__wrap { max-width: 820px; }
.faq__list { display: grid; gap: var(--space-gap-sm); margin-top: var(--space-gap-lg); }
.faq__item {
  background: var(--color-paper);
  border-radius: var(--radius-card);
  padding: 4px 26px;
}
.faq__item summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-gap);
  font-family: var(--font-heading);
  font-size: var(--text-h4);
  padding-block: 18px;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__icon {
  flex-shrink: 0;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--color-salmon-soft);
  position: relative;
  transition: transform 0.35s var(--anim-ease), background 0.35s var(--anim-ease);
}
.faq__icon::before, .faq__icon::after {
  content: '';
  position: absolute; top: 50%; left: 50%;
  width: 11px; height: 2px;
  background: var(--color-ink);
  transform: translate(-50%, -50%);
}
.faq__icon::after { transform: translate(-50%, -50%) rotate(90deg); transition: transform 0.35s var(--anim-ease); }
.faq__item[open] .faq__icon { transform: rotate(180deg); background: var(--color-salmon); }
.faq__item[open] .faq__icon::after { transform: translate(-50%, -50%) rotate(0deg); }
.faq__item > p { padding-bottom: var(--space-gap); margin: 0; }

/* ---------- Footer CTA (watercolor card) ---------- */
.cta { padding-bottom: var(--space-gap-lg); }
.cta__card {
  position: relative;
  border-radius: var(--radius-card);
  padding: clamp(56px, 8vw, 110px) var(--container-pad);
  text-align: center;
  display: grid;
  justify-items: center;
  overflow: hidden;
}
.cta__logo {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  margin-bottom: var(--space-gap-sm);
}
.cta__logo .flower { color: var(--color-white); }
.cta__card h2 { max-width: 17em; margin-bottom: var(--space-gap-lg); }

/* ---------- Footer ---------- */
.footer { background: var(--color-cream); padding-block: var(--space-gap-lg) var(--space-gap); }
.footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: var(--space-gap-lg);
  padding-bottom: var(--space-gap-lg);
}
.footer__logo {
  font-family: var(--font-heading);
  font-size: 1.4rem;
  margin-bottom: var(--space-gap-sm);
}
.footer__brand .muted { font-size: var(--text-sm); max-width: 22em; }
.footer h4 { font-family: var(--font-body); font-weight: 800; font-size: var(--text-md); }
.footer a {
  display: block;
  text-decoration: none;
  font-size: var(--text-sm);
  color: var(--color-brown);
  margin-bottom: 8px;
  transition: color 0.2s;
}
.footer a:hover { color: var(--color-salmon); }
.footer__bottom {
  border-top: 1px solid var(--color-line);
  padding-top: var(--space-gap);
  font-size: var(--text-sm);
}

/* ---------- Appear animation (staggered fade-up) ---------- */
[data-appear] {
  opacity: 0;
  transform: translateY(var(--anim-distance));
  transition:
    opacity var(--anim-duration) var(--anim-ease),
    transform var(--anim-duration) var(--anim-ease);
  transition-delay: var(--appear-delay, 0ms);
  will-change: opacity, transform;
}
[data-appear].is-visible {
  opacity: 1;
  transform: translateY(0);
}
/* floating pills combine rotate + appear, so keep rotation outside transform */
.float-pill[data-appear] { transform: translateY(var(--anim-distance)); }
.float-pill[data-appear].is-visible { transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  [data-appear] { opacity: 1; transform: none; transition: none; }
  .chip--float, .float-pill { animation: none; }
  html { scroll-behavior: auto; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .hero__grid { grid-template-columns: 1fr 1fr; }
  .hero__right { grid-column: span 2; grid-template-columns: 1fr 1fr; align-items: center; }
  .photo--side { grid-row: span 4; }
  .notes { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 880px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__left { margin-right: 0; }
  .hero__left h1 { margin-right: 0; }
  /* plain black title on mobile — no halo layer at all */
  .title-halo { display: none; }
  .hero__right { grid-column: auto; grid-template-columns: 1fr; }
  .photo--side { grid-row: auto; }
  .space__grid { grid-template-columns: 1fr; }
  .space-card--stat { margin-top: 0; }
  .service { grid-template-columns: 40px 1fr 48px; }
  .service .muted { grid-column: 2; }
  .steps__grid { grid-template-columns: 1fr; }
  .best__grid { grid-template-columns: 1fr; }
  .best-card--offset { margin-top: 0; }
  .notes { grid-template-columns: 1fr; }
  .note:nth-child(even) { margin-top: 0; }
  .explore__metrics { grid-template-columns: 1fr 1fr; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .nav__links { display: none; }
  .services__head { flex-direction: column; align-items: flex-start; }
  .float-pill { display: none; }
  .dots { display: none; }
}